增加搜索插件

src/pages/notice/notice.vue

@@ -2,27 +2,48 @@
     <view class="con-body">
         <view class="con-bg">
             <!-- 头部 -->
-            <customHeader ref="customHeaderRef" :title="'消息'" :leftFlag="false" :rightFlag="true">
+            <customHeader ref="customHeaderRef" :title="'消息'" :leftFlag="false" :rightFlag="true"  v-if="!searchShow">
                 <template #right>
                     <view class="head-right" @click="handleRead">
                         <img :src="'static/images/icon-clean@2x.png'" />清除未读
                     </view>
                 </template>
             </customHeader>
+            <customHeader v-else ref="customHeaderRef" :title="'搜索'" 
+                :leftFlag="true" :rightFlag="false"
+                @back="handleBack" :searchType="1"
+            ></customHeader>
             <!-- 高度来避免头部遮挡 -->
             <view class="top-height"></view>
-
-            <!-- 搜索 -->
-            <view class="search">
-                <!-- @confirm="handleSearch" -->
-                <uni-search-bar class="custom-search" radius="28" placeholder="请输入您想查询的内容或服务" clearButton="auto"
-                    cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff" 
-                    @focus="handleFocus"
-                />
+          
+            <!-- 搜索处理 -->
+            <customSearch v-if="searchShow"   
+                :searchKeywords="searchText" 
+                :searchType="searchTypeObj" 
+                :checkTypeObj="notictTypeCheck"
+                :searchTypeList="noticeTypeList" 
+                @confirm="handleSearchConfirm"
+            ></customSearch>
+            <view class="search" v-else  @click="handleSearchFocus">
+                <view class="search-bg">
+                    <view class="search-left">{{ notictTypeCheck.name?notictTypeCheck.name:'全部' }}</view>
+                    <view class="search-right">
+                        <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>
 
             <!-- 消息列表 -->
-            <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+            <mescroll-uni  v-if="!searchShow" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
                 :up="upOption" :down="downOption" :fixed="false" class="scroll-h" :class="{'loading-scroll':cssFlag}">
                 <view class="white-bg" v-if="list.length>0" :class="{'bg-height':list.length<5}">
                     <view class="notice-list" v-for="(item, index) in list" :key="index" @click="handleJump(item)">
@@ -42,12 +63,13 @@
 
 <script setup>
 import { ref, onMounted,computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app';
 import customHeader from '@/components/customHeader.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 publicSearch from 
+import customSearch from '@/components/customSearch.vue'
 
 // 获取导航栏高度用于内容区域padding
 const navBarPaddingTop = ref(0);
@@ -55,14 +77,38 @@ onMounted(() => {
     navBarPaddingTop.value = getNavBarPaddingTop() * 2;
 })
 
+// 搜索处理
+let searchShow = ref(false);
+let searchText = ref(undefined);
+let searchTypeObj = ref({typeId:1,typeName:'消息类型'});
+let noticeTypeList=ref([
+    {id:1,name:'日程消息一二'}, 
+    {id:2,name:'提醒消息'}, 
+    {id:3,name:'通知消息'},
+    {id:4,name:'待办消息'}, 
+    {id:5,name:'服务消息'}
+]);
+let notictTypeCheck = ref({});//选中类型
+
+onLoad(async(opt) => {
+    uni.setStorageSync('page_cache',true);
+})
+
+// 搜索返回操作
+const handleBack=()=>{
+    searchShow.value=false;
+}
 // 获取input 焦点跳转
-let handleFocus=()=>{
-    // uni.navigateTo({url:'/pages/search/search?type=3'})
+const handleSearchFocus=()=>{
+    searchShow.value = true;
 }
 
-// 查询搜索跳转
-let handleSearch = () => {
-
+// 搜索完返回处理
+const handleSearchConfirm = (param1,param2)=>{
+    // console.log(param1,param2)
+    notictTypeCheck.value=param1.value;
+    searchText.value=param2.value;;
+    searchShow.value=false;
 }
 
 const formatDateStr = (times) => {
@@ -146,7 +192,9 @@ const getNoticeList = (pageIndex, pageSize) => {
     return new Promise(async (resolve) => {
         let param = {
             pageIndex,
-            pageSize
+            pageSize,
+            searchValue:searchText.value?searchText.value:undefined,
+            type:notictTypeCheck.value.id
         }
         
         let res = await noticeList(param);