LeadfyyUI/components/lf-price/lf-price.vue

<template>
	<view :style="{'--color': color, 'display': 'inline-block'}">
		<block v-if="isPoint">
			<text class="price-one text-price">{{ showPrice(1) }}</text>
			<text class="price-two">.{{ showPrice(2) }}</text>
		</block>
		<block v-else>
			<text class="price-one text-price">{{ showPrice() }}</text>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			price: {
				type: [Number, String],
				default: ''
			},
			color: {
				type: String,
				default: '#FF0000'
			}
		},
		computed: {
			// 是否存在小数点
			isPoint(){
				let price = parseFloat(this.$props.price).toString();
				return price.indexOf('.') >= 0;
			},
			showPrice(){
				let price = parseFloat(this.$props.price).toString(); // 过滤价格出现.00的情况
				return function(type){
					let price_arr = price.split('.');
					if(type == 1){
						return price_arr[0];
					}else if(type == 2){
						return price_arr[1];
					}else{
						return price_arr[0];
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.price-one{
		font-size: 48rpx;
		font-weight: bold;
		color: var(--color);
	}
	.price-two{
		font-size: 28rpx;
		font-weight: bold;
		color: var(--color);
	}
	.text-price::before {
		content: "¥";
		font-size: 28rpx!important;
		margin-right: 4rpx;
		font-weight: bold;
		color: var(--color);
	}
</style>