feat(申请主播页): 更改成公共页面，并调整页面样式

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, // 地图选择页面

src/views/ApplyView.vue

@@ -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">
+        <div
-          <label>{{ t('apply_id') }}</label>
+          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">
+    <div
-      <h3>{{ t('application_records') }}</h3>
+      v-if="applyRecords.length > 0"
-      <div class="record-list">
+      class="records-section"
-        <div v-for="record in applyRecords" :key="record.messageId" class="record-item">
+      style="background-color: white; padding: 20px; border-radius: 8px; margin-top: 20px"
-          <div class="record-info">
+    >
-            <!-- <div class="team-info">
+      <h3 style="margin: 0 0 16px 0; font-weight: 600; color: #333">
-              <p class="team-label">{{ t('apply_join_team') }}:</p>
+        {{ t('application_records') }}
-              <p class="team-id">Team ID: {{ record.teamProfile?.id }}</p>
+      </h3>
-              <p class="team-country">
+      <div class="record-list" style="display: flex; flex-direction: column; gap: 12px">
-                {{ record.teamProfile?.country?.countryName }} ({{
+        <div
-                  record.teamProfile?.country?.countryCode
+          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
-            <div class="owner-info">
+                class="owner-profile"
-              <p class="owner-label">{{ t('my_agent') }}:</p>
+                style="display: flex; align-items: center; gap: 8px; text-align: start"
-              <div class="owner-profile">
+              >
                 <img
-                  v-if="record.ownUserProfile?.userAvatar"
+                  :src="record.ownUserProfile.userAvatar || ''"
-                  :src="record.ownUserProfile.userAvatar"
+                  style="
-                  class="owner-avatar"
+                    display: block;
+                    object-fit: cover;
+                    width: 20%;
+                    aspect-ratio: 1/1;
+                    border-radius: 50%;
+                  "
+                  @error="defaultAvatarUrl"
                 />
-                <div>
+                <div style="width: 70%">
-                  <p class="owner-name">{{ record.ownUserProfile?.userNickname }}</p>
+                  <p
-                  <p class="owner-account">ID: {{ record.ownUserProfile?.account }}</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">
+          <div class="record-actions" style="display: flex; align-items: center; gap: 8px">
-            <span class="record-status status-pending"> {{ t('pending') }} </span>
+            <span
-            <button class="cancel-btn" @click="handleCancelApply(record)">{{ t('cancel') }}</button>
+              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
-      <div class="help-content" @click.stop>
+      v-if="showHelpModal"
-        <h3>{{ t('application_help') }}</h3>
+      class="help-modal"
-        <p>{{ t('application_help_detail') }}</p>
+      @click="closeHelp"
-        <button class="close-btn" @click="closeHelp">{{ t('got_it') }}</button>
+      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,
+  forceRefresh: true, // 强制刷新
-  needsWorkStatistics: false,
-  needsTeamInfo: false,
-  needsRouteGuard: true,
   onDataLoaded: () => {
     fetchApplyRecords()
   },
@@ -317,288 +471,7 @@ usePageInitializationWithConfig('APPLY', {
   background-image: url(../assets/images/secondBg.png);
 }
 
-.content {
+/* RTL布局支持 */
-  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布局支持 - 更完整的实现 */
 [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;
 }
 
-/* 将物理属性替换为逻辑属性 */
+@media screen and (max-width: 360px) {
-.input-group {
+  * {
-  width: 100%;
+    font-size: 10px;
-  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;
 }
 
-.owner-profile {
+@media screen and (min-width: 360px) {
-  display: flex;
+  * {
-  align-items: center;
+    font-size: 14px;
-  gap: 8px;
+  }
 }
 
-.record-actions {
+@media screen and (min-width: 768px) {
-  display: flex;
+  * {
-  align-items: center;
+    font-size: 24px;
-  gap: 8px;
+  }
 }
 
-/* 文本对齐使用逻辑属性 */
+@media screen and (min-width: 1024px) {
-.record-info {
+  * {
-  text-align: start;
+    font-size: 32px;
-}
+  }
-
-.team-info,
-.owner-info {
-  text-align: start;
 }
 </style>