194 lines
4.3 KiB
Vue
194 lines
4.3 KiB
Vue
<template>
|
|
<view v-if="isShow" @touchmove.stop.prevent="stopTouchMove">
|
|
<view class="search-wrap">
|
|
<!-- #ifdef H5-->
|
|
<view class="state_top"></view>
|
|
<!-- #endif -->
|
|
<view class="head_top" :style="'height:'+topBarTop()+'px;'"></view>
|
|
<!-- 搜索框 -->
|
|
<view class="index-search-box d-b-c" id="searchBox"
|
|
:style="topBarHeight() == 0 ? '': 'height:'+topBarHeight()+'px;padding-right: 200rpx'">
|
|
<view class="reg180" :style="topBarHeight() == 0 ? '': 'height:'+topBarHeight()+'px;'">
|
|
<text @click="closeSearch" class="icon iconfont icon-jiantou"></text>
|
|
</view>
|
|
<view class="index-search t-c flex-1" :style="topBarHeight() == 0 ? '': 'height:'+topBarHeight()+'px;'">
|
|
<text class="icon iconfont icon-sousuo"></text>
|
|
<input type="text" v-model="form.keyWord" class="flex-1 ml10 f30 gray3" value=""
|
|
placeholder-class="f24 gray6" placeholder="输入你要的商品" confirm-type="search" @confirm="search()" />
|
|
<!-- <text @click="closeSearch">取消</text> -->
|
|
</view>
|
|
</view>
|
|
<view class="p-0-20 bg-white">
|
|
<view class="group-hd">
|
|
<view class="left"><text class="min-name">最近搜索</text></view>
|
|
<view class="right">
|
|
<text class="icon iconfont icon-lajitong" @click='clearStorage'></text>
|
|
</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>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
|
|
},
|
|
arr: [],
|
|
}
|
|
},
|
|
mounted() {
|
|
/*获取缓存数据*/
|
|
this.getData();
|
|
},
|
|
props: ['isShow'],
|
|
methods: {
|
|
/*获取缓存里的搜索历史*/
|
|
getData() {
|
|
let self = this;
|
|
/*获取搜索记录*/
|
|
uni.getStorage({
|
|
key: 'search_list',
|
|
success: function(res) {
|
|
if (res != null && res.data != null) {
|
|
self.arr = res.data;
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
/* 禁止手动滑动 */
|
|
stopTouchMove() {
|
|
return true
|
|
},
|
|
/*搜索*/
|
|
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 = [];
|
|
}
|
|
});
|
|
},
|
|
closeSearch(){
|
|
this.$emit('close')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.search-wrap {
|
|
position: fixed;
|
|
z-index: 999;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.search-wrap .index-search-box .search-box {
|
|
padding: 0 20rpx;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
background: #F5F5F5;
|
|
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;
|
|
}
|
|
.search-wrap .index-search-box{
|
|
padding: 0 30rpx;
|
|
padding-bottom: 30rpx;
|
|
background-color: #F5F5F5;
|
|
}
|
|
.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;
|
|
}
|
|
.reg180 {
|
|
padding-left: 20rpx;
|
|
text-align: center;
|
|
transform: rotateY(180deg);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.reg180 .icon-jiantou {
|
|
color: #333333;
|
|
display: block;
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
font-size: 36rpx;
|
|
}
|
|
</style>
|