From 37ab987fcc77ea16015d46b99186893f708514b3 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Mon, 29 Sep 2025 11:08:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=A2=E9=98=9F=E8=B4=A6=E5=8D=95?=
 =?UTF-8?q?=E9=A1=B5):=20=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/TeamBillView.vue | 307 ++++++++++++++++++++++---------------
 1 file changed, 183 insertions(+), 124 deletions(-)

diff --git a/src/views/TeamBillView.vue b/src/views/TeamBillView.vue
index 1e1cd5c..cf57540 100644
--- a/src/views/TeamBillView.vue
+++ b/src/views/TeamBillView.vue
@@ -4,115 +4,160 @@
 
     <div class="content">
       <!-- 成员资料信息 -->
-
-      <!-- 工作报告标题 -->
-      <div class="work-report-title">
-        <span>Work report:</span>
-        <button class="help-btn" @click="showHelpInfo">?</button>
-      </div>
-
-      <!-- 加载状态 -->
-      <div v-if="loading" class="loading-container">
-        <div class="loading-spinner"></div>
-        <p>Loading...</p>
-      </div>
-
-      <!-- 账单列表 -->
-      <div v-else-if="billList.length > 0" class="bill-list">
+      <div
+        style="
+          margin: 0 1%;
+          background-color: white;
+          padding: 16px;
+          border-radius: 12px;
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        "
+      >
+        <div style="display: flex; flex-direction: column; gap: 10px">
+          <div>History Team Income:</div>
+          <div style="font-weight: 600">$000</div>
+        </div>
         <div
-          v-for="bill in billList"
-          :key="bill.id"
-          class="bill-item"
-          @click="showBillDetail(bill)"
+          style="
+            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;
+          "
+          @click="showHelpInfo"
         >
-          <div class="bill-header">
-            <span class="bill-period">{{ bill.billTitle }}</span>
-            <span :class="['bill-status', getStatusClass(bill.status)]">
-              {{ getStatusText(bill.status) }}
-            </span>
-          </div>
-
-          <div class="bill-details">
-            <div class="bill-row">
-              <span class="bill-label">Create Time:</span>
-              <span class="bill-value">{{ bill.createTimeFormatted }}</span>
-            </div>
-
-            <div class="bill-row">
-              <span class="bill-label">Period:</span>
-              <span class="bill-value">{{ bill.billBelong }}</span>
-            </div>
-
-            <div class="bill-row">
-              <span class="bill-label">Last Update:</span>
-              <span class="bill-value">{{ bill.updateTimeFormatted }}</span>
-            </div>
-          </div>
-
-          <div class="more-btn">
-            <span>More</span>
-            <span class="arrow">></span>
-          </div>
+          ?
         </div>
       </div>
 
-      <!-- 空数据状态 -->
-      <div v-else class="empty-state">
-        <div class="empty-icon">📋</div>
-        <p>No data available</p>
-      </div>
-    </div>
+      <!-- 工作报告 -->
+      <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="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 v-if="loading" class="loading-container">
+          <div class="loading-spinner"></div>
+          <p>Loading...</p>
         </div>
 
-        <div class="help-modal-body">
-          <div class="help-section">
-            <p class="help-description">
-              Below is the work report of the team members. Click "More" to view detailed daily work records.
-            </p>
-          </div>
+        <!-- 账单列表 -->
+        <div v-else-if="billList.length > 0" class="bill-list">
+          <div
+            v-for="bill in billList"
+            :key="bill.id"
+            class="bill-item"
+            @click="showBillDetail(bill)"
+          >
+            <div class="bill-header">
+              <span class="bill-period">{{ bill.billTitle }}</span>
+              <span :class="['bill-status', getStatusClass(bill.status)]">
+                {{ getStatusText(bill.status) }}
+              </span>
+            </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">UNPAID:</span>
-                <span class="status-desc">Work is currently in progress.</span>
+            <div class="bill-details">
+              <div class="bill-row">
+                <span class="bill-label">Create Time:</span>
+                <span class="bill-value">{{ bill.createTimeFormatted }}</span>
               </div>
-              <div class="status-item">
-                <span class="status-number">(2)</span>
-                <span class="status-name">HANG_UP:</span>
-                <span class="status-desc">Work has been suspended or is pending review.</span>
+
+              <div class="bill-row">
+                <span class="bill-label">Period:</span>
+                <span class="bill-value">{{ bill.billBelong }}</span>
               </div>
-              <div class="status-item">
-                <span class="status-number">(3)</span>
-                <span class="status-name">PAY_OUT:</span>
-                <span class="status-desc">Work has been completed and paid out.</span>
-              </div>
-              <div class="status-item">
-                <span class="status-number">(4)</span>
-                <span class="status-name">PAID:</span>
-                <span class="status-desc">Work has been completed and settled.</span>
+
+              <div class="bill-row">
+                <span class="bill-label">Last Update:</span>
+                <span class="bill-value">{{ bill.updateTimeFormatted }}</span>
               </div>
             </div>
+
+            <div class="more-btn">
+              <span>More</span>
+              <span class="arrow">></span>
+            </div>
           </div>
         </div>
+
+        <!-- 空数据状态 -->
+        <div v-else class="empty-state">
+          <div class="empty-icon">📋</div>
+          <p>No data available</p>
+        </div>
       </div>
     </div>
 
