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

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

@@ -4,53 +4,59 @@
<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">
<div class="item">
<img src="@/assets/images/pay/stripe.png" alt="" />
<span>Credit / Debit Card</span>
<!-- 未支付 -->
<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>
<div class="agreement" v-if="paymentStatus !== ORDER_STATUS.SUCCESS">
<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.
</div></el-checkbox
>
</div>
<div class="title" v-if="paymentStatus !== ORDER_STATUS.SUCCESS">
<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.
<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.
</div></el-checkbox
>
</div>
<div class="buttons">
<button custom="black" @click="onPayWith">
<span class="text">Pay with</span>
<span class="icon pay"><svg-icon name="pay-stripe" /></span>
</button>
</div>
<div class="buttons">
<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.
</div>
<div class="buttons">
<button custom="black" @click="getOrderStatus">I Have Completed payment</button>
</div>
<div class="buttons">
<span class="text" @click="onBack">Back</span>
<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.
</div>
<div class="buttons">
<button custom="black" @click="onPayWith">
<span class="text">Pay with</span>
<span class="icon pay"><svg-icon name="pay-stripe" /></span>
</button>
</div>
<div class="buttons">
<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.
</div>
<div class="buttons">
<button custom="black" @click="getOrderStatus">I Have Completed payment</button>
</div>
<div class="buttons">
<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,36 +127,28 @@
}
const ids = [...props.ids]
if (ids.length === 0) return
CreateOrder(ids, true).then((res: any) => {
const url = res.paymentLink
const paymentId = res.paymentId
openView(url)
router.replace({
query: {
...query.value,
paymentId
}
})
})
CreateOrder(ids, true).then(createOrderCall)
}
const statusTips = {
[ORDER_STATUS.PENDING]: '订单未支付',
[ORDER_STATUS.FAILED]: '订单支付失败',
[ORDER_STATUS.CANCELED]: '订单已取消'
const createOrderCall = (res: any) => {
const url = res.paymentLink
const paymentId = res.paymentId
openView(url)
router.replace({
query: {
...query.value,
paymentId
}
})
}
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