1.评论

tj

2025-06-06 365f673a7d5d84a97486b6fd3dc2e90a29fc7db7

 sub-pages/community/search-page.vue

@@ -2,19 +2,30 @@
    <view class="search-page">
        <!-- 搜索框 -->
        <view class="search-bar">
            <up-search v-model="searchValue" placeholder="新疆本地小团" show-action @search="onSearch" />
            <up-search v-model="searchValue" :placeholder="searchPlaceHolder" show-action @search="onSearch"
                @custom="onSearch" @click-icon="onSearch" />
        </view>

        <!-- 历史记录 -->
        <view class="section">
        <view class="section"  v-if="historyTags.length">
            <view class="section-title">
                <text>历史记录</text>
                <up-icon name="trash" size="20" @click="onClearHistory" class="delete-icon" />

                <view v-if="!showCloseBtn"> <up-icon name="trash" size="20" @click="onClearHistory"
                        class="delete-icon" /></view>
                <view v-else class="action-group">
                    <text class="action-btn" @click="onDeleteAll">全部删除</text>
                    <text class="action-btn" @click="onClearHistory">完成</text>
                </view>
            </view>
            <view class="tag-list">
                <up-tag v-for="(item, index) in historyTags" :key="index" plain size="mini" class="tag" shape="circle"
                    borderColor="#E9E9E9" color="#333333" textSize="20rpx">{{ item }}</up-tag>
                <!-- <up-tag v-for="(item, index) in historyTags" :key="index" plain size="mini" class="tag" shape="circle"
                    borderColor="#E9E9E9" color="#333333" textSize="20rpx">{{ item }}
                    <up-icon name="close" size="10" @click="handleDeleteHistoryOne(item, index)" />
                </up-tag> -->
                <view v-for="(item, index) in historyTags" :key="index" @click.stop class="tag2">
                    <view class="tag-text">{{ item }}</view>
                    <up-icon v-if="showCloseBtn" name="close" size="10"
                        @click.stop="handleDeleteHistoryOne(item, index)" />
                </view>
            </view>
        </view>

@@ -57,9 +68,9 @@
                                    index === 2 ? 'gradient-yellow' : ''
                        ]">{{ index + 1 }}</text>
                        <text class="hot-text">{{ item.title }}</text>
                        <up-tag v-if="item.tag"
                        <up-tag v-if="item.tag" 
                            :type="item.tag === '热' ? 'error' : item.tag === '荐' ? 'warning' : 'primary'" size="mini"
                            class="tag">
                            class="tag" >
                            {{ item.tag }}
                        </up-tag>
                    </view>
@@ -67,18 +78,29 @@
                </view>
            </view>
        </view>


        <up-modal v-model:show="showModal" title="" showCancelButton confirmText="确定" cancelText="取消" @confirm="onConfirm">
            <template #default>
                <text style="color: red;">删除全部搜索历史</text>
            </template>
        </up-modal>


    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { handleError, ref } from 'vue'
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { useGlobal } from '@/composables/useGlobal'
const { $http, $message, $storage } = useGlobal()

import { getSearchHistory, addSearchHistory, clearSearchHistory, removeSearchHistoryByIndex } from '@/sub-pages/utils/storageKeys'
const searchValue = ref('')

const historyTags = ref<string[]>([
    '新疆靠谱旅行社', '重庆往返乌鲁木齐', '旅游行程安排文案', '旅游行程安排表'
])
const searchPlaceHolder = ref('新疆本地小团')
const historyTags = ref<string[]>([])
const showModal = ref(false)


const guessList = [
@@ -99,17 +121,48 @@
    { title: '你可能不认识汪 but 一定看过汪', tag: '荐', views: '603.5万' }
]

function onSearch(val: string) {
    console.log('搜索内容：', val)
}

function onClearHistory() {
    console.log('清除历史记录')
    // 这里可以清空 historyTags 或调用实际删除逻辑
    historyTags.value.length = 0
const onSearch = () => {
    // 这里判断，如果输入的内容是空的话，那么将searchPlaceHolder的值赋值给searchValue
    if (!searchValue.value) {
        searchValue.value = searchPlaceHolder.value
    }
    addSearchHistory(searchValue.value)
    historyTags.value = getSearchHistory()
    searchValue.value = ''
    console.log('搜索内容：', searchValue.value)
    // TODO 跳转到搜索页面

}
const showCloseBtn = ref(false) // 控制按钮显示
const onClearHistory = () => {
    showCloseBtn.value = !showCloseBtn.value
}

const onDeleteAll = () => {
    showModal.value = true
}

const onConfirm = ()=>{
  clearSearchHistory()
  historyTags.value = getSearchHistory()
  showModal.value = false
}

/**
 * 删除一个 historyTags 中的项目
 * @param item 列表项目
 * @param index 
 */
const handleDeleteHistoryOne = (item: String, index: Number) => {
    removeSearchHistoryByIndex(index)
    historyTags.value = getSearchHistory()
    onClearHistory()
}


onShow(() => {
    historyTags.value = getSearchHistory()
});
</script>

<style lang="scss" scoped>
@@ -138,7 +191,21 @@
            .icon-list {
                display: flex;
                gap: 10rpx;
                color: #999;
            }

            .action-group {
                display: flex;
                gap: 24rpx;
                /* 控制两个按钮之间的间距 */

                .action-btn {
                    color: #999;
                    font-size: 24rpx;
                }
            }


        }

        .hot-title {
@@ -151,7 +218,28 @@
            gap: 10rpx;

            .tag {
                padding: 6rpx 20rpx;
                padding: 6rpx;
                display: flex;
            }

            .tag2 {
                display: inline-flex;
                align-items: center;
                border: 1px solid #E9E9E9;
                border-radius: 50rpx;
                /* 模拟 shape="circle" */
                padding: 4rpx 10rpx;
                font-size: 20rpx;
                /* textSize */
                color: #333333;
                /* color */
                margin: 6rpx;
                background-color: transparent;
                /* plain 样式 */
            }

            .tag-text {
                margin-right: 6rpx;
            }
        }

@@ -189,7 +277,7 @@

                .hot-text {
                    font-weight: bold;
                    font-size: 28rpx;
                    font-size: 26rpx;
                    margin-left: 10rpx;
                    max-width: 400rpx;
                    display: inline-block;
@@ -219,6 +307,7 @@

                .tag {
                    margin-left: 10rpx;
                    font-size: 22rpx;
                }

                .hot-views {