增加搜索页面

src/components/customSearch.vue

@@ -1,84 +1,262 @@
 <template>
     <view>
         <!-- 搜索框 -->
-        <uni-search-bar v-model="searchText" @confirm="handleSearch" />
-
-        <!-- <view v-if="showSuggestions" class="suggestions-list">
-            <view 
-                v-for="(item, index) in suggestions" 
-                :key="index"
-                class="suggestion-item"
-                @click="selectSuggestion(item)"
-            >
-                {{ item }}
-            </view>
-        </view> -->
-
-        <!-- 筛选条件 -->
-        <view class="filter-container">
-            <picker mode="selector" :range="categoryOptions" @change="handleCategoryChange">
-                <view class="filter-item">{{ categoryText }}</view>
-            </picker>
-            <picker mode="selector" :range="sortOptions" @change="handleSortChange">
-                <view class="filter-item">{{ sortText }}</view>
-            </picker>
+        <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">
 
-        <!-- 搜索结果 -->
-        <search-results :list="results" />
+            <!-- 消息类型 -->
+            <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 suggestions = ref([])
-// const showSuggestions = ref(false)
+const props = defineProps({
+   type:{}//搜索类型 1-首页，2-业务中心，3-消息
+})
 
-// const handleInput = debounce(async () => {
-//   if (!searchText.value.trim()) {
-//     showSuggestions.value = false
-//     return
-//   }
-  
-//   try {
-//     const res = await getSuggestions(searchText.value)
-//     suggestions.value = res
-//     showSuggestions.value = true
-//   } catch (error) {
-//     console.error('获取搜索建议失败:', error)
-//   }
-// }, 300)
+const searchText = ref('');// 搜索文本
+const showCancel = ref(false)// 是否显示取消按钮
+const showContent = ref(true)// 是否显示内容区域
+const historyList = ref([])// 历史记录列表
+const noticeList = ref(['日程消息', '提醒消息', '通知消息', '待办消息', '服务消息'])// 热门搜索列表
+const searchResult = ref([])// 搜索结果
 
-const searchText = ref('')
-const category = ref(0)
-const sort = ref(0)
+//  加载历史记录
+const loadHistory = () => {
+    const history = uni.getStorageSync('searchHistory') || []
+    historyList.value = history
+}
 
-const categoryOptions = ['全部类别', '电子产品', '服装', '食品']
-const sortOptions = ['默认排序', '价格从低到高', '价格从高到低', '销量最高']
-
-const categoryText = computed(() => categoryOptions[category.value])
-const sortText = computed(() => sortOptions[sort.value])
-
-const handleSearch = async () => {
-    const params = {
-        keyword: searchText.value,
-        category: category.value,
-        sort: sort.value
+// 处理搜索
+const handleSearch = () => {
+    if (!searchText.value.trim()) {
+        uni.showToast({
+            title: '请输入搜索内容',
+            icon: 'none'
+        })
+        return
     }
 
-    // 调用搜索API
-    const res = await searchAPI(params)
-    results.value = res.data
+    // 添加到历史记录
+    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 handleCategoryChange = (e) => {
-    category.value = e.detail.value
+// 处理输入
+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 handleSortChange = (e) => {
-    sort.value = e.detail.value
+// 点击消息类型
+const handleNoticeClick = (item) => {
+    searchText.value = item
     handleSearch()
 }
-</script>
+
+// 点击搜索结果
+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>

src/pages/business/business.vue

@@ -8,13 +8,13 @@
         <!-- 高度来避免头部遮挡 -->
         <view class="top-height"></view>
 
-         <!-- 搜索 -->
+         <!-- 搜索  @confirm="handleSearch"  -->
          <view class="search">
             <uni-search-bar class="custom-search" radius="28" 
                 placeholder="请输入您想查询的内容或服务"
                 clearButton="auto" cancelButton="none" 
                 bgColor="#6FA2F8" textColor="#ffffff"
-                @confirm="handleSearch"  
+                @focus="handleFocus"
             />
         </view>
 
@@ -91,6 +91,11 @@ let handleExpand = (item)=>{
     item.expandFlag = !item.expandFlag;
 }
 
+// 获取input 焦点跳转
+let handleFocus=()=>{
+    uni.navigateTo({url:'/pages/search/search?type=2'})
+}
+
 // 查询搜索跳转
 let handleSearch = ()=>{
 

src/pages/home/home.vue

@@ -9,13 +9,13 @@
           <!-- #ifdef H5 -->
           <view style="height:50rpx"></view>
           <!-- #endif -->
-          <!-- 搜索 -->
+          <!-- 搜索  @confirm="handleSearch"  -->
           <view class="search search-sao" >
               <uni-search-bar class="custom-search" radius="28" 
                   placeholder="请输入您想查询的内容或服务"
                   clearButton="auto" cancelButton="none" 
                   bgColor="#6FA2F8" textColor="#ffffff"
-                  @confirm="handleSearch"  
+                  @focus="handleFocus"
               />
               <uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phonesaoyisao" size="20"></uni-icons>
           </view>
@@ -188,6 +188,11 @@ const navBarPaddingTop = ref(0);
 onMounted(() => {
     navBarPaddingTop.value = getNavBarPaddingTop()*2;
 })
+
+// 获取input 焦点跳转
+let handleFocus=()=>{
+    uni.navigateTo({url:'/pages/search/search?type=1'})
+}
 // 查询搜索跳转
 let handleSearch = ()=>{
 

src/pages/notice/notice.vue

@@ -14,9 +14,10 @@
 
             <!-- 搜索 -->
             <view class="search">
+                <!-- @confirm="handleSearch" -->
                 <uni-search-bar class="custom-search" radius="28" placeholder="请输入您想查询的内容或服务" clearButton="auto"
                     cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff" 
-                    @confirm="handleSearch" @focus="handleFocus"
+                    @focus="handleFocus"
                 />
             </view>
 
@@ -54,7 +55,7 @@ onMounted(() => {
 
 // 获取input 焦点跳转
 let handleFocus=()=>{
-    uni.navigateTo({url:'/pages/search/search'})
+    uni.navigateTo({url:'/pages/search/search?type=3'})
 }
 
 // 查询搜索跳转

src/pages/search/search.vue

@@ -8,15 +8,22 @@
         <!-- 高度来避免头部遮挡 -->
         <view class="top-height"></view>
 
-        <customSearch></customSearch>
+        <customSearch :type="type"></customSearch>
 
     </view>
 </view>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
 import customHeader from '@/components/customHeader.vue'
 import customSearch from '@/components/customSearch.vue'
+
+let type=ref(1);
+onLoad(async(opt) => {
+    console.log(opt.type)
+    type.value = opt.type;
+})
 </script>
 
 <style scoped>