admin/ys-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加搜索插件

Browse Source
This commit is contained in:
xuli3099
2025-08-18 15:50:40 +08:00
parent 0c7c703481
commit 1a66f1f3a6
6 changed files with 225 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/customHeader.vue
View File

@@ -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>

125
src/components/customSearch.vue
View File

@@ -2,32 +2,38 @@
<view>
<!-- 搜索框 -->
<view class="search search-sao">
<!-- @confirm="handleSearch" -->
<uni-search-bar class="custom-search" radius="28" placeholder="请输入您想查询的内容或服务" clearButton="auto"
cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff"
<!-- @confirm="handleSearch" @cancel="handleCancel"-->
<uni-search-bar class="custom-search"
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>
<!-- 历史记录 v-if="historyList.length>0"-->
<!-- 历史记录 v-if="historyList.length>0" -->
<view class="search-section">
<view class="section-header">
<text class="section-title">历史搜索</text>
@@ -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()) {
uni.showToast({
title: '请输入搜索内容',
icon: 'none'
})
return
let txtContent = searchText.value?searchText.value.trim():undefined
if (txtContent) {
// uni.showToast({
// title: '请输入搜索内容',
// icon: 'none'
// })
// return
// 添加到历史记录
addToHistory(txtContent)
}
// 添加到历史记录
addToHistory(searchText.value.trim())
// 模拟搜索请求
searchResult.value = [
{ id: 1, name: `${searchText.value} 结果1` },
{ id: 2, name: `${searchText.value} 结果2` },
{ id: 3, name: `${searchText.value} 结果3` }
]
showContent.value = false;
// searchResult.value = [
// { id: 1, name: `${searchText.value} 结果1` },
// { id: 2, name: `${searchText.value} 结果2` },
// { id: 3, name: `${searchText.value} 结果3` }
// ]
// 传给父组件
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;

2
src/pages/home/home.vue
View File

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

80
src/pages/notice/notice.vue
View File

@@ -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);

44
src/static/common.css
View File

@@ -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 {

39
src/utils/common.js
View File

@@ -121,21 +121,38 @@ const goPermission = () => {
})
}
// 跳转授权
const jumpAuthPermission = () => {
// 跳转授权按钮
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);