From a53e2cab6f75ee550be13cf73c0df780136d62f8 Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Mon, 3 Nov 2025 13:48:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(transDetail):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BA=A4=E6=98=93=E6=98=8E=E7=BB=86=E6=B2=A1=E6=9C=89=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/mine/balance/transDetail.vue | 648 +++++++++++++++++------------
 1 file changed, 372 insertions(+), 276 deletions(-)

diff --git a/pages/mine/balance/transDetail.vue b/pages/mine/balance/transDetail.vue
index cbd9c18..dbcfb98 100644
--- a/pages/mine/balance/transDetail.vue
+++ b/pages/mine/balance/transDetail.vue
@@ -1,301 +1,397 @@
 <template>
-	<view class="content">
-		<view class="contentList" v-for="item,index in tableList" :key="index">
-			<view class="linebox">
-				<view class="line_title">{{'交易状态'}}</view>
-				<view class="line_content thesuccess">{{'完成'}}</view>
-			</view>
-			<view class="linebox">
-				<view class="line_title">{{'单据编号'}}</view>
-				<view class="line_content">{{item.tradeCode}}</view>
-			</view>
-			<view class="linebox">
-				<view class="line_title">{{'账户类型'}}</view>
-				<view class="line_content">{{item.pkAccountVal}}</view>
-			</view>
-			<view class="linebox">
-				<view class="line_title">{{'交易类型'}}</view>
-				<view class="line_content">{{item.tradeTypeVal}}</view>
-			</view>
-			<view class="linebox">
-				<view class="line_title">{{'交易额度'}}</view>
-				<view class="line_content">{{item.tradeAmount}}</view>
-			</view>
-			<view class="linebox">
-				<view class="line_title">{{'交易余额'}}</view>
-				<view class="line_content">{{item.tradeBalance |numberToCurrency}}</view>
-			</view>
-			<view class="linebox">
-				<view class="line_title">{{'交易时间'}}</view>
-				<view class="line_content">{{item.creationTime}}</view>
-			</view>
-			<view class="linebox">
-				<view class="line_title">{{'备注'}}</view>
-				<view class="line_content">{{item.remarks}}</view>
-			</view>
-		</view>
-		<u-popup :show="sxShow" mode="right" @close="sxShow = false" :closeOnClickOverlay="false">
-			<view class="rightPopup">
-				<view class="popup_top">
-					<view @click="getSearch">{{'筛选'}}</view>
-					<view class="top_red" @click="sxShow = false">{{'返回'}}</view>
-				</view>
-				<view class="typesBox">
-					<view class="typeTitle">
-						{{'交易类型'}}
-					</view>
-					<view class="choiceBox">
-						<view class="flex_btn" @click="clickTransType(item)" v-for="(item,index) in tradeTypeList"
-							:key="index" :class="queryParams.tradeType==item.value?'selectbtn':''">
-							{{item.label}}
-						</view>
-
-					</view>
-				</view>
-				<view class="typesBox">
-					<view class="typeTitle">
-						{{'账户类型'}}
-					</view>
-					<view class="choiceBox">
-						<view class="flex_btn" 
-							@click="clickAccountType(item)" 
-							v-for="(item,index) in pkAccountList"
-							:key="index" 
-							:class="queryParams.pkAccount==item.pkId?'selectbtn':''">
-							{{item.accountName}}
-						</view>
-
-					</view>
-				</view>
-				<view class="typesBox">
-					<view class="typeTitle">
-						{{'交易时间'}}
-					</view>
-					<view class="choiceBox">
-						<view class="flex_btn" @click="openDate(0)">
-							{{queryParams.startDate?queryParams.startDate:'开始时间'}}
-						</view>
-						<view style="color: #666;">
-							——
-						</view>
-						<view class="flex_btn" @click="openDate(1)">
-							{{queryParams.endDate?queryParams.endDate:'结束时间'}}
-						</view>
-					</view>
-				</view>
-				<u-datetime-picker :closeOnClickOverlay="true" @close="dataShow = false" @cancel="dataShow = false"
-					@confirm="getDate" :show="dataShow" v-model="value1" mode="date"></u-datetime-picker>
-				<view class="popup_bottom">
-					<view class="bottom_btn thebtn1" @click="clearAll">清空筛选条件</view>
-					<view class="bottom_btn thebtn2" @click="()=>{getSearch(),sxShow = false}">
-						确定
-					</view>
-				</view>	
-			</view>
-			
-		</u-popup>
-	</view>
+  <view class="content">
+    <view class="contentList" v-for="(item, index) in tableList" :key="index">
+      <view class="linebox">
+        <view class="line_title">{{ '交易状态' }}</view>
+        <view class="line_content thesuccess">{{ '完成' }}</view>
+      </view>
+      <view class="linebox">
+        <view class="line_title">{{ '单据编号' }}</view>
+        <view class="line_content">{{ item.tradeCode }}</view>
+      </view>
+      <view class="linebox">
+        <view class="line_title">{{ '账户类型' }}</view>
+        <view class="line_content">{{ item.pkAccountVal }}</view>
+      </view>
+      <view class="linebox">
+        <view class="line_title">{{ '交易类型' }}</view>
+        <view class="line_content">{{ item.tradeTypeVal }}</view>
+      </view>
+      <view class="linebox">
+        <view class="line_title">{{ '交易额度' }}</view>
+        <view class="line_content">{{ item.tradeAmount }}</view>
+      </view>
+      <view class="linebox">
+        <view class="line_title">{{ '交易余额' }}</view>
+        <view class="line_content">{{
+          item.tradeBalance | numberToCurrency
+        }}</view>
+      </view>
+      <view class="linebox">
+        <view class="line_title">{{ '交易时间' }}</view>
+        <view class="line_content">{{ item.creationTime }}</view>
+      </view>
+      <view class="linebox">
+        <view class="line_title">{{ '备注' }}</view>
+        <view class="line_content">{{ item.remarks }}</view>
+      </view>
+    </view>
+    <u-popup
+      :show="sxShow"
+      mode="right"
+      @close="sxShow = false"
+      :closeOnClickOverlay="false"
+    >
+      <view class="rightPopup">
+        <view class="popup_top">
+          <view @click="getSearch">{{ '筛选' }}</view>
+          <view class="top_red" @click="sxShow = false">{{ '返回' }}</view>
+        </view>
+        <view class="typesBox">
+          <view class="typeTitle">
+            {{ '交易类型' }}
+          </view>
+          <view class="choiceBox">
+            <view
+              class="flex_btn"
+              @click="clickTransType(item)"
+              v-for="(item, index) in tradeTypeList"
+              :key="index"
+              :class="queryParams.tradeType == item.value ? 'selectbtn' : ''"
+            >
+              {{ item.label }}
+            </view>
+          </view>
+        </view>
+        <view class="typesBox">
+          <view class="typeTitle">
+            {{ '账户类型' }}
+          </view>
+          <view class="choiceBox">
+            <view
+              class="flex_btn"
+              @click="clickAccountType(item)"
+              v-for="(item, index) in pkAccountList"
+              :key="index"
+              :class="queryParams.pkAccount == item.pkId ? 'selectbtn' : ''"
+            >
+              {{ item.accountName }}
+            </view>
+          </view>
+        </view>
+        <view class="typesBox">
+          <view class="typeTitle">
+            {{ '交易时间' }}
+          </view>
+          <view class="choiceBox">
+            <view class="flex_btn" @click="openDate(0)">
+              {{ queryParams.startDate ? queryParams.startDate : '开始时间' }}
+            </view>
+            <view style="color: #666"> —— </view>
+            <view class="flex_btn" @click="openDate(1)">
+              {{ queryParams.endDate ? queryParams.endDate : '结束时间' }}
+            </view>
+          </view>
+        </view>
+        <u-datetime-picker
+          :closeOnClickOverlay="true"
+          @close="dataShow = false"
+          @cancel="dataShow = false"
+          @confirm="getDate"
+          :show="dataShow"
+          v-model="value1"
+          mode="date"
+        ></u-datetime-picker>
+        <view class="popup_bottom">
+          <view class="bottom_btn thebtn1" @click="clearAll">清空筛选条件</view>
+          <view
+            class="bottom_btn thebtn2"
+            @click="
+              () => {
+                ;(getSearch(), (sxShow = false))
+              }
+            "
+          >
+            确定
+          </view>
+        </view>
+      </view>
+    </u-popup>
+    <!-- 加载提示 -->
+    <view
+      v-if="tableList.length > 0"
+      style="
+        padding: 30rpx 0;
+        text-align: center;
+        color: #999;
+        font-size: 24rpx;
+      "
+    >
+      <view v-if="loading">加载中...</view>
+      <view v-else-if="!hasMore">没有更多数据了</view>
+    </view>
+    <!-- 空状态 -->
+    <view
+      v-if="tableList.length === 0 && !loading"
+      style="padding: 100rpx 0; text-align: center; color: #999"
+    >
+      暂无交易记录
+    </view>
+  </view>
 </template>
 
 <script>
