Fix 修复SearchBar的部分BUG

UI/XYH.APP/src/components/searchBar.vue

@@ -30,9 +30,15 @@ const emits = defineEmits<{
   (e: "search"): void
 }>()
 
-const { searchInputValue, queryType, searchDropdownValue } = toRefs(props)
+const { searchInputValue, queryType, searchDropdownValue, searchBtnText } = toRefs(props)
+
 const dropdownRef = ref<any[]>([])
 
+// const _searchBtnText = computed(() => {
+//   console.log("----", props.searchBtnText)
+//   return props.searchBtnText
+// })
+
 const style = computed(() => {
   const style: any = {}
   if (props.height) {
@@ -75,10 +81,10 @@ function bindSearchTabClick(index: number, type?: string) {
     })
     emits("update:searchType", type || "")
     emits("update:searchDropdownValue", getDefaultSearchDropdownValue())
-    search()
   } else {
     emits("update:searchType", "")
   }
+  search()
 }
 
 function bindChangeDropdown(e: any, i: number) {
@@ -118,18 +124,15 @@ function search() {
         auto-blur="true"
         @confirm="onSearch"
       />
-      <vb-button
+      <view
         v-if="searchBtnIcon || searchBtnText"
-        custom-class="w-90px py-12 fs-15"
-        round
-        :icon="searchBtnIcon"
-        icon-class="me-3"
-        icon-size="20"
-        size="small"
+        class="d-fc fs-15 br-20 text-white bg-vb"
+        style="cursor: pointer; white-space: nowrap; height: 38px; min-width: 90px"
         @click="bindSearchBtnClick"
       >
+        <i v-if="searchBtnIcon" class="me-3 fs-20 iconfont" :class="'icon-' + searchBtnIcon"></i>
         {{ searchBtnText }}
-      </vb-button>
+      </view>
     </view>
     <view class="d-flex h-30px mt-10 pb-5 align-center">
       <template v-if="searchDropdownList?.length">

UI/XYH.APP/src/pages/alumnus/index.vue

@@ -1,52 +1,23 @@
 <template>
-  <view class="page-container">
-    <view class="bg-white px-15 pt-15" :style="{ height: topHeight + 'px' }">
-      <view class="d-flex align-center">
-        <input
-          class="w-100 px-20 h-40px br-30 me-10"
-          type="text"
-          placeholder="搜索校友姓名"
-          v-model="searchName"
-          style="background: #f2f2f2"
-          confirm-type="search"
-          adjust-position="false"
-          auto-blur="true"
-          @confirm="onSearch"
-        />
-        <vb-button custom-class="w-120px h-40px fs-16" round size="small" @click="isShowDetail = !isShowDetail">
-          {{ isShowDetail ? "简明信息" : "详细信息" }}
-        </vb-button>
-      </view>
-      <view class="d-flex h-30px mt-10 pb-5 align-center">
-        <vb-dropdown
-          ref="dropdownRef"
-          v-model="searchGraduateYear"
-          :active="activeTabIndex == 0"
-          empty-title="毕业年份"
-          :options="yearColumns"
-          @click="onSearchTabClick(0)"
-          @change="onChangeSearchTab"
-          custom-class="px-8"
-        ></vb-dropdown>
-
-        <template v-for="(v, i) in searchTabList" :key="i">
-          <view class="text-gray-4">|</view>
-          <view
-            class="px-5"
-            :class="{ 'text-vb font-bold': activeTabIndex == i + 1 }"
-            @click="onSearchTabClick(i + 1, v.value)"
-          >
-            {{ v.text }}
-          </view>
-        </template>
-      </view>
-    </view>
+  <view>
+    <SearchBar
+      v-model:search-input-value="searchInputValue"
+      v-model:search-type="searchType"
+      v-model:search-dropdown-value="searchDropdownValue"
+      :search-btn-text="isShowDetail ? '简明信息' : '详细信息'"
+      :search-dropdown-list="dropList"
+      search-placeholder="搜索校友姓名"
+      :search-tab-list="searchTabList"
+      :height="topHeight"
+      @search-btn="isShowDetail = !isShowDetail"
+      @search="onSearch"
+    ></SearchBar>
     <vb-list
       :query-fun="apis.amActivity.alumnusApi.listAlumnus"
       :query-params="queryParams"
       :height="listHeight"
       :dataLength="10"
-      custom-class="pt-10"
+      custom-class="mx-15 pt-10"
     >
       <template #item="{ item }">
         <vb-cell-group v-if="item.amId != myAmId">
@@ -122,6 +93,9 @@ import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime" // 导入插件
 import "dayjs/locale/zh-cn" // 导入本地化语言
 import appStore from "@/stores"
+
+import SearchBar from "@/components/searchBar.vue"
+
 dayjs.extend(relativeTime) // 使用插件
 dayjs.locale("zh-cn") // 使用本地化语言
 const wHeight = uni.getWindowInfo().windowHeight
@@ -129,14 +103,15 @@ const topHeight = ref(95)
 const listHeight = computed(() => {
   return wHeight - topHeight.value - 15
 })
-const dropdownRef = ref()
-const searchName = ref("")
-const searchGraduateYear = ref("")
+const searchInputValue = ref("")
+const searchDropdownValue = ref([])
 const searchType = ref()
 const queryParams = ref({
   auditStatus: 1,
 })
-const activeTabIndex = ref(0)
+const searchBtnText = computed(() => {
+  return isShowDetail.value ? "简明信息" : "详细信息"
+})
 const searchTabList = computed(() => {
   const arr = []
   arr.push({ text: "同届", value: "year" })
@@ -153,6 +128,14 @@ const yearColumns = computed(() => {
   }
   return cols
 })
+const dropList = computed(() => {
+  const arr = []
+  arr.push({
+    emptyTitle: "全部分类",
+    data: yearColumns.value,
+  })
+  return arr
+})
 
 const isShowDetail = ref(true)
 const myAmId = computed(() => appStore.authStore.getUser().amId)
@@ -165,28 +148,15 @@ function getLastLogin(item: any) {
 function onClick(item: any) {
   route.navigate("alumnusDetail", { id: item.amId, userId: item.userId })
 }
-function onSearchTabClick(index: number, type?: string) {
-  activeTabIndex.value = index
-  if (index != 0) {
-    searchGraduateYear.value = ""
-    dropdownRef.value?.close()
-    searchType.value = type
-    search()
-  } else {
-    searchType.value = ""
-  }
-}
-function onChangeSearchTab() {
-  search()
-}
+
 function onSearch() {
   search()
 }
 function search() {
   const params: any = {
     auditStatus: 1,
-    name: searchName.value || "",
-    graduateYear: searchGraduateYear.value || "",
+    name: searchInputValue.value || "",
+    graduateYear: searchDropdownValue.value[0] || "",
   }
   if (searchType.value) {
     switch (searchType.value) {