664 lines
14 KiB
Vue
664 lines
14 KiB
Vue
<template>
|
||
<div class="search-payee gradient-background-circles">
|
||
<MobileHeader title="Search Payee" />
|
||
|
||
<div class="content">
|
||
<!-- 搜索框 -->
|
||
<div class="search-section">
|
||
<!-- 用户类型选择 -->
|
||
<div v-if="!isLoadingRole && availableUserTypes.length > 1" class="user-type-selector">
|
||
<label>搜索类型:</label>
|
||
<div class="type-buttons">
|
||
<button
|
||
v-for="type in availableUserTypes"
|
||
:key="type.value"
|
||
@click="selectedUserType = type.value"
|
||
:class="['type-btn', { active: selectedUserType === type.value }]"
|
||
>
|
||
{{ type.label }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="search-box">
|
||
<input
|
||
v-model="searchQuery"
|
||
type="text"
|
||
placeholder="Search by ID or name"
|
||
class="search-input"
|
||
@keyup.enter="performSearch"
|
||
/>
|
||
<button
|
||
v-if="searchQuery"
|
||
@click="clearSearch"
|
||
class="clear-btn"
|
||
>
|
||
×
|
||
</button>
|
||
<button class="search-btn" @click="performSearch" :disabled="!selectedUserType">
|
||
Search
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 角色检查加载状态 -->
|
||
<div v-if="isLoadingRole" class="loading-state">
|
||
<div class="loading-spinner"></div>
|
||
<p>Checking permissions...</p>
|
||
</div>
|
||
|
||
<!-- 搜索结果 -->
|
||
<div v-else-if="searchResults.length > 0" class="results-section">
|
||
<div
|
||
v-for="user in searchResults"
|
||
:key="user.id"
|
||
class="user-item"
|
||
>
|
||
<div class="user-info">
|
||
<div class="user-avatar">
|
||
<img v-if="user.avatar" :src="user.avatar" :alt="user.name" />
|
||
<span v-else>{{ user.name.charAt(0) }}</span>
|
||
</div>
|
||
<div class="user-details">
|
||
<h4>{{ user.name }}</h4>
|
||
<p>ID: {{ user.account || user.id }}</p>
|
||
<div class="user-tags">
|
||
<span v-if="user.isHost" class="tag host-tag">👑 Host</span>
|
||
<span v-if="user.isAgency" class="tag agency-tag">🏢 Agency</span>
|
||
<span v-if="user.hasSalary" class="tag salary-tag">💰 Salary</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="add-btn" @click="selectUser(user)">
|
||
Add
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div v-else-if="searchQuery && !isSearching && !isLoadingRole" class="empty-state">
|
||
<div class="empty-icon">🔍</div>
|
||
<p>No users found</p>
|
||
<span>Try searching with a different keyword</span>
|
||
</div>
|
||
|
||
<!-- 搜索提示 -->
|
||
<div v-else-if="!searchQuery && !isLoadingRole" class="search-hint">
|
||
<div class="hint-icon">👥</div>
|
||
<p>Search for users</p>
|
||
<span v-if="userRole">You can search for: {{ getRoleDescription(userRole) }}</span>
|
||
<span v-else>Enter user ID or name to find payees</span>
|
||
</div>
|
||
|
||
<!-- 加载状态 -->
|
||
<div v-if="isSearching" class="loading-state">
|
||
<div class="loading-spinner"></div>
|
||
<p>Searching...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import MobileHeader from '../components/MobileHeader.vue'
|
||
import { userBankCheckTransfer, userBankSearchUserProfile } from '../api/wallet.js'
|
||
import { setSelectedPayee } from '../utils/payeeStore.js'
|
||
import {showError} from "@/utils/toast.js";
|
||
|
||
const router = useRouter()
|
||
|
||
const searchQuery = ref('')
|
||
const searchResults = ref([])
|
||
const isSearching = ref(false)
|
||
const userRole = ref('')
|
||
const isLoadingRole = ref(false)
|
||
const selectedUserType = ref('')
|
||
const showTypeSelector = ref(false)
|
||
|
||
// 模拟用户数据 - 根据角色显示不同的用户
|
||
const allUsers = {
|
||
'TEAM_OWN': [
|
||
{
|
||
id: '1234567890',
|
||
name: 'Agent User',
|
||
type: 'AGENT',
|
||
isHost: false,
|
||
isAgency: true,
|
||
hasSalary: false
|
||
},
|
||
{
|
||
id: '0987654321',
|
||
name: 'BD Manager',
|
||
type: 'BD',
|
||
isHost: false,
|
||
isAgency: true,
|
||
hasSalary: true
|
||
},
|
||
{
|
||
id: '1122334455',
|
||
name: 'Host Anchor',
|
||
type: 'ANCHOR',
|
||
isHost: true,
|
||
isAgency: false,
|
||
hasSalary: true
|
||
}
|
||
],
|
||
'TEAM_MEMBER': [
|
||
{
|
||
id: '1234567890',
|
||
name: 'Team Agent',
|
||
type: 'AGENT',
|
||
isHost: false,
|
||
isAgency: true,
|
||
hasSalary: false
|
||
},
|
||
{
|
||
id: '0987654321',
|
||
name: 'BD Manager',
|
||
type: 'BD',
|
||
isHost: false,
|
||
isAgency: true,
|
||
hasSalary: true
|
||
}
|
||
],
|
||
'BD': [
|
||
{
|
||
id: '1234567890',
|
||
name: 'Agent User',
|
||
type: 'AGENT',
|
||
isHost: false,
|
||
isAgency: true,
|
||
hasSalary: false
|
||
}
|
||
],
|
||
'default': [
|
||
{
|
||
id: '1234567890',
|
||
name: 'Default User',
|
||
type: 'USER',
|
||
isHost: false,
|
||
isAgency: false,
|
||
hasSalary: false
|
||
}
|
||
]
|
||
}
|
||
|
||
// 根据角色获取可搜索的用户列表
|
||
const availableUsers = computed(() => {
|
||
return allUsers[userRole.value] || allUsers['default']
|
||
})
|
||
|
||
// 根据用户角色获取可选择的用户类型
|
||
const availableUserTypes = computed(() => {
|
||
switch (userRole.value) {
|
||
case 'TEAM_OWN':
|
||
return [
|
||
{ label: 'Agent', value: 'AGENT' },
|
||
{ label: 'BD Manager', value: 'BD' },
|
||
{ label: 'Anchor', value: 'ANCHOR' }
|
||
]
|
||
case 'TEAM_MEMBER':
|
||
return [
|
||
{ label: 'Agent', value: 'AGENT' },
|
||
{ label: 'BD Manager', value: 'BD' }
|
||
]
|
||
case 'BD':
|
||
return [
|
||
{ label: 'Agent', value: 'AGENT' }
|
||
]
|
||
default:
|
||
return [
|
||
{ label: 'User', value: 'USER' }
|
||
]
|
||
}
|
||
})
|
||
|
||
// 检查用户转账角色
|
||
const checkUserRole = async () => {
|
||
isLoadingRole.value = true
|
||
|
||
try {
|
||
const response = await userBankCheckTransfer()
|
||
|
||
if (response.status && response.body) {
|
||
// 根据接口返回的role设置用户角色
|
||
userRole.value = response.body.role || ''
|
||
|
||
// 设置默认的用户类型
|
||
if (userRole.value === 'TEAM_OWN') {
|
||
selectedUserType.value = 'ANCHOR' // TEAM_OWN 默认选择 ANCHOR
|
||
} else {
|
||
selectedUserType.value = 'AGENT' // 其他角色默认选择 AGENT
|
||
}
|
||
} else {
|
||
userRole.value = ''
|
||
selectedUserType.value = 'USER'
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to check user role:', error)
|
||
userRole.value = ''
|
||
selectedUserType.value = 'USER'
|
||
} finally {
|
||
isLoadingRole.value = false
|
||
}
|
||
}
|
||
|
||
// 执行搜索
|
||
const performSearch = async () => {
|
||
if (!searchQuery.value.trim()) {
|
||
searchResults.value = []
|
||
return
|
||
}
|
||
|
||
if (!selectedUserType.value) {
|
||
showError('Please select user type first')
|
||
return
|
||
}
|
||
|
||
isSearching.value = true
|
||
|
||
try {
|
||
const response = await userBankSearchUserProfile(selectedUserType.value, searchQuery.value.trim())
|
||
|
||
if (response.status && response.body) {
|
||
// 根据新的API返回数据结构进行映射
|
||
const user = {
|
||
id: response.body.id,
|
||
account: response.body.account,
|
||
name: response.body.userNickname,
|
||
avatar: response.body.userAvatar,
|
||
type: selectedUserType.value,
|
||
sex: response.body.userSex,
|
||
age: response.body.age,
|
||
countryName: response.body.countryName,
|
||
countryCode: response.body.countryCode,
|
||
accountStatus: response.body.accountStatus,
|
||
// 根据类型设置标签
|
||
isHost: selectedUserType.value === 'ANCHOR',
|
||
isAgency: ['AGENT', 'BD'].includes(selectedUserType.value),
|
||
hasSalary: ['ANCHOR', 'BD'].includes(selectedUserType.value)
|
||
}
|
||
searchResults.value = [user]
|
||
} else {
|
||
searchResults.value = []
|
||
}
|
||
} catch (error) {
|
||
console.error('Search failed:', error)
|
||
searchResults.value = []
|
||
showError('User not found or search failed')
|
||
} finally {
|
||
isSearching.value = false
|
||
}
|
||
}
|
||
|
||
// 清除搜索
|
||
const clearSearch = () => {
|
||
searchQuery.value = ''
|
||
searchResults.value = []
|
||
}
|
||
|
||
// 选择用户
|
||
const selectUser = (user) => {
|
||
// 将选中的用户信息保存到全局状态
|
||
setSelectedPayee({
|
||
id: user.id,
|
||
account: user.account,
|
||
name: user.name,
|
||
avatar: user.avatar,
|
||
type: user.type,
|
||
isHost: user.isHost,
|
||
isAgency: user.isAgency,
|
||
hasSalary: user.hasSalary
|
||
})
|
||
|
||
// 返回到 Transfer 页面
|
||
router.push('/transfer')
|
||
}
|
||
|
||
// 获取角色描述
|
||
const getRoleDescription = (role) => {
|
||
switch (role) {
|
||
case 'TEAM_OWN':
|
||
return 'Agents, BD Managers, Anchors'
|
||
case 'TEAM_MEMBER':
|
||
return 'Agents, BD Managers'
|
||
case 'BD':
|
||
return 'Agents'
|
||
default:
|
||
return 'Users'
|
||
}
|
||
}
|
||
|
||
// 页面加载时检查用户角色
|
||
onMounted(() => {
|
||
checkUserRole()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.search-payee {
|
||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||
}
|
||
|
||
.content {
|
||
padding: 16px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 搜索部分 */
|
||
.search-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 用户类型选择器 */
|
||
.user-type-selector {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.user-type-selector label {
|
||
display: block;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.type-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.type-btn {
|
||
padding: 6px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 16px;
|
||
background-color: white;
|
||
color: #666;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.type-btn.active {
|
||
background-color: #8B5CF6;
|
||
color: white;
|
||
border-color: #8B5CF6;
|
||
}
|
||
|
||
.type-btn:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: white;
|
||
border-radius: 12px;
|
||
padding: 4px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
width: 100%;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
gap: 4px; /* 添加元素间距 */
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
border: none;
|
||
padding: 12px 16px;
|
||
font-size: 16px;
|
||
background: transparent;
|
||
outline: none;
|
||
min-width: 0; /* 防止flex item超出容器 */
|
||
}
|
||
|
||
.search-input::placeholder {
|
||
color: #999;
|
||
}
|
||
|
||
.clear-btn {
|
||
background: none;
|
||
border: none;
|
||
padding: 8px;
|
||
color: #999;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.search-btn {
|
||
background-color: #8B5CF6;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 16px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
flex-shrink: 0; /* 防止按钮被压缩 */
|
||
white-space: nowrap; /* 防止文本换行 */
|
||
}
|
||
|
||
.search-btn:active {
|
||
background-color: #7C3AED;
|
||
}
|
||
|
||
.search-btn:disabled {
|
||
background-color: #ccc;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* 搜索结果 */
|
||
.results-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.user-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: white;
|
||
padding: 16px;
|
||
border-radius: 12px;
|
||
margin-bottom: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
.user-item:active {
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.user-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;
|
||
}
|
||
|
||
.user-avatar img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.user-details h4 {
|
||
margin: 0 0 4px 0;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.user-details p {
|
||
margin: 0 0 8px 0;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.user-tags {
|
||
display: flex;
|
||
gap: 4px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.tag {
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.host-tag {
|
||
background-color: #E0E7FF;
|
||
color: #5B21B6;
|
||
}
|
||
|
||
.agency-tag {
|
||
background-color: #DBEAFE;
|
||
color: #1E40AF;
|
||
}
|
||
|
||
.salary-tag {
|
||
background-color: #FEF3C7;
|
||
color: #D97706;
|
||
}
|
||
|
||
.add-btn {
|
||
background-color: #10B981;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 16px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.add-btn:active {
|
||
background-color: #059669;
|
||
}
|
||
|
||
/* 空状态和提示 */
|
||
.empty-state, .search-hint {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
color: #666;
|
||
}
|
||
|
||
.empty-icon, .hint-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.empty-state p, .search-hint p {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin: 0 0 8px 0;
|
||
color: #333;
|
||
}
|
||
|
||
.empty-state span, .search-hint span {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
/* 加载状态 */
|
||
.loading-state {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 32px;
|
||
height: 32px;
|
||
border: 3px solid #f3f3f3;
|
||
border-top: 3px solid #8B5CF6;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 16px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-state p {
|
||
margin: 0;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 480px) {
|
||
.search-box {
|
||
padding: 3px;
|
||
gap: 4px;
|
||
}
|
||
|
||
.search-input {
|
||
padding: 10px 12px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.search-btn {
|
||
padding: 10px 12px;
|
||
font-size: 13px;
|
||
min-width: 60px;
|
||
}
|
||
|
||
.clear-btn {
|
||
padding: 6px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.type-btn {
|
||
padding: 5px 10px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.user-item {
|
||
padding: 12px;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 44px;
|
||
height: 44px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.user-details h4 {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.user-details p {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.add-btn {
|
||
padding: 6px 12px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
</style>
|