-	import * as bal from "@/config/balance.js"
-	import {
-		formatMsToDate
-	} from '@/util/index'
-	export default {
-		data() {
-			return {
-				sxShow: false,
-				queryParams: {
-					pageNum: 1,
-					pageSize: 50,
-					tradeType: "", //交易类型
-					pkAccount: "", //账户类型
-					startDate: "",
-					endDate: ""
-				},
-				tradeTypeList: [], //交易类型
-				pkAccountList: [], //账户类型
-				tableList: [],
-				timeIndex: 0,
-				dataShow: false,
-				value1: ""
-			}
-		},
-		onLoad() {
-			this.getOthers()
-			this.getSearch()
-		},
-		onNavigationBarButtonTap() {
-			this.sxShow = true
-		},
-		methods: {
-			getDate(e) {
-				if (this.timeIndex == 1) {
-					this.queryParams.endDate = formatMsToDate(e.value)
-				} else {
-					this.queryParams.startDate = formatMsToDate(e.value)
-				}
-				this.dataShow = false
-			},
-			openDate(index) {
-				this.timeIndex = index
-				this.dataShow = true
-			},
+import * as bal from '@/config/balance.js'
+import { formatMsToDate } from '@/util/index'
+export default {
+  data() {
+    return {
+      sxShow: false,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 50,
+        tradeType: '', //交易类型
+        pkAccount: '', //账户类型
+        startDate: '',
+        endDate: '',
+      },
+      tradeTypeList: [], //交易类型
+      pkAccountList: [], //账户类型
+      tableList: [],
+      timeIndex: 0,
+      dataShow: false,
+      value1: '',
+      loading: false, // 加载状态
+      hasMore: true, // 是否还有更多数据
+      total: 0, // 总记录数
+    }
+  },
+  onLoad() {
+    this.getOthers()
+    this.getSearch()
+  },
+  onNavigationBarButtonTap() {
+    this.sxShow = true
+  },
+  // 触底加载
+  onReachBottom() {
+    this.loadMore()
+  },
+  methods: {
+    getDate(e) {
+      if (this.timeIndex == 1) {
+        this.queryParams.endDate = formatMsToDate(e.value)
+      } else {
+        this.queryParams.startDate = formatMsToDate(e.value)
+      }
+      this.dataShow = false
+    },
+    openDate(index) {
+      this.timeIndex = index
+      this.dataShow = true
+    },
 
-			clickTransType(item) {
-				this.queryParams.tradeType = item.value
-			},
-			clickAccountType(item) {
-				// this.queryParams.pkAccount = item.pkId
-				console.log(item, '....item')
-				this.$set(this.queryParams, 'pkAccount', item.pkId)
-			},
-			getOthers() {
-				bal.getTradeTypeList().then((res) => {
-					this.tradeTypeList = res.data;
-				});
-				bal.getEnumsAccountList().then((res) => {
-					this.pkAccountList = res.data;
-				});
-			},
-			getSearch() {
-				bal.getTransactionDetails(this.queryParams).then(res => {
-					this.tableList = res.rows
-				})
-			},
-			clearAll() {
-				this.sxShow = false
-				Object.assign(this.queryParams, {
-					pageNum: 1,
-					pageSize: 50,
-					tradeType: "", //交易类型
-					pkAccount: "", //账户类型
-					startDate: "",
-				})
-				this.getSearch()
-			},
-		}
-	}
+    clickTransType(item) {
+      this.queryParams.tradeType = item.value
+    },
+    clickAccountType(item) {
+      // this.queryParams.pkAccount = item.pkId
+      console.log(item, '....item')
+      this.$set(this.queryParams, 'pkAccount', item.pkId)
+    },
+    getOthers() {
+      bal.getTradeTypeList().then(res => {
+        this.tradeTypeList = res.data
+      })
+      bal.getEnumsAccountList().then(res => {
+        this.pkAccountList = res.data
+      })
+    },
+    // isReset: 是否重置列表（首次加载或筛选时为true，加载更多时为false）
+    getSearch(isReset = true) {
+      if (this.loading) return
+
+      this.loading = true
+
+      // 如果是重置，清空列表并重置页码
+      if (isReset) {
+        this.queryParams.pageNum = 1
+        this.tableList = []
+        this.hasMore = true
+      }
+
+      bal
+        .getTransactionDetails(this.queryParams)
+        .then(res => {
+          if (isReset) {
+            // 首次加载或筛选，直接赋值
+            this.tableList = res.rows || []
+          } else {
+            // 加载更多，追加数据
+            this.tableList = [...this.tableList, ...(res.rows || [])]
+          }
+
+          // 更新总数
+          this.total = res.total || 0
+
+          // 判断是否还有更多数据
+          this.hasMore = this.tableList.length < this.total
+        })
+        .catch(err => {
+          console.error('获取交易详情失败：', err)
+          uni.showToast({
+            title: '加载失败',
+            icon: 'none',
+          })
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    // 加载更多
+    loadMore() {
+      // 如果正在加载或没有更多数据，直接返回
+      if (this.loading || !this.hasMore) {
+        return
+      }
+
+      // 页码+1
+      this.queryParams.pageNum++
+
+      // 加载数据，不重置列表
+      this.getSearch(false)
+    },
+    clearAll() {
+      this.sxShow = false
+      Object.assign(this.queryParams, {
+        pageNum: 1,
+        pageSize: 50,
+        tradeType: '', //交易类型
+        pkAccount: '', //账户类型
+        startDate: '',
+      })
+      this.getSearch()
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-	::v-deep .u-popup__content {
-		overflow: auto;
-	}
+::v-deep .u-popup__content {
+  overflow: auto;
+}
 
-	.content {
-		background: #F2F2F2;
+.content {
+  background: #f2f2f2;
 
-		.contentList {
-			background-color: #fff;
-			margin-top: 8rpx;
-			padding: 10rpx 23rpx;
+  .contentList {
+    background-color: #fff;
+    margin-top: 8rpx;
+    padding: 10rpx 23rpx;
 
-			.linebox {
-				display: flex;
-				align-items: center;
-				font-size: 26rpx;
-				margin: 14rpx 0;
+    .linebox {
+      display: flex;
+      align-items: center;
+      font-size: 26rpx;
+      margin: 14rpx 0;
 
-				.line_title {
-					min-width: 150rpx;
-					color: #999999;
-				}
+      .line_title {
+        min-width: 150rpx;
+        color: #999999;
+      }
 
-				.line_content {
-					color: #333;
-				}
+      .line_content {
+        color: #333;
+      }
 
-				.thesuccess {
-					color: #45C242;
-				}
-			}
-		}
+      .thesuccess {
+        color: #45c242;
+      }
+    }
+  }
 
-		.rightPopup {
-			width: 645rpx;
+  .rightPopup {
+    width: 645rpx;
 
-			.popup_top {
-				padding: 25rpx;
-				background-color: rgba(176, 196, 222, .45);
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				font-size: 28rpx;
-				font-family: Source Han Sans CN;
-				font-weight: 400;
-				color: #333333;
+    .popup_top {
+      padding: 25rpx;
+      background-color: rgba(176, 196, 222, 0.45);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 28rpx;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #333333;
 
-				.top_red {
-					color: #005BAC;
-				}
-			}
-			.popup_bottom {
-				display: flex;
-				align-items: center;
-				position: absolute;
-				left: 0;
-				bottom: 0;
-				width: 100%;
+      .top_red {
+        color: #005bac;
+      }
+    }
+    .popup_bottom {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
 
-				.bottom_btn {
-					flex: 1;
-					padding: 36rpx 0;
-					text-align: center;
-					font-size: 28rpx;
-				}
+      .bottom_btn {
+        flex: 1;
+        padding: 36rpx 0;
+        text-align: center;
+        font-size: 28rpx;
+      }
 
-				.thebtn1 {
-					background-color: rgba(176, 196, 222, .45);
-					color: #333333;
-				}
+      .thebtn1 {
+        background-color: rgba(176, 196, 222, 0.45);
+        color: #333333;
+      }
 
-				.thebtn2 {
-					background-color: #005BAC;
-					color: #ffffff;
-				}
-			}
+      .thebtn2 {
+        background-color: #005bac;
+        color: #ffffff;
+      }
+    }
 
-			.typesBox {
-				margin-top: 40rpx;
+    .typesBox {
+      margin-top: 40rpx;
 
-				.typeTitle {
-					padding: 0 24rpx;
-					font-size: 30rpx;
-					font-family: Source Han Sans CN;
-					font-weight: bold;
-					color: #333333;
-				}
+      .typeTitle {
+        padding: 0 24rpx;
+        font-size: 30rpx;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        color: #333333;
+      }
 
-				.choiceBox {
-					padding: 0 12rpx;
-					display: flex;
-					margin-top: 17rpx;
-					align-items: center;
-					flex-wrap: wrap;
+      .choiceBox {
+        padding: 0 12rpx;
+        display: flex;
+        margin-top: 17rpx;
+        align-items: center;
+        flex-wrap: wrap;
 
-					.flex_btn {
-						background-color: rgba(176, 196, 222, .45);
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						padding: 14rpx 48rpx;
-						border-radius: 26rpx;
-						font-size: 24rpx;
-						font-family: Source Han Sans CN;
-						font-weight: 400;
-						color: #333333;
-						margin: 17rpx 5rpx;
-					}
+        .flex_btn {
+          background-color: rgba(176, 196, 222, 0.45);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 14rpx 48rpx;
+          border-radius: 26rpx;
+          font-size: 24rpx;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #333333;
+          margin: 17rpx 5rpx;
+        }
 
-					.selectbtn {
-						background-color: #005BAC;
-						color: #ffffff;
-					}
-
-				}
-			}
-		}
-	}
-</style>
\ No newline at end of file
+        .selectbtn {
+          background-color: #005bac;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+</style>