applye 页面

src/api/wallet.js

@@ -115,6 +115,26 @@ export function getFreightWaterFlow(userId) {
   return get(`/wallet/freight/balance/running/water/client/flowByUserId?userId=${userId}`)
 }
 
+/**
+ * 根据账号搜索团队
+ * @param {string} account - 代理账号
+ * @returns {Promise} 返回团队信息
+ */
+export function searchTeamByAccount(account) {
+  return get(`/team/search-account?account=${account}`)
+}
+
+/**
+ * 发送加入团队申请
+ * @param {Object} data - 申请数据
+ * @param {string} data.teamId - 团队ID
+ * @param {string} data.reason - 申请原因
+ * @returns {Promise} 返回申请结果
+ */
+export function sendTeamApplyJoin(data) {
+  return post('/team/user/apply', data)
+}
+
 /**
  * 格式化时间戳为可读格式
  * @param {number} timestamp - 时间戳（毫秒）

src/views/ApplyView.vue

@@ -1,377 +1,408 @@
 <template>
-  <div class="apply-page gradient-background-circles">
+  <div class="apply-view gradient-background-circles">
-    <!-- 顶部导航 -->
+    <MobileHeader title="Apply to join the team" :showHelp="true" @help="showHelp" />
-    <MobileHeader
-      title="Apply to join the team"
-      :show-help="true"
-      @help="showHelp"
-    />
 
-    <!-- 主要内容 -->
     <div class="content">
-      <!-- 提醒信息 -->
+      <!-- 申请说明 -->
-      <div class="reminder">
+      <div class="reminder-section">
         <h3>Reminder before application:</h3>
-        <p>Enter the ID of your agent, and you will become the host after the agency is approved. After becoming an anchor, your income will be entrusted to your agent</p>
+        <p>Enter the ID of your agent, and you will become the host after the host apply is approved. After becoming an host, your income will be entrusted to your agent</p>
       </div>
 
       <!-- 申请表单 -->
-      <div class="apply-form">
+      <div class="application-form">
-        <div class="form-group">
+        <div class="input-group">
-          <label class="form-label">Apply ID:</label>
+          <label for="agentId">Apply ID:</label>
-          <div class="input-group">
+          <div class="input-container">
             <input
+              id="agentId"
               v-model="agentId"
               type="text"
               placeholder="Please enter the agent ID"
-              class="form-input"
+              class="agent-input"
+              @input="clearError"
             />
-            <button class="apply-btn" @click="submitApplication" :disabled="!agentId">
-              Apply
-            </button>
           </div>
         </div>
+
+        <!-- 错误提示 -->
+        <div v-if="errorMessage" class="error-message">
+          <span>{{ errorMessage }}</span>
+        </div>
+
+        <!-- 搜索到的代理信息 -->
+        <div v-if="agentInfo" class="agent-info">
+          <div class="agent-card">
+            <div class="agent-avatar">
+              <img v-if="agentInfo.userAvatar" :src="agentInfo.userAvatar" :alt="agentInfo.userNickname" />
+              <span v-else>{{ agentInfo.userNickname?.charAt(0) || 'A' }}</span>
+            </div>
+            <div class="agent-details">
+              <h4>{{ agentInfo.userNickname || 'Agent' }}</h4>
+              <p>ID: {{ agentInfo.account }}</p>
+              <div class="agent-tags">
+                <span class="tag">🏢 Agent</span>
+                <span v-if="agentInfo.countryName" class="tag">🌍 {{ agentInfo.countryName }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 申请按钮 -->
+        <button
+          class="apply-btn"
+          @click="submitApplication"
+          :disabled="!agentId.trim() || isLoading"
+        >
+          <span v-if="isLoading">Applying...</span>
+          <span v-else>Apply</span>
+        </button>
+      </div>
+
+      <!-- 加载状态 -->
+      <div v-if="isSearching" class="loading-state">
+        <div class="loading-spinner"></div>
+        <p>Searching agent...</p>
       </div>
     </div>
 
     <!-- 帮助弹窗 -->
-    <div v-if="showHelpModal" class="modal-overlay" @click="showHelpModal = false">
+    <div v-if="showHelpModal" class="help-modal" @click="closeHelp">
-      <div class="modal" @click.stop>
+      <div class="help-content" @click.stop>
-        <h3>Help Information</h3>
+        <h3>Application Help</h3>
-        <p>Please contact your agent to get the correct Agent ID before applying.</p>
+        <div class="help-text">
-        <button @click="showHelpModal = false">Close</button>
+          <p><strong>How to apply:</strong></p>
+          <ul>
+            <li>Enter your agent's ID in the input field</li>
+            <li>The system will search and verify the agent</li>
+            <li>Click "Apply" to submit your application</li>
+            <li>Wait for the agent to approve your application</li>
+          </ul>
+          <p><strong>Note:</strong> After approval, your income will be managed by your agent.</p>
+        </div>
+        <button class="close-btn" @click="closeHelp">Got it</button>
       </div>
     </div>
   </div>
 </template>
 
-
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import MobileHeader from '../components/MobileHeader.vue'
-import { get, post } from '../utils/http.js'
+import { searchTeamByAccount, sendTeamApplyJoin } from '../api/wallet.js'
 
 const router = useRouter()
 
 // 响应式数据
-const searchAccount = ref('')
+const agentId = ref('')
-const searching = ref(false)
+const agentInfo = ref(null)
-const applying = ref(false)
+const errorMessage = ref('')
-const cancelling = ref(false)
+const isSearching = ref(false)
+const isLoading = ref(false)
 const showHelpModal = ref(false)
-const showInviteModal = ref(false)
-const showContactModal = ref(false)
 
-const teamProfile = reactive({})
+// 防抖搜索代理
-const teamOwnUserProfile = reactive({})
+let searchTimeout = null
-const applyMessageId = ref('')
 
-const inviteMessage = ref([])
+// 监听代理ID输入，自动搜索
-const inviteMessageLoading = ref(false)
+watch(agentId, (newValue) => {
-const processingItem = reactive({})
+  if (searchTimeout) {
+    clearTimeout(searchTimeout)
+  }
 
-const contactForm = reactive({
+  if (newValue.trim()) {
-  id: '',
+    searchTimeout = setTimeout(() => {
-  status: '',
+      searchAgent(newValue.trim())
-  contact: ''
+    }, 500) // 500ms防抖
+  } else {
+    agentInfo.value = null
+    errorMessage.value = ''
+  }
 })
 
-// 计算属性
+// 搜索代理
-const hasUnreadInvites = computed(() => {
+const searchAgent = async (account) => {
-  return inviteMessage.value.some(msg => msg.status === 0)
+  if (!account) return
-})
+
+  isSearching.value = true
+  errorMessage.value = ''
+  agentInfo.value = null
 
-// 获取用户等待申请的团队信息
-const loadUserSendJoinWaitApplyTeamProfile = async () => {
   try {
-    const response = await get('/team/wait-apply/profile')
+    const response = await searchTeamByAccount(account)
 
     if (response.status && response.body) {
-      const result = response.body
+      // 假设返回的是代理团队信息，我们需要显示代理信息
-      applyMessageId.value = result.messageId || ''
+      agentInfo.value = {
-      Object.assign(teamProfile, result.teamProfile || {})
+        account: account,
-      Object.assign(teamOwnUserProfile, result.ownUserProfile || {})
+        userNickname: response.body.teamName || 'Agent Team',
+        userAvatar: response.body.teamAvatar || '',
+        countryName: response.body.countryName || '',
+        teamId: response.body.teamId,
+        agentId: response.body.agentId
+      }
+    } else {
+      errorMessage.value = 'Agent not found. Please check the ID and try again.'
     }
   } catch (error) {
-    console.error('Failed to load wait apply profile:', error)
+    console.error('搜索代理失败:', error)
-    if (error.errorCode === 6001) {
+    errorMessage.value = 'Failed to search agent. Please try again.'
-      // 用户已经在团队中，跳转到团队页面
+  } finally {
-      router.replace('/host-center')
+    isSearching.value = false
-    }
   }
 }
 
-// 搜索团队
+// 清除错误信息
-const searchTeam = async () => {
+const clearError = () => {
-  if (!searchAccount.value.trim()) {
+  errorMessage.value = ''
-    alert('Please enter agent ID')
+}
+
+// 提交申请
+const submitApplication = async () => {
+  if (!agentId.value.trim()) {
+    errorMessage.value = 'Please enter agent ID'
     return
   }
 
-  try {
+  if (!agentInfo.value) {
-    searching.value = true
+    errorMessage.value = 'Please wait for agent verification'
-    const response = await get(`/team/search-account?account=${searchAccount.value.trim()}`)
-
-    if (response.status && response.body) {
-      const result = response.body
-      Object.assign(teamProfile, result.teamProfile || {})
-      Object.assign(teamOwnUserProfile, result.ownUserProfile || {})
-    }
-  } catch (error) {
-    console.error('Failed to search team:', error)
-    if (error.errorCode === 6010) {
-      alert('Team not found!')
-    } else if (error.errorMsg) {
-      alert(error.errorMsg)
-    }
-  } finally {
-    searching.value = false
-  }
-}
-
-// 提交申请加入团队
-const submitApplyJoin = async () => {
-  if (!teamProfile.id) {
-    alert('Invalid team information')
     return
   }
 
+  isLoading.value = true
+  errorMessage.value = ''
+
   try {
-    applying.value = true
+    const applicationData = {
-    const response = await post('/team/user/apply', {
+      teamId: agentInfo.value.teamId,
-      teamId: teamProfile.id,
+      reason: `Application to join team under agent ${agentId.value}`
-      reason: 'JOIN'
-    })
-
-    if (response.status && response.body) {
-      applyMessageId.value = response.body
-      alert('Application submitted successfully!')
     }
-  } catch (error) {
-    console.error('Failed to apply:', error)
-    if (error.errorMsg) {
-      alert(error.errorMsg)
-    }
-  } finally {
-    applying.value = false
-  }
-}
 
-// 加载邀请消息
+    const response = await sendTeamApplyJoin(applicationData)
-const loadInviteMessage = async () => {
-  try {
-    inviteMessageLoading.value = true
-    const response = await get('/anchor-agent/invite/message')
-
-    if (response.status && response.body) {
-      inviteMessage.value = response.body || []
-    }
-  } catch (error) {
-    console.error('Failed to load invite messages:', error)
-    inviteMessage.value = []
-  } finally {
-    inviteMessageLoading.value = false
-  }
-}
-
-// 提交邀请处理
-const submitInviteProcess = async () => {
-  try {
-    const response = await post('/anchor-agent/invite/process', contactForm)
 
     if (response.status) {
-      processingItem.status = contactForm.status
+      // 申请成功
-      closeContactModal()
+      alert('Application submitted successfully! Please wait for approval.')
-
+      router.go(-1) // 返回上一页
-      if (contactForm.status === 1) {
+    } else {
-        // 同意后跳转到主页
+      errorMessage.value = response.message || 'Application failed. Please try again.'
-        router.replace('/host-center')
-      }
     }
   } catch (error) {
-    console.error('Failed to process invite:', error)
+    console.error('提交申请失败:', error)
-    if (error.errorMsg) {
+    errorMessage.value = 'Application failed. Please try again.'
-      alert(error.errorMsg)
+  } finally {
-    }
+    isLoading.value = false
   }
 }
 
-
+// 显示帮助
-// 事件处理
 const showHelp = () => {
   showHelpModal.value = true
 }
 
-const closeContactModal = () => {
+// 关闭帮助
-  showContactModal.value = false
+const closeHelp = () => {
-  contactForm.contact = ''
+  showHelpModal.value = false
 }
-
-
-// 组件挂载时执行
-onMounted(() => {
-  loadUserSendJoinWaitApplyTeamProfile()
-  loadInviteMessage()
-})
 </script>
 
 <style scoped>
-.apply-page {
+.apply-view {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
   min-height: 100vh;
-  background-color: #f1f2f3;
+  /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
 }
 
 .content {
-  padding: 16px 16px 100px 16px;
+  padding: 20px 16px;
   position: relative;
   z-index: 2;
 }
 
-/* 搜索区域 */
+/* 申请说明 */
-.search-section {
+.reminder-section {
-  display: flex;
+  background-color: rgba(255, 255, 255, 0.95);
-  flex-direction: column;
+  padding: 20px;
-  gap: 16px;
-}
-
-.reminder {
-  background-color: white;
-  padding: 16px;
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  margin-bottom: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.reminder h3 {
+.reminder-section h3 {
   margin: 0 0 12px 0;
   font-size: 16px;
   font-weight: 600;
   color: #333;
 }
 
-.reminder p {
+.reminder-section p {
   margin: 0;
   font-size: 14px;
   line-height: 1.5;
   color: #666;
 }
 
-.apply-form {
+/* 申请表单 */
-  background-color: white;
+.application-form {
-  padding: 16px;
+  background-color: rgba(255, 255, 255, 0.95);
+  padding: 24px;
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.form-group {
+.input-group {
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }
 
-.form-label {
+.input-group label {
   display: block;
   font-size: 16px;
   font-weight: 600;
   color: #333;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
-.input-group {
+.input-container {
-  display: flex;
+  position: relative;
-  gap: 12px;
-  align-items: center;
 }
 
-.form-input {
+.agent-input {
-  flex: 1;
+  width: 100%;
-  padding: 12px 16px;
+  padding: 16px;
-  border: 1px solid #ddd;
+  border: 2px solid #e0e0e0;
-  border-radius: 8px;
+  border-radius: 12px;
   font-size: 16px;
-  background-color: #f9f9f9;
+  background-color: white;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
 }
 
-.form-input:focus {
+.agent-input:focus {
   outline: none;
   border-color: #8B5CF6;
-  background-color: white;
 }
 
-.apply-btn {
+.agent-input::placeholder {
-  padding: 12px 24px;
+  color: #999;
-  background-color: #10B981;
+}
-  color: white;
+
-  border: none;
+/* 错误信息 */
+.error-message {
+  margin-bottom: 16px;
+  padding: 12px;
+  background-color: #FEE2E2;
+  border: 1px solid #FECACA;
   border-radius: 8px;
-  font-size: 16px;
+  color: #DC2626;
-  font-weight: 600;
+  font-size: 14px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  white-space: nowrap;
 }
 
-.apply-btn:hover:not(:disabled) {
+/* 代理信息 */
-  background-color: #059669;
+.agent-info {
+  margin-bottom: 24px;
 }
 
-.apply-btn:disabled {
+.agent-card {
-  background-color: #9CA3AF;
+  display: flex;
-  cursor: not-allowed;
+  align-items: center;
+  background-color: #F8FAFC;
+  padding: 16px;
+  border-radius: 12px;
+  border: 2px solid #E2E8F0;
 }
 
-/* 模态框样式 */
+.agent-avatar {
-.modal-overlay {
+  width: 50px;
-  position: fixed;
+  height: 50px;
-  top: 0;
+  border-radius: 25px;
-  left: 0;
+  background-color: #8B5CF6;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0,0,0,0.5);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  color: white;
-  padding: 16px;
-}
-
-
-.help-modal h3 {
-  margin: 0 0 16px 0;
   font-size: 18px;
+  font-weight: 600;
+  margin-right: 12px;
+  overflow: hidden;
 }
 
-.help-modal p {
+.agent-avatar img {
-  margin: 0 0 20px 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.agent-details h4 {
+  margin: 0 0 4px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.agent-details p {
+  margin: 0 0 8px 0;
   font-size: 14px;
   color: #666;
 }
 
-.help-modal button {
+.agent-tags {
-  padding: 8px 20px;
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.tag {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  background-color: #E0E7FF;
+  color: #5B21B6;
+}
+
+/* 申请按钮 */
+.apply-btn {
+  width: 100%;
+  padding: 16px;
   background-color: #8B5CF6;
   color: white;
   border: none;
-  border-radius: 6px;
+  border-radius: 12px;
-  cursor: pointer;
+  font-size: 16px;
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 18px;
   font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s;
 }
 
-
+.apply-btn:hover:not(:disabled) {
-.contact-form .form-group {
+  background-color: #7C3AED;
-  margin-bottom: 16px;
 }
 
-.contact-form label {
+.apply-btn:disabled {
-  display: block;
+  background-color: #D1D5DB;
-  font-size: 14px;
+  cursor: not-allowed;
-  font-weight: 500;
+}
-  color: #333;
+
-  margin-bottom: 6px;
+.apply-btn:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+/* 加载状态 */
+.loading-state {
+  text-align: center;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top: 3px solid white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 12px;
 }
 
 @keyframes spin {
@@ -379,23 +410,78 @@ onMounted(() => {
   100% { transform: rotate(360deg); }
 }
 
-
+.loading-state p {
-.empty-invites p {
   margin: 0;
+  color: white;
+  font-size: 14px;
+}
+
+/* 帮助弹窗 */
+.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: 24px;
+  border-radius: 16px;
+  max-width: 400px;
+  width: 100%;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.help-content h3 {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+}
+
+.help-text {
+  margin-bottom: 20px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.help-text p {
+  margin: 0 0 12px 0;
+}
+
+.help-text ul {
+  margin: 8px 0;
+  padding-left: 20px;
+}
+
+.help-text li {
+  margin-bottom: 6px;
+}
+
+.close-btn {
+  width: 100%;
+  padding: 12px;
+  background-color: #8B5CF6;
+  color: white;
+  border: none;
+  border-radius: 8px;
   font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
 }
 
-/* 响应式设计 */
+.close-btn:active {
-@media (max-width: 480px) {
+  background-color: #7C3AED;
-  .input-group {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .apply-btn {
-    width: 100%;
-    margin-top: 8px;
-  }
-
 }
+
 </style>