添加金额格式化组件

src/components/price-format.vue

@@ -0,0 +1,80 @@
+<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" :style="{'font-size': secondSize + 'rpx'}">.{{priceSlice.second}}</text>
+	</text>
+</template>
+
+<script lang="ts" setup name="priceFormat">
+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
+    },
+    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>