红包更新

mallApp/src/pages/hb/list.vue

@@ -1,62 +1,68 @@
 <template>
 	<view class="app-content coupon-list">
 		<AppTabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="33.3333%" />
-		<view class="list-wrap" :class="{'expired' : tabIndex == 2}">
-			<block v-if="!$util.isEmpty(list.data)">
-				<view class="list" v-for="(item, index) in list.data" :key="index">
-					<view class="list-img">
-						<!-- 已过期 -->
-						<template v-if="tabIndex == 2">
-							<img :src="`${constant.imgUrl}/retail/coupon/expired.png`" alt mode="widthFix" />
-						</template>
-						<template v-else>
-							<img :src="`${constant.imgUrl}/retail/coupon/bg.png`" alt />
-						</template>
-					</view>
-					<!-- 列表 -->
-					<view class="list-det">
-						<view class="list-det-left">
-							<view class="price-wrap">
-								<span>￥</span>
-								<span class="price">{{ item.amount?parseFloat(item.amount):0 }}</span>
-							</view>
-							<view v-if="item.minConsume == 0" class="full-reduc app-size-28">无门槛</view>
-							<view v-else class="full-reduc app-size-28">满{{ item.minConsume?parseFloat(item.minConsume):0 }}可用</view>
-						</view>
-						<view class="list-det-right">
-							<view class="coupon-message">
-								<view class="title">{{ item.name }}</view>
-								<view class="shop">所属门店：{{ item.merchantName }}</view>
-								<template v-if="item.status != -1">
-									<view class="date" v-if="item.beginTime * 1000 > Date.now()">生效时间：{{ item.beginTime | formatTime('YYYY-MM-DD') }}</view>
-									<view class="date" v-if="item.endTime == 4102416000">有效期：永久可用</view>
-									<view class="date" v-else>有效期至：{{ item.endTime | formatTime('YYYY-MM-DD') }}</view>
-								</template>
-							</view>
-							<!-- 未使用 -->
-							<template v-if="item.status == 0">
-								<button class="button-com red big">待用</button>
-							</template>
-							<!-- 已使用 -->
-							<template v-else-if="item.status == 1">
-								<view class="icon-wrap">
-									<i class="iconfont iconyishiyong"></i>
-								</view>
-							</template>
+		<scroll-view class="list-scroll" scroll-y lower-threshold="80" :scroll-top="scrollTop" @scrolltolower="reachBottom">
+			<view class="list-wrap" :class="{'expired' : tabIndex == 2}">
+				<block v-if="!$util.isEmpty(list.data)">
+					<view class="list" v-for="(item, index) in list.data" :key="index">
+						<view class="list-img">
 							<!-- 已过期 -->
+							<template v-if="tabIndex == 2">
+								<img :src="`${constant.imgUrl}/retail/coupon/expired.png`" alt mode="widthFix" />
+							</template>
 							<template v-else>
-								<view class="icon-wrap">
-									<i class="iconfont iconyiguoqi"></i>
-								</view>
+								<img :src="`${constant.imgUrl}/retail/coupon/bg.png`" alt />
 							</template>
 						</view>
+						<!-- 列表 -->
+						<view class="list-det">
+							<view class="list-det-left">
+								<view class="price-wrap">
+									<span>￥</span>
+									<span class="price">{{ item.amount?parseFloat(item.amount):0 }}</span>
+								</view>
+								<view v-if="item.minConsume == 0" class="full-reduc app-size-28">无门槛</view>
+								<view v-else class="full-reduc app-size-28">满{{ item.minConsume?parseFloat(item.minConsume):0 }}可用</view>
+							</view>
+							<view class="list-det-right">
+								<view class="coupon-message">
+									<view class="title">{{ item.name }}</view>
+									<view class="shop">所属门店：{{ item.merchantName }}</view>
+									<template v-if="item.status != -1">
+										<view class="date" v-if="item.beginTime * 1000 > Date.now()">生效时间：{{ item.beginTime | formatTime('YYYY-MM-DD') }}</view>
+										<view class="date" v-if="item.endTime == 4102416000">有效期：永久可用</view>
+										<view class="date" v-else>有效期至：{{ item.endTime | formatTime('YYYY-MM-DD') }}</view>
+									</template>
+								</view>
+								<!-- 未使用 -->
+								<template v-if="item.status == 0">
+									<button class="button-com red big">待用</button>
+								</template>
+								<!-- 已使用 -->
+								<template v-else-if="item.status == 1">
+									<view class="icon-wrap">
+										<i class="iconfont iconyishiyong"></i>
+									</view>
+								</template>
+								<!-- 已过期 -->
+								<template v-else>
+									<view class="icon-wrap">
+										<i class="iconfont iconyiguoqi"></i>
+									</view>
+								</template>
+							</view>
+						</view>
+					</view>
+					<view class="load-more">
+						<text v-if="isRequesting">加载中...</text>
+						<text v-else-if="list.finished">没有更多了</text>
 					</view>
-				</view>
-			</block>
-			<block v-else>
-				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
-			</block>
-		</view>
+				</block>
+				<block v-else>
+					<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
+				</block>
+			</view>
+		</scroll-view>
 	</view>
 </template>
 
@@ -76,6 +82,8 @@ export default {
 		return {
 			constant: this.$constant,
 			tabIndex: 0,
+			scrollTop: 0,
+			isRequesting: false,
 			tabs: [
 				{
 					name: '未使用',
@@ -107,34 +115,43 @@ export default {
 		})
 	},
 	onReachBottom() {
-		if (this.list.moreData == 1) {
-			this.getHbList().then(res => {
-				uni.stopPullDownRefresh()
-			})
-		} else {
-			uni.stopPullDownRefresh()
-		}
+		this.reachBottom()
 	},
 	methods: {
 		async init() {
 			this.getHbList()
 		},
 		getHbList() {
+			if (this.isRequesting || this.list.finished) {
+				return Promise.resolve(false)
+			}
+			this.isRequesting = true
+			this.list.loading = true
 			let status = this.tabs[this.tabIndex].status
-			return getList({ status: status }).then(res => {
+			return getList({ status: status, page: this.list.page }).then(res => {
 				if(res.code == 1){
 					this.completes(res)
 				}else{
+					this.list.loading = false
 					this.$msg(res.msg || '获取红包列表失败')
 				}
+			}).finally(() => {
+				this.isRequesting = false
 			})
 		},
+		reachBottom() {
+			if (this.list.finished) {
+				return false
+			}
+			return this.getHbList()
+		},
 		change(e) {
 			if (this.tabIndex == e.index) {
 				return false
 			} else {
-				this.tabIndex = e.index
 				this.resetList()
+				this.tabIndex = e.index
+				this.scrollTop = 0
 				this.getHbList()
 			}
 		}
@@ -145,8 +162,18 @@ export default {
 <style lang="scss" scoped>
 	.coupon-list {
 		position: relative;
+		height: 100vh;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		.list-scroll {
+			flex: 1;
+			height: 100%;
+		}
 		.list-wrap {
-			padding: 100upx 22upx 0;
+			min-height: 100%;
+			box-sizing: border-box;
+			padding: 100upx 22upx 40upx;
 			.list {
 				position: relative;
 				margin-bottom: 20upx;
@@ -233,6 +260,12 @@ export default {
 					}
 				}
 			}
+			.load-more {
+				padding: 10upx 0 30upx;
+				text-align: center;
+				font-size: 24upx;
+				color: #999;
+			}
 			// 过期
 			&.expired {
 				.list-det-right {