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-if="userIdentity == 1">
				<!-- 协销 -->
				<view
					class="sku-price-text"
					:class="PromotionsFormat(skuProduct.promotions) || skuProduct.svipProductFlag == 1 ? 'none' : ''"
				>
					￥{{
						(PromotionsFormat(skuProduct.promotions) || skuProduct.svipProductFlag == 1
							? skuProduct.originalPrice
							: skuProduct.price) | NumFormat
					}}
				</view>
			</template>
			<template v-else-if="userIdentity == 2 || (userIdentity == 4 && vipFlag == 1)">
				<!-- 资质机构 -->
				<view class="sku-price-text" v-if="skuProduct.priceFlag == 1">￥未公开价格</view>
				<view class="sku-price-text" v-else-if="skuProduct.priceFlag == 3 && firstClubType != 1"
					>￥仅医美机构可见</view
				>
				<view
					v-else
					class="sku-price-text"
					:class="PromotionsFormat(skuProduct.promotions) || skuProduct.svipProductFlag == 1 ? 'none' : ''"
				>
					￥{{
						(PromotionsFormat(skuProduct.promotions) || skuProduct.svipProductFlag == 1
							? skuProduct.originalPrice
							: skuProduct.price) | NumFormat
					}}
				</view>
			</template>
			<template v-else-if="userIdentity == 3">
				<!-- 供应商 -->
				<template v-if="skuProduct.shopId === shopID">
					<view class="sku-price-text" v-if="skuProduct.priceFlag == 1">￥未公开价格</view>
					<view
						v-else
						class="sku-price-text"
						:class="PromotionsFormat(skuProduct.promotions) || skuProduct.svipProductFlag == 1 ? 'none' : ''"
					>
						￥{{
							(PromotionsFormat(skuProduct.promotions) || skuProduct.svipProductFlag == 1
								? skuProduct.originalPrice
								: skuProduct.price) | NumFormat
						}}
					</view>
				</template>
				<template v-else>
					<view class="sku-price-text">
						<text class="sku-price-l">￥</text>
						<uni-grader :grade="Number(skuProduct.priceGrade)"></uni-grader>
					</view>
				</template>
			</template>
			<template v-else-if="userIdentity == 4 && vipFlag != 1">
				<!-- 普通机构 -->
				<text class="sku-price-text" v-if="skuProduct.priceFlag == 1">￥未公开价格</text>
				<text class="sku-price-text" v-else-if="skuProduct.priceFlag == 2">￥价格仅会员可见</text>
				<text class="sku-price-text" v-else-if="skuProduct.priceFlag == 3">￥仅医美机构可见</text>
				<view
					v-else
					class="sku-price-text"
					:class="PromotionsFormat(skuProduct.promotions) || skuProduct.svipProductFlag == 1 ? 'none' : ''"
				>
					￥{{
						(PromotionsFormat(skuProduct.promotions) || skuProduct.svipProductFlag == 1
							? skuProduct.originalPrice
							: skuProduct.price) | NumFormat
					}}
				</view>
			</template>
		</view>
		<view class="sku-price-vip">
			<!-- 优惠券和超级会员标记 -->
			<template v-if="!hasLogin">
				<!-- 游客 -->
				<view class="floor-item-act">
					<view class="coupon-tags" v-if="productCoupon.length > 0">优惠券</view>
					<template v-if="skuProduct.actStatus == 1">
						<view v-if="skuProduct.promotions.type == 1 && skuProduct.promotions.mode == 1" class="floor-tags">
							{{ skuProduct.promotions.name }}<text v-if="hasLogin">:￥{{ skuProduct.price | NumFormat }}</text>
						</view>
						<view v-else class="floor-tags">{{ skuProduct.promotions.name }}</view>
					</template>
					<template v-if="skuProduct.svipProductFlag == 1">
						<view class="svip-tags"> <view class="tags none">SVIP</view> </view>
					</template>
				</view>
			</template>
			<template v-else-if="userIdentity == 1">
				<!-- 协销 -->
				<view class="floor-item-act">
					<view class="coupon-tags" v-if="productCoupon.length > 0">优惠券</view>
					<template v-if="skuProduct.actStatus == 1">
						<view v-if="skuProduct.promotions.type == 1 && skuProduct.promotions.mode == 1" class="floor-tags">
							{{ skuProduct.promotions.name
							}}<text v-if="hasLogin"
								>:￥{{
									skuProduct.promotions == null ? '0.00' : skuProduct.price | NumFormat
								}}</text
							>
						</view>
						<view v-else class="floor-tags">{{ skuProduct.promotions.name }}</view>
					</template>
					<template v-if="skuProduct.svipProductFlag == 1">
						<view class="svip-tags">
							<view class="tags none">SVIP</view> <view class="price">{{ skuProduct.svipPriceTag }}</view>
						</view>
					</template>
				</view>
			</template>
			<template v-else-if="userIdentity == 2 || (userIdentity == 4 && vipFlag == 1)">
				<!-- 资质机构 -->
				<view class="floor-item-act">
					<view class="coupon-tags" v-if="productCoupon.length > 0">优惠券</view>
					<template v-if="skuProduct.actStatus == 1">
						<view v-if="skuProduct.promotions.type == 1 && skuProduct.promotions.mode == 1" class="floor-tags">
							{{ skuProduct.promotions.name
							}}<text v-if="hasLogin && skuProduct.priceFlag != 1"
								>:￥{{
									skuProduct.promotions == null ? '0.00' : skuProduct.price | NumFormat
								}}</text
							>
						</view>
						<view v-else class="floor-tags">{{ skuProduct.promotions.name }}</view>
					</template>
					<template v-if="skuProduct.svipProductFlag == 1">
						<view class="svip-tags">
							<view class="tags" :class="{ none: !isShowVipFlag(skuProduct) }">SVIP</view>
							<view class="price" v-if="isShowVipFlag(skuProduct)">{{ skuProduct.svipPriceTag }}</view>
						</view>
					</template>
				</view>
			</template>
			<template v-else-if="userIdentity == 3">
				<!-- 供应商 -->
				<view class="floor-item-act">
					<view class="coupon-tags" v-if="productCoupon.length > 0">优惠券</view>
					<template v-if="skuProduct.actStatus == 1">
						<view v-if="skuProduct.promotions.type == 1 && skuProduct.promotions.mode == 1" class="floor-tags">
							{{ skuProduct.promotions.name
							}}<text v-if="hasLogin && skuProduct.priceFlag != 1"
								>:￥{{
									skuProduct.promotions == null ? '0.00' : skuProduct.price | NumFormat
								}}</text
							>
						</view>
						<view v-else class="floor-tags">{{ skuProduct.promotions.name }}</view>
					</template>
					<template v-if="skuProduct.svipProductFlag == 1">
						<view class="svip-tags">
							<view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view>
							<view class="price" v-if="skuProduct.priceFlag != 1 && vipFlag == 1">{{
								skuProduct.svipPriceTag
							}}</view>
						</view>
					</template>
				</view>
			</template>
			<template v-else-if="userIdentity == 4 && vipFlag != 1">
				<!-- 普通机构 -->
				<view class="floor-item-act">
					<view class="coupon-tags" v-if="productCoupon.length > 0">优惠券</view>
					<template v-if="skuProduct.actStatus == 1">
						<view v-if="PromotionsFormat(skuProduct.promotions)" class="floor-tags">
							{{ skuProduct.promotions.name
							}}<text v-if="hasLogin && skuProduct.priceFlag != 1"
								>:￥{{
									skuProduct.promotions == null ? '0.00' : skuProduct.price | NumFormat
								}}</text
							>
						</view>
						<view v-else class="floor-tags">{{ skuProduct.promotions.name }}</view>
					</template>
					<template v-if="skuProduct.svipProductFlag == 1">
						<view class="svip-tags">
							<view class="tags" :class="{ none: !isShowVipFlag(skuProduct) }">SVIP</view>
							<view class="price" v-if="isShowVipFlag(product)">{{ skuProduct.svipPriceTag }}</view>
						</view>
					</template>
				</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: {}
		},
		productCoupon: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			vipFlag: 0, // 是否是超级会员 0否 1是
			userIdentity: 2,
			shopID: 0,
			isIphoneX: this.$store.state.isIphoneX,
			firstClubType: 0
		}
	},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		}
	},
	created() {
		this.initData()
	},
	computed: {
		...mapState(['hasLogin', 'clubType'])
	},
	methods: {
		async initData(data) {
			const userInfo = await this.$api.getStorage()
			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			this.shopID = userInfo.shopId ? userInfo.shopId : 0
			this.firstClubType = this.clubType
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		isShowVipFlag(pros) {
			/**
			 *显示SVIP和超级会员价格：
			 * 	个人机构（不是超级会员，但价格所有机构可见），
			 *	资质机构（不是超级会员，但价格所有机构可见或仅会员可见），
			 * 	超级会员（价格所有机构可见或仅会员可见），超级会员（是医美机构，价格仅医美可见）
			 *商品价格是否可见：priceFlag  0:所有机构可见 1：未公开价格 2：仅会员可见 3：仅医美机构可见
			 *	普通机构
			 * 		超级会员 && priceFlag === 0
			 * 	资质机构
			 * 		priceFlag !== 1 ||
			 * 		超级会员
			 * 			商品priceFlag === 3 && 是否是医美机构
			 */
			// 未登录 || 非会员
			if (!this.hasLogin || !this.vipFlag === 1) return false
			// 商品所有机构可见
			if (pros.priceFlag === 0) return true
			// 商品价格仅资质机构可见
			if (pros.priceFlag === 2 && this.userIdentity === 2) return true
			// 商品价格仅医美机构可见
			if (pros.priceFlag === 3 && this.userIdentity === 2 && this.firstClubType == 1) return true
			// 其它
			return false
		}
	}
}
</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>