From b890191be9972deaa427b53252e9e90c83216dae Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 25 Nov 2025 16:48:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E9=A1=B5=E9=9D=A2):=20=E6=88=91?=
 =?UTF-8?q?=E7=9A=84=E4=BB=A3=E7=90=86=E5=9B=A2=E9=98=9F=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                     |   6 +
 src/utils/permissionManager.js          |   1 +
 src/utils/routeGuard.js                 |   1 +
 src/views/AdminCenter/MyAgencyTeams.vue | 449 ++++++++++++++++++++++++
 4 files changed, 457 insertions(+)
 create mode 100644 src/views/AdminCenter/MyAgencyTeams.vue

diff --git a/src/router/index.js b/src/router/index.js
index 1927bd2..1026100 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -329,6 +329,12 @@ const router = createRouter({
       component: () => import('../views/AdminCenter/MyBDTeams.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/my-agency-teams',
+      name: 'my-agency-teams',
+      component: () => import('../views/AdminCenter/MyAgencyTeams.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index 8193ae1..a8d99ef 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -148,6 +148,7 @@ export const ROLE_PERMISSIONS = {
     '/bank-card', //选择银行卡
     '/my-BDLeader-teams', //我的BDLeader团队页面（临时开放）
     '/my-BD-teams', //我的BD团队页面（临时开放）
+    '/my-agency-teams', //我的代理团队页面（临时开放）
   ],
 
   // 加载页面
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index 20a53e4..87ac7e9 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -428,6 +428,7 @@ class RouteGuard {
       '/bank-card', //选择银行卡
       '/my-BDLeader-teams', //我的BDLeader团队页面（临时开放）
       '/my-BD-teams', //我的BD团队页面（临时开放）
+      '/my-agency-teams', //我的代理团队页面（临时开放）
     ]
     return publicPages.includes(path)
   }
diff --git a/src/views/AdminCenter/MyAgencyTeams.vue b/src/views/AdminCenter/MyAgencyTeams.vue
new file mode 100644
index 0000000..b1231ba
--- /dev/null
+++ b/src/views/AdminCenter/MyAgencyTeams.vue
@@ -0,0 +1,449 @@
+<template>
+  <div class="fullPage gradient-background-circles">
+    <!-- 顶部导航 -->
+    <GeneralHeader
+      :showLanguageList="true"
+      title="My Agency Teams"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
+
+    <!-- 主要内容 -->
+    <div
+      style="
+        padding: 16px;
+        position: relative;
+        z-index: 2;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      "
+    >
+      <!-- 总收入信息 -->
+      <div
+        style="
+          background-color: white;
+          border-radius: 12px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+          padding: 16px;
+          border: 1px solid #e5e7eb;
+
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+        "
+      >
+        <div style="display: flex; align-items: flex-end">
+          <div style="font-weight: 600; font-size: 0.9em">Total income:</div>
+          <div style="font-weight: 700">$1000</div>
+        </div>
+        <div style="display: flex; align-items: flex-end">
+          <div style="font-weight: 600; font-size: 0.9em">Previous period income:</div>
+          <div style="font-weight: 700">$1000</div>
+        </div>
+      </div>
+
+      <!-- Agency团队收入信息 -->
+      <div
+        style="
+          background-color: white;
+          border-radius: 12px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+          padding: 16px;
+          border: 1px solid #e5e7eb;
+
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+        "
+      >
+        <!-- 团队信息 -->
+        <div style="font-weight: 700">Agencies: 3</div>
+        <div style="font-size: 0.9em; font-weight: 600">Team Total Income: $900</div>
+
+        <!-- Agency成员列表 -->
+        <div
+          v-for="AgencyInfo in 3"
+          style="
+            position: relative;
+
+            background-color: white;
+            padding: 14px 10px;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            gap: 4px;
+          "
+        >
+          <!-- 头像 -->
+          <div
+            style="
+              width: 15%;
+              align-self: stretch;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            "
+          >
+            <img
+              :src="''"
+              alt=""
+              style="
+                display: block;
+                width: 100%;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+                object-fit: cover;
+              "
+              @error="defaultAvatarUrl"
+            />
+          </div>
+
+          <!-- 基本信息 -->
+          <div
+            style="
+              flex: 1;
+              min-width: 0;
+              align-self: stretch;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              gap: 4px;
+            "
+          >
+            <div
+              style="
+                font-weight: 700;
+                width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              "
+            >
+              User1
+            </div>
+            <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+              ID:1234567890
+            </div>
+          </div>
+
+          <!-- 收入信息 -->
+          <div
+            style="
+              width: auto;
+              min-width: 0;
+              align-self: stretch;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+            "
+          >
+            <div style="font-size: 0.8em; font-weight: 500; text-align: end">
+              Number Of Hosts Personnel:10
+            </div>
+            <div style="font-size: 0.8em; font-weight: 500; text-align: end">Total Income:$300</div>
+          </div>
+
+          <!-- 更多按钮 -->
+          <div
+            style="
+              font-size: 0.8em;
+
+              position: absolute;
+              bottom: 4%;
+              right: 4%;
+              color: #bb92ff;
+              font-weight: 500;
+            "
+            @click="incomeShow('1')"
+          >
+            {{ t('more') }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 遮罩层 -->
+    <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+      <div style="position: fixed; bottom: 0; width: 100%">
+        <!-- 某个Agency的收益 -->
+        <div
+          v-if="showIncome"
+          style="
+            background: white;
+            border-radius: 16px 16px 0 0;
+            max-height: 80vh;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            padding: 10px 12px 30px;
+          "
+          class="overflow-y-auto"
+          @click.stop
+        >
+          <div style="display: flex; justify-content: center; align-items: center">
+            <div style="margin: 0; font-weight: 600; color: #333">Agency's lD:1234567890</div>
+          </div>
+
+          <!-- 总体信息 -->
+          <div
+            style="
+              box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+              border-radius: 8px;
+              padding: 12px;
+              margin: 0 4px;
+            "
+          >
+            <div>
+              <div style="display: grid; gap: 4px">
+                <div style="font-size: 0.9em; font-weight: 600">{{ t('total_income') }}: $0</div>
+                <div style="font-size: 0.9em; font-weight: 600">
+                  {{ t('previous_period_income') }}: $0
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div style="font-weight: 600">Income Details:</div>
+
+          <!-- 历史薪资列表 -->
+          <div style="overflow-y: auto" class="salaryList">
+            <div style="display: flex; flex-direction: column; gap: 8px">
+              <!-- 进行中 -->
+              <historySalary type="In Progress" @showMore="historyShow('2')">
+                <template v-slot:content>
+                  <div>2025.10.01-2025.10.15:</div>
+
+                  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
+                    <div>Host: 10</div>
+                    <!-- 团队收入 -->
+                    <div>Team Income:$300</div>
+                  </div>
+                </template>
+              </historySalary>
+
+              <!-- 已完成 -->
+              <historySalary type="Completed" @showMore="historyShow('2')">
+                <template v-slot:content>
+                  <div>2025.10.01-2025.10.15:</div>
+                  <div>Host: 10</div>
+                  <!-- 团队收入 -->
+                  <div>Team top-up: $500</div>
+                </template>
+              </historySalary>
+            </div>
+          </div>
+        </div>
+
+        <!-- 某个时期的Host收益详情 -->
+        <div
+          v-if="showHistory"
+          style="
+            background: white;
+            border-radius: 16px 16px 0 0;
+            max-height: 60vh;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            padding: 10px 12px 30px;
+          "
+          class="overflow-y-auto"
+          @click.stop
+        >
+          <div style="font-weight: 600">2025.10.01-2025.10.15:</div>
+          <div style="display: flex; justify-content: space-between">
+            <div style="font-size: 0.8em; font-weight: 600">Host：5</div>
+            <div style="font-size: 0.8em; font-weight: 600">Team Total income: $1000</div>
+          </div>
+
+          <!-- Host列表 -->
+          <div
+            v-for="member in 2"
+            style="
+              background-color: white;
+              padding: 14px 10px;
+              border-radius: 12px;
+              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              gap: 4px;
+            "
+          >
+            <!-- 头像 -->
+            <div
+              style="
+                width: 15%;
+                align-self: stretch;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              "
+            >
+              <img
+                :src="''"
+                alt=""
+                style="
+                  display: block;
+                  width: 100%;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                  object-fit: cover;
+                "
+                @error="defaultAvatarUrl"
+              />
+            </div>
+
+            <!-- 基本信息 -->
+            <div
+              style="
+                flex: 1;
+                min-width: 0;
+                align-self: stretch;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                gap: 4px;
+              "
+            >
+              <div
+                style="
+                  font-weight: 700;
+                  width: 100%;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                "
+              >
+                User1
+              </div>
+              <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+                ID:1234567890
+              </div>
+            </div>
+
+            <!-- 收入信息 -->
+            <div
+              style="
+                width: auto;
+                min-width: 0;
+                align-self: stretch;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+              "
+            >
+              <div style="font-size: 0.8em; font-weight: 500">Host income:</div>
+              <div style="font-size: 0.8em; font-weight: 500">$0</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </maskLayer>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { setDocumentDirection } from '@/locales/i18n'
+
+import GeneralHeader from '@/components/GeneralHeader.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
+const showIncome = ref(false)
+const showHistory = ref(false)
+// 遮罩层显示状态
+const maskLayerShow = computed(() => showIncome.value || showHistory.value)
+
+const incomeShow = (targetId) => {
+  console.log('点击了收入按钮')
+  console.log('targetId:', targetId)
+
+  showIncome.value = true
+}
+
+const historyShow = (targetId) => {
+  console.log('点击了历史薪资按钮')
+  console.log('targetId:', targetId)
+
+  showIncome.value = false
+  showHistory.value = true
+}
+
+// 关闭弹窗
+const closedPopup = () => {
+  showIncome.value = false
+  showHistory.value = false
+}
+
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
+.fullPage {
+  max-height: 100vh;
+  overflow-y: auto;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  background-color: #ffffff;
+  background-image: url(../../assets/images/secondBg.png);
+}
+
+.fullPage::-webkit-scrollbar {
+  display: none;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-y-auto::-webkit-scrollbar {
+  display: none;
+}
+
+.salaryList::-webkit-scrollbar {
+  display: none;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>