120 lines
2.8 KiB
Vue
120 lines
2.8 KiB
Vue
<!-- 搜索界面 -->
|
|
<template>
|
|
<s-layout class="set-wrap" title="搜索" :bgStyle="{ color: '#FFF' }">
|
|
<view class="ss-p-x-24">
|
|
<view class="ss-flex ss-col-center">
|
|
<uni-search-bar
|
|
class="ss-flex-1"
|
|
radius="33"
|
|
placeholder="请输入关键字"
|
|
cancelButton="none"
|
|
:focus="true"
|
|
@confirm="onSearch($event.value)"
|
|
/>
|
|
</view>
|
|
<view class="ss-flex ss-row-between ss-col-center">
|
|
<view class="serach-history">搜索历史</view>
|
|
<button class="clean-history ss-reset-button" @tap="onDelete"> 清除搜索历史 </button>
|
|
</view>
|
|
<view class="ss-flex ss-col-center ss-row-left ss-flex-wrap">
|
|
<button
|
|
class="history-btn ss-reset-button"
|
|
@tap="onSearch(item)"
|
|
v-for="(item, index) in state.historyList"
|
|
:key="index"
|
|
>
|
|
{{ item }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</s-layout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from 'vue';
|
|
import sheep from '@/sheep';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
|
|
const state = reactive({
|
|
historyList: [],
|
|
});
|
|
|
|
// 搜索
|
|
function onSearch(keyword) {
|
|
if (!keyword) {
|
|
return;
|
|
}
|
|
saveSearchHistory(keyword);
|
|
// 前往商品列表（带搜索条件）
|
|
sheep.$router.go('/pages/goods/list', { keyword });
|
|
}
|
|
|
|
// 保存搜索历史
|
|
function saveSearchHistory(keyword) {
|
|
// 如果关键词在搜索历史中，则把此关键词先移除
|
|
if (state.historyList.includes(keyword)) {
|
|
state.historyList.splice(state.historyList.indexOf(keyword), 1);
|
|
}
|
|
// 置顶关键词
|
|
state.historyList.unshift(keyword);
|
|
|
|
// 最多保留 10 条记录
|
|
if (state.historyList.length >= 10) {
|
|
state.historyList.length = 10;
|
|
}
|
|
uni.setStorageSync('searchHistory', state.historyList);
|
|
}
|
|
|
|
function onDelete() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确认清除搜索历史吗？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
state.historyTag = [];
|
|
uni.removeStorageSync('searchHistory');
|
|
}
|
|
},
|
|
});
|
|
}
|
|
|
|
onLoad(() => {
|
|
state.historyList = uni.getStorageSync('searchHistory') || [];
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.serach-title {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.uni-searchbar {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.serach-history {
|
|
font-weight: bold;
|
|
color: #333333;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.clean-history {
|
|
font-weight: 500;
|
|
color: #999999;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.history-btn {
|
|
padding: 0 38rpx;
|
|
height: 60rpx;
|
|
background: #f5f6f8;
|
|
border-radius: 30rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
max-width: 690rpx;
|
|
margin: 0 20rpx 20rpx 0;
|
|
}
|
|
</style>
|