Browse Source

上拉加载更多的加载过程中,显示加载动画

DELL 3 years ago
parent
commit
a95ee42dec

+ 11 - 10
src/packageGoods/goods/list.vue

@@ -58,7 +58,8 @@
 						<view class="content-price">¥{{ $numberFormat(item.value) }}</view>
 					</view>
 				</view>
-				<view class="goods-list-item"></view>
+				<!-- <view class="goods-list-item"></view> -->
+				<u-loadmore line="true" v-if="list.length>5" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到低了'" />
 			</view>
 		</view>
 		<view class="flex empty" v-if="!list.length">
@@ -76,6 +77,7 @@
 	export default {
 		data() {
 			return {
+				status: 'nomore',//上拉刷新状态
 				pageNum: 1,
 				total: 0,
 				list: [],
@@ -162,15 +164,14 @@
 		},
 		
 		onReachBottom() {
-			// 判断是否有数据
-			if (this.total > this.pageNum * 20) {
-				setTimeout(() => {
-					++this.pageNum
-					this.getList()
-				}, 500)
-			} else {
-				uni.$u.toast('已经到底了')
-			}
+			if(this.total < this.pageNum * 20) return ;
+			this.status = 'loading';
+			// setTimeout(() => {
+			++this.pageNum
+			if(this.total < this.pageNum * 20) this.status = 'nomore';
+				else this.status = 'loading';
+			this.getList()
+			// }, 2000)
 		},
 	}
 </script>

+ 10 - 9
src/packageGoods/order/index.vue

@@ -52,6 +52,7 @@
 						<view class="order-list-item-btn-item flex pay"v-if="item.status.value == 0"  @click="payOrder(item)"><text>去支付</text></view>
 					</view>
 				</view>
+				<u-loadmore line="true" v-if="list.length>3" :status="statusNomore" :loading-text="'努力加载中'" :nomore-text="'已经到低了'" />
 			</view>
 			<view class="flex empty" v-if="!list.length && !loading">
 				<view class="center">
@@ -76,6 +77,7 @@
 		},
 		data() {
 			return {
+				statusNomore: 'nomore',//上拉刷新状态
 				loading: false,
 				pageNum: 1,
 				total: 100,
@@ -229,15 +231,14 @@
 		},
 
 		onReachBottom() {
-			// 判断是否有数据
-			if (this.total > this.pageNum * 20) {
-				setTimeout(() => {
-					++this.pageNum
-					this.getList()
-				}, 500)
-			} else {
-				uni.$u.toast('已经到底了')
-			}
+			if(this.total < this.pageNum * 20) return ;
+			this.statusNomore = 'loading';
+			// setTimeout(() => {
+			++this.pageNum
+			if(this.total < this.pageNum * 20) this.statusNomore = 'nomore';
+				else this.statusNomore = 'loading';
+			this.getList()
+			// }, 2000)
 		},
 	}
 </script>

+ 12 - 14
src/packageGoods/ticket/index.vue

@@ -22,7 +22,9 @@
 						<view class="price">¥{{ $numberFormat(item.salePrice) }}</view>
 					</view>
 				</navigator>
-				<view class="ticket-box-list-item"></view>
+				<view style="width: 100%;">
+					<u-loadmore line="true" v-if="list.length>8" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到低了'" />
+				</view>
 			</view>
 			<view class="flex empty" v-if="!list.length">
 				<u-empty text="数据为空" mode="order" />
@@ -37,6 +39,7 @@
 	export default {
 		data() {
 			return {
+				status: 'nomore',//上拉刷新状态
 				pageNum: 1,
 				total: 0,
 				list: [],
@@ -74,15 +77,14 @@
 		},
 
 		onReachBottom() {
-			// 判断是否有数据
-			if (this.total > this.pageNum * 20) {
-				setTimeout(() => {
-					++this.pageNum
-					this.getList()
-				}, 500)
-			} else {
-				uni.$u.toast('已经到底了')
-			}
+			if(this.total < this.pageNum * 20) return ;
+			this.status = 'loading';
+			// setTimeout(() => {
+			++this.pageNum
+			if(this.total < this.pageNum * 20) this.status = 'nomore';
+				else this.status = 'loading';
+			this.getList()
+			// }, 2000)
 		},
 	}
 </script>
@@ -143,10 +145,6 @@
 				}
 			}
 
