89 lines
2.5 KiB
Vue
89 lines
2.5 KiB
Vue
<template>
|
|
<text :style="{color, 'font-weight': weight}" :class="(lineThrough ? 'line-through' : '') + ' price-format'">
|
|
<text v-if="showSubscript" :style="{'font-size': subscriptSize + 'rpx', 'margin-right': '2rpx'}">¥</text>
|
|
<text :style="{'font-size': firstSize + 'rpx', 'margin-right': '1rpx'}">{{priceSlice.first}}</text>
|
|
<text v-if="priceSlice.second && showDecimal" :style="{'font-size': secondSize + 'rpx'}">.{{priceSlice.second}}</text>
|
|
</text>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="PriceFormat">
|
|
/**
|
|
* PriceFormat 金额格式化
|
|
* @description 列表或者详情页价格格式化展示
|
|
*/
|
|
|
|
import { ref, onMounted, watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
price: {
|
|
type: [String, Number],
|
|
default: '0.00'
|
|
},
|
|
firstSize: {
|
|
type: [String, Number],
|
|
default: 36
|
|
},
|
|
secondSize: {
|
|
type: [String, Number],
|
|
default: 24
|
|
},
|
|
subscriptSize: {
|
|
type: [String, Number],
|
|
default: 24
|
|
},
|
|
showDecimal: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: '#E54444'
|
|
},
|
|
weight: {
|
|
type: String,
|
|
default: 'bold'
|
|
},
|
|
lineThrough: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showSubscript: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
|
|
const priceSlice = ref<{ first: string | number; second?: string | number }>({ first: 0 })
|
|
|
|
onMounted(() => {
|
|
priceFormat.format()
|
|
})
|
|
|
|
const priceFormat = {
|
|
format: () => {
|
|
let price = props.price
|
|
let formattedPrice: { first: string | number; second?: string | number } = { first: 0 }
|
|
if(price !== null && price !== '' && price !== undefined) {
|
|
price = parseFloat(price);
|
|
// 保留两位小数
|
|
const priceStr = price.toFixed(2);
|
|
const priceArr = priceStr.split('.');
|
|
formattedPrice.first = priceArr[0];
|
|
formattedPrice.second = priceArr[1];
|
|
priceSlice.value = formattedPrice
|
|
}else {
|
|
priceSlice.value = {
|
|
first: 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
watch(() => props.price, () => {
|
|
priceFormat.format()
|
|
})
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {}
|
|
</script> |