Merge branch 'refs/heads/lihui/feature-20250711103624-金币二期' into milestone-20250711-金币前端二期

3 weeks ago · c378f14d94
5 changed files with 274 additions and 100 deletions
--- a/src/views/audit/audit.vue
+++ b/src/views/audit/audit.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 { useRouter, useRoute } from 'vue-router';
+<script setup>
+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>
--- a/src/views/consume/coinConsume.vue
+++ b/src/views/consume/coinConsume.vue
@ -22,8 +22,10 @@
 </template>

 <script setup>
-import { ref, watch } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
+import {onMounted, ref, watch} from 'vue';
+import {useRouter, useRoute} from 'vue-router';
+import {storeToRefs} from "pinia";
+import {useAdminStore} from "@/store/index.js";

 const router = useRouter();// 获取路由实例
 const route = useRoute();// 获取当前路由信息
@ -31,31 +33,69 @@ const route = useRoute();// 获取当前路由信息
 const activeTab = ref(route.name === 'coinConsumeDetail' ? 'detail' : 'add');
 //也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
 //此时获取到的路由信息是coinConsume，所以默认是add
-
+const adminStore = useAdminStore();
+const {menuTree} = storeToRefs(adminStore);

 const goToAdd = () => {
  // 点击按钮时更新 activeTab 为 add
  activeTab.value = 'add';
-  router.push({ name: 'addCoinConsume' });
+  router.push({name: 'addCoinConsume'});
 };

 const goToDetail = () => {
  // 点击按钮时更新 activeTab 为 detail
  activeTab.value = 'detail';
-  router.push({ name: 'coinConsumeDetail' });
+  router.push({name: 'coinConsumeDetail'});
+};
+
+// 导航方法
+const navigateTo = (name) => {
+  activeTab.value = name;
+  if (name === 'add') {
+    router.push({name: 'addCoinConsume'});
+  } else if (name === 'detail') {
+    router.push({name: 'coinConsumeDetail'});
+  }
+};
+
+// 递归判断某个 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;
+};
+
+// 默认路由判断
+const getDefaultRoute = () => {
+  if (!menuTree.value) return 'add';
+  const hasRecharge = hasMenuPermission(menuTree.value, '提交金币消耗');
+  return hasRecharge ? 'add' : 'detail';
 };

-// 监听路由变化，更新 activeTab
+
+// 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
-  if (newName === 'addCoinConsume') {
-    activeTab.value = 'add';
-  } else if (newName === 'coinConsumeDetail') {
-    activeTab.value = 'detail';
+  if (newName === 'add' || newName === 'detail') {
+    activeTab.value = newName;
+  } else if (newName === 'coinConsume') {
+    const defaultRoute = getDefaultRoute();
+    navigateTo(defaultRoute);
+  }
+});
+
+// 初始化逻辑
+onMounted(() => {
+  if (route.name === 'coinConsume') {
+    const defaultRoute = getDefaultRoute();
+    navigateTo(defaultRoute);
+  } else {
+    // 非父路由初始化当前标签状态
+    if (route.name === 'add' || route.name === 'detail') {
+      activeTab.value = route.name;
+    }
  }
 });

-// 当进入父路由时，默认跳转到新增消耗页面
-// if (route.name === 'coinConsume') {
-//   router.push({ name: 'addCoinConsume' });
-// }
 </script>
--- a/src/views/recharge/coinRecharge.vue
+++ b/src/views/recharge/coinRecharge.vue
@ -7,13 +7,13 @@
          :type="activeTab === 'add' ? 'primary' : 'default'"
          @click="goToAdd"
      >
-        新增消耗
+        新增充值
      </el-button>
      <el-button
          :type="activeTab === 'detail' ? 'primary' : 'default'"
          @click="goToDetail"
      >
-        金币消耗明细
+        金币充值明细
      </el-button>
    </el-button-group>
    <!-- 渲染子路由组件 -->
@ -22,40 +22,80 @@
 </template>

 <script setup>
