caimei-applets-caimei/pages/user/member/member-product.vue

<template>
	<view class="container clearfix" v-if="isRequest">
		<view class="cm-member-top"> <image class="banner" :src="banner" mode=""></image> </view>
		<view class="cm-member-main ">
			<view class="cm-member-product clearfix">
				<view
					v-for="(pro, index) in productList"
					:key="index"
					:id="pro.productId"
					class="product-list"
					@click="productDetail(pro.productId)"
				>
					<view class="product-image"> <image :src="pro.image" mode=""></image> </view>
					<view class="product-mains">
						<view class="product-name"> {{ pro.name }} </view>
						<view class="product-tags">
							<view class="floor-item-act">
								<view class="coupon-tags" v-if="pro.couponsLogo">优惠券</view>
								<template v-if="pro.actStatus == 1">
									<view class="floor-tags" v-if="PromotionsFormat(pro.promotions)">
										{{ pro.promotions.name }}
										<text v-if="pro.priceFlag != 1">:￥{{ pro.price | NumFormat }}</text>
									</view>
									<view class="floor-tags" v-else>{{ pro.promotions.name }}</view>
								</template>
								<template v-if="pro.svipProductFlag == 1">
									<view class="svip-tags">
										<view class="tags" :class="{ none: !isShowVipFlag }">SVIP</view>
										<view class="price" v-if="isShowVipFlag(pro)">{{ pro.svipPriceTag }}</view>
									</view>
								</template>
							</view>
						</view>
						<view class="product-price" v-if="hasLogin">
							<!-- 价格未公开 -->
							<view class="list-none" v-if="pro.priceFlag == 1">￥未公开价格</view>
							<!-- 价格公开 -->
							<template v-else>
								<!-- 个人机构且不是超级会员 -->
								<template v-if="userIdentity == 4 && vipFlag != 1">
									<!-- 价格仅会员可见 -->
									<view class="list-none" v-if="pro.priceFlag == 2"
										>￥价格仅会员可见</view
									>
									<!-- 价格仅医美机构可见 -->
									<view class="list-none" v-else-if="pro.priceFlag == 3"
										>￥仅医美机构可见</view
									>
									<view class="list-none-price" v-else>￥{{ pro.originalPrice | NumFormat }}</view>
								</template>
								<!-- 资质机构 || 个人机构且是超级会员 -->
								<template v-else>
									<!-- 价格仅医美机构可见 -->
									<view class="list-none" v-if="pro.priceFlag == 3 && firstClubType!=1"
										>￥仅医美机构可见</view
									>
									<view class="list-none-price" v-else>￥{{ pro.originalPrice | NumFormat }}</view>
								</template>
							</template>
						</view>
						<view v-else class="product-price-none">
							<text class="p-no">￥</text>
							<uni-grader :grade="Number(pro.priceGrade)"></uni-grader>
						</view>
					</view>
				</view>
			</view>
			<!--加载loadding-->
			<tui-loadmore :visible="loadding" :index="3" type="black" />
			<tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText" />
			<!--加载loadding-->
		</view>
		<!-- 透明模态层 -->
		<modal-layer v-if="isModallayer" />
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import modalLayer from '@/components/modal-layer'
import uniGrader from '@/components/uni-grade/uni-grade.vue'

