admin/jurong_circle_frontdesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

商城bug修复

Browse Source
This commit is contained in:
大脏狼
2025-08-27 17:00:20 +08:00
parent 5847393c50
commit 9535622893
5 changed files with 276 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/views/Pay.vue
View File

@@ -45,11 +45,34 @@
<!-- 支付金额 -->
<div class="amount-section">
<h3 class="section-title">支付金额</h3>
<h3 class="section-title">支付</h3>
<div class="amount-display">
<div class="total-amount-large">
<span class="currency-symbol">¥</span>
<span class="amount-number">{{ paymentData.totalAmount || 0 }}</span>
<!-- 根据支付方式显示对应图标 -->
<template v-if="selectedPaymentMethod === 'beans'">
<img src="/imgs/profile/融豆.png" alt="融豆" class="currency-icon" />
</template>
<template v-else-if="selectedPaymentMethod === 'points'">
<el-icon class="currency-icon-el"><Coin /></el-icon>
</template>
<template v-else-if="selectedPaymentMethod === 'mixed'">
<div class="currency-icon-group">
<div class="mixed-payment-item">
<el-icon class="currency-icon-el"><Coin /></el-icon>
<span class="mixed-amount">{{ paymentData.pointsAmount || 0 }}</span>
</div>
<span class="plus-sign-small">+</span>
<div class="mixed-payment-item">
<img src="/imgs/profile/融豆.png" alt="融豆" class="currency-icon" />
<span class="mixed-amount">{{ paymentData.beansAmount || 0 }}</span>
</div>
</div>
</template>
<template v-else>
<!-- 默认显示融豆图标 -->
<img src="/imgs/profile/融豆.png" alt="融豆" class="currency-icon" />
</template>
<span class="amount-number" v-if="selectedPaymentMethod !== 'mixed'">{{ paymentData.totalAmount || 0 }}</span>
</div>
<div class="amount-breakdown" v-if="paymentData.pointsAmount > 0 || paymentData.beansAmount > 0">
<div v-if="paymentData.pointsAmount > 0" class="breakdown-item">
@@ -57,7 +80,7 @@
<span>积分：{{ paymentData.pointsAmount }}</span>
</div>
<div v-if="paymentData.beansAmount > 0" class="breakdown-item">
<el-icon><Orange /></el-icon>
<img src="/imgs/profile/融豆.png" alt="融豆" class="breakdown-icon" />
<span>融豆：{{ paymentData.beansAmount }}</span>
</div>
</div>
@@ -103,7 +126,7 @@
:class="{ active: selectedPaymentMethod === 'beans' }"
@click="selectPaymentMethod('beans')"
>
<el-icon class="payment-icon"><Orange /></el-icon>
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-icon-img" />
<div class="payment-info">
<div class="payment-name">融豆支付</div>
<div class="payment-desc">使用账户融豆进行支付</div>
@@ -132,7 +155,7 @@
<div class="payment-icon-group">
<el-icon class="payment-icon"><Coin /></el-icon>
<span class="plus-sign">+</span>
<el-icon class="payment-icon"><Orange /></el-icon>
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-icon-img" />
</div>
<div class="payment-info">
<div class="payment-name">积分+融豆</div>
@@ -149,7 +172,31 @@
<div class="payment-summary">
<div class="total-amount">
<span>实付：</span>
<span class="amount">¥{{ paymentData.totalAmount || 0 }}</span>
<!-- 根据支付方式显示对应图标 -->
<template v-if="selectedPaymentMethod === 'beans'">
<img src="/imgs/profile/融豆.png" alt="融豆" class="amount-icon" />
</template>
<template v-else-if="selectedPaymentMethod === 'points'">
<el-icon class="amount-icon-el"><Coin /></el-icon>
</template>
<template v-else-if="selectedPaymentMethod === 'mixed'">
<div class="amount-icon-group">
<div class="mixed-payment-item-small">
<el-icon class="amount-icon-el"><Coin /></el-icon>
<span class="mixed-amount-small">{{ paymentData.pointsAmount || 0 }}</span>
</div>
<span class="plus-sign-small">+</span>
<div class="mixed-payment-item-small">
<img src="/imgs/profile/融豆.png" alt="融豆" class="amount-icon" />
<span class="mixed-amount-small">{{ paymentData.beansAmount || 0 }}</span>
</div>
</div>
</template>
<template v-else>
<!-- 默认显示融豆图标 -->
<img src="/imgs/profile/融豆.png" alt="融豆" class="amount-icon" />
</template>
<span class="amount" v-if="selectedPaymentMethod !== 'mixed'">{{ paymentData.totalAmount || 0 }}</span>
</div>
</div>
<el-button
@@ -205,8 +252,36 @@ const formatTime = (time) => {
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;