-import { ref, watch } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
+import {onMounted, ref, watch} 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 === 'coinConsumeDetail' ? 'detail' : 'add');
+const activeTab = ref(route.name === 'coinRechargeDetail' ? 'detail' : 'add');
 //也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
 //此时获取到的路由信息是coinConsume，所以默认是add
-
+const adminStore = useAdminStore();
+const {menuTree} = storeToRefs(adminStore);

 const goToAdd = () => {
  // 点击按钮时更新 activeTab 为 add
  activeTab.value = 'add';
-  router.push({ name: 'addCoinConsume' });
+  router.push({name: 'addCoinRecharge'});
 };

 const goToDetail = () => {
  // 点击按钮时更新 activeTab 为 detail
  activeTab.value = 'detail';
-  router.push({ name: 'coinConsumeDetail' });
+  router.push({name: 'coinRechargeDetail'});
+};
+
+// 导航方法
+const navigateTo = (name) => {
+  activeTab.value = name;
+  if (name === 'add') {
+    router.push({name: 'addCoinRecharge'});
+  } else if (name === 'detail') {
+    router.push({name: 'coinRechargeDetail'});
+  }
+};
+
+// 递归判断某个 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;
+};
+
+// 默认路由判断
+const getDefaultRoute = () => {
+  if (!menuTree.value) return 'add';
+  const hasRecharge = hasMenuPermission(menuTree.value, '提交金币充值');
+  return hasRecharge ? 'add' : 'detail';
 };

-// 监听路由变化，更新 activeTab
+
+// 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
-  if (newName === 'addCoinConsume') {
-    activeTab.value = 'add';
-  } else if (newName === 'coinConsumeDetail') {
-    activeTab.value = 'detail';
+  if (newName === 'add' || newName === 'detail') {
+    activeTab.value = newName;
+  } else if (newName === 'coinRecharge') {
+    const defaultRoute = getDefaultRoute();
+    navigateTo(defaultRoute);
+  }
+});
+
+// 初始化逻辑
+onMounted(() => {
+  if (route.name === 'coinRecharge') {
+    const defaultRoute = getDefaultRoute();
+    navigateTo(defaultRoute);
+  } else {
+    // 非父路由初始化当前标签状态
+    if (route.name === 'add' || route.name === 'detail') {
+      activeTab.value = route.name;
+    }
  }
 });

-// 当进入父路由时，默认跳转到新增消耗页面
-// if (route.name === 'coinConsume') {
-//   router.push({ name: 'addCoinConsume' });
-// }
 </script>
--- a/src/views/refund/coinRefund.vue
+++ b/src/views/refund/coinRefund.vue
@ -22,15 +22,18 @@
 </template>

 <script setup>
-import { ref, watch } from 'vue';
+import {onMounted, ref, watch} from 'vue';
 import { useRouter, useRoute } from 'vue-router';
+import {useAdminStore} from "@/store/index.js";
+import {storeToRefs} from "pinia";
+
+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 goToAdd = () => {
@ -45,17 +48,54 @@ const goToDetail = () => {
  router.push({ name: 'coinRefundDetail' });
 };

-// 监听路由变化，更新 activeTab
+// 导航方法
+const navigateTo = (name) => {
+  activeTab.value = name;
+  if (name === 'add') {
+    router.push({name: 'addCoinRefund'});
+  } else if (name === 'detail') {
+    router.push({name: 'coinRefundDetail'});
+  }
+};
+
+
+// 递归判断某个 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;
+};
+
+// 默认路由判断
+const getDefaultRoute = () => {
+  if (!menuTree.value) return 'add';
+  const hasRecharge = hasMenuPermission(menuTree.value, '提交金币退款');
+  return hasRecharge ? 'add' : 'detail';
+};
+
+
+// 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
-  if (newName === 'addCoinRefund') {
-    activeTab.value = 'add';
-  } else if (newName === 'coinRefundDetail') {
-    activeTab.value = 'detail';
+  if (newName === 'add' || newName === 'detail') {
+    activeTab.value = newName;
+  } else if (newName === 'coinRefund') {
+    const defaultRoute = getDefaultRoute();
+    navigateTo(defaultRoute);
  }
 });

