每周更新

power_leasing/src/views/account/sellerFundsFlow.vue

@@ -0,0 +1,118 @@
+<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>
+
+