style(搜索转账对象页): 取消类型选择，调整样式

src/views/SearchPayeeView.vue

@@ -3,10 +3,8 @@
     <MobileHeader title="Search Payee" />
 
     <div class="content">
-      <!-- 搜索框 -->
-      <div class="search-section">
       <!-- 用户类型选择 -->
-        <div v-if="!isLoadingRole && availableUserTypes.length > 1" class="user-type-selector">
+      <!-- <div v-if="!isLoadingRole && availableUserTypes.length > 1" class="user-type-selector">
           <label>搜索类型:</label>
           <div class="type-buttons">
             <button
@@ -18,27 +16,63 @@
               {{ type.label }}
             </button>
           </div>
-        </div>
+        </div> -->
 
-        <div class="search-box">
+      <!-- 搜索框 -->
+      <div style="display: flex; gap: 4px">
+        <div
+          style="
+            flex: 1;
+            background-color: white;
+            border-radius: 32px;
+            border: 1px solid #fff;
+            box-sizing: border-box;
+
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 4px 12px;
+          "
+        >
+          <img src="../assets/icon/search.png" alt="" width="16px" style="opacity: 0.6" />
           <input
             v-model="searchQuery"
             type="text"
             placeholder="Search by ID or name"
             class="search-input"
+            style="
+              flex: 1;
+              border: none;
+              padding: 4px 0;
+              background: transparent;
+              outline: none;
+              width: 100%;
+            "
             @keyup.enter="performSearch"
           />
+        </div>
+
         <button
-            v-if="searchQuery"
+          v-if="!searchQuery"
-            @click="clearSearch"
+          class="search-btn"
-            class="clear-btn"
+          style="
+            border: none;
+            color: rgba(0, 0, 0, 0.4);
+            font-weight: 600;
+            background-color: transparent;
+          "
+          @click="performSearch"
         >
-            ×
-          </button>
-          <button class="search-btn" @click="performSearch" :disabled="!selectedUserType">
           Search
         </button>
-        </div>
+        <button
+          v-else
+          class="search-btn"
+          style="border: none; font-weight: 600; background-color: transparent"
+          @click="clearSearch"
+        >
+          Cancel
+        </button>
       </div>
 
       <!-- 角色检查加载状态 -->
@@ -48,30 +82,71 @@
       </div>
 
       <!-- 搜索结果 -->
-      <div v-else-if="searchResults.length > 0" class="results-section">
+      <div v-else-if="searchResults.length > 0" style="margin: 20px 0">
         <div
           v-for="user in searchResults"
           :key="user.id"
-          class="user-item"
+          style="
+            padding: 16px;
+            border-radius: 12px;
+            margin-bottom: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            background-color: white;
+          "
         >
-          <div class="user-info">
+          <div style="display: flex; align-items: center; justify-content: space-between">
-            <div class="user-avatar">
+            <div style="flex: 1; display: flex; align-items: center; gap: 4px">
-              <img v-if="user.avatar" :src="user.avatar" :alt="user.name" />
+              <div
+                style="
+                  width: 50px;
+                  height: 50px;
+                  border-radius: 25px;
+                  background-color: #8b5cf6;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  color: white;
+                  font-weight: 600;
+                  overflow: hidden;
+                "
+              >
+                <img
+                  v-if="user.avatar"
+                  :src="user.avatar"
+                  style="width: 100%; height: 100%; object-fit: cover; display: block"
+                />
                 <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>
+            <button class="add-btn" @click="selectUser(user)">Add</button>
+          </div>
+          <div style="display: flex; gap: 2px; margin-top: 8px; margin-left: 50px; height: 20px">
+            <img
+              v-if="user.isHost"
+              src="../assets/icon/host.png"
+              alt=""
+              height="100%"
+              style="object-fit: cover"
+            />
+            <img
+              v-if="user.isAgency"
+              src="../assets/icon/agency.png"
+              alt=""
+              height="100%"
+              style="object-fit: cover"
+            />
+            <img
+              v-if="user.hasSalary"
+              src="../assets/icon/BD.png"
+              alt=""
+              height="100%"
+              style="object-fit: cover"
+            />
           </div>
