增加搜索模板

src/pages/business/business.vue

@@ -3,23 +3,33 @@
         <view class="con-bg">
             <!-- 头部 -->
             <customHeader ref="customHeaderRef" :title="'业务中心'" 
-                :leftFlag="false" :rightFlag="false" 
+                :leftFlag="false" :rightFlag="false"   v-if="!searchShow"
+            ></customHeader>
+            <customHeader v-else ref="customHeaderRef" :title="'搜索'" 
+                :leftFlag="true" :rightFlag="false"
+                @back="handleBack" :searchType="1"
             ></customHeader>
             <!-- 高度来避免头部遮挡 -->
             <view class="top-height"></view>
 
             <!-- 搜索  @confirm="handleSearch"  -->
-            <view class="search">
+            <customSearch v-if="searchShow"   
+                :searchKeywords="searchText" 
+                :searchType="searchTypeObj" 
+                @confirm="handleSearchConfirm"
+            ></customSearch>
+            <view class="search"  v-else>
                 <uni-search-bar class="custom-search" radius="28" 
                     placeholder="请输入您想查询的内容或服务"
                     clearButton="auto" cancelButton="none" 
                     bgColor="#6FA2F8" textColor="#ffffff"
-                    @focus="handleFocus"
+                    @focus="handleSearchFocus"
+                    v-model="searchText"
                 />
             </view>
 
             <!-- 下拉刷新 -->
-            <mescroll-uni ref="mescrollRef" @init="mescrollInit"
+            <mescroll-uni  v-if="!searchShow" ref="mescrollRef" @init="mescrollInit"
                 :down="downOption"  @down="downCallback"
                 :fixed="false" class="scroll-h"
             >
@@ -59,7 +69,8 @@
 <script setup>
 import { ref,onMounted } from 'vue'
 import { onLoad,onShow } from '@dcloudio/uni-app';
-import customHeader from '@/components/customHeader.vue'
+import customHeader from '@/components/customHeader.vue';
+import customSearch from '@/components/customSearch.vue'
 import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
 import { getNavBarPaddingTop} from '@/utils/system.js'
 import { businessList } from '@/api/business.js';
@@ -83,11 +94,32 @@ onMounted(() => {
     navBarPaddingTop.value = getNavBarPaddingTop()*2;
 })
 
+// 搜索处理
+let searchShow = ref(false);
+let searchText = ref(undefined);
+let searchTypeObj = ref({typeId:2});
+
+// 搜索返回操作
+const handleBack=()=>{
+    searchShow.value=false;
+}
+// 获取input 焦点跳转
+const handleSearchFocus=()=>{
+    searchShow.value = true;
+}
+
+// 搜索完返回处理
+const handleSearchConfirm = (param1,param2)=>{
+    // console.log(param1,param2)
+    searchText.value=param2.value;;
+    searchShow.value=false;
+}
+
 // 查询列表
 let list = ref([]);
 let getList = async()=>{
-   
-    let res = await businessList({});//查询所有业务
+    let searchValue = searchText.value?searchText.value:undefined;
+    let res = await businessList({searchValue});//查询所有业务
     let arr = res || [];
     let bizList = initTree(arr,0,'bizId');//递归获取数组处理
     bizList.forEach(item => {
@@ -101,16 +133,6 @@ let handleExpand = (item)=>{
     item.expandFlag = !item.expandFlag;
 }
 
-// 获取input 焦点跳转
-let handleFocus=()=>{
-    uni.navigateTo({url:'/pages/search/search?type=2'})
-}
-
-// 查询搜索跳转
-let handleSearch = ()=>{
-
-}
-
 // 下拉刷新
 const mescrollRef = ref(null);
 const mescrollInit = (mescroll) => {