前端

jiangping

2025-07-18 a7a1ff9356152c6446027cb13ff5b088c01ec66d

 small-program/pages/balance-details/balance-details.vue

@@ -1,48 +1,110 @@
<template>
   <view class="mx">
      <view class="index-search" :style="{ top: (statusbarHeight + navHeight) + 'px' }">
         <view :class="item.id === type ? 'index-search-item active' : 'index-search-item'" v-for="(item, index) in list" :key="index" @click="changeType(item.id)">
         <view :class="item.id === type ? 'index-search-item active' : 'index-search-item'" v-for="(item, index) in list" :key="index" @click="changeType(item.id,item.optType)">
            <text>{{item.name}}</text>
            <view class="index-search-item-x" v-if="item.id === type"></view>
         </view>
      </view>
      <view class="mx-list">
         <view class="mx-list-item" v-for="(item, index) in 12" :key="index">
         <view v-if="dataList && dataList.length" class="mx-list-item" v-for="(item, index) in dataList" :key="index">
            <view class="mx-list-item-a">
               <text>提现到零钱</text>
               <text>-500.00</text>
               <text>{{item.remark || ''}}</text>
               <text>{{(item.optType||1 * (item.amount||0)/100).toFixed(2) }}元</text>
            </view>
            <view class="mx-list-item-b">
               <text>交易号：1234567876544</text>
               <text>已到账</text>
               <text>交易号：{{item.transactionNo || '-'}}</text>
               <text v-if="item.status ==0">已到账</text>
               <text v-if="item.status ==1">交易失败</text>
               <text v-if="item.status ==2" class="redtxt">处理中</text>
            </view>
            <view class="mx-list-item-c">
               2025-06-30 12:30:20
               {{item.createTime}}
            </view>
         </view>
         <view class="mx-list-item-d">
            <text v-if="!hasMore">{{loadTxt}}</text> 
         </view>
      </view>
   </view>
</template>

<script>
   export default {
   export default { 
      data() {
         return {
            type: 1,
            list: [
               { name: '全部', id: 1 },
               { name: '收入', id: 2 },
               { name: '支出', id: 3 }
               { name: '全部', id: 1, optType:null },
               { name: '收入', id: 2, optType:1 },
               { name: '支出', id: 3 , optType:-1}
            ],
            searchForm:{
               optType:null
            },
            capacity:10,
            page:1,
            list:[]
            hasMore: true,
            dataList:[],
            changing1:false,
            loadTxt:'已加载全部'
         };
      },
      onReachBottom() {
         if(this.hasMore){
            this.getPageData(this.page+1)
         }
         console.log("我被触发了")
      },
      onShow(){
         this.changeType(1,'')  
      },
      methods: {
         changeType(id) {
         changeType(id,optType) {
            if(this.changing1){
               return
            }
            this.type = id
            this.searchForm.optType = optType
            this.getPageData(1)
         },
         getPageData(page){
            this.page = page
            if(this.page ==1){
               this.hasMore=true
               this.dataList=[]
            }
            if(this.changing1){
               return
            }
            this.changing1 = true
            var that = this
            var param ={
               capacity:this.capacity,
               page : this.page,
               model:{
                  optType:this.searchForm.optType
               }
            }
            that.$u.api.revenuePage(param)
            .then(res =>{
               if(res.code ===200) {
                  if(res.data && res.data.records && res.data.records.length && res.data.page == that.page) { 
                     that.dataList = [...that.dataList,...(res.data.records)]
                  } 
                  if(that.dataList.length == (res.data.total||0)){
                     that.hasMore = false
                  }
                  if(res.data.total ==0){
                     that.loadTxt='未查询到记录'
                  }else{
                     that.loadTxt='已加载全部'
                  }
               } 
             }).finally(() => {
               that.changing1 = false
            })
         }
      }
   }
</script>
@@ -54,6 +116,13 @@
         width: 100%;
         padding: 0 30rpx;
         box-sizing: border-box;
         .mx-list-item-d{
            padding: 20px;
            width: 100%;
            text-align: center;
            font-size: 24rpx;
            color: #999999;
         }
         .mx-list-item {
            width: 100%;
            height: 208rpx;
@@ -61,6 +130,7 @@
            flex-direction: column;
            justify-content: space-evenly;
            border-bottom: 1rpx solid #E5E5E5;
				
            .mx-list-item-a {
               width: 100%;
               display: flex;
@@ -142,4 +212,7 @@
         }
      }
   }
   .redtxt{
      color: #FF0000 !important;
   }
</style>