feat(代理中心页): 使用新的头部组件，对接语言切换功能并调整布局
This commit is contained in:
hzj
parent
84d36f504e
commit
39c2a4614f
@ -5,7 +5,7 @@
|
||||
<div
|
||||
style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
|
||||
>
|
||||
<div class="type" :style="{ fontSize }">{{ type }}</div>
|
||||
<div class="type" :style="{ fontSize }">{{ typeShowText }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 4%">
|
||||
@ -32,6 +32,7 @@
|
||||
<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
|
||||
@ -80,25 +81,56 @@ const btMore = () => {
|
||||
|
||||
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 = () => {
|
||||
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) => {
|
||||
if (newType == t('in_progress')) {
|
||||
console.log('newType:', newType)
|
||||
|
||||
if (newType == 'In Progress') {
|
||||
backgroundImage.value = 'linear-gradient(112deg, #759CFF 5.66%, #3D73FF 42.49%)'
|
||||
fontSize.value = '0.9em'
|
||||
typeShowText.value = t('in_progress')
|
||||
}
|
||||
if (newType == t('pending')) {
|
||||
if (newType == 'Pending') {
|
||||
backgroundImage.value = 'linear-gradient(112deg, #FF7578 5.66%, #FF3D40 42.49%)'
|
||||
fontSize.value = '1em'
|
||||
typeShowText.value = t('pending')
|
||||
}
|
||||
if (newType == t('completed')) {
|
||||
if (newType == 'Completed') {
|
||||
backgroundImage.value = 'linear-gradient(112deg, #75FF98 5.66%, #3DFF54 42.49%)'
|
||||
fontSize.value = '1em'
|
||||
typeShowText.value = t('completed')
|
||||
}
|
||||
if (newType == t('out_of_account')) {
|
||||
if (newType == '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
|
||||
},
|
||||
|
||||
@ -44,7 +44,6 @@
|
||||
"leave": "يغادر",
|
||||
"work_report": "سجل الراتب：",
|
||||
"in_progress": "قيد التنفيذ",
|
||||
"pending": "قيد الانتظار",
|
||||
"completed": "مكتمل",
|
||||
"out_of_account": "لا يعلق بالحساب",
|
||||
"salary_details": "تفاصيل الراتب",
|
||||
@ -77,7 +76,8 @@
|
||||
"team_member": "عضو الفريق",
|
||||
"history_team_income": "سجل دخل الفريق：",
|
||||
"enter_host_id": "يرجى إدخال id المضيف",
|
||||
"confirm_remove_member": "هل أنت متأكد من أنك تريد إزالةالمعرف: 1234567890 من الفريق؟",
|
||||
"confirm_remove_member_start": "هل أنت متأكد من أنك تريد إزالةالمعرف:",
|
||||
"confirm_remove_member_end": "من الفريق؟",
|
||||
"invite_members": "دعوة الأعضاء",
|
||||
"invite_download_app": "دعوة المستخدمين لتنزيل Likei",
|
||||
"invited_users_login": "يجب على المستخدمين المدعوين تسجيل الدخول إلى Likei",
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
"application_help_detail": "Enter your agency's lD and click Apply to submit your application.After the application is successful, please wait patiently for the agent to pass the application",
|
||||
"got_it": "Got it",
|
||||
"application_records": "Application Records：",
|
||||
"agency": "Agency：",
|
||||
"agency": "Agency",
|
||||
"pending": "Pending",
|
||||
"cancel": "Cancel",
|
||||
"success": "Success",
|
||||
@ -44,7 +44,6 @@
|
||||
"leave": "Leave",
|
||||
"work_report": "Work report：",
|
||||
"in_progress": "In Progress",
|
||||
"pending": "Pending",
|
||||
"completed": "Completed",
|
||||
"out_of_account": "Out of account",
|
||||
"salary_details": "Salary Details",
|
||||
@ -77,7 +76,8 @@
|
||||
"team_member": "Team Member",
|
||||
"history_team_income": "History Team Income：",
|
||||
"enter_host_id": "Please enter the host ID",
|
||||
"confirm_remove_member": "Are you sure you want to remove ID：from the team?",
|
||||
"confirm_remove_member_start": "Are you sure you want to remove ID:",
|
||||
"confirm_remove_member_end": "from the team?",
|
||||
"invite_members": "Invite Members",
|
||||
"invite_download_app": "1、Invite users to download Likei APP.",
|
||||
"invited_users_login": "2、Invited users need to log in to the Likei APP.",
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
"application_help_detail": "输入您所在机构的ID，然后点击\"申请\"提交您的申请。申请成功后，请耐心等待该代理通过申请。",
|
||||
"got_it": "知道了",
|
||||
"application_records": "申请记录：",
|
||||
"agency": "主播代理：",
|
||||
"agency": "主播代理",
|
||||
"pending": "待处理",
|
||||
"cancel": "取消",
|
||||
"success": "成功",
|
||||
@ -44,7 +44,6 @@
|
||||
"leave": "离开",
|
||||
"work_report": "工作记录",
|
||||
"in_progress": "进行中",
|
||||
"pending": "待处理",
|
||||
"completed": "已完成",
|
||||
"out_of_account": "与账户无关",
|
||||
"salary_details": "工资明细",
|
||||
@ -77,7 +76,8 @@
|
||||
"team_member": "团队成员",
|
||||
"history_team_income": "历史团队收入",
|
||||
"enter_host_id": "请输入主播id",
|
||||
"confirm_remove_member": "您确定要将ID：从团队中移除吗？",
|
||||
"confirm_remove_member_start": "您确定要将ID：",
|
||||
"confirm_remove_member_end": "从团队中移除吗？",
|
||||
"invite_members": "邀请成员",
|
||||
"invite_download_app": "邀请用户下载Likei APP",
|
||||
"invited_users_login": "受邀用户需登录Likei应用程序",
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<div class="agency-center gradient-background-circles">
|
||||
<MobileHeader title="Agency Center" />
|
||||
<!-- 使用 GeneralHeader 替换 MobileHeader -->
|
||||
<GeneralHeader
|
||||
:title="t('agency_center')"
|
||||
:isHomePage="true"
|
||||
:showLanguageList="true"
|
||||
color="black"
|
||||
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
||||
/>
|
||||
|
||||
<div class="content">
|
||||
<!-- 身份 -->
|
||||
@ -15,7 +22,7 @@
|
||||
font-size: 1.3em;
|
||||
"
|
||||
>
|
||||
My account
|
||||
{{ t('my_account') }}
|
||||
<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="" />
|
||||
@ -49,7 +56,13 @@
|
||||
<div style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #333">
|
||||
{{ userInfo.userNickname || userInfo.name }}
|
||||
</div>
|
||||
<div style="margin: 0; font-size: 14px; color: #666">ID: {{ userInfo.id }}</div>
|
||||
<div style="margin: 0; font-size: 14px; color: #666">
|
||||
<span style="display: flex; align-items: center">
|
||||
<span>ID</span>
|
||||
<span style="margin: 0 2px">:</span>
|
||||
<span>{{ userInfo.id }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
style="width: 32px; height: 32px; border: none; background: none; font-size: 16px"
|
||||
@ -61,7 +74,7 @@
|
||||
<!-- 我的薪资 -->
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 5px">
|
||||
<div style="font-weight: 600">My salary:</div>
|
||||
<div style="font-weight: 600">{{ t('my_salary') }}</div>
|
||||
<button
|
||||
style="
|
||||
font-weight: 500;
|
||||
@ -71,7 +84,7 @@
|
||||
"
|
||||
@click="goToPersonalSalary"
|
||||
>
|
||||
Personal Salary >
|
||||
{{ t('personal_salary') }} >
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -80,13 +93,13 @@
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr)">
|
||||
<div>
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4); margin-bottom: 5px">
|
||||
History Salary:
|
||||
{{ t('history_salary') }}
|
||||
</div>
|
||||
<div style="font-weight: 600">${{ salaryInfo.hostSalary }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4); margin-bottom: 5px">
|
||||
Current Salary:
|
||||
{{ t('current_salary') }}
|
||||
</div>
|
||||
<div style="font-weight: 600">${{ salaryInfo.currentSalary }}</div>
|
||||
</div>
|
||||
@ -102,7 +115,7 @@
|
||||
@click="taskTab = 'host'"
|
||||
ref="tabHost"
|
||||
>
|
||||
Host
|
||||
{{ t('host') }}
|
||||
</div>
|
||||
<div
|
||||
style="padding: 0 5px"
|
||||
@ -110,7 +123,7 @@
|
||||
@click="taskTab = 'agency'"
|
||||
ref="tabAgency"
|
||||
>
|
||||
Agency
|
||||
{{ t('agency') }}
|
||||
</div>
|
||||
<!-- 下划线元素 -->
|
||||
<div
|
||||
@ -153,7 +166,7 @@
|
||||
"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div style="font-weight: 600">Today's Task:</div>
|
||||
<div style="font-weight: 600">{{ t('todays_task') }}</div>
|
||||
<button
|
||||
style="
|
||||
font-weight: 500;
|
||||
@ -163,7 +176,7 @@
|
||||
"
|
||||
@click="goToPlatformPolicy"
|
||||
>
|
||||
Platform Policy >
|
||||
{{ t('platform_policy') }} >
|
||||
</button>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
@ -177,7 +190,7 @@
|
||||
gap: 5px;
|
||||
"
|
||||
>
|
||||
<div style="font-weight: 600">Anchor Type</div>
|
||||
<div style="font-weight: 600">{{ t('host_type') }}</div>
|
||||
<div style="font-weight: 600">{{ taskInfo.anchorType }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -190,7 +203,7 @@
|
||||
gap: 5px;
|
||||
"
|
||||
>
|
||||
<div style="font-weight: 600">Minutes</div>
|
||||
<div style="font-weight: 600">{{ t('minutes') }}</div>
|
||||
<div style="font-weight: 600">
|
||||
{{ taskInfo.minutesProgress }}/{{ taskInfo.minutesTotal }}
|
||||
</div>
|
||||
@ -205,7 +218,7 @@
|
||||
gap: 5px;
|
||||
"
|
||||
>
|
||||
<div style="font-weight: 600">Gift Task</div>
|
||||
<div style="font-weight: 600">{{ t('gift_task') }}</div>
|
||||
<div style="font-weight: 600">{{ taskInfo.giftTask }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -251,17 +264,19 @@
|
||||
"
|
||||
@click="goToTeamBill"
|
||||
>
|
||||
Team Bill >
|
||||
{{ t('team_bill') }} >
|
||||
</button>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px">
|
||||
<div class="contentText">
|
||||
Host Salary: {{ loadingTeamBill ? '–' : teamBillInfo.hostSalary }}
|
||||
{{ t('host_salary') }} {{ loadingTeamBill ? '–' : teamBillInfo.hostSalary }}
|
||||
</div>
|
||||
<div class="contentText">
|
||||
Agency Salary: {{ loadingTeamBill ? '–' : teamBillInfo.agentSalary }}
|
||||
{{ t('agent_salary') }} {{ loadingTeamBill ? '–' : teamBillInfo.agentSalary }}
|
||||
</div>
|
||||
<div class="contentText">
|
||||
{{ t('total') }} {{ loadingTeamBill ? '–' : teamBillInfo.total }}
|
||||
</div>
|
||||
<div class="contentText">Total: {{ loadingTeamBill ? '–' : teamBillInfo.total }}</div>
|
||||
<div style="display: flex; justify-content: flex-end">
|
||||
<div
|
||||
style="
|
||||
@ -285,8 +300,8 @@
|
||||
<div class="team-member-card" @click="goToTeamMember">
|
||||
<div class="card-content">
|
||||
<div class="member-title">
|
||||
Team Member
|
||||
<span v-if="loadingMemberCount">(Loading...)</span>
|
||||
{{ t('team_member') }}
|
||||
<span v-if="loadingMemberCount">({{ t('loading') }}...)</span>
|
||||
<span v-else class="member-title">({{ teamMemberCount }})</span>
|
||||
</div>
|
||||
<span class="arrow">></span>
|
||||
@ -298,8 +313,12 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn exchange-btn" @click="exchangeGoldCoins">Exchange</button>
|
||||
<button class="action-btn transfer-btn" @click="transfer">Transfer</button>
|
||||
<button class="action-btn exchange-btn" @click="exchangeGoldCoins">
|
||||
{{ t('exchange') }}
|
||||
</button>
|
||||
<button class="action-btn transfer-btn" @click="transfer">
|
||||
{{ t('transfer') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -307,16 +326,22 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import MobileHeader from '../components/MobileHeader.vue'
|
||||
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 workReportBox from '@/components/HostCenter/workReportBox.vue'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
// 监听语言变化并设置文档方向
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
// 任务标签
|
||||
const taskTab = ref('host')
|
||||
const tabHost = ref(null)
|
||||
@ -388,10 +413,10 @@ const fetchMemberWorkData = async () => {
|
||||
// 格式化状态
|
||||
const formatStatus = (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
|
||||
}
|
||||
@ -423,19 +448,19 @@ const fetchMemberWorkData = async () => {
|
||||
watch(
|
||||
() => teamBillInfo?.status,
|
||||
(newStatus) => {
|
||||
if (newStatus == 'In Progress') {
|
||||
if (newStatus == t('in_progress')) {
|
||||
boxShadow.value = '0 0 1px 0 #6085FF'
|
||||
color.value = 'rgba(61, 115, 255, 1)'
|
||||
}
|
||||
if (newStatus == 'Pending') {
|
||||
if (newStatus == t('pending')) {
|
||||
boxShadow.value = '0 0 1px 0 #FF6062'
|
||||
color.value = 'rgba(255, 61, 64, 1)'
|
||||
}
|
||||
if (newStatus == 'Completed') {
|
||||
if (newStatus == t('completed')) {
|
||||
boxShadow.value = '0 0 1px 0 #60FF65'
|
||||
color.value = 'rgba(61, 255, 84, 1)'
|
||||
}
|
||||
if (newStatus == 'Out Of Account') {
|
||||
if (newStatus == t('out_of_account')) {
|
||||
boxShadow.value = '0 0 1px 0 #6A6161'
|
||||
color.value = 'rgba(174, 174, 174, 1)'
|
||||
}
|
||||
@ -529,10 +554,10 @@ const fetchTeamBillData = async () => {
|
||||
// 格式化状态
|
||||
const formatStatus = (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
|
||||
}
|
||||
@ -1077,4 +1102,35 @@ onMounted(() => {
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .user-details {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir='rtl'] .notification-btn {
|
||||
margin-left: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .help-btn {
|
||||
/* transform: scaleX(-1); */
|
||||
}
|
||||
|
||||
[dir='rtl'] .arrow {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
[dir='rtl'] .card-link .arrow {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
[dir='rtl'] .detail-row {
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user