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

<template>
	<view class="container clearfix">
		<view class="container-list" v-show="isRequest">
			<view class="empty-container" v-if="showEmpty">
				<image class="empty-container-image" :src="StaticUrl+'/icon/icon-coupon-empty@2x.png'"></image>
				<text class="error-text">暂无可领的优惠券~</text>
			</view>
			<template v-else>
				<view v-for="(coupon,index) in coupinList" :key="index" :id="coupon.id" class="coupon-list">
					<view class="list-cell-le">
						<view class="coupon-maxMoney">
							<text class="small">￥</text>
							{{ coupon.couponAmount }}
						</view>
						<view class="coupon-minMoney">
							满{{ coupon.touchPrice }}可用
						</view>
					</view>
					<view class="list-cell-ri">
						<view class="list-cell-top">
							<view class="list-cell-type">
								<view class="list-cell-tags">
									<text class="tags">{{ coupon.couponType | TypeFormat }}</text>
								</view>
								<view class="list-cell-texts">
									<text v-if="coupon.couponType == 0">
										{{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : '仅可购买指定商品'  }}
									</text>
									<text v-if="coupon.couponType == 1">
										{{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
									</text>
									<text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
									<text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
								</view>
							</view>
							<view class="list-cell-btn">
								<view class="icon-used">
									<view class="icon-used-btn receive" v-if="coupon.couponBtnType == 0" @click="receiveCoupon(coupon)">领取</view>
									<view class="icon-used-btn make" v-if="coupon.couponBtnType == 1" @click="toUseCoupon(coupon)">去使用</view>
								</view>
							</view>
						</view>
						<view class="list-cell-time">{{ coupon.startDate }} - {{ coupon.endDate }}</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-->
			</template>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations} from 'vuex'
	import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
	export default {
		components:{
			couponTabs
		},
		data() {
			return {
				StaticUrl:this.$Static,
				isIphoneX:this.$store.state.isIphoneX,
				listQuery:{
					userId:0,
					pageNum:1,
					pageSize:10
				},
				coupinList:[],
				isRequest:false,
				showEmpty: false,
				nomoreText: '上拉显示更多',
				hasNextPage:false,
				loadding: false,
				pullUpOn: true,
				pullFlag: true,
				isReceiveLoading:false, //领券操作状态
			}
		},
		onLoad() {
			
		},
		filters: {
			TypeFormat(value) {
				switch (value) {
					case 0:
						return  '活动券'
						break
					case 1:
						return  '品类券'
						break
					case 2:
						return  '用户专享券'
						break
					case 3:
						return  '店铺券'
						break
					case 4:
						return  '新用户券'
						break
				}
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo','identity','isActivity'])
		},
		methods: {
			QueryCouponList() {// 初始化查询优惠券列表
				this.coupinList = []
				this.listQuery.pageNum = 1
				this.ProductService.QueryCouponCollarList(this.listQuery).then(response =>{
					let data = response.data
					if(data.list&&data.list.length > 0){
						this.showEmpty = false
						this.hasNextPage = response.data.hasNextPage
						this.coupinList =data.list
						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.QueryCouponCollarList(this.listQuery)
				.then(response =>{
					let data = response.data
					if(data.list&&data.list.length > 0){
						this.hasNextPage = data.hasNextPage
						this.coupinList = this.coupinList.concat(data.list) 
						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)
				})
			},
			receiveCoupon(coupon){// 点击优惠券领取按钮
				if(this.hasLogin){
					if(this.isReceiveLoading){return}
					this.ProductService.ReceiveCoupon(
						{
							userId:this.listQuery.userId,
							couponId:coupon.couponId,
							source:2
						}) 
					.then(response =>{
						this.isReceiveLoading = true
						this.$util.msg('领取成功',1500,true,'success')
						setTimeout(()=>{
							coupon.couponBtnType = 1
							this.isReceiveLoading = false
						},1500)
					})
					.catch(error =>{
						this.$util.msg(error.msg,2000)
						this.isReceiveLoading = false
					})
				}else{
					this.$api.navigateTo('/pages/login/login')
				}
			},
			toUseCoupon(coupon){// 去使用跳转路径
				console.log('coupon',coupon)
				switch (coupon.couponType) {
					case 0:// 活动券：跳转到商城首页 / 或者活动页（看是否指定了商品）
						if(coupon.productType == 1){// 1 全商城通用 2 指定商品
							this.$api.switchTabTo('/pages/tabBar/home/index')
						}else{
							this.$api.navigateTo('/pages/user/coupon/coupon-product?couponId='+coupon.couponId)
						}
						break
					case 1:// 品类券：跳转到产品 287 / 仪器页 286
						this.$api.navigateTo(`/pages/goods/good-floor?linkId=${ coupon.categoryType == 1 ? 287 : 286 }`)
						break
					case 2:// 用户专享券：跳转到商城首页
						this.$api.switchTabTo('/pages/tabBar/home/index')
						break
					case 3:// 店铺券：跳转到店铺首页
						this.$api.navigateTo('/pages/supplier/user/my-shop?shopId='+coupon.shopId)
						break
					case 4:// 新用户券：跳转到商城首页
						this.$api.switchTabTo('/pages/tabBar/home/index')
						break
				}
			},
			navigator(url){
				this.$api.navigateTo(url)
			},	
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.QueryCouponList()
				uni.stopPullDownRefresh()
			}, 200)
		},
		onReachBottom() {
			if(this.hasNextPage){
				this.loadding = true
				this.pullUpOn = true
				this.getOnReachBottomData()
			}	
		},
		onShow(){
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.listQuery.userId = resolve.userId ? resolve.userId : 0
				this.QueryCouponList()
			})
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.container{
		width: 100%;
		height: auto;
	}
	.container-list {
		box-sizing: border-box;
		padding:24rpx;
		.empty-container-image {
			width: 260rpx;
			height: 260rpx;
			margin-top: -300rpx;
		}
		.toIndexPage {
			bottom: 390rpx;
		}
		.coupon-list{
			width: 100%;
			height: 200rpx;
			margin-bottom: 24rpx;
			box-sizing: border-box;
			background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
			background-size: cover;
			.list-cell-le{
				width: 224rpx;
				height: 100%;
				box-sizing: border-box;
				padding: 37rpx 0;
				float: left;
				.coupon-maxMoney{
					width: 100%;
					height: 78rpx;
					line-height: 78rpx;
					font-size: 56rpx;
					color: #FFFFFF;
					text-align: center;
					.small{
						font-size: $font-size-24;
					}
				}
				.coupon-minMoney{
					width: 100%;
					height: 33rpx;
					line-height: 33rpx;
					font-size: $font-size-24;
					color: #FFFFFF;
					text-align: center;
				}
			}
			.list-cell-ri{
				width: 478rpx;
				height: 100%;
				box-sizing: border-box;
				padding: 20rpx 24rpx 0 24rpx;
				float: right;
				.list-cell-top{
					width: 100%;
					height: 121rpx;
					float: left;
					border-bottom: 1px solid #e1e1e1;
					.list-cell-type{
						width: 286rpx;
						height: 100%;
						float: left;
						.list-cell-tags{
							width: 100%;
							height: 32rpx;
							margin-bottom: 7rpx;
							.tags{
								display: inline-block;
								padding: 0 10rpx;
								height: 32rpx;
								line-height: 32rpx;
								background-color: #ffdcce;
								color: #f94b4b;
								font-size: $font-size-20;
								border-radius: 8rpx;
								text-align: center;
								float: left;
							}
						}
						.list-cell-texts{
							width: 100%;
							height: auto;
							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;
							color: #333333;
						}
					}
					.list-cell-btn{
						width: 128rpx;
						height: 100%;
						float: right;
						.icon-used{
							width: 100%;
							height: 100%;
							box-sizing: border-box;
							padding-top: 57rpx;
							.icon-used-btn{
								width: 128rpx;
								height: 48rpx;
								border-radius: 28rpx;
								line-height: 48rpx;
								font-size: $font-size-26;
								text-align: center;
								&.receive{
									background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);;
									color: #FFFFFF;
								}
								&.make{
									border: solid 1px #f94b4b;
									color: #f94b4b;
								}
							}
						}
					}
				}
				.list-cell-time{
					width: 100%;
					height: 58rpx;
					line-height: 58rpx;
					text-align: left;
					font-size: $font-size-20;
					color: #999999;
				}
			}
		}
	}
</style>