search.vue
2.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
<view class="page_box">
<!-- 搜索框 -->
<view class="head_box">
<u-search v-model="searchVal" margin="30rpx" placeholder="搜索商品" height="64" @search="onSearch" @custom="onSearch" @clear="clearSearch"></u-search>
</view>
<view class="content_box">
<!-- 搜索历史 -->
<view class="search-history" v-if="historyTag.length">
<view class="title-box u-flex u-row-between u-m-b-40">
<view class="title">搜索历史</view>
<button class="u-reset-button clear-history-btn" @tap="showModal = true">清除搜索历史</button>
</view>
<view class="content u-flex u-col-center u-row-left u-flex-wrap">
<button class="item u-reset-button u-m-b-20 u-m-r-20 u-ellipsis-1" @tap="onSearch(item)" v-for="(item, index) in historyTag" :key="index">{{ item }}</button>
</view>
</view>
</view>
<!-- modal -->
<u-modal
ref="uModal"
v-model="showModal"
:show-cancel-button="true"
confirm-color="#e9b461"
cancel-color="#666666"
@confirm="clearSearchHistory"
confirm-text="清除"
cancel-text="取消"
content="是否清除历史搜索记录？"
title="提示"
></u-modal>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
searchVal: '',
historyTag: [],
showModal: false
};
},
computed: {},
onShow() {
this.historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
},
methods: {
// 搜索
onSearch(e) {
if (e && !this.historyTag.includes(e)) {
let searchHistoryArr = JSON.stringify(this.getArr(this.historyTag, e));
uni.setStorageSync('searchHistoryArr', searchHistoryArr);
}
this.$Router.push(`/pages/goods/list?keywords=${e}`);
this.searchVal = '';
},
// 清除输入框
clearSearch() {
this.searchVal = '';
},
// 队列
getArr(list, item) {
let arr = list;
let length = 10; //队列长度
arr.length < length ? arr.unshift(item) : arr.pop();
return arr;
},
// 清除历史记录
clearSearchHistory() {
this.historyTag = [];
uni.removeStorageSync('searchHistoryArr');
}
}
};
</script>
<style lang="scss">
.page_box {
background-color: #fff;
}
.search-history {
padding: 30rpx;
.title-box {
.title {
font-size: 30rpx;
font-weight: bold;
color: #333333;
}
.clear-history-btn {
font-size: 28rpx;
font-weight: 500;
color: #999999;
}
}
.content {
width: 100%;
.item {
padding: 0 20rpx;
line-height: 60rpx;
background: #f5f6f8;
border-radius: 30rpx;
font-size: 28rpx;
font-weight: 500;
color: #333333;
max-width: 690rpx;
}
}
}
</style>