style(样式调整): 代理中心页
This commit is contained in:
huangzijie130
parent
7bf6ca0b3f
commit
aae58fa0de
BIN
src/assets/icon/bell.png
Normal file
BIN
src/assets/icon/bell.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 658 B |
@ -1,37 +1,117 @@
|
||||
<template>
|
||||
<div class="agency-center gradient-background-circles">
|
||||
<MobileHeader title="Host Center" />
|
||||
<MobileHeader title="Agency Center" />
|
||||
|
||||
<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 class="user-info">
|
||||
<div
|
||||
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">
|
||||
<img
|
||||
v-if="userInfo.userAvatar"
|
||||
:src="userInfo.userAvatar"
|
||||
:alt="userInfo.userNickname"
|
||||
:alt="userInfo.name"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<span v-else class="avatar-placeholder">{{ getAvatarPlaceholder() }}</span>
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<h3>{{ userInfo.userNickname }}</h3>
|
||||
<p>ID: {{ userInfo.id }}</p>
|
||||
<div style="flex: 1">
|
||||
<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>
|
||||
<button class="notification-btn" @click="goToNotification">
|
||||
<span>🔔</span>
|
||||
<button
|
||||
style="width: 32px; height: 32px; border: none; background: none; font-size: 16px"
|
||||
>
|
||||
<img src="../assets/icon/edit.png" alt="" width="70%" />
|
||||
</button>
|
||||
</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">
|
||||
<span class="tag agency-tag">🏢 Agency</span>
|
||||
<!-- 历史薪资 -->
|
||||
<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:
|
||||
</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>
|
||||
|
||||
<!-- Host Agency 标签页 -->
|
||||
<div class="host-agency-tabs">
|
||||
<!-- <div class="host-agency-tabs">
|
||||
<button
|
||||
@click="taskTab = 'host'"
|
||||
:class="['host-agency-tab', { active: taskTab === 'host' }]"
|
||||
@ -47,30 +127,7 @@
|
||||
?
|
||||
</button>
|
||||
</button>
|
||||
</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>
|
||||
</div> -->
|
||||
|
||||
<!-- Host Agency 内容 -->
|
||||
<div class="host-agency-content">
|
||||
@ -100,7 +157,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Platform Policy 链接 -->
|
||||
<!-- <div class="policy-link" @click="goToPlatformPolicy">
|
||||
<!-- <div class="policy-link" @click="goToPlatformPolicy">
|
||||
<span>Platform Policy</span>
|
||||
<span class="arrow">></span>
|
||||
</div>-->
|
||||
@ -122,14 +179,20 @@
|
||||
<div class="card-details">
|
||||
<div class="detail-row">
|
||||
<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-value">{{ loadingTeamBill ? '–' : teamBillInfo.agentSalary }}</span>
|
||||
<span class="detail-value">{{
|
||||
loadingTeamBill ? '–' : teamBillInfo.agentSalary
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">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>
|
||||
@ -153,12 +216,8 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<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">Exchange</button>
|
||||
<button class="action-btn transfer-btn" @click="transfer">Transfer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -168,9 +227,9 @@
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import MobileHeader from '../components/MobileHeader.vue'
|
||||
import {usePageInitializationWithConfig} from "@/utils/pageConfig.js";
|
||||
import {getTeamId} from "@/utils/userStore.js";
|
||||
import {getTeamMemberCount, getTeamBill} from "@/api/teamBill.js";
|
||||
import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
|
||||
import { getTeamId } from '@/utils/userStore.js'
|
||||
import { getTeamMemberCount, getTeamBill } from '@/api/teamBill.js'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@ -187,7 +246,7 @@ const teamBillInfo = reactive({
|
||||
hostSalary: '–',
|
||||
agentSalary: '–',
|
||||
total: '–',
|
||||
status: '–'
|
||||
status: '–',
|
||||
})
|
||||
const loadingTeamBill = ref(false)
|
||||
|
||||
@ -266,14 +325,14 @@ const fetchTeamBillData = async () => {
|
||||
const billBelong = latestBill.billBelong.toString()
|
||||
const year = billBelong.substring(0, 4)
|
||||
const month = billBelong.substring(4, 6)
|
||||
|
||||
|
||||
// 格式化状态
|
||||
const formatStatus = (status) => {
|
||||
const statusMap = {
|
||||
'SETTLED': 'Settled',
|
||||
'UNPAID': 'Pending',
|
||||
'HANG_UP': 'Pending',
|
||||
'PAID': 'Completed'
|
||||
SETTLED: 'Settled',
|
||||
UNPAID: 'Pending',
|
||||
HANG_UP: 'Pending',
|
||||
PAID: 'Completed',
|
||||
}
|
||||
return statusMap[status] || status
|
||||
}
|
||||
@ -284,7 +343,7 @@ const fetchTeamBillData = async () => {
|
||||
hostSalary: latestBill.settleResult?.memberSalary?.toFixed(2) || '–',
|
||||
agentSalary: latestBill.settleResult?.ownSalary?.toFixed(2) || '–',
|
||||
total: latestBill.settleResult?.totalSalary?.toFixed(2) || '–',
|
||||
status: formatStatus(latestBill.status)
|
||||
status: formatStatus(latestBill.status),
|
||||
})
|
||||
}
|
||||
} else {
|
||||
@ -297,23 +356,31 @@ const fetchTeamBillData = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const {
|
||||
userInfo,
|
||||
salaryInfo,
|
||||
taskInfo,
|
||||
handleImageError,
|
||||
getAvatarPlaceholder
|
||||
} = usePageInitializationWithConfig('AGENCY_CENTER', {
|
||||
needsTeamInfo: true,
|
||||
onDataLoaded: (data) => {
|
||||
fetchTeamMemberCount()
|
||||
fetchTeamBillData() // 新增：获取团队账单数据
|
||||
}
|
||||
})
|
||||
const { userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder } =
|
||||
usePageInitializationWithConfig('AGENCY_CENTER', {
|
||||
needsTeamInfo: true,
|
||||
onDataLoaded: (data) => {
|
||||
fetchTeamMemberCount()
|
||||
fetchTeamBillData() // 新增：获取团队账单数据
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<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 {
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
@ -330,7 +397,7 @@ const {
|
||||
padding: 16px;
|
||||
border-radius: 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 {
|
||||
@ -343,7 +410,7 @@ const {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
background-color: #8B5CF6;
|
||||
background-color: #8b5cf6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -394,7 +461,6 @@ const {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.account-tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
@ -408,8 +474,8 @@ const {
|
||||
}
|
||||
|
||||
.agency-tag {
|
||||
background-color: #DBEAFE;
|
||||
color: #1E40AF;
|
||||
background-color: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
/* Host Agency 标签页 */
|
||||
@ -418,7 +484,7 @@ const {
|
||||
background-color: white;
|
||||
border-radius: 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;
|
||||
}
|
||||
|
||||
@ -442,20 +508,20 @@ const {
|
||||
.host-agency-tab.active {
|
||||
background-color: white;
|
||||
color: #333;
|
||||
border-bottom-color: #8B5CF6;
|
||||
border-bottom-color: #8b5cf6;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.host-agency-tab:not(.active):hover {
|
||||
background-color: #e9ecef;
|
||||
color: #8B5CF6;
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.host-agency-tab .help-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: #8B5CF6;
|
||||
background-color: #8b5cf6;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 10px;
|
||||
@ -469,7 +535,7 @@ const {
|
||||
padding: 16px;
|
||||
border-radius: 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 {
|
||||
@ -489,7 +555,7 @@ const {
|
||||
.personal-salary-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #8B5CF6;
|
||||
color: #8b5cf6;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
@ -500,7 +566,7 @@ const {
|
||||
}
|
||||
|
||||
.personal-salary-btn:hover {
|
||||
color: #7C3AED;
|
||||
color: #7c3aed;
|
||||
}
|
||||
|
||||
.salary-content {
|
||||
@ -530,7 +596,7 @@ const {
|
||||
.salary-separator {
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background-color: #8B5CF6;
|
||||
background-color: #8b5cf6;
|
||||
}
|
||||
|
||||
/* Host Agency 内容区域 */
|
||||
@ -539,7 +605,7 @@ const {
|
||||
padding: 16px;
|
||||
border-radius: 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 {
|
||||
background-color: white;
|
||||
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;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid #e5e7eb;
|
||||
@ -588,8 +654,6 @@ const {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 任务表格 */
|
||||
.task-table {
|
||||
border: 1px solid #e5e7eb;
|
||||
@ -633,11 +697,11 @@ const {
|
||||
}
|
||||
|
||||
.minutes-progress {
|
||||
color: #6B7280;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.minutes-completed {
|
||||
color: #10B981;
|
||||
color: #10b981;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -674,7 +738,7 @@ const {
|
||||
.card-date {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
color: #1f2937;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@ -685,7 +749,7 @@ const {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #8B5CF6;
|
||||
color: #8b5cf6;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
@ -693,7 +757,7 @@ const {
|
||||
}
|
||||
|
||||
.card-link:hover {
|
||||
color: #7C3AED;
|
||||
color: #7c3aed;
|
||||
}
|
||||
|
||||
.card-link .arrow {
|
||||
@ -717,18 +781,18 @@ const {
|
||||
|
||||
.detail-label {
|
||||
font-size: 14px;
|
||||
color: #6B7280;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1F2937;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
background-color: #DBEAFE;
|
||||
color: #1D4ED8;
|
||||
background-color: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
@ -739,7 +803,7 @@ const {
|
||||
.member-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.policy-link span:first-child {
|
||||
@ -748,8 +812,6 @@ const {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 操作按钮 */
|
||||
.action-buttons {
|
||||
display: grid;
|
||||
@ -775,12 +837,12 @@ const {
|
||||
}
|
||||
|
||||
.exchange-btn {
|
||||
background-color: #FDE68A;
|
||||
color: #D97706;
|
||||
background-color: #fde68a;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.transfer-btn {
|
||||
background-color: #8B5CF6;
|
||||
background-color: #8b5cf6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -788,7 +850,7 @@ const {
|
||||
.platform-policy-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #8B5CF6;
|
||||
color: #8b5cf6;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
@ -799,19 +861,37 @@ const {
|
||||
}
|
||||
|
||||
.platform-policy-btn:hover {
|
||||
color: #7C3AED;
|
||||
color: #7c3aed;
|
||||
}
|
||||
|
||||
.platform-policy-btn .arrow {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #8B5CF6;
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
/* 通用箭头样式 */
|
||||
.arrow {
|
||||
font-size: 16px;
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user