Merge branch 'bd-dev' of http://47.94.45.65:3000/angelo/web-base-h5 into bd-test

pages/mine/balance/transDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="content">
-		<view class="contentList" v-for="item,index in tableList" :key="index">
+    <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>
@@ -23,7 +23,9 @@
       </view>
       <view class="linebox">
         <view class="line_title">{{ '交易余额' }}</view>
-				<view class="line_content">{{item.tradeBalance |numberToCurrency}}</view>
+        <view class="line_content">{{
+          item.tradeBalance | numberToCurrency
+        }}</view>
       </view>
       <view class="linebox">
         <view class="line_title">{{ '交易时间' }}</view>
@@ -34,7 +36,12 @@
         <view class="line_content">{{ item.remarks }}</view>
       </view>
     </view>
-		<u-popup :show="sxShow" mode="right" @close="sxShow = false" :closeOnClickOverlay="false">
+    <u-popup
+      :show="sxShow"
+      mode="right"
+      @close="sxShow = false"
+      :closeOnClickOverlay="false"
+    >
       <view class="rightPopup">
         <view class="popup_top">
           <view @click="getSearch">{{ '筛选' }}</view>
@@ -45,11 +52,15 @@
             {{ '交易类型' }}
           </view>
           <view class="choiceBox">
-						<view class="flex_btn" @click="clickTransType(item)" v-for="(item,index) in tradeTypeList"
+            <view
-							:key="index" :class="queryParams.tradeType==item.value?'selectbtn':''">
+              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">
@@ -57,14 +68,15 @@
             {{ '账户类型' }}
           </view>
           <view class="choiceBox">
-						<view class="flex_btn" 
+            <view
+              class="flex_btn"
               @click="clickAccountType(item)"
               v-for="(item, index) in pkAccountList"
               :key="index"
-							:class="queryParams.pkAccount==item.pkId?'selectbtn':''">
+              :class="queryParams.pkAccount == item.pkId ? 'selectbtn' : ''"
+            >
               {{ item.accountName }}
             </view>
-
           </view>
         </view>
         <view class="typesBox">
@@ -75,33 +87,62 @@
             <view class="flex_btn" @click="openDate(0)">
               {{ queryParams.startDate ? queryParams.startDate : '开始时间' }}
             </view>
-						<view style="color: #666;">
+            <view style="color: #666"> —— </view>
-							——
-						</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"
+        <u-datetime-picker
-					@confirm="getDate" :show="dataShow" v-model="value1" mode="date"></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
+            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 * as bal from '@/config/balance.js'
-	import {
+import { formatMsToDate } from '@/util/index'
-		formatMsToDate
-	} from '@/util/index'
 export default {
   data() {
     return {
@@ -109,17 +150,20 @@
       queryParams: {
         pageNum: 1,
         pageSize: 50,
-					tradeType: "", //交易类型
+        tradeType: '', //交易类型
-					pkAccount: "", //账户类型
+        pkAccount: '', //账户类型
-					startDate: "",
+        startDate: '',
-					endDate: ""
+        endDate: '',
       },
       tradeTypeList: [], //交易类型
       pkAccountList: [], //账户类型
       tableList: [],
       timeIndex: 0,
       dataShow: false,
-				value1: ""
+      value1: '',
+      loading: false, // 加载状态
+      hasMore: true, // 是否还有更多数据
+      total: 0, // 总记录数
     }
   },
   onLoad() {
@@ -129,6 +173,10 @@
   onNavigationBarButtonTap() {
     this.sxShow = true
   },
+  // 触底加载
+  onReachBottom() {
+    this.loadMore()
+  },
   methods: {
     getDate(e) {
       if (this.timeIndex == 1) {
@@ -152,30 +200,79 @@
       this.$set(this.queryParams, 'pkAccount', item.pkId)
     },
     getOthers() {
-				bal.getTradeTypeList().then((res) => {
+      bal.getTradeTypeList().then(res => {
-					this.tradeTypeList = res.data;
+        this.tradeTypeList = res.data
-				});
-				bal.getEnumsAccountList().then((res) => {
-					this.pkAccountList = res.data;
-				});
-			},
-			getSearch() {
-				bal.getTransactionDetails(this.queryParams).then(res => {
-					this.tableList = res.rows
       })
+      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: "", //交易类型
+        tradeType: '', //交易类型
-					pkAccount: "", //账户类型
+        pkAccount: '', //账户类型
-					startDate: "",
+        startDate: '',
       })
       this.getSearch()
     },
-		}
+  },
 }
 </script>
 
@@ -185,7 +282,7 @@
 }
 
 .content {
-		background: #F2F2F2;
+  background: #f2f2f2;
 
   .contentList {
     background-color: #fff;
@@ -208,7 +305,7 @@
       }
 
       .thesuccess {
-					color: #45C242;
+        color: #45c242;
       }
     }
   }
@@ -218,7 +315,7 @@
 
     .popup_top {
       padding: 25rpx;
-				background-color: rgba(176, 196, 222, .45);
+      background-color: rgba(176, 196, 222, 0.45);
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -228,7 +325,7 @@
       color: #333333;
 
       .top_red {
-					color: #005BAC;
+        color: #005bac;
       }
     }
     .popup_bottom {
@@ -247,12 +344,12 @@
       }
 
       .thebtn1 {
-					background-color: rgba(176, 196, 222, .45);
+        background-color: rgba(176, 196, 222, 0.45);
         color: #333333;
       }
 
       .thebtn2 {
-					background-color: #005BAC;
+        background-color: #005bac;
         color: #ffffff;
       }
     }
@@ -276,7 +373,7 @@
         flex-wrap: wrap;
 
         .flex_btn {
-						background-color: rgba(176, 196, 222, .45);
+          background-color: rgba(176, 196, 222, 0.45);
           display: flex;
           align-items: center;
           justify-content: center;
@@ -290,10 +387,9 @@
         }
 
         .selectbtn {
-						background-color: #005BAC;
+          background-color: #005bac;
           color: #ffffff;
         }
-
       }
     }
   }