首页搜索样式

src/views/leader/index.vue

@@ -1,14 +1,31 @@
 <template>
   <dic class="container">
     <div class="container-header">
-      <van-search
-          v-model="search_keyword"
-          background="transparent"
-          left-icon="none"
-          :right-icon="searchImg"
-          shape="round"
-          placeholder="请输入内容"
-      />
+      <div ref="searchBoxRef" class="search-box">
+        <van-search
+            v-model="queryParams.keywords"
+            class="common-search"
+            :left-icon="searchImg"
+            :right-icon="closeImg"
+            placeholder="请输入搜索内容"
+            @search="on_search_keyword"
+        />
+        <div v-show="showSearch" class="search-list">
+          <van-list
+              v-model:loading="loading"
+              v-model:error="error"
+              error-text="请求失败，点击重新加载"
+              :finished="finished"
+              finished-text="没有更多事件了"
+              :immediate-check="false"
+              @load="getSearchList"
+          >
+            <div v-for="(item, index) in searchList" :key="index" class="item" @click="handleClickItem(item)">
+              {{ item.name }}
+            </div>
+          </van-list>
+        </div>
+      </div>
     </div>
     <div class="container-content">
       <van-notice-bar
@@ -49,14 +66,16 @@
 </template>
 
 <script lang="ts" setup>
+import {onClickOutside} from "@vueuse/core";
 import { ref, reactive, onMounted } from 'vue';
 import { getActiveEventList } from "@/api/event";
 import noticeImg from '@/assets/images/notice.png'
 import searchImg from '@/assets/images/search.png'
 import {useRouter} from "vue-router";
+import closeImg from "@/assets/images/close.png";
+import {getPointInfoComprehensiveSearch} from "@/api/globalMap";
 
 const router = useRouter();
-const search_keyword = ref('');
 const noticeBarState = reactive({
   show: false,
   event_id: '',
@@ -114,6 +133,61 @@ const initData = () => {
   })
   // 菜单数据
 }
+// 搜索
+const searchBoxRef = ref();
+let showSearch = ref();
+const total = ref(0);
+let loading = ref(false);
+let error = ref(false);
+let finished = ref(false);
+const queryParams = reactive({
+  page: 0,
+  page_size: 15,
+  keywords: ''
+});
+const searchList = ref([]);
+onClickOutside(searchBoxRef, (event) => {
+  showSearch.value = false;
+})
+const getSearchList = () => {
+  if (!queryParams.keywords){
+    return loading.value = false;
+  }
+  queryParams.page++;
+  getPointInfoComprehensiveSearch(queryParams).then((res) => {
+    const items = res.data.list || [];
+    total.value = res.data.total;
+    if (queryParams.page == 1) {
+      searchList.value = [];
+    }
+    items.forEach((val) => {
+      searchList.value.push(val)
+    });
+    if (queryParams.page_size * queryParams.page >= total.value) {
+      finished.value = true;
+    } else {
+      finished.value = false;
+    }
+    showSearch.value = true;
+  }).catch(() => {
+    error.value = true;
+    finished.value = false;
+  }).finally(() => {
+    loading.value = false;
+  });
+}
+const on_search_keyword = (val) => {
+  queryParams.keywords = val;
+  queryParams.page = 0;
+  getSearchList();
+}
+const handleClickItem = (item) => {
+  showSearch.value = false;
+  queryParams.keywords = '';
+  queryParams.page = 0;
+  finished.value = false;
+  searchList.value = [];
+}
 onMounted(() => {
   initData()
 })
@@ -136,7 +210,10 @@ onMounted(() => {
   justify-content: flex-end;
   align-items: center;
   padding-bottom: 70px;
-  //padding: 0 30px;
+  .search-box {
+    width: 100%;
+    position: relative;
+  }
   .van-search {
     width: 100%;
   }
@@ -268,4 +345,19 @@ onMounted(() => {
     }
   }
 }
+.search-list {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  z-index: 9;
+  width: 100%;
+  height: calc(100vh - 400px);
+  overflow-y: auto;
+  background-color: #ffffff;
+  border-top: 1px solid #eeeeee;
+  .item {
+    padding: 8px 15px;
+    border-bottom: 1px solid #eeeeee;
+  }
+}
 </style>