feat(卖家记录页): 新增搜素功能

src/views/SellerRecordsView.vue

@@ -3,6 +3,75 @@
     <MobileHeader title="Seller records" />
 
     <div class="content">
+      <!-- 搜索框 -->
+      <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
+        <div
+          style="
+            flex: 1;
+            border-radius: 32px;
+            border: 1px solid #fff;
+
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            padding: 0 8px;
+
+            display: flex;
+            align-items: center;
+            height: max-content;
+          "
+        >
+          <img src="../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
+          <input
+            v-model="searchQuery"
+            type="text"
+            name=""
+            id=""
+            placeholder="Please enter the user lD"
+            @keyup.enter="handleEnterPress"
+            @input="handleInputChange"
+            style="
+              width: 100%;
+              color: rgba(0, 0, 0, 0.4);
+              font-weight: 600;
+              font-size: 14px;
+              outline: none;
+              border: none;
+              background-color: transparent;
+              padding: 10px 8px;
+            "
+          />
+          <button
+            v-if="searchQuery"
+            @click="clearSearch"
+            style="
+              background: none;
+              border: none;
+              font-size: 18px;
+              color: #9ca3af;
+              cursor: pointer;
+              padding: 0 8px;
+            "
+          >
+            ×
+          </button>
+        </div>
+        <div style="font-weight: 600" @click="handleActionButton" :disabled="isSearching">
+          {{ getActionButtonText() }}
+        </div>
+      </div>
+
+      <div
+        style="
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 12px;
+        "
+      >
+        <div style="font-size: 0.9em; font-weight: 600">Total recharge: +30000</div>
+        <div style="font-size: 0.9em; font-weight: 600">Total expenditure: -20000</div>
+      </div>
+
+      <!-- 用户列表 -->
       <div v-if="loading" class="loading-state">
         <div class="loading-spinner"></div>
         <p>Loading records...</p>
@@ -36,7 +105,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import MobileHeader from '../components/MobileHeader.vue'
 import { getFreightWaterFlow } from '../api/wallet.js'
 import { formatUTCCustom } from '@/utils/utcFormat.js'
@@ -44,15 +113,52 @@ import { getUserId } from '@/utils/userStore.js'
 
 const loading = ref(false)
 const records = ref([])
+const searchQuery = ref('')
+const searchResults = ref([])
+const isSearching = ref(false)
+const hasSearched = ref(false)
 
-// 获取交易类型显示
-const getTransactionType = (type, origin) => {
-  if (type === 0) {
-    return 'Purchase' // 入账
-  } else if (type === 1) {
-    return 'Sale' // 出账
+// Handle input changes
+const handleInputChange = () => {
+  if (!searchQuery.value.trim()) {
+    searchResults.value = []
+    hasSearched.value = false
   }
-  return origin || 'Unknown'
+}
+
+// Handle enter key press
+const handleEnterPress = () => {
+  if (searchQuery.value.trim()) {
+    performSearch()
+  }
+}
+
+// Handle action button click
+const handleActionButton = () => {
+  if (searchQuery.value.trim() && !hasSearched.value) {
+    performSearch()
+  } else {
+    cancelSearch()
+  }
+}
+
+// Clear search
+const clearSearch = () => {
+  searchQuery.value = ''
+  searchResults.value = []
+  hasSearched.value = false
+}
+
+// Cancel search
+const cancelSearch = () => {
+  router.go(-1)
+}
+
+// Get button text
+const getActionButtonText = () => {
+  if (isSearching.value) return 'Searching...'
+  if (searchQuery.value.trim() && !hasSearched.value) return 'Confirm'
+  return 'Cancel'
 }
 
 // 获取金额显示
@@ -202,19 +308,19 @@ onMounted(async () => {
 
 .record-details h4 {
   margin-bottom: 4px;
-  font-size: 14px;
+  font-size: 0.9em;
   font-weight: 600;
   color: #333;
 }
 
 .record-details p {
-  font-size: 12px;
+  font-size: 0.8em;
   font-weight: 590;
   color: rgba(0, 0, 0, 0.4);
 }
 
 .record-time {
-  font-size: 12px;
+  font-size: 0.8em;
   font-weight: 510;
   color: rgba(0, 0, 0, 0.4);
 }
@@ -227,7 +333,7 @@ onMounted(async () => {
 }
 
 .coins-amount {
-  font-size: 12px;
+  font-size: 0.9em;
   color: rgba(0, 0, 0, 0.4);
   font-weight: 510;
 }
@@ -265,6 +371,11 @@ onMounted(async () => {
   color: #9ca3af;
 }
 
+input::placeholder {
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.4);
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;