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

<template>
	<view class="container floor clearfix">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<!-- 楼层 -->
		<view class="container-section tui-skeleton">
			<view class="floor-item-banner ad_01" v-if="appletsBanner">
				<image class="item-img-gg" :src="appletsBanner"></image>
			</view>
			<view class="section_page_main clearfix">
				<view
					class="floor-item clearfix"
					v-for="(pros, idx) in productList"
					:key="idx"
					@click.stop="navToDetailPage(pros.productId)"
				>
					<image class="item-img tui-skeleton-fillet" :src="pros.image" mode="aspectFill"></image>
					<view class="floor-item-content">
						<view class="title tui-skeleton-rect">
							<text class="mclap-tag" v-if="pros.beautyActFlag == '1'">美博会</text>
							<text class="mclap" :class="pros.beautyActFlag == '1' ? 'indent' : ''"
								>{{ pros.name }}
							</text>
						</view>
						<view class="floor-item-price">
							<view class="floor-item-act">
								<view class="coupon-tags">优惠券</view>
								<template v-if="pros.actStatus === 1">
									<view class="floor-tags" v-if="PromotionsFormat(pros.promotions)">
										{{ pros.promotions.name }}
										<text v-if="pros.priceFlag != 1">:￥{{ pros.price | NumFormat }}</text>
									</view>
									<view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
								</template>
								<template v-if="pros.svipProductFlag == 1">
									<view class="svip-tags">
										<view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view>
										<view class="price" v-if="isShowVipFlag(pros)">{{ pros.svipPriceTag }}</view>
									</view>
								</template>
							</view>
							<view>
								<template v-if="userIdentity === 4 && vipFlag != 1">
									<view class="title-none" v-if="pros.priceFlag === 1">
										<text class="p big">￥未公开价格</text>
									</view>
									<view class="title-none" v-if="pros.priceFlag === 2">
										<text class="p big">￥价格仅会员可见</text>
									</view>
									<view
										class="price tui-skeleton-rect"
										v-if="pros.priceFlag === 0"
										:class="PromotionsFormat(pros.promotions) ? 'none' : ''"
									>
										<text class="p sm">￥</text>
										<text class="p big">
											{{
												(PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price)
													| NumFormat
											}}
										</text>
									</view>
								</template>
								<template v-else>
									<view class="title-none" v-if="pros.priceFlag === 1">
										<text class="p big">￥未公开价格</text>
									</view>
									<view
										class="price tui-skeleton-rect"
										v-else
										:class="
											PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1 ? 'none' : ''
										"
									>
										<text class="p sm">￥</text>
										<text class="p big">
											{{
												(PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
													? pros.originalPrice
													: pros.price) | NumFormat
											}}
										</text>
									</view>
								</template>
							</view>
						</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>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			vipFlag: 0,
			userIdentity: 0,
			productList: [],
			appletsBanner: '',
			listQuery: {
				userId: 0,
				couponId: 0,
				pageSize: 10,
				pageNum: 1,
				source: 2
			},
			NavigationBarTitle: '',
			nomoreText: '上拉显示更多',
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true
		}
	},
	onLoad(option) {
		this.listQuery.couponId = option.couponId
		this.initGetStotage()
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'identity'])
	},
	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.QueryCouponActivityList()
		},
		QueryCouponActivityList() {
			//楼层查看更多
			this.ProductService.QueryCouponActivityList(this.listQuery)
				.then(response => {
					let data = response.data
					uni.setNavigationBarTitle({ title: data.coupon.name })
					this.appletsBanner = data.coupon.appletsBanner
					this.productList = data.pageInfo.list
					this.hasNextPage = data.pageInfo.hasNextPage
					this.skeletonShow = false
					if (this.hasNextPage) {
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					} else {
						if (this.productList.length <6) {
							this.pullUpOn = true
						} else {
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		OnReachBottomData() {
			// 上滑加载
			this.listQuery.pageNum += 1
			this.ProductService.QueryCouponActivityList(this.listQuery)
				.then(response => {
					let data = response.data
					uni.setNavigationBarTitle({ title: data.coupon.name })
					this.hasNextPage = data.pageInfo.hasNextPage
					this.productList = this.productList.concat(data.pageInfo.list)
					this.skeletonShow = false
					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
		},
		navToDetailPage(productId) {
			//跳转商品详情页
			this.$api.navigateTo(`/pages/goods/product?id=${productId}`)
		},
		isShowVipFlag(pros) {
			// 超级会员价格显示控制
			if (this.hasLogin && pros.priceFlag != 1) {
				if (this.userIdentity == 4 && this.vipFlag == 1) {
					return true
				} else if (this.userIdentity == 2) {
					return true
				}
			}
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.productList = []
			this.listQuery.pageNum = 1
			this.QueryCouponActivityList()
			uni.stopPullDownRefresh()
		}, 200)
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.OnReachBottomData()
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.container-home {
	width: 100%;
	height: auto;
}
.container-section {
	width: 100%;
	height: auto;
	background-color: #f7f7f7;
	box-sizing: border-box;
	padding: 24rpx;
}
.floor-item-banner {
	width: 100%;
	height: 240rpx;
	margin-bottom: 20rpx;
	.item-img-gg {
		width: 100%;
		height: 240rpx;
		display: block;
		border-radius: 16rpx;
	}
}
.section_page_main {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	.floor-item {
		width: 339rpx;
		height: 516rpx;
		margin-right: 20rpx;
		font-size: $font-size-24;
		color: $text-color;
		background: #ffffff;
		line-height: 36rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		float: left;
		box-sizing: border-box;
		position: relative;
		&:nth-child(2n) {
			margin-right: 0;
		}
		.item-img {
			width: 339rpx;
			height: 339rpx;
			border-radius: 16rpx 16rpx 0 0;
			display: block;
			margin-bottom: 8rpx;
		}
		.floor-item-content {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
		.floor-item-act {
			display: block;
			width: 100%;
			height: 32rpx;
			text-align: center;
			box-sizing: border-box;
		}
		.title-none {
			font-size: $font-size-26;
			color: #ff2a2a;
			line-height: 54rpx;
		}
		.title {
			width: 100%;
			height: 70rpx;
			display: flex;
			line-height: 35rpx;
			flex-direction: column;
			margin: 8rpx 0;
			padding: 0;
			position: relative;
			.mclap {
				width: 100%;
				line-height: 35rpx;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: 26rpx;
				&.indent {
					text-indent: 95rpx;
				}
			}
			.mclap-tag {
				display: block;
				width: 84rpx;
				height: 32rpx;
				background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
				border-radius: 4rpx 48rpx 4px 4px;
				line-height: 32rpx;
				font-size: $font-size-22;
				color: #ffffff;
				text-align: center;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		.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;
			}
		}
	}
}
</style>