web-base-h5/pages/mine/balance/transDetail.vue

<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
      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: '',
      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
      })
    },
    // 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;
}

.content {
  background: #f2f2f2;

  .contentList {
    background-color: #fff;
    margin-top: 8rpx;
    padding: 10rpx 23rpx;

    .linebox {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      margin: 14rpx 0;

      .line_title {
        min-width: 150rpx;
        color: #999999;
      }

      .line_content {
        color: #333;
      }

      .thesuccess {
        color: #45c242;
      }
    }
  }

  .rightPopup {
    width: 645rpx;

    .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%;

      .bottom_btn {
        flex: 1;
        padding: 36rpx 0;
        text-align: center;
        font-size: 28rpx;
      }

      .thebtn1 {
        background-color: rgba(176, 196, 222, 0.45);
        color: #333333;
      }

      .thebtn2 {
        background-color: #005bac;
        color: #ffffff;
      }
    }

    .typesBox {
      margin-top: 40rpx;

      .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;

        .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>