11

src/api/shoppingCart.ts

@@ -67,3 +67,25 @@ export const CreateOrder = (data, loading?: boolean) => {
 	loading
   })
 }
+
+/**
+ * 获取订单状态
+ * @param { String } paymentId - 订单ID
+ * @param loading - 是否显示loading
+ * @returns 
+ */
+export const GetOrderStatus = (paymentId: string, loading?: boolean) => {
+  return request({
+    url: `/buyer/buyer/payment/status/${paymentId}`,
+    method: 'get',
+    loading
+  })
+}
+export const ORDER_STATUS = {
+	PENDING: 0,//待支付
+	SUCCESS: 1,//支付成功
+	FAILED: 2,//支付失败
+	CANCELED: 3,//已取消支付
+	PARTIAL_REFUND: 4,//已部分退款
+	FULL_REFUND: 5,//已全额退款
+}

src/views/pay/payment.vue

@@ -4,13 +4,13 @@
 			<span class="icon"><svg-icon name="back" size="30" /></span>
 			<span class="text">Payment Details</span>
 		</div>
-		<div class="paylist" v-if="status !== 2">
+		<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>
 			</div>
 		</div>
-		<div class="agreement" v-if="status !== 2">
+		<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>.
@@ -18,11 +18,11 @@
 				</div></el-checkbox
 			>
 		</div>
-		<div class="title" v-if="status !== 2">
+		<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="status === 0">
+		<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.
@@ -37,7 +37,7 @@
 				<span class="text" @click="onBack">Cancel</span>
 			</div>
 		</template>
-		<template v-if="status === 1">
+		<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
@@ -51,7 +51,7 @@
 				<span class="text" @click="onBack">Back</span>
 			</div>
 		</template>
-		<template v-if="status === 2">
+		<template v-if="paymentStatus === ORDER_STATUS.SUCCESS">
 			<div class="success">
 				<img src="@/assets/images/pay/success.png" alt="" />
 				<div class="title">Purchase Successful!</div>
@@ -92,11 +92,13 @@
 	import { FormatBytes } from '@/utils/tools'
 	import { fetchDownloadItemsByGet } from '@/api/user'
 	import { computed, onMounted, ref } from 'vue'
-	import { CreateOrder } from '@/api/shoppingCart'
-	import { useRouter } from 'vue-router'
+	import { CreateOrder, ORDER_STATUS, GetOrderStatus } from '@/api/shoppingCart'
+	import { useRouter, useRoute } from 'vue-router'
 	import { ElMessage } from 'element-plus'
-	const router = useRouter()
 	const onBack = () => router.back()
+	const router = useRouter()
+	const route = useRoute()
+	const query = computed(() => route.query)
 	const props = defineProps({
 		ids: {
 			type: Array,
@@ -104,22 +106,45 @@
 		}
 	})
 	const agreement = ref(false)
-	const status = ref(0) // 0 初始 1 待支付 2 支付成功
+	const paymentStatus = ref(ORDER_STATUS.PENDING)
 	const onPayWith = () => {
 		if (!agreement.value) {
 			return ElMessage.warning('Please agree to the Terms & Conditions and Privacy Policy.')
 		}
 		const ids = [...props.ids]
 		if (ids.length === 0) return
-		// CreateOrder(ids, true).then((res) => {
-		openView('https://www.baidu.com/')
-		status.value = 1
-		// })
+		CreateOrder(ids, true).then((res: any) => {
+			const url = res.paymentLink
+			const paymentId = res.paymentId
+			openView(url)
+			router.replace({
+				query: {
+					...query.value,
+					paymentId
+				}
+			})
+		})
+	}
+	const statusTips = {
+		[ORDER_STATUS.PENDING]: '订单未支付',
+		[ORDER_STATUS.FAILED]: '订单支付失败',
+		[ORDER_STATUS.CANCELED]: '订单已取消'
 	}
 	const getOrderStatus = () => {
-		status.value = 2
+		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 tip = statusTips[status]
+			// console.log(status)
+		})
+		// paymentStatus.value = ORDER_STATUS.SUCCESS
 	}
-	const openView = (url, width = 800, height = 600) => {
+	const openView = (url, width = 600, height = 800) => {
 		const left = (screen.width - width) / 2
 		const top = (screen.height - height) / 2
 		window.open(
@@ -161,6 +186,7 @@
 			downloadInfo.value.total = event.total
 		})
 			.then((res) => {
+				console.log(res)
 				const disposition = res.headers['content-disposition']
 				const fileName = disposition?.split('filename=')[1]?.replace(/"/g, '') || 'download.zip'
 				const blob = res.data