From b2bbaab61c3b60b1202471948d0bc0e232027497 Mon Sep 17 00:00:00 2001
From: aihe <961836564@qq.com>
Date: Thu, 25 Apr 2024 17:43:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8B=E6=8B=89=E5=88=86=E9=A1=B5=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tpx-scroll-view/tpx-scroll-view.vue       |  84 ++++++++--
 pages/address/list.vue                        | 153 +++++++-----------
 2 files changed, 128 insertions(+), 109 deletions(-)

diff --git a/components/tpx-scroll-view/tpx-scroll-view.vue b/components/tpx-scroll-view/tpx-scroll-view.vue
index 558a9fe..dba7d77 100644
--- a/components/tpx-scroll-view/tpx-scroll-view.vue
+++ b/components/tpx-scroll-view/tpx-scroll-view.vue
@@ -1,14 +1,13 @@
 <template>
-	<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" style="height: 100%;"
-	>
+	<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" style="height: 100%;">
 		<slot></slot>
-		
+
 		<!-- 加载更多 -->
 		<u-loadmore icon-size="28" font-size="28" margin-top="30" v-if="showLoadMore || loadedAll"
 			:status="loadedAll ? 'nomore' : 'loading'" />
 
 		<!-- 空数据页 -->
-		<view v-if="dataList.length == 0" style="padding-top: 100rpx;">
+		<view v-if="resObject.list.length == 0" style="padding-top: 100rpx;">
 			<u-empty text="无数据" :icon="getCdnUrl('kong.png')" textSize="28" width="86" height="97">
 			</u-empty>
 		</view>
