Selaa lähdekoodia

优化路由守卫逻辑,增强用户认证流程,确保用户信息完整性并根据角色加载团队数据。同时在团队视图中新增团队信息展示,提升用户体验。

wuyi 3 kuukautta sitten
vanhempi
commit
b10ff6db21
3 muutettua tiedostoa jossa 62 lisäystä ja 23 poistoa
  1. 30 19
      src/router/index.js
  2. 0 2
      src/stores/team.js
  3. 32 2
      src/views/TeamView.vue

+ 30 - 19
src/router/index.js

@@ -88,32 +88,43 @@ router.beforeEach(async (to, from, next) => {
   const teamStore = useTeamStore()
 
   if (to.meta.requiresAuth) {
-    if (userStore.token && userStore.userInfo.id && userStore.userInfo.role) {
-      if (userStore.userInfo.role === 'admin') {
+    const loadTeamData = async () => {
+      if (["admin", "team"].includes(userStore.userInfo.role)) {
         await teamStore.loadTeams()
       }
-      next()
-    } else if (userStore.token) {
-      try {
+    }
+
+    const redirectToLogin = (error) => {
+      if (error) {
+        console.error('认证失败:', error)
+      }
+      userStore.logout()
+      next('/login')
+    }
+
+    try {
+      if (userStore.token && userStore.userInfo?.id && userStore.userInfo?.role) {
+        await loadTeamData()
+        next()
+        return
+      }
+
+      if (userStore.token) {
         await userStore.sync()
-        // 确保用户信息完整后再继续
-        if (userStore.userInfo.id && userStore.userInfo.role) {
-          if (userStore.userInfo.role === 'admin') {
-            await teamStore.loadTeams()
-          }
+
+        if (userStore.userInfo?.id && userStore.userInfo?.role) {
+          await loadTeamData()
           next()
+          return
         } else {
-          // 用户信息不完整,清除token并重定向到登录页
-          userStore.logout()
-          next('/login')
+          // 用户信息不完整
+          redirectToLogin()
+          return
         }
-      } catch (error) {
-        console.error('同步用户信息失败:', error)
-        userStore.logout()
-        next('/login')
       }
-    } else {
-      next('/login')
+      redirectToLogin()
+    } catch (error) {
+      redirectToLogin(error)
     }
   } else if (to.path === '/login' && userStore.token) {
     next('/')

+ 0 - 2
src/stores/team.js

@@ -11,11 +11,9 @@ export const useTeamStore = defineStore('team', () => {
 
     const loadTeams = async () => {
         const userStore = useUserStore()
-
         if (!userStore.userInfo) {
             return
         }
-
         const userRole = userStore.userInfo.role
 
         try {

+ 32 - 2
src/views/TeamView.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="rounded-lg p-4 bg-[var(--p-content-background)]">
     <DataTable
+      v-if="isAdmin"
       :value="tableData.content"
       :paginator="true"
       paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown JumpToPageInput"
@@ -116,6 +117,31 @@
       </Column>
     </DataTable>
 
+    <div v-else-if="isTeam && teamData" class="flex flex-col items-center justify-center py-4">
+      <div class="w-full max-w-xl p-10">
+        <div class="text-2xl font-extrabold mb-2 text-center text-blue-700 tracking-wide">我的团队信息</div>
+        <div class="border-b border-gray-200 mb-6"></div>
+        <div class="grid grid-cols-2 gap-y-6 gap-x-4">
+          <div class="flex flex-col items-start">
+            <span class="text-gray-500 text-base font-medium mb-1">团队名称</span>
+            <span class="text-lg font-bold text-gray-900">{{ teamData.name }}</span>
+          </div>
+          <div class="flex flex-col items-start">
+            <span class="text-gray-500 text-base font-medium mb-1">佣金比例</span>
+            <span class="text-lg font-bold text-purple-700">{{ teamData.commissionRate }}%</span>
+          </div>
+          <div class="flex flex-col items-start">
+            <span class="text-gray-500 text-base font-medium mb-1">总营收</span>
+            <span class="text-2xl font-extrabold text-blue-600">¥{{ formatAmount(teamData.totalRevenue) }}</span>
+          </div>
+          <div class="flex flex-col items-start">
+            <span class="text-gray-500 text-base font-medium mb-1">今日营收</span>
+            <span class="text-2xl font-extrabold text-green-600">¥{{ formatAmount(teamData.todayRevenue) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- 新增/编辑弹窗 -->
     <Dialog
       v-model:visible="editDialog"
@@ -181,8 +207,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { useDateFormat } from '@vueuse/core'
+import { ref, onMounted, inject, computed } from 'vue'
 import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
@@ -197,6 +222,9 @@ import { listTeams, createTeam, updateTeam, deleteTeam } from '@/services/api'
 const toast = useToast()
 const confirm = useConfirm()
 
+const isAdmin = inject('isAdmin')
+const isTeam = inject('isTeam')
+
 // 表格数据
 const tableData = ref({
   content: [],
@@ -434,6 +462,8 @@ const saveEdit = async () => {
 onMounted(() => {
   fetchData()
 })
+
+const teamData = computed(() => tableData.value?.content?.[0] || null)
 </script>
 
 <style scoped>