feat(代理中心页): 新增样式并对接接口

src/views/AgencyCenterView.vue

@@ -92,128 +92,203 @@
         </div>
       </div>
 
-      <!-- 标签选项 -->
-      <div style="display: flex; margin: 5px 0">
-        <div
-          style="padding: 0 5px"
-          :class="[taskTab === 'host' ? 'TabActive' : 'TabNoActive']"
-          @click="taskTab = 'host'"
-        >
-          Host
-        </div>
-        <div
-          style="padding: 0 5px"
-          :class="[taskTab === 'agency' ? 'TabActive' : 'TabNoActive']"
-          @click="taskTab = 'agency'"
-        >
-          Agency
+      <div style="display: flex; justify-content: space-between; align-items: center">
+        <!-- 标签选项 -->
+        <div style="display: flex; margin: 5px 0; padding: 5px 0; position: relative">
+          <div
+            style="padding: 0 5px"
+            :class="[taskTab === 'host' ? 'TabActive' : 'TabNoActive']"
+            @click="taskTab = 'host'"
+            ref="tabHost"
+          >
+            Host
+          </div>
+          <div
+            style="padding: 0 5px"
+            :class="[taskTab === 'agency' ? 'TabActive' : 'TabNoActive']"
+            @click="taskTab = 'agency'"
+            ref="tabAgency"
+          >
+            Agency
+          </div>
+          <!-- 下划线元素 -->
+          <div
+            style="
+              width: 15px;
+              height: 3px;
+              background-color: #bb92ff;
+              position: absolute;
+              bottom: 0;
+              transition: left 0.3s ease;
+            "
+            :style="underlineStyle"
+          ></div>
         </div>
+
+        <!-- help -->
+        <button class="help-btn" @click.stop="goToInviteMembers">?</button>
       </div>
 
-      <!-- Host Agency 标签页 -->
-      <!-- <div class="host-agency-tabs">
-        <button
-          @click="taskTab = 'host'"
-          :class="['host-agency-tab', { active: taskTab === 'host' }]"
-        >
-          Host
-        </button>
-        <button
-          @click="taskTab = 'agency'"
-          :class="['host-agency-tab', { active: taskTab === 'agency' }]"
-        >
-          Agency
-          <button v-if="taskTab === 'agency'" class="help-btn" @click.stop="goToInviteMembers">
-            ?
-          </button>
-        </button>
-      </div> -->
-
-      <!-- Host Agency 内容 -->
-      <div class="host-agency-content">
-        <!-- Host 任务内容 -->
-        <div v-if="taskTab === 'host'" class="task-content">
-          <div class="task-header">
-            <h3>Today's Task:</h3>
-            <button class="platform-policy-btn" @click="goToPlatformPolicy">
-              Platform Policy <span class="arrow">></span>
-            </button>
-          </div>
-          <!-- 任务表格 -->
-          <div class="task-table">
-            <div class="table-row table-header">
-              <div class="table-cell">Anchor type</div>
-              <div class="table-cell">Minutes</div>
-              <div class="table-cell">Gift Task</div>
+      <!-- 标签内容 -->
+      <div>
+        <div v-if="taskTab === 'host'">
+          <div
+            style="
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              gap: 5px;
+              background-color: white;
+              padding: 3%;
+              border-radius: 12px;
+              margin: 0 1%;
+              margin-bottom: 12px;
+              box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            "
+          >
+            <div style="display: flex; justify-content: space-between">
+              <div style="font-weight: 600">Today's Task:</div>
+              <button
+                style="
+                  font-weight: 500;
+                  color: rgba(0, 0, 0, 0.4);
+                  border: 0;
+                  background-color: transparent;
+                "
+                @click="goToPlatformPolicy"
+              >
+                Platform Policy >
+              </button>
             </div>
