diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js index 839decb..9a8a026 100644 --- a/src/utils/permissionManager.js +++ b/src/utils/permissionManager.js @@ -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, // 地图选择页面 diff --git a/src/views/ApplyView.vue b/src/views/ApplyView.vue index 2062c02..00ec2bb 100644 --- a/src/views/ApplyView.vue +++ b/src/views/ApplyView.vue @@ -8,36 +8,62 @@ :style="{ borderBottom: '1px solid #E5E5E5' }" /> -
+
-
+
-

{{ t('apply_reminder') }}

+

+ {{ t('apply_reminder') }} +

-

+

{{ t('apply_reminder_detail') }}

-
+
-
- +
+
@@ -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') }} @@ -54,49 +90,164 @@
-
-

{{ t('application_records') }}

-
-
-
- -
-

{{ t('my_agent') }}:

-
+
-
-

{{ record.ownUserProfile?.userNickname }}

- +
+

+ {{ record.ownUserProfile?.userNickname }} +

+
-
- {{ t('pending') }} - +
+ + {{ t('pending') }} + +
-
-
-

{{ t('application_help') }}

-

{{ t('application_help_detail') }}

- +
+
+

+ {{ t('application_help') }} +

+

+ {{ t('application_help_detail') }} +

+
@@ -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; + } }