From 4e3f6af9635719b18bf574d426143791ef107246 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Fri, 26 Sep 2025 12:14:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=8E=86=E5=8F=B2=E8=96=AA=E8=B5=84):=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BB=84=E4=BB=B6=EF=BC=8C=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/HistorySalaryView.vue | 508 ++++++++++++++------------------
 1 file changed, 227 insertions(+), 281 deletions(-)

diff --git a/src/views/HistorySalaryView.vue b/src/views/HistorySalaryView.vue
index 3735df2..275c147 100644
--- a/src/views/HistorySalaryView.vue
+++ b/src/views/HistorySalaryView.vue
@@ -2,21 +2,31 @@
   <div class="history-salary gradient-background-circles">
     <MobileHeader title="History Salary" />
 
+    <!-- 内容 -->
     <div class="content">
-      <!-- Host Salary 卡片 -->
-      <div class="host-salary-card">
-        <div class="salary-header">
-          <h3>Host Salary</h3>
-          <button class="info-btn" @click="showHelpInfo">
-            <span>?</span>
-          </button>
+      <!-- 历史薪资 -->
+      <div
+        style="
+          background-color: white;
+          padding: 16px;
+          border-radius: 12px;
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+          margin-bottom: 12px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        "
+      >
+        <div style="display: flex; flex-direction: column; gap: 10px">
+          <div>History Salary</div>
+          <div style="font-weight: 600">${{ totalSalary }}</div>
         </div>
-        <div class="salary-amount">${{ totalSalary }}</div>
+        <div class="info-btn" @click="showHelpInfo">?</div>
       </div>
 
-      <!-- Work Report 部分 -->
-      <div class="work-report-section">
-        <h3>Work report:</h3>
+      <!-- 工作报告 -->
+      <div style="margin-bottom: 20px">
+        <div style="margin: 10px 1%; font-weight: 600; color: rgba(0, 0, 0, 0.4)">Work report:</div>
 
         <!-- 加载状态 -->
         <div v-if="loading" class="loading-container">
@@ -25,46 +35,22 @@
         </div>
 
         <!-- 报告列表 -->
-        <div v-else-if="workReports.length > 0" class="report-list">
-          <div
+        <div
+          v-else-if="workReports.length > 0"
+          style="display: flex; flex-direction: column; gap: 12px"
+        >
+          <!-- 进度信息 -->
+          <workReportBox
             v-for="report in workReports"
             :key="report.id"
