hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apply 页面调整

Browse Source
This commit is contained in:
tianfeng 2025-08-18 16:29:15 +08:00
parent 35130d8c01
commit f8b852e00d
4 changed files with 193 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/wallet.js
View File

@ -135,6 +135,17 @@ export function sendTeamApplyJoin(data) {
return post('/team/user/apply', data) return post('/team/user/apply', data)
} }
/**
* 获取团队申请记录
* @param {Object} params - 查询参数
* @param {string} params.teamId - 团队ID
* @param {string} params.status - 状态 (WAIT/AGREE/REJECT)
* @returns {Promise} 返回申请记录列表
*/
export function getTeamApplyRecord(params) {
return get('/team/user/apply/record', { params })
}
/** /**
* 格式化时间戳为可读格式 * 格式化时间戳为可读格式
* @param {number} timestamp - 时间戳（毫秒） * @param {number} timestamp - 时间戳（毫秒）

78
src/views/AgencyCenterView.vue
View File

@ -53,11 +53,12 @@
</div> </div>
<div class="salary-content"> <div class="salary-content">
<div class="salary-item"> <!--暂时禁用，后面补充-->
<!-- <div class="salary-item">
<p class="salary-label">History Salary:</p> <p class="salary-label">History Salary:</p>
<p class="salary-amount">${{ salaryInfo.historySalary }}</p> <p class="salary-amount">${{ salaryInfo.historySalary }}</p>
</div> </div>
<div class="salary-separator"></div> <div class="salary-separator"></div>-->
<div class="salary-item"> <div class="salary-item">
<p class="salary-label">Current Salary:</p> <p class="salary-label">Current Salary:</p>
<p class="salary-amount">${{ salaryInfo.currentSalary }}</p> <p class="salary-amount">${{ salaryInfo.currentSalary }}</p>
@ -154,6 +155,7 @@ import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import MobileHeader from '../components/MobileHeader.vue' import MobileHeader from '../components/MobileHeader.vue'
import { get } from '../utils/http.js' import { get } from '../utils/http.js'
import {getBankBalance} from "@/api/wallet.js";
const router = useRouter() const router = useRouter()
@ -173,13 +175,6 @@ const salaryInfo = reactive({
currentSalary: 12345 currentSalary: 12345
}) })
// 身份选项
const identities = [
{ label: 'Host', value: 'host' },
{ label: 'Agency', value: 'agency' },
{ label: 'Coin Seller', value: 'coin-seller' }
]
// 用户信息 // 用户信息
const userInfo = reactive({ const userInfo = reactive({
name: 'User1', name: 'User1',
@ -203,23 +198,6 @@ const teamBillInfo = reactive({
status: 'Pending' status: 'Pending'
}) })
// 身份切换处理
const handleIdentityChange = (identity) => {
switch (identity) {
case 'host':
router.push('/host-center')
break
case 'coin-seller':
router.push('/coin-seller')
break
case 'agency':
default:
// 保持在当前页面
currentIdentity.value = identity
break
}
}
// 页面跳转方法 // 页面跳转方法
const goToNotification = () => { const goToNotification = () => {
router.push('/message') router.push('/message')
@ -237,10 +215,6 @@ const goToTeamMember = () => {
router.push('/team-member') router.push('/team-member')
} }
const goToPlatformPolicy = () => {
router.push('/platform-policy')
}
const exchangeGoldCoins = () => { const exchangeGoldCoins = () => {
router.push('/exchange-gold-coins') router.push('/exchange-gold-coins')
} }
@ -275,9 +249,30 @@ const fetchTeamMemberCount = async () => {
} }
} }
// 获取银行余额
const fetchBankBalance = async () => {
try {
const response = await getBankBalance()
if (response.status && typeof response.body === 'number') {
// 格式化余额显示，保留2位小数
salaryInfo.currentSalary = response.body.toFixed(2)
} else {
salaryInfo.currentSalary = 0.00
}
} catch (error) {
console.error('Failed to fetch bank balance:', error)
salaryInfo.currentSalary = 0.00
// 可以显示错误提示
alert('Failed to load balance. Please try again.')
}
}
// 组件挂载时获取数据 // 组件挂载时获取数据
onMounted(() => { onMounted(() => {
fetchTeamMemberCount() fetchTeamMemberCount()
fetchBankBalance()
}) })
</script> </script>
@ -714,29 +709,6 @@ onMounted(() => {
color: #1F2937; color: #1F2937;
} }
/* Platform Policy 链接 */
.policy-link {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
margin-top: 12px;
background-color: #f8f9fa;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
border: 1px solid #e9ecef;
}
.policy-link:hover {
background-color: #e9ecef;
border-color: #8B5CF6;
}
.policy-link:active {
transform: scale(0.98);
}
.policy-link span:first-child { .policy-link span:first-child {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;

421
src/views/ApplyView.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="apply-view gradient-background-circles"> <div class="apply-view">
<MobileHeader title="Apply to join the team" :showHelp="true" @help="showHelp" /> <MobileHeader title="Apply to join the team" :showHelp="true" @help="showHelp" />
<div class="content"> <div class="content">
@ -12,40 +12,18 @@
<!-- 申请表单 --> <!-- 申请表单 -->
<div class="application-form"> <div class="application-form">
<div class="input-group"> <div class="input-group">
<label for="agentId">Apply ID:</label> <label>Apply ID:</label>
<div class="input-container"> <input
<input v-model="agentId"
id="agentId" type="text"
v-model="agentId" placeholder="Please enter the agent ID"
type="text" class="agent-input"
placeholder="Please enter the agent ID" />
class="agent-input"
@input="clearError"
/>
</div>
</div> </div>
<!-- 错误提示 --> <!-- 错误提示 -->
<div v-if="errorMessage" class="error-message"> <div v-if="errorMessage" class="error-message">
<span>{{ errorMessage }}</span> {{ errorMessage }}
</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> </div>
<!-- 申请按钮 --> <!-- 申请按钮 -->
@ -54,15 +32,24 @@
@click="submitApplication" @click="submitApplication"
:disabled="!agentId.trim() || isLoading" :disabled="!agentId.trim() || isLoading"
> >
<span v-if="isLoading">Applying...</span> {{ isLoading ? 'Applying...' : 'Apply' }}
<span v-else>Apply</span>
</button> </button>
</div> </div>
</div>
<!-- 加载状态 --> <!-- 申请记录 -->
<div v-if="isSearching" class="loading-state"> <div v-if="applyRecords.length > 0" class="records-section">
<div class="loading-spinner"></div> <h3>Application Records</h3>
<p>Searching agent...</p> <div class="record-list">
<div v-for="record in applyRecords" :key="record.id" class="record-item">
<div class="record-info">
<p class="record-reason">{{ record.reason }}</p>
<p class="record-time">{{ new Date(record.createTime).toLocaleString() }}</p>
</div>
<span :class="['record-status', getStatusClass(record.status)]">
{{ getStatusText(record.status) }}
</span>
</div>
</div> </div>
</div> </div>
@ -70,16 +57,7 @@
<div v-if="showHelpModal" class="help-modal" @click="closeHelp"> <div v-if="showHelpModal" class="help-modal" @click="closeHelp">
<div class="help-content" @click.stop> <div class="help-content" @click.stop>
<h3>Application Help</h3> <h3>Application Help</h3>
<div class="help-text"> <p>Enter your agent's ID and click Apply to submit your application.</p>
<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> <button class="close-btn" @click="closeHelp">Got it</button>
</div> </div>
</div> </div>
@ -87,104 +65,52 @@
</template> </template>
<script setup> <script setup>
import { ref, watch } from 'vue' import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import MobileHeader from '../components/MobileHeader.vue' import MobileHeader from '../components/MobileHeader.vue'
import { searchTeamByAccount, sendTeamApplyJoin } from '../api/wallet.js' import { sendTeamApplyJoin, getTeamApplyRecord } from '../api/wallet.js'
const router = useRouter() const router = useRouter()
// 响应式数据
const agentId = ref('') const agentId = ref('')
const agentInfo = ref(null)
const errorMessage = ref('') const errorMessage = ref('')
const isSearching = ref(false)
const isLoading = ref(false) const isLoading = ref(false)
const showHelpModal = ref(false) const showHelpModal = ref(false)
const applyRecords = ref([])
// 防抖搜索代理 // 获取申请记录
let searchTimeout = null const fetchApplyRecords = async () => {
// 监听代理ID输入，自动搜索
watch(agentId, (newValue) => {
if (searchTimeout) {
clearTimeout(searchTimeout)
}
if (newValue.trim()) {
searchTimeout = setTimeout(() => {
searchAgent(newValue.trim())
}, 500) // 500ms防抖
} else {
agentInfo.value = null
errorMessage.value = ''
}
})
// 搜索代理
const searchAgent = async (account) => {
if (!account) return
isSearching.value = true
errorMessage.value = ''
agentInfo.value = null
try { try {
const response = await searchTeamByAccount(account) const response = await getTeamApplyRecord({})
if (response.status && response.body) { if (response.status && response.body) {
// 假设返回的是代理团队信息，我们需要显示代理信息 applyRecords.value = response.body
agentInfo.value = {
account: account,
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) { } catch (error) {
console.error('搜索代理失败:', error) console.error('获取申请记录失败:', error)
errorMessage.value = 'Failed to search agent. Please try again.'
} finally {
isSearching.value = false
} }
} }
// 清除错误信息
const clearError = () => {
errorMessage.value = ''
}
// 提交申请
const submitApplication = async () => { const submitApplication = async () => {
if (!agentId.value.trim()) { if (!agentId.value.trim()) {
errorMessage.value = 'Please enter agent ID' errorMessage.value = 'Please enter agent ID'
return return
} }
if (!agentInfo.value) {
errorMessage.value = 'Please wait for agent verification'
return
}
isLoading.value = true isLoading.value = true
errorMessage.value = '' errorMessage.value = ''
try { try {
const applicationData = { const applicationData = {
teamId: agentInfo.value.teamId, teamId: agentId.value.trim(),
reason: `Application to join team under agent ${agentId.value}` reason: `JOIN`
} }
const response = await sendTeamApplyJoin(applicationData) const response = await sendTeamApplyJoin(applicationData)
if (response.status) { if (response.status) {
// 申请成功 alert('Application submitted successfully!')
alert('Application submitted successfully! Please wait for approval.') await fetchApplyRecords() // 刷新申请记录
router.go(-1) // 返回上一页 agentId.value = '' // 清空输入
} else { } else {
errorMessage.value = response.message || 'Application failed. Please try again.' errorMessage.value = response.message || 'Application failed. Please try again.'
} }
@ -196,37 +122,56 @@ const submitApplication = async () => {
} }
} }
// 显示帮助
const showHelp = () => { const showHelp = () => {
showHelpModal.value = true showHelpModal.value = true
} }
// 关闭帮助
const closeHelp = () => { const closeHelp = () => {
showHelpModal.value = false showHelpModal.value = false
} }
// 获取状态文本
const getStatusText = (status) => {
const statusMap = {
'WAIT': 'Pending',
'AGREE': 'Approved',
'REJECT': 'Rejected'
}
return statusMap[status] || status
}
// 获取状态样式
const getStatusClass = (status) => {
const classMap = {
'WAIT': 'status-pending',
'AGREE': 'status-approved',
'REJECT': 'status-rejected'
}
return classMap[status] || ''
}
// 页面加载时获取申请记录
onMounted(() => {
fetchApplyRecords()
})
</script> </script>
<style scoped> <style scoped>
.apply-view { .apply-view {
font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
min-height: 100vh; min-height: 100vh;
/*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/ background-color: #f5f5f5;
} }
.content { .content {
padding: 20px 16px; padding: 20px 16px;
position: relative;
z-index: 2;
} }
/* 申请说明 */
.reminder-section { .reminder-section {
background-color: rgba(255, 255, 255, 0.95); background-color: white;
padding: 20px; padding: 20px;
border-radius: 12px; border-radius: 8px;
margin-bottom: 24px; margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
} }
.reminder-section h3 { .reminder-section h3 {
@ -243,12 +188,10 @@ const closeHelp = () => {
color: #666; color: #666;
} }
/* 申请表单 */
.application-form { .application-form {
background-color: rgba(255, 255, 255, 0.95); background-color: white;
padding: 24px; padding: 20px;
border-radius: 12px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
} }
.input-group { .input-group {
@ -263,18 +206,12 @@ const closeHelp = () => {
margin-bottom: 8px; margin-bottom: 8px;
} }
.input-container {
position: relative;
}
.agent-input { .agent-input {
width: 100%; width: 100%;
padding: 16px; padding: 12px;
border: 2px solid #e0e0e0; border: 1px solid #ddd;
border-radius: 12px; border-radius: 6px;
font-size: 16px; font-size: 16px;
background-color: white;
transition: border-color 0.2s;
box-sizing: border-box; box-sizing: border-box;
} }
@ -283,100 +220,26 @@ const closeHelp = () => {
border-color: #8B5CF6; border-color: #8B5CF6;
} }
.agent-input::placeholder {
color: #999;
}
/* 错误信息 */
.error-message { .error-message {
margin-bottom: 16px; margin-bottom: 16px;
padding: 12px; padding: 12px;
background-color: #FEE2E2; background-color: #FEE2E2;
border: 1px solid #FECACA; border: 1px solid #FECACA;
border-radius: 8px; border-radius: 6px;
color: #DC2626; color: #DC2626;
font-size: 14px; font-size: 14px;
} }
/* 代理信息 */
.agent-info {
margin-bottom: 24px;
}
.agent-card {
display: flex;
align-items: center;
background-color: #F8FAFC;
padding: 16px;
border-radius: 12px;
border: 2px solid #E2E8F0;
}
.agent-avatar {
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #8B5CF6;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
font-weight: 600;
margin-right: 12px;
overflow: hidden;
}
.agent-avatar img {
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;
}
.agent-tags {
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 { .apply-btn {
width: 100%; width: 100%;
padding: 16px; padding: 14px;
background-color: #8B5CF6; background-color: #8B5CF6;
color: white; color: white;
border: none; border: none;
border-radius: 12px; border-radius: 6px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s;
}
.apply-btn:hover:not(:disabled) {
background-color: #7C3AED;
} }
.apply-btn:disabled { .apply-btn:disabled {
@ -384,39 +247,6 @@ const closeHelp = () => {
cursor: not-allowed; cursor: not-allowed;
} }
.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 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-state p {
margin: 0;
color: white;
font-size: 14px;
}
/* 帮助弹窗 */
.help-modal { .help-modal {
position: fixed; position: fixed;
top: 0; top: 0;
@ -433,55 +263,102 @@ const closeHelp = () => {
.help-content { .help-content {
background-color: white; background-color: white;
padding: 24px; padding: 20px;
border-radius: 16px; border-radius: 8px;
max-width: 400px; max-width: 300px;
width: 100%; width: 100%;
max-height: 80vh;
overflow-y: auto;
} }
.help-content h3 { .help-content h3 {
margin: 0 0 16px 0; margin: 0 0 12px 0;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
text-align: center; text-align: center;
} }
.help-text { .help-content p {
margin-bottom: 20px; margin: 0 0 16px 0;
color: #666; color: #666;
line-height: 1.5; 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 { .close-btn {
width: 100%; width: 100%;
padding: 12px; padding: 10px;
background-color: #8B5CF6; background-color: #8B5CF6;
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: 6px;
font-size: 16px; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
} }
.close-btn:active { .records-section {
background-color: #7C3AED; 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-reason {
margin: 0 0 4px 0;
font-size: 14px;
color: #333;
}
.record-time {
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;
}
</style> </style>

31
src/views/HostCenterView.vue
View File

@ -52,11 +52,12 @@
</div> </div>
<div class="salary-content"> <div class="salary-content">
<div class="salary-item"> <!--暂时禁用，后面补充-->
<!-- <div class="salary-item">
<p class="salary-label">History Salary:</p> <p class="salary-label">History Salary:</p>
<p class="salary-amount">${{ salaryInfo.hostSalary }}</p> <p class="salary-amount">${{ salaryInfo.hostSalary }}</p>
</div> </div>
<div class="salary-separator"></div> <div class="salary-separator"></div>-->
<div class="salary-item"> <div class="salary-item">
<p class="salary-label">Current Salary:</p> <p class="salary-label">Current Salary:</p>
<p class="salary-amount">${{ salaryInfo.currentSalary }}</p> <p class="salary-amount">${{ salaryInfo.currentSalary }}</p>
@ -178,27 +179,11 @@ const connectToApp = async () => {
console.log(' - window.webkit:', !!window.webkit) console.log(' - window.webkit:', !!window.webkit)
connectApplication(async (access) => { connectApplication(async (access) => {
console.log('📥 Received data from APP:')
console.log(' - Data type:', typeof access)
console.log(' - Data length:', access ? access.length : 0)
console.log(' - Raw data:', access)
const result = parseAccessOrigin(access) const result = parseAccessOrigin(access)
console.log('🔍 Parsing result:')
console.log(' - Success:', result.success)
if (result.success) { if (result.success) {
console.log('✅ Access data parsed successfully')
// 解析头部信息 // 解析头部信息
headerInfo.value = parseHeader(result.data) headerInfo.value = parseHeader(result.data)
console.log('📋 Parsed header info:')
console.log(' - Authorization:', headerInfo.value.authorization ? '✅ Present' : '❌ Missing')
console.log(' - Language:', headerInfo.value.reqLang)
console.log(' - App Version:', headerInfo.value.appVersion)
console.log(' - Build Version:', headerInfo.value.buildVersion)
console.log(' - System Origin:', headerInfo.value.sysOrigin)
console.log(' - Device ID:', headerInfo.value.reqImei ? '✅ Present' : '❌ Missing')
// 设置HTTP请求头 // 设置HTTP请求头
console.log('🔧 Setting HTTP headers...') console.log('🔧 Setting HTTP headers...')
@ -322,6 +307,11 @@ const fetchTeamEntry = async () => {
} }
} catch (error) { } catch (error) {
console.error('获取团队信息失败:', error) console.error('获取团队信息失败:', error)
// HTTP 406错误通常表示NOT_TEAM_MEMBER
if (error.message && error.message.includes('406')) {
await router.push('/apply')
return
}
} }
return null return null
} }
@ -385,11 +375,6 @@ const transfer = () => {
onMounted(async () => { onMounted(async () => {
// 先连接APP获取认证信息 // 先连接APP获取认证信息
await connectToApp() await connectToApp()
// 如果不是APP环境，直接获取银行余额
if (!isInApp()) {
fetchBankBalance()
}
}) })
</script> </script>