优化价格显示
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<div class="bottom-nav" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
|
||||
<!-- 融豆匹配 -->
|
||||
<div
|
||||
class="nav-item nav-item-first"
|
||||
class="nav-item"
|
||||
:class="{ active: isActive('/mymatching') }"
|
||||
@click="handleNavClick('/mymatching')"
|
||||
>
|
||||
@@ -12,11 +12,10 @@
|
||||
class="nav-image"
|
||||
:class="{ 'nav-image-active': isActive('/mymatching') }"
|
||||
/>
|
||||
<span class="nav-label">融豆匹配</span>
|
||||
</div>
|
||||
<!-- 融豆明细 -->
|
||||
<div
|
||||
class="nav-item nav-item-second"
|
||||
class="nav-item"
|
||||
:class="{ active: isActive('/transfers') }"
|
||||
@click="handleNavClick('/transfers')"
|
||||
>
|
||||
@@ -26,11 +25,10 @@
|
||||
class="nav-image"
|
||||
:class="{ 'nav-image-active': isActive('/transfers') }"
|
||||
/>
|
||||
<span class="nav-label">融豆明细</span>
|
||||
</div>
|
||||
<!-- 主页 -->
|
||||
<div
|
||||
class="nav-item nav-item-third"
|
||||
class="nav-item"
|
||||
:class="{ active: isActive('/mainpage') }"
|
||||
@click="handleNavClick('/mainpage')"
|
||||
>
|
||||
@@ -40,11 +38,10 @@
|
||||
class="nav-image"
|
||||
:class="{ 'nav-image-active': isActive('/mainpage') }"
|
||||
/>
|
||||
<span class="nav-label">主页</span>
|
||||
</div>
|
||||
<!-- 积分商城 -->
|
||||
<div
|
||||
class="nav-item nav-item-fourth"
|
||||
class="nav-item"
|
||||
:class="{ active: isActive('/myshop') }"
|
||||
@click="handleNavClick('/myshop')"
|
||||
>
|
||||
@@ -54,11 +51,10 @@
|
||||
class="nav-image"
|
||||
:class="{ 'nav-image-active': isActive('/myshop') }"
|
||||
/>
|
||||
<span class="nav-label">积分商城</span>
|
||||
</div>
|
||||
<!-- 个人中心 -->
|
||||
<div
|
||||
class="nav-item nav-item-last"
|
||||
class="nav-item"
|
||||
:class="{ active: isActive('/myprofile') }"
|
||||
@click="handleNavClick('/myprofile')"
|
||||
>
|
||||
@@ -68,7 +64,6 @@
|
||||
class="nav-image"
|
||||
:class="{ 'nav-image-active': isActive('/myprofile') }"
|
||||
/>
|
||||
<span class="nav-label">个人中心</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -151,34 +146,7 @@ const backgroundImage = computed(() => {
|
||||
}
|
||||
|
||||
.nav-image-active {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
margin-top: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-item-first {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.nav-item-second {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.nav-item-third {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.nav-item-fourth {
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
.nav-item-last {
|
||||
margin-right: 20px;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@@ -200,31 +168,7 @@ const backgroundImage = computed(() => {
|
||||
}
|
||||
|
||||
.nav-image-active {
|
||||
transform: translateY(-25px);
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.nav-item-first {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.nav-item-second {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.nav-item-third {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.nav-item-fourth {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
.nav-item-last {
|
||||
margin-right: 15px;
|
||||
transform: translateY(-40px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -241,36 +185,12 @@ const backgroundImage = computed(() => {
|
||||
}
|
||||
|
||||
.nav-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.nav-image-active {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.nav-item-first {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.nav-item-second {
|
||||
margin-left: -6px;
|
||||
}
|
||||
|
||||
.nav-item-third {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.nav-item-fourth {
|
||||
margin-right: -6px;
|
||||
}
|
||||
|
||||
.nav-item-last {
|
||||
margin-right: 10px;
|
||||
transform: translateY(-35px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -291,31 +211,7 @@ const backgroundImage = computed(() => {
|
||||
}
|
||||
|
||||
.nav-image-active {
|
||||
transform: translateY(-18px);
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.nav-item-first {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.nav-item-second {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.nav-item-third {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.nav-item-fourth {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
.nav-item-last {
|
||||
margin-right: 15px;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
/* 使用与主页面一致的变量 */
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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 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 v-if="product.originalPoints" class="original-price">
|
||||
原价：{{ product.originalPoints }}积分
|
||||
</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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user