From c4a048f9c871ed2bafe233c0d888fe31f1ce2b09 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 28 Oct 2025 19:19:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E9=A1=B5=E9=9D=A2):=20BD?=
 =?UTF-8?q?=E9=98=9F=E9=95=BF=E4=B8=AD=E5=BF=83=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                |   6 +
 src/utils/permissionManager.js     |  12 +-
 src/views/BDCenterView.vue         |  34 +-
 src/views/BDLeaderCenter/index.vue | 817 +++++++++++++++++++++++++++++
 4 files changed, 851 insertions(+), 18 deletions(-)
 create mode 100644 src/views/BDLeaderCenter/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 7d36fb8..42341fd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -281,6 +281,12 @@ const router = createRouter({
       component: () => import('../views/BDCenter/incomeDetails.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/bd-leader-center',
+      name: 'bd-leader-center',
+      component: () => import('../views/BDLeaderCenter/index.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index 60faa83..4234f84 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -11,12 +11,14 @@ export const USER_ROLES = {
   ANCHOR: 'anchor',
   GUEST: 'guest',
   ADMIN: 'admin',
+  BDLEADER: 'bdLeader', // BD Leader
 }
 
 // 页面路径常量
 export const PAGES = {
   COIN_SELLER: '/coin-seller',
   AGENCY_CENTER: '/agency-center',
+  BD_LEADER_CENTER: '/bd-leader-center',
   BD_CENTER: '/bd-center',
   HOST_CENTER: '/host-center',
   APPLY: '/apply',
@@ -78,6 +80,9 @@ export const ROLE_PERMISSIONS = {
     '/income-details', //操作结果页
   ],
 
+  // BD Leader (商务拓展领导)
+  [USER_ROLES.BDLEADER]: [...[USER_ROLES.BD], PAGES.BD_LEADER_CENTER],
+
   // Anchor (主播)
   [USER_ROLES.ANCHOR]: [
     PAGES.HOST_CENTER, // 主页面
@@ -133,8 +138,9 @@ export const ROLE_PERMISSIONS = {
 
 // 身份优先级（数字越大优先级越高）
 export const ROLE_PRIORITY = {
-  [USER_ROLES.ADMIN]: 5,
-  [USER_ROLES.FREIGHT_AGENT]: 4,
+  [USER_ROLES.ADMIN]: 6,
+  [USER_ROLES.FREIGHT_AGENT]: 5,
+  [USER_ROLES.BDLEADER]: 4,
   [USER_ROLES.BD]: 3,
   [USER_ROLES.AGENT]: 2,
   [USER_ROLES.ANCHOR]: 1,
@@ -146,6 +152,7 @@ export const ROLE_DEFAULT_PAGES = {
   [USER_ROLES.ADMIN]: PAGES.ADMIN_CENTER,
   [USER_ROLES.FREIGHT_AGENT]: PAGES.COIN_SELLER,
   [USER_ROLES.AGENT]: PAGES.AGENCY_CENTER,
+  [USER_ROLES.BDLEADER]: PAGES.BD_LEADER_CENTER,
   [USER_ROLES.BD]: PAGES.BD_CENTER,
   [USER_ROLES.ANCHOR]: PAGES.HOST_CENTER,
   [USER_ROLES.GUEST]: PAGES.APPLY,
@@ -227,6 +234,7 @@ class RoleBasedPermissionManager {
     const roles = []
     if (identity.freightAgent) roles.push(USER_ROLES.FREIGHT_AGENT)
     if (identity.agent) roles.push(USER_ROLES.AGENT)
+    if (identity.bdLeader) roles.push(USER_ROLES.BDLEADER)
     if (identity.bd) roles.push(USER_ROLES.BD)
     if (identity.anchor) roles.push(USER_ROLES.ANCHOR)
     if (identity.admin) roles.push(USER_ROLES.ADMIN)
diff --git a/src/views/BDCenterView.vue b/src/views/BDCenterView.vue
index cf8060e..98c169f 100644
--- a/src/views/BDCenterView.vue
+++ b/src/views/BDCenterView.vue
@@ -139,9 +139,11 @@
             @click="showHistory = true"
           />
         </div>
-        <div style="font-size: 0.7em; font-weight: 600">
+        <div style="font-size: 0.8em; font-weight: 600">
           Team total recharge: $400 Team total salary: $400
         </div>
+
+        <!-- 成员列表 -->
         <div
           v-for="value in 3"
           style="
@@ -238,9 +240,9 @@
             "
           >
             <div>
-              <div style="display: grid; gap: 10px">
-                <div class="text-700">Total income:$1000</div>
-                <div class="text-700">Previous period income:$1000</div>
+              <div style="display: grid; gap: 4px">
+                <div style="font-size: 0.9em; font-weight: 600">Total income:$1000</div>
+                <div style="font-size: 0.9em; font-weight: 600">Previous period income:$1000</div>
               </div>
             </div>
           </div>
@@ -260,24 +262,24 @@
               <historySalary type="In Progress" long="true">
                 <template v-slot:content>
                   <div>2025.10.16-2025.10.31:</div>
-                  <div>Number of teams: 5</div>
-                  <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
-                    <div>Team salary: $400</div>
-                    <div>BD income (salary): $12 (3%)</div>
+                  <div style="font-size: 0.9em">Number of teams: 5</div>
+                  <div style="display: flex; justify-content: space-between">
+                    <div style="font-size: 0.9em">Team salary: $400</div>
+                    <div style="font-size: 0.9em">BD income (salary): $12 (3%)</div>
                   </div>
-                  <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
-                    <div>Team salary: $400</div>
-                    <div>BD income (salary): $12 (3%)</div>
+                  <div style="display: flex; justify-content: space-between">
+                    <div style="font-size: 0.9em">Team salary: $400</div>
+                    <div style="font-size: 0.9em">BD income (salary): $12 (3%)</div>
                   </div>
                 </template>
               </historySalary>
               <historySalary type="Completed" v-for="value in 5" @showMore="showReportDetail()">
                 <template v-slot:content>
                   <div>2025.10.16-2025.10.31:</div>
-                  <div>Number Of Teams: 5</div>
-                  <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
-                    <div>Number Of Teams: 5</div>
-                    <div>BD income (salary): $60 (6%)</div>
+                  <div style="font-size: 0.9em">Number Of Teams: 5</div>
+                  <div style="display: flex; justify-content: space-between">
+                    <div style="font-size: 0.9em">Number Of Teams: 5</div>
+                    <div style="font-size: 0.9em">BD income (salary): $60 (6%)</div>
                   </div>
                 </template>
               </historySalary>
@@ -514,7 +516,7 @@ onMounted(() => {
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 16px;
+    font-size: 12px;
   }
 }
 
diff --git a/src/views/BDLeaderCenter/index.vue b/src/views/BDLeaderCenter/index.vue
new file mode 100644
index 0000000..0753b95
--- /dev/null
+++ b/src/views/BDLeaderCenter/index.vue
@@ -0,0 +1,817 @@
+<template>
+  <div class="bd-center gradient-background-circles">
+    <!-- 顶部导航 -->
+    <MobileHeader title="BD Leader Center" :isHomePage="true" />
+
+    <!-- 主要内容 -->
+    <div
+      style="
+        padding: 16px;
+        position: relative;
+        z-index: 2;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      "
+    >
+      <!-- 用户信息卡片 -->
+      <div
+        style="
+          background-color: white;
+          padding: 16px;
+          border-radius: 12px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        "
+      >
+        <!-- APP连接状态指示 -->
+        <div v-if="isInApp() && !appConnected" class="app-status connecting">
+          <div class="status-indicator"></div>
+          <span>正在连接APP...</span>
+        </div>
+
+        <div style="display: flex; align-items: center">
+          <div
+            style="
+              width: 40px;
+              height: 40px;
+              border-radius: 50%;
+              background-color: #8b5cf6;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: white;
+              font-size: 20px;
+              font-weight: 600;
+              margin-right: 12px;
+              overflow: hidden;
+              position: relative;
+            "
+          >
+            <img
+              v-if="userInfo.userAvatar"
+              style="width: 100%; height: 100%; object-fit: cover; border-radius: 25px"
+              :src="userInfo.userAvatar"
+              :alt="userInfo.name"
+              @error="handleImageError"
+            />
+            <span v-else style="color: white; font-size: 20px; font-weight: 600">{{
+              getAvatarPlaceholder()
+            }}</span>
+          </div>
+          <div style="flex: 1">
+            <h3 style="margin: 0 0 4px 0; font-weight: 600; color: #333">
+              {{ userInfo.userNickname || userInfo.name || 'User1' }}
+            </h3>
+            <p style="margin: 0; font-size: 0.9em; color: #666">
+              ID: {{ userInfo.id || userInfo.account || '1234567890' }}
+            </p>
+          </div>
+          <div style="display: flex; align-items: center">
+            <img src="../../assets/icon/info.png" alt="" style="display: block; width: 20px" />
+          </div>
+        </div>
+
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 10px;
+          "
+          @click="gotoIncome"
+        >
+          <span style="font-weight: 600; color: #1f2937"> Available income: $1000 </span>
+          <img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
+        </div>
+      </div>
+
+      <!-- 邀请按钮 -->
+      <div style="display: flex; flex-direction: column; gap: 8px">
+        <div
+          style="
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            padding: 16px;
+            cursor: pointer;
+            transition: all 0.2s;
+            border: 1px solid #e5e7eb;
+          "
+          @click="goToInviteAgency"
+        >
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <span style="font-weight: 600; color: #1f2937"> Invite User To Become Agency</span>
+            <img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
+          </div>
+        </div>
+
+        <div
+          style="
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            padding: 16px;
+            cursor: pointer;
+            transition: all 0.2s;
+            border: 1px solid #e5e7eb;
+          "
+          @click="goToInviteBD"
+        >
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <span style="font-weight: 600; color: #1f2937"> Invite User To Become BD</span>
+            <img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
+          </div>
+        </div>
+      </div>
+
+      <!-- 标签页 -->
+      <div
+        style="
+          background-color: white;
+          border-radius: 12px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+          padding: 16px;
+        "
+      >
+        <!-- 标签按钮 -->
+        <div style="display: flex; position: relative; margin-bottom: 16px">
+          <button
+            v-for="tab in tabs"
+            :key="tab.id"
+            @click="switchTab(tab.id)"
+            :style="{
+              flex: 1,
+              padding: '8px 16px',
+              background: 'transparent',
+              border: 'none',
+              fontWeight: '600',
+              fontSize: '14px',
+              color: activeTab === tab.id ? '#8B5CF6' : 'rgba(0, 0, 0, 0.6)',
+              cursor: 'pointer',
+              transition: 'all 0.3s',
+              position: 'relative',
+            }"
+          >
+            {{ tab.name }}
+          </button>
+          <!-- 移动下划线 -->
+          <div
+            :style="{
+              position: 'absolute',
+              bottom: '0',
+              height: '2px',
+              background: '#8B5CF6',
+              transition: 'all 0.3s ease',
+              width: `${100 / tabs.length}%`,
+              left: `${(activeTab - 1) * (100 / tabs.length)}%`,
+            }"
+          ></div>
+        </div>
+
+        <!-- BD 标签内容 -->
+        <div v-if="activeTab === 1">
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <div style="font-weight: 600">2025.10.01-2025.10.15:</div>
+            <img
+              src="../../assets/icon/records.png"
+              alt=""
+              style="display: block; width: 1.3em"
+              @click="records('bd')"
+            />
+          </div>
+          <div style="font-size: 0.8em; font-weight: 600; margin-bottom: 12px">
+            Team total recharge: $400 Team total salary: $400
+          </div>
+
+          <!-- 成员列表 -->
+          <div style="display: flex; flex-direction: column; gap: 12px">
+            <div
+              v-for="member in bdMembers"
+              :key="member.id"
+              style="
+                background-color: white;
+                padding: 16px;
+                border-radius: 12px;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              "
+            >
+              <!-- 用户信息 -->
+              <div
+                style="
+                  position: relative;
+                  width: 2em;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                "
+              >
+                <img
+                  :src="member.avatar"
+                  alt=""
+                  style="
+                    display: block;
+                    width: 100%;
+                    aspect-ratio: 1/1;
+                    border-radius: 50%;
+                    object-fit: cover;
+                  "
+                  @error="defaultAvatarUrl"
+                />
+              </div>
+              <div style="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
+                <div
+                  style="
+                    font-weight: 700;
+                    width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  "
+                >
+                  {{ member.name }}
+                </div>
+                <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+                  ID: {{ member.id }}
+                </div>
+              </div>
+              <div
+                style="
+                  width: 40%;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-around;
+                "
+              >
+                <div style="font-size: 0.8em; font-weight: 500">Salary: ${{ member.salary }}</div>
+                <div style="font-size: 0.8em; font-weight: 500">
+                  Recharge: ${{ member.recharge }}
+                </div>
+                <div style="font-size: 0.8em; font-weight: 500">Host: {{ member.host }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- BD Leader 标签内容 -->
+        <div v-if="activeTab === 2">
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <div style="font-weight: 600">2025.10.01-2025.10.15:</div>
+            <img
+              src="../../assets/icon/records.png"
+              alt=""
+              style="display: block; width: 1.3em"
+              @click="records('bdLeader')"
+            />
+          </div>
+          <div style="font-size: 0.8em; font-weight: 600; margin-bottom: 12px">
+            Team total recharge: $400 Team total salary: $400
+          </div>
+
+          <!-- 团队成员列表 -->
+          <div style="display: flex; flex-direction: column; gap: 12px">
+            <div
+              v-for="member in bdLeaderMembers"
+              :key="member.id"
+              style="
+                background-color: white;
+                padding: 16px;
+                border-radius: 12px;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              "
+            >
+              <!-- 用户信息 -->
+              <div
+                style="
+                  position: relative;
+                  width: 2em;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                "
+              >
+                <img
+                  :src="member.avatar"
+                  alt=""
+                  style="
+                    display: block;
+                    width: 100%;
+                    aspect-ratio: 1/1;
+                    border-radius: 50%;
+                    object-fit: cover;
+                  "
+                  @error="defaultAvatarUrl"
+                />
+              </div>
+              <div style="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
+                <div
+                  style="
+                    font-weight: 700;
+                    width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  "
+                >
+                  {{ member.name }}
+                </div>
+                <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+                  ID: {{ member.id }}
+                </div>
+              </div>
+              <div
+                style="
+                  width: 40%;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-around;
+                "
+              >
+                <div style="font-size: 0.8em; font-weight: 500">
+                  Team Salary: ${{ member.salary }}
+                </div>
+                <div style="font-size: 0.8em; font-weight: 500">
+                  Agencies: {{ member.agencies }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 遮罩层 -->
+    <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+      <div style="position: fixed; bottom: 0; width: 100%">
+        <!-- 历史收入 - 使用相同组件，根据类型显示不同内容 -->
+        <div
+          v-if="showHistory"
+          style="
+            background: white;
+            border-radius: 16px 16px 0 0;
+            max-height: 80vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            padding: 20px;
+          "
+          @click.stop
+        >
+          <div style="display: flex; justify-content: center; align-items: center">
+            <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">
+              {{ currentHistoryType === 'bd' ? 'BD Salary' : 'BD Leader History' }}
+            </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">Total income: $1000</div>
+                <div style="font-size: 0.9em; font-weight: 600">Previous period income: $1000</div>
+              </div>
+            </div>
+          </div>
+
+          <div style="overflow-y: auto" class="salaryList">
+            <!-- 薪资列表 -->
+            <div style="display: flex; flex-direction: column; gap: 8px">
+              <!-- BD 历史记录 -->
+              <template v-if="currentHistoryType === 'bd'">
+                <historySalary type="In Progress" long="true">
+                  <template v-slot:content>
+                    <div>2025.10.16-2025.10.31:</div>
+                    <div style="font-size: 0.9em">Number of teams: 5</div>
+                    <div style="display: flex; justify-content: space-between">
+                      <div style="font-size: 0.9em">Team salary: $400</div>
+                      <div style="font-size: 0.9em">BD income (salary): $12 (3%)</div>
+                    </div>
+                    <div style="display: flex; justify-content: space-between">
+                      <div style="font-size: 0.9em">Team salary: $400</div>
+                      <div style="font-size: 0.9em">BD income (salary): $12 (3%)</div>
+                    </div>
+                  </template>
+                </historySalary>
+                <historySalary type="Completed" v-for="value in 5" @showMore="showReportDetail()">
+                  <template v-slot:content>
+                    <div>2025.10.16-2025.10.31:</div>
+                    <div style="font-size: 0.9em">Number Of Teams: 5</div>
+                    <div style="display: flex; justify-content: space-between">
+                      <div style="font-size: 0.9em">Number Of Teams: 5</div>
+                      <div style="font-size: 0.9em">BD income (salary): $60 (6%)</div>
+                    </div>
+                  </template>
+                </historySalary>
+              </template>
+
+              <!-- BD Leader 历史记录 -->
+              <template v-else-if="currentHistoryType === 'bdLeader'">
+                <!-- 进行中的记录 -->
+                <historySalary type="In Progress">
+                  <template v-slot:content>
+                    <div>2025.10.16-2025.10.31:</div>
+                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
+                      <div>Number Of BDs: 5</div>
+                      <div>Team Salary: $400</div>
+                    </div>
+                  </template>
+                </historySalary>
+
+                <!-- 已完成的记录 -->
+                <historySalary
+                  type="Completed"
+                  v-for="record in bdLeaderHistory"
+                  :key="record.id"
+                  @showMore="showReportDetail()"
+                >
+                  <template v-slot:content>
+                    <div>{{ record.period }}:</div>
+                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
+                      <div>Number Of Teams: {{ record.teamCount }}</div>
+                      <div>Team Top-Up: ${{ record.topUp }}</div>
+                    </div>
+                  </template>
+                </historySalary>
+                <historySalary
+                  type="Completed"
+                  v-for="record in bdLeaderHistory"
+                  :key="record.id"
+                  @showMore="showReportDetail()"
+                >
+                  <template v-slot:content>
+                    <div>{{ record.period }}:</div>
+                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
+                      <div>Number Of Teams: {{ record.teamCount }}</div>
+                      <div>Team Top-Up: ${{ record.topUp }}</div>
+                    </div>
+                  </template>
+                </historySalary>
+                <historySalary
+                  type="Completed"
+                  v-for="record in bdLeaderHistory"
+                  :key="record.id"
+                  @showMore="showReportDetail()"
+                >
+                  <template v-slot:content>
+                    <div>{{ record.period }}:</div>
+                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
+                      <div>Number Of Teams: {{ record.teamCount }}</div>
+                      <div>Team Top-Up: ${{ record.topUp }}</div>
+                    </div>
+                  </template>
+                </historySalary>
+              </template>
+            </div>
+          </div>
+        </div>
+
+        <!-- more -->
+        <div v-if="showMore">
+          <!-- 收入详情 -->
+          <div
+            v-if="currentHistoryType === 'bd'"
+            style="
+              background: white;
+              border-radius: 16px 16px 0 0;
+              max-height: 60vh;
+              overflow: hidden;
+              display: flex;
+              flex-direction: column;
+              gap: 10px;
+              padding: 20px;
+            "
+            @click.stop
+          >
+            <div style="font-weight: 600">2025.10.01-2025.10.15:</div>
+            <div style="font-size: 0.7em; font-weight: 600">
+              Team total recharge: $400 Team total salary: $400
+            </div>
+            <div
+              v-for="value in 3"
+              style="
+                background-color: white;
+                padding: 16px;
+                border-radius: 12px;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              "
+            >
+              <!-- 用户信息 -->
+              <div
+                style="
+                  position: relative;
+                  width: 2em;
+                  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="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
+                <div
+                  style="
+                    font-weight: 700;
+                    width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  "
+                >
+                  aaaaa
+                </div>
+                <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+                  ID: 321654
+                </div>
+              </div>
+              <div
+                style="
+                  width: 40%;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-around;
+                "
+              >
+                <div style="font-size: 0.8em; font-weight: 500">Salary: $100</div>
+                <div style="font-size: 0.8em; font-weight: 500">Recharge: $500</div>
+                <div style="font-size: 0.8em; font-weight: 500">Host:8</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 团队收入详情 -->
+          <div
+            v-if="currentHistoryType === 'bdLeader'"
+            style="
+              background: white;
+              border-radius: 16px 16px 0 0;
+              max-height: 60vh;
+              overflow: hidden;
+              display: flex;
+              flex-direction: column;
+              gap: 10px;
+              padding: 20px;
+            "
+            @click.stop
+          >
+            <div style="font-weight: 600">2025.10.01-2025.10.15:</div>
+            <div style="font-size: 0.7em; font-weight: 600">Team Salary: $400 BD number:400</div>
+            <div
+              v-for="value in 3"
+              style="
+                background-color: white;
+                padding: 16px;
+                border-radius: 12px;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              "
+            >
+              <!-- 用户信息 -->
+              <div
+                style="
+                  position: relative;
+                  width: 2em;
+                  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="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
+                <div
+                  style="
+                    font-weight: 700;
+                    width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  "
+                >
+                  aaaaa
+                </div>
+                <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+                  ID: 321654
+                </div>
+              </div>
+              <div
+                style="
+                  width: 40%;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-around;
+                "
+              >
+                <div style="font-size: 0.8em; font-weight: 500">Salary: $100</div>
+                <div style="font-size: 0.8em; font-weight: 500">Agencies:8</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </maskLayer>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import MobileHeader from '@/components/MobileHeader.vue'
+import { isInApp } from '@/utils/appBridge.js'
+import maskLayer from '@/components/MaskLayer.vue'
+import { clearSelectedPayee } from '@/utils/payeeStore.js'
+import historySalary from '@/components/historySalary.vue'
+
+const router = useRouter()
+
+// 标签页数据
+const tabs = ref([
+  { id: 1, name: 'BD' },
+  { id: 2, name: 'BD Leader' },
+])
+
+const activeTab = ref(1)
+const showHistory = ref(false)
+const showMore = ref(false)
+const selectedRecord = ref(null)
+const currentHistoryType = ref('bd') // 'bd' 或 'bdLeader'
+
+// BD Leader 历史记录数据
+const bdLeaderHistory = ref([
+  { id: 1, period: '2025.10.01-2025.10.15', teamCount: 5, topUp: 500 },
+  { id: 2, period: '2025.10.01-2025.10.15', teamCount: 5, topUp: 1000 },
+])
+
+// 遮罩层显示状态
+const maskLayerShow = computed(() => {
+  return showHistory.value || showMore.value
+})
+
+// BD 成员数据
+const bdMembers = ref([
+  { id: '1234567890', name: 'User1', salary: 100, recharge: 500, host: 8, avatar: '' },
+  { id: '1234567891', name: 'User2', salary: 100, recharge: 500, host: 8, avatar: '' },
+  { id: '1234567892', name: 'User3', salary: 100, recharge: 500, host: 8, avatar: '' },
+])
+
+// BD Leader 成员数据
+const bdLeaderMembers = ref([
+  { id: '1234567890', name: 'Leader1', salary: 200, agencies: 12, avatar: '' },
+  { id: '1234567891', name: 'Leader2', salary: 180, agencies: 10, avatar: '' },
+  { id: '1234567892', name: 'Leader3', salary: 150, agencies: 9, avatar: '' },
+])
+
+// 用户信息
+const userInfo = ref({
+  userNickname: 'User1',
+  id: '1234567890',
+  userAvatar: '',
+})
+
+const records = (historyType) => {
+  showHistory.value = true
+  currentHistoryType.value = historyType
+}
+
+const appConnected = ref(true)
+
+// 切换标签页
+const switchTab = (tabId) => {
+  activeTab.value = tabId
+}
+
+// 显示报告详情
+const showReportDetail = (record) => {
+  selectedRecord.value = record
+  showHistory.value = false
+  showMore.value = true
+}
+
+// 关闭弹窗
+const closedPopup = () => {
+  showHistory.value = false
+  showMore.value = false
+  selectedRecord.value = null
+  currentHistoryType.value = 'bd'
+}
+
+// 默认头像处理
+
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+
+// 前往收入页面
+const gotoIncome = () => {
+  router.push('/available-income')
+}
+
+// 前往邀请代理
+const goToInviteAgency = () => {
+  router.push('/invite-agency')
+}
+
+// 前往邀请BD
+const goToInviteBD = () => {
+  router.push('/invite-bd')
+}
+
+// 图片错误处理
+const handleImageError = (e) => {
+  e.target.style.display = 'none'
+}
+
+// 获取头像占位符
+const getAvatarPlaceholder = () => {
+  return userInfo.value.userNickname ? userInfo.value.userNickname.charAt(0).toUpperCase() : 'U'
+}
+
+onMounted(() => {
+  clearSelectedPayee()
+})
+</script>
+
+<style scoped>
+/* 保持原有的样式不变 */
+
+.salaryList::-webkit-scrollbar {
+  display: none;
+}
+
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+  font-weight: 700;
+}
+
+.contentTime {
+  font-size: 1.1em;
+}
+
+.contentText {
+  font-size: 1em;
+}
+
+.moreBt {
+  font-size: 1em;
+}
+
+@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;
+  }
+}
+</style>