baqing-shop/shop-app/subpackage/search/index.vue

<template>
	<view class="page-search">
		<view class="search-header">
			<view class="search-header__bar">
				<!-- <u-icon name="arrow-left" size="20" color="#333" @click="onBack" /> -->
				<view class="search-header__input-wrap">
					<u-icon name="search" color="#999" size="18" />
					<input
						class="search-header__input"
						v-model="keyword"
						:placeholder="placeholder"
						confirm-type="search"
						:focus="inputFocus"
						@confirm="onSubmit"
					/>
					<u-icon
						v-if="keyword"
						name="close-circle-fill"
						color="#ccc"
						size="18"
						@click="keyword = ''"
					/>
				</view>
				<text class="search-header__btn" @click="onSubmit">搜索</text>
			</view>
		</view>

		<view v-if="historyList.length" class="history">
			<view class="history__head">
				<text class="history__title">搜索历史</text>
				<text class="history__clear" @click="onClearAll">清空</text>
			</view>
			<view class="history__list">
				<view v-for="item in historyList" :key="item.keyword" class="history__item">
					<text class="history__text" @click="onHistoryTap(item.keyword)">{{ item.keyword }}</text>
					<u-icon
						name="close"
						color="#bbb"
						size="14"
						@click.stop="onRemoveOne(item.keyword)"
					/>
				</view>
			</view>
		</view>
		<view v-else class="history-empty">
			<text>暂无搜索历史</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { SEARCH_PLACEHOLDER } from '@/constants/search'
import {
  getSearchHistory,
  addSearchHistory,
  removeSearchHistoryItem,
  clearSearchHistory
} from '@/utils/searchHistory'
import { goSearchResult, navigateBackFromSearchIndex } from '@/utils/searchNav'

const placeholder = SEARCH_PLACEHOLDER
const keyword = ref('')
const historyList = ref([])
const inputFocus = ref(false)

function refreshHistory() {
  historyList.value = getSearchHistory()
}

function onBack() {
  navigateBackFromSearchIndex()
}

function submitSearch() {
  const text = (keyword.value || '').trim()
  if (!text) {
    uni.showToast({ title: '请输入搜索内容', icon: 'none' })
    return
  }
  addSearchHistory(text)
  goSearchResult(text)
}

function onSubmit() {
  submitSearch()
}

function onHistoryTap(text) {
  keyword.value = text
  submitSearch()
}

function onRemoveOne(text) {
  removeSearchHistoryItem(text)
  refreshHistory()
}

function onClearAll() {
  uni.showModal({
    title: '提示',
    content: '确定清空全部搜索历史吗？',
    success: (res) => {
      if (res.confirm) {
        clearSearchHistory()
        refreshHistory()
      }
    }
  })
}

onLoad((options) => {
  if (options && options.keyword) {
    keyword.value = decodeURIComponent(options.keyword)
  }
  inputFocus.value = !keyword.value
})

onShow(() => {
  refreshHistory()
})
</script>

<style lang="scss" scoped>
.page-search {
	height: calc(100vh - 100rpx);
	background: #f5f6f8;
}
.search-header {
	background: #fff;
	padding: 16rpx 24rpx 24rpx;
}
.search-header__bar {
	display: flex;
	align-items: center;
}
.search-header__input-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	height: 72rpx;
	margin: 0 16rpx;
	padding: 0 20rpx;
	background: #f5f6f8;
	border-radius: 36rpx;
}
.search-header__input {
	flex: 1;
	margin: 0 12rpx;
	font-size: 28rpx;
	color: #333;
}
.search-header__btn {
	font-size: 28rpx;
	color: #2e7d32;
	font-weight: 500;
	flex-shrink: 0;
}
.history {
	margin-top: 16rpx;
	padding: 24rpx;
	background: #fff;
}
.history__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}
.history__title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
}
.history__clear {
	font-size: 26rpx;
	color: #999;
}
.history__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}
.history__text {
	flex: 1;
	font-size: 28rpx;
	color: #666;
}
.history-empty {
	padding: 80rpx 24rpx;
	text-align: center;
	font-size: 26rpx;
	color: #bbb;
}
</style>