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-10-28 19:19:30 +08:00
parent 2cd60726ac
commit c4a048f9c8
4 changed files with 851 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/router/index.js
View File

@ -281,6 +281,12 @@ const router = createRouter({
component: () => import('../views/BDCenter/incomeDetails.vue'),
meta: { requiresAuth: true },
},
{
path: '/bd-leader-center',
name: 'bd-leader-center',
component: () => import('../views/BDLeaderCenter/index.vue'),
meta: { requiresAuth: true },
},
],
})

12
src/utils/permissionManager.js
View File

@ -11,12 +11,14 @@ export const USER_ROLES = {
ANCHOR: 'anchor',
GUEST: 'guest',
ADMIN: 'admin',
BDLEADER: 'bdLeader', // BD Leader
}
// 页面路径常量
export const PAGES = {
COIN_SELLER: '/coin-seller',
AGENCY_CENTER: '/agency-center',
BD_LEADER_CENTER: '/bd-leader-center',
BD_CENTER: '/bd-center',
HOST_CENTER: '/host-center',
APPLY: '/apply',
@ -78,6 +80,9 @@ export const ROLE_PERMISSIONS = {
'/income-details', //操作结果页
],
// BD Leader (商务拓展领导)
[USER_ROLES.BDLEADER]: [...[USER_ROLES.BD], PAGES.BD_LEADER_CENTER],
// Anchor (主播)
[USER_ROLES.ANCHOR]: [
PAGES.HOST_CENTER, // 主页面
@ -133,8 +138,9 @@ export const ROLE_PERMISSIONS = {
// 身份优先级（数字越大优先级越高）
export const ROLE_PRIORITY = {
[USER_ROLES.ADMIN]: 5,
[USER_ROLES.FREIGHT_AGENT]: 4,
[USER_ROLES.ADMIN]: 6,
[USER_ROLES.FREIGHT_AGENT]: 5,
[USER_ROLES.BDLEADER]: 4,
[USER_ROLES.BD]: 3,
[USER_ROLES.AGENT]: 2,
[USER_ROLES.ANCHOR]: 1,
@ -146,6 +152,7 @@ export const ROLE_DEFAULT_PAGES = {
[USER_ROLES.ADMIN]: PAGES.ADMIN_CENTER,
[USER_ROLES.FREIGHT_AGENT]: PAGES.COIN_SELLER,
[USER_ROLES.AGENT]: PAGES.AGENCY_CENTER,
[USER_ROLES.BDLEADER]: PAGES.BD_LEADER_CENTER,
[USER_ROLES.BD]: PAGES.BD_CENTER,
[USER_ROLES.ANCHOR]: PAGES.HOST_CENTER,
[USER_ROLES.GUEST]: PAGES.APPLY,
@ -227,6 +234,7 @@ class RoleBasedPermissionManager {
const roles = []
if (identity.freightAgent) roles.push(USER_ROLES.FREIGHT_AGENT)
if (identity.agent) roles.push(USER_ROLES.AGENT)
if (identity.bdLeader) roles.push(USER_ROLES.BDLEADER)
if (identity.bd) roles.push(USER_ROLES.BD)
if (identity.anchor) roles.push(USER_ROLES.ANCHOR)
if (identity.admin) roles.push(USER_ROLES.ADMIN)

34
src/views/BDCenterView.vue
View File

@ -139,9 +139,11 @@
@click="showHistory = true"
/>
</div>
<div style="font-size: 0.7em; font-weight: 600">
<div style="font-size: 0.8em; font-weight: 600">
Team total recharge: $400 Team total salary: $400
</div>
<!-- 成员列表 -->
<div
v-for="value in 3"
style="
@ -238,9 +240,9 @@
"
>
<div>
<div style="display: grid; gap: 10px">
<div class="text-700">Total income:$1000</div>
<div class="text-700">Previous period income:$1000</div>
<div style="display: grid; gap: 4px">
<div style="font-size: 0.9em; font-weight: 600">Total income:$1000</div>
<div style="font-size: 0.9em; font-weight: 600">Previous period income:$1000</div>
</div>
</div>
</div>
@ -260,24 +262,24 @@
<historySalary type="In Progress" long="true">
<template v-slot:content>
<div>2025.10.16-2025.10.31:</div>
<div>Number of teams: 5</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr)">
<div>Team salary: $400</div>
<div>BD income (salary): $12 (3%)</div>
<div style="font-size: 0.9em">Number of teams: 5</div>
<div style="display: flex; justify-content: space-between">
<div style="font-size: 0.9em">Team salary: $400</div>
<div style="font-size: 0.9em">BD income (salary): $12 (3%)</div>
</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr)">
<div>Team salary: $400</div>
<div>BD income (salary): $12 (3%)</div>
<div style="display: flex; justify-content: space-between">
<div style="font-size: 0.9em">Team salary: $400</div>
<div style="font-size: 0.9em">BD income (salary): $12 (3%)</div>
</div>
</template>
</historySalary>
<historySalary type="Completed" v-for="value in 5" @showMore="showReportDetail()">
<template v-slot:content>
<div>2025.10.16-2025.10.31:</div>
<div>Number Of Teams: 5</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr)">
<div>Number Of Teams: 5</div>
<div>BD income (salary): $60 (6%)</div>
<div style="font-size: 0.9em">Number Of Teams: 5</div>
<div style="display: flex; justify-content: space-between">
<div style="font-size: 0.9em">Number Of Teams: 5</div>
<div style="font-size: 0.9em">BD income (salary): $60 (6%)</div>
</div>
</template>
</historySalary>
@ -514,7 +516,7 @@ onMounted(() => {
@media screen and (min-width: 360px) {
* {
font-size: 16px;
font-size: 12px;
}
}

817
src/views/BDLeaderCenter/index.vue Normal file
View File

@ -0,0 +1,817 @@
<template>
<div class="bd-center gradient-background-circles">
<!-- 顶部导航 -->
<MobileHeader title="BD Leader Center" :isHomePage="true" />
<!-- 主要内容 -->
<div
style="
padding: 16px;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 12px;
"
>
<!-- 用户信息卡片 -->
<div
style="
background-color: white;
padding: 16px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
"
>
<!-- APP连接状态指示 -->
<div v-if="isInApp() && !appConnected" class="app-status connecting">
<div class="status-indicator"></div>
<span>正在连接APP...</span>
</div>
<div style="display: flex; align-items: center">
<div
style="
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #8b5cf6;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
font-weight: 600;
margin-right: 12px;
overflow: hidden;
position: relative;
"
>
<img
v-if="userInfo.userAvatar"
style="width: 100%; height: 100%; object-fit: cover; border-radius: 25px"
:src="userInfo.userAvatar"
:alt="userInfo.name"
@error="handleImageError"
/>
<span v-else style="color: white; font-size: 20px; font-weight: 600">{{
getAvatarPlaceholder()
}}</span>
</div>
<div style="flex: 1">
<h3 style="margin: 0 0 4px 0; font-weight: 600; color: #333">
{{ userInfo.userNickname || userInfo.name || 'User1' }}
</h3>
<p style="margin: 0; font-size: 0.9em; color: #666">
ID: {{ userInfo.id || userInfo.account || '1234567890' }}
</p>
</div>
<div style="display: flex; align-items: center">
<img src="../../assets/icon/info.png" alt="" style="display: block; width: 20px" />
</div>
</div>
<div
style="
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
"
@click="gotoIncome"
>
<span style="font-weight: 600; color: #1f2937"> Available income: $1000 </span>
<img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
</div>
</div>
<!-- 邀请按钮 -->
<div style="display: flex; flex-direction: column; gap: 8px">
<div
style="
background-color: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 16px;
cursor: pointer;
transition: all 0.2s;
border: 1px solid #e5e7eb;
"
@click="goToInviteAgency"
>
<div style="display: flex; justify-content: space-between; align-items: center">
<span style="font-weight: 600; color: #1f2937"> Invite User To Become Agency</span>
<img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
</div>
</div>
<div
style="
background-color: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 16px;
cursor: pointer;
transition: all 0.2s;
border: 1px solid #e5e7eb;
"
@click="goToInviteBD"
>
<div style="display: flex; justify-content: space-between; align-items: center">
<span style="font-weight: 600; color: #1f2937"> Invite User To Become BD</span>
<img src="../../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
</div>
</div>
</div>
<!-- 标签页 -->
<div
style="
background-color: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 16px;
"
>
<!-- 标签按钮 -->
<div style="display: flex; position: relative; margin-bottom: 16px">
<button
v-for="tab in tabs"
:key="tab.id"
@click="switchTab(tab.id)"
:style="{
flex: 1,
padding: '8px 16px',
background: 'transparent',
border: 'none',
fontWeight: '600',
fontSize: '14px',
color: activeTab === tab.id ? '#8B5CF6' : 'rgba(0, 0, 0, 0.6)',
cursor: 'pointer',
transition: 'all 0.3s',
position: 'relative',
}"
>
{{ tab.name }}
</button>
<!-- 移动下划线 -->
<div
:style="{
position: 'absolute',
bottom: '0',
height: '2px',
background: '#8B5CF6',
transition: 'all 0.3s ease',
width: `${100 / tabs.length}%`,
left: `${(activeTab - 1) * (100 / tabs.length)}%`,
}"
></div>
</div>
<!-- BD 标签内容 -->
<div v-if="activeTab === 1">
<div style="display: flex; justify-content: space-between; align-items: center">
<div style="font-weight: 600">2025.10.01-2025.10.15:</div>
<img
src="../../assets/icon/records.png"
alt=""
style="display: block; width: 1.3em"
@click="records('bd')"
/>
</div>
<div style="font-size: 0.8em; font-weight: 600; margin-bottom: 12px">
Team total recharge: $400 Team total salary: $400
</div>
<!-- 成员列表 -->
<div style="display: flex; flex-direction: column; gap: 12px">
<div
v-for="member in bdMembers"
:key="member.id"
style="
background-color: white;
padding: 16px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
"
>
<!-- 用户信息 -->
<div
style="
position: relative;
width: 2em;
display: flex;
align-items: center;
justify-content: center;
"
>
<img
:src="member.avatar"
alt=""
style="
display: block;
width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
"
@error="defaultAvatarUrl"
/>
</div>
<div style="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
<div
style="
font-weight: 700;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
{{ member.name }}
</div>
<div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
ID: {{ member.id }}
</div>
</div>
<div
style="
width: 40%;
display: flex;
flex-direction: column;
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">
Recharge: ${{ member.recharge }}
</div>
<div style="font-size: 0.8em; font-weight: 500">Host: {{ member.host }}</div>
</div>
</div>
</div>
</div>
<!-- BD Leader 标签内容 -->
<div v-if="activeTab === 2">
<div style="display: flex; justify-content: space-between; align-items: center">
<div style="font-weight: 600">2025.10.01-2025.10.15:</div>
<img
src="../../assets/icon/records.png"
alt=""
style="display: block; width: 1.3em"
@click="records('bdLeader')"
/>
</div>
<div style="font-size: 0.8em; font-weight: 600; margin-bottom: 12px">
Team total recharge: $400 Team total salary: $400
</div>
<!-- 团队成员列表 -->
<div style="display: flex; flex-direction: column; gap: 12px">
<div
v-for="member in bdLeaderMembers"
:key="member.id"
style="
background-color: white;
padding: 16px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
"
>
<!-- 用户信息 -->
<div
style="
position: relative;
width: 2em;
display: flex;
align-items: center;
justify-content: center;
"
>
<img
:src="member.avatar"
alt=""
style="
display: block;
width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
"
@error="defaultAvatarUrl"
/>
</div>
<div style="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
<div
style="
font-weight: 700;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
{{ member.name }}
</div>
<div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
ID: {{ member.id }}
</div>
</div>
<div
style="
width: 40%;
display: flex;
flex-direction: column;
justify-content: space-around;
"
>
<div style="font-size: 0.8em; font-weight: 500">
Team Salary: ${{ member.salary }}
</div>
<div style="font-size: 0.8em; font-weight: 500">
Agencies: {{ member.agencies }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 遮罩层 -->
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<div style="position: fixed; bottom: 0; width: 100%">
<!-- 历史收入 - 使用相同组件，根据类型显示不同内容 -->
<div
v-if="showHistory"
style="
background: white;
border-radius: 16px 16px 0 0;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
"
@click.stop
>
<div style="display: flex; justify-content: center; align-items: center">
<div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">
{{ currentHistoryType === 'bd' ? 'BD Salary' : 'BD Leader History' }}
</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">Total income: $1000</div>
<div style="font-size: 0.9em; font-weight: 600">Previous period income: $1000</div>
</div>
</div>
</div>
<div style="overflow-y: auto" class="salaryList">
<!-- 薪资列表 -->
<div style="display: flex; flex-direction: column; gap: 8px">
<!-- BD 历史记录 -->
<template v-if="currentHistoryType === 'bd'">
<historySalary type="In Progress" long="true">
<template v-slot:content>
<div>2025.10.16-2025.10.31:</div>
<div style="font-size: 0.9em">Number of teams: 5</div>
<div style="display: flex; justify-content: space-between">
<div style="font-size: 0.9em">Team salary: $400</div>
<div style="font-size: 0.9em">BD income (salary): $12 (3%)</div>
</div>
<div style="display: flex; justify-content: space-between">
<div style="font-size: 0.9em">Team salary: $400</div>
<div style="font-size: 0.9em">BD income (salary): $12 (3%)</div>
</div>
</template>
</historySalary>
<historySalary type="Completed" v-for="value in 5" @showMore="showReportDetail()">
<template v-slot:content>
<div>2025.10.16-2025.10.31:</div>
<div style="font-size: 0.9em">Number Of Teams: 5</div>
<div style="display: flex; justify-content: space-between">
<div style="font-size: 0.9em">Number Of Teams: 5</div>
<div style="font-size: 0.9em">BD income (salary): $60 (6%)</div>
</div>
</template>
</historySalary>
</template>
<!-- BD Leader 历史记录 -->
<template v-else-if="currentHistoryType === 'bdLeader'">
<!-- 进行中的记录 -->
<historySalary type="In Progress">
<template v-slot:content>
<div>2025.10.16-2025.10.31:</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
<div>Number Of BDs: 5</div>
<div>Team Salary: $400</div>
</div>
</template>
</historySalary>
<!-- 已完成的记录 -->
<historySalary
type="Completed"
v-for="record in bdLeaderHistory"
:key="record.id"
@showMore="showReportDetail()"
>
<template v-slot:content>
<div>{{ record.period }}:</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
<div>Number Of Teams: {{ record.teamCount }}</div>
<div>Team Top-Up: ${{ record.topUp }}</div>
</div>
</template>
</historySalary>
<historySalary
type="Completed"
v-for="record in bdLeaderHistory"
:key="record.id"
@showMore="showReportDetail()"
>
<template v-slot:content>
<div>{{ record.period }}:</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
<div>Number Of Teams: {{ record.teamCount }}</div>
<div>Team Top-Up: ${{ record.topUp }}</div>
</div>
</template>
</historySalary>
<historySalary
type="Completed"
v-for="record in bdLeaderHistory"
:key="record.id"
@showMore="showReportDetail()"
>
<template v-slot:content>
<div>{{ record.period }}:</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px">
<div>Number Of Teams: {{ record.teamCount }}</div>
<div>Team Top-Up: ${{ record.topUp }}</div>
</div>
</template>
</historySalary>
</template>
</div>
</div>
</div>
<!-- more -->
<div v-if="showMore">
<!-- 收入详情 -->
<div
v-if="currentHistoryType === 'bd'"
style="
background: white;
border-radius: 16px 16px 0 0;
max-height: 60vh;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
"
@click.stop
>
<div style="font-weight: 600">2025.10.01-2025.10.15:</div>
<div style="font-size: 0.7em; font-weight: 600">
Team total recharge: $400 Team total salary: $400
</div>
<div
v-for="value in 3"
style="
background-color: white;
padding: 16px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
"
>
<!-- 用户信息 -->
<div
style="
position: relative;
width: 2em;
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="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
<div
style="
font-weight: 700;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
aaaaa
</div>
<div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
ID: 321654
</div>
</div>
<div
style="
width: 40%;
display: flex;
flex-direction: column;
justify-content: space-around;
"
>
<div style="font-size: 0.8em; font-weight: 500">Salary: $100</div>
<div style="font-size: 0.8em; font-weight: 500">Recharge: $500</div>
<div style="font-size: 0.8em; font-weight: 500">Host:8</div>
</div>
</div>
</div>
<!-- 团队收入详情 -->
<div
v-if="currentHistoryType === 'bdLeader'"
style="
background: white;
border-radius: 16px 16px 0 0;
max-height: 60vh;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
"
@click.stop
>
<div style="font-weight: 600">2025.10.01-2025.10.15:</div>
<div style="font-size: 0.7em; font-weight: 600">Team Salary: $400 BD number:400</div>
<div
v-for="value in 3"
style="
background-color: white;
padding: 16px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
"
>
<!-- 用户信息 -->
<div
style="
position: relative;
width: 2em;
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="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
<div
style="
font-weight: 700;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
aaaaa
</div>
<div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
ID: 321654
</div>
</div>
<div
style="
width: 40%;
display: flex;
flex-direction: column;
justify-content: space-around;
"
>
<div style="font-size: 0.8em; font-weight: 500">Salary: $100</div>
<div style="font-size: 0.8em; font-weight: 500">Agencies:8</div>
</div>
</div>
</div>
</div>
</div>
</maskLayer>
</div>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import MobileHeader from '@/components/MobileHeader.vue'
import { isInApp } from '@/utils/appBridge.js'
import maskLayer from '@/components/MaskLayer.vue'
import { clearSelectedPayee } from '@/utils/payeeStore.js'
import historySalary from '@/components/historySalary.vue'
const router = useRouter()
// 标签页数据
const tabs = ref([
{ id: 1, name: 'BD' },
{ id: 2, name: 'BD Leader' },
])
const activeTab = ref(1)
const showHistory = ref(false)
const showMore = ref(false)
const selectedRecord = ref(null)
const currentHistoryType = ref('bd') // 'bd' 或 'bdLeader'
// BD Leader 历史记录数据
const bdLeaderHistory = ref([
{ id: 1, period: '2025.10.01-2025.10.15', teamCount: 5, topUp: 500 },
{ id: 2, period: '2025.10.01-2025.10.15', teamCount: 5, topUp: 1000 },
])
// 遮罩层显示状态
const maskLayerShow = computed(() => {
return showHistory.value || showMore.value
})
// BD 成员数据
const bdMembers = ref([
{ id: '1234567890', name: 'User1', salary: 100, recharge: 500, host: 8, avatar: '' },
{ id: '1234567891', name: 'User2', salary: 100, recharge: 500, host: 8, avatar: '' },
{ id: '1234567892', name: 'User3', salary: 100, recharge: 500, host: 8, avatar: '' },
])
// BD Leader 成员数据
const bdLeaderMembers = ref([
{ id: '1234567890', name: 'Leader1', salary: 200, agencies: 12, avatar: '' },
{ id: '1234567891', name: 'Leader2', salary: 180, agencies: 10, avatar: '' },
{ id: '1234567892', name: 'Leader3', salary: 150, agencies: 9, avatar: '' },
])
// 用户信息
const userInfo = ref({
userNickname: 'User1',
id: '1234567890',
userAvatar: '',
})
const records = (historyType) => {
showHistory.value = true
currentHistoryType.value = historyType
}
const appConnected = ref(true)
// 切换标签页
const switchTab = (tabId) => {
activeTab.value = tabId
}
// 显示报告详情
const showReportDetail = (record) => {
selectedRecord.value = record
showHistory.value = false
showMore.value = true
}
// 关闭弹窗
const closedPopup = () => {
showHistory.value = false
showMore.value = false
selectedRecord.value = null
currentHistoryType.value = 'bd'
}
// 默认头像处理
const defaultAvatarUrl = (e) => {
console.log('头像资源出错')
e.target.onerror = null //防止循环
e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
}
// 前往收入页面
const gotoIncome = () => {
router.push('/available-income')
}
// 前往邀请代理
const goToInviteAgency = () => {
router.push('/invite-agency')
}
// 前往邀请BD
const goToInviteBD = () => {
router.push('/invite-bd')
}
// 图片错误处理
const handleImageError = (e) => {
e.target.style.display = 'none'
}
// 获取头像占位符
const getAvatarPlaceholder = () => {
return userInfo.value.userNickname ? userInfo.value.userNickname.charAt(0).toUpperCase() : 'U'
}
onMounted(() => {
clearSelectedPayee()
})
</script>
<style scoped>
/* 保持原有的样式不变 */
.salaryList::-webkit-scrollbar {
display: none;
}
* {
color: rgba(0, 0, 0, 0.8);
font-family: 'SF Pro Text';
font-weight: 700;
}
.contentTime {
font-size: 1.1em;
}
.contentText {
font-size: 1em;
}
.moreBt {
font-size: 1em;
}
@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>