feat(历史薪资页): 使用新的头部组件，对接语言切换功能并调整布局

2025-10-30 10:35:31 +08:00 · 2025-10-30 10:35:31 +08:00 · c11d7f4d1b
commit c11d7f4d1b
parent 94b7c6d419
6 changed files with 83 additions and 57 deletions
--- a/src/components/GeneralHeader.vue
+++ b/src/components/GeneralHeader.vue
@ -14,7 +14,7 @@
      "
    >
      <!-- 返回键 -->
-      <div style="width: 10%; display: flex; align-items: center">
+      <div style="width: 6%; display: flex; align-items: center">
        <button v-if="showBack" class="back-btn" @click="handleBack">
          <img
            class="flipImg"
@ -67,24 +67,7 @@
              >
            </div> -->
        <transition name="slide-fade">
-          <div
-            style="
-              position: absolute;
-              right: 0;
-              top: 100%;
-              padding: 10px;
-              display: flex;
-              flex-direction: column;
-              width: max-content;
-              background-color: rgba(255, 255, 255);
-              border-radius: 10px;
-              box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-              margin-top: 5px;
-              backdrop-filter: blur(8px);
-            "
-            v-show="visibleList"
-            class="extraList"
-          >
+          <div v-show="visibleList" class="extraList">
            <div
              style="padding: 8px; color: black !important; font-weight: 590"
              v-for="lang in langStore.langList"