-            class="report-item"
-          >
-            <div class="report-header">
-              <span class="report-date">{{ report.date }}</span>
-              <span :class="['status-badge', report.status.toLowerCase().replace(' ', '-')]">
-                {{ report.status }}
-              </span>
-            </div>
-
-            <div class="report-details">
-              <div class="detail-row">
-                <div class="detail-item">
-                  <span class="detail-label">Level:</span>
-                  <span class="detail-value">{{ report.target }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">Salary:</span>
-                  <span class="detail-value">{{ report.salary }}</span>
-                </div>
-              </div>
-
-              <div class="detail-row">
-                <div class="detail-item">
-                  <span class="detail-label">Time(Days):</span>
-                  <span class="detail-value">{{ report.timeDays }}</span>
-                </div>
-                <div class="detail-item">
-                  <!-- More 按钮 -->
-                  <button v-if="report.hasDetails" class="more-btn" @click="showReportDetail(report)">
-                    <span>More</span>
-                    <span class="arrow">></span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
+            :type="report.status"
+            :date="report.date"
+            :target="report.target"
+            :salary="report.salary"
+            :days="report.timeDays"
+            more="true"
+            @showMore="showReportDetail(report)"
+          ></workReportBox>
         </div>
 
         <!-- 空数据状态 -->
@@ -75,64 +61,53 @@
       </div>
     </div>
 
-    <!-- 详情模态框 -->
-    <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
-      <div class="detail-modal" @click.stop>
-        <div class="detail-header">
-          <h3>{{ selectedReport?.date || 'Work Details' }}</h3>
-          <button class="close-btn" @click="closeDetailModal">×</button>
-        </div>
+    <!-- 遮罩层 -->
+    <div v-if="showDetailModal || showHelpModal" class="modal-overlay" @click="closeModal">
+      <!-- 详情模态框 -->
+      <div v-if="showDetailModal" class="modal-item">
+        <div class="detail-modal" @click.stop>
+          <div class="detail-header">
+            <h3>{{ selectedReport?.date || 'Work Details' }}</h3>
+            <button class="close-btn" @click="closeModal">×</button>
+          </div>
 
-        <div class="detail-content">
-          <!-- 等级卡片 -->
-<!--          <div v-if="levelData" class="level-card">
-            <div class="level-header">
-              <h4>{{ levelData.level }}</h4>
-            </div>
-            <div class="level-stats">
-              <div class="stat-row">
-                <div class="stat-item">
-                  <span class="stat-label">Time (hours)</span>
-                  <span class="stat-value">{{ levelData.timeHours }}</span>
-                </div>
-                <div class="stat-item">
-                  <span class="stat-label">Target</span>
-                  <span class="stat-value">{{ levelData.target }}</span>
-                </div>
-                <div class="stat-item">
-                  <span class="stat-label">Host Salary</span>
-                  <span class="stat-value">${{ levelData.hostSalary }}</span>
-                </div>
-              </div>
-              <div class="stat-row">
-                <div class="stat-item">
-                  <span class="stat-label">Agent Salary</span>
-                  <span class="stat-value">${{ levelData.agentSalary }}</span>
-                </div>
-                <div class="stat-item">
-                  <span class="stat-label">Total Salary</span>
-                  <span class="stat-value">${{ levelData.totalSalary }}</span>
-                </div>
-                <div class="stat-item">
-                  &lt;!&ndash; 空占位 &ndash;&gt;
-                </div>
-              </div>
-            </div>
-          </div>-->
-
-          <!-- 每日薪资列表 -->
-          <div v-if="dailyTargets.length > 0" class="daily-salary">
-            <h4>Daily salary:</h4>
-            <div class="daily-list">
-              <div v-for="daily in dailyTargets" :key="daily.dateNumber" class="daily-item">
-                <div class="daily-date">{{ formatDateNumber(daily.dateNumber) }}</div>
-                <div class="daily-info">
-                  <div class="daily-target">
-                    <span>Level: {{ getLevelFromPolicy(daily.acceptGiftValue) }}</span>
+          <div class="detail-content">
+            <!-- 等级卡片 -->
+            <div v-if="selectedReport" class="level-card">
+              <div class="level-stats">
+                <div class="stat-row">
+                  <div class="stat-item">
+                    <span class="stat-label">Time(Days)</span>
+                    <span class="stat-value">{{ selectedReport.timeDays }}</span>
                   </div>
-                  <div class="daily-time">
-                    <span>Time: </span>
-                    <span class="time-value">{{ Math.min(formatOnlineTime(daily.onlineTime), 120) }}/120</span>
+                  <div class="stat-item">
+                    <span class="stat-label">Target</span>
+                    <span class="stat-value">{{ selectedReport.target }}</span>
+                  </div>
+                  <div class="stat-item">
+                    <span class="stat-label">Salary</span>
+                    <span class="stat-value">${{ selectedReport.salary }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 每日薪资列表 -->
+            <div v-if="dailyTargets.length > 0" class="daily-salary">
+              <h4>Daily salary:</h4>
+              <div class="daily-list">
+                <div v-for="daily in dailyTargets" :key="daily.dateNumber" class="daily-item">
+                  <div class="daily-date">{{ formatDateNumber(daily.dateNumber) }}</div>
+                  <div class="daily-info">
+                    <div class="daily-target">
+                      <span>Level: {{ getLevelFromPolicy(daily.acceptGiftValue) }}</span>
+                    </div>
+                    <div class="daily-time">
+                      <span>Time: </span>
+                      <span class="time-value"
+                        >{{ Math.min(formatOnlineTime(daily.onlineTime), 120) }}/120</span
+                      >
+                    </div>
                   </div>
                 </div>
               </div>
@@ -140,89 +115,73 @@
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- 帮助模态框 -->
-    <div v-if="showHelpModal" class="modal-overlay" @click="closeHelpModal">
-      <div class="help-modal-content" @click.stop>
-        <div class="help-modal-header">
-          <h3>Work Report Help</h3>
-          <button class="close-btn" @click="closeHelpModal">×</button>
-        </div>
+      <!-- 帮助模态框 -->
+      <div v-if="showHelpModal" class="modal-item">
+        <div
+          style="
+            background-color: white;
+            border-radius: 12px;
+            width: 90%;
+            max-width: 400px;
+            max-height: 80vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+          "
+          @click.stop
+        >
+          <div
+            style="
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 16px;
+              position: relative;
+            "
+          >
+            <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">Help</div>
+            <div
+              style="
+                position: absolute;
+                right: 10px;
+                color: black;
 
-        <div class="help-modal-body">
-          <div class="help-section">
-            <p class="help-description">
-              Shown below is the work report of the members "More" can view more work detailed.
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              "
+              @click="closeModal"
+            >
+              ×
+            </div>
+          </div>
+
+          <div class="help-modal-body">
+            <p>Shown below is the work report of the members "More" can view more work detailed.</p>
+            <p>Status Description:</p>
+            <p>(1)Completed: The system has completed the settlement report.</p>
+            <p>
+              (2)Pending: There is currently a dispute, and the system cannot perform a settlement.
             </p>
-          </div>
-
-          <div class="help-section">
-            <h4>Status Description:</h4>
-            <div class="status-list">
-              <div class="status-item">
-                <span class="status-number">(1)</span>
-                <span class="status-name">Completed:</span>
-                <span class="status-desc">The system has completed the settlement report.</span>
-              </div>
-              <div class="status-item">
-                <span class="status-number">(2)</span>
-                <span class="status-name">Pending:</span>
-                <span class="status-desc">There is currently a dispute, and the system cannot perform a settlement.</span>
-              </div>
-              <div class="status-item">
-                <span class="status-number">(3)</span>
-                <span class="status-name">Out of account:</span>
-                <span class="status-desc">waiting for system verification.</span>
-              </div>
-              <div class="status-item">
-                <span class="status-number">(4)</span>
-                <span class="status-name">In progress:</span>
-                <span class="status-desc">work now in progress.</span>
-              </div>
-            </div>
+            <p>(3)Out of account: waiting for system verification.</p>
+            <p>(4)In progress: work now in progress.</p>
           </div>
         </div>
       </div>
     </div>
-
-    <!-- 薪资信息弹窗 -->
-    <div v-if="showSalaryModal" class="modal-overlay" @click="showSalaryModal = false">
-      <div class="modal" @click.stop>
-        <h3>Salary Information</h3>
-        <div class="salary-breakdown">
-          <div class="breakdown-item">
-            <span>Base Salary:</span>
-            <span>$8,000</span>
-          </div>
-          <div class="breakdown-item">
-            <span>Performance Bonus:</span>
-            <span>$3,000</span>
-          </div>
-          <div class="breakdown-item">
-            <span>Commission:</span>
-            <span>$1,345</span>
-          </div>
-          <div class="breakdown-total">
-            <span>Total:</span>
-            <span>$12,345</span>
-          </div>
-        </div>
-        <button @click="showSalaryModal = false">Close</button>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
+import { onMounted, ref } from 'vue'
 import MobileHeader from '../components/MobileHeader.vue'
-import {getTeamMemberWork, getTeamReleasePolicy} from '../api/teamBill.js'
-import {getTeamId, getUserId, getUserProfile} from "@/utils/userStore.js";
-import {getUserIdentity} from "@/api/wallet.js";
+import { getTeamMemberWork, getTeamReleasePolicy } from '../api/teamBill.js'
+import { getTeamId, getUserId, getUserProfile } from '@/utils/userStore.js'
+import { getUserIdentity } from '@/api/wallet.js'
+import workReportBox from '@/components/HostCenter/workReportBox.vue'
 
 const totalSalary = ref('0.00')
-const showSalaryModal = ref(false)
 const showHelpModal = ref(false)
 const loading = ref(false)
 const showDetailModal = ref(false)
@@ -280,7 +239,7 @@ const getLevelFromPolicy = (giftValue) => {
   }
 
   // 如果都不匹配，返回最低等级
-  return Math.min(...policyData.value.policy.map(p => p.level))
+  return Math.min(...policyData.value.policy.map((p) => p.level))
 }
 
 // 获取工作报告数据
@@ -296,32 +255,40 @@ const fetchWorkReports = async (userId) => {
 
       const userIdentity = await getUserIdentity()
 
-      workReports.value = targets.map(target => ({
+      workReports.value = targets.map((target) => ({
         id: target.id,
-        date: target.billTitle,
+        date: `${target.billBelong.toString().substring(0, 4)}.${target.billBelong
+          .toString()
+          .substring(4, 6)}`,
         status: getStatusText(target.status),
         target: getLevelFromPolicy(target.target?.acceptGiftValue), // 使用政策数据计算等级
-        salary: formatSalaryValue(
-          userIdentity.body?.agent
-            ? (target.target?.settlementResult?.ownSalary || 0) + (target.target?.settlementResult?.memberSalary || 0)
-            : userIdentity.body?.anchor
+        salary:
+          formatSalaryValue(
+            userIdentity.body?.agent
+              ? (target.target?.settlementResult?.ownSalary || 0) +
+                  (target.target?.settlementResult?.memberSalary || 0)
+              : userIdentity.body?.anchor
               ? target.target?.settlementResult?.memberSalary
               : null
-        ) || '-',
+          ) || '-',
         totalSalary: formatSalaryValue(target.target?.settlementResult?.totalSalary) || '-',
         timeDays: target.target?.effectiveDay || '-',
-        hasDetails: target.target && target.target.dailyTargets && target.target.dailyTargets.length > 0,
-        originalData: target // 保存原始数据用于详情显示
+        hasDetails:
+          target.target && target.target.dailyTargets && target.target.dailyTargets.length > 0,
+        originalData: target, // 保存原始数据用于详情显示
       }))
 
-// 计算总薪资 - 根据用户身份选择对应的薪资字段
+      // 计算总薪资 - 根据用户身份选择对应的薪资字段
       const totalAmount = targets.reduce((sum, target) => {
         let salary = 0
 
         // 根据用户身份决定使用哪个薪资字段
         if (userIdentity.body?.agent) {
           // agent 为 true 时，使用 ownSalary
-          salary = parseFloat((target.target?.settlementResult?.ownSalary || 0) + (target.target?.settlementResult?.memberSalary || 0))
+          salary = parseFloat(
+            (target.target?.settlementResult?.ownSalary || 0) +
+              (target.target?.settlementResult?.memberSalary || 0)
+          )
         } else if (userIdentity.body?.anchor) {
           // anchor 为 true 时，使用 memberSalary
           salary = parseFloat(target.target?.settlementResult?.memberSalary || 0)
@@ -343,8 +310,8 @@ const fetchWorkReports = async (userId) => {
         target: '-',
         salary: '-',
         timeDays: '-',
-        diamond: '-'
-      }
+        diamond: '-',
+      },
     ]
   } finally {
     loading.value = false
@@ -361,9 +328,9 @@ const formatSalaryValue = (value) => {
 // 格式化状态文本（与 TeamBillView 保持一致）
 const getStatusText = (status) => {
   const statusMap = {
-    'UNPAID': 'In Progress',
-    'HANG_UP': 'Pending',
-    'PAID': 'Completed'
+    UNPAID: 'In Progress',
+    HANG_UP: 'Pending',
+    PAID: 'Completed',
   }
   return statusMap[status] || status
 }
@@ -382,13 +349,6 @@ const showReportDetail = (report) => {
   showDetailModal.value = true
 }
 
-// 关闭详情模态框
-const closeDetailModal = () => {
-  showDetailModal.value = false
-  selectedReport.value = null
-  dailyTargets.value = []
-}
-
 // 格式化在线时间（为 Daily Salary 显示分钟数）
 const formatOnlineTime = (minutes) => {
   const mins = parseInt(minutes) || 0
@@ -412,9 +372,12 @@ const showHelpInfo = () => {
   showHelpModal.value = true
 }
 
-// 关闭帮助模态框
-const closeHelpModal = () => {
+// 关闭遮罩层
+const closeModal = () => {
   showHelpModal.value = false
+  showDetailModal.value = false
+  selectedReport.value = null
+  dailyTargets.value = []
 }
 
 // 组件挂载时获取数据
@@ -426,6 +389,11 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
 .history-salary {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -441,8 +409,7 @@ onMounted(async () => {
   background-color: white;
   padding: 20px;
   border-radius: 16px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .salary-header {
@@ -460,24 +427,24 @@ onMounted(async () => {
 }
 
 .info-btn {
-  width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  border: 1px solid #8B5CF6;
-  background-color: #8B5CF6;
+  padding: 5px;
+  height: 10%;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  border: 1px solid black;
+  font-weight: 600;
+  color: black;
+
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
-  color: white;
-  cursor: pointer;
-  font-weight: 600;
+
   transition: all 0.2s;
 }
 
-.info-btn:hover {
-  background-color: #7C3AED;
-  border-color: #7C3AED;
+.info-btn:active {
+  background-color: #7c3aed;
+  border-color: #7c3aed;
 }
 
 .salary-amount {
@@ -487,18 +454,6 @@ onMounted(async () => {
   margin: 0;
 }
 
-/* Work Report 部分 */
-.work-report-section {
-  margin-bottom: 20px;
-}
-
-.work-report-section h3 {
-  margin: 0 0 16px 0;
-  font-size: 16px;
-  font-weight: 500;
-  color: #666;
-}
-
 /* 加载状态 */
 .loading-container {
   display: flex;
@@ -512,15 +467,19 @@ onMounted(async () => {
   width: 32px;
   height: 32px;
   border: 3px solid #f3f3f3;
-  border-top: 3px solid #8B5CF6;
+  border-top: 3px solid #8b5cf6;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 12px;
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /* 空数据状态 */
@@ -537,18 +496,12 @@ onMounted(async () => {
   margin-bottom: 12px;
 }
 
-.report-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
 /* 报告项目 */
 .report-item {
   background-color: white;
   padding: 16px;
   border-radius: 16px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .report-header {
@@ -573,19 +526,19 @@ onMounted(async () => {
 }
 
 .status-badge.in-progress {
-  background-color: #3B82F6;
+  background-color: #3b82f6;
 }
 
 .status-badge.pending {
-  background-color: #EF4444;
+  background-color: #ef4444;
 }
 
 .status-badge.completed {
-  background-color: #10B981;
+  background-color: #10b981;
 }
 
 .status-badge.out-of-account {
-  background-color: #9CA3AF;
+  background-color: #9ca3af;
 }
 
 /* 报告详情 */
@@ -621,7 +574,7 @@ onMounted(async () => {
 }
 
 .total-salary {
-  color: #10B981 !important;
+  color: #10b981 !important;
   font-weight: 700;
 }
 
@@ -632,7 +585,7 @@ onMounted(async () => {
   gap: 4px;
   background: none;
   border: none;
-  color: #8B5CF6;
+  color: #8b5cf6;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -640,7 +593,7 @@ onMounted(async () => {
 }
 
 .more-btn:hover {
-  color: #7C3AED;
+  color: #7c3aed;
 }
 
 .arrow {
@@ -795,40 +748,12 @@ onMounted(async () => {
 }
 
 .time-value {
-  color: #10B981;
+  color: #10b981;
   font-weight: 600;
 }
 
-/* 帮助模态框样式 */
-.help-modal-content {
-  background-color: white;
-  border-radius: 12px;
-  width: 90%;
-  max-width: 400px;
-  max-height: 80vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.help-modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px;
-  border-bottom: 1px solid #e5e7eb;
-  background-color: #f8f9fa;
-}
-
-.help-modal-header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
 .help-modal-body {
-  padding: 20px;
+  padding: 0 20px 20px;
   overflow-y: auto;
 }
 
@@ -875,7 +800,7 @@ onMounted(async () => {
 
 .status-number {
   font-weight: 600;
-  color: #8B5CF6;
+  color: #8b5cf6;
   flex-shrink: 0;
 }
 
@@ -895,11 +820,8 @@ onMounted(async () => {
 /* 弹窗样式 */
 .modal-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0,0,0,0.5);
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -907,6 +829,12 @@ onMounted(async () => {
   padding: 16px;
 }
 
+.modal-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .modal {
   background: white;
   padding: 24px;
@@ -949,7 +877,7 @@ onMounted(async () => {
 .modal button {
   width: 100%;
   padding: 12px;
-  background-color: #3B82F6;
+  background-color: #3b82f6;
   color: white;
   border: none;
   border-radius: 8px;
@@ -959,6 +887,24 @@ onMounted(async () => {
 }
 
 .modal button:active {
-  background-color: #2563EB;
+  background-color: #2563eb;
+}
+
+@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>