增加搜索模板

2025-08-18 16:11:49 +08:00
parent 1a66f1f3a6
commit 5e36cbb244
4 changed files with 178 additions and 147 deletions
--- a/src/components/customSearch.vue
+++ b/src/components/customSearch.vue
@@ -68,7 +68,7 @@ const props = defineProps({
    searchKeywords:{//搜索文本
        type:String
    },
-    searchType:{//哪种类型显示对象
+    searchType:{//哪种类型显示对象 typeId:1-首页，2-业务首页，3-消息  之后可以自动添加
        type:Object
    },
    searchTypeList:{//类型列表
@@ -111,7 +111,7 @@ const emit = defineEmits(['confirm']);

 //  加载历史记录
 const loadHistory = () => {
-    let typeId = props.searchType.typeId
+    let typeId = props.searchType?props.searchType.typeId:undefined
    const history = uni.getStorageSync('searchHistory'+typeId) || []
    historyList.value = history
 }
--- a/src/pages/business/business.vue
+++ b/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) => {
--- a/src/pages/home/home.vue
+++ b/src/pages/home/home.vue
@@ -17,16 +17,23 @@
          <!-- #endif -->

          <!-- 搜索  @confirm="handleSearch"  -->
-          <view class="search search-sao" >
+          <customSearch v-if="searchShow"   
+                :searchKeywords="searchText" 
+                :searchType="searchTypeObj" 
+                @confirm="handleSearchConfirm"
+            ></customSearch>
+          <view class="search search-sao" 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"
              />
              <uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phonesaoyisao" size="20"></uni-icons>
          </view>

+          <block v-if="!searchShow">
            <!-- 待办内容 -->
            <view class="backlog-bg">
              <view class="backlog-b-item">
@@ -143,6 +150,7 @@

            <!-- 底部加高度来避免tabbar遮挡 -->
            <view class="bottom-height"></view>
+        </block>
      </mescroll-uni>
      </view>
  </view>
@@ -153,6 +161,7 @@ import { ref,onMounted,computed } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
 import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
 import customSteps from '@/components/customSteps.vue'
+import customSearch from '@/components/customSearch.vue'
 import { getNavBarPaddingTop} from '@/utils/system.js'
 // ,swiperList,stepData,salesTask,commonServices,newsQueryList 
 import { messageNotifyCount,messageFlowCount,getUserFavorite} from '@/api/home.js';
@@ -242,13 +251,21 @@ onMounted(() => {
    navBarPaddingTop.value = getNavBarPaddingTop()*2;
 })

-// 获取input 焦点跳转
-let handleFocus=()=>{
-    uni.navigateTo({url:'/pages/search/search?type=1'})
-}
-// 查询搜索跳转
-let handleSearch = ()=>{
+// 搜索处理
+let searchShow = ref(false);
+let searchTypeObj = ref({typeId:1});
+let searchText = ref(undefined);

+// 获取input 焦点跳转
+const handleSearchFocus=()=>{
+    searchShow.value = true;
+}
+
+// 搜索完返回处理
+const handleSearchConfirm = (param1,param2)=>{
+    // console.log(param1,param2)
+    searchText.value=param2.value;;
+    searchShow.value=false;
 }


--- a/src/pages/notice/notice.vue
+++ b/src/pages/notice/notice.vue
@@ -31,15 +31,6 @@
                        <input class="uni-input" v-model="searchText" placeholder="请输入您想查询的内容或服务" placeholder-class="search-color" />
                    </view>
                </view>
-                <!-- <uni-search-bar class="custom-search" radius="28" 
-                    placeholder="请输入您想查询的内容或服务" 
-                    clearButton="auto"
-                    cancelButton="none" 
-                    bgColor="#6FA2F8" 
-                    textColor="#ffffff" 
-                    @focus="handleSearchFocus"
-                    v-model="searchText"
-                /> -->
            </view>

            <!-- 消息列表 -->
@@ -65,11 +56,15 @@
 import { ref, onMounted,computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app';
 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 { noticeList } from '@/api/notice.js'
 import { formatTimestamp } from '@/utils/datetime.js'
-import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
-import customSearch from '@/components/customSearch.vue'
+
+onLoad(async(opt) => {
+    uni.setStorageSync('page_cache',true);
+})

 // 获取导航栏高度用于内容区域padding
 const navBarPaddingTop = ref(0);
@@ -80,7 +75,7 @@ onMounted(() => {
 // 搜索处理
 let searchShow = ref(false);
 let searchText = ref(undefined);
-let searchTypeObj = ref({typeId:1,typeName:'消息类型'});
+let searchTypeObj = ref({typeId:3,typeName:'消息类型'});
 let noticeTypeList=ref([
    {id:1,name:'日程消息一二'}, 
    {id:2,name:'提醒消息'}, 
@@ -90,9 +85,6 @@ let noticeTypeList=ref([
 ]);
 let notictTypeCheck = ref({});//选中类型

-onLoad(async(opt) => {
-    uni.setStorageSync('page_cache',true);
-})

 // 搜索返回操作
 const handleBack=()=>{