feat(搜索转账对象页): 更新UI

src/views/SearchPayeeView.vue

@@ -3,21 +3,6 @@
     <MobileHeader title="Search Payee" />
 
     <div class="content">
-      <!-- 用户类型选择 -->
-      <!-- <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 style="display: flex; gap: 4px">
         <div
@@ -53,7 +38,7 @@
         </div>
 
         <button
-          v-if="!searchQuery"
+          v-if="!hasSearched && searchQuery"
           class="search-btn"
           style="
             border: none;
@@ -150,13 +135,6 @@
         </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-if="isSearching" class="loading-state">
         <div class="loading-spinner"></div>
@@ -167,7 +145,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import MobileHeader from '../components/MobileHeader.vue'
 import { userBankCheckTransfer, userBankSearchUserProfile } from '../api/wallet.js'
@@ -179,6 +157,7 @@ const router = useRouter()
 const searchQuery = ref('')
 const searchResults = ref([])
 const isSearching = ref(false)
+const hasSearched = ref(false)
 const userRole = ref('')
 const isLoadingRole = ref(false)
 const selectedUserType = ref('')
@@ -318,6 +297,7 @@ const performSearch = async () => {
   }
 
   isSearching.value = true
+  hasSearched.value = false
 
   try {
     const response = await userBankSearchUserProfile(searchQuery.value.trim())
@@ -350,11 +330,13 @@ const performSearch = async () => {
     showError('User not found or search failed')
   } finally {
     isSearching.value = false
+    hasSearched.value = true
   }
 }
 
 // 清除搜索
 const clearSearch = () => {
+  hasSearched.value = false
   searchQuery.value = ''
   searchResults.value = []
 }
@@ -391,6 +373,15 @@ const getRoleDescription = (role) => {
   }
 }
 
+watch(
+  () => searchQuery.value,
+  () => {
+    if (hasSearched.value) {
+      hasSearched.value = false
+    }
+  }
+)
+
 // 页面加载时检查用户角色
 onMounted(() => {
   checkUserRole()
@@ -575,22 +566,4 @@ onMounted(() => {
     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>