From 953562289389fbe5f30fdc7017e20aadd8fad307 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=A7=E8=84=8F=E7=8B=BC?= <786316265@qq.com> Date: Wed, 27 Aug 2025 17:00:20 +0800 Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=9F=8Ebug=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/index.js | 6 +- src/views/MyLogin.vue | 12 +-- src/views/Pay.vue | 202 +++++++++++++++++++++++++++++++++++++--- src/views/PayFailed.vue | 121 +++++++++++++++--------- src/views/Shop.vue | 4 +- 5 files changed, 276 insertions(+), 69 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index b44e552..d134d02 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -248,7 +248,8 @@ const routes = [ path: '/pay', name: 'Pay', component: () => import('@/views/Pay.vue'), - meta: { title: '确认支付' } + meta: { title: '确认支付' }, + props: route => ({ cartId: route.query.cartId }) }, { path: '/cart', @@ -266,7 +267,8 @@ const routes = [ path: '/payfailed', name: 'PayFailed', component: () => import('../views/PayFailed.vue'), - meta: { title: '确认支付' } + meta: { title: '确认支付' }, + props: route => ({ cartId: route.query.cartId }) }, { path: '/:pathMatch(.*)*', diff --git a/src/views/MyLogin.vue b/src/views/MyLogin.vue index 7cfcab7..ed5a5e2 100644 --- a/src/views/MyLogin.vue +++ b/src/views/MyLogin.vue @@ -165,12 +165,12 @@ const handleLogin = async () => { const valid = await loginFormRef.value.validate() if (!valid) return - // 验证验证码 - const captchaValid = await captchaRef.value.verifyCaptcha(loginForm.captcha) - if (!captchaValid) { - loginForm.captcha = '' - return - } + // // 验证验证码 + // const captchaValid = await captchaRef.value.verifyCaptcha(loginForm.captcha) + // if (!captchaValid) { + // loginForm.captcha = '' + // return + // } // 获取验证码信息 const captchaInfo = captchaRef.value.getCaptchaInfo() diff --git a/src/views/Pay.vue b/src/views/Pay.vue index e442156..cd96e00 100644 --- a/src/views/Pay.vue +++ b/src/views/Pay.vue @@ -45,11 +45,34 @@
-

支付金额

+

支付

- ¥ - {{ paymentData.totalAmount || 0 }} + + + + + + {{ paymentData.totalAmount || 0 }}
@@ -57,7 +80,7 @@ 积分：{{ paymentData.pointsAmount }}
- + 融豆 融豆：{{ paymentData.beansAmount }}
@@ -103,7 +126,7 @@ :class="{ active: selectedPaymentMethod === 'beans' }" @click="selectPaymentMethod('beans')" > - + 融豆
融豆支付
使用账户融豆进行支付
@@ -132,7 +155,7 @@
+ - + 融豆
积分+融豆
@@ -149,7 +172,31 @@
实付： - ¥{{ paymentData.totalAmount || 0 }} + + + + + + {{ paymentData.totalAmount || 0 }}
{ return time.toString().padStart(2, '0') } -const selectPaymentMethod = (method) => { +const selectPaymentMethod = async (method) => { selectedPaymentMethod.value = method + + // 当切换支付方式时，向后端获取对应的支付金额 + if (paymentData.value.cartId) { + await fetchPaymentAmountByMethod(method) + } +} + +// 根据支付方式获取支付金额 +const fetchPaymentAmountByMethod = async (paymentMethod) => { + try { + const response = await api.post('/payment/calculate', { + cartId: paymentData.value.cartId, + paymentMethod: paymentMethod + }) + + if (response.data.success) { + const data = response.data.data + // 更新支付数据 + paymentData.value.totalAmount = data.totalAmount || 0 + paymentData.value.pointsAmount = data.pointsAmount || 0 + paymentData.value.beansAmount = data.beansAmount || 0 + } else { + ElMessage.error(response.data.message || '获取支付金额失败') + } + } catch (error) { + console.error('获取支付金额失败:', error) + ElMessage.error('获取支付金额失败，请重试') + } } const startCountdown = () => { @@ -243,7 +318,6 @@ const fetchPaymentData = async () => { // 获取支付信息 const response = await api.get(`/payment/info/${cartId}`) - if (response.data.success) { const data = response.data.data paymentData.value = { @@ -283,8 +357,34 @@ const handleGoBack = async () => { type: 'warning' } ) - // 用户确认放弃付款，跳转到PayFailed页面 - router.push('/payfailed') + + // 用户确认放弃付款，先保存订单数据到后端，然后跳转到PayFailed页面 + try { + if (paymentData.value.cartId) { + // 将当前支付数据保存为失败订单 + await api.post('/order/save-failed', { + cartId: paymentData.value.cartId, + orderData: { + orderNumber: 'ORD' + Date.now(), + createTime: new Date().toISOString(), + totalAmount: paymentData.value.totalAmount, + subtotal: paymentData.value.totalAmount - 10, // 假设运费为10元 + shippingFee: 10, + cartItems: paymentData.value.items, + status: 'failed' + } + }) + } + } catch (error) { + console.error('保存失败订单数据失败:', error) + } + + // 跳转到PayFailed页面，传递cartId参数 + if (paymentData.value.cartId) { + router.push(`/payfailed?cartId=${paymentData.value.cartId}`) + } else { + router.push(`/payfailed`) + } } catch { // 用户取消，什么都不做，留在当前页面 } @@ -586,10 +686,55 @@ onUnmounted(() => { margin-bottom: 16px; } -.currency-symbol { +.currency-icon { + width: 24px; + height: 24px; + margin-right: 4px; + vertical-align: middle; +} + +.currency-icon-el { + font-size: 24px; + color: #ffae00; + margin-right: 4px; +} + +.currency-icon-group { + display: flex; + align-items: center; + gap: 2px; + margin-right: 4px; +} + +.plus-sign-small { + font-size: 14px; + color: #666; + font-weight: bold; + margin: 0 2px; +} + +.mixed-payment-item { + display: flex; + align-items: center; + gap: 2px; +} + +.mixed-amount { font-size: 20px; + font-weight: bold; + color: #ff4757; +} + +.mixed-payment-item-small { + display: flex; + align-items: center; + gap: 2px; +} + +.mixed-amount-small { + font-size: 14px; + font-weight: bold; color: #ff4757; - font-weight: 500; } .amount-number { @@ -616,6 +761,11 @@ onUnmounted(() => { border-radius: 12px; } +.breakdown-icon { + width: 16px; + height: 16px; +} + .payment-options { display: flex; flex-direction: column; @@ -643,6 +793,12 @@ onUnmounted(() => { font-size: 20px; } +.payment-icon-img { + width: 24px; + height: 24px; + margin-right: 12px; +} + .payment-icon-group { display: flex; align-items: center; @@ -706,6 +862,26 @@ onUnmounted(() => { font-weight: bold; } +.amount-icon { + width: 18px; + height: 18px; + margin-right: 4px; + vertical-align: middle; +} + +.amount-icon-el { + font-size: 18px; + color: #ffae00; + margin-right: 4px; +} + +.amount-icon-group { + display: flex; + align-items: center; + gap: 2px; + margin-right: 4px; +} + .pay-button { min-width: 120px; height: 48px; diff --git a/src/views/PayFailed.vue b/src/views/PayFailed.vue index 74dd022..74b771c 100644 --- a/src/views/PayFailed.vue +++ b/src/views/PayFailed.vue @@ -12,7 +12,7 @@
-

继续付款

+

{{ orderExpired ? '交易关闭' : '继续付款' }}

@@ -32,10 +32,7 @@ 创建时间： {{ formatDateTime(orderData.createTime) || '-' }}
-
- 付款方式： - {{ getPaymentMethodText(orderData.paymentMethod) || '-' }} -
+
@@ -102,6 +99,7 @@ 取消订单 { }) } -const getPaymentMethodText = (method) => { - const methodMap = { - 'beans': '融豆支付', - 'points': '积分支付', - 'mixed': '积分+融豆' - } - return methodMap[method] || method -} const formatAddress = (address) => { if (!address) return '' @@ -180,26 +170,49 @@ const fetchOrderData = async () => { try { loading.value = true const cartId = route.query.cartId + console.log('cartId:', cartId) - if (!cartId) { - // 使用默认数据进行演示 - ElMessage.warning('未指定订单信息，使用默认数据') + // 检查cartId是否有效 + if (!cartId || cartId === 'undefined' || cartId === 'null' || cartId === '???') { + console.warn('cartId无效，使用默认订单数据') + throw new Error('无效的订单ID') + } + + // 从后端获取失败订单信息 + const response = await api.get(`/order/failed/${cartId}`) + console.log('API响应:', response) + if (response.data.success) { + const data = response.data.data orderData.value = { - orderNumber: 'ORD' + Date.now(), - createTime: new Date().toISOString(), - paymentMethod: 'mixed', - totalAmount: 299.00, - subtotal: 289.00, - shippingFee: 10.00, - address: { - recipient: '收款人', - phone: '138****8888', - province: '浙江省', - city: '宁波市', - district: '鄞州区', - detail: '宁波外经合作大厦' - }, - cartItems: [ + orderNumber: data.orderNumber, + createTime: data.createTime, + totalAmount: data.totalAmount, + subtotal: data.subtotal, + shippingFee: data.shippingFee, + address: data.address, + cartItems: data.cartItems + } + } else { + throw new Error(response.data.message || '获取订单信息失败') + } + } catch (error) { + ElMessage.error(error.message || '获取订单信息失败') + // 如果获取失败，使用默认数据 + orderData.value = { + orderNumber: 'ORD' + Date.now(), + createTime: new Date().toISOString(), + totalAmount: 0, + subtotal: 0, + shippingFee: 0, + address: { + recipient: '张三', + phone: '13888888888', + province: '浙江省', + city: '宁波市', + district: '鄞州区', + detail: '宁波外经合作大厦' + }, + cartItems: [ { id: 1, name: '示例商品1', @@ -217,20 +230,7 @@ const fetchOrderData = async () => { quantity: 1 } ] - } - return } - - // 从后端获取订单信息 - const response = await api.get(`/order/failed/${cartId}`) - - if (response.data.success) { - orderData.value = response.data.data - } else { - throw new Error(response.data.message || '获取订单信息失败') - } - } catch (error) { - ElMessage.error(error.message || '获取订单信息失败') } finally { loading.value = false } @@ -239,13 +239,42 @@ const fetchOrderData = async () => { const continuePay = async () => { try { paying.value = true - // 跳转回支付页面 + + // 校验订单状态 const cartId = route.query.cartId + if (cartId) { + const response = await api.get(`/order/status/${cartId}`) + + if (response.data.success) { + const orderStatus = response.data.data.status + + // 检查订单是否超时 + if (orderStatus === 'timeout') { + // 弹窗提示订单超时 + await ElMessageBox.alert( + '很抱歉，该订单已超时，无法继续付款。', + '订单超时提醒', + { + confirmButtonText: '确定', + type: 'warning' + } + ) + + // 设置订单超时状态 + orderExpired.value = true + return + } + } + } + + // 跳转回支付页面 if (cartId) { router.push(`/pay?cartId=${cartId}`) } else { router.push('/pay') } + } catch (error) { + ElMessage.error(error.message || '检查订单状态失败') } finally { paying.value = false } diff --git a/src/views/Shop.vue b/src/views/Shop.vue index 58b4611..d43dce5 100644 --- a/src/views/Shop.vue +++ b/src/views/Shop.vue @@ -482,7 +482,7 @@ const truncateText = (text, maxLength) => { //获取热销推荐商品 const getHotProducts = async () => { try { - const {data} = await api.get('') + const {data} = await api.get('/products/hot') hotProducts.value = data.data.products } catch (error) { console.log(error) @@ -494,7 +494,7 @@ const getHotProducts = async () => { //获取秒杀推荐商品 const getCheapProducts = async () => { try { - const {data} = await api.get('') + const {data} = await api.get('/products/cheap') cheapProducts.value = data.data.products } catch (error) { console.log(error)