feat(): 调整页面文件位置，并新增组件

src/router/index.js

@@ -25,7 +25,7 @@ const router = createRouter({
     {
       path: '/agency-center',
       name: 'agency-center',
-      component: () => import('../views/AgencyCenterView.vue'),
+      component: () => import('../views/Agency/AgencyCenterView.vue'),
       meta: { requiresAuth: true },
     },
     {
@@ -49,7 +49,7 @@ const router = createRouter({
     {
       path: '/message',
       name: 'message',
-      component: () => import('../views/MessageView.vue'),
+      component: () => import('../views/Agency/MessageView.vue'),
       meta: { requiresAuth: true },
     },
     {
@@ -103,13 +103,13 @@ const router = createRouter({
     {
       path: '/team-bill',
       name: 'team-bill',
-      component: () => import('../views/TeamBillView.vue'),
+      component: () => import('../views/Agency/TeamBillView.vue'),
       meta: { requiresAuth: true },
     },
     {
       path: '/team-member',
       name: 'team-member',
-      component: () => import('../views/TeamMemberView.vue'),
+      component: () => import('../views/Agency/TeamMemberView.vue'),
       meta: { requiresAuth: true },
     },
     {

src/views/Agency/AgencyCenterView.vue

@@ -23,9 +23,9 @@
           "
         >
           {{ t('my_account') }}
-          <img src="../assets/icon/agency.png" alt="" height="20px" style="margin-left: 10px" />
+          <img src="../../assets/icon/agency.png" alt="" height="20px" style="margin-left: 10px" />
         </div>
-        <img @click="goToNotification" src="../assets/icon/bell.png" height="20px" alt="" />
+        <img @click="goToNotification" src="../../assets/icon/bell.png" height="20px" alt="" />
       </div>
 
       <!-- 用户信息卡片 -->
@@ -68,7 +68,7 @@
             style="width: 32px; height: 32px; border: none; background: none; font-size: 16px"
             @click="gotoEdit"
           >
-            <img src="../assets/icon/edit.png" alt="" width="70%" />
+            <img src="../../assets/icon/edit.png" alt="" width="70%" />
           </button>
         </div>
         <!-- 我的薪资 -->
@@ -129,7 +129,7 @@
 
         <!-- help -->
         <img
-          src="../assets/icon/helpPurple.png"
+          src="../../assets/icon/helpPurple.png"
           alt=""
           class="help-btn"
           @click.stop="goToInviteMembers"
@@ -259,12 +259,12 @@
             </div>
             <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px">
               <div class="contentText">
-                {{ t('host_salary') }} {{ teamBillInfo.hostSalary || '–' }}
+                {{ t('host_salary') }}: {{ teamBillInfo.hostSalary || '–' }}
               </div>
               <div class="contentText">
-                {{ t('agent_salary') }} {{ teamBillInfo.agentSalary || '–' }}
+                {{ t('agent_salary') }}: {{ teamBillInfo.agentSalary || '–' }}
               </div>
-              <div class="contentText">{{ t('total') }} {{ teamBillInfo.total || '–' }}</div>
+              <div class="contentText">{{ t('total') }}: {{ teamBillInfo.total || '–' }}</div>
               <div style="display: flex; justify-content: flex-end">
                 <div
                   style="
@@ -320,7 +320,7 @@ import GeneralHeader from '@/components/GeneralHeader.vue'
 import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
 import { getTeamId, getUserId } from '@/utils/userStore.js'
 import { getTeamMemberCount, getTeamBill, getTeamMemberWork } from '@/api/teamBill.js'
-import { clearSelectedPayee } from '../utils/payeeStore.js'
+import { clearSelectedPayee } from '@/utils/payeeStore.js'
 import workReportBox from '@/components/HostCenter/workReportBox.vue'
 import { setDocumentDirection } from '@/locales/i18n'
 

src/views/Agency/MessageView.vue

@@ -103,9 +103,9 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import GeneralHeader from '../components/GeneralHeader.vue'
+import GeneralHeader from '@/components/GeneralHeader.vue'
-import { getApplyRecord } from '../api/teamBill.js'
+import { getApplyRecord } from '@/api/teamBill.js'
-import { processUserApply } from '../api/wallet.js'
+import { processUserApply } from '@/api/wallet.js'
 import { getTeamId } from '@/utils/userStore.js'
 import { showError, showSuccess, showWarning } from '@/utils/toast.js'
 import { formatUTCTime } from '@/utils/utcFormat.js'

src/views/Agency/TeamBillView.vue

@@ -70,9 +70,9 @@
             :key="bill.id"
             :type="bill.status"
             :date="bill.date"
-            :target="bill.target"
+            :hostSalary="bill.hostSalary"
-            :salary="bill.salary"
+            :agencySalary="bill.agencySalary"
-            :days="bill.timeDays"
+            :totalSalary="bill.totalSalary"
             more="true"
             @showMore="showBillDetail(bill)"
           ></workReportBox>
@@ -156,17 +156,18 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import GeneralHeader from '../components/GeneralHeader.vue'
+import GeneralHeader from '@/components/GeneralHeader.vue'
-import TeamBillMore from '../components/team/TeamBillMore.vue'
+import TeamBillMore from '@/components/team/TeamBillMore.vue'
 import { getUserIdentity } from '@/api/wallet.js'
 import {
   getTeamBill,
   getTeamBillWorkMembers,
   formatBillStatus,
   getTeamReleasePolicy,
-} from '../api/teamBill.js'
+} from '@/api/teamBill.js'
 import { getTeamId } from '@/utils/userStore.js'
 import { setDocumentDirection } from '@/locales/i18n'
+import workReportBox from './components/workReportBox.vue'
 
 const { t, locale } = useI18n()
 
@@ -210,11 +211,10 @@ const fetchTeamBill = async (teamId) => {
         date: `${bill.billBelong.toString().substring(0, 4)}.${bill.billBelong
           .toString()
           .substring(4, 6)}`,
-        target: getTargetLevel(bill.acceptGiftValue), // 使用政策数据计算等级
         status: formatStatus(bill.status),
-        salary: formatSalaryValue(bill.settleResult?.ownSalary || 0) || '-',
+        hostSalary: formatSalaryValue(bill.settleResult?.memberSalary || 0) || '-',
-        totalSalary: formatSalaryValue(bill.settleResult?.totalSalary) || '-',
+        agencySalary: formatSalaryValue(bill.settleResult?.ownSalary || 0) || '-',
-        timeDays: bill.effectiveDay || '-',
+        totalSalary: formatSalaryValue(bill.settleResult?.totalSalary || 0) || '-',
         createTimeFormatted: new Date(bill.createTime).toLocaleDateString(),
         updateTimeFormatted: new Date(bill.updateTime).toLocaleDateString(),
       }))

src/views/Agency/TeamMemberView.vue

@@ -26,7 +26,7 @@
             height: max-content;
           "
         >
-          <img src="../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
+          <img src="../../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
           <input
             type="text"
             name=""
@@ -248,13 +248,13 @@
 import { ref, onMounted, nextTick, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter, useRoute } from 'vue-router'
-import GeneralHeader from '../components/GeneralHeader.vue'
+import GeneralHeader from '@/components/GeneralHeader.vue'
 import {
   getTeamMembers,
   getBdAgentList,
   deleteMember as deleteMemberApi,
   getAgentMonthTarget,
-} from '../api/teamBill.js'
+} from '@/api/teamBill.js'
 import { getTeamId } from '@/utils/userStore.js'
 import { showError } from '@/utils/toast.js'
 import { setDocumentDirection } from '@/locales/i18n'

src/views/Agency/components/workReportBox.vue

@@ -0,0 +1,221 @@
+<template>
+  <div style="position: relative; width: 100%">
+    <img class="flipImg" :src="whiteBox" alt="" width="100%" style="display: block" />
+    <div :style="{ backgroundImage }" class="status-background">
+      <div
+        style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
+      >
+        <div class="type" :style="{ fontSize }">{{ typeShowText }}</div>
+      </div>
+    </div>
+    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 4%">
+      <div
+        style="height: 100%; display: flex; flex-direction: column; justify-content: space-around"
+      >
+        <div class="contentTime">{{ date }}</div>
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
+          <div class="contentText">{{ t('host_salary') }}: {{ hostSalary }}</div>
+          <div class="contentText">{{ t('agent_salary') }}: ${{ agencySalary }}</div>
+        </div>
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
+          <div class="contentText">{{ t('total') }}: {{ totalSalary }}</div>
+        </div>
+      </div>
+      <div v-if="more" class="moreBt" @click="btMore">
+        {{ t('more') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useLangStore } from '@/stores/lang'
+
+const { t } = useI18n()
+const whiteBox = new URL('@/assets/images/HostCenter/whitebox.png', import.meta.url).href
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: '',
+  },
+
+  date: {
+    type: String,
+    default: '',
+  },
+
+  hostSalary: {
+    type: String,
+    default: '',
+  },
+
+  agencySalary: {
+    type: String,
+    default: '',
+  },
+
+  totalSalary: {
+    type: String,
+    default: '',
+  },
+
+  more: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['showMore'])
+const btMore = () => {
+  emit('showMore')
+}
+
+const backgroundImage = ref('')
+const fontSize = ref('')
+const typeShowText = ref('')
+const langStore = useLangStore()
+
+// 监听语言变化，确保UI更新
+watch(
+  () => langStore.selectedLang,
+  (newLang) => {
+    console.log('Language changed in header:', newLang)
+    updateTypeShowText()
+  },
+  { deep: true }
+)
+
+// 更新展示类型
+const updateTypeShowText = () => {
+  console.log('更新展示类型')
+
+  if (props.type == 'In Progress') {
+    typeShowText.value = t('in_progress')
+  } else if (props.type == 'Pending') {
+    typeShowText.value = t('pending')
+  } else if (props.type == 'Completed') {
+    typeShowText.value = t('completed')
+  } else if (props.type == 'Out of account') {
+    typeShowText.value = t('out_of_account')
+  }
+}
+
+watch(
+  () => props.type,
+  (newType) => {
+    console.log('newType:', newType)
+    updateTypeShowText()
+    if (newType == 'In Progress' || newType == t('in_progress')) {
+      backgroundImage.value = 'linear-gradient(112deg, #759CFF 5.66%, #3D73FF 42.49%)'
+      fontSize.value = '0.9em'
+      typeShowText.value = t('in_progress')
+    }
+    if (newType == 'Pending' || newType == t('pending')) {
+      backgroundImage.value = 'linear-gradient(112deg, #FF7578 5.66%, #FF3D40 42.49%)'
+      fontSize.value = '1em'
+      typeShowText.value = t('pending')
+    }
+    if (newType == 'Completed' || newType == t('completed')) {
+      backgroundImage.value = 'linear-gradient(112deg, #75FF98 5.66%, #3DFF54 42.49%)'
+      fontSize.value = '1em'
+      typeShowText.value = t('completed')
+    }
+    if (newType == 'Out of account' || newType == t('out_of_account')) {
+      backgroundImage.value = 'linear-gradient(112deg, #BDBDBD 5.66%, #AEAEAE 42.49%)'
+      fontSize.value = '0.7em'
+      typeShowText.value = t('out_of_account')
+    }
+    return
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+  font-weight: 700;
+}
+
+.type {
+  color: #fff;
+  font-weight: 600;
+}
+
+.contentTime {
+  font-size: 1.1em;
+}
+
+.contentText {
+  font-size: 1em;
+}
+
+.moreBt {
+  font-size: 1em;
+
+  position: absolute;
+  bottom: 8%;
+  right: 4%;
+  color: #bb92ff;
+  font-weight: 500;
+}
+
+.flipImg {
+  width: 100%;
+  height: auto;
+}
+
+.status-background {
+  width: 48%;
+  height: 46%;
+  border-radius: 12px;
+  margin: 2.5%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: -1;
+  display: flex;
+  justify-content: flex-end;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .status-background {
+  right: auto;
+  left: 0;
+}
+
+/* RTL支持 */
+[dir='rtl'] .contentText {
+  text-align: right;
+}
+
+[dir='rtl'] .moreBt {
+  right: auto;
+  left: 4%;
+}
+
+@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>