export default {
	components: {
		modalLayer,
		uniGrader
	},
	data() {
		return {
			StaticUrl: this.$Static,
			isModallayer: false,
			banner: '',
			listQuery: {
				userId: 0,
				source: 2,
				pageNum: 1,
				pageSize: 10
			},
			vipFlag: 0,
			userIdentity: 0,
			firstClubType:0,
			productList: [],
			nomoreText: '上拉显示更多',
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			isRequest: false
		}
	},
	onLoad() {
		this.initGetStotage()
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	computed: {
		...mapState(['hasLogin', 'clubType'])
	},
	methods: {
		async initGetStotage() {
			const userInfo = await this.$api.getStorage()
			this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			this.firstClubType = this.clubType
			this.getSvipProductPage()
		},
		getSvipProductPage() {
			// 获取会员优惠商品列表
			this.coupinList = []
			this.listQuery.pageNum = 1
			this.ProductService.getSvipProductPage(this.listQuery)
				.then(response => {
					let data = response.data.svipProductPage
					this.banner = response.data.adsImage
					if (data.results && data.results.length > 0) {
						this.showEmpty = false
						this.hasNextPage = data.hasNextPage
						this.productList = data.results
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							if (this.coupinList.length < 8) {
								this.pullUpOn = true
							} else {
								this.pullUpOn = false
								this.loadding = false
								this.nomoreText = '已至底部'
							}
						}
					} else {
						this.showEmpty = true
					}
					this.isRequest = true
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getOnReachBottomData() {
			// 上滑加载分页
			this.listQuery.pageNum += 1
			this.ProductService.getSvipProductPage(this.listQuery)
				.then(response => {
					let data = response.data.svipProductPage
					if (data.results && data.results.length > 0) {
						this.hasNextPage = data.hasNextPage
						this.productList = this.productList.concat(data.results)
						this.pullFlag = false // 防上拉暴滑
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		productDetail(productId) {
			// 跳转商品详情
			this.isModallayer = true
			this.$api.navigateTo(`/pages/goods/product?id=${productId}`)
			this.isModallayer = 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
		},
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.getSvipProductPage()
			uni.stopPullDownRefresh()
		}, 200)
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.getOnReachBottomData()
		}
	},
	onShareAppMessage(res) {
		//分享转发
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: '采美超级会员，巨量优惠享不停',
			path: '/pages/user/member/member-product',
			imageUrl: 'https://static.caimei365.com/app/img/icon/icon-member-share@2x.png'
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.container {
	width: 100%;
	height: auto;
}
.cm-member-top {
	width: 100%;
	height: 340rpx;
	box-sizing: border-box;
	padding: 0 24rpx;
	margin: 24rpx 0 0 0;
	.banner {
		width: 100%;
		height: 340rpx;
		display: block;
		border-radius: 16rpx;
	}
}
.cm-member-main {
	width: 100%;
	box-sizing: border-box;
	padding: 0 24rpx 24rpx 24rpx;
	background-color: #f7f7f7;
	.cm-member-product {
		width: 100%;
		margin-top: 24rpx;
		.product-list {
			width: 339rpx;
			height: 516rpx;
			border-radius: 16rpx;
			float: left;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			background-color: #ffffff;
			&:nth-child(2n) {
				margin-right: 0;
			}
			.product-image {
				width: 339rpx;
				height: 339rpx;
				image {
					width: 339rpx;
					height: 339rpx;
					display: block;
					border-radius: 16rpx 16rpx 0 0;
				}
			}
			.product-mains {
				width: 100%;
				height: auto;
				box-sizing: border-box;
				padding: 0 24rpx;
				margin-top: 8rpx;
				.product-name {
					height: 72rpx;
					line-height: 36rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: $font-size-26;
					color: #333333;
					text-align: justify;
				}
				.product-tags {
					width: 100%;
					height: 32rpx;
					margin-top: 6rpx;
					.floor-item-act {
						width: 100%;
						height: 32rpx;
						text-align: center;
						box-sizing: border-box;
						float: left;
					}
				}
				.product-price {
					width: 100%;
					line-height: 37rpx;
					font-size: $font-size-26;
					color: #f94b4b;
					margin-top: 8rpx;
					.list-none-price {
						text-decoration: line-through;
						color: #999999;
					}
				}
				.product-price-none {
					color: #f8c499;
					float: left;
					line-height: 54rpx;
					.p-no {
						float: left;
						font-size: $font-size-24;
						color: $text-color;
					}
				}
				.product-svip {
					width: 100%;
					height: 32rpx;
					margin-top: 10rpx;
					.svip {
						padding-left: 44rpx;
						height: 32rpx;
						position: relative;
						.tags {
							width: 60rpx;
							height: 32rpx;
							background-color: #333333;
							text-align: center;
							line-height: 32rpx;
							font-size: $font-size-22;
							color: #f0cb72;
							position: absolute;
							left: 0;
							top: 0;
							border-radius: 8rpx 16rpx 8rpx 8rpx;
						}
						.price {
							height: 32rpx;
							box-sizing: border-box;
							border-radius: 0 8rpx 8rpx 0;
							background-color: #f0cb72;
							line-height: 32rpx;
							color: #333333;
							text-align: center;
							padding: 0 9rpx 0 25rpx;
							font-size: $font-size-26;
							float: left;
						}
					}
				}
			}
		}
	}
}
</style>