history salary 修复

src/views/HistorySalaryView.vue

@@ -7,9 +7,9 @@
       <div class="host-salary-card">
         <div class="salary-header">
           <h3>Host Salary</h3>
-<!--          <button class="info-btn" @click="showSalaryInfo">
+          <button class="info-btn" @click="showHelpInfo">
             <span>?</span>
-          </button>-->
+          </button>
         </div>
         <div class="salary-amount">${{ totalSalary }}</div>
       </div>
@@ -55,17 +55,6 @@
                   <span class="detail-label">Time(Days):</span>
                   <span class="detail-value">{{ report.timeDays }}</span>
                 </div>
-                <div class="detail-item">
-                  <span class="detail-label">Agent Salary:</span>
-                  <span class="detail-value">{{ report.agentSalary }}</span>
-                </div>
-              </div>
-
-              <div class="detail-row">
-                <div class="detail-item">
-                  <span class="detail-label">Total Salary:</span>
-                  <span class="detail-value total-salary">{{ report.totalSalary }}</span>
-                </div>
                 <div class="detail-item">
                   <!-- More 按钮 -->
                   <button v-if="report.hasDetails" class="more-btn" @click="showReportDetail(report)">
@@ -93,10 +82,10 @@
           <h3>{{ selectedReport?.date || 'Work Details' }}</h3>
           <button class="close-btn" @click="closeDetailModal">×</button>
         </div>
-        
+
         <div class="detail-content">
           <!-- 等级卡片 -->
-          <div v-if="levelData" class="level-card">
+<!--          <div v-if="levelData" class="level-card">
             <div class="level-header">
               <h4>{{ levelData.level }}</h4>
             </div>
@@ -125,28 +114,71 @@
                   <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>Target: {{ formatGiftValue(daily.acceptGiftValue) }}</span>
+                  </div>
+                  <div class="daily-time">
+                    <span>Time: </span>
+                    <span class="time-value">{{ formatOnlineTime(daily.onlineTime) }}/120</span>
+                  </div>
                 </div>
               </div>
             </div>
           </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 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.
+            </p>
+          </div>
           
-          <!-- 每日目标列表 -->
+          <div class="help-section">
-          <div v-if="dailyTargets.length > 0" class="daily-targets">
+            <h4>Status Description:</h4>
-            <h4>Daily Targets</h4>
+            <div class="status-list">
-            <div class="daily-list">
+              <div class="status-item">
-              <div v-for="daily in dailyTargets" :key="daily.dateNumber" class="daily-item">
+                <span class="status-number">(1)</span>
-                <div class="daily-date">{{ formatDateNumber(daily.dateNumber) }}</div>
+                <span class="status-name">Completed:</span>
-                <div class="daily-stats">
+                <span class="status-desc">The system has completed the settlement report.</span>
-                  <div class="daily-stat">
+              </div>
-                    <span class="daily-label">Online Time:</span>
+              <div class="status-item">
-                    <span class="daily-value">{{ formatOnlineTime(daily.onlineTime) }}</span>
+                <span class="status-number">(2)</span>
-                  </div>
+                <span class="status-name">Pending:</span>
-                  <div class="daily-stat">
+                <span class="status-desc">There is currently a dispute, and the system cannot perform a settlement.</span>
-                    <span class="daily-label">Gift Value:</span>
+              </div>
-                    <span class="daily-value">${{ formatGiftValue(daily.acceptGiftValue) }}</span>
+              <div class="status-item">
-                  </div>
+                <span class="status-number">(3)</span>
-                </div>
+                <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>
           </div>
@@ -191,6 +223,7 @@ import { getTeamMemberWork } from '../api/teamBill.js'
 const router = useRouter()
 const totalSalary = ref('12345')
 const showSalaryModal = ref(false)
+const showHelpModal = ref(false)
 const loading = ref(false)
 const showDetailModal = ref(false)
 const selectedReport = ref(null)
