hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 使用新的头部组件，对接语言切换功能并调整布局

Browse Source
This commit is contained in:
hzj 2025-10-31 21:07:02 +08:00
parent 972264b755
commit 7a91f448c0
6 changed files with 199 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/historySalary.vue
View File

@ -1,22 +1,13 @@
<template> <template>
<div style="position: relative; width: 100%"> <div style="position: relative; width: 100%">
<img :src="bgUrl" alt="" width="100%" style="display: block" /> <img :src="bgUrl" alt="" width="100%" style="display: block" class="flipImg" />
<div <div class="status">
style="
width: 48%;
height: 40%;
position: absolute;
top: 0;
right: 3%;
display: flex;
justify-content: flex-end;
align-items: center;
"
>
<div <div
style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center" style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
> >
<div style="color: #fff; font-weight: 600" :style="{ fontSize }">{{ type }}</div> <div style="color: #fff; font-weight: 600" :style="{ fontSize }">
{{ getTypeText(type) }}
</div>
</div> </div>
</div> </div>
<div style="position: absolute; inset: 0; padding: 3% 4%"> <div style="position: absolute; inset: 0; padding: 3% 4%">
@ -25,20 +16,21 @@
> >
<slot name="content"></slot> <slot name="content"></slot>
</div> </div>
<div <div v-if="type == 'Completed'" class="moreBt" @click="btMore">{{ t('more') }}</div>
v-if="type == 'Completed'"
class="moreBt"
style="position: absolute; top: 40%; right: 4%; color: #bb92ff; font-weight: 500"
@click="btMore"
>
More >
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { setDocumentDirection } from '@/locales/i18n'
const { t, locale } = useI18n()
// 监听语言变化并设置文档方向
locale.value && setDocumentDirection(locale.value)
const progress = new URL('@/assets/images/BDCenter/progress.png', import.meta.url).href const progress = new URL('@/assets/images/BDCenter/progress.png', import.meta.url).href
const completed = new URL('@/assets/images/BDCenter/completed.png', import.meta.url).href const completed = new URL('@/assets/images/BDCenter/completed.png', import.meta.url).href
const progressLong = new URL('@/assets/images/BDCenter/progressLong.png', import.meta.url).href const progressLong = new URL('@/assets/images/BDCenter/progressLong.png', import.meta.url).href
@ -91,6 +83,24 @@ watch(
}, },
{ immediate: true } { immediate: true }
) )
// 根据状态文本返回翻译后的文本
const getTypeText = (type) => {
console.log('type:', type)
switch (type) {
case 'In Progress':
return t('in_progress')
case 'Completed':
return t('completed')
case 'Out of account':
return t('out_of_account')
case 'Pending':
return t('pending')
default:
return type
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -110,6 +120,36 @@ watch(
.moreBt { .moreBt {
font-size: 1em; font-size: 1em;
position: absolute;
top: 40%;
right: 4%;
color: #bb92ff;
font-weight: 500;
}
.status {
width: 48%;
height: 40%;
position: absolute;
top: 0;
right: 3%;
display: flex;
justify-content: flex-end;
align-items: center;
}
[dir='rtl'] .status {
right: auto;
left: 3%;
}
[dir='rtl'] .flipImg {
transform: scaleX(-1);
}
[dir='rtl'] .moreBt {
right: auto;
left: 4%;
} }
@media screen and (max-width: 360px) { @media screen and (max-width: 360px) {

1
src/locales/ar.json
View File

@ -95,6 +95,7 @@
"succeed": "ينجح", "succeed": "ينجح",
"seller_records": "سجل البائع", "seller_records": "سجل البائع",
"bd_center": "مركز bd", "bd_center": "مركز bd",
"bd_leader_center": "مركز القيادة BD",
"total_team_salary": "إجمالي رواتب الفريق：", "total_team_salary": "إجمالي رواتب الفريق：",
"last_month": "الشهر الماضي", "last_month": "الشهر الماضي",
"this_month": "هذا الشهر", "this_month": "هذا الشهر",

1
src/locales/en.json
View File

@ -95,6 +95,7 @@
"succeed": "Succeed", "succeed": "Succeed",
"seller_records": "Seller Records", "seller_records": "Seller Records",
"bd_center": "BD Center", "bd_center": "BD Center",
"bd_leader_center": "BD Leader Center",
"total_team_salary": "Total team salary：", "total_team_salary": "Total team salary：",
"last_month": "Last month：", "last_month": "Last month：",
"this_month": "This month：", "this_month": "This month：",

1
src/locales/zh.json
View File

@ -95,6 +95,7 @@
"succeed": "成功", "succeed": "成功",
"seller_records": "卖家记录", "seller_records": "卖家记录",
"bd_center": "BD中心", "bd_center": "BD中心",
"bd_leader_center": "BD中心",
"total_team_salary": "团队总工资", "total_team_salary": "团队总工资",
"last_month": "上个月", "last_month": "上个月",
"this_month": "这个月", "this_month": "这个月",

82
src/views/BDCenterView.vue
View File

@ -1,7 +1,13 @@
<template> <template>
<div class="bd-center gradient-background-circles"> <div class="bd-center gradient-background-circles">
<!-- 顶部导航 --> <!-- 顶部导航 -->
<MobileHeader title="BD Center" :isHomePage="true" /> <GeneralHeader
:title="t('bd_center')"
:isHomePage="true"
:showLanguageList="true"
color="black"
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
/>
<!-- 主要内容 --> <!-- 主要内容 -->
<div <div
@ -26,7 +32,7 @@
<!-- APP连接状态指示 --> <!-- APP连接状态指示 -->
<div v-if="isInApp() && !appConnected" class="app-status connecting"> <div v-if="isInApp() && !appConnected" class="app-status connecting">
<div class="status-indicator"></div> <div class="status-indicator"></div>
<span>正在连接APP...</span> <span>{{ t('loading') }}...</span>
</div> </div>
<!-- 用户信息 --> <!-- 用户信息 -->
@ -86,7 +92,7 @@
@click="gotoIncome" @click="gotoIncome"
> >
<span style="font-weight: 600; color: #1f2937"> <span style="font-weight: 600; color: #1f2937">
Available income:${{ salaryInfo.currentSalary }} {{ t('available_salaries') }} ${{ salaryInfo.currentSalary }}
</span> </span>
<img src="../assets/icon/arrow.png" alt="" style="display: block; width: 20px" /> <img src="../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
</div> </div>
@ -111,7 +117,7 @@
@click="goToInviteAgency" @click="goToInviteAgency"
> >
<div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; justify-content: space-between; align-items: center">
<span style="font-weight: 600; color: #1f2937"> Invite User To Become Agency</span> <span style="font-weight: 600; color: #1f2937"> {{ t('invite_become_agent') }}</span>
<img src="../assets/icon/arrow.png" alt="" style="display: block; width: 20px" /> <img src="../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
</div> </div>
</div> </div>
@ -144,7 +150,7 @@
/> />
</div> </div>
<div style="font-size: 0.8em; font-weight: 600"> <div style="font-size: 0.8em; font-weight: 600">
Team total recharge: ${{ BDData.totalRecharge }} Team total salary: ${{ {{ t('team_recharge') }}: ${{ BDData.totalRecharge }} {{ t('total_team_salary') }}: ${{
BDData.totalSalary BDData.totalSalary
}} }}
</div> </div>
@ -207,12 +213,14 @@
style="width: 40%; display: flex; flex-direction: column; justify-content: space-around" style="width: 40%; display: flex; flex-direction: column; justify-content: space-around"
> >
<div style="font-size: 0.8em; font-weight: 500"> <div style="font-size: 0.8em; font-weight: 500">
Salary: ${{ BDInfo.teamSalaryAmount }} {{ t('salary') }}: ${{ BDInfo.teamSalaryAmount }}
</div> </div>
<div style="font-size: 0.8em; font-weight: 500"> <div style="font-size: 0.8em; font-weight: 500">
Recharge: ${{ BDInfo.teamRechargeAmount }} {{ t('recharge') }}: ${{ BDInfo.teamRechargeAmount }}
</div>
<div style="font-size: 0.8em; font-weight: 500">
{{ t('host') }}:{{ BDInfo.teamMemberCount }}
</div> </div>
<div style="font-size: 0.8em; font-weight: 500">Host:{{ BDInfo.teamMemberCount }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -252,10 +260,10 @@
<div> <div>
<div style="display: grid; gap: 4px"> <div style="display: grid; gap: 4px">
<div style="font-size: 0.9em; font-weight: 600"> <div style="font-size: 0.9em; font-weight: 600">
Total income:${{ BDSalary.totalIncome }} {{ t('total_income') }}: ${{ BDSalary.totalIncome }}
</div> </div>
<div style="font-size: 0.9em; font-weight: 600"> <div style="font-size: 0.9em; font-weight: 600">
Previous period income:${{ BDSalary.previousPeriodIncome }} {{ t('last_month') }}: ${{ BDSalary.previousPeriodIncome }}
</div> </div>
</div> </div>
</div> </div>
@ -272,9 +280,13 @@
> >
<template v-if="income.statusText == 'In Progress'" v-slot:content> <template v-if="income.statusText == 'In Progress'" v-slot:content>
<div>{{ income.billTitle }}</div> <div>{{ income.billTitle }}</div>
<div style="font-size: 0.9em">Number of teams: {{ income.agencyNumber }}</div> <div style="font-size: 0.9em">
{{ t('agency_number') }}: {{ income.agencyNumber }}
</div>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="font-size: 0.9em">Team salary: ${{ income.teamSalaryAmount }}</div> <div style="font-size: 0.9em">
{{ t('team_salary') }}: ${{ income.teamSalaryAmount }}
</div>
<div style="font-size: 0.9em"> <div style="font-size: 0.9em">
BD income (salary): ${{ income.bdIncomeSalary || 0 }} ({{ BD income (salary): ${{ income.bdIncomeSalary || 0 }} ({{
income.bdRatioSalary || 0 income.bdRatioSalary || 0
@ -283,7 +295,7 @@
</div> </div>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="font-size: 0.9em"> <div style="font-size: 0.9em">
Team top-up: ${{ income.teamRechargeAmount }} {{ t('team_recharge') }}: ${{ income.teamRechargeAmount }}
</div> </div>
<div style="font-size: 0.9em"> <div style="font-size: 0.9em">
BD income (top-up): ${{ income.bdIncomeRecharge || 0 }} ({{ BD income (top-up): ${{ income.bdIncomeRecharge || 0 }} ({{
@ -295,10 +307,12 @@
<template v-else v-slot:content> <template v-else v-slot:content>
<div>{{ income.billTitle }}</div> <div>{{ income.billTitle }}</div>
<div style="font-size: 0.9em">Number Of Teams: {{ income.agencyNumber }}</div> <div style="font-size: 0.9em">
{{ t('agency_number') }}: {{ income.agencyNumber }}
</div>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="font-size: 0.9em"> <div style="font-size: 0.9em">
Team top-up: ${{ income.teamRechargeAmount }} {{ t('team_recharge') }}: ${{ income.teamRechargeAmount }}
</div> </div>
<div style="font-size: 0.9em"> <div style="font-size: 0.9em">
BD income (top-up): ${{ income.bdIncomeRecharge || 0 }} ({{ BD income (top-up): ${{ income.bdIncomeRecharge || 0 }} ({{
@ -329,9 +343,8 @@
> >
<div style="font-weight: 600">{{ BDSalaryMore.period }}</div> <div style="font-weight: 600">{{ BDSalaryMore.period }}</div>
<div style="font-size: 0.7em; font-weight: 600"> <div style="font-size: 0.7em; font-weight: 600">
Team total recharge: ${{ BDSalaryMore.teamTotalRecharge }}, Team total salary: ${{ {{ t('team_recharge') }}: ${{ BDSalaryMore.teamTotalRecharge }},
BDSalaryMore.teamTotalSalary {{ t('total_team_salary') }}: ${{ BDSalaryMore.teamTotalSalary }}
}}
</div> </div>
<div <div
v-for="member in BDSalaryMore.memberDetails" v-for="member in BDSalaryMore.memberDetails"
@ -394,9 +407,15 @@
justify-content: space-around; justify-content: space-around;
" "
> >
<div style="font-size: 0.8em; font-weight: 500">Salary: ${{ member.salary }}</div> <div style="font-size: 0.8em; font-weight: 500">
<div style="font-size: 0.8em; font-weight: 500">Recharge: ${{ member.recharge }}</div> {{ t('salary') }}: ${{ member.salary }}
<div style="font-size: 0.8em; font-weight: 500">Host:{{ member.hostCount }}</div> </div>
<div style="font-size: 0.8em; font-weight: 500">
{{ t('recharge') }}: ${{ member.recharge }}
</div>
<div style="font-size: 0.8em; font-weight: 500">
{{ t('host') }}:{{ member.hostCount }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -407,8 +426,9 @@
<script setup> <script setup>
import { computed, onMounted, ref } from 'vue' import { computed, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import MobileHeader from '@/components/MobileHeader.vue' import GeneralHeader from '@/components/GeneralHeader.vue'
import { getAgentMonthLastTarget, getAgentMonthTarget, getBdAgentList } from '@/api/teamBill.js' import { getAgentMonthLastTarget, getAgentMonthTarget, getBdAgentList } from '@/api/teamBill.js'
import { getBdMemberBillList, getBdHistory, getBdHistoryMore } from '@/api/bdCenter.js' import { getBdMemberBillList, getBdHistory, getBdHistoryMore } from '@/api/bdCenter.js'
import { getTeamId } from '@/utils/userStore.js' import { getTeamId } from '@/utils/userStore.js'
@ -417,9 +437,14 @@ import { isInApp } from '@/utils/appBridge.js'
import { clearSelectedPayee } from '@/utils/payeeStore.js' import { clearSelectedPayee } from '@/utils/payeeStore.js'
import maskLayer from '@/components/MaskLayer.vue' import maskLayer from '@/components/MaskLayer.vue'
import historySalary from '@/components/historySalary.vue' import historySalary from '@/components/historySalary.vue'
import { setDocumentDirection } from '@/locales/i18n'
const { t, locale } = useI18n()
const router = useRouter() const router = useRouter()
// 监听语言变化并设置文档方向
locale.value && setDocumentDirection(locale.value)
// 当前身份 // 当前身份
const teamMemberCount = ref(0) const teamMemberCount = ref(0)
const showHistory = ref(false) //历史弹窗 const showHistory = ref(false) //历史弹窗
@ -541,6 +566,9 @@ onMounted(() => {
.bd-center { .bd-center {
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
background-color: #ffffff;
background-image: url(../assets/images/secondBg.png);
} }
.bd-center::-webkit-scrollbar { .bd-center::-webkit-scrollbar {
@ -612,4 +640,14 @@ onMounted(() => {
font-size: 32px; font-size: 32px;
} }
} }
/* RTL支持 */
[dir='rtl'] .avatar {
margin-right: 0;
margin-left: 12px;
}
[dir='rtl'] .user-info {
text-align: right;
}
</style> </style>

111
src/views/BDLeaderCenter/index.vue
View File

@ -1,7 +1,13 @@
<template> <template>
<div class="bd-center gradient-background-circles"> <div class="bd-center gradient-background-circles">
<!-- 顶部导航 --> <!-- 顶部导航 -->
<MobileHeader title="BD Leader Center" :isHomePage="true" /> <GeneralHeader
:title="t('bd_leader_center')"
:isHomePage="true"
:showLanguageList="true"
color="black"
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
/>
<!-- 主要内容 --> <!-- 主要内容 -->
<div <div
@ -26,7 +32,7 @@
<!-- APP连接状态指示 --> <!-- APP连接状态指示 -->
<div v-if="isInApp() && !appConnected" class="app-status connecting"> <div v-if="isInApp() && !appConnected" class="app-status connecting">
<div class="status-indicator"></div> <div class="status-indicator"></div>
<span>正在连接APP...</span> <span>{{ t('loading') }}...</span>
</div> </div>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
@ -81,7 +87,7 @@
@click="gotoIncome" @click="gotoIncome"
> >
<span style="font-weight: 600; color: #1f2937"> <span style="font-weight: 600; color: #1f2937">
Available income: ${{ salaryInfo.currentSalary }} {{ t('available_salaries') }} ${{ salaryInfo.currentSalary }}
</span> </span>
<img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" /> <img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
</div> </div>
@ -103,7 +109,7 @@
@click="goToInviteAgency" @click="goToInviteAgency"
> >
<div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; justify-content: space-between; align-items: center">
<span style="font-weight: 600; color: #1f2937"> Invite User To Become Agency</span> <span style="font-weight: 600; color: #1f2937"> {{ t('invite_become_agent') }}</span>
<img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" /> <img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
</div> </div>
</div> </div>
@ -122,7 +128,9 @@
@click="goToInviteBD" @click="goToInviteBD"
> >
<div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; justify-content: space-between; align-items: center">
<span style="font-weight: 600; color: #1f2937"> Invite User To Become BD</span> <span style="font-weight: 600; color: #1f2937">
{{ t('invite') }} User To Become BD</span
>
<img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" /> <img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
</div> </div>
</div> </div>
@ -159,7 +167,7 @@
{{ tab.name }} {{ tab.name }}
</button> </button>
<!-- 移动下划线 --> <!-- 移动下划线 -->
<div <!-- <div
:style="{ :style="{
position: 'absolute', position: 'absolute',
bottom: '0', bottom: '0',
@ -169,7 +177,7 @@
width: `${100 / tabs.length}%`, width: `${100 / tabs.length}%`,
left: `${(activeTab - 1) * (100 / tabs.length)}%`, left: `${(activeTab - 1) * (100 / tabs.length)}%`,
}" }"
></div> ></div> -->
</div> </div>
<!-- BD 标签内容 --> <!-- BD 标签内容 -->
@ -184,7 +192,7 @@
/> />
</div> </div>
<div style="font-size: 0.8em; font-weight: 600; margin-bottom: 12px"> <div style="font-size: 0.8em; font-weight: 600; margin-bottom: 12px">
Team total recharge: ${{ BDData.totalRecharge }}, Team total salary: ${{ {{ t('team_recharge') }}: ${{ BDData.totalRecharge }}, {{ t('total_team_salary') }}: ${{
BDData.totalSalary BDData.totalSalary
}} }}
</div> </div>
@ -251,13 +259,13 @@
" "
> >
<div style="font-size: 0.8em; font-weight: 500"> <div style="font-size: 0.8em; font-weight: 500">
Salary: ${{ BDInfo.teamSalaryAmount }} {{ t('salary') }}: ${{ BDInfo.teamSalaryAmount }}
</div> </div>
<div style="font-size: 0.8em; font-weight: 500"> <div style="font-size: 0.8em; font-weight: 500">
Recharge: ${{ BDInfo.teamRechargeAmount }} {{ t('recharge') }}: ${{ BDInfo.teamRechargeAmount }}
</div> </div>
<div style="font-size: 0.8em; font-weight: 500"> <div style="font-size: 0.8em; font-weight: 500">
Host:{{ BDInfo.teamMemberCount }} {{ t('host') }}:{{ BDInfo.teamMemberCount }}
</div> </div>
</div> </div>
</div> </div>
@ -276,9 +284,8 @@
/> />
</div> </div>
<div style="font-size: 0.8em; font-weight: 600; margin-bottom: 12px"> <div style="font-size: 0.8em; font-weight: 600; margin-bottom: 12px">
Team total recharge: ${{ BDLeaderData.totalRecharge || 0 }}, Team total salary: ${{ {{ t('team_recharge') }}: ${{ BDLeaderData.totalRecharge || 0 }},
BDLeaderData.totalSalary || 0 {{ t('total_team_salary') }}: ${{ BDLeaderData.totalSalary || 0 }}
}}
</div> </div>
<!-- 团队成员列表 --> <!-- 团队成员列表 -->
@ -343,10 +350,10 @@
" "
> >
<div style="font-size: 0.8em; font-weight: 500"> <div style="font-size: 0.8em; font-weight: 500">
Team Salary: ${{ BDInfo.teamSalaryAmount }} {{ t('team_salary') }}: ${{ BDInfo.teamSalaryAmount }}
</div> </div>
<div style="font-size: 0.8em; font-weight: 500"> <div style="font-size: 0.8em; font-weight: 500">
Agencies: {{ BDInfo.teamMemberCount }} {{ t('agency') }}: {{ BDInfo.teamMemberCount }}
</div> </div>
</div> </div>
</div> </div>
@ -391,12 +398,12 @@
<div> <div>
<div style="display: grid; gap: 4px"> <div style="display: grid; gap: 4px">
<div style="font-size: 0.9em; font-weight: 600"> <div style="font-size: 0.9em; font-weight: 600">
Total income: ${{ {{ t('total_income') }}: ${{
currentHistoryType === 'bd' ? BDSalary.totalIncome : BDLeaderSalary.totalIncome currentHistoryType === 'bd' ? BDSalary.totalIncome : BDLeaderSalary.totalIncome
}} }}
</div> </div>
<div style="font-size: 0.9em; font-weight: 600"> <div style="font-size: 0.9em; font-weight: 600">
Previous period income: ${{ {{ t('last_month') }}: ${{
currentHistoryType === 'bd' currentHistoryType === 'bd'
? BDSalary.previousPeriodIncome ? BDSalary.previousPeriodIncome
: BDLeaderSalary.previousPeriodIncome : BDLeaderSalary.previousPeriodIncome
@ -419,10 +426,12 @@
> >
<template v-if="income.statusText == 'In Progress'" v-slot:content> <template v-if="income.statusText == 'In Progress'" v-slot:content>
<div>{{ income.billTitle }}</div> <div>{{ income.billTitle }}</div>
<div style="font-size: 0.9em">Number of teams: {{ income.agencyNumber }}</div> <div style="font-size: 0.9em">
{{ t('agency_number') }}: {{ income.agencyNumber }}
</div>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="font-size: 0.9em"> <div style="font-size: 0.9em">
Team salary: ${{ income.teamSalaryAmount }} {{ t('team_salary') }}: ${{ income.teamSalaryAmount }}
</div> </div>
<div style="font-size: 0.9em"> <div style="font-size: 0.9em">
BD income (salary): ${{ income.bdIncomeSalary || 0 }} ({{ BD income (salary): ${{ income.bdIncomeSalary || 0 }} ({{
@ -432,7 +441,7 @@
</div> </div>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="font-size: 0.9em"> <div style="font-size: 0.9em">
Team top-up: ${{ income.teamRechargeAmount }} {{ t('team_recharge') }}: ${{ income.teamRechargeAmount }}
</div> </div>
<div style="font-size: 0.9em"> <div style="font-size: 0.9em">
BD income (top-up): ${{ income.bdIncomeRecharge || 0 }} ({{ BD income (top-up): ${{ income.bdIncomeRecharge || 0 }} ({{
@ -444,10 +453,12 @@
<template v-else v-slot:content> <template v-else v-slot:content>
<div>{{ income.billTitle }}</div> <div>{{ income.billTitle }}</div>
<div style="font-size: 0.9em">Number Of Teams: {{ income.agencyNumber }}</div> <div style="font-size: 0.9em">
{{ t('agency_number') }}: {{ income.agencyNumber }}
</div>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="font-size: 0.9em"> <div style="font-size: 0.9em">
Team top-up: ${{ income.teamRechargeAmount }} {{ t('team_recharge') }}: ${{ income.teamRechargeAmount }}
</div> </div>
<div style="font-size: 0.9em"> <div style="font-size: 0.9em">
BD income (top-up): ${{ income.bdIncomeRecharge || 0 }} ({{ BD income (top-up): ${{ income.bdIncomeRecharge || 0 }} ({{
@ -470,15 +481,15 @@
<template v-if="income.statusText == 'In Progress'" v-slot:content> <template v-if="income.statusText == 'In Progress'" v-slot:content>
<div>{{ income.billTitle }}</div> <div>{{ income.billTitle }}</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px"> <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
<div>Number Of BDs: {{ income.bdNumber }}</div> <div>{{ t('bd_number') }}: {{ income.bdNumber }}</div>
<div>Team Salary: ${{ income.teamSalaryAmount }}</div> <div>{{ t('team_salary') }}: ${{ income.teamSalaryAmount }}</div>
</div> </div>
</template> </template>
<template v-else v-slot:content> <template v-else v-slot:content>
<div>{{ income.billTitle }}</div> <div>{{ income.billTitle }}</div>
<div>Number Of Teams: {{ income.bdNumber }}</div> <div>{{ t('agent_number') }}: {{ income.bdNumber }}</div>
<div>Team Top-Up: ${{ income.teamSalaryAmount }}</div> <div>{{ t('team_recharge') }}: ${{ income.teamSalaryAmount }}</div>
</template> </template>
</historySalary> </historySalary>
</template> </template>
@ -505,9 +516,8 @@
> >
<div style="font-weight: 600">{{ SalaryMore.period }}</div> <div style="font-weight: 600">{{ SalaryMore.period }}</div>
<div style="font-size: 0.7em; font-weight: 600"> <div style="font-size: 0.7em; font-weight: 600">
Team total recharge: ${{ SalaryMore.teamTotalRecharge }}, Team total salary: ${{ {{ t('team_recharge') }}: ${{ SalaryMore.teamTotalRecharge }},
SalaryMore.teamTotalSalary {{ t('total_team_salary') }}: ${{ SalaryMore.teamTotalSalary }}
}}
</div> </div>
<div <div
v-for="member in SalaryMore.memberDetails" v-for="member in SalaryMore.memberDetails"
@ -568,11 +578,15 @@
justify-content: space-around; justify-content: space-around;
" "
> >
<div style="font-size: 0.8em; font-weight: 500">Salary: ${{ member.salary }}</div>
<div style="font-size: 0.8em; font-weight: 500"> <div style="font-size: 0.8em; font-weight: 500">
Recharge: ${{ member.recharge }} {{ t('salary') }}: ${{ member.salary }}
</div>
<div style="font-size: 0.8em; font-weight: 500">
{{ t('recharge') }}: ${{ member.recharge }}
</div>
<div style="font-size: 0.8em; font-weight: 500">
{{ t('host') }}:{{ member.hostCount }}
</div> </div>
<div style="font-size: 0.8em; font-weight: 500">Host:{{ member.hostCount }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -594,7 +608,9 @@
> >
<div style="font-weight: 600">{{ SalaryMore.period }}</div> <div style="font-weight: 600">{{ SalaryMore.period }}</div>
<div style="font-size: 0.7em; font-weight: 600"> <div style="font-size: 0.7em; font-weight: 600">
Team Salary: ${{ SalaryMore.teamSalary }}, BD number:{{ SalaryMore.bdNumber }} {{ t('team_salary') }}: ${{ SalaryMore.teamSalary }}, {{ t('bd_number') }}:{{
SalaryMore.bdNumber
}}
</div> </div>
<div <div
v-for="member in SalaryMore.memberDetails" v-for="member in SalaryMore.memberDetails"
@ -655,9 +671,11 @@
justify-content: space-around; justify-content: space-around;
" "
> >
<div style="font-size: 0.8em; font-weight: 500">Salary: ${{ member.salary }}</div>
<div style="font-size: 0.8em; font-weight: 500"> <div style="font-size: 0.8em; font-weight: 500">
Agencies:{{ member.agencyCount }} {{ t('salary') }}: ${{ member.salary }}
</div>
<div style="font-size: 0.8em; font-weight: 500">
{{ t('agency') }}:{{ member.agencyCount }}
</div> </div>
</div> </div>
</div> </div>
@ -670,8 +688,9 @@
<script setup> <script setup>
import { computed, onMounted, ref } from 'vue' import { computed, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import MobileHeader from '@/components/MobileHeader.vue' import GeneralHeader from '@/components/GeneralHeader.vue'
import { isInApp } from '@/utils/appBridge.js' import { isInApp } from '@/utils/appBridge.js'
import maskLayer from '@/components/MaskLayer.vue' import maskLayer from '@/components/MaskLayer.vue'
import { clearSelectedPayee } from '@/utils/payeeStore.js' import { clearSelectedPayee } from '@/utils/payeeStore.js'
@ -679,9 +698,14 @@ import historySalary from '@/components/historySalary.vue'
import { usePageInitializationWithConfig } from '@/utils/pageConfig.js' import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
import { getBdMemberBillList, getBdHistory, getBdHistoryMore } from '@/api/bdCenter.js' import { getBdMemberBillList, getBdHistory, getBdHistoryMore } from '@/api/bdCenter.js'
import { getBdLeaderHistory, getBdLeaderHistoryMore } from '@/api/bdLeaderCenter' import { getBdLeaderHistory, getBdLeaderHistoryMore } from '@/api/bdLeaderCenter'
import { setDocumentDirection } from '@/locales/i18n'
const { t, locale } = useI18n()
const router = useRouter() const router = useRouter()
// 监听语言变化并设置文档方向
locale.value && setDocumentDirection(locale.value)
// 标签页数据 // 标签页数据
const tabs = ref([ const tabs = ref([
{ id: 1, name: 'BD' }, { id: 1, name: 'BD' },
@ -857,6 +881,9 @@ onMounted(() => {
.bd-center { .bd-center {
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
background-color: #ffffff;
background-image: url(../../assets/images/secondBg.png);
} }
.bd-center::-webkit-scrollbar { .bd-center::-webkit-scrollbar {
@ -910,4 +937,14 @@ onMounted(() => {
font-size: 24px; font-size: 24px;
} }
} }
/* RTL支持 */
[dir='rtl'] .avatar {
margin-right: 0;
margin-left: 12px;
}
[dir='rtl'] .user-info {
text-align: right;
}
</style> </style>