场所管理模块搜索功能弯成

src/api/placeRegister/placeRegister.js

@@ -20,6 +20,13 @@ export default class placeRegister {
             params
         )
     };
+    //搜索接口
+    searchlist(params) {
+        return request.get(
+            `/religioussites/siteinfo/religiousSitesInfo/searchlist`,
+            params
+        )
+    };
     //公安、宗教部门
     list(params) {
         return request.get(

src/views/placeManage/placeRegister/placeRegisterList.vue

@@ -14,60 +14,94 @@
   </van-nav-bar>
   <div class="main">
     <van-search
-      v-model="searchVal"
-      readonly="true"
-      clearable
-      show-action
+      v-model="searchName"
       shape="round"
-      placeholder="请输入场所名称"
-      label="场所名称"
+      show-action
       input-align="center"
-      @search="onSearch"
-      @cancel="onCancel"
-      @click-input="showPlace = true"
-    />
-    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-      <van-list
-      v-model:loading="loading"
-      :finished="finished"
-      finished-text="没有更多了"
-      @load="onLoad"
+      label="场所名称"
+      placeholder="请输入场所名称"
     >
-      <van-swipe-cell v-for="item in list" :key="item" >
-        <div class="list-item" @click="gotoplaceRegister(item)">
-          <div class="item_top">
-            <div class="item_top_left">
-              {{ item.name }}
+      <template #action>
+        <div @click="search">搜索</div>
+      </template>
+    </van-search>
+    <van-pull-refresh v-if="show==false" v-model="refreshing" @refresh="onRefresh">
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+        <van-swipe-cell v-for="item in list" :key="item">
+          <div class="list-item" @click="gotoplaceRegister(item)">
+            <div class="item_top">
+              <div class="item_top_left">
+                {{ item.name }}
+              </div>
+              <div class="item_top_right">
+                <span v-if="item.religiousType == 1">伊斯兰教</span>
+                <span v-if="item.religiousType == 2">基督教</span>
+                <span v-if="item.religiousType == 3">天主教</span>
+                <span v-if="item.religiousType == 4">佛教</span>
+                <span v-if="item.religiousType == 5">道教</span>
+              </div>
             </div>
-            <div class="item_top_right">
-              <span v-if="item.religiousType == 1">伊斯兰教</span>
-              <span v-if="item.religiousType == 2">基督教</span>
-              <span v-if="item.religiousType == 3">天主教</span>
-              <span v-if="item.religiousType == 4">佛教</span>
-              <span v-if="item.religiousType == 5">道教</span>
+            <div class="item_center">
+              {{ item.place }}
+            </div>
+            <div class="item_down">
+              <div class="item_down_left">
+                {{ item.contact }}
+              </div>
+              <div class="item_down_right">
+                {{ item.contactNumber }}
+              </div>
             </div>
           </div>
-          <div class="item_center">
-            {{ item.place }}
-          </div>
-          <div class="item_down">
-            <div class="item_down_left">
-              {{ item.contact }}
+        </van-swipe-cell>
+      </van-list>
+    </van-pull-refresh>
+    <van-pull-refresh v-if="show == true" v-model="refreshing" @refresh="onRefresh">
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+        <van-swipe-cell v-for="item in searchList" :key="item">
+          <div class="list-item" @click="gotoplaceRegister(item)">
+            <div class="item_top">
+              <div class="item_top_left">
+                {{ item.name }}
+              </div>
+              <div class="item_top_right">
+                <span v-if="item.religiousType == 1">伊斯兰教</span>
+                <span v-if="item.religiousType == 2">基督教</span>
+                <span v-if="item.religiousType == 3">天主教</span>
+                <span v-if="item.religiousType == 4">佛教</span>
+                <span v-if="item.religiousType == 5">道教</span>
+              </div>
             </div>
-            <div class="item_down_right">
-              {{ item.contactNumber }}
+            <div class="item_center">
+              {{ item.place }}
+            </div>
+            <div class="item_down">
+              <div class="item_down_left">
+                {{ item.contact }}
+              </div>
+              <div class="item_down_right">
+                {{ item.contactNumber }}
+              </div>
             </div>
           </div>
-        </div>
-      </van-swipe-cell>
-    </van-list>
+        </van-swipe-cell>
+      </van-list>
     </van-pull-refresh>
-    
   </div>
 </template>
 
 <script>
-import { reactive, ref } from "vue";
+import {ref } from "vue";
 import { useRouter } from "vue-router";
 import PlaceRegister from "@/api/placeRegister/placeRegister";
 export default {
@@ -94,6 +128,27 @@ export default {
     const onClickLeft = () => {
       history.back();
     };
+    //搜索事件
+    const show = ref(false)
+    const searchName = ref("");
+    const searchList = ref([]);
+    const search = () => {
+      if (searchName.value != "") {
+        show.value = true;
+        new PlaceRegister()
+          .searchlist({
+            current: 1,
+            size: 10000,
+            name: searchName.value,
+          })
+          .then(({ records }) => {
+            searchList.value = records;
+          });
+      } else {
+        show.value = false;
+        onLoad();
+      }
+    };
     //跳转
     let router = useRouter();
     //进入场所录入页面
@@ -101,13 +156,13 @@ export default {
       router.push("/placeRegister");
     };
     //进入地点详情页面
-    const gotoplaceRegister =(item)=>{
+    const gotoplaceRegister = (item) => {
       var data = JSON.stringify(item);
       router.push({
         path: "/placeRegisterInfo",
         query: { data: data },
       });
-    }
+    };
     const loading = ref(false);
     const finished = ref(false);
     const refreshing = ref(false);
@@ -121,10 +176,10 @@ export default {
         .religiousList({
           current: index + 1,
           size: 11,
-          ...searchForm.value
+          ...searchForm.value,
         })
         .then(({ records, pages }) => {
-          list.value= list.value.concat(records);
+          list.value = list.value.concat(records);
           // 加载状态结束
           loading.value = false;
           if (index + 1 >= pages) {
@@ -142,25 +197,7 @@ export default {
       loading.value = true;
       onLoad();
     };
-    // 搜索
-    let searchShow = ref(false);
-    let searchList = ref([]);
-    const searchVal = ref("");
-    const searchValId = ref("");
-    const onSearch = () => {
-      searchShow.value = true;
-      searchList.value = [];
-    };
-    const onCancel = () => {
-      searchVal.value = "";
-      searchValId.value = "";
-      searchShow.value = false
-      finished.value = false;
-      list.value = [];
-      loading.value = true;
-      onLoad();
-    };
-    
+
     return {
       //返回取消按钮
       onClickLeft,
@@ -176,13 +213,11 @@ export default {
       onLoad,
       onRefresh,
       //搜索
-      searchShow,
-      searchVal,
-      searchValId,
-      searchList,
-      onSearch,
-      onCancel,
+      searchName,
+      search,
       gotoplaceRegister,
+      show,
+      searchList
     };
   },
 };