ys-app/src/components/customSearch.vue

<template>
    <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" 
                v-model="searchText"
              
            />
            <text class="search-btn" @click="handleSearch">查询</text>
        </view>
        <view class="white-bg">

            <!-- 消息类型 -->
            <view class="search-section" v-if="type==3">
                <view class="section-header">
                    <text class="section-title">消息类型</text>
                </view>
                <view class="tag-container">
                    <view class="search-tag notice-tag" v-for="(item, index) in noticeList"
                        :key="'notice-' + index"
                        @click="handleNoticeClick(item)"
                    >
                        {{ item }}
                    </view>
                </view>
            </view>

            <!-- 历史记录  v-if="historyList.length>0"-->
            <view class="search-section">
                <view class="section-header">
                    <text class="section-title">历史搜索</text>
                    <uni-icons type="trash" size="18" color="#999" @click="clearHistory"></uni-icons>
                </view>
                <view class="tag-container">
                    <view class="search-tag" v-for="(item, index) in historyList" :key="'history-' + index"
                        @click="handleHistoryClick(item)">
                        {{ item }}
                    </view>
                </view>
            </view>

            <!-- 搜索结果 -->
            <!-- <view class="search-result" v-if="searchResult.length > 0">
                <view class="result-item"
                    v-for="(item, index) in searchResult"
                    :key="'result-' + index"
                    @click="handleResultClick(item)"
                >
                    {{ item.name }}
                </view>
            </view> -->
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
   type:{}//搜索类型 1-首页，2-业务中心，3-消息
})

const searchText = ref('');// 搜索文本
const showCancel = ref(false)// 是否显示取消按钮
const showContent = ref(true)// 是否显示内容区域
const historyList = ref([])// 历史记录列表
const noticeList = ref(['日程消息', '提醒消息', '通知消息', '待办消息', '服务消息'])// 热门搜索列表
const searchResult = ref([])// 搜索结果

//  加载历史记录
const loadHistory = () => {
    const history = uni.getStorageSync('searchHistory') || []
    historyList.value = history
}

// 处理搜索
const handleSearch = () => {
    if (!searchText.value.trim()) {
        uni.showToast({
            title: '请输入搜索内容',
            icon: 'none'
        })
        return
    }

    // 添加到历史记录
    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;

    
}

// 处理输入
const handleInput = () => {
    showCancel.value = searchText.value.length > 0
}

// 清除搜索
const clearSearch = () => {
    searchText.value = ''
    showCancel.value = false
    searchResult.value = []
    showContent.value = true
}

// 取消搜索
const handleCancel = () => {
    uni.navigateBack()
}

// 添加到历史记录
const addToHistory = (keyword) => {
    const index = historyList.value.indexOf(keyword)
    if (index !== -1) {
        historyList.value.splice(index, 1)
    }
    historyList.value.unshift(keyword)

    // 限制历史记录数量
    if (historyList.value.length > 10) {
        historyList.value = historyList.value.slice(0, 10)
    }

    uni.setStorageSync('searchHistory', historyList.value)
}

// 清除历史记录
const clearHistory = () => {
    uni.showModal({
        title: '提示',
        content: '确定要清空历史记录吗？',
        success: (res) => {
            if (res.confirm) {
                historyList.value = []
                uni.removeStorageSync('searchHistory')
            }
        }
    })
}

// 点击历史记录
const handleHistoryClick = (item) => {
    searchText.value = item
    handleSearch()
}

// 点击消息类型
const handleNoticeClick = (item) => {
    searchText.value = item
    handleSearch()
}

// 点击搜索结果
const handleResultClick = (item) => {
    uni.showToast({
        title: `点击了 ${item.name}`,
        icon: 'none'
    })
    // 实际项目中这里可以跳转到详情页
    // uni.navigateTo({ url: `/pages/detail/detail?id=${item.id}` })
}
</script>
<style scoped>
.search-sao {
    display: flex;
}

.search-sao .custom-search {
    /* width:615rpx; */
    width: 590rpx;
    padding: 0 20rpx;
    margin-bottom:15rpx;
}

.search-sao :deep(.custom-search.uni-searchbar) {
    padding-bottom: 15rpx !important;
}

.search-sao .search-btn {
    margin: 15rpx 30rpx 10rpx 0;
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
    text-align: center;
}

.white-bg {
    width: 750rpx;
    padding: 40rpx 0;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
    /* #ifdef APP-PLUS */
    height: calc(100vh - 130px);
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 150px);
    /* #endif */
}

.search-section {
    margin-bottom: 40rpx;
    padding:0 45rpx;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.section-title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
}

.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap:20rpx;
}

.search-tag {
    background-color: #fff;
    border:1px solid #E8E8E8;
    border-radius: 10rpx;
    padding: 10rpx 15rpx;
    /* margin-right: 20rpx;
    margin-bottom: 20rpx; */
    font-size: 28rpx;
}

.search-tag.notice-tag{
    padding: 10rpx 45rpx;
}
.notice-tag:nth-child(3n){
    margin-right: 0;
}

.search-result {
    margin-top: 20rpx;
    padding:0 20rpx;
}

.result-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;
    font-size: 28rpx;
    color: #333;
}
</style>