huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'milestone-20250711-金币前端二期' of http://39.101.133.168:8807/huangqizhen/gold-vue into milestone-20250711-金币前端二期

lihui/feature-20250711103624-金币二期
ZhangYong 3 weeks ago
parent
bd7dd7c428 d08cb434e4
commit
f501d6ace3
11 changed files with 167 additions and 538 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .env.development
  2. 105
      src/utils/menu-utils.ts
  3. 1
      src/utils/menuUtils.js
  4. 127
      src/views/audit/audit.vue
  5. 122
      src/views/consume/coinConsume.vue
  6. 2
      src/views/home.vue
  7. 120
      src/views/recharge/coinRecharge.vue
  8. 116
      src/views/refund/coinRefund.vue
  9. 101
      src/views/usergold/clientCount.vue
  10. 7
      src/views/workspace/index.vue
  11. 2
      stats.html

2
.env.development
View File

@ -6,4 +6,4 @@ VITE_UPLOAD_URL=http://39.101.133.168:8828/hljw/api/aws/upload
# VITE_API_BASE='http://192.168.9.28:8081/' # VITE_API_BASE='http://192.168.9.28:8081/'
# 孙加倍 # 孙加倍
# VITE_API_BASE='http://192.168.9.28:8081/' # VITE_API_BASE='http://192.168.9.28:8081/'
# VITE_API_BASE='http://192.168.5.92:8081/'

105
src/utils/menu-utils.ts
View File

@ -1,105 +0,0 @@
// 菜单树过滤
export function filterMenu(menuList) {
return menuList
// 过滤不是4级的 123 为菜单
.filter(menu => menu.menuType !== 4)
.map(menu => ({
...menu,
children: menu.children ? filterMenu(menu.children) : []
}))
.sort((a, b) => a.priority - b.priority); // 按 id 升序
}
// 辅助函数：查找第一个可访问的菜单项
export function findFirstAccessibleMenu(menuList) {
if (!menuList || menuList.length === 0) return null
for (const menu of menuList) {
if (menu.menuType === 1) { // 根
const childResult = findFirstAccessibleMenu(menu.children)
if (childResult) return childResult
} else if (menu.menuType === 2) { // 目录
return menu
} else if (menu.menuType === 3) { // 菜单
return menu
}
}
return null
}
// 路由映射
export const getRoutePath = (menu) => {
// 路由映射表：key为接口menuName，value为对应路由路径
const routeMap = {
'工作台': '/workspace',
'审核页面': '/audit',
'财务审核': '/audit',
'汇率管理': '/rate',
'消耗管理': '/coinConsume',
'消耗页面': '/coinConsume',
'权限管理': '/permissions',
'充值管理': '/coinRecharge',
'充值页面': '/coinRecharge',
'退款管理': '/coinRefund',
'退款页面': '/coinRefund',
'客户账户明细': '/usergold',
};
// 未匹配的菜单默认使用id作为路由（可根据实际需求调整）
return routeMap[menu.menuName] || '/noPermissionPage'
}
// 这是获取用户信息的接口
const adminData = ref({
name: ''
})
import API from "@/util/http.js";
import {ref} from "vue";
export const getAdminData = async function () {
try {
const result = await API({url: '/admin/userinfo', data: {}})
adminData.value = result
console.log('请求成功', result)
console.log('用户信息', adminData.value)
return result
} catch (error) {
console.log('请求失败', error)
}
}
// 权限检查函数
export const hasPermission = (to, menuList) => {
if (!menuList || menuList.length === 0) return false;
// 转换路由路径为菜单名称
const routePath = to.path;
const menuName = Object.keys(getRoutePath).find(key => getRoutePath[key] === routePath);
if (!menuName) return false;
// 扁平化菜单树以便查找
const flattenMenu = (menus) => {
return menus.reduce((acc, menu) => {
acc.push(menu);
if (menu.children) {
acc = acc.concat(flattenMenu(menu.children));
}
return acc;
}, []);
};
const flatMenuList = flattenMenu(menuList);
return flatMenuList.some(menu => menu.menuName === menuName);
};

