caimei-applets-mcare/pages/goods/components/cm-unit-price.vue

<template name="cm-price">
	<!-- 商品详情价格判断 -->
	<view class="sku-price-main">
		<view class="sku-price-viw">
			<!-- 价格等级和权限 -->
			<template v-if="!hasLogin">
				<!-- 游客 -->
				<view class="sku-price-text">
					<text class="sku-price-l">￥</text>
					<uni-grader :grade="Number(skuProduct.priceGrade)"></uni-grader>
				</view>
			</template>
			<template v-else>
				<!-- 资质机构 -->
				<view class="sku-price-text"> ￥{{ skuProduct.price | NumFormat }} </view>
			</template>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import uniGrader from '@/components/uni-grade/uni-grade.vue'
export default {
	name: 'cm-unit-price',
	components: {
		uniGrader
	},
	props: {
		skuProduct: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
		}
	},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		}
	},
	created() {
	},
	computed: {
		...mapState(['hasLogin', 'clubType'])
	},
	methods: {
	}
}
</script>

<style lang="scss">
.sku-price-main {
	width: 100%;
	height: 100%;
	.sku-price-viw {
		width: 100%;
		height: 40rpx;
		margin-bottom: 24rpx;
		.sku-price-text {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #f94b4b;
			font-weight: bold;
			.sku-price-l {
				float: left;
				font-weight: normal;
			}
			&.none {
				text-decoration: line-through;
				color: #999999;
				font-weight: normal;
			}
		}
	}
	.sku-price-vip {
		width: 100%;
		height: 40rpx;
	}
}
</style>