@@ -17,37 +16,98 @@
 
 <script>
 	export default {
+		watch: {
+			searchParam: {
+				handler(cval, oval) {
+					this.getDataList(true)
+				},
+				deep: true
+			}
+		},
 		props: {
-			dataList: {
+			searchParam: {
 				default () {
-					return []
+					return {}
+				}
+			},
+			getListFun: {
+				default () {
+					return () => {}
+				}
+			},
+			resObject: {
+				default () {
+					return {
+						list: []
+					}
 				}
 			}
 		},
 		data() {
 			return {
-				showLoadMore: false,
-				loadedAll: false,
+				page: { // 分页参数
+					pageNum: 1,
+					pageSize: 20,
+				},
+				showLoadMore: false, // 是否显示加载更多的loading
+				loadedAll: false, // 是否加载了所有数据
 			}
 		},
 		created() {
-
+			this.getDataList(true)
 		},
 		onHide() {
 
 		},
 		unmounted() {},
-		
+
 		methods: {
-			onScrollBottom(){
+			async onScrollBottom() {
 				this.$emit('onScrollBottom')
+				if (this.loadedAll || this.showLoadMore) {
+					return
+				}
+				this.showLoadMore = true
+				this.page.pageNum++
+				await this.getDataList()
+				this.showLoadMore = false
+			},
+			async getDataList(reload) {
+				if (reload) {
+					this.page.pageNum = 1
+					this.showLoading()
+				}
+				const res = await this.getListFun({
+					...this.page,
+					...this.searchParam
+				})
+				let list = res.rows || []
+				if (reload) {
+					this.hideLoading()
+				} else {
+					list = this.resObject.list.concat(list)
+				}
+				this.loadedAll = res.total <= list.length
+				this.updateRes({
+					list,
+					total: res.total
+				})
+			},
+			updateRes(obj) {
+				this.$emit('update:resObject', {
+					...this.resObject,
+					page: this.page,
+					showLoadMore: this.showLoadMore,
+					loadedAll: this.loadedAll,
+					...obj,
+				})
 			}
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-	.sch-cont{
+	.sch-cont {
 		position: relative;
 	}
 </style>
\ No newline at end of file
diff --git a/pages/address/list.vue b/pages/address/list.vue
index c638a37..3433c50 100644
--- a/pages/address/list.vue
+++ b/pages/address/list.vue
@@ -2,70 +2,61 @@
 	<tpx-layout>
 		<template v-slot:header> </template>
 		<template v-slot:body>
-			<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" class="pos-abt-all"
-			>
-				<view class="pgb-header">
-					<view class="com-jianju">
-						<!-- 关键字搜索框 -->
-						<tpx-search placeholder="请输入姓名/电话/地址关键字" v-model:value="searchParam.keyword" @change="handleSearchParamChange()" ></tpx-search>												
-					</view>
-					
-					<view class="com-jianju" style="padding-top: 40rpx;">
-						<u-row justify="between" align="top">
-							<u-col span="12">
-								<tpx-tabs :list="tabList" v-model:value="searchParam.addressType" 
-									@tabchange="(val)=> { handleSearchParamChange() }" v-slot="curTab"
-								>
-									<text slot>
-										(<text>{{curTab.item.val}}</text>)
-									</text>
-								</tpx-tabs>
-							</u-col>
-							
-						</u-row>
-					</view>
-				</view>
-				<view class="pgb-cont">
-					<!-- 列表数据 -->
-					<view v-for="(item) in dataList" class="data-list-item">
-						<view @click="handleItemClick(item)">
-							<u-row>
-								<view class="pr-20">
-									<u-text :text="item.name" size="30" :bold="true"></u-text>
-								</view>
-								<view>
-									<u-text :text="item.phone" size="28" mode="phone" color="#999"></u-text>
-								</view>
-							</u-row>
-							<u-text :text="getAddressDetail(item)" 
-								size="24" margin="20rpx 0 0 0" color="#999" 
-							></u-text>
+			<view class="pos-abt-all">
+				<tpx-scroll-view v-model:resObject="resData" :searchParam="searchParam" :getListFun="getListFun">
+					<view class="pgb-header">
+						<view class="com-jianju">
+							<!-- 关键字搜索框 -->
+							<tpx-search placeholder="请输入姓名/电话/地址关键字" v-model:value="searchParam.keyword"></tpx-search>												
 						</view>
-						<u-line color="#DEDEDE" margin="30rpx 0 0 0"></u-line>
-				
-						<u-row custom-style="margin-top:20rpx;" justify="between">
-							<u-row>
-								<text class="pr-20 clr-sub">默认地址</text>
-								<u-switch v-model="item.blDefaultFlag" @change="handleDefaultSwitch(item)" active-color="#B12D29" size="34"></u-switch>
+						
+						<view class="com-jianju" style="padding-top: 40rpx;">
+							<u-row justify="between" align="top">
+								<u-col span="12">
+									<tpx-tabs :list="tabList" v-model:value="searchParam.addressType" 
+										 v-slot="curTab"
+									>
+										<text slot>
+											(<text>{{curTab.item.val}}</text>)
+										</text>
+									</tpx-tabs>
+								</u-col>
+								
 							</u-row>
-							<u-row>
-								<u-text @click="handleEditItem(item)" text="编辑" prefixIcon="edit-pen" size="26"></u-text>
-								<u-text @click="handleDelItem(item)" text="删除" prefixIcon="trash" size="26" margin="0 0 0 20rpx"></u-text>
+						</view>
+					</view>
+					<view class="pgb-cont">
+						<!-- 列表数据 -->
+						<view v-for="(item) in resData.list" class="data-list-item">
+							<view @click="handleItemClick(item)">
+								<u-row>
+									<view class="pr-20">
+										<u-text :text="item.name" size="30" :bold="true"></u-text>
+									</view>
+									<view>
+										<u-text :text="item.phone" size="28" mode="phone" color="#999"></u-text>
+									</view>
+								</u-row>
+								<u-text :text="getAddressDetail(item)" 
+									size="24" margin="20rpx 0 0 0" color="#999" 
+								></u-text>
+							</view>
+							<u-line color="#DEDEDE" margin="30rpx 0 0 0"></u-line>
+					
+							<u-row custom-style="margin-top:20rpx;" justify="between">
+								<u-row>
+									<text class="pr-20 clr-sub">默认地址</text>
+									<u-switch v-model="item.blDefaultFlag" @change="handleDefaultSwitch(item)" active-color="#B12D29" size="34"></u-switch>
+								</u-row>
+								<u-row>
+									<u-text @click="handleEditItem(item)" text="编辑" prefixIcon="edit-pen" size="26"></u-text>
+									<u-text @click="handleDelItem(item)" text="删除" prefixIcon="trash" size="26" margin="0 0 0 20rpx"></u-text>
+								</u-row>
 							</u-row>
-						</u-row>
+						</view>
 					</view>
-				
-					<!-- 加载更多 -->
-					<u-loadmore icon-size="28" font-size="28" margin-top="30" v-if="showLoadMore || loadedAll"
-						:status="loadedAll ? 'nomore' : 'loading'" />
-				
-					<!-- 空数据页 -->
-					<view v-if="dataList.length == 0" style="padding-top: 100rpx;">
-						<u-empty text="无数据" :icon="getCdnUrl('kong.png')" textSize="28" width="86" height="97">
-						</u-empty>
-					</view>
-				</view>
-			</scroll-view>
+				</tpx-scroll-view>
+			</view>
 		</template>
 		
 		<template v-slot:footer>
@@ -111,8 +102,6 @@
 			return {
 				tabList ,
 				searchParam: {
-					pageNo: 1,
-					pageSize: 10,
 					keyword: '',
 					addressType: tabList[0].val
 				},
@@ -120,8 +109,9 @@
 					tab: tabList[0].val, // 当前tab
 					type: '', // 'choose' 选择操作
 				},
-				dataList: [
-				],
+				resData: {
+					list: []
+				},
 				showLoadMore: false,
 				loadedAll: false
 			}
@@ -143,41 +133,10 @@
 		methods: {
 			getAddressDetail,
 			initData(){
-				uni.stopPullDownRefresh();
-				this.setListData(true)
-			},
-			async setListData(reload) {
-				if(reload) {
-					this.searchParam.pageNo = 1
-					this.showLoading()
-				}
-				const res = await apiService.getCustomerUserAddressList(this.searchParam)
-				const list = res.rows || []
-				if(reload) {
-					this.dataList = list
-					this.hideLoading()
-				} else {
-					this.dataList = this.dataList.concat(list)
-				}
+				
 			},
+			getListFun: apiService.getCustomerUserAddressList,
 			
-			async onScrollBottom() {
-				if (this.loadedAll) {
-					return;
-				}
-				this.showLoadMore = true;
-				this.searchParam.pageNo ++
-				await this.setListData();
-				this.showLoadMore = false;
-			},
-			handleSearchParamChange(key, val) {
-				if(key) {
-					this.searchParam[key] = val
-				}
-				setTimeout(()=> {
-					this.setListData(true)
-				}, 300)
-			},
 			handleItemClick(item){
 				switch(this.queryOption.type) {
 					case 'choose':