caimei-applets-mcare/pages/goods/good-floor.vue

<template>
	<view class="container clearfix">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<view class="cm-member-main " v-else>
			<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-price" v-if="hasLogin">
							<!-- 价格 -->
							￥{{ pro.originalPrice | NumFormat }}
						</view>
						<view v-else class="product-price-none">
							<uni-grader :grade="Number(pro.priceGrade)"></uni-grader>
						</view>
					</view>
				</view>
			</view>
			<!--加载loadding-->
			<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
			<tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore>
			<!--加载loadding-->
		</view>
		<!-- 透明模态层 -->
		<modal-layer v-if="isModallayer"></modal-layer>
	</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 {
			skeletonShow:true,
			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,
		}
	},
	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-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: 16rpx;
				.product-name {
					height: 80rpx;
					line-height: 40rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: $font-size-28;
					color: #333333;
					text-align: justify;
				}
				.product-price {
					width: 100%;
					line-height: 40rpx;
					font-size: $font-size-28;
					color: #F85050;
					margin-top: 16rpx;
				}
				.product-price-none {
					color: #f8c499;
					float: left;
					line-height: 54rpx;
					margin-top: 16rpx;
					.p-no {
						float: left;
						font-size: $font-size-24;
						color: $text-color;
					}
				}
			}
		}
	}
}
</style>