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

feat(新页面): 我的BD团队页面

Browse Source
This commit is contained in:
hzj 2025-11-25 16:27:16 +08:00
parent 4fee3254eb
commit b8e1432c1c
4 changed files with 457 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/router/index.js
View File

@ -323,6 +323,12 @@ const router = createRouter({
component: () => import('../views/AdminCenter/MyBDLeaderTeams.vue'),
meta: { requiresAuth: true },
},
{
path: '/my-BD-teams',
name: 'my-BD-teams',
component: () => import('../views/AdminCenter/MyBDTeams.vue'),
meta: { requiresAuth: true },
},
],
})

1
src/utils/permissionManager.js
View File

@ -147,6 +147,7 @@ export const ROLE_PERMISSIONS = {
'/KYC', //提现资料提交
'/bank-card', //选择银行卡
'/my-BDLeader-teams', //我的BDLeader团队页面（临时开放）
'/my-BD-teams', //我的BD团队页面（临时开放）
],
// 加载页面

1
src/utils/routeGuard.js
View File

@ -427,6 +427,7 @@ class RouteGuard {
'/KYC', //提现资料提交
'/bank-card', //选择银行卡
'/my-BDLeader-teams', //我的BDLeader团队页面（临时开放）
'/my-BD-teams', //我的BD团队页面（临时开放）
]
return publicPages.includes(path)
}

449
src/views/AdminCenter/MyBDTeams.vue Normal file
View File

