add 余额明细刷新下拉分页请求

chenbiao
1 parent 10ba946f
Showing 2 changed files with 116 additions and 36 deletions
pages.json
pages/rechargeDetail/rechargeDetail.vue
@@ -127,8 +127,10 @@
 		{
 			"path": "pages/rechargeDetail/rechargeDetail",
 			"style": {
-				"navigationBarTitleText": "充值明细"
+				"navigationBarTitleText": "充值明细",
+				"enablePullDownRefresh": true
 			}
+		
 		},
 		{
 			"path": "pages/rechargeDetail/outDetail",
@@ -7,8 +7,7 @@
 					消费类型
 				</view>
 				<view class="uni-list-cell-db">
-					<picker @change="bindPickerChange" :value="index"
-						:range="kindArray" :range-key="'kindName'">
+					<picker @change="bindPickerChange" :value="index" :range="kindArray" :range-key="'kindName'">
 						<view class="uni-input">{{kindArray[index].kindName}}</view>
 					</picker>
 				</view>
@@ -21,8 +20,7 @@
 					充值方式
 				</view>
 				<view class="uni-list-cell-db">
-					<picker @change="bindPickerChangeWay" :value="indexWay" 
-						:range="arrayWay" :range-key="'typeName'">
+					<picker @change="bindPickerChangeWay" :value="indexWay" :range="arrayWay" :range-key="'typeName'">
 						<view class="uni-input">{{arrayWay[indexWay].typeName}}</view>
 					</picker>
 				</view>
@@ -58,9 +56,7 @@
 		<view class="border-bg"></view>
-
-		<uni-load-more class="load" :content-text="contentText" :status="status" :icon-size="24" :iconType="iconType"
-			v-if="rows.length == 0">
+		<view class="" v-if="orderList.length > 0">
 			<uni-list class="rechargeWrap">
 				<view class="recordCon uni-list-cell-pd">
@@ -124,8 +120,13 @@
 					>
 				</view>
 			</uni-list>
+		</view>
+		<!-- 底部文案 -->
+		<view class="">
+			<text>{{status === 'more' ? contentText.contentdown : (status === 'loading' ? contentText.contentrefresh : contentText.contentnomore)}}</text>
+		</view>
+
-		</uni-load-more>
 	</view>
@@ -138,7 +139,8 @@
 				format: true
 			})
 			return {
-				detailText:'',
+
+				detailText: '',
 				title: 'picker',
 				kindArray: [],
 				arrayWay: [],
@@ -146,17 +148,16 @@
 				indexWay: 0,
 				beginDate: currentDate,
 				overDate: currentDate,
-				rows: [],
-				pageNum: 1, //当前页
-				pageSize: 1, //每页条数
-				reload: false,
-				status: 'more',
+				orderList: [],
+				page: 1,
+				pageSize: 10,
+				status: 'more', // 默认展示上拉显示更多
 				contentText: {
-					contentdown: '上拉加载更多～',
-					contentrefresh: '正在加载更多～',
-					contentmore: '我是有底线的～'
-				},
-				iconType: 'auto', // 图标样式
+					contentdown: "上拉显示更多",
+					contentrefresh: "正在加载...",
+					contentnomore: "没有更多数据了"
+				}
+
 			}
 		},
 		onLoad(params) {
@@ -164,12 +165,56 @@
 				withShareTicket: true
 			});
 			this.getKindType();
+			// 页码归为第1页
+			this.page = 1
+			// 初始化获取列表数据
+			this.fetchData()
 		},
 		onShow() {
-		this.getDetailSummary();
+			this.getDetailSummary();
+			this.page = 1
+			this.pageSize = 10
+			this.orderList = []
+			this.fetchData()
+		},
+		// 下拉刷新触发
+		onPullDownRefresh(val) {
+			this.page = 1
+			this.pageSize = 10
+			console.log('下拉刷新', val)
+			this.fetchData().then(() => {
+				uni.stopPullDownRefresh();
+			}).catch(err => {
+				uni.stopPullDownRefresh();
+				// 弹窗提示
+				uni.showToast({
+					title: '请求出错了',
+					icon: 'none'
+				})
+			})
+		},
+		// 上拉加载触发
+		onReachBottom() {
+			// 改变状态为加载中
+			this.status = 'loading'
+				// 页码发生变化
+				++this.page
+			// 加载更多
+			this.fetchData('loadMore').then(resArray => {
+				// 此时判断当前有没有请求到数据
+				if (resArray.length) {
+					this.status = 'more'
+				} else {
+					this.status = 'noMore';
+					--this.page;
+				}
+			}).catch(err => {
+				console.log('网络请求失败')
+			})
 		},
+
 		computed: {
 			startDate() {
 				return this.getDate('start');
@@ -198,17 +243,20 @@
 				let that = this;
 				that.index = e.detail.value
 				that.arrayWay = that.kindArray[that.index].typeList;
-
+				that.fetchData()
 			},
 			bindPickerChangeWay: function(e) {
 				console.log('picker发送选择改变，携带值为', e.detail.value)
 				this.indexWay = e.detail.value
+				that.fetchData()
 			},
 			bindStartDateChange: function(e) {
 				this.beginDate = e.detail.value
+				that.fetchData()
 			},
 			bindEndDateChange: function(e) {
 				this.overDate = e.detail.value
+				that.fetchData()
 			},
 			getDate(type) {
 				const date = new Date();
@@ -224,13 +272,13 @@
 				day = day > 9 ? day : '0' + day;
 				return `${year}-${month}-${day}`;
 			},
-			getDetailSummary(){
-				let that=this;
-				let data ={
+			getDetailSummary() {
+				let that = this;
+				let data = {
 					kind: '1',
 					type: '1',
-					beginDate:new Date(that.beginDate + " 00:00:00") ,
-					endDate:new Date(that.overDate + " 23:59:59")
+					beginDate: new Date(that.beginDate + " 00:00:00"),
+					endDate: new Date(that.overDate + " 23:59:59")
 				};
 				console.log(data)
 				that.$myRequest({
@@ -238,21 +286,51 @@
 					method: 'POST',
 					data: that.$common.requestSign(data)
 				}).then(res => {
-				
+
 					let data = res.data;
-					if(data.rechargeSummary){
+					if (data.rechargeSummary) {
 						that.detailText = data.rechargeSummary
 					}
-					if(data.paySummary){
+					if (data.paySummary) {
 						that.detailText = data.paySummary
 					}
-				
+
 				})
-				
-			}
-			
-			
-			
+
+			},
+
+			fetchData(way) {
+				let that = this
+				let paramsData = {
+					pageNum: that.page,
+					pageSize: that.pageSize,
+					kind: '1',
+					type: '1',
+					beginDate: new Date(that.beginDate + " 00:00:00"),
+					endDate: new Date(that.overDate + " 23:59:59")
+				}
+				// 首页信息获取 接口
+				that.$myRequest({
+					url: that.$common.walletDetailsPage,
+					method: 'POST',
+					data: that.$common.requestSign(paramsData)
+				}).then(res => {
+
+					// 当页的数据
+					const resDataArray = res.data
+					if (way === 'loadMore') {
+						that.orderList = that.orderList.concat(resDataArray)
+					} else {
+						that.orderList = resDataArray
+					}
+
+				})
+
+
+
+
+			},
+
 		}
 	}
 </script>