You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
4.1 KiB
170 lines
4.1 KiB
<template>
|
|
<view>
|
|
<lf-nav title="搜索" :showIcon="true"></lf-nav>
|
|
<view class="head">
|
|
<u-search placeholder="请输入商品名或商户名"
|
|
:focus="is_focus"
|
|
v-model="value"
|
|
@search="search"
|
|
@custom="customClick">
|
|
</u-search>
|
|
</view>
|
|
<view class="content">
|
|
<!-- 大家都在搜 -->
|
|
<block v-if="hot_list.length">
|
|
<view>
|
|
<text class="title">大家都在搜</text>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item"
|
|
@click="activeKeyWord(item)"
|
|
v-for="(item, index) in hot_list"
|
|
:key="index">{{ item }}
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 我搜过的 -->
|
|
<block v-if="history_list.length">
|
|
<view class="lf-row-between">
|
|
<text class="title">我搜过的</text>
|
|
<text class="lf-iconfont icon-shanchu lf-color-777" @click="remove"></text>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item item-2"
|
|
@click="activeKeyWord(item)"
|
|
v-for="(item, index) in history_list"
|
|
:key="index">{{ item }}
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value: '', // 搜索的值
|
|
is_focus: true, // 是否自动获得焦点
|
|
hot_list: [], // 热门搜索
|
|
history_list: [], // 历史搜索
|
|
max_history_count: 12 // 最多存多少个历史搜索值
|
|
}
|
|
},
|
|
onLoad(){
|
|
this.getHistorySearch();
|
|
this.getHotSearch();
|
|
},
|
|
onHide(){
|
|
this.setHistorySearch();
|
|
},
|
|
methods: {
|
|
// 获取搜索历史
|
|
getHistorySearch(){
|
|
let history_search = this.$cookieStorage.get('history_search') || [];
|
|
this.history_list = JSON.parse(JSON.stringify(history_search));
|
|
},
|
|
// 设置搜索历史
|
|
setHistorySearch(){
|
|
if(this.history_list.length){
|
|
this.$cookieStorage.set('history_search', this.history_list);
|
|
}else{
|
|
this.$cookieStorage.clear('history_search');
|
|
}
|
|
},
|
|
// TODO 获取热门搜索 待对接请求接口
|
|
getHotSearch(){
|
|
// this.$http.get({
|
|
// api: ''
|
|
// }).then(res => {
|
|
// console.log("hot", res);
|
|
// })
|
|
let list = ['秋上新','纪梵希','雅诗兰黛','中秋','苹果爱普','基督教烧烤'];
|
|
this.hot_list = list;
|
|
},
|
|
// 激活关键词搜索
|
|
activeKeyWord(value){
|
|
this.value = value;
|
|
this.customClick(value);
|
|
},
|
|
// 用户按下搜索按钮，或回车键
|
|
search(value){
|
|
this.customClick(value);
|
|
},
|
|
// 点击了搜索按钮
|
|
customClick(value){
|
|
this.updateHistory(value).then(() => {
|
|
this.$url('/pages/shop/searchList?value='+ value);
|
|
})
|
|
},
|
|
// 更新搜索历史列表
|
|
updateHistory(value){
|
|
return new Promise((resolve, reject) => {
|
|
let history_list = [...this.history_list];
|
|
if(history_list.includes(value)){
|
|
history_list.map((item, index) => {
|
|
if(item == value){
|
|
this.history_list.splice(index, 1); // 删除掉已经存在的key值
|
|
}
|
|
})
|
|
this.history_list.unshift(value); // 向头部追加新的key值
|
|
if(this.history_list.length > this.max_history_count){
|
|
this.history_list.pop(); // 如果历史记录超出预设最大范围，将最尾key值移除
|
|
}
|
|
}else{
|
|
this.history_list.unshift(value);
|
|
if(this.history_list.length > this.max_history_count){
|
|
this.history_list.pop();
|
|
}
|
|
}
|
|
resolve(value); // 操作完成，回调成功
|
|
})
|
|
},
|
|
// 清空搜索记录
|
|
remove(){
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '确定清空搜索历史吗？',
|
|
confirmColor: '#15716E',
|
|
success: result => {
|
|
if(result.confirm){
|
|
this.history_list = [];
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.head{
|
|
padding: 30rpx 32rpx;
|
|
}
|
|
.content{
|
|
padding: 20rpx 32rpx;
|
|
.title{
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
.list{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 20rpx 0 40rpx;
|
|
.item{
|
|
padding: 4rpx 20rpx;
|
|
background-color: #15716E;
|
|
color: #FFFFFF;
|
|
border-radius: 34rpx;
|
|
font-size: 28rpx;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.item-2{
|
|
background-color: #F4F8F8;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
</style>
|