feat(): 调整页面文件位置，并新增组件
This commit is contained in:
hzj
parent
d4625cde65
commit
f85be1267b
@ -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 },
|
||||
},
|
||||
{
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -103,9 +103,9 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GeneralHeader from '../components/GeneralHeader.vue'
|
||||
import { getApplyRecord } from '../api/teamBill.js'
|
||||
import { processUserApply } from '../api/wallet.js'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import { getApplyRecord } from '@/api/teamBill.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'
|
||||
@ -70,9 +70,9 @@
|
||||
:key="bill.id"
|
||||
:type="bill.status"
|
||||
:date="bill.date"
|
||||
:target="bill.target"
|
||||
:salary="bill.salary"
|
||||
:days="bill.timeDays"
|
||||
:hostSalary="bill.hostSalary"
|
||||
:agencySalary="bill.agencySalary"
|
||||
: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 TeamBillMore from '../components/team/TeamBillMore.vue'
|
||||
import GeneralHeader from '@/components/GeneralHeader.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) || '-',
|
||||
totalSalary: formatSalaryValue(bill.settleResult?.totalSalary) || '-',
|
||||
timeDays: bill.effectiveDay || '-',
|
||||
hostSalary: formatSalaryValue(bill.settleResult?.memberSalary || 0) || '-',
|
||||
agencySalary: formatSalaryValue(bill.settleResult?.ownSalary || 0) || '-',
|
||||
totalSalary: formatSalaryValue(bill.settleResult?.totalSalary || 0) || '-',
|
||||
createTimeFormatted: new Date(bill.createTime).toLocaleDateString(),
|
||||
updateTimeFormatted: new Date(bill.updateTime).toLocaleDateString(),
|
||||
}))
|
||||
@ -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'
|
||||
221
src/views/Agency/components/workReportBox.vue
Normal file
221
src/views/Agency/components/workReportBox.vue
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user