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-11-14 18:19:24 +08:00
parent eec485d8e2
commit a04a54fbf0
2 changed files with 214 additions and 362 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/utils/permissionManager.js
View File

@ -113,7 +113,6 @@ export const ROLE_PERMISSIONS = {
PAGES.RECHARGE_STANDARD, //普通转账功能
'/information-details',
'/search-payee',
'/apply',
'/history-salary',
'/platform-salary',
'/invite-members',
@ -134,6 +133,7 @@ export const ROLE_PERMISSIONS = {
// 公共页面（所有身份都可以访问）
PUBLIC_PAGES: [
PAGES.APPLY, //申请主播页面
PAGES.NOT_APP, // 错误页面
PAGES.PAY_RESULT, // 支付成功页面
PAGES.MAP, // 地图选择页面

574
src/views/ApplyView.vue
View File

@ -8,36 +8,62 @@
:style="{ borderBottom: '1px solid #E5E5E5' }"
/>
<div class="content">
<div class="content" style="padding: 16px 10px">
<!-- 申请说明 -->
<div class="reminder-section">
<div class="reminder-section" style="margin-bottom: 20px">
<div
class="reminder-title"
style="display: flex; align-items: center; justify-content: space-between"
>
<h3>{{ t('apply_reminder') }}</h3>
<h3 style="margin-bottom: 4px; font-weight: 600; color: rgba(0, 0, 0, 0.4)">
{{ t('apply_reminder') }}
</h3>
<img
src="../assets/icon/help.png"
alt=""
style="width: 16px; aspect-ratio: 1/1"
style="width: 16px; aspect-ratio: 1/1; cursor: pointer"
@click="showHelp"
/>
</div>
<p>
<p style="font-size: 0.9em; font-weight: 510">
{{ t('apply_reminder_detail') }}
</p>
</div>
<!-- 申请表单 -->
<div class="application-form">
<div class="application-form" style="display: flex; gap: 8px">
<!-- 输入框 -->
<div class="input-group">
<label>{{ t('apply_id') }}</label>
<div
class="input-group"
style="
width: 100%;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
display: flex;
align-items: center;
padding-inline: 8px;
padding-block: 8px;
"
>
<label style="display: block; font-weight: 600">
{{ t('apply_id') }}
</label>
<input
v-model="agentId"
type="text"
:placeholder="t('enter_agent_id')"
class="agency-input"
style="
width: 100%;
padding: 4px;
border: none;
outline: none;
border-radius: 6px;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.4);
"
/>
</div>
@ -47,6 +73,16 @@
class="apply-btn"
@click="submitApplication"
:disabled="!agentId.trim() || isLoading"
style="
padding: 4px 8px;
color: white;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
box-shadow: 0 0 4px 0 rgba(198, 112, 255, 0.25);
font-weight: 600;
cursor: pointer;
"
>
{{ t('apply') }}
</button>
@ -54,49 +90,164 @@
</div>
<!-- 申请记录 -->
<div v-if="applyRecords.length > 0" class="records-section">
<h3>{{ t('application_records') }}</h3>
<div class="record-list">
<div v-for="record in applyRecords" :key="record.messageId" class="record-item">
<div class="record-info">
<!-- <div class="team-info">
<p class="team-label">{{ t('apply_join_team') }}:</p>
<p class="team-id">Team ID: {{ record.teamProfile?.id }}</p>
<p class="team-country">
{{ record.teamProfile?.country?.countryName }} ({{
record.teamProfile?.country?.countryCode
}})
<div
v-if="applyRecords.length > 0"
class="records-section"
style="background-color: white; padding: 20px; border-radius: 8px; margin-top: 20px"
>
<h3 style="margin: 0 0 16px 0; font-weight: 600; color: #333">
{{ t('application_records') }}
</h3>
<div class="record-list" style="display: flex; flex-direction: column; gap: 12px">
<div
v-for="record in applyRecords"
:key="record.messageId"
class="record-item"
style="
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border: 1px solid #e0e0e0;
border-radius: 6px;
"
>
<div class="record-info" style="flex: 1; min-width: 0">
<div class="owner-info" style="margin-bottom: 12px">
<p
class="owner-label"
style="margin: 0 0 4px 0; font-size: 0.9em; font-weight: 600; color: #333"
>
{{ t('my_agent') }}:
</p>
</div> -->
<div class="owner-info">
<p class="owner-label">{{ t('my_agent') }}:</p>
<div class="owner-profile">
<div
class="owner-profile"
style="display: flex; align-items: center; gap: 8px; text-align: start"
>
<img
v-if="record.ownUserProfile?.userAvatar"
:src="record.ownUserProfile.userAvatar"
class="owner-avatar"
:src="record.ownUserProfile.userAvatar || ''"
style="
display: block;
object-fit: cover;
width: 20%;
aspect-ratio: 1/1;
border-radius: 50%;
"
@error="defaultAvatarUrl"
/>
<div>
<p class="owner-name">{{ record.ownUserProfile?.userNickname }}</p>
<p class="owner-account">ID: {{ record.ownUserProfile?.account }}</p>
<div style="width: 70%">
<p
class="owner-name"
style="
margin: 0 0 2px 0;
font-size: 0.9em;
font-weight: 500;
color: #333;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>
{{ record.ownUserProfile?.userNickname }}
</p>
<p
class="owner-account"
style="margin: 0; font-size: 0.7em; color: #666; text-align: start"
>
ID: {{ record.ownUserProfile?.account }}
</p>
</div>
</div>
</div>
</div>
<div class="record-actions">
<span class="record-status status-pending"> {{ t('pending') }} </span>
<button class="cancel-btn" @click="handleCancelApply(record)">{{ t('cancel') }}</button>
<div class="record-actions" style="display: flex; align-items: center; gap: 8px">
<span
class="record-status status-pending"
style="
padding: 4px 8px;
border-radius: 4px;
font-size: 0.7em;
font-weight: 600;
background-color: #fef3c7;
color: #d97706;
"
>
{{ t('pending') }}
</span>
<button
class="cancel-btn"
@click="handleCancelApply(record)"
style="
padding: 4px 8px;
background-color: #ef4444;
color: white;
border: none;
border-radius: 4px;
font-size: 0.7em;
cursor: pointer;
"
>
{{ t('cancel') }}
</button>
</div>
</div>
</div>
</div>
<!-- 帮助弹窗 -->
<div v-if="showHelpModal" class="help-modal" @click="closeHelp">
<div class="help-content" @click.stop>
<h3>{{ t('application_help') }}</h3>
<p>{{ t('application_help_detail') }}</p>
<button class="close-btn" @click="closeHelp">{{ t('got_it') }}</button>
<div
v-if="showHelpModal"
class="help-modal"
@click="closeHelp"
style="
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
"
>
<div
class="help-content"
@click.stop
style="
background-color: white;
padding: 20px;
border-radius: 8px;
max-width: 300px;
width: 100%;
"
>
<h3 style="margin: 0 0 12px 0; font-weight: 600; color: #333; text-align: center">
{{ t('application_help') }}
</h3>
<p style="margin: 0 0 16px 0; color: #666; line-height: 1.5">
{{ t('application_help_detail') }}
</p>
<button
class="close-btn"
@click="closeHelp"
style="
width: 100%;
padding: 10px;
background-color: #8b5cf6;
color: white;
border: none;
border-radius: 6px;
font-size: 0.9em;
font-weight: 600;
cursor: pointer;
"
>
{{ t('got_it') }}
</button>
</div>
</div>
</div>
@ -128,6 +279,12 @@ const showHelpModal = ref(false)
const applyRecords = ref([])
const searchedTeamInfo = ref(null) // 存储搜索到的团队信息
const defaultAvatarUrl = (e) => {
console.log('头像资源出错')
e.target.onerror = null //防止循环
e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
}
// 监听语言变化并设置文档方向
watch(locale, (newLocale) => {
setDocumentDirection(newLocale)
@ -293,10 +450,7 @@ const getStatusClass = (status) => {
// 页面加载时获取申请记录
usePageInitializationWithConfig('APPLY', {
needsBankBalance: false,
needsWorkStatistics: false,
needsTeamInfo: false,
needsRouteGuard: true,
forceRefresh: true, // 强制刷新
onDataLoaded: () => {
fetchApplyRecords()
},
@ -317,288 +471,7 @@ usePageInitializationWithConfig('APPLY', {
background-image: url(../assets/images/secondBg.png);
}
.content {
padding: 16px 10px;
}
.reminder-section {
margin-bottom: 20px;
}
.reminder-section h3 {
margin-bottom: 4px;
font-size: 16px;
font-weight: 600;
color: rgba(0, 0, 0, 0.4);
}
.reminder-section p {
font-size: 14px;
font-weight: 510;
}
.application-form {
display: flex;
gap: 8px;
}
.input-group {
width: 100%;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
display: flex;
align-items: center;
padding-inline: 8px;
padding-block: 8px;
}
.input-group label {
display: block;
font-size: 16px;
font-weight: 600;
}
.agency-input {
width: 100%;
padding: 4px;
border: none;
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.4);
}
.agency-input:focus {
outline: none;
}
.agency-input::placeholder {
color: rgba(0, 0, 0, 0.4);
font-weight: 590;
font-size: 12px;
}
.error-message {
margin-bottom: 16px;
padding: 12px;
background-color: #fee2e2;
border: 1px solid #fecaca;
border-radius: 6px;
color: #dc2626;
font-size: 14px;
}
.apply-btn {
padding: 4px 8px;
color: white;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
box-shadow: 0 0 4px 0 rgba(198, 112, 255, 0.25);
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.apply-btn:disabled {
background-color: #d1d5db;
cursor: not-allowed;
}
.help-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.help-content {
background-color: white;
padding: 20px;
border-radius: 8px;
max-width: 300px;
width: 100%;
}
.help-content h3 {
margin: 0 0 12px 0;
font-size: 18px;
font-weight: 600;
color: #333;
text-align: center;
}
.help-content p {
margin: 0 0 16px 0;
color: #666;
line-height: 1.5;
}
.close-btn {
width: 100%;
padding: 10px;
background-color: #8b5cf6;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.records-section {
background-color: white;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
}
.records-section h3 {
margin: 0 0 16px 0;
font-size: 16px;
font-weight: 600;
color: #333;
}
.record-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.record-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border: 1px solid #e0e0e0;
border-radius: 6px;
}
.record-info {
flex: 1;
}
.record-actions {
display: flex;
align-items: center;
gap: 8px;
}
.cancel-btn {
padding: 4px 8px;
background-color: #ef4444;
color: white;
border: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.record-reason {
margin: 0 0 4px 0;
font-size: 14px;
color: #333;
}
.record-time {
margin: 0;
font-size: 12px;
color: #666;
}
.team-info,
.owner-info {
margin-bottom: 12px;
}
.team-label,
.owner-label {
margin: 0 0 4px 0;
font-size: 14px;
font-weight: 600;
color: #333;
}
.team-id,
.team-country {
margin: 0 0 2px 0;
font-size: 12px;
color: #666;
}
.owner-profile {
display: flex;
align-items: center;
gap: 8px;
}
.owner-avatar {
width: 32px;
height: 32px;
border-radius: 16px;
object-fit: cover;
}
.owner-name {
margin: 0 0 2px 0;
font-size: 14px;
font-weight: 500;
color: #333;
}
.owner-account {
margin: 0;
font-size: 12px;
color: #666;
}
.record-status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}
.status-pending {
background-color: #fef3c7;
color: #d97706;
}
.status-approved {
background-color: #d1fae5;
color: #059669;
}
.status-rejected {
background-color: #fee2e2;
color: #dc2626;
}
.existing-application {
padding: 12px;
background-color: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 6px;
text-align: center;
}
.existing-application p {
margin: 0;
font-size: 14px;
color: #d97706;
}
/* RTL布局支持 - 更完整的实现 */
/* RTL布局支持 */
[dir='rtl'] .application-form {
/* flex-direction: row-reverse; */
}
@ -616,7 +489,6 @@ usePageInitializationWithConfig('APPLY', {
/* flex-direction: row-reverse; */
}
/* 文本对齐 */
[dir='rtl'] .record-info {
text-align: right;
}
@ -626,90 +498,70 @@ usePageInitializationWithConfig('APPLY', {
text-align: right;
}
/* 按钮和交互元素 */
[dir='rtl'] .cancel-btn {
margin-left: 0;
margin-right: 8px;
}
/* 状态标签 */
[dir='rtl'] .record-status {
margin-left: 0;
margin-right: 8px;
}
/* 输入框标签 */
[dir='rtl'] .input-group label {
margin-right: 0;
margin-left: 8px;
}
/* 帮助模态框 */
[dir='rtl'] .help-content {
text-align: right;
}
/* 记录区域 */
[dir='rtl'] .records-section {
text-align: right;
}
/* 应用按钮 */
[dir='rtl'] .apply-btn {
margin-left: 0;
margin-right: 8px;
}
/* 团队信息 */
[dir='rtl'] .team-label,
[dir='rtl'] .owner-label {
text-align: right;
}
/* 团队ID和国家 */
[dir='rtl'] .team-id,
[dir='rtl'] .team-country {
text-align: right;
}
/* 所有者名称和账号 */
[dir='rtl'] .owner-name,
[dir='rtl'] .owner-account {
text-align: right;
}
/* 将物理属性替换为逻辑属性 */
.input-group {
width: 100%;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
display: flex;
align-items: center;
padding-inline: 8px;
padding-block: 8px;
@media screen and (max-width: 360px) {
* {
font-size: 10px;
}
}
.owner-profile {
display: flex;
align-items: center;
gap: 8px;
@media screen and (min-width: 360px) {
* {
font-size: 14px;
}
}
.record-actions {
display: flex;
align-items: center;
gap: 8px;
@media screen and (min-width: 768px) {
* {
font-size: 24px;
}
}
/* 文本对齐使用逻辑属性 */
.record-info {
text-align: start;
}
.team-info,
.owner-info {
text-align: start;
@media screen and (min-width: 1024px) {
* {
font-size: 32px;
}
}
</style>