@@ -211,7 +244,7 @@ const fetchWorkReports = async (userId) => {
       // 将 targets 数据转换为 workReports 格式
       const targets = response.body.targets || []
       originalTargetsData.value = targets // 保存原始数据
-      
+
       workReports.value = targets.map(target => ({
         id: target.id,
         date: target.billTitle,
@@ -271,15 +304,15 @@ const getStatusText = (status) => {
 // 格式化礼物数值
 const formatGiftValue = (value) => {
   if (!value || value === '0') return '0'
-  
+
   // 如果已经是格式化的字符串，直接返回
   if (typeof value === 'string' && (value.includes('K') || value.includes('M'))) {
     return value
   }
-  
+
   const numValue = parseFloat(value)
   if (isNaN(numValue)) return '0'
-  
+
   if (numValue >= 1000000) {
     return `${(numValue / 1000000).toFixed(1)}M`
   } else if (numValue >= 1000) {
@@ -291,24 +324,14 @@ const formatGiftValue = (value) => {
 // 显示报告详情
 const showReportDetail = (report) => {
   selectedReport.value = report
-  
+
   if (report.originalData && report.originalData.target) {
     const targetData = report.originalData.target
-    
+
-    // 生成等级数据（模拟 Lv.1, Lv.2 等）
+    // 直接设置每日目标数据
-    levelData.value = {
-      level: `Lv.${getLevelFromGiftValue(targetData.acceptGiftValue)}`,
-      timeHours: formatMinutesToHours(targetData.onlineTime),
-      target: formatGiftValue(targetData.acceptGiftValue),
-      hostSalary: formatSalaryValue(targetData.settlementResult?.ownSalary),
-      agentSalary: formatSalaryValue(targetData.settlementResult?.memberSalary),
-      totalSalary: formatSalaryValue(targetData.settlementResult?.totalSalary)
-    }
-    
-    // 设置每日目标数据
     dailyTargets.value = targetData.dailyTargets || []
   }
-  
+
   showDetailModal.value = true
 }
 
@@ -316,7 +339,6 @@ const showReportDetail = (report) => {
 const closeDetailModal = () => {
   showDetailModal.value = false
   selectedReport.value = null
-  levelData.value = null
   dailyTargets.value = []
 }
 
@@ -335,16 +357,10 @@ const formatMinutesToHours = (minutes) => {
   return Math.round(mins / 60)
 }
 
-// 格式化在线时间
+// 格式化在线时间（为 Daily Salary 显示分钟数）
 const formatOnlineTime = (minutes) => {
   const mins = parseInt(minutes) || 0
-  const hours = Math.floor(mins / 60)
+  return mins.toString()
-  const remainingMins = mins % 60
-  
-  if (hours > 0) {
-    return remainingMins > 0 ? `${hours}h ${remainingMins}m` : `${hours}h`
-  }
-  return `${mins}m`
 }
 
 // 格式化日期数字
@@ -352,13 +368,23 @@ const formatDateNumber = (dateNumber) => {
   if (!dateNumber) return ''
   const dateStr = dateNumber.toString()
   if (dateStr.length !== 8) return dateStr
-  
+
   const year = dateStr.substring(0, 4)
   const month = dateStr.substring(4, 6)
   const day = dateStr.substring(6, 8)
   return `${month}/${day}/${year}`
 }
 
+// 显示帮助信息
+const showHelpInfo = () => {
+  showHelpModal.value = true
+}
+
+// 关闭帮助模态框
+const closeHelpModal = () => {
+  showHelpModal.value = false
+}
+
 // 显示薪资信息
 const showSalaryInfo = () => {
   showSalaryModal.value = true
@@ -407,17 +433,24 @@ onMounted(() => {
 }
 
 .info-btn {
-  width: 24px;
+  width: 20px;
-  height: 24px;
+  height: 20px;
-  border-radius: 12px;
+  border-radius: 10px;
-  border: 1px solid #ddd;
+  border: 1px solid #8B5CF6;
-  background-color: white;
+  background-color: #8B5CF6;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: 12px;
-  color: #666;
+  color: white;
   cursor: pointer;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.info-btn:hover {
+  background-color: #7C3AED;
+  border-color: #7C3AED;
 }
 
 .salary-amount {
@@ -686,12 +719,12 @@ onMounted(() => {
   color: #333;
 }
 
-/* 每日目标样式 */
+/* 每日薪资样式 */
-.daily-targets {
+.daily-salary {
   margin-top: 20px;
 }
 
-.daily-targets h4 {
+.daily-salary h4 {
   margin: 0 0 12px 0;
   font-size: 16px;
   font-weight: 600;
@@ -705,40 +738,131 @@ onMounted(() => {
 }
 
 .daily-item {
-  background-color: #f9fafb;
+  background-color: white;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
-  padding: 12px;
+  padding: 16px;
 }
 
 .daily-date {
-  font-size: 14px;
+  font-size: 12px;
-  font-weight: 600;
+  color: #666;
-  color: #333;
   margin-bottom: 8px;
 }
 
-.daily-stats {
+.daily-info {
   display: flex;
   justify-content: space-between;
+  align-items: center;
+}
+
+.daily-target {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.daily-time {
+  font-size: 14px;
+  color: #333;
+}
+
+.time-value {
+  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;
+  overflow-y: auto;
+}
+
+.help-section {
+  margin-bottom: 20px;
+}
+
+.help-section:last-child {
+  margin-bottom: 0;
+}
+
+.help-description {
+  font-size: 14px;
+  line-height: 1.5;
+  color: #555;
+  margin: 0;
+  padding: 12px;
+  background-color: #f0f9ff;
+  border-radius: 8px;
+  border-left: 4px solid #3b82f6;
+}
+
+.help-section h4 {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.status-list {
+  display: flex;
+  flex-direction: column;
   gap: 12px;
 }
 
-.daily-stat {
+.status-item {
   display: flex;
-  flex-direction: column;
+  gap: 8px;
-  gap: 2px;
+  padding: 12px;
+  background-color: #f9fafb;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
 }
 
-.daily-label {
+.status-number {
-  font-size: 12px;
+  font-weight: 600;
-  color: #666;
+  color: #8B5CF6;
+  flex-shrink: 0;
 }
 
-.daily-value {
+.status-name {
-  font-size: 14px;
   font-weight: 600;
   color: #333;
+  flex-shrink: 0;
+  min-width: 100px;
+}
+
+.status-desc {
+  color: #666;
+  line-height: 1.4;
+  flex: 1;
 }
 
 /* 弹窗样式 */