webs/power_leasing/src/views/account/sellerFundsFlow.vue

<template>
  <div class="funds-page">
    <!-- 页面标题：卖家资金流水（与买家 fundsFlow.vue 视觉对齐） -->
    <h3 class="title">资金流水</h3>

    <!-- Tab 容器：仅卖家维度（收款记录/提现记录） -->
    <div class="tabs-card" aria-label="资金流水tab" tabindex="0">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="收款记录" name="receipt" />
        <el-tab-pane label="提现记录" name="withdraw" />
      </el-tabs>

      <!--
        使用 keep-alive + 动态组件：
        - 避免一次性挂载两个页面导致双请求
        - 切换 Tab 时缓存组件状态（如分页页码/展开行）
      -->
      <keep-alive>
        <component :is="activeComponentName" />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import AccountReceiptRecord from './receiptRecord.vue'
import AccountWithdrawRecord from './withdrawRecord.vue'

/**
 * 卖家资金流水聚合页
 * - 仅整合“收款记录/提现记录”两个页面
 * - 复用原有页面组件，保证请求接口与内容展示完全不变
 */
export default {
  name: 'AccountSellerFundsFlow',
  components: {
    AccountReceiptRecord,
    AccountWithdrawRecord
  },
  data() {
    return {
      /** @type {'receipt'|'withdraw'} */
      activeTab: 'receipt'
    }
  },
  computed: {
    /**
     * 根据当前 tab 返回动态组件名
     * @returns {'AccountReceiptRecord'|'AccountWithdrawRecord'}
     */
    activeComponentName() {
      return this.activeTab === 'withdraw' ? 'AccountWithdrawRecord' : 'AccountReceiptRecord'
    }
  },
  created() {
    this.syncTabFromRoute()
  },
  watch: {
    /**
     * 监听 query.tab 变化（兼容外部链接/旧路由重定向）
     */
    '$route.query.tab': {
      immediate: false,
      handler() {
        this.syncTabFromRoute()
      }
    }
  },
  methods: {
    /**
     * 从路由 query.tab 同步当前 tab
     * 允许值：receipt / withdraw；其他值回退为 receipt
     */
    syncTabFromRoute() {
      const tab = String((this.$route && this.$route.query && this.$route.query.tab) || '')
      this.activeTab = tab === 'withdraw' ? 'withdraw' : 'receipt'
    },
    /**
     * Tab 点击：同步写入 URL（replace，避免历史栈过长）
     */
    handleTabClick() {
      const next = this.activeTab === 'withdraw' ? 'withdraw' : 'receipt'
      const current = String((this.$route && this.$route.query && this.$route.query.tab) || '')
      if (current === next) return
      this.$router.replace({ query: { ...(this.$route.query || {}), tab: next } })
    }
  }
}
</script>

<style scoped>
/* 外层容器：与买家 fundsFlow.vue 的布局对齐 */
.funds-page {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
}

.title {
  margin: 0 0 18px 0;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
}

.tabs-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  width: 100%;
  box-sizing: border-box;
}
</style>