From d9a780fa538cb7a83aefa04e75cb53185d690d7d Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期五, 30 五月 2025 16:39:07 +0800
Subject: [PATCH] 微封装
---
sub-pages/community/search-page.vue | 137 +++++++++++++++++++++++++++++++++++++--------
1 files changed, 113 insertions(+), 24 deletions(-)
diff --git a/sub-pages/community/search-page.vue b/sub-pages/community/search-page.vue
index b87fa31..40eb1df 100644
--- a/sub-pages/community/search-page.vue
+++ b/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 {
--
Gitblit v1.9.3