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.pointsAmount || 0 }}
+
+
+
+
+

+
{{ paymentData.beansAmount || 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.pointsAmount || 0 }}
+
+
+
+
+

+
{{ paymentData.beansAmount || 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)