-          <button class="add-btn" @click="selectUser(user)">
-            Add
-          </button>
         </div>
       </div>
 
@@ -82,14 +157,6 @@
         <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>
@@ -105,7 +172,7 @@ 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";
+import { showError } from '@/utils/toast.js'
 
 const router = useRouter()
 
@@ -119,14 +186,14 @@ const showTypeSelector = ref(false)
 
 // 模拟用户数据 - 根据角色显示不同的用户
 const allUsers = {
-  'TEAM_OWN': [
+  TEAM_OWN: [
     {
       id: '1234567890',
       name: 'Agent User',
       type: 'AGENT',
       isHost: false,
       isAgency: true,
-      hasSalary: false
+      hasSalary: false,
     },
     {
       id: '0987654321',
@@ -134,7 +201,7 @@ const allUsers = {
       type: 'BD',
       isHost: false,
       isAgency: true,
-      hasSalary: true
+      hasSalary: true,
     },
     {
       id: '1122334455',
@@ -142,17 +209,17 @@ const allUsers = {
       type: 'ANCHOR',
       isHost: true,
       isAgency: false,
-      hasSalary: true
+      hasSalary: true,
-    }
+    },
   ],
-  'TEAM_MEMBER': [
+  TEAM_MEMBER: [
     {
       id: '1234567890',
       name: 'Team Agent',
       type: 'AGENT',
       isHost: false,
       isAgency: true,
-      hasSalary: false
+      hasSalary: false,
     },
     {
       id: '0987654321',
@@ -160,29 +227,29 @@ const allUsers = {
       type: 'BD',
       isHost: false,
       isAgency: true,
-      hasSalary: true
+      hasSalary: true,
-    }
+    },
   ],
-  'BD': [
+  BD: [
     {
       id: '1234567890',
       name: 'Agent User',
       type: 'AGENT',
       isHost: false,
       isAgency: true,
-      hasSalary: false
+      hasSalary: false,
-    }
+    },
   ],
-  'default': [
+  default: [
     {
       id: '1234567890',
       name: 'Default User',
       type: 'USER',
       isHost: false,
       isAgency: false,
-      hasSalary: false
+      hasSalary: false,
-    }
+    },
-  ]
+  ],
 }
 
 // 根据角色获取可搜索的用户列表
@@ -191,29 +258,25 @@ const availableUsers = computed(() => {
 })
 
 // 根据用户角色获取可选择的用户类型
-const availableUserTypes = computed(() => {
+// const availableUserTypes = computed(() => {
-  switch (userRole.value) {
+//   switch (userRole.value) {
-    case 'TEAM_OWN':
+//     case 'TEAM_OWN':
-      return [
+//       return [
-        { label: 'Agent', value: 'AGENT' },
+//         { label: 'Agent', value: 'AGENT' },
-        { label: 'BD Manager', value: 'BD' },
+//         { label: 'BD Manager', value: 'BD' },
-        { label: 'Anchor', value: 'ANCHOR' }
+//         { label: 'Anchor', value: 'ANCHOR' },
-      ]
+//       ]
-    case 'TEAM_MEMBER':
+//     case 'TEAM_MEMBER':
-      return [
+//       return [
-        { label: 'Agent', value: 'AGENT' },
+//         { label: 'Agent', value: 'AGENT' },
-        { label: 'BD Manager', value: 'BD' }
+//         { label: 'BD Manager', value: 'BD' },
-      ]
+//       ]
-    case 'BD':
+//     case 'BD':
-      return [
+//       return [{ label: 'Agent', value: 'AGENT' }]
-        { label: 'Agent', value: 'AGENT' }
+//     default:
-      ]
+//       return [{ label: 'User', value: 'USER' }]
-    default:
+//   }
-      return [
+// })
-        { label: 'User', value: 'USER' }
-      ]
-  }
-})
 
 // 检查用户转账角色
 const checkUserRole = async () => {
@@ -247,20 +310,17 @@ const checkUserRole = async () => {
 
 // 执行搜索
 const performSearch = async () => {
+  console.log('searchQuery.value:', searchQuery.value)
+
   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())
+    const response = await userBankSearchUserProfile(searchQuery.value.trim())
 
     if (response.status && response.body) {
       // 根据新的API返回数据结构进行映射
@@ -278,7 +338,7 @@ const performSearch = async () => {
         // 根据类型设置标签
         isHost: selectedUserType.value === 'ANCHOR',
         isAgency: ['AGENT', 'BD'].includes(selectedUserType.value),
-        hasSalary: ['ANCHOR', 'BD'].includes(selectedUserType.value)
+        hasSalary: ['ANCHOR', 'BD'].includes(selectedUserType.value),
       }
       searchResults.value = [user]
     } else {
@@ -310,7 +370,7 @@ const selectUser = (user) => {
     type: user.type,
     isHost: user.isHost,
     isAgency: user.isAgency,
-    hasSalary: user.hasSalary
+    hasSalary: user.hasSalary,
   })
 
   // 返回到 Transfer 页面
@@ -338,6 +398,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
 .search-payee {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -348,11 +413,6 @@ onMounted(() => {
   z-index: 2;
 }
 
-/* 搜索部分 */
-.search-section {
-  margin-bottom: 20px;
-}
-
 /* 用户类型选择器 */
 .user-type-selector {
   margin-bottom: 12px;
@@ -385,199 +445,74 @@ onMounted(() => {
 }
 
 .type-btn.active {
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
   color: white;
-  border-color: #8B5CF6;
+  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;
+  font-size: 16px;
-  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;
+  font-weight: 700;
-  color: #333;
+  margin-bottom: 4px;
 }
 
 .user-details p {
-  margin: 0 0 8px 0;
   font-size: 14px;
-  color: #666;
+  font-weight: 500;
-}
+  color: rgba(0, 0, 0, 0.4);
-
-.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;
+  background-color: transparent;
-  color: white;
+  color: rgba(0, 0, 0, 0.4);
-  border: none;
+  border: 1px solid #e6e6e6;
-  padding: 8px 16px;
+  border-radius: 12px;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-}
 
-.add-btn:active {
+  font-size: 14px;
-  background-color: #059669;
+  font-weight: 500;
+  padding: 2px 8px;
 }
 
 /* 空状态和提示 */
-.empty-state, .search-hint {
+.empty-state,
+.search-hint {
   text-align: center;
   padding: 40px 20px;
   color: #666;
 }
 
-.empty-icon, .hint-icon {
+.empty-icon,
+.hint-icon {
   font-size: 48px;
   margin-bottom: 16px;
 }
 
-.empty-state p, .search-hint p {
+.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 {
+.empty-state span,
+.search-hint span {
   font-size: 14px;
   color: #666;
 }
@@ -592,15 +527,19 @@ onMounted(() => {
   width: 32px;
   height: 32px;
   border: 3px solid #f3f3f3;
-  border-top: 3px solid #8B5CF6;
+  border-top: 3px solid #8b5cf6;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin: 0 auto 16px;
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .loading-state p {
@@ -611,25 +550,12 @@ onMounted(() => {
 
 /* 响应式设计 */
 @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 {
@@ -637,16 +563,6 @@ onMounted(() => {
     font-size: 11px;
   }
 
-  .user-item {
-    padding: 12px;
-  }
-
-  .user-avatar {
-    width: 44px;
-    height: 44px;
-    font-size: 16px;
-  }
-
   .user-details h4 {
     font-size: 15px;
   }
@@ -656,8 +572,25 @@ onMounted(() => {
   }
 
   .add-btn {
-    padding: 6px 12px;
     font-size: 13px;
   }
 }
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
 </style>