App.vue

<script setup>
import { onMounted, ref, watch } from 'vue'
import request from '@/utils/request'
import AppHeader from '@/components/AppHeader.vue'

// 响应式数据
const list = ref([])
const pageSize = ref(10)
const pageNum = ref(1)
const total = ref(0)
const finished = ref(false)
const loading = ref(false)
const emptyTipsShow = ref(false)

// 下拉选项
const range = ref([
  { text: '银行储蓄金', value: 1 },
  { text: '我的股权', value: 2 },
  // { text: "每日分红", value: 3 },
  { text: '银行卡余额', value: 5 },
])

// 添加一个新的 ref 用于 tab 的索引控制
const currentTabIndex = ref(0)
const active = ref(Number(window.location.search.split('=')[1]) || 1)

// 重置列表状态
function resetList() {
  list.value = []
  pageNum.value = 1
  finished.value = false
  loading.value = true // 改为 true，避免 van-list 立即触发 load
  total.value = 0
  emptyTipsShow.value = false
  getList() // 直接在重置后调用获取列表
}

async function getList() {
  if (loading.value) { // 添加loading检查，避免重复请求
    try {
      const data = {
        balanceType: active.value,
        beginDate: '',
      }
      const res = await request.post(`/ops/walletdetail/list?pageNum=${pageNum.value}&pageSize=${pageSize.value}`, {
        ...data,
      })
      if (res.code === 200) {
        list.value = [...list.value, ...(res.rows || [])]
        total.value = res.total || 0
        if (list.value.length >= total.value) {
          finished.value = true
        }
        else {
          pageNum.value++
        }
      }
      else {
        showFailToast(res.msg || '加载失败')
        finished.value = true
      }
    }
    catch (error) {
      console.error('获取列表失败:', error)
      showFailToast(error.msg || '加载失败，请重试')
    }
    finally {
      loading.value = false
    }
  }
}

// 初始化时设置正确的 tab 索引
onMounted(() => {
  const index = range.value.findIndex(item => item.value === active.value)
  currentTabIndex.value = index >= 0 ? index : 0
  resetList()
})

// 修改 handleClick
function handleClick(item) {
  if (active.value === item.value)
    return
  active.value = item.value
  resetList()
}
</script>

<template>
  <AppHeader title="资金明细"/>
  <div class="wallet-detail">
    <var-tabs v-model:active="currentTabIndex" class="fixed-tabs">
      <var-tab v-for="item in range" :key="item.value" @click="handleClick(item)">
        {{ item.text }}
      </var-tab>
    </var-tabs>

    <div class="content-wrapper">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="true"
        @load="getList"
      >
        <div v-for="(item, index) in list" :key="index" class="detail-item">
          <!-- 头部信息 -->
          <div class="item-header">
            <div class="type-info">
              <div class="amount" :class="{ negative: item.type === '2' }">
                {{ item.type === '1' ? '+' : '-' }}{{ item.changeAmount }}
                {{ item.balanceType === 2 || item.balanceType === 1 ? '元' : '' }}
              </div>
              <span class="type-text">
                {{ item?.source }}
                <!-- {{
                  item.balanceType == 1 ? '银行储蓄金' :
                    item.balanceType == 2 ? '我的股权' :
                       item.balanceType == 3 ? '每日分红' :
                        item.balanceType == 5 ? '银行卡余额' : ''
                }} -->

              </span>
            </div>
          </div>

          <!-- 交易信息 -->
          <!-- <div class="item-content">
            <div class="transaction-info">
              <template v-if="item.balanceType && item.bankName">
                <div v-if="item.status == '0' || item.status == '1'" class="processing">
                  审核中
                </div>
                <div v-else-if="item.status == '2'" class="success">
                  {{ item.source }}
                </div>
                <div v-else-if="item.status == '3'" class="failed">
                  {{ item.source }}
                </div>
              </template>
<template v-else>
                {{ item.source }}
                <span v-if="item.bankName">至 {{ item.bankName }}{{ item.bankNum.slice(-4) }}</span>
              </template>
</div>
<div class="balance">
  剩余:{{ item.amount }}{{ item.balanceType === 2 || item.balanceType === 1 ? '元' : '' }}
</div>
</div> -->
          <div class="item-footer">
            <time>{{ item.time }}</time>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wallet-detail {
  min-height: 100vh;
  background: url('@/static/common/commonbg.png') no-repeat;
  background-size: 100% 100%;
  font-family: pingfang;
  padding-top: 60px;
  .fixed-tabs {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    z-index: 10;
  }

  .content-wrapper {
    margin: 0 10px 0; // 上边距要考虑 fixed-tabs 的高度
    background: rgba($color: #fff, $alpha: 0.8);
    border-radius: 8px;
    height: calc(100vh - 140px); // 减去顶部间距和底部预留空间
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 15px;
    margin-top: 50px;
  }

  .detail-item {
    padding: 5px;
    border-bottom: 1px solid #eee;

    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .type-text {
        font-size: 14px;
        color: #333;
      }

      .amount {
        font-size: 14px;
        color: #f44336;

        &.negative {
          color: #4caf50;
        }
      }
    }

    .item-content {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #666;
      margin-bottom: 5px;

      .processing {
        color: #ff9800;
      }

      .success {
        color: #4caf50;
      }

      .failed {
        color: #f44336;
      }
    }

    .item-footer {
      font-size: 12px;
      color: #999;
    }
  }

  .loading-text,
  .finished-text {
    padding: 15px 0;
    text-align: center;
    color: #999;
    font-size: 14px;
  }

  .empty-tips {
    text-align: center;
    padding: 100px 0;
    color: #999;
    font-size: 14px;
  }
}
</style>