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

优化价格显示

Browse Source
This commit is contained in:
dzl
2025-09-02 11:41:20 +08:00
parent b8974a7c6a
commit 127d9ed592
9 changed files with 815 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/views/BuyDetails.vue
View File

@@ -30,8 +30,16 @@
<div class="product-details">
<div class="product-price">
<span class="price-label">实付</span>
<el-icon class="coin-icon"><Coin /></el-icon>
<span class="price-value">{{ totalPrice }}</span>
<div class="price-container">
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ totalPrice }}</span>
</div>
<div class="sub-price">
<el-icon class="points-icon"><Coin /></el-icon>
<span class="points-price">{{ totalPointsPrice }}</span>
</div>
</div>
</div>
<div class="quantity-selector">
<el-button size="small" @click="decreaseQuantity" :disabled="quantity <= 1">-</el-button>
@@ -144,6 +152,11 @@ const totalPrice = computed(() => {
return product.value.rongdou_price * quantity.value
})
const totalPointsPrice = computed(() => {
if (!product.value) return 0
return product.value.points_price * quantity.value
})
const canPurchase = computed(() => {
const specNames = Object.keys(specGroups.value)
const allSpecsSelected = specNames.every(specName => selectedSpecs.value[specName])
@@ -534,23 +547,58 @@ onMounted(() => {
.product-price {
display: flex;
align-items: center;
gap: 4px;
align-items: flex-start;
gap: 8px;
}
.price-label {
font-size: 14px;
color: #666;
margin-top: 2px;
}
.coin-icon {
color: #ffae00;
.price-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.price-value {
.main-price {
display: flex;
align-items: center;
gap: 4px;
}
.rongdou-icon {
width: 20px;
height: 20px;
object-fit: contain;
}
.rongdou-price {
font-size: 18px;
font-weight: bold;
color: #ffae00;
color: #ff6b35;
}
.sub-price {
display: flex;
align-items: center;
gap: 3px;
margin-left: 24px;
}
.points-icon {
width: 14px;
height: 14px;
color: #666;
}
.points-price {
font-size: 14px;
color: #666;
font-weight: normal;
}
.quantity-selector {

47
src/views/MyShop.vue
View File

@@ -55,8 +55,14 @@
<div class="product-info">
<div class="product-name">{{ product.name }}</div>
<div class="product-price">
<span class="points">{{ product.rongdou_price }}</span>
<span class="original-price" v-if="product.originalPoints">{{ product.originalPoints }}</span>
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ product.rongdou_price }}</span>
</div>
<div class="sub-price">
<el-icon class="points-icon"><Coin /></el-icon>
<span class="points-price">{{ product.points_price }}</span>
</div>
</div>
</div>
</div>
@@ -75,6 +81,7 @@ import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import api from '@/utils/api' // 确保导入正确的api模块
import { ElMessage } from 'element-plus'
import { Coin } from '@element-plus/icons-vue'
import {getImageUrl} from '@/config'
@@ -460,21 +467,43 @@ export default {
.product-price {
margin-top: auto; /* 将价格推到底部 */
position: relative;
}
.main-price {
display: flex;
align-items: center;
gap: 8px;
gap: 4px;
}
.points {
.rongdou-icon {
width: 16px;
height: 16px;
object-fit: contain;
}
.rongdou-price {
color: #ff6b35;
font-weight: 600;
font-size: 14px;
font-weight: bold;
font-size: 16px;
}
.original-price {
.sub-price {
display: flex;
align-items: center;
gap: 2px;
margin-top: 4px;
}
.points-icon {
font-size: 10px;
width: 10px;
height: 10px;
}
.points-price {
color: #999;
font-size: 12px;
text-decoration: line-through;
font-size: 10px;
}
/* 使用与主页面一致的变量 */

153
src/views/Orders.vue
View File

@@ -73,11 +73,15 @@
<h4 class="item-name">{{ item.product.name }}</h4>
<p class="item-desc">{{ truncateText(item.product.description, 40) }}</p>
<div class="item-price">
<div class="price-group">
<span class="price">
<el-icon><Coin /></el-icon>
{{ 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>
<span class="quantity">x{{ item.quantity }}</span>
</div>
@@ -92,8 +96,9 @@
<div class="total-price">
<span>总计：</span>
<div class="total-price-group">
<span class="total-points">
<el-icon><Coin /></el-icon>{{ order.totalPoints }}
<span class="total-rongdou">
<img src="/imgs/profile/融豆.png" alt="融豆" class="total-rongdou-icon" />
{{ order.totalRongdou }}
</span>
</div>
</div>
@@ -248,8 +253,15 @@
<p>{{ item.product.description }}</p>
<p v-if="item.specInfo" class="spec-info">规格：{{ item.specInfo }}</p>
<div class="product-price">
<div class="detail-item-price-group">
<span><el-icon><Coin /></el-icon>{{ item.points }}</span>
<div class="detail-item-price-container">
<div class="detail-item-main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="detail-rongdou-icon" />
<span class="detail-rongdou-price">{{ item.rongdouPrice }}</span>
</div>
<div class="detail-item-sub-price">
<el-icon class="detail-points-icon"><Coin /></el-icon>
<span class="detail-points-price">{{ item.points }}</span>
</div>
</div>
<span class="quantity-text">x {{ item.quantity }}</span>
</div>
@@ -271,7 +283,8 @@
<span class="label">商品总计：</span>
<div class="value">
<span class="detail-price-group">
<span><el-icon><Coin /></el-icon>{{ orderDetail.totalPoints }}</span>
<img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
<span>{{ orderDetail.totalRongdou }}</span>
</span>
</div>
</div>
@@ -279,7 +292,8 @@
<span class="label">实付：</span>
<div class="value">
<span class="detail-price-group">
<span><el-icon><Coin /></el-icon>{{ orderDetail.totalPoints }}</span>
<img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
<span>{{ orderDetail.totalRongdou }}</span>
</span>
</div>
</div>
@@ -1045,6 +1059,11 @@ onMounted(() => {
font-size: 14px;
}
.detail-item-price-group img {
width: 12px !important;
height: 12px !important;
}
.quantity-text {
color: #999;
font-size: 12px;
@@ -1058,6 +1077,11 @@ onMounted(() => {
font-weight: 600;
}
.detail-price-group img {
width: 14px !important;
height: 14px !important;
}
.spec-info {
font-size: 12px;
color: #666;
@@ -1068,6 +1092,113 @@ onMounted(() => {
display: inline-block;
}
/* 商品价格显示样式 */
.item-price-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
margin-bottom: 4px;
}
.item-main-price {
display: flex;
align-items: center;
gap: 2px;
}
.item-rongdou-icon {
width: 12px;
height: 12px;
}
.item-rongdou-price {
font-size: 12px;
font-weight: 500;
color: #333;
}
.item-sub-price {
display: flex;
align-items: center;
gap: 2px;
}
.item-points-icon {
font-size: 10px;
color: #ffae00;
}
.item-points-price {
font-size: 10px;
color: #666;
}
/* 订单总计融豆图标样式 */
.total-rongdou-icon {
width: 14px;
height: 14px;
margin-right: 2px;
}
/* 订单详情商品价格样式 */
.detail-item-price-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.detail-item-main-price {
display: flex;
align-items: center;
gap: 2px;
}
.detail-rongdou-icon {
width: 12px !important;
height: 12px !important;
}
.detail-item-price-container .detail-rongdou-icon {
width: 12px !important;
height: 12px !important;
}
.detail-rongdou-price {
font-size: 12px;
font-weight: 500;
color: #333;
}
.detail-item-sub-price {
display: flex;
align-items: center;
gap: 2px;
}
.detail-points-icon {
font-size: 10px;
color: #ffae00;
}
.detail-points-price {
font-size: 10px;
color: #666;
}
/* 费用明细融豆图标样式 */
.cost-rongdou-icon {
width: 14px !important;
height: 14px !important;
margin-right: 2px;
}
.detail-price-group .cost-rongdou-icon {
width: 14px !important;
height: 14px !important;
}
/* 响应式设计 */
@media (max-width: 480px) {
.order-header {

267
src/views/Pay.vue
View File

@@ -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>

136
src/views/PayLoading.vue
View File

@@ -63,13 +63,30 @@
<div class="product-name">{{ item.name }}</div>
<div class="product-spec">{{ item.specification || '默认规格' }}</div>
<div class="product-price">
<el-icon><Coin /></el-icon>
{{ item.price }} × {{ item.quantity }}
<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.rongdou_price }}</span>
</div>
<div class="item-sub-price">
<el-icon class="item-points-icon"><Coin /></el-icon>
<span class="item-points-price">{{ item.points_price }}</span>
</div>
</div>
<span class="quantity-label">× {{ item.quantity }}</span>
</div>
</div>
<div class="product-total">
<el-icon><Coin /></el-icon>
{{ (item.price * item.quantity) }}
<div class="total-price-container">
<div class="total-main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="total-rongdou-icon" />
<span class="total-rongdou-price">{{ (item.rongdou_price * item.quantity) }}</span>
</div>
<div class="total-sub-price">
<el-icon class="total-points-icon"><Coin /></el-icon>
<span class="total-points-price">{{ (item.points_price * item.quantity) }}</span>
</div>
</div>
</div>
</div>
</div>
@@ -81,21 +98,21 @@
<div class="cost-item">
<span class="label">商品总价：</span>
<span class="value">
<el-icon><Coin /></el-icon>
{{ orderData.subtotal || 0 }}
<img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
{{ orderData.totalAmount || 0 }}
</span>
</div>
<div class="cost-item">
<span class="label">运费：</span>
<span class="value">
<el-icon><Coin /></el-icon>
<img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
{{ orderData.shippingFee || 0 }}
</span>
</div>
<div class="cost-item total">
<span class="label">总计：</span>
<span class="value">
<el-icon><Coin /></el-icon>
<img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
{{ orderData.totalAmount || 0 }}
</span>
</div>
@@ -180,8 +197,8 @@ const fetchOrderData = async () => {
orderData.value = {
orderNumber: order.order_no || 'ORD' + Date.now(),
createTime: order.created_at || new Date().toISOString(),
totalAmount: order.total_points || 0,
subtotal: order.total_points || 0,
totalAmount: order.total_amount || 0,
subtotal: order.total_amount || 0,
shippingFee: 0,
address: {
recipient: data.address?.receiver_name || order.username || '收件人',
@@ -196,7 +213,9 @@ const fetchOrderData = async () => {
name: item.product_name,
image: item.image_url || '/imgs/loading.png',
specification: item.spec_info || '默认规格',
price: item.points_price || 0,
price: item.price || 0,
points_price: item.points_price || 0,
rongdou_price: item.rongdou_price || 0,
quantity: item.quantity || 1
}))
}
@@ -472,5 +491,100 @@ onMounted(() => {
font-size: 16px;
}
/* 商品价格显示样式 */
.item-price-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
margin-bottom: 4px;
}
.item-main-price {
display: flex;
align-items: center;
gap: 2px;
}
.item-rongdou-icon {
width: 12px;
height: 12px;
}
.item-rongdou-price {
font-size: 12px;
font-weight: 500;
color: #333;
}
.item-sub-price {
display: flex;
align-items: center;
gap: 2px;
}
.item-points-icon {
font-size: 10px;
color: #ffae00;
}
.item-points-price {
font-size: 10px;
color: #666;
}
.quantity-label {
font-size: 12px;
color: #666;
margin-top: 2px;
}
/* 商品总价显示样式 */
.total-price-container {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.total-main-price {
display: flex;
align-items: center;
gap: 2px;
}
.total-rongdou-icon {
width: 14px;
height: 14px;
}
.total-rongdou-price {
font-size: 14px;
font-weight: 500;
color: #ff4757;
}
.total-sub-price {
display: flex;
align-items: center;
gap: 2px;
}
.total-points-icon {
font-size: 12px;
color: #ffae00;
}
.total-points-price {
font-size: 12px;
color: #666;
}
/* 费用明细融豆图标样式 */
.cost-rongdou-icon {
width: 14px;
height: 14px;
margin-right: 2px;
}
</style>

68
src/views/ProductDetail.vue
View File

@@ -56,13 +56,15 @@
</div>
<div class="product-price">
<div class="current-price">
<el-icon><Coin /></el-icon>
<span class="price-number">{{ product.rongdou_price }}</span>
<span class="price-unit">融豆</span>
</div>
<div v-if="product.originalPoints" class="original-price">
原价：{{ product.originalPoints }}积分
<div class="price-container">
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ product.rongdou_price }}</span>
</div>
<div class="sub-price">
<el-icon class="points-icon"><Coin /></el-icon>
<span class="points-price">{{ product.points_price }}</span>
</div>
</div>
<div v-if="product.discount" class="discount-info">
<el-tag type="danger" size="small">{{ product.discount }}折优惠</el-tag>
@@ -107,12 +109,6 @@
</el-tag>||{{product.brand}}||{{product.origin}}
</span>
</div>
<!-- 第二组：小货车图标 + 文本 -->
<div class="detail-item-group"> <!-- 每组独立容器 -->
<img src="/imgs/productdetail/小货车.png" alt="小货车" class="detail-icon">
<span class="detail-text">预计两小时内发货，后天送达</span>
</div>
</div>
<!-- 商品详情 -->
@@ -530,34 +526,50 @@ watch(
margin-bottom: 20px;
}
.current-price {
.price-container {
display: flex;
align-items: center;
gap: 4px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-bottom: 8px;
}
.current-price .el-icon {
color: #ff6b35;
font-size: 20px;
.main-price {
display: flex;
align-items: center;
gap: 6px;
}
.price-number {
.rongdou-icon {
width: 24px;
height: 24px;
object-fit: contain;
}
.rongdou-price {
font-size: 28px;
font-weight: 700;
color: #ff6b35;
}
.price-unit {
font-size: 16px;
color: #ff6b35;
.sub-price {
display: flex;
align-items: center;
gap: 4px;
margin-left: 30px;
margin-top: 2px;
}
.original-price {
color: #999;
font-size: 14px;
text-decoration: line-through;
margin-bottom: 4px;
.points-icon {
width: 16px;
height: 16px;
color: #666;
}
.points-price {
font-size: 16px;
color: #666;
font-weight: normal;
}
.discount-info {

122
src/views/ProductSummary.vue
View File

@@ -32,7 +32,16 @@
<img :src="firstProduct.image" :alt="firstProduct.name" class="small-image" />
<div class="product-info">
<span class="product-name">{{ firstProduct.name }}</span>
<span class="product-price">{{ firstProduct.rongdou_price }} 融豆</span>
<div class="product-price">
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ firstProduct.rongdou_price }}</span>
</div>
<div class="sub-price">
<el-icon class="points-icon"><Coin /></el-icon>
<span class="points-price">{{ firstProduct.points_price }}</span>
</div>
</div>
</div>
<span @click="$router.push(`/product/${firstProduct.id}`)" class="link">详情></span>
</div>
@@ -68,7 +77,16 @@
<img :src="product.image" :alt="product.name" class="small-image" />
<div class="product-info">
<span class="product-name">{{ product.name }}</span>
<span class="product-price">{{ product.rongdou_price }} 融豆</span>
<div class="product-price">
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ product.rongdou_price }}</span>
</div>
<div class="sub-price">
<el-icon class="points-icon"><Coin /></el-icon>
<span class="points-price">{{ product.points_price }}</span>
</div>
</div>
</div>
<span @click="$router.push(`/product/${product.id}`)" class="link">详情></span>
</div>
@@ -85,7 +103,7 @@ import { ref, onMounted } from 'vue'
import api from '@/utils/api'
import { useRoute, useRouter } from 'vue-router'
import {ElMessage} from "element-plus";
import {Bottom, ShoppingCart} from "@element-plus/icons-vue";
import {Bottom, ShoppingCart, Coin} from "@element-plus/icons-vue";
import { getImageUrl } from '@/config'
@@ -171,36 +189,36 @@ const getFirstProduct = async () => {
}
}
const getProductDetail = async (productId) => {
try {
const response = await api.get(`/products/${productId}`)
// const getProductDetail = async (productId) => {
// try {
// const response = await api.get(`/products/${productId}`)
if (response.data && response.data.data && response.data.data.product) {
productDetail.value = response.data.data.product
// if (response.data && response.data.data && response.data.data.product) {
// productDetail.value = response.data.data.product
// 处理商品详情的图片路径
if (productDetail.value.image) {
productDetail.value.image = getImageUrl(productDetail.value.image)
}
if (productDetail.value.images && Array.isArray(productDetail.value.images)) {
productDetail.value.images = productDetail.value.images.map(img => getImageUrl(img))
}
// // 处理商品详情的图片路径
// if (productDetail.value.image) {
// productDetail.value.image = getImageUrl(productDetail.value.image)
// }
// if (productDetail.value.images && Array.isArray(productDetail.value.images)) {
// productDetail.value.images = productDetail.value.images.map(img => getImageUrl(img))
// }
// 缓存商品详情
productDetailsCache.value[productId] = productDetail.value
} else {
console.error('无法解析商品详情数据:', response.data)
ElMessage.error('获取商品详情失败')
}
// // 缓存商品详情
// productDetailsCache.value[productId] = productDetail.value
// } else {
// console.error('无法解析商品详情数据:', response.data)
// ElMessage.error('获取商品详情失败')
// }
return productDetail.value
} catch (error) {
console.error('获取商品详情失败:', error)
console.error('错误详情:', error.response?.data)
ElMessage.error('获取商品详情失败')
throw error
}
}
// return productDetail.value
// } catch (error) {
// console.error('获取商品详情失败:', error)
// console.error('错误详情:', error.response?.data)
// ElMessage.error('获取商品详情失败')
// throw error
// }
// }
// 预加载所有商品详情的函数
const loadAllProductDetails = async () => {
@@ -407,13 +425,51 @@ onMounted(async () => {
}
.product-price {
color: #e53935;
font-weight: bold;
font-size: 18px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin-top: auto; /* 推到底部 */
}
.main-price {
display: flex;
align-items: center;
gap: 4px;
margin-top: auto; /* 推到底部 */
color: #e53935;
font-weight: bold;
font-size: 18px;
}
.rongdou-icon {
width: 16px;
height: 16px;
object-fit: contain;
}
.rongdou-price {
color: #e53935;
font-weight: bold;
}
.sub-price {
display: flex;
align-items: center;
gap: 2px;
margin-left: 20px;
margin-top: 2px;
}
.points-icon {
width: 12px;
height: 12px;
color: #666;
}
.points-price {
font-size: 12px;
color: #666;
font-weight: normal;
}
.link {

109
src/views/Shop.vue
View File

@@ -64,12 +64,13 @@
<div class="recommend-content">
<h4 class="recommend-name">{{ product.name }}</h4>
<div class="recommend-price-container">
<div class="recommend-price">
<el-icon><Coin /></el-icon>
{{ product.rongdou_price }}
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ product.rongdou_price }}</span>
</div>
<div v-if="product.originalPoints" class="recommend-original-price">
{{ product.originalPoints }}
<div class="sub-price">
<el-icon class="points-icon"><Coin /></el-icon>
<span class="points-price">{{ product.points_price }}</span>
</div>
</div>
</div>
@@ -89,12 +90,13 @@
<div class="recommend-content">
<h4 class="recommend-name">{{ product.name }}</h4>
<div class="recommend-price-container">
<div class="recommend-price">
<el-icon><Coin /></el-icon>
{{ product.rongdou_price }}
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ product.rongdou_price }}</span>
</div>
<div v-if="product.originalPoints" class="recommend-original-price">
{{ product.originalPoints }}
<div class="sub-price">
<el-icon class="points-icon"><Coin /></el-icon>
<span class="points-price">{{ product.points_price }}</span>
</div>
</div>
</div>
@@ -137,13 +139,14 @@
</div>
<h4 class="product-name">{{ product.name }}</h4>
<div class="product-price">
<span class="current-price">
<el-icon><Coin /></el-icon>
{{ product.rongdou_price }}
</span>
<span v-if="product.originalPoints" class="original-price">
{{ product.originalPoints }}
</span>
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ product.rongdou_price }}</span>
</div>
<div class="sub-price">
<el-icon class="points-icon"><Coin /></el-icon>
<span class="points-price">{{ product.points_price }}</span>
</div>
</div>
</div>
</div>
@@ -617,26 +620,45 @@ onMounted(() => {
}
.product-price {
display: flex;
align-items: center;
gap: 8px;
margin: 0 8px;
padding-bottom: 8px;
position: relative;
}
.current-price {
.main-price {
display: flex;
align-items: center;
gap: 4px;
}
.rongdou-icon {
width: 16px;
height: 16px;
object-fit: contain;
}
.rongdou-price {
color: #ff6b35;
font-weight: bold;
font-size: 16px;
}
.sub-price {
display: flex;
align-items: center;
gap: 2px;
color: #ff6b35;
font-weight: 600;
font-size: 14px;
margin-top: 4px;
}
.original-price {
.points-icon {
font-size: 10px;
width: 10px;
height: 10px;
}
.points-price {
color: #999;
font-size: 12px;
text-decoration: line-through;
font-size: 10px;
}
.empty-state {
@@ -750,25 +772,44 @@ onMounted(() => {
}
.recommend-price-container {
display: flex;
flex-direction: column;
gap: 1px;
position: relative;
}
.recommend-price {
.recommend-price-container .main-price {
display: flex;
align-items: center;
gap: 2px;
}
.recommend-price-container .rongdou-icon {
width: 12px;
height: 12px;
object-fit: contain;
}
.recommend-price-container .rongdou-price {
color: #ff6b35;
font-weight: 600;
font-size: 12px;
line-height: 1;
}
.recommend-original-price {
.recommend-price-container .sub-price {
display: flex;
align-items: center;
gap: 1px;
margin-top: 2px;
}
.recommend-price-container .points-icon {
font-size: 8px;
width: 8px;
height: 8px;
}
.recommend-price-container .points-price {
color: #999;
font-size: 10px;
text-decoration: line-through;
font-size: 8px;
line-height: 1;
}