-			&-item:last-child {
-				border: none;
-				background: none;
-			}
 		}
 
 		.empty {

+ 10 - 9
src/packagePrize/bean/index.vue

@@ -28,6 +28,7 @@
 					</view>
 				</view>
 			</view>
+			<u-loadmore line="true" v-if="list.length>7" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到低了'" />
 			<view class="flex empty" v-if="!list.length">
 				<view class="center">
 					<image class="center-img" src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_6.png" mode="scaleToFill"></image>
@@ -43,6 +44,7 @@
 	export default {
 		data() {
 			return {
+				status: 'nomore',//上拉刷新状态
 				initData: {},
 				pageNum: 1,
 				total: 0,
@@ -101,15 +103,14 @@
 		},
 
 		onReachBottom() {
-			// 判断是否有数据
-			if (this.total > this.pageNum * 50) {
-				setTimeout(() => {
-					++this.pageNum
-					this.getList()
-				}, 500)
-			} else {
-				uni.$u.toast('已经到底了')
-			}
+			if(this.total < this.pageNum * 50) return ;
+			this.status = 'loading';
+			// setTimeout(() => {
+			++this.pageNum
+			if(this.total < this.pageNum * 50) this.status = 'nomore';
+				else this.status = 'loading';
+			this.getList()
+			// }, 2000)
 		},
 	}
 </script>

+ 10 - 9
src/packagePrize/coupon/use.vue

@@ -42,6 +42,7 @@
 					<image class="image-use" src="../static/coupon_use1.png" mode="scaleToFill" v-if="item.status.value == 1"></image>
 					<image class="image-use" src="../static/coupon_use2.png" mode="scaleToFill" v-else></image>
 				</view>
+				<u-loadmore line="true" v-if="list.length>6" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到低了'" />
 			</view>
 		</view>
 		<view class="flex empty" v-if="!list.length">
@@ -60,6 +61,7 @@
 	export default {
 		data() {
 			return {
+				status: 'nomore',//上拉刷新状态
 				stateArr: [{
 					name: '已使用'
 				}, {
@@ -123,15 +125,14 @@
 		},
 
 		onReachBottom() {
-			// 判断是否有数据
-			if (this.total > this.pageNum * 20) {
-				setTimeout(() => {
-					++this.pageNum
-					this.getList()
-				}, 500)
-			} else {
-				uni.$u.toast('已经到底了')
-			}
+			if(this.total < this.pageNum * 20) return ;
+			this.status = 'loading';
+			// setTimeout(() => {
+			++this.pageNum
+			if(this.total < this.pageNum * 20) this.status = 'nomore';
+				else this.status = 'loading';
+			this.getList()
+			// }, 2000)
 		},
 	}
 </script>

+ 15 - 13
src/packagePrize/prize/index.vue

@@ -82,6 +82,7 @@
 						<view class="btnTwo">已兑换</view>
 					</view>
 				</view>
+				<u-loadmore line="true" v-if="list.length>4" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到低了'" />
 			</view>
 			<view class="flex empty" v-if="!list.length && !loading">
 				<view class="center">
@@ -113,6 +114,7 @@
 						<view class="btn-title" v-else>查看详情</view>
 					</view>
 				</view>
+				<u-loadmore line="true" v-if="list.length>4" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到低了'" />
 			</view>
 			<view class="flex empty" v-if="!list.length && !loading">
 				<view class="center">
@@ -121,7 +123,6 @@
 				</view>
 			</view>
 		</view>
-
 		<view class="prize-action">
 			<!-- 实物商品提货 -->
 			<view class="flex prize-action-goods" v-if="state == 0 && statusIndex == 1">
@@ -181,6 +182,7 @@
 		},
 		data() {
 			return {
+				status: 'nomore',//上拉刷新状态
 				loading: false,
 				stateArr: [{
 					name: ' 实物商品',
@@ -280,6 +282,7 @@
 							let picUrlArr = item.picUrl.split(',')
 							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
 						})
+						_this.total = res.total
 						_this.list = _this.list.concat(res.rows)
 					}
 				}).catch(() => {
@@ -494,10 +497,10 @@
 			},
 
 			couponNum() {
-				$http.post(`/api/v1/mp/user/mine/prize/list?pageNum=1&pageSize=10`, {
+				$http.post(`/api/v1/mp/user/mine/prize/list?pageNum=1&pageSize=20`, {
 
 				}).then(res => {
-					$http.post(`/api/v1/mp/user/mine/coupon/list?pageNum=1&pageSize=10`, {
+					$http.post(`/api/v1/mp/user/mine/coupon/list?pageNum=1&pageSize=20`, {
 						status: 1
 					}).then(data => {
 						if (res.code == 0) {
@@ -562,15 +565,14 @@
 		},
 
 		onReachBottom() {
-			// 判断是否有数据
-			if (this.total > this.pageNum * 20) {
-				setTimeout(() => {
-					++this.pageNum
-					this.statusIndex == 3 && this.state == 0 ? this.getListTwo():this.getList()
-				}, 500)
-			} else {
-				uni.$u.toast('已经到底了')
-			}
+			if(this.total < this.pageNum * 20) return ;
+			this.status = 'loading';
+			// setTimeout(() => {
+			++this.pageNum
+			if(this.total < this.pageNum * 20) this.status = 'nomore';
+				else this.status = 'loading';
+			this.statusIndex == 3 && this.state == 0 ? this.getListTwo():this.getList()
+			// }, 2000)
 		},
 	}
 </script>
@@ -828,7 +830,7 @@
 		}
 
 		&-coupon {
-			padding: 30rpx 40rpx;
+			padding: 24rpx 40rpx;
 
 			.title {
 				margin-right: 10rpx;

+ 10 - 9
src/packagePrize/ticket/index.vue

@@ -45,6 +45,7 @@
 					</view>
 				</view>
 			</view>
+			<u-loadmore line="true" v-if="list.length>5" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到低了'" />
 		</view>
 		<view class="flex empty" v-if="!list.length">
 			<view class="center">
@@ -63,6 +64,7 @@
 	export default {
 		data() {
 			return {
+				status: 'nomore',//上拉刷新状态
 				stateArr: [{
 					name: ' 待兑奖',
 				}, {
@@ -164,15 +166,14 @@
 		},
 
 		onReachBottom() {
-			// 判断是否有数据
-			if (this.total > this.pageNum * 20) {
-				setTimeout(() => {
-					++this.pageNum
-					this.getList()
-				}, 500)
-			} else {
-				uni.$u.toast('已经到底了')
-			}
+			if(this.total < this.pageNum * 20) return ;
+			this.status = 'loading';
+			// setTimeout(() => {
+			++this.pageNum
+			if(this.total < this.pageNum * 20) this.status = 'nomore';
+				else this.status = 'loading';
+			this.getList()
+			// }, 2000)
 		},
 	}
 </script>

+ 21 - 13
src/pages/core/index.vue

@@ -138,7 +138,8 @@
 						<view class="content-price">¥{{ $numberFormat(item.value) }}</view>
 					</view>
 				</view>
-				<view class="core-goods-list-item"></view>
+				<!-- <view class="core-goods-list-item"></view> -->
+				<view class=""></view>
 			</view>
 			<view class="flex empty" v-if="!list.length">
 				<view class="center">
@@ -146,6 +147,7 @@
 					<view class="center-font">还没有商品</view>
 				</view>
 			</view>
+			<u-loadmore line="true" v-if="list.length" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到低了'" />
 		</view>
 		
 		<custom-tab-bar :activeValue="'core'" />
@@ -162,6 +164,7 @@
 		},
 		data() {
 			return {
+				status: 'nomore',//上拉刷新状态
 				pageNum: 1,
 				total: 0,
 				list: [],
@@ -488,14 +491,23 @@
 		},
 		onReachBottom() {
 			// 判断是否有数据
-			if (this.total > this.pageNum * 20) {
-				setTimeout(() => {
-					++this.pageNum
-					this.getList()
-				}, 500)
-			} else {
-				uni.$u.toast('已经到底了')
-			}
+			// if (this.total > this.pageNum * 20) {
+			// 	setTimeout(() => {
+			// 		++this.pageNum
+			// 		this.getList()
+			// 	}, 500)
+			// } else {
+			// 	uni.$u.toast('已经到底了')
+			// }
+			
+			if(this.total < this.pageNum * 20) return ;
+			this.status = 'loading';
+			// setTimeout(() => {
+			++this.pageNum
+			if(this.total < this.pageNum * 20) this.status = 'nomore';
+				else this.status = 'loading';
+			this.getList()
+			// }, 2000)
 		},
 		//分享好友
 		onShareAppMessage(res) {
@@ -894,13 +906,9 @@
 						color: #666666;
 					}
 				}
-			}
 			
-			&-item:last-child {
-				box-shadow: none;
 			}
 		}
-		
 		.empty {
 			.center {
 				text-align: center;