From 8f515ba02042ffc1a83362748bedb2ede9164703 Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Tue, 19 Aug 2025 17:17:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=87=91=E9=A2=9D=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E5=8C=96=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/price-format.vue | 80 +++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src/components/price-format.vue

diff --git a/src/components/price-format.vue b/src/components/price-format.vue
new file mode 100644
index 0000000..7c0278a
--- /dev/null
+++ b/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>
\ No newline at end of file