72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
<template>
|
|
<view class="price-info">
|
|
<text class="price">{{ goodsPrice.lowestPrice }} {{ t('global.coin') }}</text>
|
|
<text class="price-label">{{ goodsPrice.priceLabel }}</text>
|
|
<text v-if="goodsPrice.priceLabel" class="original-price">{{ props.goods.price }} {{ t('global.coin') }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { calculateLowestPrice } from '@/utils/index'
|
|
import { t } from '@/utils/i18n'
|
|
import type { IGoods } from '@/types/order'
|
|
|
|
const userStore = useUserStore()
|
|
|
|
interface Props {
|
|
goods: IGoods
|
|
}
|
|
const props = defineProps<Props>()
|
|
|
|
// 计算商品价格
|
|
const goodsPrice = computed(() => {
|
|
const { activityPrice, vipPrice, price } = props.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]
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.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;
|
|
}
|
|
}
|
|
</style> |