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

<template name="cm-price">
	<!-- 商品详情价格判断 -->
	<view class="wrap-main">
		<template v-if="!hasLogin">
			<view class="p-login grade tui-skeleton-fillet">
				<text class="p-no">￥</text>
				<uni-grader :grade="Number(product.priceGrade)"></uni-grader>
				<view class="floor-item-act">
					<template v-if="product.actStatus == 1" >
						<view
							v-if="product.promotions.type == 1 && product.promotions.mode == 1"
							class="floor-tags"
							@click.stop="clickPopupShow()"
						>
							{{ product.promotions.name }}<text v-if="hasLogin">:￥{{ product.price | NumFormat }}</text>
						</view>
						<view v-else class="floor-tags" @click.stop="clickPopupShow()">{{ product.promotions.name }}</view>
					</template>
					<template v-if="product.svipProductFlag == 1">
						<view class="svip-tags">
							<view class="tags none">SVIP</view>
						</view>
					</template>
				</view>
				<view class="floor-item-btn"> <view class="btn" @click.stop="loginClick">登录查看价格</view> </view>
			</view>
		</template>
		<template v-else>
			<!-- 协销  -->
			<template v-if="userIdentity == 1">
				<view class="wrap-main-item">
					<view
						class="p-price tui-skeleton-fillet"
						:class="(PromotionsFormat(product.promotions) || product.svipProductFlag == 1) ? 'none' : ''"
					>
						<text class="txt sm">￥</text>
						<text class="txt big">{{
							((PromotionsFormat(product.promotions) || product.svipProductFlag == 1) ? product.originalPrice : product.price) | NumFormat
						}}</text>
					</view>
					<view class="floor-item-act">
						<template v-if="product.actStatus == 1" >
							<view
								v-if="product.promotions.type == 1 && product.promotions.mode == 1"
								class="floor-tags"
								@click.stop="clickPopupShow(1)"
							>
								{{ product.promotions.name
								}}<text v-if="hasLogin"
									>:￥{{
										product.promotions == null ? '0.00' : product.promotions.touchPrice | NumFormat
									}}</text
								>
							</view>
							<view v-else class="floor-tags" @click.stop="clickPopupShow()">{{
								product.promotions.name
							}}</view>
						</template>
						<template v-if="product.svipProductFlag == 1">
							<view class="svip-tags">
								<view class="tags none">SVIP</view>
								<view class="price">{{ product.svipPriceTag }}</view>
							</view>
						</template>
					</view>
				</view>
			</template>
			<!-- 资质机构  -->
			<template v-if="userIdentity == 2 || (userIdentity == 4 && vipFlag == 1)">
				<view class="wrap-main-item">
					<view v-if="product.priceFlag == 1" class="wrap-main-text">￥未公开价格</view>
					<view v-else-if="product.priceFlag == 3 && (firstClubType!=1)" class="wrap-main-text">￥仅医美机构可见</view>
					<view
						v-else
						class="p-price tui-skeleton-fillet"
						:class="( PromotionsFormat(product.promotions) || product.svipProductFlag == 1 )? 'none' : ''"
					>
						<text class="txt sm">￥</text>
						<text class="txt big">{{
							((PromotionsFormat(product.promotions) || product.svipProductFlag == 1) ? product.originalPrice : product.price) | NumFormat
						}}</text>
					</view>
					<view class="floor-item-act">
						<template v-if="product.actStatus == 1" >
							<view
								v-if="product.promotions.type == 1 && product.promotions.mode == 1"
								class="floor-tags"
								@click.stop="clickPopupShow(1)"
							>
								{{ product.promotions.name
								}}<text v-if="hasLogin && product.priceFlag != 1"
									>:￥{{
										product.promotions == null ? '0.00' : product.promotions.touchPrice | NumFormat
									}}</text
								>
							</view>
							<view v-else class="floor-tags" @click.stop="clickPopupShow()">{{
								product.promotions.name
							}}</view>
						</template>
						<template v-if="product.svipProductFlag == 1">
							<view class="svip-tags">
								<view class="tags" :class="{ none: !isShowVipFlag(product) }">SVIP</view> 
								<view class="price" v-if="isShowVipFlag(product)">{{ product.svipPriceTag }}</view>
							</view>
						</template>
					</view>
				</view>
			</template>
			<!-- 供应商  -->
			<template v-if="userIdentity == 3">
				<template v-if="product.shopId === shopID">
					<view class="wrap-main-item">
						<view v-if="product.priceFlag == 1" class="wrap-main-text">￥未公开价格</view>
						<view
							v-else
							class="p-price tui-skeleton-fillet"
							:class="(PromotionsFormat(product.promotions) || product.svipProductFlag == 1)? 'none' : ''"
						>
							<text class="txt sm">￥</text>
							<text class="txt big">{{
								((PromotionsFormat(product.promotions) || product.svipProductFlag == 1 )? product.originalPrice : product.price)
									| NumFormat
							}}</text>
						</view>
						<view class="floor-item-act">
							<template v-if="product.actStatus == 1" >
								<view
									v-if="product.promotions.type == 1 && product.promotions.mode == 1"
									class="floor-tags"
									@click.stop="clickPopupShow(1)"
								>
									{{ product.promotions.name
									}}<text v-if="hasLogin && product.priceFlag != 1"
										>:￥{{
											product.promotions == null ? '0.00' : product.promotions.touchPrice | NumFormat
										}}</text
									>
								</view>
								<view v-else class="floor-tags" @click.stop="clickPopupShow()">{{
									product.promotions.name
								}}</view>
							</template>
							<template v-if="product.svipProductFlag == 1">
								<view class="svip-tags">
									<view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view> 
									<view class="price" v-if="product.priceFlag != 1 && vipFlag == 1">{{ product.svipPriceTag }}</view>
								</view>
							</template>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="p-login grade tui-skeleton-fillet">
						<text class="p-no">￥</text>
						<uni-grader :grade="Number(product.priceGrade)"></uni-grader>
					</view>
				</template>
			</template>
			<!-- 个人机构  -->
			<template v-if="userIdentity == 4 && vipFlag !=1">
				<template v-if="product.priceFlag == 1">
					<text class="wrap-main-text">￥未公开价格</text>
				</template>
				<template v-else-if="product.priceFlag == 2">
					<text class="wrap-main-text">￥价格仅会员可见</text>
					<view class="floor-item-btn">
						<view class="btn" @click.stop="goUpgradeApply">升级会员查看价格</view>
					</view>
				</template>
				<template v-else-if="product.priceFlag == 3">
					<text class="wrap-main-text">￥仅医美机构可见</text>
					<view class="floor-item-btn">
						<view class="btn" @click.stop="goUpgradeApply">成为医美机构查看价格</view>
					</view>
				</template>
				<template v-else>
					<view class="wrap-main-item">
						<view
							class="p-price tui-skeleton-fillet"
							:class="(PromotionsFormat(product.promotions) || product.svipProductFlag == 1 )? 'none' : ''"
						>
							<text class="txt sm">￥</text>
							<text class="txt big">{{
								((PromotionsFormat(product.promotions) || product.svipProductFlag == 1) ? product.originalPrice : product.price) | NumFormat
							}}</text>
						</view>
						<view class="floor-item-act">
							<template v-if="product.actStatus == 1" >
								<view
									v-if="PromotionsFormat(product.promotions)"
									class="floor-tags"
									@click.stop="clickPopupShow(1)"
								>
									{{ product.promotions.name
									}}<text v-if="hasLogin && product.priceFlag != 1"
										>:￥{{
											product.promotions == null ? '0.00' : product.promotions.touchPrice | NumFormat
										}}</text
									>
								</view>
								<view v-else class="floor-tags" @click.stop="clickPopupShow()">{{
									product.promotions.name
								}}</view>
							</template>
							<template v-if="product.svipProductFlag == 1">
								<view class="svip-tags">
									<view class="tags" :class="{ none: !isShowVipFlag(product) }">SVIP</view> 
									<view class="price" v-if="isShowVipFlag(product)">{{ product.svipPriceTag }}</view>
								</view>
							</template>
						</view>
					</view>
				</template>
			</template>
			<!--促销活动弹窗提示-->
			<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
				<view class="tui-popup-box clearfix">
					<template v-if="product.actStatus == 0 && product.ladderPriceFlag == 1">
						<view class="tui-scrollview-box">
							<view class="ladder-main clearfix">
								<view class="ladder-item">
									<view class="ladder-item-td">起订量</view> <view class="ladder-item-td">价格</view>
								</view>
								<view class="ladder-item" v-for="(ladd, index) in product.ladderPriceList" :key="index">
									<view class="ladder-item-td">{{ ladd.numRange }}</view>
									<view class="ladder-item-td">{{ ladd.buyPrice | NumFormat }}</view>
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="tui-scrollview-box">
							<view class="box-text">
								<text>促销时间：</text>
								<text class="txt" v-if="product.promotions.status == 1">不限时</text>
								<text class="txt" v-else
									>{{ product.promotions.beginTime }} ～ {{ product.promotions.endTime }}</text
								>
							</view>
							<view class="box-title" v-show="product.promotions.mode == 2">
								<text>购买{{ product.promotions.name }}商品，满</text>
								<text class="txt"
									>¥{{
										product.promotions == null ? '0.00' : product.promotions.touchPrice | NumFormat
									}}</text
								>减
								<text class="txt"
									>¥{{
										product.promotions == null
											? '0.00'
											: product.promotions.reducedPrice | NumFormat
									}}</text
								>
							</view>
							<view class="box-title" v-show="product.promotions.mode == 3">
								<text>购买{{ product.promotions.name }}商品，满</text>
								<text class="txt"
									>¥{{
										product.promotions == null ? '0.00' : product.promotions.touchPrice | NumFormat
									}}</text
								>赠送商品
							</view>
							<view class="box-product" v-show="product.promotions.mode == 3">
								<view
									class="box-product-main"
									v-for="(item, index) in product.promotions.giftList"
									:key="index"
								>
									<view class="image"><image :src="item.image" mode=""></image></view>
									<view class="info">
										<view class="name">{{ item.name }}</view>
										<view class="num">X{{ item.number }}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
						<view class="tui-flex-1">
							<view
								class="tui-button"
								v-if="product.promotions.type == 2"
								@click="goGoodActiveFn(product.promotions.id)"
								>更多凑单商品</view
							>
							<view class="tui-button" v-else @click="hidePopup()">了解</view>
						</view>
					</view>
				</view>
			</tui-bottom-popup>
		</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
		},
		userIdentity: {
			type: Number,
			default: 2
		},
		shopID: {
			type: Number,
			default: 2
		},
		ladderPriceList: {
			type: Array
		},
		promotions: {
			type: Object
		}
	},
	data() {
		return {
			vipFlag: 0, // 是否是超级会员 0否 1是
			popupShow: false,
			promotionsType: 0,
			isIphoneX: this.$store.state.isIphoneX,
			firstClubType:0
		}
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).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.firstClubType = this.clubType
		},
		clickPopupShow(type) {
			this.popupShow = true
			this.promotionsType = type
		},
		hidePopup() {
			this.popupShow = false
		},
		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
		},
		goUpgradeApply() {
			// 友盟埋点升级查看价格点击事件
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_ProductUpgrade', {
					Um_Key_PageName: '升级查看价格',
					Um_Key_SourcePage: '商品详情'
				})
			}
			this.$api.navigateTo('/pages/login/apply')
		},
		loginClick() {
			// 友盟埋点商品详情登录查看价格点击事件
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_ProductLogin', {
					Um_Key_PageName: '去登录',
					Um_Key_SourcePage: '商品详情登录查看价格'
				})
			}
			this.$api.navigateTo('/pages/login/login')
		},
		goGoodActiveFn(id) {
			this.$parent.popupShow = false
			this.$api.navigateTo('/pages/goods/goods-active?id=' + id)
		}
	}
}
</script>