@ -0,0 +1,449 @@
<template>
<div class="fullPage gradient-background-circles">
<!-- 顶部导航 -->
<GeneralHeader
:showLanguageList="true"
title="My BD Teams"
color="black"
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
/>
<!-- 主要内容 -->
<div
style="
padding: 16px;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 12px;
"
>
<!-- 总收入信息 -->
<div
style="
background-color: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 16px;
border: 1px solid #e5e7eb;
display: flex;
flex-direction: column;
gap: 10px;
"
>
<div style="display: flex; align-items: flex-end">
<div style="font-weight: 600; font-size: 0.9em">Total income:</div>
<div style="font-weight: 700">$1000</div>
</div>
<div style="display: flex; align-items: flex-end">
<div style="font-weight: 600; font-size: 0.9em">Previous period income:</div>
<div style="font-weight: 700">$1000</div>
</div>
</div>
<!-- BDLeader团队收入信息 -->
<div
style="
background-color: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 16px;
border: 1px solid #e5e7eb;
display: flex;
flex-direction: column;
gap: 10px;
"
>
<!-- 团队信息 -->
<div style="font-weight: 700">BDs:3</div>
<div style="font-size: 0.9em; font-weight: 600">Team Total Income: $900</div>
<!-- BDLeader成员列表 -->
<div
v-for="BDInfo in 3"
style="
position: relative;
background-color: white;
padding: 14px 10px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-around;
gap: 4px;
"
>
<!-- 头像 -->
<div
style="
width: 15%;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
"
>
<img
:src="''"
alt=""
style="
display: block;
width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
"
@error="defaultAvatarUrl"
/>
</div>
<!-- 基本信息 -->
<div
style="
flex: 1;
min-width: 0;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 4px;
"
>
<div
style="
font-weight: 700;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
User1
</div>
<div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
ID:1234567890
</div>
</div>
<!-- 收入信息 -->
<div
style="
width: auto;
min-width: 0;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
"
>
<div style="font-size: 0.8em; font-weight: 500; text-align: end">
Number Of Agencies Personnel:10
</div>
<div style="font-size: 0.8em; font-weight: 500; text-align: end">Total Income:$300</div>
</div>
<!-- 更多按钮 -->
<div
style="
font-size: 0.8em;
position: absolute;
bottom: 4%;
right: 4%;
color: #bb92ff;
font-weight: 500;
"
@click="incomeShow('1')"
>
{{ t('more') }}
</div>
</div>
</div>
</div>
<!-- 遮罩层 -->
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<div style="position: fixed; bottom: 0; width: 100%">
<!-- 某个BDLeader的收益 -->
<div
v-if="showIncome"
style="
background: white;
border-radius: 16px 16px 0 0;
max-height: 80vh;
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
"
class="overflow-y-auto"
@click.stop
>
<div style="display: flex; justify-content: center; align-items: center">
<div style="margin: 0; font-weight: 600; color: #333">BD's lD:1234567890</div>
</div>
<!-- 总体信息 -->
<div
style="
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
border-radius: 8px;
padding: 12px;
margin: 0 4px;
"
>
<div>
<div style="display: grid; gap: 4px">
<div style="font-size: 0.9em; font-weight: 600">{{ t('total_income') }}: $0</div>
<div style="font-size: 0.9em; font-weight: 600">
{{ t('previous_period_income') }}: $0
</div>
</div>
</div>
</div>
<div style="font-weight: 600">Income Details:</div>
<!-- 历史薪资列表 -->
<div style="overflow-y: auto" class="salaryList">
<div style="display: flex; flex-direction: column; gap: 8px">
<!-- 进行中 -->
<historySalary type="In Progress" @showMore="historyShow('2')">
<template v-slot:content>
<div>2025.10.01-2025.10.15:</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
<div>Agency: 10</div>
<!-- 团队收入 -->
<div>Team Income:$300</div>
</div>
</template>
</historySalary>
<!-- 已完成 -->
<historySalary type="Completed" @showMore="historyShow('2')">
<template v-slot:content>
<div>2025.10.01-2025.10.15:</div>
<div>{{ t('num_teams') }}0</div>
<!-- 团队收入 -->
<div>Team Income:$1000</div>
</template>
</historySalary>
</div>
</div>
</div>
<!-- 某个时期的收益详情 -->
<div
v-if="showHistory"
style="
background: white;
border-radius: 16px 16px 0 0;
max-height: 60vh;
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
"
class="overflow-y-auto"
@click.stop
>
<div style="font-weight: 600">2025.10.01-2025.10.15:</div>
<div style="display: flex; justify-content: space-between">
<div style="font-size: 0.8em; font-weight: 600">Agency :5</div>
<div style="font-size: 0.8em; font-weight: 600">Team Total income: $1000</div>
</div>
<!-- BD列表 -->
<div
v-for="member in 2"
style="
background-color: white;
padding: 14px 10px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
"
>
<!-- 头像 -->
<div
style="
width: 15%;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
"
>
<img
:src="''"
alt=""
style="
display: block;
width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
"
@error="defaultAvatarUrl"
/>
</div>
<!-- 基本信息 -->
<div
style="
flex: 1;
min-width: 0;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 4px;
"
>
<div
style="
font-weight: 700;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
User1
</div>
<div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
ID:1234567890
</div>
</div>
<!-- 收入信息 -->
<div
style="
width: auto;
min-width: 0;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-around;
"
>
<div style="font-size: 0.8em; font-weight: 500">Agency Team Income :</div>
<div style="font-size: 0.8em; font-weight: 500">$0</div>
</div>
</div>
</div>
</div>
</maskLayer>
</div>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { setDocumentDirection } from '@/locales/i18n'
import GeneralHeader from '@/components/GeneralHeader.vue'
import maskLayer from '@/components/MaskLayer.vue'
const { t, locale } = useI18n()
// 监听语言变化并设置文档方向
locale.value && setDocumentDirection(locale.value)
const showIncome = ref(false)
const showHistory = ref(false)
// 遮罩层显示状态
const maskLayerShow = computed(() => showIncome.value || showHistory.value)
const incomeShow = (targetId) => {
console.log('点击了收入按钮')
console.log('targetId:', targetId)
showIncome.value = true
}
const historyShow = (targetId) => {
console.log('点击了历史薪资按钮')
console.log('targetId:', targetId)
showIncome.value = false
showHistory.value = true
}
// 关闭弹窗
const closedPopup = () => {
showIncome.value = false
showHistory.value = false
}
const defaultAvatarUrl = (e) => {
console.log('头像资源出错')
e.target.onerror = null //防止循环
e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
}
</script>
<style lang="scss" scoped>
* {
color: rgba(0, 0, 0, 0.8);
font-family: 'SF Pro Text';
}
.fullPage {
max-height: 100vh;
overflow-y: auto;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
background-color: #ffffff;
background-image: url(../../assets/images/secondBg.png);
}
.fullPage::-webkit-scrollbar {
display: none;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-y-auto::-webkit-scrollbar {
display: none;
}
.salaryList::-webkit-scrollbar {
display: none;
}
@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;
}
}
@media screen and (min-width: 1024px) {
* {
font-size: 32px;
}
}
</style>