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

style(样式调整): 代理中心页

Browse Source
This commit is contained in:
huangzijie130 2025-09-24 19:28:44 +08:00
parent 7bf6ca0b3f
commit aae58fa0de
2 changed files with 187 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/icon/bell.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 658 B

294
src/views/AgencyCenterView.vue
View File

@ -1,37 +1,117 @@
<template> <template>
<div class="agency-center gradient-background-circles"> <div class="agency-center gradient-background-circles">
<MobileHeader title="Host Center" /> <MobileHeader title="Agency Center" />
<div class="content"> <div class="content">
<!-- 身份 -->
<div style="display: flex; justify-content: space-between">
<div
style="
margin: 0 1%;
margin-bottom: 12px;
font-weight: 600;
display: flex;
align-items: center;
font-size: 1.3em;
"
>
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="" />
</div>
<!-- 用户信息卡片 --> <!-- 用户信息卡片 -->
<div class="user-card"> <div
<div class="user-info"> style="
background-color: white;
padding: 16px;
border-radius: 12px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
margin-bottom: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
"
>
<!-- 头像信息 -->
<div style="display: flex; align-items: center; margin-bottom: 12px">
<div class="avatar"> <div class="avatar">
<img <img
v-if="userInfo.userAvatar" v-if="userInfo.userAvatar"
:src="userInfo.userAvatar" :src="userInfo.userAvatar"
:alt="userInfo.userNickname" :alt="userInfo.name"
@error="handleImageError" @error="handleImageError"
/> />
<span v-else class="avatar-placeholder">{{ getAvatarPlaceholder() }}</span> <span v-else class="avatar-placeholder">{{ getAvatarPlaceholder() }}</span>
</div> </div>
<div class="user-details"> <div style="flex: 1">
<h3>{{ userInfo.userNickname }}</h3> <div style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #333">
<p>ID: {{ userInfo.id }}</p> {{ userInfo.userNickname || userInfo.name }}
</div>
<div style="margin: 0; font-size: 14px; color: #666">ID: {{ userInfo.id }}</div>
</div> </div>
<button class="notification-btn" @click="goToNotification"> <button
<span>🔔</span> style="width: 32px; height: 32px; border: none; background: none; font-size: 16px"
>
<img src="../assets/icon/edit.png" alt="" width="70%" />
</button> </button>
</div> </div>
<!-- 我的薪资 -->
<div>
<div style="display: flex; justify-content: space-between; margin-bottom: 5px">
<div style="font-weight: 600">My salary:</div>
<button
style="
font-weight: 500;
color: rgba(0, 0, 0, 0.4);
border: 0;
background-color: transparent;
"
@click="goToPersonalSalary"
>
Personal Salary >
</button>
</div>
</div>
<!-- 账户状态标签 --> <!-- 历史薪资 -->
<div class="account-tags"> <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
<span class="tag agency-tag">🏢 Agency</span> <div>
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4); margin-bottom: 5px">
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:
</div>
<div style="font-weight: 600">${{ salaryInfo.currentSalary }}</div>
</div>
</div>
</div>
<!-- 标签选项 -->
<div style="display: flex; margin: 5px 0">
<div
style="padding: 0 5px"
:class="[taskTab === 'host' ? 'TabActive' : 'TabNoActive']"
@click="taskTab = 'host'"
>
Host
</div>
<div
style="padding: 0 5px"
:class="[taskTab === 'agency' ? 'TabActive' : 'TabNoActive']"
@click="taskTab = 'agency'"
>
Agency
</div> </div>
</div> </div>
<!-- Host Agency 标签页 --> <!-- Host Agency 标签页 -->
<div class="host-agency-tabs"> <!-- <div class="host-agency-tabs">
<button <button
@click="taskTab = 'host'" @click="taskTab = 'host'"
:class="['host-agency-tab', { active: taskTab === 'host' }]" :class="['host-agency-tab', { active: taskTab === 'host' }]"
@ -47,30 +127,7 @@
? ?
</button> </button>
</button> </button>
</div> </div> -->
<!-- My salary 区域 -->
<div class="salary-section">
<div class="salary-header">
<h3>My salary:</h3>
<button class="personal-salary-btn" @click="goToPersonalSalary">
Personal Salary <span class="arrow">></span>
</button>
</div>
<div class="salary-content">
<!--暂时禁用，后面补充-->
<!-- <div class="salary-item">
<p class="salary-label">History Salary:</p>
<p class="salary-amount">${{ salaryInfo.historySalary }}</p>
</div>
<div class="salary-separator"></div>-->
<div class="salary-item">
<p class="salary-label">Current Salary:</p>
<p class="salary-amount">${{ salaryInfo.currentSalary }}</p>
</div>
</div>
</div>
<!-- Host Agency 内容 --> <!-- Host Agency 内容 -->
<div class="host-agency-content"> <div class="host-agency-content">
@ -100,7 +157,7 @@
</div> </div>
<!-- Platform Policy 链接 --> <!-- Platform Policy 链接 -->
<!-- <div class="policy-link" @click="goToPlatformPolicy"> <!-- <div class="policy-link" @click="goToPlatformPolicy">
<span>Platform Policy</span> <span>Platform Policy</span>
<span class="arrow">></span> <span class="arrow">></span>
</div>--> </div>-->
@ -122,14 +179,20 @@
<div class="card-details"> <div class="card-details">
<div class="detail-row"> <div class="detail-row">
<span class="detail-label">Host Salary:</span> <span class="detail-label">Host Salary:</span>
<span class="detail-value">{{ loadingTeamBill ? '–' : teamBillInfo.hostSalary }}</span> <span class="detail-value">{{
loadingTeamBill ? '–' : teamBillInfo.hostSalary
}}</span>
<span class="detail-label">Agent Salary:</span> <span class="detail-label">Agent Salary:</span>
<span class="detail-value">{{ loadingTeamBill ? '–' : teamBillInfo.agentSalary }}</span> <span class="detail-value">{{
loadingTeamBill ? '–' : teamBillInfo.agentSalary
}}</span>
</div> </div>
<div class="detail-row"> <div class="detail-row">
<span class="detail-label">Total:</span> <span class="detail-label">Total:</span>
<span class="detail-value">{{ loadingTeamBill ? '–' : teamBillInfo.total }}</span> <span class="detail-value">{{ loadingTeamBill ? '–' : teamBillInfo.total }}</span>
<span class="status-badge">{{ loadingTeamBill ? '–' : teamBillInfo.status }}</span> <span class="status-badge">{{
loadingTeamBill ? '–' : teamBillInfo.status
}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -153,12 +216,8 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="action-buttons"> <div class="action-buttons">
<button class="action-btn exchange-btn" @click="exchangeGoldCoins"> <button class="action-btn exchange-btn" @click="exchangeGoldCoins">Exchange</button>
Exchange <button class="action-btn transfer-btn" @click="transfer">Transfer</button>
</button>
<button class="action-btn transfer-btn" @click="transfer">
Transfer
</button>
</div> </div>
</div> </div>
</div> </div>
@ -168,9 +227,9 @@
import { ref, reactive, onMounted } from 'vue' import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import MobileHeader from '../components/MobileHeader.vue' import MobileHeader from '../components/MobileHeader.vue'
import {usePageInitializationWithConfig} from "@/utils/pageConfig.js"; import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
import {getTeamId} from "@/utils/userStore.js"; import { getTeamId } from '@/utils/userStore.js'
import {getTeamMemberCount, getTeamBill} from "@/api/teamBill.js"; import { getTeamMemberCount, getTeamBill } from '@/api/teamBill.js'
const router = useRouter() const router = useRouter()
@ -187,7 +246,7 @@ const teamBillInfo = reactive({
hostSalary: '–', hostSalary: '–',
agentSalary: '–', agentSalary: '–',
total: '–', total: '–',
status: '–' status: '–',
}) })
const loadingTeamBill = ref(false) const loadingTeamBill = ref(false)
@ -266,14 +325,14 @@ const fetchTeamBillData = async () => {
const billBelong = latestBill.billBelong.toString() const billBelong = latestBill.billBelong.toString()
const year = billBelong.substring(0, 4) const year = billBelong.substring(0, 4)
const month = billBelong.substring(4, 6) const month = billBelong.substring(4, 6)
// 格式化状态 // 格式化状态
const formatStatus = (status) => { const formatStatus = (status) => {
const statusMap = { const statusMap = {
'SETTLED': 'Settled', SETTLED: 'Settled',
'UNPAID': 'Pending', UNPAID: 'Pending',
'HANG_UP': 'Pending', HANG_UP: 'Pending',
'PAID': 'Completed' PAID: 'Completed',
} }
return statusMap[status] || status return statusMap[status] || status
} }
@ -284,7 +343,7 @@ const fetchTeamBillData = async () => {
hostSalary: latestBill.settleResult?.memberSalary?.toFixed(2) || '–', hostSalary: latestBill.settleResult?.memberSalary?.toFixed(2) || '–',
agentSalary: latestBill.settleResult?.ownSalary?.toFixed(2) || '–', agentSalary: latestBill.settleResult?.ownSalary?.toFixed(2) || '–',
total: latestBill.settleResult?.totalSalary?.toFixed(2) || '–', total: latestBill.settleResult?.totalSalary?.toFixed(2) || '–',
status: formatStatus(latestBill.status) status: formatStatus(latestBill.status),
}) })
} }
} else { } else {
@ -297,23 +356,31 @@ const fetchTeamBillData = async () => {
} }
} }
const { userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder } =
const { usePageInitializationWithConfig('AGENCY_CENTER', {
userInfo, needsTeamInfo: true,
salaryInfo, onDataLoaded: (data) => {
taskInfo, fetchTeamMemberCount()
handleImageError, fetchTeamBillData() // 新增：获取团队账单数据
getAvatarPlaceholder },
} = usePageInitializationWithConfig('AGENCY_CENTER', { })
needsTeamInfo: true,
onDataLoaded: (data) => {
fetchTeamMemberCount()
fetchTeamBillData() // 新增：获取团队账单数据
}
})
</script> </script>
<style scoped> <style scoped>
* {
color: rgba(0, 0, 0, 0.8);
font-family: 'SF Pro Text';
}
.TabActive {
font-weight: 600;
}
.TabNoActive {
font-weight: 500;
color: rgba(0, 0, 0, 0.4);
}
.agency-center { .agency-center {
font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
} }
@ -330,7 +397,7 @@ const {
padding: 16px; padding: 16px;
border-radius: 12px; border-radius: 12px;
margin-bottom: 12px; margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
.user-info { .user-info {
@ -343,7 +410,7 @@ const {
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 25px; border-radius: 25px;
background-color: #8B5CF6; background-color: #8b5cf6;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -394,7 +461,6 @@ const {
cursor: pointer; cursor: pointer;
} }
.account-tags { .account-tags {
display: flex; display: flex;
gap: 8px; gap: 8px;
@ -408,8 +474,8 @@ const {
} }
.agency-tag { .agency-tag {
background-color: #DBEAFE; background-color: #dbeafe;
color: #1E40AF; color: #1e40af;
} }
/* Host Agency 标签页 */ /* Host Agency 标签页 */
@ -418,7 +484,7 @@ const {
background-color: white; background-color: white;
border-radius: 12px; border-radius: 12px;
margin-bottom: 12px; margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden; overflow: hidden;
} }
@ -442,20 +508,20 @@ const {
.host-agency-tab.active { .host-agency-tab.active {
background-color: white; background-color: white;
color: #333; color: #333;
border-bottom-color: #8B5CF6; border-bottom-color: #8b5cf6;
font-weight: 600; font-weight: 600;
} }
.host-agency-tab:not(.active):hover { .host-agency-tab:not(.active):hover {
background-color: #e9ecef; background-color: #e9ecef;
color: #8B5CF6; color: #8b5cf6;
} }
.host-agency-tab .help-btn { .host-agency-tab .help-btn {
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 8px; border-radius: 8px;
background-color: #8B5CF6; background-color: #8b5cf6;
color: white; color: white;
border: none; border: none;
font-size: 10px; font-size: 10px;
@ -469,7 +535,7 @@ const {
padding: 16px; padding: 16px;
border-radius: 12px; border-radius: 12px;
margin-bottom: 12px; margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
.salary-header { .salary-header {
@ -489,7 +555,7 @@ const {
.personal-salary-btn { .personal-salary-btn {
background: none; background: none;
border: none; border: none;
color: #8B5CF6; color: #8b5cf6;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
@ -500,7 +566,7 @@ const {
} }
.personal-salary-btn:hover { .personal-salary-btn:hover {
color: #7C3AED; color: #7c3aed;
} }
.salary-content { .salary-content {
@ -530,7 +596,7 @@ const {
.salary-separator { .salary-separator {
width: 1px; width: 1px;
height: 40px; height: 40px;
background-color: #8B5CF6; background-color: #8b5cf6;
} }
/* Host Agency 内容区域 */ /* Host Agency 内容区域 */
@ -539,7 +605,7 @@ const {
padding: 16px; padding: 16px;
border-radius: 12px; border-radius: 12px;
margin-bottom: 12px; margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
/* 任务区域头部样式 */ /* 任务区域头部样式 */
@ -572,7 +638,7 @@ const {
.team-member-card { .team-member-card {
background-color: white; background-color: white;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
@ -588,8 +654,6 @@ const {
align-items: center; align-items: center;
} }
/* 任务表格 */ /* 任务表格 */
.task-table { .task-table {
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
@ -633,11 +697,11 @@ const {
} }
.minutes-progress { .minutes-progress {
color: #6B7280; color: #6b7280;
} }
.minutes-completed { .minutes-completed {
color: #10B981; color: #10b981;
font-weight: 600; font-weight: 600;
} }
@ -674,7 +738,7 @@ const {
.card-date { .card-date {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #1F2937; color: #1f2937;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -685,7 +749,7 @@ const {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
color: #8B5CF6; color: #8b5cf6;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
@ -693,7 +757,7 @@ const {
} }
.card-link:hover { .card-link:hover {
color: #7C3AED; color: #7c3aed;
} }
.card-link .arrow { .card-link .arrow {
@ -717,18 +781,18 @@ const {
.detail-label { .detail-label {
font-size: 14px; font-size: 14px;
color: #6B7280; color: #6b7280;
} }
.detail-value { .detail-value {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #1F2937; color: #1f2937;
} }
.status-badge { .status-badge {
background-color: #DBEAFE; background-color: #dbeafe;
color: #1D4ED8; color: #1d4ed8;
padding: 4px 8px; padding: 4px 8px;
border-radius: 12px; border-radius: 12px;
font-size: 12px; font-size: 12px;
@ -739,7 +803,7 @@ const {
.member-title { .member-title {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #1F2937; color: #1f2937;
} }
.policy-link span:first-child { .policy-link span:first-child {
@ -748,8 +812,6 @@ const {
color: #333; color: #333;
} }
/* 操作按钮 */ /* 操作按钮 */
.action-buttons { .action-buttons {
display: grid; display: grid;
@ -775,12 +837,12 @@ const {
} }
.exchange-btn { .exchange-btn {
background-color: #FDE68A; background-color: #fde68a;
color: #D97706; color: #d97706;
} }
.transfer-btn { .transfer-btn {
background-color: #8B5CF6; background-color: #8b5cf6;
color: white; color: white;
} }
@ -788,7 +850,7 @@ const {
.platform-policy-btn { .platform-policy-btn {
background: none; background: none;
border: none; border: none;
color: #8B5CF6; color: #8b5cf6;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
@ -799,19 +861,37 @@ const {
} }
.platform-policy-btn:hover { .platform-policy-btn:hover {
color: #7C3AED; color: #7c3aed;
} }
.platform-policy-btn .arrow { .platform-policy-btn .arrow {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #8B5CF6; color: #8b5cf6;
} }
/* 通用箭头样式 */ /* 通用箭头样式 */
.arrow { .arrow {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #8B5CF6; color: #8b5cf6;
}
@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> </style>