From 3564c7c1f46432f1a27c49ad9ed4e71fa65f86af Mon Sep 17 00:00:00 2001
From: Enzo <1284707383@qq.com>
Date: Thu, 16 Sep 2021 16:02:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E6=83=A0=E5=88=B8=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/coupon/index/index.vue | 204 ++++++++++++++++++++++++++++++-----
 1 file changed, 177 insertions(+), 27 deletions(-)

diff --git a/pages/coupon/index/index.vue b/pages/coupon/index/index.vue
index 231f6d4..3872da5 100644
--- a/pages/coupon/index/index.vue
+++ b/pages/coupon/index/index.vue
@@ -4,51 +4,201 @@
 		<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>
-		<view class="coupon-wrap">
-			<view class="coupon-card lf-m-b-30" :class="{'invalid-bg': i == 2}" v-for="i of 3">
-				<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;">
-							<text>￥</text>
-							<text class="lf-font-70 lf-font-bold">200</text>
+		<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}" 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.ends_at}}</view>
+								</view>
+							</view>
 						</view>
-						<view class="coupon-tag">
-							待使用
+						<!-- 空数据的情况 -->
+						<view class="loading-more">
+							<text v-if="tab.list.length"
+								:class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
+							<lf-nocontent v-else></lf-nocontent>
 						</view>
 					</view>
-					<view class="coupon-right">
-						<view class="lf-font-32 lf-font-bold lf-color-white">满1200减200</view>
-						<view class="lf-font-24 lf-color-white">有效期2021.09.09-2021-09.15</view>
-					</view>
-				</view>
-			</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: '全部'},
-					{name: '待使用'},
-					{name: '已使用'},
-					{name: '已过期'}
-				]
+					{
+						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>