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

<template>
	<view class="container clearfix">
		<view class="coupon-tabs">
			<coupon-tabs  :tabs="navbar"
						  :currentTab="currentTab>2?0:currentTab" 
						  @change="change" 
						  :itemWidth="(100/navbar.length)+'%'"
						  selectedColor="#e15616" 
						  sliderBgColor="#e15616">
			</coupon-tabs>
		</view>
		<view class="container-list" :style="{'overflow':'auto',paddingBottom :isIphoneX ? '68rpx' : '0rpx','height':(dataList.length>6? windowHeight + 'px' : 'auto')}">
			<scroll-view :style="{'height':(dataList.length>5? scrollHeight+'px' : 'auto')}" @scrolltolower="scrolltolower" scroll-y v-if="!showEmpty">
				<view v-for="(coupon,index) in dataList" :key="index" :id="coupon.id" class="coupon-list" :class="listClass">
					<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" :class="currentTab == 1 || currentTab == 2 ? 'none' : ''">{{ 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" v-if="currentTab == 0">
									<view class="icon-used-btn" @click="toUseCoupon(coupon)">去使用</view>
								</view>
								<view class="icon-use" v-if="currentTab == 1"></view>
								<view class="icon-invalid" v-if="currentTab == 2"></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>
			</scroll-view>
			<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 class="button-bottom" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx',height:isIphoneX ?'168rpx' : '100rpx'}">
			<view class="button-exchange" @click="navigator('/pages/user/coupon/coupon-exchange')">兑换优惠券</view>
			<view class="button-receive" @click="navigator('/pages/user/coupon/coupon-collection')">领更多好券</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 {
				listClass:'list-used',
				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,
					},
					{
						maxMoney:2000,
						minMoney:200,
						couponType:2,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:2,
					},
					{
						maxMoney:4000,
						minMoney:800,
						couponType:3,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:3,
					},
					{
						maxMoney:6000,
						minMoney:1000,
						couponType:4,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:1,
					},
					{
						maxMoney:6000,
						minMoney:1000,
						couponType:5,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:2
					}
				],
				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);
				}
			},
			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;
				}
			},
			change(e) {
				this.currentTab = e.index
				console.log('currentTab',this.currentTab)
				switch(this.currentTab){
					case 0:
						this.listClass = 'list-used'
						break;
					case 1:
						this.listClass = 'list-none'
						break;
					case 2:
						this.listClass = 'list-none'
						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;
	}
	.coupon-tabs{
		width: 100%;
		height: 80rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.container{
		width: 100%;
		height: auto;
		padding-top: 80rpx;
	}
	.container-list {
		box-sizing: border-box;
		padding:24rpx;
		scroll-view {
			height: 100%;
			overflow: scroll;
		}	
		.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;
			&.list-used{
				background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
				background-size: cover;
			}
			&.list-none{
				background: url(https://static.caimei365.com/app/img/icon/icon-coupon-none@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;
								&.none{
									background-color: #dbdbdb;
									color: #FFFFFF;
								}
							}
						}
						.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;
							&.none{
								color: #999999;
							}
						}
					}
					.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;
								border: solid 1px #f94b4b;
								line-height: 48rpx;
								font-size: $font-size-26;
								color: #f94b4b;
								text-align: center;
							}
						}
						.icon-use{
							width: 92rpx;
							height: 92rpx;
							box-sizing: border-box;
							background: url(https://static.caimei365.com/app/img/icon/icon-coupon-use@2x.png);
							background-size: cover;
							float: right;
						}
						.icon-invalid{
							width: 92rpx;
							height: 92rpx;
							box-sizing: border-box;
							background: url(https://static.caimei365.com/app/img/icon/icon-coupon-invalid@2x.png);
							background-size: cover;
							float: right;
						}
					}
				}
				.list-cell-time{
					width: 100%;
					height: 58rpx;
					line-height: 58rpx;
					text-align: left;
					font-size: $font-size-20;
					color: #999999;
				}
			}
		}
	}
	.button-bottom{
		width: 100%;
		position: fixed;
		background-color: #FFFFFF;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		padding: 8rpx 24rpx;
		.button-exchange{
			width: 280rpx;
			height: 100%;
			background-color: #ffe6dc;
			border-radius: 50rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: $font-size-30;
			color: #e15616;
			float: left;
		}
		.button-receive{
			width: 408rpx;
			height: 100%;
			background: $btn-confirm;
			border-radius: 50rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: $font-size-30;
			color: #FFFFFF;
			float: right;
		}
	}
</style>