-            <div class="table-row table-data">
-              <div class="table-cell">{{ taskInfo.anchorType }}</div>
-              <div class="table-cell">
-                <span class="minutes-progress">{{ taskInfo.minutesProgress }}</span>
-                <span class="minutes-completed">/{{ taskInfo.minutesTotal }}</span>
+            <div style="display: flex">
+              <div style="flex: 1">
+                <div
+                  style="
+                    width: max-content;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 5px;
+                  "
+                >
+                  <div style="font-weight: 600">Anchor Type</div>
+                  <div style="font-weight: 600">{{ taskInfo.anchorType }}</div>
+                </div>
+              </div>
+              <div
+                style="
+                  flex: 1;
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  gap: 5px;
+                "
+              >
+                <div style="font-weight: 600">Minutes</div>
+                <div style="font-weight: 600">
+                  {{ taskInfo.minutesProgress }}/{{ taskInfo.minutesTotal }}
+                </div>
+              </div>
+              <div style="flex: 1; display: flex; justify-content: flex-end">
+                <div
+                  style="
+                    width: max-content;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 5px;
+                  "
+                >
+                  <div style="font-weight: 600">Gift Task</div>
+                  <div style="font-weight: 600">{{ taskInfo.giftTask }}</div>
+                </div>
               </div>
-              <div class="table-cell">{{ taskInfo.giftTask }}</div>
             </div>
           </div>
 
-          <!-- Platform Policy 链接 -->
-          <!--          <div class="policy-link" @click="goToPlatformPolicy">
-            <span>Platform Policy</span>
-            <span class="arrow">></span>
-          </div>-->
+          <!-- 进度信息 -->
+          <workReportBox
+            style="margin-bottom: 10px"
+            :type="progressInfo.status"
+            :date="progressInfo.date"
+            :target="String(progressInfo.target)"
+            :salary="progressInfo.salary"
+            :days="String(progressInfo.timeDays)"
+          ></workReportBox>
         </div>
 
-        <!-- Agency 任务内容 -->
-        <div v-else class="agency-task-content">
-          <!-- Team Bill 卡片 -->
-          <div class="team-bill-card" @click="goToTeamBill">
-            <div class="card-content">
-              <div class="card-date">
-                <span v-if="loadingTeamBill">Loading...</span>
-                <span v-else>{{ teamBillInfo.date }}</span>
+        <div v-else>
+          <div
+            style="
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              gap: 5px;
+              background-color: white;
+              padding: 3%;
+              border-radius: 12px;
+              margin-bottom: 12px;
+              box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            "
+          >
+            <div style="display: flex; justify-content: space-between">
+              <div style="font-weight: 600">
+                {{ teamBillInfo.date }}
               </div>
