You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.9 KiB
66 lines
1.9 KiB
<template>
|
|
<div>
|
|
<!-- 这里放置标签切换的按钮 -->
|
|
<el-button-group>
|
|
<!-- 切换后状态显示 primary 样式否则是默认样式 -->
|
|
<el-button
|
|
:type="activeTab === 'rechargeAudit' ? 'primary' : 'default'"
|
|
@click="goRechargeAudit"
|
|
>
|
|
充值审核
|
|
</el-button>
|
|
<el-button
|
|
:type="activeTab === 'refundAudit' ? 'primary' : 'default'"
|
|
@click="goRefundAudit"
|
|
>
|
|
退款审核
|
|
</el-button>
|
|
</el-button-group>
|
|
<!-- 渲染子路由组件 -->
|
|
<router-view></router-view>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup >
|
|
import {onMounted, ref, watch} from 'vue';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
|
|
const router = useRouter();// 获取路由实例
|
|
const route = useRoute();// 获取当前路由信息
|
|
// 定义响应式变量 activeTab 来跟踪当前激活的标签
|
|
const activeTab = ref(route.name === 'rechargeAudit' ? 'rechargeAudit' : 'refundAudit');
|
|
//也就是说如果当前在clientCountBalance页面，那么就是balance，否则默认情况都展示detail页面
|
|
//此时获取到的路由信息是clientCountDetail，所以默认是detail
|
|
|
|
|
|
const goRechargeAudit = () => {
|
|
// 点击按钮时更新 activeTab 为 detail
|
|
activeTab.value = 'rechargeAudit';
|
|
router.push({ name: 'rechargeAudit' });
|
|
};
|
|
|
|
const goRefundAudit = () => {
|
|
// 点击按钮时更新 activeTab 为balance
|
|
activeTab.value = 'refundAudit';
|
|
router.push({ name: 'refundAudit' });
|
|
};
|
|
|
|
// 监听路由变化，更新 activeTab
|
|
watch(() => route.name, (newName) => {
|
|
if (newName === 'rechargeAudit') {
|
|
activeTab.value = 'rechargeAudit';
|
|
} else if (newName === 'refundAudit') {
|
|
activeTab.value = 'refundAudit';
|
|
}});
|
|
|
|
// 当进入父路由时，默认跳转到金币明细页面
|
|
// if (route.name === 'usergold') {
|
|
// router.push({ name: 'clientCountDetail' });
|
|
// }
|
|
|
|
|
|
onMounted(async function () {
|
|
console.log("@@@@@@@@@@@@",route.name)
|
|
});
|
|
|
|
</script>
|