zh_order_food_xcx/components/price-display.vue

<template>
	<view class="price-container">
		<text class="price-integer"
			:style="{fontSize:integerSize+'rpx',fontWeight:integerFontWeight,color:integerColor}">{{ integerPart }}</text>
		<text class="price-decimal"
			:style="{fontSize:decimalSize+'rpx',fontWeight:decimalFontWeight,color:decimalColor}">.{{ decimalPart }}</text>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				// 接收价格，如 99.00
				type: [Number, String],
				default: 0
			},
			// 整数字体大小
			integerSize: {
				type: Number,
				default: 40,
			},
			// 整数字体粗细
			integerFontWeight: {
				type: Number,
				default: 700,
			},
			// 整数字体颜色
			integerColor: {
				type: String,
				default: '#333',
			},
			// 小数字体大小
			decimalSize: {
				type: Number,
				default: 24,
			},
			// 小数字体大小
			decimalFontWeight: {
				type: Number,
				default: 700,
			},
			// 小数字体颜色
			decimalColor: {
				type: String,
				default: '#333',
			},
		},
		computed: {
			// 拆分整数和小数部分
			priceParts() {
				const num = Number(this.value)
				// 固定保留两位小数，并拆分
				const [integer, decimal] = num.toFixed(2).split('.')
				return {
					integer,
					decimal
				}
			},
			integerPart() {
				return `${this.priceParts.integer}`
			},
			decimalPart() {
				return this.priceParts.decimal
			}
		}
	}
</script>

<style scoped></style>