-              <div class="card-link">
-                <span>Team Bill</span>
+              <button
+                style="
+                  font-weight: 500;
+                  color: rgba(0, 0, 0, 0.4);
+                  border: 0;
+                  background-color: transparent;
+                "
+                @click="goToTeamBill"
+              >
+                Team Bill >
+              </button>
+            </div>
+            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px">
+              <div class="contentText">
+                Host Salary: {{ loadingTeamBill ? '–' : teamBillInfo.hostSalary }}
+              </div>
+              <div class="contentText">
+                Agent Salary: {{ loadingTeamBill ? '–' : teamBillInfo.agentSalary }}
+              </div>
+              <div class="contentText">Total: {{ loadingTeamBill ? '–' : teamBillInfo.total }}</div>
+              <div style="display: flex; justify-content: flex-end">
+                <div
+                  style="
+                    margin: 4px;
+                    padding: 0 8px;
+                    border-radius: 4px;
+                    display: flex;
+                    align-items: center;
+                  "
+                  :style="{ boxShadow }"
+                >
+                  <div style="font-weight: 500" :style="{ color }">
+                    {{ loadingTeamBill ? '–' : teamBillInfo.status }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="taskTab === 'agency'" class="team-member-section">
+            <div class="team-member-card" @click="goToTeamMember">
+              <div class="card-content">
+                <div class="member-title">
+                  Team Member
+                  <span v-if="loadingMemberCount">(Loading...)</span>
+                  <span v-else class="member-title">({{ teamMemberCount }})</span>
+                </div>
                 <span class="arrow">></span>
               </div>
-              <div class="card-details">
-                <div class="detail-row">
-                  <span class="detail-label">Host Salary:</span>
-                  <span class="detail-value">{{
-                    loadingTeamBill ? '–' : teamBillInfo.hostSalary
-                  }}</span>
-                  <span class="detail-label">Agent Salary:</span>
-                  <span class="detail-value">{{
-                    loadingTeamBill ? '–' : teamBillInfo.agentSalary
-                  }}</span>
-                </div>
-                <div class="detail-row">
-                  <span class="detail-label">Total:</span>
-                  <span class="detail-value">{{ loadingTeamBill ? '–' : teamBillInfo.total }}</span>
-                  <span class="status-badge">{{
-                    loadingTeamBill ? '–' : teamBillInfo.status
-                  }}</span>
-                </div>
-              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- Team Member 卡片（独立在外面） -->
-      <div class="team-member-section">
-        <div class="team-member-card" @click="goToTeamMember">
-          <div class="card-content">
-            <span class="member-title">
-              Team Member
-              <span v-if="loadingMemberCount">(Loading...)</span>
-              <span v-else>({{ teamMemberCount }})</span>
-            </span>
-            <span class="arrow">></span>
-          </div>
-        </div>
-      </div>
-
       <!-- 操作按钮 -->
       <div class="action-buttons">
         <button class="action-btn exchange-btn" @click="exchangeGoldCoins">Exchange</button>
@@ -224,17 +299,36 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import MobileHeader from '../components/MobileHeader.vue'
 import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
-import { getTeamId } from '@/utils/userStore.js'
-import { getTeamMemberCount, getTeamBill } from '@/api/teamBill.js'
+import { getTeamId, getUserId } from '@/utils/userStore.js'
+import { getTeamMemberCount, getTeamBill, getTeamMemberWork } from '@/api/teamBill.js'
+import workReportBox from '@/components/HostCenter/workReportBox.vue'
 
 const router = useRouter()
 
 // 任务标签
-const taskTab = ref('agency')
+const taskTab = ref('host')
+const tabHost = ref(null)
+const tabAgency = ref(null)
+
+// 进度信息
+const progressInfo = reactive({
+  date: '–',
+  status: '–',
+  target: '–',
+  salary: '–',
+  timeDays: '–',
+  hostSalary: '–',
+  agentSalary: '–',
+  total: '–',
+})
+
+// 样式
+const color = ref('')
+const boxShadow = ref('')
 
 // 团队成员数量
 const teamMemberCount = ref(0)
@@ -250,6 +344,96 @@ const teamBillInfo = reactive({
 })
 const loadingTeamBill = ref(false)
 
+const underlineStyle = computed(() => {
+  console.log('计算属性')
+
+  let activeTab = taskTab.value == 'host' ? tabHost.value : tabAgency.value
+  console.log('选中元素的左边距', activeTab?.offsetLeft)
+  return {
+    left: `${activeTab?.offsetLeft + activeTab?.offsetWidth / 2 - 15 / 2}px`,
+  }
+})
+
+// 获取成员工作数据
+const fetchMemberWorkData = async () => {
+  try {
+    const userId = getUserId()
+
+    if (!userId) {
+      console.warn('No user ID available')
+      return
+    }
+
+    const response = await getTeamMemberWork(userId)
+    if (response && response.status && response.body) {
+      const data = response.body
+
+      // 取第一条target数据（最新的工作数据）
+      if (data.targets && data.targets.length > 0) {
+        const latestTarget = data.targets[0]
+
+        // 格式化日期：202508 -> 08/2025
+        const billBelong = latestTarget.billBelong.toString()
+        const year = billBelong.substring(0, 4)
+        const month = billBelong.substring(4, 6)
+
+        // 格式化状态
+        const formatStatus = (status) => {
+          const statusMap = {
+            SETTLED: 'Settled',
+            UNPAID: 'Pending',
+            HANG_UP: 'Pending',
+            PAID: 'Completed',
+          }
+          return statusMap[status] || status
+        }
+
+        // 获取level值
+        const level =
+          latestTarget.target?.settlementResult?.level || latestTarget.target?.level || '–'
+
+        // 更新数据
+        Object.assign(progressInfo, {
+          date: `${month}.${year}`,
+          status: formatStatus(latestTarget.status),
+          target: level,
+          salary: latestTarget.target?.settlementResult?.ownSalary?.toFixed(2) || '–',
+          timeDays: latestTarget.target?.effectiveDay || '–',
+        })
+      } else {
+        console.warn('No targets data available')
+      }
+    } else {
+      console.warn('No member work data available')
+    }
+  } catch (error) {
+    console.error('Failed to fetch member work data:', error)
+  }
+}
+
+watch(
+  () => teamBillInfo?.status,
+  (newStatus) => {
+    if (newStatus == 'In Progress') {
+      boxShadow.value = '0 0 1px 0 #6085FF'
+      color.value = 'rgba(61, 115, 255, 1)'
+    }
+    if (newStatus == 'Pending') {
+      boxShadow.value = '0 0 1px 0 #FF6062'
+      color.value = 'rgba(255, 61, 64, 1)'
+    }
+    if (newStatus == 'Completed') {
+      boxShadow.value = '0 0 1px 0 #60FF65'
+      color.value = 'rgba(61, 255, 84, 1)'
+    }
+    if (newStatus == 'Out Of Account') {
+      boxShadow.value = '0 0 1px 0 #6A6161'
+      color.value = 'rgba(174, 174, 174, 1)'
+    }
+    return
+  }
+)
+
 // 页面跳转方法
 const goToNotification = () => {
   router.push('/message')
@@ -342,7 +526,7 @@ const fetchTeamBillData = async () => {
 
         // 更新数据
         Object.assign(teamBillInfo, {
-          date: `${month}/${year}`,
+          date: `${year}.${month}`,
           hostSalary: latestBill.settleResult?.memberSalary?.toFixed(2) || '–',
           agentSalary: latestBill.settleResult?.ownSalary?.toFixed(2) || '–',
           total: latestBill.settleResult?.totalSalary?.toFixed(2) || '–',
@@ -365,8 +549,13 @@ const { userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder }
     onDataLoaded: (data) => {
       fetchTeamMemberCount()
       fetchTeamBillData() // 新增：获取团队账单数据
+      fetchMemberWorkData() // 新增：获取成员工作数据
     },
   })
+
+onMounted(() => {
+  underlineStyle.value // 触发计算属性更新
+})
 </script>
 
 <style scoped>
@@ -375,6 +564,11 @@ const { userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder }
   font-family: 'SF Pro Text';
 }
 
+.contentText {
+  font-weight: 700;
+  font-size: 1em;
+}
+
 .TabActive {
   font-weight: 600;
 }
@@ -491,45 +685,19 @@ const { userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder }
   overflow: hidden;
 }
 
-.host-agency-tab {
-  flex: 1;
-  padding: 12px 16px;
-  border: none;
-  background-color: #f8f9fa;
-  color: #666;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
+.help-btn {
+  padding: 5px;
+  height: 10%;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  color: black;
+  border: 1px solid black;
+  font-weight: 600;
+  color: black;
+
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
-  border-bottom: 3px solid transparent;
-}
-
-.host-agency-tab.active {
-  background-color: white;
-  color: #333;
-  border-bottom-color: #8b5cf6;
-  font-weight: 600;
-}
-
-.host-agency-tab:not(.active):hover {
-  background-color: #e9ecef;
-  color: #8b5cf6;
-}
-
-.host-agency-tab .help-btn {
-  width: 16px;
-  height: 16px;
-  border-radius: 8px;
-  background-color: #8b5cf6;
-  color: white;
-  border: none;
-  font-size: 10px;
-  cursor: pointer;
-  margin-left: 4px;
 }
 
 /* My salary 区域 */
@@ -828,7 +996,6 @@ const { userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder }
   border-radius: 12px;
   font-size: 14px;
   font-weight: 600;
-  cursor: pointer;
   text-align: center;
   line-height: 1.2;
   transition: all 0.2s;
@@ -840,12 +1007,14 @@ const { userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder }
 }
 
 .exchange-btn {
-  background-color: #fde68a;
-  color: #d97706;
+  background: linear-gradient(135deg, #f1eca6 2.82%, #ffd22f 99.15%), #fff;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+  color: white;
 }
 
 .transfer-btn {
-  background-color: #8b5cf6;
+  background: linear-gradient(135deg, #a6aaf1 2.82%, #592fff 99.15%), #fff;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
   color: white;
 }