<style lang="scss">
.tui-flex-1 {
	flex: 1;
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 220rpx;
	padding: 24rpx 24rpx 0 24rpx;
}
.tui-scrollview-box {
	width: 100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	.ladder-main {
		width: 100%;
		min-height: 240rpx;
		border: 1px solid rgba(225, 86, 22, 0.3);
		border-radius: 10rpx;
		.ladder-item {
			width: 100%;
			height: 80rpx;
			float: left;
			border-bottom: 1px solid rgba(225, 86, 22, 0.3);
			&:nth-child(1) {
				.ladder-item-td {
					color: #333333;
				}
			}
			&:last-child {
				border-bottom: none;
			}
			.ladder-item-td {
				width: 50%;
				text-align: center;
				line-height: 80rpx;
				font-size: $font-size-24;
				color: $color-system;
				box-sizing: border-box;
				float: left;
				&:nth-child(1) {
					border-right: 1px solid rgba(225, 86, 22, 0.3);
				}
			}
		}
	}
	.box-title {
		font-size: $font-size-26;
		color: $text-color;
		text-align: left;
		line-height: 56rpx;
		.txt {
			color: $color-system;
			margin: 0 8rpx;
		}
	}
	.box-text {
		font-size: $font-size-26;
		color: $text-color;
		text-align: left;
		line-height: 56rpx;
		.txt {
			color: $color-system;
		}
	}
	.box-product {
		width: 100%;
		height: auto;
		margin-top: 20rpx;
		.title {
			font-size: $font-size-24;
			color: $text-color;
			text-align: left;
			line-height: 54rpx;
		}
		.box-product-main {
			width: 100%;
			height: 136rpx;
			float: left;
			margin: 10rpx 0;
			.image {
				width: 134rpx;
				height: 134rpx;
				border: 1px solid #ebebeb;
				float: left;
				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.info {
				width: 540rpx;
				height: 134rpx;
				float: left;
				margin-left: 16rpx;
				position: relative;
				.name {
					width: 100%;
					float: left;
					line-height: 40rpx;
					font-size: $font-size-28;
					color: $text-color;
					-o-text-overflow: ellipsis;
					text-overflow: ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.num {
					width: 100%;
					height: 44rpx;
					font-size: $font-size-24;
					color: $text-color;
					text-align: left;
					line-height: 44rpx;
					position: absolute;
					bottom: 0;
					left: 0;
				}
			}
		}
	}
}

.tui-popup-btn {
	width: 100%;
	height: auto;
	float: left;
	margin-top: 24rpx;
	.tui-button {
		width: 100%;
		height: 88rpx;
		background: $btn-confirm;
		line-height: 88rpx;
		text-align: center;
		color: #ffffff;
		font-size: $font-size-28;
		border-radius: 44rpx;
	}
}
</style>