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

Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/Aida_Purchaser_Front

Browse Source
This commit is contained in:
zhangyahui
2026-05-29 14:59:16 +08:00
parent 484d15f91d 8209a1d678
commit 1cc85f1c46
3 changed files with 110 additions and 101 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列表
*/
export const AddShoppingCart = (data, loading?: boolean) => {
return request({
url: '/buyer/buyer/cart/add',
method: 'post',
data,
loading
})
return request({
url: '/buyer/buyer/cart/add',
method: 'post',
data,
loading
})
}
/**
* 清空购物车
*/
export const ClearShoppingCart = (loading?: boolean) => {
return request({
url: '/buyer/buyer/cart/clear',
method: 'delete',
loading
})
return request({
url: '/buyer/buyer/cart/clear',
method: 'delete',
loading
})
}
/**
@@ -32,11 +32,11 @@ export const ClearShoppingCart = (loading?: boolean) => {
* @returns 购物车列表数据
*/
export const GetShoppingCartList = (loading?: boolean) => {
return request({
url: '/buyer/buyer/cart/list',
method: 'get',
loading
})
return request({
url: '/buyer/buyer/cart/list',
method: 'get',
loading
})
}
/**
@@ -45,12 +45,12 @@ export const GetShoppingCartList = (loading?: boolean) => {
* @param params.listingId - 商品ID
*/
export const RemoveShoppingCartItem = (params, loading?: boolean) => {
return request({
url: '/buyer/buyer/cart/remove',
method: 'delete',
params,
loading
})
return request({
url: '/buyer/buyer/cart/remove',
method: 'delete',
params,
loading
})
}
/**
@@ -60,12 +60,12 @@ export const RemoveShoppingCartItem = (params, loading?: boolean) => {
* @returns
*/
export const CreateOrder = (data, loading?: boolean) => {
return request({
url: '/buyer/buyer/order/create',
method: 'post',
data,
loading
})
return request({
url: '/buyer/buyer/order/create',
method: 'post',
data,
loading
})
}
/**
@@ -74,12 +74,12 @@ export const CreateOrder = (data, loading?: boolean) => {
* @param loading - 是否显示loading
* @returns
*/
export const GetOrderStatus = (paymentId: string, loading?: boolean) => {
return request({
url: `/buyer/buyer/payment/status/${paymentId}`,
method: 'get',
loading
})
export const GetOrderStatus = (paymentId: string) => {
return request({
url: `/buyer/buyer/payment/status/${paymentId}`,
method: 'get',
loading: true,
})
}
export const ORDER_STATUS = {
PENDING: 0,//待支付

5
src/views/pay/index.vue
View File

@@ -24,7 +24,10 @@
try {
let str = route.query.list as string
list.value = JSON.parse(decodeURIComponent(atob(str)))
} catch (error) {}
console.log(list.value)
} catch (error) {
console.log(error)
}
</script>
<style lang="less" scoped>

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