@ -241,6 +224,21 @@ onMounted(() => {
  transform: scale(0.9);
 }

+.extraList {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  background-color: rgba(255, 255, 255);
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  margin-top: 5px;
+  backdrop-filter: blur(8px);
+}
+
 .extraList > div:not(:last-child) {
  border-bottom: 0.1px solid black;
 }
@ -249,6 +247,11 @@ onMounted(() => {
  transform: scaleX(-1);
 }

+[dir='rtl'] .extraList {
+  right: auto;
+  left: 0;
+}
+
@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
--- a/src/components/HostCenter/workReportBox.vue
+++ b/src/components/HostCenter/workReportBox.vue
@ -22,13 +22,8 @@
          <div class="contentText" v-if="income">{{ t('total_income') }}: {{ income }}</div>
        </div>
      </div>
-      <div
-        v-if="more"
-        class="moreBt"
-        style="position: absolute; bottom: 8%; right: 4%; color: #bb92ff; font-weight: 500"
-        @click="btMore"
-      >
-        {{ t('more') }} >
+      <div v-if="more" class="moreBt" @click="btMore">
+        {{ t('more') }}
      </div>
    </div>
  </div>
@ -133,6 +128,12 @@ watch(

 .moreBt {
  font-size: 1em;
+
+  position: absolute;
+  bottom: 8%;
+  right: 4%;
+  color: #bb92ff;
+  font-weight: 500;
 }

 .flipImg {
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@ -34,7 +34,7 @@
  "target": "الهدف",
  "salary": "راتب",
  "time_days": "الوقت (الأيام)",
-  "more": "أكثر",
+  "more": "أكثر >",
  "exchange": "التبديل",
  "transfer": "تحويل الأموال",
  "host_salary": "راتب المضيف",
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -34,7 +34,7 @@
  "target": "Target",
  "salary": "Salary",
  "time_days": "Time（Days）",
-  "more": "More",
+  "more": "More >",
  "exchange": "Exchange",
  "transfer": "Transfer",
  "host_salary": "Host Salary",
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@ -34,7 +34,7 @@
  "target": "目标",
  "salary": "工资",
  "time_days": "时间（天数）",
-  "more": "更多",
+  "more": "更多 >",
  "exchange": "兑换",
  "transfer": "转账",
  "host_salary": "主播工资",
--- a/src/views/HistorySalaryView.vue
+++ b/src/views/HistorySalaryView.vue
@ -1,6 +1,14 @@
 <template>
  <div class="history-salary gradient-background-circles">
-    <MobileHeader title="History Salary" />
+    <!-- 修改头部使用 GeneralHeader 组件 -->
+    <GeneralHeader
+      :title="t('history_salary')"
+      :showBack="true"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+      @help="showHelpInfo"
+    />

    <!-- 内容 -->
    <div class="content">
@ -18,7 +26,7 @@
        "
      >
        <div style="display: flex; flex-direction: column; gap: 10px">
-          <div>History Salary</div>
+          <div>{{ t('history_salary') }}</div>
          <div style="font-weight: 600">${{ totalSalary }}</div>
        </div>
        <img src="../assets/icon/help.png" alt="" class="info-btn" @click.stop="showHelpInfo" />
@ -26,12 +34,14 @@

      <!-- 工作报告 -->
      <div style="margin-bottom: 20px">
-        <div style="margin: 10px 1%; font-weight: 600; color: rgba(0, 0, 0, 0.4)">Work report:</div>
+        <div style="margin: 10px 1%; font-weight: 600; color: rgba(0, 0, 0, 0.4)">
+          {{ t('work_report') }}
+        </div>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <div class="loading-spinner"></div>
-          <p>Loading...</p>
+          <p>{{ t('loading') }}...</p>
        </div>

        <!-- 报告列表 -->
@ -57,7 +67,7 @@
        <!-- 空数据状态 -->
        <div v-else class="empty-state">
          <div class="empty-icon">📋</div>
-          <p>No data available</p>
+          <p>{{ t('no_data_available') }}</p>
        </div>
      </div>
    </div>
@ -81,7 +91,7 @@
        >
          <div style="display: flex; justify-content: center; align-items: center">
            <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">
-              Salary details
+              {{ t('salary_details') }}
            </div>
          </div>

@ -110,7 +120,7 @@
            v-if="dailyTargets.length > 0"
            style="font-size: 16px; font-weight: 600; color: #333"
          >
-            Monthly Salary:
+            {{ t('monthly_salary') }}:
          </div>

          <!-- 等级卡片 -->
@ -125,10 +135,10 @@
          >
            <div>
              <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px">
-                <div class="text-700">Target: {{ selectedReport.target }}</div>
-                <div class="text-700">Salary: ${{ selectedReport.salary }}</div>
-                <div class="text-700">Time(Days): {{ selectedReport.timeDays }}</div>
-                <div class="text-700">Total income: {{ selectedReport.income }}</div>
+                <div class="text-700">{{ t('target') }}: {{ selectedReport.target }}</div>
+                <div class="text-700">{{ t('salary') }}: ${{ selectedReport.salary }}</div>
+                <div class="text-700">{{ t('time_days') }}: {{ selectedReport.timeDays }}</div>
+                <div class="text-700">{{ t('total_income') }}: {{ selectedReport.income }}</div>
              </div>
            </div>
          </div>
@ -137,7 +147,7 @@
            v-if="dailyTargets.length > 0"
            style="font-size: 16px; font-weight: 600; color: #333"
          >
-            Daily salary:
+            {{ t('daily_salary') }}:
          </div>

          <div style="overflow-y: auto" class="salaryList">
@ -156,10 +166,10 @@
                  {{ formatDateNumber(daily.dateNumber) }}
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center">
-                  <div class="text-700">Income: {{ daily.acceptGiftValue }}</div>
+                  <div class="text-700">{{ t('income') }}: {{ daily.acceptGiftValue }}</div>

                  <div style="font-size: 14px">
-                    <span class="text-700">Time:</span>
+                    <span class="text-700">{{ t('time') }}:</span>
                    <span
                      class="text-700"
                      style="font-weight: 600"
@ -201,7 +211,9 @@
              position: relative;
            "
          >
-            <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">Help</div>
+            <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">
+              {{ t('help') }}
+            </div>
            <div
              style="
                position: absolute;
@ -219,14 +231,12 @@
          </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>
-            <p>(3)Out of account: waiting for system verification.</p>
-            <p>(4)In progress: work now in progress.</p>
+            <p>{{ t('work_report_description') }}</p>
+            <p>{{ t('status_description') }}</p>
+            <p>{{ t('status_completed') }}</p>
+            <p>{{ t('status_pending') }}</p>
+            <p>{{ t('status_out_of_account') }}</p>
+            <p>{{ t('status_in_progress') }}</p>
          </div>
        </div>
      </div>
@ -236,11 +246,18 @@

 <script setup>
 import { onMounted, ref, watch } from 'vue'
-import MobileHeader from '../components/MobileHeader.vue'
+import { useI18n } from 'vue-i18n'
+import GeneralHeader from '@/components/GeneralHeader.vue'
 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'
+import { setDocumentDirection } from '@/locales/i18n'
+
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)

 const totalSalary = ref('0.00')
 const showHelpModal = ref(false)
@ -417,10 +434,10 @@ const formatSalaryValue = (value) => {
 // 格式化状态文本（与 TeamBillView 保持一致）
 const getStatusText = (status) => {
  const statusMap = {
-    SETTLED: 'Completed',
-    UNPAID: 'In Progress',
-    HANG_UP: 'Out of Account',
-    PAY_OUT: 'Completed',
+    SETTLED: t('completed'),
+    UNPAID: t('in_progress'),
+    HANG_UP: t('out_of_account'),
+    PAY_OUT: t('completed'),
  }
  return statusMap[status] || status
 }
@ -873,4 +890,9 @@ onMounted(async () => {
    font-size: 24px;
  }
 }
+
+/* RTL支持 */
+[dir='rtl'] .info-btn {
+  /* transform: scaleX(-1); */
+}
 </style>