ec.uniapp-master/pages/coupon/index/index.vue

<template>
	<view>
		<lf-nav :spreadOut="true" :showIcon="true" bgColor="white" title="优惠券"></lf-nav>
		<view class="special_tab">
			<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
		</view>
		<swiper :style="{height: autoHeight}" :current="current" @change="swiperChange">
			<swiper-item v-for="(tab, tabIndex) in tab_list" :key="tabIndex">
				<scroll-view :style="{height: autoHeight}" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher"
					@scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
					<view class="coupon-wrap">
						<view class="coupon-card lf-m-b-30" :class="{'invalid-bg': item.ifpast == true,'lf-bg-haveuse': item.used_at != ''}" v-for="(item, index) in tab.list" :key="index">
							<view class="coupon-circle-top">
								<view class="coupon-circle1"></view>
							</view>
							<view class="coupon-circle-bottom">
								<view class="coupon-circle1"></view>
							</view>
							<view class="coupon-radius">
								<view class="coupon-left">
									<view class="lf-font-36 lf-color-white" style="line-height: 1;" v-if="item.discount.action_type.type == 'cash'">
										<text>￥</text>
										<text class="lf-font-70 lf-font-bold">{{item.discount.action_type.value}}</text>
									</view>
									<view class="lf-font-36 lf-color-white" style="line-height: 1;" v-if="item.discount.action_type.type == 'discount'">
										<text class="lf-font-70 lf-font-bold">{{item.discount.action_type.value}}</text>
										<text>%</text>
									</view>
									<view class="coupon-tag" v-if="item.used_at != ''">
										已使用
									</view>
									<view class="coupon-tag" v-if="item.ifpast">
										已过期
									</view>
									<view class="coupon-tag" v-if="!item.ifpast && item.used_at == ''">
										待使用
									</view>
								</view>
								<view class="coupon-right">
									<view class="lf-font-32 lf-font-bold lf-color-white">{{item.discount.title}}</view>
									<view class="lf-font-24 lf-color-white">有效期{{item.discount.starts_at}}~{{item.discount.ends_at}}</view>
								</view>
							</view>
						</view>
						<!-- 空数据的情况 -->
						<view class="loading-more">
							<text v-if="tab.list.length"
								:class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
							<lf-nocontent src="/static/images/empty.png" v-else></lf-nocontent>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			let _public = {
				page: 1,
				isPage: true,
				loadingClass: true,
				loadingText: '正在加载中'
			}
			return {
				current: 0,
				tab_list: [
					{
						name: '全部',
						list: [],
						type: 'all',
						..._public
					},
					{
						name: '待使用',
						list: [],
						type: 'valid',
						..._public
					},
					{
						name: '已使用',
						list: [],
						type: 'used',
						..._public
					},
					{
						name: '已失效',
						list: [],
						type: 'invalid',
						..._public
					}
				],
				scrollH: 0,
				nav_height: 0,
				isRefresher: true
			}
		},
		computed: {
			autoHeight(){
				return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx)`;
			}
		},
		methods: {
			compareDate(val) {
				var nowTime = new Date(new Date().toLocaleDateString()).getTime();
				let oldTime = new Date(new Date(val).toLocaleDateString()).getTime();
				if(nowTime>oldTime) {
					return true;
				}else {
					return false;
				}
			},
			// 页面触底，加载下一页
			onScrolltolower(){
				let tab_item = this.tab_list[this.current];
				if(tab_item.isPage){
					tab_item.page = tab_item.page + 1;
					this.getCouponList();
				}
			},
			// 下拉刷新处理
			refreshFn(options){
				let tab_item = this.tab_list[this.current];
				tab_item.page = 1;
				tab_item.isPage = true;
				tab_item.loadingClass = true;
				tab_item.list = []
				tab_item.loadingText = '正在加载中';
				this.getCouponList(options);
			},
			// scroll-view 下拉刷新
			onRefresherrefresh(){
				this.isRefresher = true;
				this.refreshFn({type: 'scrollRefresh'});
			},
			swiperChange(event){
				this.current = event.detail.current;
				if (event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
				this.getCouponList();
			},
			getCouponList(options = {}) {
				let tab_item = this.tab_list[this.current];
				this.$http
				    .get({
				        api: 'api/coupon',
						data: {
							type: tab_item.type,
							page: tab_item.page
						},
						header: {
						   Authorization: this.$cookieStorage.get('user_token')
						},
				    })
				    .then(res => {
				        if (res.statusCode == 200) {
				            let isPage = res.data.total_pages == 1?true:false;
				            tab_item.isPage = isPage;
				            if(!isPage) {
				            	tab_item.loadingClass = false;
				            	tab_item.loadingText = '没有更多数据啦~';
				            }
				            if(options.type == 'pageRefresh') {
				            	uni.stopPullDownRefresh();
				            }else if(options.type == 'scrollRefresh') {
				            	this.isRefresher = false;
				            }
				            if(tab_item.page == 1) {
				            	tab_item.list = res.data.data;
				            }else {
				            	tab_item.list.push(...res.data.data);
				            }
							tab_item.list.forEach((item,index) => {
								if(this.compareDate(item.discount.ends_at)) {
									this.$set(item,'ifpast',true);
								}else {
									this.$set(item,'ifpast',false);
								}
							})
				        } else {
				            wx.showModal({
				                content: '请下拉页面刷新重试',
				                showCancel: false
				            });
				        }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        wx.hideLoading();
				    });
			},
			tabChange(index){
				this.current = index;
				this.getCouponList();
			},
		},
		onLoad() {
			let info = uni.getSystemInfoSync();
			this.scrollH = info.screenHeight;
			this.getCouponList();
		}
	}
</script>

<style scoped lang="scss">
	.lf-bg-haveuse {
		background-color: rgba(255, 255, 255, 1)!important;
	}
	.coupon-circle1 {
		width: 40rpx;
		height: 40rpx;
		background-color: white;
		border-radius: 50%;
	}
	.coupon-circle-top {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		// background-color: red;
		position: absolute;
		border: 1px dashed #ccc;
		left: 190rpx;
		top: -20rpx;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}
	.coupon-circle-bottom {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		// background-color: red;
		position: absolute;
		border: 1px dashed #ccc;
		left: 190rpx;
		bottom: -20rpx;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}
	.coupon-right {
		text-align: left;
		justify-content: center;
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		margin-left: 84rpx;
	}
	.coupon-left {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.coupon-tag {
		width: max-content;
		margin-top: 10rpx;
		padding: 0 24rpx;
		height: 43rpx;
		border-radius: 22rpx;
		border: 2rpx solid #FFFFFF;
		font-size: 24rpx;
		color: white;
	}
	.coupon-wrap {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
		flex-direction: column;
		align-content: center;
		align-items: center;
	}
	.coupon-card {
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 674rpx;
		// display: flex;
		height: 171rpx;
		// opacity: 0.59;
		// border: 1rpx solid #FFFFFF;
		background: #15716E;
		border-radius: 20rpx;
	}
	.invalid-bg{
		background-color: #999999;
	}
	.coupon-radius {
		width: 664rpx;
		display: flex;
		height: 161rpx;
		border: 1rpx dashed #ccc;
		// background: #15716E;
		border-radius: 20rpx;
	}
	/deep/.u-scroll-box {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
		background-color: #15716E!important;
		width: 80rpx!important;
		position: absolute;
		height: 10rpx;
		left: 0;
		border-radius: 8rpx 8rpx 0px 0px!important;
		bottom: -12rpx;
	}
	/deep/ .u-tab-item {
		font-size: 28rpx!important;
	}
</style>