超级会员版本首页楼层，分类楼层商品活动标签、价格抽离组件

components/cm-module/pageTemplate/templatePrice.vue

@@ -0,0 +1,208 @@
+<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.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.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.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.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>

components/cm-module/pageTemplate/templateTags.vue

@@ -0,0 +1,136 @@
+<template name="cm-acttags">
+	<!-- 促销优惠VIP标签 -->
+	<view class="floor-item-act">
+		<view class="coupon-tags" v-if="goods.couponsLogo">优惠券</view>
+		<template v-if="userIdentity === 3">
+			<template v-if="goods.actStatus == 1">
+				<view class="floor-tags" v-if="PromotionsFormat(goods.promotions)">
+					{{ goods.promotions.name }}
+					<text v-if="hasLogin && goods.priceFlag != 1 && goods.shopId == shopId"
+						>:￥{{ goods.price | NumFormat }}</text
+					>
+				</view>
+				<view class="floor-tags" v-else>{{ goods.promotions.name }}</view>
+			</template>
+			<template v-if="goods.svipProductFlag == 1">
+				<view class="svip-tags" v-if="goods.shopId == shopId">
+					<view class="tags">SVIP</view>
+					<view class="price" v-if="goods.priceFlag != 1 && userIdentity == 2">{{ goods.svipPriceTag }}</view>
+				</view>
+				<view class="svip-tags" v-else> <view class="tags none">SVIP</view> </view>
+			</template>
+		</template>
+		<template v-if="userIdentity === 1">
+			<template v-if="goods.actStatus == 1">
+				<view class="floor-tags" v-if="PromotionsFormat(goods.promotions)">
+					{{ goods.promotions.name }} <text>:￥{{ goods.price | NumFormat }}</text>
+				</view>
+				<view class="floor-tags" v-else>{{ goods.promotions.name }}</view>
+			</template>
+			<template v-if="goods.svipProductFlag == 1">
+				<view class="svip-tags"> <view class="tags none">SVIP</view> </view>
+			</template>
+		</template>
+		<template v-else>
+			<template v-if="goods.actStatus == 1">
+				<view class="floor-tags" v-if="PromotionsFormat(goods.promotions)">
+					{{ goods.promotions.name }}
+					<text v-if="userIdentity == 2 && goods.priceFlag != 1">:￥{{ goods.price | NumFormat }}</text>
+				</view>
+				<view class="floor-tags" v-else>{{ goods.promotions.name }}</view>
+			</template>
+			<template v-if="goods.svipProductFlag == 1">
+				<view class="svip-tags">
+					<view class="tags" :class="{ none: vipFlag == 0 }">SVIP</view>
+					<view
+						class="price"
+						v-if="isShowVipFlag(goods)"
+						>{{ goods.svipPriceTag }}</view
+					>
+				</view>
+			</template>
+		</template>
+	</view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+	name: 'cm-price',
+	components: {},
+	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">
+.floor-item-act {
+	display: block;
+	width: 100%;
+	height: 32rpx;
+	text-align: center;
+	box-sizing: border-box;
+}
+</style>