Browse Source
Merge branch 'refs/heads/lihui/feature-20250711103624-金币二期' into milestone-20250711-金币前端二期
zhangrenyuan/feature-20250714163943-金币前端二期
Merge branch 'refs/heads/lihui/feature-20250711103624-金币二期' into milestone-20250711-金币前端二期
zhangrenyuan/feature-20250714163943-金币前端二期
5 changed files with 274 additions and 100 deletions
-
82src/views/audit/audit.vue
-
62src/views/consume/coinConsume.vue
-
72src/views/recharge/coinRecharge.vue
-
64src/views/refund/coinRefund.vue
-
80src/views/usergold/clientCount.vue
@ -1,66 +1,80 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 这里放置标签切换的按钮 --> |
|||
<el-button-group> |
|||
<!-- 切换后状态显示 primary 样式否则是默认样式 --> |
|||
<el-button |
|||
:type="activeTab === 'rechargeAudit' ? 'primary' : 'default'" |
|||
@click="goRechargeAudit" |
|||
@click="navigateTo('rechargeAudit')" |
|||
> |
|||
充值审核 |
|||
</el-button> |
|||
<el-button |
|||
:type="activeTab === 'refundAudit' ? 'primary' : 'default'" |
|||
@click="goRefundAudit" |
|||
@click="navigateTo('refundAudit')" |
|||
> |
|||
退款审核 |
|||
</el-button> |
|||
</el-button-group> |
|||
<!-- 渲染子路由组件 --> |
|||
<router-view></router-view> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import {onMounted, ref, watch} from 'vue'; |
|||
import {ref, watch, onMounted} from 'vue'; |
|||
import {useRouter, useRoute} from 'vue-router'; |
|||
import {storeToRefs} from 'pinia'; |
|||
import {useAdminStore} from '@/store/index.js'; |
|||
|
|||
const router = useRouter();// 获取路由实例 |
|||
const route = useRoute();// 获取当前路由信息 |
|||
// 定义响应式变量 activeTab 来跟踪当前激活的标签 |
|||
const activeTab = ref(route.name === 'rechargeAudit' ? 'rechargeAudit' : 'refundAudit'); |
|||
//也就是说如果当前在clientCountBalance页面,那么就是balance,否则默认情况都展示detail页面 |
|||
//此时获取到的路由信息是clientCountDetail,所以默认是detail |
|||
const router = useRouter(); |
|||
const route = useRoute(); |
|||
const adminStore = useAdminStore(); |
|||
const {menuTree} = storeToRefs(adminStore); |
|||
|
|||
const activeTab = ref(''); |
|||
|
|||
const goRechargeAudit = () => { |
|||
// 点击按钮时更新 activeTab 为 detail |
|||
activeTab.value = 'rechargeAudit'; |
|||
router.push({ name: 'rechargeAudit' }); |
|||
// 导航方法 |
|||
const navigateTo = (name) => { |
|||
activeTab.value = name; |
|||
router.push({name}); |
|||
}; |
|||
|
|||
const goRefundAudit = () => { |
|||
// 点击按钮时更新 activeTab 为balance |
|||
activeTab.value = 'refundAudit'; |
|||
router.push({ name: 'refundAudit' }); |
|||
// 递归判断某个 menuName 是否存在 |
|||
const hasMenuPermission = (tree, targetName) => { |
|||
for (const node of tree) { |
|||
if (node.menuName === targetName) return true; |
|||
if (node.children && hasMenuPermission(node.children, targetName)) return true; |
|||
} |
|||
return false; |
|||
}; |
|||
|
|||
// 监听路由变化,更新 activeTab |
|||
watch(() => route.name, (newName) => { |
|||
if (newName === 'rechargeAudit') { |
|||
activeTab.value = 'rechargeAudit'; |
|||
} else if (newName === 'refundAudit') { |
|||
activeTab.value = 'refundAudit'; |
|||
}}); |
|||
// 默认路由判断 |
|||
const getDefaultAuditRoute = () => { |
|||
if (!menuTree.value) return 'rechargeAudit'; |
|||
|
|||
// 当进入父路由时,默认跳转到金币明细页面 |
|||
// if (route.name === 'usergold') { |
|||
// router.push({ name: 'clientCountDetail' }); |
|||
// } |
|||
const hasRecharge = hasMenuPermission(menuTree.value, '充值审核'); |
|||
return hasRecharge ? 'rechargeAudit' : 'refundAudit'; |
|||
}; |
|||
// 监听路由变化更新标签状态 |
|||
watch(() => route.name, (newName) => { |
|||
if (newName === 'rechargeAudit' || newName === 'refundAudit') { |
|||
activeTab.value = newName; |
|||
} else if (newName === 'audit') { |
|||
// 每次访问 /audit 都进行默认跳转 |
|||
const defaultRoute = getDefaultAuditRoute(); |
|||
navigateTo(defaultRoute); |
|||
} |
|||
}); |
|||
|
|||
|
|||
onMounted(async function () { |
|||
console.log("@@@@@@@@@@@@",route.name) |
|||
// 初始化逻辑 |
|||
onMounted(() => { |
|||
if (route.name === 'audit') { |
|||
const defaultRoute = getDefaultAuditRoute(); |
|||
navigateTo(defaultRoute); |
|||
} else { |
|||
// 非父路由初始化当前标签状态 |
|||
if (route.name === 'rechargeAudit' || route.name === 'refundAudit') { |
|||
activeTab.value = route.name; |
|||
} |
|||
} |
|||
}); |
|||
|
|||
</script> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue