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.
127 lines
3.7 KiB
127 lines
3.7 KiB
<template>
|
|
<div style="height: 4vh;">
|
|
<el-button-group>
|
|
<el-button
|
|
class="no-active-btn"
|
|
:class="{ 'active-btn': activeTab === 'add_gold_bean_recharge' }"
|
|
@click="navigateTo('add_gold_bean_recharge')"
|
|
v-if="hasAdd"
|
|
style="width: 6.5vw">
|
|
新增充值
|
|
</el-button>
|
|
<el-button
|
|
class="no-active-btn"
|
|
:class="{ 'active-btn': activeTab === 'system_gold_bean_recharge' }"
|
|
@click="navigateTo('system_gold_bean_recharge')"
|
|
v-if="hasSystem"
|
|
style="width: 6.5vw;">
|
|
系统充值
|
|
</el-button>
|
|
<el-button
|
|
class="no-active-btn"
|
|
:class="{ 'active-btn': activeTab === 'online_gold_bean_recharge' }"
|
|
@click="navigateTo('online_gold_bean_recharge')"
|
|
v-if="hasOnline"
|
|
style="width: 6.5vw;">
|
|
线上充值
|
|
</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
<router-view></router-view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, watch, onMounted} from 'vue';
|
|
import {useRouter, useRoute} from 'vue-router';
|
|
import {storeToRefs} from 'pinia';
|
|
import {useAdminStore} from '@/store/index.js';
|
|
import {hasMenuPermission, permissionMapping} from "@/utils/menuTreePermission.js";
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const adminStore = useAdminStore();
|
|
const {menuTree} = storeToRefs(adminStore);
|
|
|
|
const activeTab = ref('');
|
|
const hasAdd = ref(false);
|
|
const hasSystem = ref(false);
|
|
const hasOnline = ref(false);
|
|
// 导航方法
|
|
const navigateTo = (name) => {
|
|
activeTab.value = name;
|
|
router.push({name});
|
|
};
|
|
|
|
|
|
// 初始化权限状态
|
|
const initPermissions = () => {
|
|
if (!menuTree.value || !menuTree.value.length) return;
|
|
|
|
hasAdd.value = hasMenuPermission(menuTree.value, permissionMapping.add_gold_bean_recharge);
|
|
hasSystem.value = hasMenuPermission(menuTree.value, permissionMapping.system_gold_bean_recharge);
|
|
hasOnline.value = hasMenuPermission(menuTree.value, permissionMapping.online_gold_bean_recharge);
|
|
};
|
|
|
|
// 默认跳转逻辑
|
|
const getDefaultAuditRoute = () => {
|
|
initPermissions();
|
|
if (hasAdd.value) return 'add_gold_bean_recharge';
|
|
if (hasSystem.value) return 'system_gold_bean_recharge';
|
|
if (hasOnline.value) return 'online_gold_bean_recharge';
|
|
return 'add_gold_bean_recharge';
|
|
};
|
|
|
|
// 监听路由变化更新标签状态
|
|
watch(() => route.name, (newName) => {
|
|
initPermissions()
|
|
if (newName === 'add_gold_bean_recharge' || newName === 'system_gold_bean_recharge' || newName === 'online_gold_bean_recharge') {
|
|
activeTab.value = newName;
|
|
} else if (newName === 'beanRecharge') {
|
|
// 每次访问 /beanConsume 都进行默认跳转
|
|
const defaultRoute = getDefaultAuditRoute();
|
|
navigateTo(defaultRoute);
|
|
}
|
|
});
|
|
|
|
// 初始化逻辑
|
|
onMounted(() => {
|
|
initPermissions()
|
|
if (route.name === 'beanRecharge') {
|
|
const defaultRoute = getDefaultAuditRoute();
|
|
navigateTo(defaultRoute);
|
|
} else {
|
|
// 非父路由初始化当前标签状态
|
|
if (route.name === 'add_gold_bean_recharge' || route.name === 'system_gold_bean_recharge' || route.name === 'online_gold_bean_recharge') {
|
|
activeTab.value = route.name;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
|
|
|
/* 自定义按钮组布局 */
|
|
|
|
|
|
.custom-button-group {
|
|
display: flex;
|
|
margin-bottom: 16px;
|
|
gap: 8px;
|
|
}
|
|
:deep(.el-button.custom-tab-button) {
|
|
border-radius: 4px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
// 自定义tab按钮激活样式
|
|
:deep(.el-button.custom-tab-button.el-button--primary) {
|
|
background-color: #2741DE !important;
|
|
border-color: #2741DE !important;
|
|
color: #F3FAFE !important;
|
|
}
|
|
|
|
/* 鼠标悬停效果 */
|
|
:deep(.el-button.custom-tab-button:hover:not(.is-disabled)) {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
</style>
|