aidlab/Aida_Purchaser_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123123

Browse Source
This commit is contained in:
李志鹏
2026-05-29 14:55:54 +08:00
parent fe04ee3d1a
commit b7250c51bf
2 changed files with 106 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/shoppingCart.ts
View File

@@ -74,11 +74,11 @@ export const CreateOrder = (data, loading?: boolean) => {
* @param loading - 是否显示loading
* @returns
*/
export const GetOrderStatus = (paymentId: string, loading?: boolean) => {
export const GetOrderStatus = (paymentId: string) => {
return request({
url: `/buyer/buyer/payment/status/${paymentId}`,
method: 'get',
loading
loading: true,
})
}
export const ORDER_STATUS = {

58
src/views/pay/payment.vue
View File

@@ -4,28 +4,31 @@
<span class="icon"><svg-icon name="back" size="30" /></span>
<span class="text">Payment Details</span>
</div>
<div class="paylist" v-if="paymentStatus !== ORDER_STATUS.SUCCESS">
<!-- 未支付 -->
<template v-if="paymentStatus !== ORDER_STATUS.SUCCESS">
<div class="paylist">
<div class="item">
<img src="@/assets/images/pay/stripe.png" alt="" />
<span>Credit / Debit Card</span>
</div>
</div>
<div class="agreement" v-if="paymentStatus !== ORDER_STATUS.SUCCESS">
<div class="agreement">
<el-checkbox v-model="agreement">
<div class="text">
I agree to the <span>Terms & Conditions</span> and <span>Privacy Policy</span>.
All digital item sales are final and non-refundable.
I agree to the <span>Terms & Conditions</span> and
<span>Privacy Policy</span>. All digital item sales are final and
non-refundable.
</div></el-checkbox
>
</div>
<div class="title" v-if="paymentStatus !== ORDER_STATUS.SUCCESS">
<div class="title">
<span class="icon"><svg-icon name="card" size="20" /></span>
<span class="text">Pay with Paypal</span>
</div>
<template v-if="!query.paymentId">
<div class="tip">
You'll be redirected to a Paypal popup to log in and confirm. No card details are
shared with Stylish Parade — PayPal handles all payment security.
You'll be redirected to a Paypal popup to log in and confirm. No card details
are shared with Stylish Parade — PayPal handles all payment security.
</div>
<div class="buttons">
<button custom="black" @click="onPayWith">
@@ -37,12 +40,13 @@
<span class="text" @click="onBack">Cancel</span>
</div>
</template>
<!-- 已支付，等待确认 -->
<template v-if="query.paymentId">
<div class="tip">
Please keep the window open until the payment is completed. If you are to open the
payment window, please check your browser settings to see if pop-ups are being
blocked. Points may be delayed after successful payment. Please wait 1-3 minutes and
click the credits refresh button.
Please keep the window open until the payment is completed. If you are to open
the payment window, please check your browser settings to see if pop-ups are
being blocked. Points may be delayed after successful payment. Please wait 1-3
minutes and click the credits refresh button.
</div>
<div class="buttons">
<button custom="black" @click="getOrderStatus">I Have Completed payment</button>
@@ -51,6 +55,8 @@
<span class="text" @click="onBack">Back</span>
</div>
</template>
</template>
<!-- 已支付 -->
<template v-if="paymentStatus === ORDER_STATUS.SUCCESS">
<div class="success">
<img src="@/assets/images/pay/success.png" alt="" />
@@ -105,6 +111,14 @@
default: () => []
}
})
onMounted(() => {
if (query.value.paymentLink && query.value.paymentId) {
createOrderCall({
paymentLink: query.value.paymentLink,
paymentId: query.value.paymentId
})
}
})
const agreement = ref(false)
const paymentStatus = ref(ORDER_STATUS.PENDING)
const onPayWith = () => {
@@ -113,7 +127,9 @@
}
const ids = [...props.ids]
if (ids.length === 0) return
CreateOrder(ids, true).then((res: any) => {
CreateOrder(ids, true).then(createOrderCall)
}
const createOrderCall = (res: any) => {
const url = res.paymentLink
const paymentId = res.paymentId
openView(url)
@@ -123,26 +139,16 @@
paymentId
}
})
})
}
const statusTips = {
[ORDER_STATUS.PENDING]: '订单未支付',
[ORDER_STATUS.FAILED]: '订单支付失败',
[ORDER_STATUS.CANCELED]: '订单已取消'
}
const getOrderStatus = () => {
const paymentId = query.value.paymentId as string
GetOrderStatus(paymentId).then((res: any) => {
const status = res as number
if (status === ORDER_STATUS.SUCCESS) {
// paymentStatus.value = status
}else{
const status = res === null ? ORDER_STATUS.PENDING : (res as number)
paymentStatus.value = status
if (status !== ORDER_STATUS.SUCCESS) {
ElMessage.warning('订单未支付')
}
// const tip = statusTips[status]
// console.log(status)
})
// paymentStatus.value = ORDER_STATUS.SUCCESS
}
const openView = (url, width = 600, height = 800) => {
const left = (screen.width - width) / 2