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

<template>
	<view class="container clearfix">
		<view class="container-list">
			<template v-if="!showEmpty">
				<view v-for="(coupon,index) in dataList" :key="index" :id="coupon.id" class="coupon-list">
					<view class="list-cell-le">
						<view class="coupon-maxMoney">
							<text class="small">￥</text>
							{{ coupon.maxMoney }}
						</view>
						<view class="coupon-minMoney">
							满{{ coupon.minMoney }}可用
						</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" :class="currentTab == 1 || currentTab == 2 ? 'none' : ''">
									<text v-if="coupon.useType == 1">{{ coupon.useType | TypeFormatText }}</text>
									<text v-if="coupon.useType == 2">{{ coupon.useType | TypeFormatText }}</text>
									<text v-if="coupon.useType == 3">{{ coupon.useType | TypeFormatText }}{{ coupon.couponText }}的商品</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.couponTime }}</view>
					</view>
				</view>
				<view v-if="showLoading && dataList.length > 5">
					<view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
					<view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
				</view>
			</template>
			<view class="empty-container" v-else>
				<image class="empty-container-image" :src="StaticUrl+'/icon/icon-coupon-empty@2x.png'"></image>
				<text class="error-text">暂无可领的优惠券~</text>
			</view>
		</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,
				currentTab: 0,
				navbar: [
					{ name: "未使用",num:3 }, 
					{ name: "已使用",num:4 }, 
					{ name: "已失效",num:5 },
				],
				dataList:[
					{
						maxMoney:5000,
						minMoney:1000,
						couponType:1,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:1,
						couponBtnType:0
					},
					{
						maxMoney:2000,
						minMoney:200,
						couponType:2,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:2,
						couponBtnType:0
					},
					{
						maxMoney:4000,
						minMoney:800,
						couponType:3,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:3,
						couponBtnType:0
					},
					{
						maxMoney:6000,
						minMoney:1000,
						couponType:4,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:1,
						couponBtnType:0
					},
					{
						maxMoney:6000,
						minMoney:1000,
						couponType:4,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:1,
						couponBtnType:0
					},
					{
						maxMoney:6000,
						minMoney:1000,
						couponType:4,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:1,
						couponBtnType:0
					},
					{
						maxMoney:6000,
						minMoney:1000,
						couponType:4,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:1,
						couponBtnType:0
					},
					{
						maxMoney:6000,
						minMoney:1000,
						couponType:5,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:2,
						couponBtnType:0
					}
				],
				windowHeight:'',
				scrollHeight:'',
				showEmpty: false,
				showLoading: false,
				loadingNow: true,
				loadingText: '上拉加载更多',
				hasNextPage:false,
				pullFlag: true,
			}
		},
		onLoad() {
			
		},
		filters: {
			TypeFormat:function(value) {
				switch (value) {
					case 1:
						return  '活动券';
						break;
					case 2:
						return  '品类券';
						break;
					case 3:
						return  '店铺券';
						break;
					case 4:
						return  '专享券';
						break;
					case 5:
						return  '新用户券';
						break;
				}
			},
			TypeFormatText:function(value) {
				switch (value) {
					case 1:
						return  '全商城商品通用';
						break;
					case 2:
						return  '仅限购买仪器类商品';
						break;
					case 3:
						return  '仅可购买店铺';
						break;
				}
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo','identity','isActivity'])
		},
		methods: {
			setScrollHeight() {
				const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
				this.windowHeight = windowHeight - 1;
				this.scrollHeight = windowHeight - 1;
			},
			scrolltolower() {
				if(this.total>this.productList.length && this.pullFlag) {
					this.getListFromServer(true);
				}
			},
			receiveCoupon(coupon){
				if(this.hasLogin){
					coupon.couponBtnType = 1;
				}else{
					this.$api.navigateTo('/pages/login/login')
				}
			},
			getListFromServer(loadMore) {//搜索商品
				this.showLoading = true;
				this.loadingNow = true;
				this.loadingText = '加载中';
				this.showEmpty = false;				
				if(loadMore) {
					this.listQuery.pageNum += 1;
				}
				this.ProductService.GetProductList(this.listQuery).then(response =>{
					this.isShowWrapper = true
					const data = response.data;
					const dataList = data.list;
					if(dataList && dataList.length > 0){
						this.hasNextPage = data.hasNextPage;
						this.showEmpty = false;
						if(loadMore) {
							this.productList = [...this.productList,...dataList];
						} else {
							this.productList = [...dataList];
						}
						// 防上拉暴滑
						this.pullFlag = false;
						setTimeout(()=>{ this.pullFlag = true; },500)
						// 底部提示文案
						if(this.hasNextPage) {
							this.loadingText = '上拉加载更多';
						} else {
							this.showLoading = true;
							this.loadingNow = false;
						}
					} else {
						if(!loadMore) {
							this.showEmpty = true;
						}
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			toUseCoupon(coupon){
				console.log('coupon',coupon)
				switch (coupon.couponType) {
					case 1:// 活动券跳转到商城首页 / 或者活动页（看是否指定了商品）
						this.$api.switchTabTo('/pages/tabBar/home/index')
						break;
					case 2:// 品类券：跳转到产品 / 仪器页
						this.$api.navigateTo('/pages/tabBar/home/index')
						break;
					case 3:// 店铺券：跳转到店铺首页
						this.$api.navigateTo('/pages/tabBar/home/index')
						break;
					case 4:// 专享券：跳转到商城首页
						this.$api.switchTabTo('/pages/tabBar/home/index')
						break;
					case 5:// 新用户券：跳转到商城首页
						this.$api.switchTabTo('/pages/tabBar/home/index')
						break;
				}
			},
			navigator(url){
				this.$api.navigateTo(url)
			},	
		},
		onShow(){
			this.setScrollHeight();
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.userName = resolve.name;
				this.userIdentity = resolve.userIdentity
			}).catch(error =>{
				
			})
		}
	}
</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>