1
src/utils/menuUtils.js
View File

@ -47,6 +47,7 @@ export const getRoutePath = (menu) => {
'权限管理': '/permissions', '权限管理': '/permissions',
'充值管理': '/coinRecharge', '充值管理': '/coinRecharge',
'充值页面': '/coinRecharge', '充值页面': '/coinRecharge',
'退款管理': '/coinRefund', '退款管理': '/coinRefund',

127
src/views/audit/audit.vue
View File

@ -1,117 +1,66 @@
<template> <template>
<div> <div>
<!-- 这里放置标签切换的按钮 -->
<el-button-group> <el-button-group>
<!-- 切换后状态显示 primary 样式否则是默认样式 -->
<el-button <el-button
:type="activeTab === 'rechargeAudit' ? 'primary' : 'default'" :type="activeTab === 'rechargeAudit' ? 'primary' : 'default'"
@click="navigateTo('rechargeAudit')"
:disabled="!hasRechargePermission"
@click="goRechargeAudit"
> >
充值审核 充值审核
</el-button> </el-button>
<el-button <el-button
:type="activeTab === 'refundAudit' ? 'primary' : 'default'" :type="activeTab === 'refundAudit' ? 'primary' : 'default'"
@click="navigateTo('refundAudit')"
:disabled="!hasRefundPermission"
@click="goRefundAudit"
> >
退款审核 退款审核
</el-button> </el-button>
</el-button-group> </el-button-group>
<!-- 渲染子路由组件 -->
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
<script setup>
import {ref, watch, onMounted, computed} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {storeToRefs} from 'pinia';
import {useAdminStore} from '@/store/index.js';
<script setup >
import {onMounted, ref, watch} from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const adminStore = useAdminStore();
const {menuTree} = storeToRefs(adminStore);
const router = useRouter();// 获取路由实例
const route = useRoute();// 获取当前路由信息
// 定义响应式变量 activeTab 来跟踪当前激活的标签
const activeTab = ref(route.name === 'rechargeAudit' ? 'rechargeAudit' : 'refundAudit');
//也就是说如果当前在clientCountBalance页面，那么就是balance，否则默认情况都展示detail页面
//此时获取到的路由信息是clientCountDetail，所以默认是detail
const activeTab = ref('');
// 充值审核权限判断
const hasRechargePermission = computed(() => {
if (!menuTree.value) return false;
return menuTree.value.some(menu =>
menu.menuName === '充值审核' || menu.menuName === '财务审核'
);
});
// 退款审核权限判断
const hasRefundPermission = computed(() => {
if (!menuTree.value) return false;
return menuTree.value.some(menu =>
menu.menuName === '退款审核' || menu.menuName === '财务审核'
);
});
// 导航方法
const navigateTo = (name) => {
// 检查对应权限，无权限则不执行跳转
if ((name === 'rechargeAudit' && !hasRechargePermission.value) ||
(name === 'refundAudit' && !hasRefundPermission.value)) {
return;
}
activeTab.value = name;
router.push({name});
const goRechargeAudit = () => {
// 点击按钮时更新 activeTab 为 detail
activeTab.value = 'rechargeAudit';
router.push({ name: 'rechargeAudit' });
}; };
// 检查权限并返回默认路由
const getDefaultAuditRoute = () => {
// 优先检查充值审核权限
if (hasRechargePermission.value) return 'rechargeAudit';
// 其次检查退款审核权限
if (hasRefundPermission.value) return 'refundAudit';
// 无任何权限时返回null
return null;
const goRefundAudit = () => {
// 点击按钮时更新 activeTab 为balance
activeTab.value = 'refundAudit';
router.push({ name: 'refundAudit' });
}; };
// 监听路由变化
watch(() => route.path, (newPath) => {
// 当路径变更为 /audit 时执行跳转逻辑
if (newPath === '/audit') {
const defaultRoute = getDefaultAuditRoute();
if (defaultRoute) {
navigateTo(defaultRoute);
} else {
console.warn('用户没有充值审核和退款审核的权限');
// router.push({ name: 'noPermission' });
}
}
});
// 监听路由变化更新标签状态
// 监听路由变化，更新 activeTab
watch(() => route.name, (newName) => { watch(() => route.name, (newName) => {
// 只有在有权限的情况下才更新标签状态
if (newName === 'rechargeAudit' && hasRechargePermission.value) {
activeTab.value = newName;
} else if (newName === 'refundAudit' && hasRefundPermission.value) {
activeTab.value = newName;
}
});
if (newName === 'rechargeAudit') {
activeTab.value = 'rechargeAudit';
} else if (newName === 'refundAudit') {
activeTab.value = 'refundAudit';
}});
// 当进入父路由时，默认跳转到金币明细页面
// if (route.name === 'usergold') {
// router.push({ name: 'clientCountDetail' });
// }
// 初始化逻辑 - 保留原有逻辑处理首次加载
onMounted(() => {
// 父路由默认跳转
if (route.path === '/audit') {
const defaultRoute = getDefaultAuditRoute();
if (defaultRoute) {
navigateTo(defaultRoute);
} else {
// console.warn('用户没有充值审核和退款审核的权限');
router.push({ name: 'noPermission' });
}
} else {
// 非父路由初始化当前标签状态（带权限校验）
if (route.name === 'rechargeAudit' && hasRechargePermission.value) {
activeTab.value = route.name;
} else if (route.name === 'refundAudit' && hasRefundPermission.value) {
activeTab.value = route.name;
}
}
onMounted(async function () {
console.log("@@@@@@@@@@@@",route.name)
}); });
</script>
</script>

122
src/views/consume/coinConsume.vue
View File

@ -1,121 +1,61 @@
<template> <template>
<div> <div>
<!-- 这里放置标签切换的按钮 -->
<el-button-group> <el-button-group>
<!-- 切换后状态显示 primary 样式否则是默认样式 -->
<el-button <el-button
:type="activeTab === 'add' ? 'primary' : 'default'" :type="activeTab === 'add' ? 'primary' : 'default'"
@click="navigateTo('add')"
:disabled="!hasAddPermission"
@click="goToAdd"
> >
新增消耗
新增消耗
</el-button> </el-button>
<el-button <el-button
:type="activeTab === 'detail' ? 'primary' : 'default'" :type="activeTab === 'detail' ? 'primary' : 'default'"
@click="navigateTo('detail')"
:disabled="!hasDetailPermission"
@click="goToDetail"
> >
金币消耗明细
金币消耗明细
</el-button> </el-button>
</el-button-group> </el-button-group>
<!-- 渲染子路由组件 -->
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
<script setup> <script setup>
import {ref, watch, onMounted, computed} from 'vue'; // 新增computed导入
import {useRouter, useRoute} from 'vue-router';
import {storeToRefs} from 'pinia';
import {useAdminStore} from '@/store/index.js';
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const adminStore = useAdminStore();
const {menuTree} = storeToRefs(adminStore);
const router = useRouter();// 获取路由实例
const route = useRoute();// 获取当前路由信息
// 定义响应式变量 activeTab 来跟踪当前激活的标签
const activeTab = ref(route.name === 'coinConsumeDetail' ? 'detail' : 'add');
//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
//此时获取到的路由信息是coinConsume，所以默认是add
const activeTab = ref('');
// 路由名称映射
const routeMap = {
add: 'addCoinConsume',
detail: 'coinConsumeDetail'
const goToAdd = () => {
// 点击按钮时更新 activeTab 为 add
activeTab.value = 'add';
router.push({ name: 'addCoinConsume' });
}; };
// 新增消耗权限判断（与其他页面保持一致的computed写法）
const hasAddPermission = computed(() => {
if (!menuTree.value) return false;
return menuTree.value.some(menu =>
menu.menuName === '新增消耗' || menu.menuName === '消耗管理'
);
});
// 金币消耗明细权限判断（补充明细权限逻辑）
const hasDetailPermission = computed(() => {
if (!menuTree.value) return false;
return menuTree.value.some(menu =>
menu.menuName === '金币消耗明细' || menu.menuName === '消耗管理'
);
});
// 导航方法（补充权限校验）
const navigateTo = (tab) => {
// 检查对应权限，无权限则不执行跳转
if ((tab === 'add' && !hasAddPermission.value) ||
(tab === 'detail' && !hasDetailPermission.value)) {
return;
}
activeTab.value = tab;
router.push({name: routeMap[tab]});
};
// 检查权限并返回默认路由（优化权限判断逻辑）
const getDefaultConsumeRoute = () => {
// 优先检查新增消耗权限
if (hasAddPermission.value) return 'add';
// 其次检查明细权限
if (hasDetailPermission.value) return 'detail';
// 无任何权限时返回null
return null;
const goToDetail = () => {
// 点击按钮时更新 activeTab 为 detail
activeTab.value = 'detail';
router.push({ name: 'coinConsumeDetail' });
}; };
// 监听路由变化更新标签状态（增加权限校验）
// 监听路由变化，更新 activeTab
watch(() => route.name, (newName) => { watch(() => route.name, (newName) => {
if (newName === routeMap.add && hasAddPermission.value) {
if (newName === 'addCoinConsume') {
activeTab.value = 'add'; activeTab.value = 'add';
} else if (newName === routeMap.detail && hasDetailPermission.value) {
} else if (newName === 'coinConsumeDetail') {
activeTab.value = 'detail'; activeTab.value = 'detail';
} }
}); });
// 监听路径变化，处理直接访问父路由的情况
watch(() => route.path, (newPath) => {
if (newPath === '/coinConsume') { // 假设父路由路径为/coinConsume
const defaultRoute = getDefaultConsumeRoute();
if (defaultRoute) {
navigateTo(defaultRoute);
} else {
console.warn('用户没有新增消耗和金币消耗明细的权限');
// router.push({ name: 'noPermission' }); // 可根据实际需求启用
}
}
});
// 初始化逻辑（完善权限校验和状态同步）
onMounted(() => {
// 父路由默认跳转
if (route.path === '/coinConsume') { // 假设父路由路径为/coinConsume
const defaultRoute = getDefaultConsumeRoute();
if (defaultRoute) {
navigateTo(defaultRoute);
} else {
// console.warn('用户没有新增消耗和金币消耗明细的权限');
router.push({ name: 'noPermission' }); // 可根据实际需求启用
}
} else {
// 子路由直接进入时同步状态（带权限校验）
if (route.name === routeMap.add && hasAddPermission.value) {
activeTab.value = 'add';
} else if (route.name === routeMap.detail && hasDetailPermission.value) {
activeTab.value = 'detail';
}
}
});
</script>
// 当进入父路由时，默认跳转到新增消耗页面
// if (route.name === 'coinConsume') {
// router.push({ name: 'addCoinConsume' });
// }
</script>

2
src/views/home.vue
View File

@ -114,7 +114,7 @@ function logout() {
<template #title> <template #title>
<span>{{ child.menuName }}</span> <span>{{ child.menuName }}</span>
</template> </template>
<!-- 嵌归 下一级-->
<!-- 递归 下一级-->
<template v-for="grandChild in child.children" :key="grandChild.id"> <template v-for="grandChild in child.children" :key="grandChild.id">
<el-menu-item :index="getRoutePath(grandChild)"> <el-menu-item :index="getRoutePath(grandChild)">
<span>{{ grandChild.menuName }}</span> <span>{{ grandChild.menuName }}</span>

120
src/views/recharge/coinRecharge.vue
View File

@ -1,119 +1,61 @@
<template> <template>
<div> <div>
<!-- 这里放置标签切换的按钮 -->
<el-button-group> <el-button-group>
<!-- 切换后状态显示 primary 样式否则是默认样式 -->
<el-button <el-button
:type="activeTab === 'add' ? 'primary' : 'default'" :type="activeTab === 'add' ? 'primary' : 'default'"
@click="navigateTo('add')"
:disabled="!hasAddPermission"
@click="goToAdd"
> >
新增充值
新增消耗
</el-button> </el-button>
<el-button <el-button
:type="activeTab === 'detail' ? 'primary' : 'default'" :type="activeTab === 'detail' ? 'primary' : 'default'"
@click="navigateTo('detail')"
:disabled="!hasDetailPermission"
@click="goToDetail"
> >
金币充值明细
金币消耗明细
</el-button> </el-button>
</el-button-group> </el-button-group>
<!-- 渲染子路由组件 -->
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
<script setup> <script setup>
import {ref, watch, onMounted, computed} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {storeToRefs} from 'pinia';
import {useAdminStore} from '@/store/index.js';
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const adminStore = useAdminStore();
const {menuTree} = storeToRefs(adminStore);
const router = useRouter();// 获取路由实例
const route = useRoute();// 获取当前路由信息
// 定义响应式变量 activeTab 来跟踪当前激活的标签
const activeTab = ref(route.name === 'coinConsumeDetail' ? 'detail' : 'add');
//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
//此时获取到的路由信息是coinConsume，所以默认是add
// 路由名称映射表
const routeMap = {
add: 'addCoinRecharge',
detail: 'coinRechargeDetail'
};
// 激活的标签
const activeTab = ref('');
// 检查新增权限
const hasAddPermission = computed(() => {
if (!menuTree.value) return false;
return menuTree.value.some(menu =>
menu.menuName === '新增充值' || menu.menuName === '充值管理'
);
});
// 检查明细权限
const hasDetailPermission = computed(() => {
if (!menuTree.value) return false;
return menuTree.value.some(menu =>
menu.menuName === '金币充值明细' || menu.menuName === '充值管理'
);
});
// 统一导航方法
const navigateTo = (tab) => {
// 检查权限后再跳转
if ((tab === 'add' && !hasAddPermission.value) ||
(tab === 'detail' && !hasDetailPermission.value)) {
return;
}
activeTab.value = tab;
router.push({name: routeMap[tab]});
const goToAdd = () => {
// 点击按钮时更新 activeTab 为 add
activeTab.value = 'add';
router.push({ name: 'addCoinConsume' });
}; };
// 获取默认路由
const getDefaultRoute = () => {
if (hasAddPermission.value) return 'add';
if (hasDetailPermission.value) return 'detail';
return null;
const goToDetail = () => {
// 点击按钮时更新 activeTab 为 detail
activeTab.value = 'detail';
router.push({ name: 'coinConsumeDetail' });
}; };
// 监听路由变化更新标签
// 监听路由变化，更新 activeTab
watch(() => route.name, (newName) => { watch(() => route.name, (newName) => {
if (newName === routeMap.add && hasAddPermission.value) {
if (newName === 'addCoinConsume') {
activeTab.value = 'add'; activeTab.value = 'add';
} else if (newName === routeMap.detail && hasDetailPermission.value) {
} else if (newName === 'coinConsumeDetail') {
activeTab.value = 'detail'; activeTab.value = 'detail';
} }
}); });
// 监听路径变化，处理直接访问父路由路径的情况
watch(() => route.path, (newPath) => {
if (newPath === '/coinRecharge') { // 假设父路由路径为/coinRecharge
const defaultTab = getDefaultRoute();
if (defaultTab) {
navigateTo(defaultTab);
} else {
console.warn('用户没有新增充值和金币充值明细的权限');
// router.push({ name: 'noPermission' }); // 可根据实际需求启用
}
}
});
// 初始化
onMounted(() => {
// 父路由默认跳转（同时处理路径和名称两种判断方式）
if (route.name === 'coinRecharge' || route.path === '/coinRecharge') {
const defaultTab = getDefaultRoute();
if (defaultTab) {
navigateTo(defaultTab);
} else {
// console.warn('用户没有新增充值和金币充值明细的权限');
router.push({ name: 'noPermission' }); // 可根据实际需求启用
}
} else {
// 子路由直接进入时同步状态（增加权限校验）
if (route.name === routeMap.add && hasAddPermission.value) {
activeTab.value = 'add';
} else if (route.name === routeMap.detail && hasDetailPermission.value) {
activeTab.value = 'detail';
}
}
});
</script>
// 当进入父路由时，默认跳转到新增消耗页面
// if (route.name === 'coinConsume') {
// router.push({ name: 'addCoinConsume' });
// }
</script>

116
src/views/refund/coinRefund.vue
View File

@ -1,119 +1,61 @@
<template> <template>
<div> <div>
<!-- 这里放置标签切换的按钮 -->
<el-button-group> <el-button-group>
<!-- 切换后状态显示 primary 样式否则是默认样式 -->
<el-button <el-button
:type="activeTab === 'add' ? 'primary' : 'default'" :type="activeTab === 'add' ? 'primary' : 'default'"
@click="navigateTo('add')"
:disabled="!hasAddPermission"
@click="goToAdd"
> >
新增退款 新增退款
</el-button> </el-button>
<el-button <el-button
:type="activeTab === 'detail' ? 'primary' : 'default'" :type="activeTab === 'detail' ? 'primary' : 'default'"
@click="navigateTo('detail')"
:disabled="!hasDetailPermission"
@click="goToDetail"
> >
金币退款明细 金币退款明细
</el-button> </el-button>
</el-button-group> </el-button-group>
<!-- 渲染子路由组件 -->
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
<script setup> <script setup>
import {ref, watch, onMounted, computed} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {storeToRefs} from 'pinia';
import {useAdminStore} from '@/store/index.js';
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const adminStore = useAdminStore();
const {menuTree} = storeToRefs(adminStore);
const router = useRouter();// 获取路由实例
const route = useRoute();// 获取当前路由信息
// 定义响应式变量 activeTab 来跟踪当前激活的标签
const activeTab = ref(route.name === 'coinRefundDetail' ? 'detail' : 'add');
//也就是说如果当前在coinRefundDetail页面，那么就是detail，否则默认情况都展示add页面
//此时获取到的路由信息是coinRefund，所以默认是add
// 路由名称映射表
const routeMap = {
add: 'addCoinRefund',
detail: 'coinRefundDetail'
};
// 激活的标签
const activeTab = ref('');
// 检查新增权限
const hasAddPermission = computed(() => {
if (!menuTree.value) return false;
return menuTree.value.some(menu =>
menu.menuName === '新增退款' || menu.menuName === '退款管理'
);
});
// 检查明细权限
const hasDetailPermission = computed(() => {
if (!menuTree.value) return false;
return menuTree.value.some(menu =>
menu.menuName === '金币退款明细' || menu.menuName === '退款管理'
);
});
// 统一导航方法
const navigateTo = (tab) => {
// 检查权限后再跳转
if ((tab === 'add' && !hasAddPermission.value) ||
(tab === 'detail' && !hasDetailPermission.value)) {
return;
}
activeTab.value = tab;
router.push({name: routeMap[tab]});
const goToAdd = () => {
// 点击按钮时更新 activeTab 为 add
activeTab.value = 'add';
router.push({ name: 'addCoinRefund' });
}; };
// 获取默认路由
const getDefaultRoute = () => {
if (hasAddPermission.value) return 'add';
if (hasDetailPermission.value) return 'detail';
return null;
const goToDetail = () => {
// 点击按钮时更新 activeTab 为 detail
activeTab.value = 'detail';
router.push({ name: 'coinRefundDetail' });
}; };
// 监听路由变化更新标签
// 监听路由变化，更新 activeTab
watch(() => route.name, (newName) => { watch(() => route.name, (newName) => {
if (newName === routeMap.add && hasAddPermission.value) {
if (newName === 'addCoinRefund') {
activeTab.value = 'add'; activeTab.value = 'add';
} else if (newName === routeMap.detail && hasDetailPermission.value) {
} else if (newName === 'coinRefundDetail') {
activeTab.value = 'detail'; activeTab.value = 'detail';
} }
}); });
// 监听路径变化，处理父路由直接访问的情况
watch(() => route.path, (newPath) => {
if (newPath === '/coinRefund') {
const defaultTab = getDefaultRoute();
if (defaultTab) {
navigateTo(defaultTab);
} else {
console.warn('用户没有新增退款和金币退款明细的权限');
// router.push({ name: 'noPermission' });
}
}
});
// 初始化
onMounted(() => {
// 父路由默认跳转
if (route.path === '/coinRefund') {
const defaultTab = getDefaultRoute();
if (defaultTab) {
navigateTo(defaultTab);
} else {
// console.warn('用户没有新增退款和金币退款明细的权限');
router.push({ name: 'noPermission' });
}
} else {
// 子路由直接进入时同步状态
if (route.name === routeMap.add && hasAddPermission.value) {
activeTab.value = 'add';
} else if (route.name === routeMap.detail && hasDetailPermission.value) {
activeTab.value = 'detail';
}
}
});
</script>
// 当进入父路由时，默认跳转到新增消耗页面
// if (route.name === 'coinRefund') {
// router.push({ name: 'addCoinRefund' });
// }
</script>

101
src/views/usergold/clientCount.vue
View File

@ -1,104 +1,61 @@
<template> <template>
<div> <div>
<!-- 这里放置标签切换的按钮 -->
<el-button-group> <el-button-group>
<!-- 切换后状态显示 primary 样式否则是默认样式 -->
<el-button <el-button
:type="activeTab === 'detail' ? 'primary' : 'default'" :type="activeTab === 'detail' ? 'primary' : 'default'"
@click="navigateTo('detail')"
:disabled="!hasDetailPermission"
@click="goToDetail"
> >
金币明细 金币明细
</el-button> </el-button>
<el-button <el-button
:type="activeTab === 'balance' ? 'primary' : 'default'" :type="activeTab === 'balance' ? 'primary' : 'default'"
@click="navigateTo('balance')"
:disabled="!hasBalancePermission"
@click="goToBalance"
> >
金币余额 金币余额
</el-button> </el-button>
</el-button-group> </el-button-group>
<!-- 渲染子路由组件 -->
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, watch, onMounted, computed } from 'vue';
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useAdminStore } from '@/store/index.js';
const router = useRouter();
const route = useRoute();
const adminStore = useAdminStore();
const { menuTree } = storeToRefs(adminStore);
const router = useRouter();// 获取路由实例
const route = useRoute();// 获取当前路由信息
// 定义响应式变量 activeTab 来跟踪当前激活的标签
const activeTab = ref(route.name === 'clientCountBalance' ? 'balance' : 'detail');
//也就是说如果当前在clientCountBalance页面，那么就是balance，否则默认情况都展示detail页面
//此时获取到的路由信息是clientCountDetail，所以默认是detail
// 路由名称映射表
const routeMap = {
detail: 'clientCountDetail',
balance: 'clientCountBalance'
};
// 激活的标签
const activeTab = ref('');
// 检查金币明细权限
const hasDetailPermission = computed(() => {
if (!menuTree.value) return false;
return menuTree.value.some(menu =>
menu.menuName === '金币明细' || menu.menuName === '客户账户明细'
);
});
// 检查金币余额权限
const hasBalancePermission = computed(() => {
if (!menuTree.value) return false;
return menuTree.value.some(menu =>
menu.menuName === '金币余额' || menu.menuName === '客户账户明细'
);
});
// 统一导航方法
const navigateTo = (tab) => {
// 检查权限后再跳转
if ((tab === 'detail' && !hasDetailPermission.value) ||
(tab === 'balance' && !hasBalancePermission.value)) {
return;
}
activeTab.value = tab;
router.push({ name: routeMap[tab] });
const goToDetail = () => {
// 点击按钮时更新 activeTab 为 detail
activeTab.value = 'detail';
router.push({ name: 'clientCountDetail' });
}; };
// 获取默认路由
const getDefaultRoute = () => {
if (hasDetailPermission.value) return 'detail';
if (hasBalancePermission.value) return 'balance';
return null;
const goToBalance = () => {
// 点击按钮时更新 activeTab 为balance
activeTab.value = 'balance';
router.push({ name: 'clientCountBalance' });
}; };
// 监听路由变化更新标签
// 监听路由变化，更新 activeTab
watch(() => route.name, (newName) => { watch(() => route.name, (newName) => {
if (newName === routeMap.detail && hasDetailPermission.value) {
if (newName === 'clientCountDetail') {
activeTab.value = 'detail'; activeTab.value = 'detail';
} else if (newName === routeMap.balance && hasBalancePermission.value) {
} else if (newName === 'clientCountBalance') {
activeTab.value = 'balance'; activeTab.value = 'balance';
}
});
}});
// 初始化
onMounted(() => {
// 父路由默认跳转
if (route.name === 'usergold') {
const defaultTab = getDefaultRoute();
if (defaultTab) {
navigateTo(defaultTab);
}
} else {
// 子路由直接进入时同步状态
if (route.name === routeMap.detail) {
activeTab.value = 'detail';
} else if (route.name === routeMap.balance) {
activeTab.value = 'balance';
}
}
});
</script>
// 当进入父路由时，默认跳转到金币明细页面
// if (route.name === 'usergold') {
// router.push({ name: 'clientCountDetail' });
// }
</script>