-// 当进入父路由时，默认跳转到新增消耗页面
-// if (route.name === 'coinRefund') {
-//   router.push({ name: 'addCoinRefund' });
-// }
+// 初始化逻辑
+onMounted(() => {
+  if (route.name === 'coinRefund') {
+    const defaultRoute = getDefaultRoute();
+    navigateTo(defaultRoute);
+  } else {
+    // 非父路由初始化当前标签状态
+    if (route.name === 'add' || route.name === 'detail') {
+      activeTab.value = route.name;
+    }
+  }
+});
 </script>
--- a/src/views/usergold/clientCount.vue
+++ b/src/views/usergold/clientCount.vue
@ -5,57 +5,97 @@
      <!-- 切换后状态显示 primary 样式否则是默认样式 -->
      <el-button
          :type="activeTab === 'detail' ? 'primary' : 'default'"
-          @click="goToDetail"
+          @click="goToAdd"
      >
        金币明细
      </el-button>
      <el-button
          :type="activeTab === 'balance' ? 'primary' : 'default'"
-          @click="goToBalance"
+          @click="goToDetail"
      >
        金币余额
      </el-button>
    </el-button-group>
-
    <!-- 渲染子路由组件 -->
    <router-view></router-view>
  </div>
 </template>

 <script setup>
-import { ref, watch } from 'vue';
+import {onMounted, ref, watch} from 'vue';
 import { useRouter, useRoute } from 'vue-router';
+import {useAdminStore} from "@/store/index.js";
+import {storeToRefs} from "pinia";
+
+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 goToDetail = () => {
-  // 点击按钮时更新 activeTab 为 detail
+const goToAdd = () => {
+  // 点击按钮时更新 activeTab 为 add
  activeTab.value = 'detail';
  router.push({ name: 'clientCountDetail' });
 };

-const goToBalance = () => {
-  // 点击按钮时更新 activeTab 为balance
+const goToDetail = () => {
+  // 点击按钮时更新 activeTab 为 detail
  activeTab.value = 'balance';
  router.push({ name: 'clientCountBalance' });
 };

-// 监听路由变化，更新 activeTab
+// 导航方法
+const navigateTo = (name) => {
+  activeTab.value = name;
+  if (name === 'detail') {
+    router.push({name: 'clientCountDetail'});
+  } else if (name === 'balance') {
+    router.push({name: 'clientCountBalance'});
+  }
+};
+
+
+// 递归判断某个 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;
+};
+
+// 默认路由判断
+const getDefaultRoute = () => {
+  if (!menuTree.value) return 'detail';
+  const hasRecharge = hasMenuPermission(menuTree.value, '查看金币明细');
+  return hasRecharge ? 'detail' : 'balance';
+};
+
+
+// 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
-  if (newName === 'clientCountDetail') {
-    activeTab.value = 'detail';
-  } else if (newName === 'clientCountBalance') {
-    activeTab.value = 'balance';
-  }});
+  if (newName === 'detail' || newName === 'balance') {
+    activeTab.value = newName;
+  } else if (newName === 'usergold') {
+    const defaultRoute = getDefaultRoute();
+    navigateTo(defaultRoute);
+  }
+});

-// 当进入父路由时，默认跳转到金币明细页面
-// if (route.name === 'usergold') {
-//   router.push({ name: 'clientCountDetail' });
-// }
+// 初始化逻辑
+onMounted(() => {
+  if (route.name === 'usergold') {
+    const defaultRoute = getDefaultRoute();
+    navigateTo(defaultRoute);
+  } else {
+    // 非父路由初始化当前标签状态
+    if (route.name === 'detail' || route.name === 'balance') {
+      activeTab.value = route.name;
+    }
+  }
+});
 </script>