-    <!-- 账单详情模态框 (使用 TeamBillMore 组件) -->
-    <div v-if="showDetailModal" class="modal-overlay">
-      <div class="detail-modal-wrapper">
+    <!-- 遮罩层 -->
+    <div v-if="showHelpModal || showDetailModal" class="modal-overlay" @click="closeModal">
+      <!-- 帮助模态框 -->
+      <div
+        v-if="showHelpModal"
+        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;
+
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            "
+            @click="closeModal"
+          >
+            ×
+          </div>
+        </div>
+
+        <div style="padding: 0 20px 20px; overflow-y: auto">
+          <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>
+          <p>(3)Out of account: waiting for system verification.</p>
+          <p>(4)In progress: work now in progress.</p>
+        </div>
+      </div>
+
+      <!-- 账单详情模态框 (使用 TeamBillMore 组件) -->
+      <div v-if="showDetailModal" style="position: fixed; bottom: 0; width: 100%">
         <TeamBillMore
           :billData="selectedBill"
-          @close="closeDetailModal"
+          @close="closeModal"
           @propsReceived="handlePropsReceived"
         />
       </div>
@@ -125,7 +170,7 @@ import { ref, onMounted } from 'vue'
 import MobileHeader from '../components/MobileHeader.vue'
 import TeamBillMore from '../components/team/TeamBillMore.vue'
 import { getTeamBill, getTeamBillWorkMembers, formatBillStatus } from '../api/teamBill.js'
-import { getTeamId } from "@/utils/userStore.js"
+import { getTeamId } from '@/utils/userStore.js'
 
 const loading = ref(false)
 const showHelpModal = ref(false)
@@ -143,11 +188,11 @@ const fetchTeamBill = async (teamId) => {
     const response = await getTeamBill(teamId)
 
     if (response.status && response.body) {
-      billList.value = response.body.map(bill => ({
+      billList.value = response.body.map((bill) => ({
         ...bill,
         // 将时间戳转换为可读格式
         createTimeFormatted: new Date(bill.createTime).toLocaleDateString(),
-        updateTimeFormatted: new Date(bill.updateTime).toLocaleDateString()
+        updateTimeFormatted: new Date(bill.updateTime).toLocaleDateString(),
       }))
     }
   } catch (error) {
@@ -183,11 +228,6 @@ const getStatusClass = (status) => {
   return statusInfo.class
 }
 
-// 移除不再使用的函数
-// const formatDate = (dateNumber) => {
-//   return formatDateDisplay(dateNumber)
-// }
-
 // 显示账单详情
 const showBillDetail = async (bill) => {
   // 获取该账单的成员工作信息
@@ -195,14 +235,15 @@ const showBillDetail = async (bill) => {
   selectedBillMembers.value = membersData
   selectedBill.value = {
     ...bill,
-    members: membersData
+    members: membersData,
   }
   showDetailModal.value = true
 }
 
-// 关闭详情模态框
-const closeDetailModal = () => {
+// 关闭遮罩层
+const closeModal = () => {
   showDetailModal.value = false
+  showHelpModal.value = false
   selectedBill.value = null
 }
 
@@ -211,11 +252,6 @@ const showHelpInfo = () => {
   showHelpModal.value = true
 }
 
-// 关闭帮助模态框
-const closeHelpModal = () => {
-  showHelpModal.value = false
-}
-
 // 处理道具领取成功
 const handlePropsReceived = () => {
   // 可以在这里添加提示或者刷新数据
@@ -235,6 +271,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
 .team-bill {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
   min-height: 100vh;
@@ -253,7 +294,7 @@ onMounted(() => {
   padding: 16px;
   border-radius: 12px;
   margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .member-info {
@@ -304,7 +345,7 @@ onMounted(() => {
 
 .member-status {
   font-size: 12px;
-  color: #10B981;
+  color: #10b981;
 }
 
 /* 工作报告标题 */
@@ -330,7 +371,7 @@ onMounted(() => {
 }
 
 .help-btn:hover {
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
 }
 
 /* 加载状态 */
@@ -346,15 +387,19 @@ onMounted(() => {
   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);
+  }
 }
 
 /* 账单列表 */
@@ -368,7 +413,7 @@ onMounted(() => {
   background-color: white;
   padding: 16px;
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -398,17 +443,17 @@ onMounted(() => {
 }
 
 .bill-status.in-progress {
-  background-color: #DBEAFE;
-  color: #1D4ED8;
+  background-color: #dbeafe;
+  color: #1d4ed8;
 }
 
 .bill-status.pending {
-  background-color: #FEF3C7;
-  color: #D97706;
+  background-color: #fef3c7;
+  color: #d97706;
 }
 
 .bill-status.completed {
-  background-color: #D1FAE5;
+  background-color: #d1fae5;
   color: #059669;
 }
 
@@ -448,7 +493,7 @@ onMounted(() => {
   justify-content: flex-end;
   align-items: center;
   gap: 4px;
-  color: #C084FC;
+  color: #c084fc;
   font-size: 14px;
   cursor: pointer;
 }
@@ -474,16 +519,12 @@ onMounted(() => {
 /* 模态框公共样式 */
 .modal-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  padding: 16px;
 }
 
 .help-modal-content,
@@ -597,7 +638,7 @@ onMounted(() => {
 
 .status-number {
   font-weight: 600;
-  color: #8B5CF6;
+  color: #8b5cf6;
   flex-shrink: 0;
 }
 
@@ -636,4 +677,22 @@ onMounted(() => {
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
   }
 }
+
+@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>