122 lines
3.0 KiB
Vue
122 lines
3.0 KiB
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>
|
||
|
||
|
||
|
||
|
||
|