7
src/views/workspace/index.vue
View File

@ -123,7 +123,7 @@
</template> </template>
</el-col> </el-col>
<template #footer> <template #footer>
<el-col class="margin-bottom center-card">昨日充值人数：{{ rechargeNum }}</el-col>
<el-col class="margin-bottom center-card">昨日充值人数：{{ ydayRechargeNum }}</el-col>
<el-col class="margin-bottom center-card">其中首充：{{ firstRecharge }}</el-col> <el-col class="margin-bottom center-card">其中首充：{{ firstRecharge }}</el-col>
</template> </template>
</el-card> </el-card>
@ -249,6 +249,7 @@ const yearlyRechargeNum = ref(0)
const sumWow = ref(0) const sumWow = ref(0)
const sumDaily = ref(0) const sumDaily = ref(0)
const rechargeNum = ref(0) const rechargeNum = ref(0)
const ydayRechargeNum = ref(0)
const firstRecharge = ref(0) const firstRecharge = ref(0)
const length = ref(0) const length = ref(0)
// 加载状态 // 加载状态
@ -364,6 +365,7 @@ const processData = (data) => {
yearlyRefund: 0, yearlyRefund: 0,
yearlyReduce: 0, yearlyReduce: 0,
rechargeNum: 0, rechargeNum: 0,
ydayRechargeNum: 0,
firstRecharge: 0, firstRecharge: 0,
sumWow: 0, sumWow: 0,
sumDaily: 0, sumDaily: 0,
@ -415,7 +417,8 @@ const processData = (data) => {
// // 日环比 // // 日环比
// sumDaily.value = (marketCards.sumDaily / length.value).toFixed(2) // sumDaily.value = (marketCards.sumDaily / length.value).toFixed(2)
rechargeNum.value = summary.rechargeNum
// rechargeNum.value = summary.rechargeNum
ydayRechargeNum.value = summary.ydayRechargeNum
firstRecharge.value = summary.firstRecharge firstRecharge.value = summary.firstRecharge
} }

2
stats.html
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save