137 lines
3.2 KiB
Vue
137 lines
3.2 KiB
Vue
<template>
|
|
<view class="search-wrap">
|
|
|
|
<!-- 搜索框 -->
|
|
<view class="index-search-box d-b-c" id="searchBox">
|
|
<view class="index-search t-c flex-1">
|
|
<span class="icon iconfont icon-sousuo"></span>
|
|
<input type="text" v-model="form.keyWord" class="flex-1 ml10 f30 gray3" value="" placeholder-class="f24 gray6"
|
|
placeholder="输入你要的商品" confirm-type="search" @confirm="search()"/>
|
|
</view>
|
|
<!--<button class="btn ml10" @click="search()" type="default">搜索</button>-->
|
|
</view>
|
|
|
|
<view class="p-0-20 bg-white">
|
|
<view class="group-hd">
|
|
<view class="left"><text class="min-name">最近搜索</text></view>
|
|
<view class="right">
|
|
<span class="icon iconfont icon-lajitong" @click='clearStorage'></span>
|
|
</view>
|
|
</view>
|
|
<view class="before-search">
|
|
<text class="item" v-for="(item,index) in arr" :key="index" @click="search(arr[index])">{{arr[index]}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
|
|
},
|
|
arr:[],
|
|
}
|
|
},
|
|
mounted() {
|
|
/*获取缓存数据*/
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
/*获取缓存里的搜索历史*/
|
|
getData(){
|
|
let self=this;
|
|
/*获取搜索记录*/
|
|
uni.getStorage({
|
|
key: 'search_list',
|
|
success: function (res) {
|
|
if(res!=null&&res.data!=null){
|
|
self.arr = res.data;
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
/*搜索*/
|
|
search(str) {
|
|
let self = this;
|
|
let search=null;
|
|
if(str!=null){
|
|
search=str;
|
|
}else{
|
|
search= this.form.keyWord;
|
|
let arrs=this.arr;
|
|
if(typeof search != "undefined" && search!=null && search!=''){
|
|
arrs.push(search);
|
|
}else{
|
|
uni.showToast({
|
|
title: '请输入搜索的关键字',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return false;
|
|
}
|
|
/*设置搜索记录*/
|
|
uni.setStorage({
|
|
key: 'search_list',
|
|
data: arrs,
|
|
success: function () {
|
|
console.log('success');
|
|
}
|
|
});
|
|
}
|
|
let category_id = 0;
|
|
let sortType = 'all';
|
|
|
|
self.gotoPage('/pages/product/list/list?search=' + search + '&category_id=' + category_id + '&sortType=' + sortType);
|
|
|
|
},
|
|
/*清楚缓存*/
|
|
clearStorage(){
|
|
let self=this;
|
|
uni.removeStorage({
|
|
key: 'search_list',
|
|
success: function (res) {
|
|
self.arr=[];
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.search-wrap .index-search-box .search-box {
|
|
padding: 0 20rpx;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
background: #f7f7f7;
|
|
border-radius: 50rpx;
|
|
overflow: hidden;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
box-sizing: border-box;
|
|
}
|
|
.search-wrap .index-search-box button{ height: 78rpx; line-height: 78rpx; border:solid 1rpx #CCCCCC; color:#333333; background: #FFFFFF;}
|
|
|
|
.before-search {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-flow: wrap;
|
|
}
|
|
|
|
.before-search .item {
|
|
padding: 16rpx;
|
|
margin-right: 16rpx;
|
|
margin-bottom: 16rpx;
|
|
border-radius: 8rpx;
|
|
color: #686868;
|
|
background: #f0f2f5;
|
|
font-size: 24rpx;
|
|
}
|
|
</style>
|