zm/taimed-international-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新：课程与图书选择商品公共组件价格处理

Browse Source
This commit is contained in:
chenghuan
2025-11-25 15:20:27 +08:00
parent 7dea269e6a
commit 6b76173b5c
5 changed files with 101 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/order/Confirm.vue
View File

@@ -137,7 +137,8 @@ import PayWay from '@/components/order/PayWay.vue'
// 使用页面传参
interface Props {
goodsList: IOrderGoods[],
userInfo: object
userInfo: object,
allowPointPay: boolean,
}
const props = withDefaults(defineProps<Props>(), {
goodsList: () => [],
@@ -320,7 +321,8 @@ const getAvailableCoupons = async () => {
* 计算最终价格
*/
const calculateFinalPrice = () => {
const couponAmount = selectedCoupon.value?.couponEntity.couponAmount || 0
// const couponAmount = selectedCoupon.value?.couponEntity.couponAmount || 0
const couponAmount = 0
// 计算最大可用积分
const orderAmountAfterDiscount = totalPrice.value - districtAmount.value - vipPrice.value

129
components/order/GoodsSelector.vue
View File

@@ -8,8 +8,12 @@
<view v-if="selectedIndex !== -1" class="goods-info-mini">
<image :src="goods[selectedIndex].productImages" mode="aspectFit" class="goods-cover" />
<view class="info">
<text class="name">{{ goods[selectedIndex].productName }}</text>
<text v-if="selectedGoodsPrice" class="price">{{ selectedGoodsPrice }} 天医币</text>
<view class="name">{{ goods[selectedIndex].productName }}</view>
<view class="price-info">
<text class="price">{{ selectedGoodsPrice.lowestPrice }} 天医币</text>
<text class="price-label">{{ selectedGoodsPrice.priceLabel }}</text>
<text v-if="selectedGoodsPrice.priceLabel" class="original-price">{{ goods[selectedIndex].price }} 天医币</text>
</view>
</view>
</view>
@@ -27,24 +31,11 @@
<image :src="item.productImages" mode="aspectFit" class="goods-cover" />
<view class="goods-info">
<text class="goods-name">{{ item.productName }}</text>
<!-- VIP优惠价 -->
<view v-if="item.isVipPrice === 1 && item.vipPrice" class="price-info">
<text class="vip-price">{{ parseFloat(item.vipPrice).toFixed(2) }} 天医币</text>
<text class="vip-label">VIP优惠价</text>
<text class="original-price">{{ parseFloat(item.price).toFixed(2) }} 天医币</text>
</view>
<!-- 活动价 -->
<view v-else-if="item.activityPrice && item.activityPrice > 0" class="price-info">
<text class="activity-price">{{ parseFloat(item.activityPrice).toFixed(2) }} 天医币</text>
<text class="activity-label">活动价</text>
<text class="original-price">{{ parseFloat(item.price).toFixed(2) }} 天医币</text>
</view>
<!-- 普通价格 -->
<view v-else class="price-info">
<text class="normal-price">{{ parseFloat(item.price).toFixed(2) }} 天医币</text>
<view class="price-info">
<text class="price">{{ calculatePrice(item).lowestPrice }} 天医币</text>
<text class="price-label">{{ calculatePrice(item).priceLabel }}</text>
<text v-if="calculatePrice(item).priceLabel" class="original-price">{{ item.price }} 天医币</text>
</view>
</view>
</view>
@@ -61,9 +52,12 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/stores/user'
import { calculateLowestPrice } from '@/utils/index'
import type { IGoods } from '@/types/order'
const { t } = useI18n()
const userStore = useUserStore()
interface Props {
show: boolean
@@ -86,17 +80,36 @@ const visible = computed({
}
})
// 计算商品价格
const calculatePrice = (goods: IGoods) => {
const { activityPrice, vipPrice, price } = goods
const isVipUser = userStore.userVips && userStore.userVips.length > 0
const priceLabel = {
vipPrice: 'VIP优惠价',
activityPrice: '活动价',
price: ''
}
let priceData = null
if (isVipUser) {
priceData = { activityPrice, vipPrice, price }
} else {
priceData = { activityPrice, price }
}
const lowestPrice = calculateLowestPrice(priceData)
return {
lowestPrice: parseFloat(lowestPrice.value).toFixed(2),
priceLabel: priceLabel[lowestPrice.key as keyof typeof priceLabel]
}
}
const selectedIndex = ref(-1)
// 选中商品的价格
const selectedGoodsPrice = computed(() => {
if (selectedIndex.value === -1) return 0
const selectedGoods = props.goods[selectedIndex.value]
if (selectedGoods.isVipPrice === 1 && selectedGoods.vipPrice) {
return parseFloat(selectedGoods.vipPrice).toFixed(2)
} else if (selectedGoods.activityPrice && selectedGoods.activityPrice > 0) {
return parseFloat(selectedGoods.activityPrice).toFixed(2)
}
return parseFloat(selectedGoods.price).toFixed(2)
return calculatePrice(selectedGoods)
})
/**
@@ -162,6 +175,30 @@ watch(() => props.show, (newVal: boolean) => {
}
}
.price-info {
display: flex;
align-items: baseline;
gap: 10rpx;
color: #e97512;
.price {
font-size: 16px;
font-weight: bold;
color: #e97512;
}
.price-label {
font-size: 12px;
color: #e97512;
}
.original-price {
font-size: 12px;
color: #8a8a8a;
text-decoration: line-through;
}
}
.goods-info-mini {
display: flex;
align-items: center;
@@ -186,13 +223,13 @@ watch(() => props.show, (newVal: boolean) => {
max-height: 76rpx;
overflow: hidden;
}
.price-info {
padding-top: 20rpx;
}
.price {
display: block;
padding-top: 20rpx;
font-size: 36rpx;
color: #ff4703;
font-weight: bold;
}
}
}
@@ -230,38 +267,6 @@ watch(() => props.show, (newVal: boolean) => {
color: #333;
line-height: 1.4;
}
.price-info {
display: flex;
align-items: baseline;
gap: 10rpx;
.vip-price,
.activity-price,
.normal-price {
font-size: 16px;
font-weight: bold;
color: #e97512;
}
// .normal-price {}
.vip-label {
font-size: 12px;
color: #fa2d12;
}
.activity-label {
font-size: 12px;
color: #613804;
}
.original-price {
font-size: 12px;
color: #8a8a8a;
text-decoration: line-through;
}
}
}
}
}