chore(路由): 页面重命名并调整文件位置

src/router/index.js

@@ -97,7 +97,7 @@ const router = createRouter({
     {
       path: '/invite-members',
       name: 'invite-members',
-      component: () => import('../views/AgencyCenter/InviteMembers.vue'),
+      component: () => import('../views/AgencyCenter/InviteMembersProcess.vue'),
       meta: { requiresAuth: true },
     },
     {
@@ -206,7 +206,7 @@ const router = createRouter({
     {
       path: '/invite-agency',
       name: 'invite-agency',
-      component: () => import('../views/BDCenter/inviteAgency.vue'),
+      component: () => import('../views/Invitation/inviteAgency.vue'),
       meta: { requiresAuth: true },
     },
     {
@@ -218,7 +218,7 @@ const router = createRouter({
     {
       path: '/invitation-to-register',
       name: 'invitation-to-register',
-      component: () => import('../views/Invitation/InvitationToRegister.vue'),
+      component: () => import('../views/Invitation/InviteToRegister.vue'),
       meta: { requiresAuth: true },
     },
     {
@@ -266,7 +266,7 @@ const router = createRouter({
     {
       path: '/invite-bd',
       name: 'invite-bd',
-      component: () => import('../views/BDLeaderCenter/inviteBD.vue'),
+      component: () => import('../views/Invitation/inviteBD.vue'),
       meta: { requiresAuth: true },
     },
     {

src/views/RechargeAgency/SellerRecordsView.vue

@@ -3,17 +3,18 @@
     <!-- 使用 GeneralHeader 替换 MobileHeader -->
     <GeneralHeader
       :showLanguageList="true"
-      :title="t('seller_records')"
+      :title="t('transaction_records')"
       color="black"
       style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
     />
 
     <div class="content">
       <!-- 搜索框 -->
-      <!-- <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
+      <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
         <div
           style="
             flex: 1;
+            min-width: 0;
             border-radius: 32px;
             border: 1px solid #fff;
 
@@ -25,64 +26,57 @@
             height: max-content;
           "
         >
-          <img
-            src="../assets/icon/search.png"
-            alt=""
-            width="24px"
-            style="opacity: 0.6"
-            class="search-icon"
-          />
+          <img src="../../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
           <input
             v-model="searchQuery"
             type="text"
-            name=""
-            id=""
             :placeholder="t('enter_user_id')"
-            @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;
+              color: black;
               padding: 10px 8px;
             "
+            @keyup.enter="performSearch"
           />
-          <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">{{ t('total_recharge') }}: +30000</div>
-        <div style="font-size: 0.9em; font-weight: 600">{{ t('total_expenditure') }}: -20000</div>
-      </div> -->
+        <div v-if="!hasSearched && searchQuery" style="font-weight: 600" @click="performSearch">
+          {{ t('search') }}
+        </div>
+        <div v-else style="font-weight: 600" @click="clearSearch">{{ t('cancel') }}</div>
+      </div>
+
+      <!-- 标签按钮 -->
+      <div style="display: flex; position: relative; margin-bottom: 16px">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          ref="tabItems"
+          @click="switchTab(tab.id)"
+          :style="{
+            flex: 1,
+            padding: '8px 16px',
+            background: 'transparent',
+            border: 'none',
+            fontWeight: '600',
+            fontSize: '14px',
+            color: activeTabId === tab.id ? '#8B5CF6' : 'rgba(0, 0, 0, 0.6)',
+            cursor: 'pointer',
+            transition: 'all 0.3s',
+            position: 'relative',
+          }"
+        >
+          {{ t(tab.langKey) }}
+        </button>
+        <!-- 下划线元素 -->
+        <div
+          style="width: 15px; height: 3px; background-color: #bb92ff"
+          :style="underlineStyle"
+        ></div>
+      </div>
 
       <!-- 用户列表 -->
       <div v-if="loading" class="loading-state">
@@ -129,7 +123,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import GeneralHeader from '@/components/GeneralHeader.vue'
 import { getFreightWaterFlow } from '@/api/wallet.js'
@@ -149,49 +143,34 @@ const searchResults = ref([])
 const isSearching = ref(false)
 const hasSearched = ref(false)
 
-// Handle input changes
-const handleInputChange = () => {
-  if (!searchQuery.value.trim()) {
-    searchResults.value = []
-    hasSearched.value = false
+const activeTabId = ref(1)
+const tabItems = ref([]) // 存储标签DOM引用
+// 标签页数据
+const tabs = ref([
+  { id: 1, langKey: 'income' },
+  { id: 2, langKey: 'expenditure' },
+])
+
+// 切换标签页
+const switchTab = (tabId) => {
+  activeTabId.value = tabId
+}
+
+// 计算下划线样式
+const underlineStyle = computed(() => {
+  console.log('计算属性')
+
+  if (tabItems.value.length === 0) return {} //没有这个元素
+  const activeTab = tabItems.value[activeTabId.value - 1]
+  console.log('选中元素的左边距', activeTab.offsetLeft)
+
+  return {
+    position: 'absolute',
+    left: `${activeTab.offsetLeft + activeTab.offsetWidth / 2 - 15 / 2}px`,
+    bottom: '0',
+    transition: 'left 0.3s ease', // 平滑过渡
   }
-}
-
-// 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，但原代码中未导入 router
-  console.log('Cancel search')
-}
-
-// Get button text
-const getActionButtonText = () => {
-  if (isSearching.value) return t('searching')
-  if (searchQuery.value.trim() && !hasSearched.value) return t('confirm')
-  return t('cancel')
-}
+})
 
 // 获取金额显示
 const getAmountDisplay = (type, quantity) => {
@@ -242,8 +221,40 @@ const fetchRecords = async () => {
   }
 }
 
+// 清除搜索
+const clearSearch = () => {
+  hasSearched.value = false
+  searchQuery.value = ''
+  searchResults.value = members.value
+}
+
+// 执行搜索
+const performSearch = async () => {
+  console.log('searchQuery.value:', searchQuery.value)
+
+  if (!searchQuery.value.trim()) {
+    searchResults.value = members.value
+    return
+  }
+
+  isSearching.value = true
+  hasSearched.value = false
+
+  searchResults.value = []
+  if (searchQuery.value.trim()) {
+    // const resSearchUser = await getTeamMember(searchQuery.value)
+    // if (resSearchUser.status && resSearchUser.body) {
+    //   searchResults.value = resSearchUser.body
+    // }
+  }
+
+  isSearching.value = false
+  hasSearched.value = true
+}
+
 onMounted(async () => {
   await fetchRecords()
+  underlineStyle.value // 触发计算属性更新
 })
 </script>