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

68
src/api/shoppingCart.ts
View File

@@ -7,23 +7,23 @@ import request from '@/utils/request'
* @param data.listingIds - 商品ID列表 * @param data.listingIds - 商品ID列表
*/ */
export const AddShoppingCart = (data, loading?: boolean) => { export const AddShoppingCart = (data, loading?: boolean) => {
return request({ return request({
url: '/buyer/buyer/cart/add', url: '/buyer/buyer/cart/add',
method: 'post', method: 'post',
data, data,
loading loading
}) })
} }
/** /**
* 清空购物车 * 清空购物车
*/ */
export const ClearShoppingCart = (loading?: boolean) => { export const ClearShoppingCart = (loading?: boolean) => {
return request({ return request({
url: '/buyer/buyer/cart/clear', url: '/buyer/buyer/cart/clear',
method: 'delete', method: 'delete',
loading loading
}) })
} }
/** /**
@@ -32,11 +32,11 @@ export const ClearShoppingCart = (loading?: boolean) => {
* @returns 购物车列表数据 * @returns 购物车列表数据
*/ */
export const GetShoppingCartList = (loading?: boolean) => { export const GetShoppingCartList = (loading?: boolean) => {
return request({ return request({
url: '/buyer/buyer/cart/list', url: '/buyer/buyer/cart/list',
method: 'get', method: 'get',
loading loading
}) })
} }
/** /**
@@ -45,12 +45,12 @@ export const GetShoppingCartList = (loading?: boolean) => {
* @param params.listingId - 商品ID * @param params.listingId - 商品ID
*/ */
export const RemoveShoppingCartItem = (params, loading?: boolean) => { export const RemoveShoppingCartItem = (params, loading?: boolean) => {
return request({ return request({
url: '/buyer/buyer/cart/remove', url: '/buyer/buyer/cart/remove',
method: 'delete', method: 'delete',
params, params,
loading loading
}) })
} }
/** /**
@@ -60,12 +60,12 @@ export const RemoveShoppingCartItem = (params, loading?: boolean) => {
* @returns * @returns
*/ */
export const CreateOrder = (data, loading?: boolean) => { export const CreateOrder = (data, loading?: boolean) => {
return request({ return request({
url: '/buyer/buyer/order/create', url: '/buyer/buyer/order/create',
method: 'post', method: 'post',
data, data,
loading loading
}) })
} }
/** /**
@@ -74,12 +74,12 @@ export const CreateOrder = (data, loading?: boolean) => {
* @param loading - 是否显示loading * @param loading - 是否显示loading
* @returns * @returns
*/ */
export const GetOrderStatus = (paymentId: string, loading?: boolean) => { export const GetOrderStatus = (paymentId: string) => {
return request({ return request({
url: `/buyer/buyer/payment/status/${paymentId}`, url: `/buyer/buyer/payment/status/${paymentId}`,
method: 'get', method: 'get',
loading loading: true,
}) })
} }
export const ORDER_STATUS = { export const ORDER_STATUS = {
PENDING: 0,//待支付 PENDING: 0,//待支付

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

@@ -4,53 +4,59 @@
<span class="icon"><svg-icon name="back" size="30" /></span> <span class="icon"><svg-icon name="back" size="30" /></span>
<span class="text">Payment Details</span> <span class="text">Payment Details</span>
</div> </div>
<div class="paylist" v-if="paymentStatus !== ORDER_STATUS.SUCCESS"> <!-- 未支付 -->
<div class="item"> <template v-if="paymentStatus !== ORDER_STATUS.SUCCESS">
<img src="@/assets/images/pay/stripe.png" alt="" /> <div class="paylist">
<span>Credit / Debit Card</span> <div class="item">
<img src="@/assets/images/pay/stripe.png" alt="" />
<span>Credit / Debit Card</span>
</div>
</div> </div>
</div> <div class="agreement">
<div class="agreement" v-if="paymentStatus !== ORDER_STATUS.SUCCESS"> <el-checkbox v-model="agreement">
<el-checkbox v-model="agreement"> <div class="text">
<div class="text"> I agree to the <span>Terms & Conditions</span> and
I agree to the <span>Terms & Conditions</span> and <span>Privacy Policy</span>. <span>Privacy Policy</span>. All digital item sales are final and
All digital item sales are final and non-refundable. non-refundable.
</div></el-checkbox </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> </div>
<div class="buttons"> <div class="title">
<button custom="black" @click="onPayWith"> <span class="icon"><svg-icon name="card" size="20" /></span>
<span class="text">Pay with</span> <span class="text">Pay with Paypal</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> </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>
<!-- 已支付 -->
<template v-if="paymentStatus === ORDER_STATUS.SUCCESS"> <template v-if="paymentStatus === ORDER_STATUS.SUCCESS">
<div class="success"> <div class="success">
<img src="@/assets/images/pay/success.png" alt="" /> <img src="@/assets/images/pay/success.png" alt="" />
@@ -105,6 +111,14 @@
default: () => [] default: () => []
} }
}) })
onMounted(() => {
if (query.value.paymentLink && query.value.paymentId) {
createOrderCall({
paymentLink: query.value.paymentLink,
paymentId: query.value.paymentId
})
}
})
const agreement = ref(false) const agreement = ref(false)
const paymentStatus = ref(ORDER_STATUS.PENDING) const paymentStatus = ref(ORDER_STATUS.PENDING)
const onPayWith = () => { const onPayWith = () => {
@@ -113,36 +127,28 @@
} }
const ids = [...props.ids] const ids = [...props.ids]
if (ids.length === 0) return if (ids.length === 0) return
CreateOrder(ids, true).then((res: any) => { CreateOrder(ids, true).then(createOrderCall)
const url = res.paymentLink
const paymentId = res.paymentId
openView(url)
router.replace({
query: {
...query.value,
paymentId
}
})
})
} }
const statusTips = { const createOrderCall = (res: any) => {
[ORDER_STATUS.PENDING]: '订单未支付', const url = res.paymentLink
[ORDER_STATUS.FAILED]: '订单支付失败', const paymentId = res.paymentId
[ORDER_STATUS.CANCELED]: '订单已取消' openView(url)
router.replace({
query: {
...query.value,
paymentId
}
})
} }
const getOrderStatus = () => { const getOrderStatus = () => {
const paymentId = query.value.paymentId as string const paymentId = query.value.paymentId as string
GetOrderStatus(paymentId).then((res: any) => { GetOrderStatus(paymentId).then((res: any) => {
const status = res as number const status = res === null ? ORDER_STATUS.PENDING : (res as number)
if (status === ORDER_STATUS.SUCCESS) { paymentStatus.value = status
// paymentStatus.value = status if (status !== ORDER_STATUS.SUCCESS) {
}else{ ElMessage.warning('订单未支付')
} }
// const tip = statusTips[status]
// console.log(status)
}) })
// paymentStatus.value = ORDER_STATUS.SUCCESS
} }
const openView = (url, width = 600, height = 800) => { const openView = (url, width = 600, height = 800) => {
const left = (screen.width - width) / 2 const left = (screen.width - width) / 2