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

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
+  }
+}

src/views/Activities/Yemen/IndependenceDay/index.vue

@@ -271,26 +271,29 @@
                     @error="(e) => handleImageError(e, reward.type)"
                   />
                 </itemCenter>
-                <div
+                <div class="valueBg" style="position: relative">
-                  style="
+                  <div
-                    text-align: center;
+                    style="
-                    font-size: 1.2em;
+                      text-align: center;
-                    font-weight: 900;
+                      font-size: 1.2em;
-                    font-style: italic;
+                      font-weight: 900;
-                    background: linear-gradient(
+                      font-style: italic;
-                      90deg,
+                      background: linear-gradient(
-                      #fff677 6.36%,
+                        90deg,
-                      #d39f1e 26%,
+                        #fff677 6.36%,
-                      #fff891 49.56%,
+                        #d39f1e 26%,
-                      #ffc93e 70.51%,
+                        #fff891 49.56%,
-                      #ffc 93.64%
+                        #ffc93e 70.51%,
-                    );
+                        #ffc 93.64%
-                    background-clip: text;
+                      );
-                    -webkit-background-clip: text;
+
-                    -webkit-text-fill-color: transparent;
+                      background-clip: text;
-                  "
+                      -webkit-background-clip: text;
-                >
+                      -webkit-text-fill-color: transparent;
-                  {{ showDetail(reward.type, reward) }}
+                    "
+                  >
+                    {{ 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;

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-weight: 700">Agencies: {{ TeamOverview?.memberCount || 0 }}</div>
-        <div style="font-size: 0.9em; font-weight: 600">Team Total Income: $900</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>{{ incomeInfo.settlementPeriod }}</div>
-                  <div>Host: 10</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">
-            <div style="font-size: 0.8em; font-weight: 600">Team Total income: $1000</div>
+              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>

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-weight: 700">BD Leaders: {{ TeamOverview?.memberCount || 0 }}</div>
-        <div style="font-size: 0.9em; font-weight: 600">Team Total Income: $900</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>{{ incomeInfo.settlementPeriod }}</div>
-                  <div>{{ t('num_teams') }}0</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">{{ incomeDetailsItem.settlementPeriod }}</div>
-            <div style="font-weight: 600">2025.10.01-2025.10.15:</div>
-          </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">
-            <div style="font-size: 0.8em; font-weight: 600">Team Total income: $1000</div>
+              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>

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-weight: 700">BDs:{{ TeamOverview?.memberCount || 0 }}</div>
-        <div style="font-size: 0.9em; font-weight: 600">Team Total Income: $900</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>{{ incomeInfo.settlementPeriod }}</div>
-                  <div>{{ t('num_teams') }}0</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">
-            <div style="font-size: 0.8em; font-weight: 600">Team Total income: $1000</div>
+              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>

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)">
+          <div style="font: 0.8em; font-weight: 500; color: rgba(0, 0, 0, 0.4)">
-            Total recharge for the month:
+            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: 0.8em; font-weight: 500; color: rgba(0, 0, 0, 0.4)">
-          <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+            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="width: 100%; display: flex; justify-content: space-between">
-          <div style="display: flex; justify-content: space-between">
+            <!-- 基本信息 -->
-            <div style="display: flex; align-items: center">
+            <div
-              <img :src="agency.userAvatar" alt="" style="width: 36px; border-radius: 50%" />
+              style="
-              <div style="margin-left: 8px">
+                flex: 1;
-                <div style="font-weight: 700">{{ agency.name }}</div>
+                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>

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>

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 v-if="taskData.tasks" style="display: flex; flex-direction: column; gap: 4px">
-            <div style="font-weight: 500">2025.11.1-2025.11.16</div>
+            <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
-            <div style="font-weight: 600">Team earnings this period: $3000</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>