feat(管理员页面以及相关页面): 对接接口

2025-11-27 21:39:42 +08:00 · 2025-11-27 21:39:42 +08:00 · ab67279587
commit ab67279587
parent b6d3c38fd5
8 changed files with 737 additions and 165 deletions
--- a/src/api/admin.js
+++ b/src/api/admin.js
@ -71,3 +71,27 @@ export const cancelInvite = async (userId) => {
    throw error
  }
 }
+
+//查询BD团队概览
+export const apiGetTeamOverview = async (data) => {
+  try {
+    const response = await post('/bd/team/overview', data)
+    return response
+  } catch (error) {
+    console.error('Failed to get team overview:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 查询BD团队成员详情（More弹框）
+export const apiGetTeamMemberDetail = async (data) => {
+  try {
+    const response = await post('/bd/team/member/detail', data)
+    return response
+  } catch (error) {
+    console.error('Failed to get team member detail:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
--- a/src/views/Activities/Yemen/IndependenceDay/index.vue
+++ b/src/views/Activities/Yemen/IndependenceDay/index.vue
@ -271,26 +271,29 @@
                    @error="(e) => handleImageError(e, reward.type)"
                  />
                </itemCenter>
-                <div
-                  style="
-                    text-align: center;
-                    font-size: 1.2em;
-                    font-weight: 900;
-                    font-style: italic;
-                    background: linear-gradient(
-                      90deg,
-                      #fff677 6.36%,
-                      #d39f1e 26%,
-                      #fff891 49.56%,
-                      #ffc93e 70.51%,
-                      #ffc 93.64%
-                    );
-                    background-clip: text;
-                    -webkit-background-clip: text;
-                    -webkit-text-fill-color: transparent;
-                  "
-                >
-                  {{ showDetail(reward.type, reward) }}
+                <div class="valueBg" style="position: relative">
+                  <div
+                    style="
+                      text-align: center;
+                      font-size: 1.2em;
+                      font-weight: 900;
+                      font-style: italic;
+                      background: linear-gradient(
+                        90deg,
+                        #fff677 6.36%,
+                        #d39f1e 26%,
+                        #fff891 49.56%,
+                        #ffc93e 70.51%,
+                        #ffc 93.64%
+                      );
+
+                      background-clip: text;
+                      -webkit-background-clip: text;
+                      -webkit-text-fill-color: transparent;
+                    "
+                  >
+                    {{ showDetail(reward.type, reward) }}
+                  </div>
                </div>
              </div>
            </itemCenter>
@ -587,6 +590,13 @@ onUnmounted(() => {
  z-index: 1;
 }

+.valueBg {
+  background-image: url(../../../../assets/images/Activities/Yemen/IndependenceDay/valueBg.png);
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
 .timeText {
  color: #fff;
  font-weight: 590;
--- a/src/views/AdminCenter/MyAgencyTeams.vue
+++ b/src/views/AdminCenter/MyAgencyTeams.vue
@ -36,11 +36,11 @@
      >
        <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 style="font-weight: 700">${{ TeamOverview?.totalIncome || 0 }}</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 style="font-weight: 700">${{ TeamOverview?.previousPeriodIncome || 0 }}</div>
        </div>
      </div>

@ -60,12 +60,14 @@
        "
      >
        <!-- 团队信息 -->
-        <div style="font-weight: 700">Agencies: 3</div>
-        <div style="font-size: 0.9em; font-weight: 600">Team Total Income: $900</div>
+        <div style="font-weight: 700">Agencies: {{ TeamOverview?.memberCount || 0 }}</div>
+        <div style="font-size: 0.9em; font-weight: 600">
+          Team Total Income: ${{ TeamOverview?.teamTotalIncome || 0 }}
+        </div>

        <!-- Agency成员列表 -->
        <div
-          v-for="AgencyInfo in 3"
+          v-for="AgencyInfo in TeamOverview?.members"
          style="
            position: relative;

@ -90,7 +92,7 @@
            "
          >
            <img
-              :src="''"
+              :src="AgencyInfo.avatar || ''"
              alt=""
              style="
                display: block;
@ -124,10 +126,10 @@
                white-space: nowrap;
              "
            >
-              User1
+              {{ AgencyInfo.userName || '-' }}
            </div>
            <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
-              ID:1234567890
+              ID:{{ AgencyInfo.account || '-' }}
            </div>
          </div>

@ -143,9 +145,11 @@
            "
          >
            <div style="font-size: 0.8em; font-weight: 500; text-align: end">
-              Number Of Hosts Personnel:10
+              Number Of Hosts Personnel: {{ AgencyInfo?.subMemberCount || 0 }}
+            </div>
+            <div style="font-size: 0.8em; font-weight: 500; text-align: end">
+              Total Income: ${{ AgencyInfo?.totalIncome || 0 }}
            </div>
-            <div style="font-size: 0.8em; font-weight: 500; text-align: end">Total Income:$300</div>
          </div>

          <!-- 更多按钮 -->
@ -159,7 +163,7 @@
              color: #bb92ff;
              font-weight: 500;
            "
-            @click="incomeShow('1')"
+            @click="incomeShow(AgencyInfo.userId)"
          >
            {{ t('more') }}
          </div>
@ -186,7 +190,9 @@
          @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 style="margin: 0; font-weight: 600; color: #333">
+              Agency's lD: {{ moreUserId }}
+            </div>
          </div>

          <!-- 总体信息 -->
@ -200,9 +206,11 @@
          >
            <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
+                  {{ t('total_income') }}: ${{ moreDetail?.totalIncome || 0 }}
+                </div>
+                <div style="font-size: 0.9em; font-weight: 600">
+                  {{ t('previous_period_income') }}: ${{ moreDetail?.previousPeriodIncome || 0 }}
                </div>
              </div>
            </div>
@ -212,27 +220,38 @@

          <!-- 历史薪资列表 -->
          <div style="overflow-y: auto" class="salaryList">
-            <div style="display: flex; flex-direction: column; gap: 8px">
+            <div
+              style="display: flex; flex-direction: column; gap: 8px"
+              v-for="incomeInfo in moreDetail?.incomeDetails"
+            >
              <!-- 进行中 -->
-              <historySalary type="In Progress" @showMore="historyShow('2')">
+              <historySalary
+                v-if="incomeInfo.status === 'In Progress'"
+                type="In Progress"
+                @showMore="historyShow(incomeInfo)"
+              >
                <template v-slot:content>
-                  <div>2025.10.01-2025.10.15:</div>
+                  <div>{{ incomeInfo.settlementPeriod }}</div>

                  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
-                    <div>Host: 10</div>
+                    <div>Host: {{ incomeInfo.memberCount }}</div>
                    <!-- 团队收入 -->
-                    <div>Team Income:$300</div>
+                    <div>Team total Income: ${{ incomeInfo.teamTotalIncome }}</div>
                  </div>
                </template>
              </historySalary>

              <!-- 已完成 -->
-              <historySalary type="Completed" @showMore="historyShow('2')">
+              <historySalary
+                v-if="incomeInfo.status === 'Completed'"
+                type="Completed"
+                @showMore="historyShow(incomeInfo)"
+              >
                <template v-slot:content>
-                  <div>2025.10.01-2025.10.15:</div>
-                  <div>Host: 10</div>
+                  <div>{{ incomeInfo.settlementPeriod }}</div>
+                  <div>Host: {{ incomeInfo.memberCount }}</div>
                  <!-- 团队收入 -->
-                  <div>Team top-up: $500</div>
+                  <div>Team total income: ${{ incomeInfo.teamTotalIncome }}</div>
                </template>
              </historySalary>
            </div>
@ -254,15 +273,19 @@
          class="overflow-y-auto"
          @click.stop
        >
-          <div style="font-weight: 600">2025.10.01-2025.10.15:</div>
+          <div style="font-weight: 600">{{ incomeDetailsItem.settlementPeriod }}</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 style="font-size: 0.8em; font-weight: 600">
+              Host：{{ incomeDetailsItem.memberCount }}
+            </div>
+            <div style="font-size: 0.8em; font-weight: 600">
+              Team Total income: ${{ incomeDetailsItem.teamTotalIncome }}
+            </div>
          </div>

          <!-- Host列表 -->
          <div
-            v-for="member in 2"
+            v-for="member in incomeDetailsItem.members"
            style="
              background-color: white;
              padding: 14px 10px;
@ -285,7 +308,7 @@
              "
            >
              <img
-                :src="''"
+                :src="member.avatar || ''"
                alt=""
                style="
                  display: block;
@ -319,10 +342,10 @@
                  white-space: nowrap;
                "
              >
-                User1
+                {{ member.userName }}
              </div>
              <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
-                ID:1234567890
+                ID:{{ member.account }}
              </div>
            </div>

@ -338,7 +361,7 @@
              "
            >
              <div style="font-size: 0.8em; font-weight: 500">Host income:</div>
-              <div style="font-size: 0.8em; font-weight: 500">$0</div>
+              <div style="font-size: 0.8em; font-weight: 500">${{ member.income }}</div>
            </div>
          </div>
        </div>
@ -352,14 +375,25 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { setDocumentDirection } from '@/locales/i18n'

+import {
+  apiGetTeamOverview, //查询BD团队概览
+  apiGetTeamMemberDetail, // 查询BD团队成员详情（More弹框）
+} from '@/api/admin.js'
+
 import GeneralHeader from '@/components/GeneralHeader.vue'
 import maskLayer from '@/components/MaskLayer.vue'
+import historySalary from './components/historySalary.vue'

 const { t, locale } = useI18n()

 // 监听语言变化并设置文档方向
 locale.value && setDocumentDirection(locale.value)

+const TeamOverview = ref(null) //团队概览
+const moreUserId = ref('') //选中的成员id
+const moreDetail = ref(null) //某个成员的详情
+const incomeDetailsItem = ref(null) //某个时期的收益详情
+
 const showIncome = ref(false)
 const showHistory = ref(false)
 // 遮罩层显示状态
@ -368,13 +402,16 @@ const maskLayerShow = computed(() => showIncome.value || showHistory.value)
 const incomeShow = (targetId) => {
  console.log('点击了收入按钮')
  console.log('targetId:', targetId)
+  moreUserId.value = targetId
+  getTeamMemberDetail(targetId)

  showIncome.value = true
 }

-const historyShow = (targetId) => {
+const historyShow = (incomeInfo) => {
  console.log('点击了历史薪资按钮')
-  console.log('targetId:', targetId)
+  console.log('incomeInfo:', incomeInfo)
+  incomeDetailsItem.value = incomeInfo

  showIncome.value = false
  showHistory.value = true
@ -384,6 +421,9 @@ const historyShow = (targetId) => {
 const closedPopup = () => {
  showIncome.value = false
  showHistory.value = false
+  moreUserId.value = ''
+  moreDetail.value = null
+  incomeDetailsItem.value = null
 }

 const defaultAvatarUrl = (e) => {
@ -391,6 +431,40 @@ const defaultAvatarUrl = (e) => {
  e.target.onerror = null //防止循环
  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
 }
+
+// 获取任务列表
+const getTeamOverview = async () => {
+  let data = {
+    type: 'AGENCY',
+  }
+  const resInvitedList = await apiGetTeamOverview(data)
+  console.log('任务列表:', resInvitedList)
+  if (resInvitedList.status && resInvitedList.body) {
+    TeamOverview.value = resInvitedList.body
+  }
+}
+
+// 查询AGENCY团队成员详情（More弹框）
+const getTeamMemberDetail = async (userId) => {
+  let data = {
+    targetId: userId,
+    type: 'AGENCY',
+  }
+  const resInvitedList = await apiGetTeamMemberDetail(data)
+  console.log('任务列表:', resInvitedList)
+  if (resInvitedList.status && resInvitedList.body) {
+    moreDetail.value = resInvitedList.body
+  }
+}
+
+// 初始化数据
+const init = () => {
+  getTeamOverview()
+}
+
+onMounted(() => {
+  init()
+})
 </script>

 <style lang="scss" scoped>
--- a/src/views/AdminCenter/MyBDLeaderTeams.vue
+++ b/src/views/AdminCenter/MyBDLeaderTeams.vue
@ -36,11 +36,11 @@
      >
        <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 style="font-weight: 700">${{ TeamOverview?.totalIncome || 0 }}</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 style="font-weight: 700">${{ TeamOverview?.previousPeriodIncome || 0 }}</div>
        </div>
      </div>

@ -60,12 +60,14 @@
        "
      >
        <!-- 团队信息 -->
-        <div style="font-weight: 700">BD Leaders:3</div>
-        <div style="font-size: 0.9em; font-weight: 600">Team Total Income: $900</div>
+        <div style="font-weight: 700">BD Leaders: {{ TeamOverview?.memberCount || 0 }}</div>
+        <div style="font-size: 0.9em; font-weight: 600">
+          Team Total Income: ${{ TeamOverview?.teamTotalIncome || 0 }}
+        </div>

        <!-- BDLeader成员列表 -->
        <div
-          v-for="BDInfo in 3"
+          v-for="BDLeaderInfo in TeamOverview?.members"
          style="
            position: relative;

@ -90,7 +92,7 @@
            "
          >
            <img
-              :src="''"
+              :src="BDLeaderInfo.avatar || ''"
              alt=""
              style="
                display: block;
@ -124,10 +126,10 @@
                white-space: nowrap;
              "
            >
-              User1
+              {{ BDLeaderInfo.userName || '-' }}
            </div>
            <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
-              ID:1234567890
+              ID:{{ BDLeaderInfo.account || '-' }}
            </div>
          </div>

@ -143,9 +145,11 @@
            "
          >
            <div style="font-size: 0.8em; font-weight: 500; text-align: end">
-              Number Of BD Personnel:10
+              Number Of BD Personnel: {{ BDLeaderInfo?.subMemberCount || 0 }}
+            </div>
+            <div style="font-size: 0.8em; font-weight: 500; text-align: end">
+              Total Income: ${{ BDLeaderInfo?.totalIncome || 0 }}
            </div>
-            <div style="font-size: 0.8em; font-weight: 500; text-align: end">Total Income:$300</div>
          </div>

          <!-- 更多按钮 -->
@ -159,7 +163,7 @@
              color: #bb92ff;
              font-weight: 500;
            "
-            @click="incomeShow('1')"
+            @click="incomeShow(BDLeaderInfo.userId)"
          >
            {{ t('more') }}
          </div>
@ -186,7 +190,9 @@
          @click.stop
        >
          <div style="display: flex; justify-content: center; align-items: center">
-            <div style="margin: 0; font-weight: 600; color: #333">BD Leader's lD:1234567890</div>
+            <div style="margin: 0; font-weight: 600; color: #333">
+              BD Leader's lD: {{ moreUserId }}
+            </div>
          </div>

          <!-- 总体信息 -->
@ -200,9 +206,11 @@
          >
            <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
+                  {{ t('total_income') }}: ${{ moreDetail?.totalIncome || 0 }}
+                </div>
+                <div style="font-size: 0.9em; font-weight: 600">
+                  {{ t('previous_period_income') }}: ${{ moreDetail?.previousPeriodIncome || 0 }}
                </div>
              </div>
            </div>
@ -212,27 +220,38 @@

          <!-- 历史薪资列表 -->
          <div style="overflow-y: auto" class="salaryList">
-            <div style="display: flex; flex-direction: column; gap: 8px">
+            <div
+              style="display: flex; flex-direction: column; gap: 8px"
+              v-for="incomeInfo in moreDetail?.incomeDetails"
+            >
              <!-- 进行中 -->
-              <historySalary type="In Progress" @showMore="historyShow('2')">
+              <historySalary
+                v-if="incomeInfo.status === 'In Progress'"
+                type="In Progress"
+                @showMore="historyShow(incomeInfo)"
+              >
                <template v-slot:content>
-                  <div>2025.10.01-2025.10.15:</div>
+                  <div>{{ incomeInfo.settlementPeriod }}</div>

                  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
-                    <div>Agency: 10</div>
+                    <div>Agency: {{ incomeInfo.memberCount }}</div>
                    <!-- 团队收入 -->
-                    <div>Team Income:$300</div>
+                    <div>Team total Income: ${{ incomeInfo.teamTotalIncome }}</div>
                  </div>
                </template>
              </historySalary>

              <!-- 已完成 -->
-              <historySalary type="Completed" @showMore="historyShow('2')">
+              <historySalary
+                v-if="incomeInfo.status === 'Completed'"
+                type="Completed"
+                @showMore="historyShow(incomeInfo)"
+              >
                <template v-slot:content>
-                  <div>2025.10.01-2025.10.15:</div>
-                  <div>{{ t('num_teams') }}0</div>
+                  <div>{{ incomeInfo.settlementPeriod }}</div>
+                  <div>Agency: {{ incomeInfo.memberCount }}</div>
                  <!-- 团队收入 -->
-                  <div>Team income:$1000</div>
+                  <div>Team total income:${{ incomeInfo.teamTotalIncome }}</div>
                </template>
              </historySalary>
            </div>
@ -254,17 +273,19 @@
          class="overflow-y-auto"
          @click.stop
        >
-          <div style="display: flex; justify-content: center; align-items: center">
-            <div style="font-weight: 600">2025.10.01-2025.10.15:</div>
-          </div>
+          <div style="font-weight: 600">{{ incomeDetailsItem.settlementPeriod }}</div>
          <div style="display: flex; justify-content: space-between">
-            <div style="font-size: 0.8em; font-weight: 600">Agency :5</div>
-            <div style="font-size: 0.8em; font-weight: 600">Team Total income: $1000</div>
+            <div style="font-size: 0.8em; font-weight: 600">
+              Agency: {{ incomeDetailsItem.memberCount }}
+            </div>
+            <div style="font-size: 0.8em; font-weight: 600">
+              Team Total income: ${{ incomeDetailsItem.teamTotalIncome }}
+            </div>
          </div>

          <!-- BD列表 -->
          <div
-            v-for="member in 2"
+            v-for="member in incomeDetailsItem.members"
            style="
              background-color: white;
              padding: 14px 10px;
@ -287,7 +308,7 @@
              "
            >
              <img
-                :src="''"
+                :src="member.avatar || ''"
                alt=""
                style="
                  display: block;
@ -321,10 +342,10 @@
                  white-space: nowrap;
                "
              >
-                User1
+                {{ member.userName }}
              </div>
              <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
-                ID:1234567890
+                ID:{{ member.account }}
              </div>
            </div>

@ -340,7 +361,7 @@
              "
            >
              <div style="font-size: 0.8em; font-weight: 500">BD Income:</div>
-              <div style="font-size: 0.8em; font-weight: 500">$0</div>
+              <div style="font-size: 0.8em; font-weight: 500">${{ member.income }}</div>
            </div>
          </div>
        </div>
@ -354,14 +375,25 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { setDocumentDirection } from '@/locales/i18n'

+import {
+  apiGetTeamOverview, //查询BD团队概览
+  apiGetTeamMemberDetail, // 查询BD团队成员详情（More弹框）
+} from '@/api/admin.js'
+
 import GeneralHeader from '@/components/GeneralHeader.vue'
 import maskLayer from '@/components/MaskLayer.vue'
+import historySalary from './components/historySalary.vue'

 const { t, locale } = useI18n()

 // 监听语言变化并设置文档方向
 locale.value && setDocumentDirection(locale.value)

+const TeamOverview = ref(null) //团队概览
+const moreUserId = ref('') //选中的成员id
+const moreDetail = ref(null) //某个成员的详情
+const incomeDetailsItem = ref(null) //某个时期的收益详情
+
 const showIncome = ref(false)
 const showHistory = ref(false)
 // 遮罩层显示状态
@ -370,13 +402,16 @@ const maskLayerShow = computed(() => showIncome.value || showHistory.value)
 const incomeShow = (targetId) => {
  console.log('点击了收入按钮')
  console.log('targetId:', targetId)
+  moreUserId.value = targetId
+  getTeamMemberDetail(targetId)

  showIncome.value = true
 }

-const historyShow = (targetId) => {
+const historyShow = (incomeInfo) => {
  console.log('点击了历史薪资按钮')
-  console.log('targetId:', targetId)
+  console.log('incomeInfo:', incomeInfo)
+  incomeDetailsItem.value = incomeInfo

  showIncome.value = false
  showHistory.value = true
@ -386,6 +421,9 @@ const historyShow = (targetId) => {
 const closedPopup = () => {
  showIncome.value = false
  showHistory.value = false
+  moreUserId.value = ''
+  moreDetail.value = null
+  incomeDetailsItem.value = null
 }

 const defaultAvatarUrl = (e) => {
@ -393,6 +431,40 @@ const defaultAvatarUrl = (e) => {
  e.target.onerror = null //防止循环
  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
 }
+
+// 获取任务列表
+const getTeamOverview = async () => {
+  let data = {
+    type: 'BD_LEADER',
+  }
+  const resInvitedList = await apiGetTeamOverview(data)
+  console.log('任务列表:', resInvitedList)
+  if (resInvitedList.status && resInvitedList.body) {
+    TeamOverview.value = resInvitedList.body
+  }
+}
+
+// 查询BD团队成员详情（More弹框）
+const getTeamMemberDetail = async (userId) => {
+  let data = {
+    targetId: userId,
+    type: 'BD',
+  }
+  const resInvitedList = await apiGetTeamMemberDetail(data)
+  console.log('任务列表:', resInvitedList)
+  if (resInvitedList.status && resInvitedList.body) {
+    moreDetail.value = resInvitedList.body
+  }
+}
+
+// 初始化数据
+const init = () => {
+  getTeamOverview()
+}
+
+onMounted(() => {
+  init()
+})
 </script>

 <style lang="scss" scoped>
--- a/src/views/AdminCenter/MyBDTeams.vue
+++ b/src/views/AdminCenter/MyBDTeams.vue
@ -36,11 +36,11 @@
      >
        <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 style="font-weight: 700">${{ TeamOverview?.totalIncome || 0 }}</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 style="font-weight: 700">${{ TeamOverview?.previousPeriodIncome || 0 }}</div>
        </div>
      </div>

@ -60,12 +60,14 @@
        "
      >
        <!-- 团队信息 -->
-        <div style="font-weight: 700">BDs:3</div>
-        <div style="font-size: 0.9em; font-weight: 600">Team Total Income: $900</div>
+        <div style="font-weight: 700">BDs:{{ TeamOverview?.memberCount || 0 }}</div>
+        <div style="font-size: 0.9em; font-weight: 600">
+          Team Total Income: ${{ TeamOverview?.teamTotalIncome || 0 }}
+        </div>

        <!-- BD成员列表 -->
        <div
-          v-for="BDInfo in 3"
+          v-for="BDInfo in TeamOverview?.members"
          style="
            position: relative;

@ -90,7 +92,7 @@
            "
          >
            <img
-              :src="''"
+              :src="BDInfo.avatar || ''"
              alt=""
              style="
                display: block;
@ -124,10 +126,10 @@
                white-space: nowrap;
              "
            >
-              User1
+              {{ BDInfo.userName || '-' }}
            </div>
            <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
-              ID:1234567890
+              ID:{{ BDInfo.account || '-' }}
            </div>
          </div>

@ -143,9 +145,11 @@
            "
          >
            <div style="font-size: 0.8em; font-weight: 500; text-align: end">
-              Number Of Agencies Personnel:10
+              Number Of Agencies Personnel: {{ BDInfo?.subMemberCount || 0 }}
+            </div>
+            <div style="font-size: 0.8em; font-weight: 500; text-align: end">
+              Total Income: ${{ BDInfo?.totalIncome || 0 }}
            </div>
-            <div style="font-size: 0.8em; font-weight: 500; text-align: end">Total Income:$300</div>
          </div>

          <!-- 更多按钮 -->
@ -159,7 +163,7 @@
              color: #bb92ff;
              font-weight: 500;
            "
-            @click="incomeShow('1')"
+            @click="incomeShow(BDInfo.userId)"
          >
            {{ t('more') }}
          </div>
@ -186,7 +190,7 @@
          @click.stop
        >
          <div style="display: flex; justify-content: center; align-items: center">
-            <div style="margin: 0; font-weight: 600; color: #333">BD's lD:1234567890</div>
+            <div style="margin: 0; font-weight: 600; color: #333">BD's lD: {{ moreUserId }}</div>
          </div>

          <!-- 总体信息 -->
@ -200,9 +204,11 @@
          >
            <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
+                  {{ t('total_income') }}: ${{ moreDetail?.totalIncome || 0 }}
+                </div>
+                <div style="font-size: 0.9em; font-weight: 600">
+                  {{ t('previous_period_income') }}: ${{ moreDetail?.previousPeriodIncome || 0 }}
                </div>
              </div>
            </div>
@ -212,27 +218,38 @@

          <!-- 历史薪资列表 -->
          <div style="overflow-y: auto" class="salaryList">
-            <div style="display: flex; flex-direction: column; gap: 8px">
+            <div
+              style="display: flex; flex-direction: column; gap: 8px"
+              v-for="incomeInfo in moreDetail?.incomeDetails"
+            >
              <!-- 进行中 -->
-              <historySalary type="In Progress" @showMore="historyShow('2')">
+              <historySalary
+                v-if="incomeInfo.status === 'In Progress'"
+                type="In Progress"
+                @showMore="historyShow(incomeInfo)"
+              >
                <template v-slot:content>
-                  <div>2025.10.01-2025.10.15:</div>
+                  <div>{{ incomeInfo.settlementPeriod }}</div>

                  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
-                    <div>Agency: 10</div>
+                    <div>Agency: {{ incomeInfo.memberCount }}</div>
                    <!-- 团队收入 -->
-                    <div>Team Income:$300</div>
+                    <div>Team total Income: ${{ incomeInfo.teamTotalIncome }}</div>
                  </div>
                </template>
              </historySalary>

              <!-- 已完成 -->
-              <historySalary type="Completed" @showMore="historyShow('2')">
+              <historySalary
+                v-if="incomeInfo.status === 'Completed'"
+                type="Completed"
+                @showMore="historyShow(incomeInfo)"
+              >
                <template v-slot:content>
-                  <div>2025.10.01-2025.10.15:</div>
-                  <div>{{ t('num_teams') }}0</div>
+                  <div>{{ incomeInfo.settlementPeriod }}</div>
+                  <div>Agency: {{ incomeInfo.memberCount }}</div>
                  <!-- 团队收入 -->
-                  <div>Team Income:$1000</div>
+                  <div>Team total Income: ${{ incomeInfo.teamTotalIncome }}</div>
                </template>
              </historySalary>
            </div>
@ -254,15 +271,19 @@
          class="overflow-y-auto"
          @click.stop
        >
-          <div style="font-weight: 600">2025.10.01-2025.10.15:</div>
+          <div style="font-weight: 600">{{ incomeDetailsItem.settlementPeriod }}</div>
          <div style="display: flex; justify-content: space-between">
-            <div style="font-size: 0.8em; font-weight: 600">Agency :5</div>
-            <div style="font-size: 0.8em; font-weight: 600">Team Total income: $1000</div>
+            <div style="font-size: 0.8em; font-weight: 600">
+              Agency: {{ incomeDetailsItem.memberCount }}
+            </div>
+            <div style="font-size: 0.8em; font-weight: 600">
+              Team Total income: ${{ incomeDetailsItem.teamTotalIncome }}
+            </div>
          </div>

          <!-- BD列表 -->
          <div
-            v-for="member in 2"
+            v-for="member in incomeDetailsItem.members"
            style="
              background-color: white;
              padding: 14px 10px;
@ -285,7 +306,7 @@
              "
            >
              <img
-                :src="''"
+                :src="member.avatar || ''"
                alt=""
                style="
                  display: block;
@ -319,10 +340,10 @@
                  white-space: nowrap;
                "
              >
-                User1
+                {{ member.userName }}
              </div>
              <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
-                ID:1234567890
+                ID:{{ member.account }}
              </div>
            </div>

@ -338,7 +359,7 @@
              "
            >
              <div style="font-size: 0.8em; font-weight: 500">Agency Team Income :</div>
-              <div style="font-size: 0.8em; font-weight: 500">$0</div>
+              <div style="font-size: 0.8em; font-weight: 500">${{ member.income }}</div>
            </div>
          </div>
        </div>
@ -352,14 +373,25 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { setDocumentDirection } from '@/locales/i18n'

+import {
+  apiGetTeamOverview, //查询BD团队概览
+  apiGetTeamMemberDetail, // 查询BD团队成员详情（More弹框）
+} from '@/api/admin.js'
+
 import GeneralHeader from '@/components/GeneralHeader.vue'
 import maskLayer from '@/components/MaskLayer.vue'
+import historySalary from './components/historySalary.vue'

 const { t, locale } = useI18n()

 // 监听语言变化并设置文档方向
 locale.value && setDocumentDirection(locale.value)

+const TeamOverview = ref(null) //团队概览
+const moreUserId = ref('') //选中的成员id
+const moreDetail = ref(null) //某个成员的详情
+const incomeDetailsItem = ref(null) //某个时期的收益详情
+
 const showIncome = ref(false)
 const showHistory = ref(false)
 // 遮罩层显示状态
@ -368,13 +400,16 @@ const maskLayerShow = computed(() => showIncome.value || showHistory.value)
 const incomeShow = (targetId) => {
  console.log('点击了收入按钮')
  console.log('targetId:', targetId)
+  moreUserId.value = targetId
+  getTeamMemberDetail(targetId)

  showIncome.value = true
 }

-const historyShow = (targetId) => {
+const historyShow = (incomeInfo) => {
  console.log('点击了历史薪资按钮')
-  console.log('targetId:', targetId)
+  console.log('incomeInfo:', incomeInfo)
+  incomeDetailsItem.value = incomeInfo

  showIncome.value = false
  showHistory.value = true
@ -384,6 +419,9 @@ const historyShow = (targetId) => {
 const closedPopup = () => {
  showIncome.value = false
  showHistory.value = false
+  moreUserId.value = ''
+  moreDetail.value = null
+  incomeDetailsItem.value = null
 }

 const defaultAvatarUrl = (e) => {
@ -391,6 +429,40 @@ const defaultAvatarUrl = (e) => {
  e.target.onerror = null //防止循环
  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
 }
+
+// 获取任务列表
+const getTeamOverview = async () => {
+  let data = {
+    type: 'BD',
+  }
+  const resInvitedList = await apiGetTeamOverview(data)
+  console.log('任务列表:', resInvitedList)
+  if (resInvitedList.status && resInvitedList.body) {
+    TeamOverview.value = resInvitedList.body
+  }
+}
+
+// 查询BD团队成员详情（More弹框）
+const getTeamMemberDetail = async (userId) => {
+  let data = {
+    targetId: userId,
+    type: 'BD',
+  }
+  const resInvitedList = await apiGetTeamMemberDetail(data)
+  console.log('任务列表:', resInvitedList)
+  if (resInvitedList.status && resInvitedList.body) {
+    moreDetail.value = resInvitedList.body
+  }
+}
+
+// 初始化数据
+const init = () => {
+  getTeamOverview()
+}
+
+onMounted(() => {
+  init()
+})
 </script>

 <style lang="scss" scoped>
--- a/src/views/AdminCenter/MyRechargeAgency.vue
+++ b/src/views/AdminCenter/MyRechargeAgency.vue
@ -3,7 +3,7 @@
    <div class="bg">
      <!-- 顶部导航 -->
      <GeneralHeader
-        title="Recharae Agency"
+        title="My linked recharge agent"
        :backImg="imgUrl"
        color="black"
        style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
@ -12,7 +12,7 @@
      <!-- 主要内容 -->
      <div
        style="
-          padding: 16px;
+          padding: 12px;

          display: flex;
          flex-direction: column;
@ -26,22 +26,26 @@
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

-            padding: 16px;
+            padding: 12px;
            border: 1px solid #e5e7eb;
          "
        >
-          <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
-            Total recharge for the month:
+          <div style="font: 0.8em; font-weight: 500; color: rgba(0, 0, 0, 0.4)">
+            My total income:
          </div>
-          <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+          <div style="font: 0.9em; font-weight: 600; color: rgba(0, 0, 0, 0.8)">
            ${{ totalRechargeDetail[0]?.totalAmount || 0 }}
          </div>
-          <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge last month:</div>
-          <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+          <div style="font: 0.8em; font-weight: 500; color: rgba(0, 0, 0, 0.4)">
+            This period's recharge:
+          </div>
+          <div style="font: 0.9em; font-weight: 600; color: rgba(0, 0, 0, 0.8)">
            ${{ totalRechargeDetail[1]?.totalAmount || 0 }}
          </div>
        </div>

+        <div style="font-weight: 700">Recharge Agency List:</div>
+
        <div
          v-for="(agency, aIndex) in agencyList"
          :key="aIndex"
@ -50,7 +54,7 @@
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

-            padding: 16px;
+            padding: 12px;
            border: 1px solid #e5e7eb;

            margin-bottom: 10px;
@ -58,18 +62,64 @@
          "
          @click="showAgencyInfo(aIndex)"
        >
-          <!-- 基本信息 -->
-          <div style="display: flex; justify-content: space-between">
-            <div style="display: flex; align-items: center">
-              <img :src="agency.userAvatar" alt="" style="width: 36px; border-radius: 50%" />
-              <div style="margin-left: 8px">
-                <div style="font-weight: 700">{{ agency.name }}</div>
+          <div style="width: 100%; display: flex; justify-content: space-between">
+            <!-- 基本信息 -->
+            <div
+              style="
+                flex: 1;
+                min-width: 0;
+                align-self: stretch;
+
+                display: flex;
+                align-items: center;
+
+                gap: 4px;
+              "
+            >
+              <img
+                :src="agency.userAvatar"
+                alt=""
+                style="display: block; object-fit: cover; width: 3em; border-radius: 50%"
+              />
+              <div
+                style="
+                  flex: 1;
+                  min-width: 0;
+
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-around;
+                  gap: 4px;
+                "
+              >
+                <div
+                  style="
+                    font-weight: 700;
+
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  "
+                >
+                  {{ agency.userNickname }}
+                </div>
                <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
                  ID:{{ agency.account }}
                </div>
              </div>
            </div>
-            <div style="display: flex; align-items: center">
+
+            <!-- 展开按钮 -->
+            <div
+              style="
+                width: auto;
+                min-width: 0;
+                align-self: stretch;
+
+                display: flex;
+                align-items: center;
+              "
+            >
              <img
                src="../../assets/icon/arrow.png"
                alt=""
@ -240,4 +290,28 @@ const formatPrice = (value) => {
 .rotated {
  transform: rotate(90deg);
 }
+
+@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>
--- a/src/views/AdminCenter/components/historySalary.vue
+++ b/src/views/AdminCenter/components/historySalary.vue
@ -0,0 +1,172 @@
+<template>
+  <div style="position: relative; width: 100%">
+    <img :src="bgUrl" alt="" width="100%" style="display: block" class="flipImg" />
+    <div class="status">
+      <div
+        style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
+      >
+        <div style="color: #fff; font-weight: 600" :style="{ fontSize }">
+          {{ getTypeText(type) }}
+        </div>
+      </div>
+    </div>
+    <div style="position: absolute; inset: 0; padding: 3% 4%">
+      <div
+        style="height: 100%; display: flex; flex-direction: column; justify-content: space-around"
+      >
+        <slot name="content"></slot>
+      </div>
+      <div class="moreBt" @click="btMore">{{ t('more') }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { setDocumentDirection } from '@/locales/i18n'
+
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
+const progress = new URL('@/assets/images/BDCenter/progress.png', import.meta.url).href
+const completed = new URL('@/assets/images/BDCenter/completed.png', import.meta.url).href
+const progressLong = new URL('@/assets/images/BDCenter/progressLong.png', import.meta.url).href
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: '',
+  },
+
+  long: {
+    type: Boolean,
+    default: false,
+  },
+
+  date: {
+    type: String,
+    default: '',
+  },
+})
+
+const bgUrl = computed(() => {
+  if (props.type == 'In Progress' && props.long) {
+    return progressLong
+  } else if (props.type == 'In Progress') {
+    return progress
+  } else if (props.type == 'Completed') {
+    return completed
+  }
+})
+
+const emit = defineEmits(['showMore'])
+const btMore = () => {
+  emit('showMore')
+}
+
+const backgroundImage = ref('')
+const fontSize = ref('')
+
+watch(
+  () => props.type,
+  (newType) => {
+    if (newType == 'In Progress') {
+      fontSize.value = '0.9em'
+    }
+    if (newType == 'Completed') {
+      fontSize.value = '1em'
+    }
+    return
+  },
+  { immediate: true }
+)
+
+// 根据状态文本返回翻译后的文本
+const getTypeText = (type) => {
+  console.log('type:', type)
+
+  switch (type) {
+    case 'In Progress':
+      return t('in_progress')
+    case 'Completed':
+      return t('completed')
+    case 'Out of account':
+      return t('out_of_account')
+    case 'Pending':
+      return t('pending')
+    default:
+      return type
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  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: 0.8em;
+  position: absolute;
+  bottom: 4%;
+  right: 4%;
+  color: #bb92ff;
+  font-weight: 500;
+}
+
+.status {
+  width: 48%;
+  height: 40%;
+  position: absolute;
+  top: 0;
+  right: 3%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+[dir='rtl'] .status {
+  right: auto;
+  left: 3%;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .moreBt {
+  right: auto;
+  left: 4%;
+}
+
+@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>
--- a/src/views/AdminCenter/index.vue
+++ b/src/views/AdminCenter/index.vue
@ -18,7 +18,7 @@

          display: flex;
          flex-direction: column;
-          gap: 12px;
+          gap: 8px;
        "
      >
        <!-- 用户信息卡片 -->
@ -52,7 +52,7 @@
              "
            >
              <img
-                :src="''"
+                :src="userInfo.userAvatar || ''"
                style="
                  display: block;
                  width: 100%;
@ -85,10 +85,10 @@
                  white-space: nowrap;
                "
              >
-                User1
+                {{ userInfo.userNickname || userInfo.name }}
              </div>
              <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
-                ID:1234567890
+                ID: {{ userInfo.id || userInfo.account }}
              </div>
            </div>
          </div>
@ -106,7 +106,7 @@

            display: flex;
            flex-direction: column;
-            gap: 10px;
+            gap: 4px;
          "
        >
          <!-- 标题 -->
@ -129,21 +129,23 @@
          <!-- 已完成任务 -->
          <div style="display: flex; justify-content: space-between; align-items: center">
            <div style="font-weight: 600">Task completion status:</div>
-            <div style="font-weight: 600">（0）</div>
+            <div style="font-weight: 600">({{ taskData.completedTaskCount || 0 }})</div>
          </div>

-          <div style="display: flex; flex-direction: column; gap: 10px">
-            <div style="font-weight: 500">2025.11.1-2025.11.16</div>
+          <div v-if="taskData.tasks" style="display: flex; flex-direction: column; gap: 4px">
+            <div style="font-weight: 500">
+              {{ taskData.cycleStartDate }}-{{ taskData.cycleEndDate }}
+            </div>
            <!-- 任务列表与完成状态 -->
            <div
-              v-for="value in 5"
+              v-for="task in taskData.tasks"
              style="display: flex; justify-content: space-between; align-items: center"
            >
              <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
-                Mic usage time:
+                {{ taskName(task) }}
              </div>
              <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
-                （0/20h）
+                {{ taskCompletedText(task) }}
              </div>
            </div>
          </div>
@ -161,12 +163,15 @@

            display: flex;
            flex-direction: column;
-            gap: 10px;
+            gap: 4px;
          "
        >
          <!-- 总收入 -->
-          <div style="display: flex; justify-content: space-between; align-items: center">
-            <div style="font-weight: 600">Team earnings this period: $3000</div>
+          <div
+            style="display: flex; justify-content: space-between; align-items: center"
+            @click="gotoIncome"
+          >
+            <div style="font-weight: 600">Team earnings this period</div>
            <img
              src="../../assets/icon/arrowBlack.png"
              alt=""
@ -176,9 +181,9 @@
          </div>

          <!-- 我的BD Leader团队 -->
-          <div style="display: flex; flex-direction: column; gap: 10px">
+          <div style="display: flex; flex-direction: column; gap: 4px">
            <div style="display: flex; justify-content: space-between; align-items: center">
-              <div style="font-weight: 600">My BD Leader Teams(3)</div>
+              <div style="font-weight: 600">My BD Leader Teams</div>
              <div style="align-self: stretch; display: flex; align-items: center; gap: 4px">
                <img
                  src="../../assets/icon/addUser.png"
@ -206,9 +211,9 @@
          </div>

          <!-- 我的BD团队 -->
-          <div style="display: flex; flex-direction: column; gap: 10px">
+          <div style="display: flex; flex-direction: column; gap: 4px">
            <div style="display: flex; justify-content: space-between; align-items: center">
-              <div style="font-weight: 600">My BD Teams(5)</div>
+              <div style="font-weight: 600">My BD Teams</div>
              <div style="align-self: stretch; display: flex; align-items: center; gap: 4px">
                <img
                  src="../../assets/icon/addUser.png"
@ -236,9 +241,9 @@
          </div>

          <!-- 我的Agency团队 -->
-          <div style="display: flex; flex-direction: column; gap: 10px">
+          <div style="display: flex; flex-direction: column; gap: 4px">
            <div style="display: flex; justify-content: space-between; align-items: center">
-              <div style="font-weight: 600">My Agency Teams(2)</div>
+              <div style="font-weight: 600">My Agency Teams</div>
              <div style="align-self: stretch; display: flex; align-items: center; gap: 4px">
                <img
                  src="../../assets/icon/addUser.png"
@ -266,17 +271,17 @@
          </div>

          <!-- 我的Recharge Agency团队 -->
-          <div style="display: flex; flex-direction: column; gap: 10px">
+          <div style="display: flex; flex-direction: column; gap: 4px">
            <div style="display: flex; justify-content: space-between; align-items: center">
-              <div style="font-weight: 600">Number of recharge agents linvited(1)</div>
+              <div style="font-weight: 600">Number of recharge agents linvited</div>
              <div style="align-self: stretch; display: flex; align-items: center; gap: 4px">
-                <img
+                <!-- <img
                  src="../../assets/icon/addUser.png"
                  alt=""
                  style="display: block; width: 1.6em"
                  class="flipImg"
                  @click="gotoPage('/invite-recharge-agency')"
-                />
+                /> -->
                <img
                  src="../../assets/icon/list.png"
                  alt=""
@ -290,6 +295,9 @@
            <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
              Total income:$1500
            </div>
+
+            <!-- 分割线 -->
+            <div style="border-bottom: 1px solid #e6e6e6"></div>
          </div>
        </div>

@ -305,7 +313,7 @@

            display: flex;
            justify-content: space-between;
-            gap: 10px;
+            gap: 4px;
          "
          @click="send"
        >
@ -330,7 +338,7 @@

            display: flex;
            justify-content: space-between;
-            gap: 10px;
+            gap: 4px;
          "
          @click="gotoAppPage('editingUser')"
        >
@ -355,7 +363,7 @@

            display: flex;
            justify-content: space-between;
-            gap: 10px;
+            gap: 4px;
          "
          @click="gotoAppPage('editingRoom')"
        >
@ -373,10 +381,17 @@
 </template>

 <script setup>
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { setDocumentDirection } from '@/locales/i18n'
 import { gotoAppPage } from '@/utils/appBridge.js'
+import { getUserId } from '@/utils/userStore.js'
+import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
+
+import {
+  apiTaskList, //获取任务列表
+} from '@/api/admin.js'

 import GeneralHeader from '@/components/GeneralHeader.vue'

@ -388,20 +403,79 @@ const router = useRouter()
 // 监听语言变化并设置文档方向
 locale.value && setDocumentDirection(locale.value)

+const taskData = ref({}) //任务项目数据
+
+// 任务名称
+const taskName = (task) => {
+  if (task.taskType == 'MIC_USAGE') {
+    return 'Mic usage time:'
+  } else if (task.taskType == 'WORKING_DAYS') {
+    return 'Working days (2 hours counted as one day):'
+  } else if (task.taskType == 'NEW_BD_LEADERS') {
+    return 'New BD Leaders bound:'
+  } else if (task.taskType == 'NEW_BDS') {
+    return 'New BDs bound:'
+  } else if (task.taskType == 'NEW_AGENCIES') {
+    return 'New agencies bound:'
+  }
+}
+
+// 任务完成情况
+const taskCompletedText = (task) => {
+  if (task.taskType == 'MIC_USAGE') {
+    return `(${task.completedCount}/${task.targetCount}h)`
+  } else {
+    return `(${task.completedCount}/${task.targetCount})`
+  }
+}
+
 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 send = async () => {
+const send = () => {
  router.push({ path: '/item-distribution' })
 }

+// 前往收益处理页面
+const gotoIncome = () => {
+  router.push({ path: '/available-income' })
+}
+
 // 前往页面
 const gotoPage = (path) => {
  router.push({ path: path })
 }
+
+// 获取任务列表
+const getTaskList = async () => {
+  let data = {
+    userId: getUserId(),
+  }
+  const resInvitedList = await apiTaskList(data)
+  console.log('任务列表:', resInvitedList)
+  if (resInvitedList.status && resInvitedList.body) {
+    taskData.value = resInvitedList.body
+  }
+}
+
+// 初始化数据
+const init = () => {
+  getTaskList()
+}
+
+const { userInfo } = usePageInitializationWithConfig('ADMIN Center', {
+  forceRefresh: true, // 强制刷新
+  needsTeamInfo: true,
+  needsBankBalance: false,
+  onDataLoaded: () => {},
+})
+
+onMounted(() => {
+  init()
+})
 </script>

 <style scoped>