增加搜索插件

src/components/customHeader.vue

@@ -25,6 +25,7 @@ const props = defineProps({
     title: String,
     leftFlag:true,//默认左侧显示 false-不显示
     rightFlag:false,//默认右侧不显示
+    searchType:{default:0}//搜索返回为1，其他暂时不处理
 })
 
 const emit = defineEmits(['back'])
@@ -43,6 +44,7 @@ onMounted(() => {
 
 const handleBack = () => {
     emit('back')
+    if(!props.searchType)
         uni.navigateBack()
 }
 </script>

src/components/customSearch.vue

@@ -2,27 +2,33 @@
     <view>
         <!-- 搜索框 -->
         <view class="search search-sao">
-            <!--   @confirm="handleSearch"  -->
+            <!--   @confirm="handleSearch"  @cancel="handleCancel"-->
-            <uni-search-bar class="custom-search" radius="28" placeholder="请输入您想查询的内容或服务" clearButton="auto"
+            <uni-search-bar class="custom-search" 
-                cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff" 
+                radius="28" 
+                placeholder="请输入您想查询的内容或服务" 
+                clearButton="auto"
+                bgColor="#6FA2F8" textColor="#ffffff" 
                 v-model="searchText"
-              
+                cancelButton="none"
+                focus
             />
             <text class="search-btn" @click="handleSearch">查询</text>
         </view>
         <view class="white-bg">
 
-            <!-- 消息类型 -->
+            <!-- 类型列表 -->
-            <view class="search-section" v-if="type==3">
+            <view class="search-section" v-if="searchTypeList.length>0">
                 <view class="section-header">
-                    <text class="section-title">消息类型</text>
+                    <text class="section-title">{{ searchType.typeName }}</text>
                 </view>
                 <view class="tag-container">
-                    <view class="search-tag notice-tag" v-for="(item, index) in noticeList"
+                    <view class="search-tag notice-tag" :class="{'notice-check':!searchCheckObj.id}"  @click="handleNoticeClick({})">全部</view>
+                    <view class="search-tag notice-tag" :class="{'notice-check':item.id==searchCheckObj.id}"
+                        v-for="(item, index) in searchTypeList"
                         :key="'notice-' + index"
                         @click="handleNoticeClick(item)"
                     >
-                        {{ item }}
+                        {{ item.name }}
                     </view>
                 </view>
             </view>
@@ -56,48 +62,84 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref,watch } from 'vue'
 
 const props = defineProps({
-   type:{}//搜索类型 1-首页，2-业务中心，3-消息
+    searchKeywords:{//搜索文本
+        type:String
+    },
+    searchType:{//哪种类型显示对象
+        type:Object
+    },
+    searchTypeList:{//类型列表
+        type:Array,
+        default:[]
+    },
+    checkTypeObj:{//选中的类型对象
+        type:Object
+    },
+   
 })
 
 const searchText = ref('');// 搜索文本
+const searchCheckObj = ref({});//选中的类型对象
+
 const showCancel = ref(false)// 是否显示取消按钮
-const showContent = ref(true)// 是否显示内容区域
 const historyList = ref([])// 历史记录列表
-const noticeList = ref(['日程消息', '提醒消息', '通知消息', '待办消息', '服务消息'])// 热门搜索列表
+
 const searchResult = ref([])// 搜索结果
 
+// 搜索文本内容
+watch(() => props.searchKeywords, (newVal, oldVal) => {
+    searchText.value = newVal
+},{
+    deep:true, // 深度监听
+    immediate:true // 立即执行
+});
+
+// 选中类型对象
+watch(() => props.checkTypeObj, (newVal, oldVal) => {
+    searchCheckObj.value = newVal
+},{
+    deep:true, // 深度监听
+    immediate:true // 立即执行
+});
+
+
+// 调用父组件的方法
+const emit = defineEmits(['confirm']);
+
 //  加载历史记录
 const loadHistory = () => {
-    const history = uni.getStorageSync('searchHistory') || []
+    let typeId = props.searchType.typeId
+    const history = uni.getStorageSync('searchHistory'+typeId) || []
     historyList.value = history
 }
+loadHistory();
 
 // 处理搜索
 const handleSearch = () => {
-    if (!searchText.value.trim()) {
+    let txtContent = searchText.value?searchText.value.trim():undefined
-        uni.showToast({
+    if (txtContent) {
-            title: '请输入搜索内容',
+        // uni.showToast({
-            icon: 'none'
+        //     title: '请输入搜索内容',
-        })
+        //     icon: 'none'
-        return
+        // })
+        // return
+        // 添加到历史记录
+        addToHistory(txtContent)
     }
 
-    // 添加到历史记录
-    addToHistory(searchText.value.trim())
-
     // 模拟搜索请求
-    searchResult.value = [
+    // searchResult.value = [
-        { id: 1, name: `${searchText.value} 结果1` },
+    //     { id: 1, name: `${searchText.value} 结果1` },
-        { id: 2, name: `${searchText.value} 结果2` },
+    //     { id: 2, name: `${searchText.value} 结果2` },
-        { id: 3, name: `${searchText.value} 结果3` }
+    //     { id: 3, name: `${searchText.value} 结果3` }
-    ]
+    // ]
-
-    showContent.value = false;
 
 
+    // 传给父组件
+    emit('confirm',searchCheckObj,searchText);
 }
 
 // 处理输入
@@ -110,13 +152,8 @@ const clearSearch = () => {
     searchText.value = ''
     showCancel.value = false
     searchResult.value = []
-    showContent.value = true
 }
 
-// 取消搜索
-const handleCancel = () => {
-    uni.navigateBack()
-}
 
 // 添加到历史记录
 const addToHistory = (keyword) => {
@@ -131,7 +168,8 @@ const addToHistory = (keyword) => {
         historyList.value = historyList.value.slice(0, 10)
     }
 
-    uni.setStorageSync('searchHistory', historyList.value)
+    let typeId = props.searchType.typeId
+    uni.setStorageSync('searchHistory'+typeId, historyList.value)
 }
 
 // 清除历史记录
@@ -142,7 +180,8 @@ const clearHistory = () => {
         success: (res) => {
             if (res.confirm) {
                 historyList.value = []
-                uni.removeStorageSync('searchHistory')
+                let typeId = props.searchType.typeId;
+                uni.removeStorageSync('searchHistory'+typeId)
             }
         }
     })
@@ -156,7 +195,8 @@ const handleHistoryClick = (item) => {
 
 // 点击消息类型
 const handleNoticeClick = (item) => {
-    searchText.value = item
+    // searchText.value = item
+    searchCheckObj.value = item;
     handleSearch()
 }
 
@@ -171,6 +211,7 @@ const handleResultClick = (item) => {
 }
 </script>
 <style scoped>
+
 .search-sao {
     display: flex;
 }
@@ -193,7 +234,6 @@ const handleResultClick = (item) => {
     font-weight: bold;
     text-align: center;
 }
-
 .white-bg {
     width: 750rpx;
     padding: 40rpx 0;
@@ -248,6 +288,11 @@ const handleResultClick = (item) => {
     margin-right: 0;
 }
 
+.notice-check{
+    background-color: #05A3F4;
+    color:#fff;
+    border-color:#05A3F4;
+}
 .search-result {
     margin-top: 20rpx;
     padding:0 20rpx;

src/pages/home/home.vue

@@ -188,7 +188,7 @@ const handleDelete=()=>{
 
 
 onLoad(async(opt) => {
-  // uni.setStorageSync('page_cache',true);
+  uni.setStorageSync('page_cache',true);
   // initLoad();
 })
 

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">
+            <customSearch v-if="searchShow"   
-                <!-- @confirm="handleSearch" -->
+                :searchKeywords="searchText" 
-                <uni-search-bar class="custom-search" radius="28" placeholder="请输入您想查询的内容或服务" clearButton="auto"
+                :searchType="searchTypeObj" 
-                    cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff" 
+                :checkTypeObj="notictTypeCheck"
-                    @focus="handleFocus"
+                :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=()=>{
+const handleSearchFocus=()=>{
-    // uni.navigateTo({url:'/pages/search/search?type=3'})
+    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);

src/static/common.css

@@ -171,13 +171,51 @@ page {
 }
 
 .custom-search .uni-searchbar__box-icon-clear {
-    display: none !important;
+    /* display: none !important; */
+    margin-right:10rpx;
 }
 
-/* .custom-search .uni-searchbar__box-icon-clear .uniui-clear{
+.custom-search .uni-searchbar__box-icon-clear .uniui-clear{
     color:#fff !important;
     font-size: 40rpx !important;
-} */
+}
+
+/* 自定义搜索框 */
+.search-bg{
+    background-color: #6FA2F8;
+    border-radius: 28rpx;
+    /* width:690rpx; */
+    width:630rpx;
+    height:56rpx;
+    margin:0 auto 30rpx;
+    padding:0 30rpx;
+    display: flex;
+    color:#fff;
+    font-size:28rpx;
+    flex: auto;
+}
+.search-bg .search-left{
+    border-right:1px solid #4687F2;
+    margin-top:10rpx;
+    margin-bottom:10rpx;
+    padding-right:30rpx;
+    /* width:10%; */
+}
+.search-bg .search-right{
+    margin-top:10rpx;
+    padding-left:30rpx;
+    /* width:60%; */
+}
+.search-bg .search-right .uni-input{
+    color:#fff;
+    font-size:28rpx;
+}
+.search-bg .search-right .uni-input .uni-input-input{
+    width: 380rpx;
+}
+.search-bg .search-right .uni-input .search-color{
+    color:#fff !important;
+}
 /* 搜索框修改样式 end */
 
 .head-right {

src/utils/common.js

@@ -121,21 +121,38 @@ const goPermission = () => {
     })
 }
 
-// 跳转授权
+// 跳转授权按钮
 const jumpAuthPermission=()=>{
-
     var main = plus.android.runtimeMainActivity();
     var Intent = plus.android.importClass('android.content.Intent');
     var Uri = plus.android.importClass('android.net.Uri');
-    var Build = plus.android.importClass('android.os.Build');
-    var Settings = plus.android.importClass('android.provider.Settings');
-    var PackageManager = plus.android.importClass('android.content.pm.PackageManager');
     var pkg = main.getPackageName();
+    var intent = new Intent('android.settings.APPLICATION_DETAILS_SETTINGS');
+    intent.setData(Uri.parse('package:' + pkg));
+    main.startActivity(intent); 
+    setTimeout(()=>{
+        uni.reLaunch({
+            url: '/pages/loading/loading',
+        });
+    },500)
+}
 
-    var intent = new Intent();
+// 跳转授权
+const jumpAuthPermission2 = () => {
+
+    let main = plus.android.runtimeMainActivity();
+    let Intent = plus.android.importClass('android.content.Intent');
+    let Uri = plus.android.importClass('android.net.Uri');
+    let Build = plus.android.importClass('android.os.Build');
+    let Settings = plus.android.importClass('android.provider.Settings');
+    let PackageManager = plus.android.importClass('android.content.pm.PackageManager');
+    let pkg = main.getPackageName();
+
+    let intent = new Intent();
     intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
 
     try {
+        showAlert(Build.VERSION.SDK_INT)
         // 尝试直接跳转到存储权限设置（Android 13+ 支持）
         if (Build.VERSION.SDK_INT >= 33) {
             // Android 13+ 尝试直接打开存储权限页面
@@ -148,11 +165,12 @@ const jumpAuthPermission = () => {
         else if (Build.VERSION.SDK_INT >= 30) {
             intent.setAction(Settings.ACTION_MANAGE_APP_PERMISSIONS);
             intent.putExtra(Settings.EXTRA_APP_PACKAGE, pkg);
+           
         }
         // Android 6.0-10 跳转到应用详情页（用户需手动点击权限）
         else if (Build.VERSION.SDK_INT >= 23) {
             intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
-            var uri = Uri.fromParts("package", pkg, null);
+            let uri = Uri.fromParts("package", pkg, null);
             intent.setData(uri);
         }
         // 低版本系统
@@ -160,6 +178,8 @@ const jumpAuthPermission = () => {
             intent.setAction(Settings.ACTION_MANAGE_APPLICATIONS_SETTINGS);
         }
         
+        showAlert("main=>"+main)
+        showAlert("intent=>"+intent)
         main.startActivity(intent);
 
         setTimeout(() => {
@@ -169,9 +189,10 @@ const jumpAuthPermission = () => {
         }, 1000)
 
     } catch (e) {
+        showAlert(e)
         // 异常情况下降级处理
         console.error("跳转存储权限页面失败，使用备用方案", e);
-        var fallbackIntent = new Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
+        let fallbackIntent = new Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
         fallbackIntent.setData(Uri.parse('package:' + pkg));
         fallbackIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
         main.startActivity(fallbackIntent);