优化价格显示
This commit is contained in:
@@ -72,31 +72,55 @@
|
||||
<!-- 根据选择的支付方式动态显示支付格式 -->
|
||||
<template v-if="selectedPaymentMethod === 'mixed' && paymentData.pointsAmount > 0 && paymentData.beansAmount > 0">
|
||||
<!-- 积分+融豆混合支付 -->
|
||||
<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 }}</span>
|
||||
<div class="payment-price-container">
|
||||
<div class="payment-main-price">
|
||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-rongdou-icon" />
|
||||
<span class="payment-rongdou-price">{{ totalRongdouPrice }}</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 }}</span>
|
||||
<div class="payment-sub-price">
|
||||
<el-icon class="payment-points-icon"><Coin /></el-icon>
|
||||
<span class="payment-points-price">{{ totalPointsPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="selectedPaymentMethod === 'beans' && paymentData.beansAmount > 0">
|
||||
<!-- 仅融豆支付 -->
|
||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="currency-icon" />
|
||||
<span class="amount-number">{{ paymentData.beansAmount }}</span>
|
||||
<div class="payment-price-container">
|
||||
<div class="payment-main-price">
|
||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-rongdou-icon" />
|
||||
<span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
|
||||
</div>
|
||||
<div class="payment-sub-price">
|
||||
<el-icon class="payment-points-icon"><Coin /></el-icon>
|
||||
<span class="payment-points-price">{{ totalPointsPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="selectedPaymentMethod === 'points' && paymentData.pointsAmount > 0">
|
||||
<!-- 仅积分支付 -->
|
||||
<el-icon class="currency-icon-el"><Coin /></el-icon>
|
||||
<span class="amount-number">{{ paymentData.pointsAmount }}</span>
|
||||
<div class="payment-price-container">
|
||||
<div class="payment-main-price">
|
||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-rongdou-icon" />
|
||||
<span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
|
||||
</div>
|
||||
<div class="payment-sub-price">
|
||||
<el-icon class="payment-points-icon"><Coin /></el-icon>
|
||||
<span class="payment-points-price">{{ totalPointsPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 未选择支付方式时的默认显示 -->
|
||||
<span class="amount-number">请选择支付方式</span>
|
||||
<div class="payment-price-container">
|
||||
<div class="payment-main-price">
|
||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-rongdou-icon" />
|
||||
<span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
|
||||
</div>
|
||||
<div class="payment-sub-price">
|
||||
<el-icon class="payment-points-icon"><Coin /></el-icon>
|
||||
<span class="payment-points-price">{{ totalPointsPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="amount-breakdown" v-if="selectedPaymentMethod && (paymentData.pointsAmount > 0 || paymentData.beansAmount > 0)">
|
||||
@@ -131,8 +155,16 @@
|
||||
<span v-if="item.size" class="item-size">{{ item.size }}</span>
|
||||
</div>
|
||||
<div class="item-price">
|
||||
<el-icon><Coin /></el-icon>
|
||||
<span>{{ item.points }}</span>
|
||||
<div class="item-price-container">
|
||||
<div class="item-main-price">
|
||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="item-rongdou-icon" />
|
||||
<span class="item-rongdou-price">{{ item.rongdouPrice }}</span>
|
||||
</div>
|
||||
<div class="item-sub-price">
|
||||
<el-icon class="item-points-icon"><Coin /></el-icon>
|
||||
<span class="item-points-price">{{ item.points }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-quantity">
|
||||
@@ -224,31 +256,59 @@
|
||||
<!-- 根据选择的支付方式动态显示实付格式 -->
|
||||
<template v-if="selectedPaymentMethod === 'mixed' && paymentData.pointsAmount > 0 && paymentData.beansAmount > 0">
|
||||
<!-- 积分+融豆混合支付 -->
|
||||
<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 }}</span>
|
||||
<div class="bottom-price-container">
|
||||
<div class="bottom-main-price">
|
||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="bottom-rongdou-icon" />
|
||||
<span class="bottom-rongdou-price">{{ paymentData.beansAmount }}</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 }}</span>
|
||||
<span class="bottom-plus-sign">+</span>
|
||||
<div class="bottom-sub-price">
|
||||
<el-icon class="bottom-points-icon"><Coin /></el-icon>
|
||||
<span class="bottom-points-price">{{ paymentData.pointsAmount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="selectedPaymentMethod === 'beans' && paymentData.beansAmount > 0">
|
||||
<!-- 仅融豆支付 -->
|
||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="amount-icon" />
|
||||
<span class="amount">{{ paymentData.beansAmount }}</span>
|
||||
<div class="bottom-price-container">
|
||||
<div class="bottom-main-price">
|
||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="bottom-rongdou-icon" />
|
||||
<span class="bottom-rongdou-price">{{ paymentData.beansAmount }}</span>
|
||||
</div>
|
||||
<span class="bottom-plus-sign" v-if="paymentData.pointsAmount > 0">+</span>
|
||||
<div class="bottom-sub-price" v-if="paymentData.pointsAmount > 0">
|
||||
<el-icon class="bottom-points-icon"><Coin /></el-icon>
|
||||
<span class="bottom-points-price">{{ paymentData.pointsAmount || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="selectedPaymentMethod === 'points' && paymentData.pointsAmount > 0">
|
||||
<!-- 仅积分支付 -->
|
||||
<el-icon class="amount-icon-el"><Coin /></el-icon>
|
||||
<span class="amount">{{ paymentData.pointsAmount }}</span>
|
||||
<div class="bottom-price-container">
|
||||
<div class="bottom-main-price" v-if="paymentData.beansAmount > 0">
|
||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="bottom-rongdou-icon" />
|
||||
<span class="bottom-rongdou-price">{{ paymentData.beansAmount || 0 }}</span>
|
||||
</div>
|
||||
<span class="bottom-plus-sign" v-if="paymentData.beansAmount > 0 && paymentData.pointsAmount > 0">+</span>
|
||||
<div class="bottom-sub-price">
|
||||
<el-icon class="bottom-points-icon"><Coin /></el-icon>
|
||||
<span class="bottom-points-price">{{ paymentData.pointsAmount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 未选择支付方式时的默认显示 -->
|
||||
<span class="amount">-</span>
|
||||
<div class="bottom-price-container">
|
||||
<div class="bottom-main-price" v-if="paymentData.beansAmount > 0">
|
||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="bottom-rongdou-icon" />
|
||||
<span class="bottom-rongdou-price">{{ paymentData.beansAmount || 0 }}</span>
|
||||
</div>
|
||||
<span class="bottom-plus-sign" v-if="paymentData.beansAmount > 0 && paymentData.pointsAmount > 0">+</span>
|
||||
<div class="bottom-sub-price" v-if="paymentData.pointsAmount > 0">
|
||||
<el-icon class="bottom-points-icon"><Coin /></el-icon>
|
||||
<span class="bottom-points-price">{{ paymentData.pointsAmount || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -294,6 +354,21 @@ const paymentData = ref({
|
||||
cartId: null,
|
||||
items: [] // 添加商品列表
|
||||
})
|
||||
|
||||
// 计算商品总价
|
||||
const totalRongdouPrice = computed(() => {
|
||||
return paymentData.value.items.reduce((sum, item) => {
|
||||
const rongdouPrice = item.rongdouPrice || (item.rongdou_price || 0)
|
||||
return sum + (rongdouPrice * item.quantity)
|
||||
}, 0)
|
||||
})
|
||||
|
||||
const totalPointsPrice = computed(() => {
|
||||
return paymentData.value.items.reduce((sum, item) => {
|
||||
const pointsPrice = item.points || (item.points_price || 0)
|
||||
return sum + (pointsPrice * item.quantity)
|
||||
}, 0)
|
||||
})
|
||||
// 用户余额数据
|
||||
const userBalance = ref({
|
||||
points: 0, // 用户积分
|
||||
@@ -1207,4 +1282,140 @@ onMounted(() => {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 商品单价双价格显示样式 */
|
||||
.item-price-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.item-main-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.item-rongdou-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.item-rongdou-price {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-sub-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.item-points-icon {
|
||||
font-size: 12px;
|
||||
color: #ffae00;
|
||||
}
|
||||
|
||||
.item-points-price {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 支付金额双价格显示样式 */
|
||||
.payment-price-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.payment-main-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.payment-rongdou-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.payment-rongdou-price {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.payment-sub-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.payment-points-icon {
|
||||
font-size: 16px;
|
||||
color: #ffae00;
|
||||
}
|
||||
|
||||
.payment-points-price {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 底部实付双价格显示样式 */
|
||||
.bottom-price-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bottom-main-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.bottom-rongdou-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.bottom-rongdou-price {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #ff4757;
|
||||
}
|
||||
|
||||
.bottom-plus-sign {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.bottom-sub-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
margin-left: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.bottom-points-icon {
|
||||
font-size: 14px;
|
||||
color: #ffae00;
|
||||
}
|
||||
|
||||
.bottom-points-price {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.bottom-points-price {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user