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

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` }
]
// searchResult.value = [
// { id: 1, name: `${searchText.value} 结果1` },
// { id: 2, name: `${searchText.value} 结果2` },
// { 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;