caimei-applets-caimei/components/cm-module/pageTemplate/templatePrice.vue

<template name="cm-acttags">
	<!-- 楼层价格显示公共组件 -->
	<view>
		<template v-if="vipFlag == 1">
			<view class="title-none" v-if="goods.priceFlag === 1"> <text class="p big">￥未公开价格</text> </view>
			<view
				class="price tui-skeleton-rect"
				v-else
				:class="PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1 ? 'none' : ''"
			>
				<text class="p sm">￥</text>
				<text class="p big">{{
					(PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1
						? goods.originalPrice
						: goods.price) | NumFormat
				}}</text>
			</view>
		</template>
		<template v-else>
			<!-- 供应商查看商品价格 -->
			<template v-if="userIdentity == 3">
				<template v-if="goods.shopId == shopId">
					<view class="title-none" v-if="goods.priceFlag === 1">
						<text class="p big">￥未公开价格</text>
					</view>
					<view
						class="price tui-skeleton-rect"
						v-else
						:class="PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1 ? 'none' : ''"
					>
						<text class="p sm">￥</text>
						<text class="p big">{{
							(PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1
								? goods.originalPrice
								: goods.price) | NumFormat
						}}</text>
					</view>
				</template>
				<template v-else>
					<view class="no-price">
						<view class="p-stars">
							<text class="p-no">￥</text>
							<uni-grader :grade="Number(goods.priceGrade)" :margin="14"></uni-grader>
						</view>
					</view>
				</template>
			</template>
			<!-- 个人机构查看价格 -->
			<template v-else-if="userIdentity === 4">
				<view class="title-none" v-if="goods.priceFlag === 1"> <text class="p big">￥未公开价格</text> </view>
				<view class="title-none" v-if="goods.priceFlag === 2">
					<text class="p big">￥价格仅会员可见</text>
				</view>
				<view
					class="price tui-skeleton-rect"
					v-if="goods.priceFlag === 0"
					:class="PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1 ? 'none' : ''"
				>
					<text class="p sm">￥</text>
					<text class="p big">{{
						(PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1
							? goods.originalPrice
							: goods.price) | NumFormat
					}}</text>
				</view>
			</template>
			<!-- 协销和会员机构查看价格 -->
			<template v-else>
				<view class="title-none" v-if="goods.priceFlag === 1"> <text class="p big">￥未公开价格</text> </view>
				<view
					class="price tui-skeleton-rect"
					v-else
					:class="PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1 ? 'none' : ''"
				>
					<text class="p sm">￥</text>
					<text class="p big">{{
						(PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1
							? goods.originalPrice
							: goods.price) | NumFormat
					}}</text>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import uniGrader from '@/components/uni-grade/uni-grade.vue'
export default {
	name: 'cm-price',
	components: {
		uniGrader
	},
	props: {
		product: {
			type: Object
		}
	},
	data() {
		return {
			vipFlag: 0, // 是否是超级会员 0否 1是
			shopId: 0, // 是否是供应商
			userIdentity: 0, // 用户类型
			goods: {}
		}
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	created() {
		this.initData(this.product)
	},
	computed: {
		...mapState(['hasLogin', 'isWxAuthorize'])
	},
	watch: {
		pageData: {
			handler: function(el) {
				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
				this.product = el
				this.initData(this.product)
			},
			deep: true
		}
	},
	methods: {
		async initData(data) {
			const userInfo = await this.$api.getStorage()
			this.shopId = userInfo.shopId ? userInfo.shopId : 0
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
			this.goods = data
		},
		isShowVipFlag(pros) {
			if (pros.priceFlag != 1) {
				if (this.userIdentity == 4 && this.vipFlag == 1) {
					return true
				} else if (this.userIdentity == 2) {
					return true
				}
			}
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		}
	}
}
</script>

<style lang="scss">
.price {
	color: #ff2a2a;
	line-height: 54rpx;
	&.none {
		text-decoration: line-through;
		color: #999999;
	}
	.sm {
		font-size: $font-size-24;
	}
	.big {
		font-size: $font-size-28;
	}
}
.title-none {
	font-size: $font-size-26;
	color: #ff2a2a;
	line-height: 54rpx;
}
</style>