|
|
@@ -1,160 +1,195 @@
|
|
1
|
1
|
<template>
|
|
2
|
2
|
<div class="page">
|
|
3
|
3
|
<div class="search">
|
|
4
|
|
- <input class="search__input" type="text" :focus="true" v-model="keyword" @confirm="confirm" placeholder="搜索本店商品">
|
|
|
4
|
+ <input
|
|
|
5
|
+ class="search__input"
|
|
|
6
|
+ type="text"
|
|
|
7
|
+ :focus="true"
|
|
|
8
|
+ v-model="keyword"
|
|
|
9
|
+ @confirm="confirm"
|
|
|
10
|
+ placeholder="搜索本店商品"
|
|
|
11
|
+ />
|
|
5
|
12
|
<div class="search__cancel" @click="confirm">搜索</div>
|
|
6
|
13
|
</div>
|
|
7
|
14
|
<div class="keyword">
|
|
8
|
15
|
<div class="keyword__title">大家都在搜</div>
|
|
9
|
16
|
<ul class="list">
|
|
10
|
|
- <li class="list__item" v-for="(item, index) in keywordList" :key="index" @click="jumpList(item.keywords)">{{ item.keywords }}</li>
|
|
|
17
|
+ <li
|
|
|
18
|
+ class="list__item"
|
|
|
19
|
+ v-for="(item, index) in keywordList"
|
|
|
20
|
+ :key="index"
|
|
|
21
|
+ @click="jumpList(item.keywords)"
|
|
|
22
|
+ >
|
|
|
23
|
+ {{ item.keywords }}
|
|
|
24
|
+ </li>
|
|
11
|
25
|
</ul>
|
|
12
|
26
|
</div>
|
|
13
|
27
|
<div class="keyword" v-if="searchHistory.length">
|
|
14
|
28
|
<div class="keyword__title">历史搜索</div>
|
|
15
|
29
|
<ul class="list">
|
|
16
|
|
- <li class="list__item" v-for="(item, index) in searchHistory" :key="index" @click="jumpList(item)">{{ item }}</li>
|
|
|
30
|
+ <li
|
|
|
31
|
+ class="list__item"
|
|
|
32
|
+ v-for="(item, index) in searchHistory"
|
|
|
33
|
+ :key="index"
|
|
|
34
|
+ @click="jumpList(item)"
|
|
|
35
|
+ >
|
|
|
36
|
+ {{ item }}
|
|
|
37
|
+ </li>
|
|
17
|
38
|
</ul>
|
|
18
|
39
|
</div>
|
|
19
|
40
|
</div>
|
|
20
|
41
|
</template>
|
|
21
|
42
|
|
|
22
|
43
|
<script>
|
|
23
|
|
- export default {
|
|
24
|
|
- name: '',
|
|
25
|
|
-
|
|
26
|
|
- // 数据
|
|
27
|
|
- data() {
|
|
28
|
|
- return {
|
|
29
|
|
- keyword: '',
|
|
30
|
|
- keywordList: [],
|
|
31
|
|
- }
|
|
32
|
|
- },
|
|
33
|
|
-
|
|
34
|
|
- onShow() {
|
|
35
|
|
- const self = this
|
|
|
44
|
+export default {
|
|
|
45
|
+ name: "",
|
|
|
46
|
+
|
|
|
47
|
+ // 数据
|
|
|
48
|
+ data() {
|
|
|
49
|
+ return {
|
|
|
50
|
+ keyword: "",
|
|
|
51
|
+ keywordList: [],
|
|
|
52
|
+ curTab: "0",
|
|
|
53
|
+ };
|
|
|
54
|
+ },
|
|
|
55
|
+ onLoad(opts) {
|
|
|
56
|
+ if (opts.curTab) {
|
|
|
57
|
+ this.curTab = opts.curTab;
|
|
|
58
|
+ }
|
|
|
59
|
+ },
|
|
36
|
60
|
|
|
37
|
|
- // self.getlist()
|
|
38
|
|
- },
|
|
|
61
|
+ onShow() {
|
|
|
62
|
+ const self = this;
|
|
39
|
63
|
|
|
40
|
|
- // 函数
|
|
41
|
|
- methods: {
|
|
42
|
|
- // 获取热门搜索词
|
|
43
|
|
- getlist() {
|
|
44
|
|
- const self = this
|
|
|
64
|
+ // self.getlist()
|
|
|
65
|
+ },
|
|
45
|
66
|
|
|
46
|
|
- self.api.get('/Product/GetKeywordsList').then(res => {
|
|
47
|
|
- self.keywordList = res.data
|
|
48
|
|
- })
|
|
49
|
|
- },
|
|
|
67
|
+ // 函数
|
|
|
68
|
+ methods: {
|
|
|
69
|
+ // 获取热门搜索词
|
|
|
70
|
+ getlist() {
|
|
|
71
|
+ const self = this;
|
|
50
|
72
|
|
|
51
|
|
- // 搜索处理
|
|
52
|
|
- confirm() {
|
|
53
|
|
- const self = this
|
|
|
73
|
+ self.api.get("/Product/GetKeywordsList").then((res) => {
|
|
|
74
|
+ self.keywordList = res.data;
|
|
|
75
|
+ });
|
|
|
76
|
+ },
|
|
54
|
77
|
|
|
55
|
|
- if (self.keyword) {
|
|
56
|
|
- let list = self.fn.deepClone(self.searchHistory) || []
|
|
|
78
|
+ // 搜索处理
|
|
|
79
|
+ confirm() {
|
|
|
80
|
+ const self = this;
|
|
57
|
81
|
|
|
58
|
|
- list.forEach((item, index) => {
|
|
59
|
|
- if (item === self.keyword) {
|
|
60
|
|
- list.splice(index, 1)
|
|
61
|
|
- }
|
|
62
|
|
- })
|
|
|
82
|
+ if (self.keyword) {
|
|
|
83
|
+ let list = self.fn.deepClone(self.searchHistory) || [];
|
|
63
|
84
|
|
|
64
|
|
- list.unshift(self.keyword)
|
|
65
|
|
- list.lenght = 10
|
|
|
85
|
+ list.forEach((item, index) => {
|
|
|
86
|
+ if (item === self.keyword) {
|
|
|
87
|
+ list.splice(index, 1);
|
|
|
88
|
+ }
|
|
|
89
|
+ });
|
|
66
|
90
|
|
|
67
|
|
- self.$store.commit('common/update', {
|
|
68
|
|
- searchHistory: list,
|
|
69
|
|
- })
|
|
70
|
|
- }
|
|
|
91
|
+ list.unshift(self.keyword);
|
|
|
92
|
+ list.lenght = 10;
|
|
71
|
93
|
|
|
72
|
|
- self.jumpList(self.keyword)
|
|
73
|
|
- },
|
|
|
94
|
+ self.$store.commit("common/update", {
|
|
|
95
|
+ searchHistory: list,
|
|
|
96
|
+ });
|
|
|
97
|
+ }
|
|
74
|
98
|
|
|
75
|
|
- // 跳转到商品列表
|
|
76
|
|
- jumpList(keyword) {
|
|
77
|
|
- const self = this
|
|
|
99
|
+ self.jumpList(self.keyword);
|
|
|
100
|
+ },
|
|
78
|
101
|
|
|
|
102
|
+ // 跳转到商品列表
|
|
|
103
|
+ jumpList(keyword) {
|
|
|
104
|
+ const self = this;
|
|
|
105
|
+ if (this.curTab == "0") {
|
|
79
|
106
|
self.router.push({
|
|
80
|
|
- path: '/pages/goods/list',
|
|
|
107
|
+ path: "/pages/goods/list",
|
|
81
|
108
|
query: {
|
|
82
|
109
|
title: keyword,
|
|
83
|
110
|
},
|
|
84
|
|
- })
|
|
85
|
|
- },
|
|
|
111
|
+ });
|
|
|
112
|
+ } else {
|
|
|
113
|
+ self.router.push({
|
|
|
114
|
+ path: "/pages/goods/list2",
|
|
|
115
|
+ query: {
|
|
|
116
|
+ title: keyword,
|
|
|
117
|
+ },
|
|
|
118
|
+ });
|
|
|
119
|
+ }
|
|
86
|
120
|
},
|
|
|
121
|
+ },
|
|
87
|
122
|
|
|
88
|
|
- // 数据计算
|
|
89
|
|
- computed: {
|
|
90
|
|
- searchHistory() {
|
|
91
|
|
- return this.$store.state.common.searchHistory
|
|
92
|
|
- },
|
|
|
123
|
+ // 数据计算
|
|
|
124
|
+ computed: {
|
|
|
125
|
+ searchHistory() {
|
|
|
126
|
+ return this.$store.state.common.searchHistory;
|
|
93
|
127
|
},
|
|
|
128
|
+ },
|
|
94
|
129
|
|
|
95
|
|
- // 数据监听
|
|
96
|
|
- watch: {},
|
|
97
|
|
- }
|
|
|
130
|
+ // 数据监听
|
|
|
131
|
+ watch: {},
|
|
|
132
|
+};
|
|
98
|
133
|
</script>
|
|
99
|
134
|
|
|
100
|
135
|
<style>
|
|
101
|
|
- page {
|
|
102
|
|
- background-color: #fff;
|
|
103
|
|
- }
|
|
|
136
|
+page {
|
|
|
137
|
+ background-color: #fff;
|
|
|
138
|
+}
|
|
104
|
139
|
</style>
|
|
105
|
140
|
|
|
106
|
141
|
<style lang="scss" scoped>
|
|
107
|
|
- .search {
|
|
108
|
|
- display: flex;
|
|
109
|
|
- justify-content: space-between;
|
|
110
|
|
- align-items: center;
|
|
111
|
|
- width: 100%;
|
|
112
|
|
- height: px(128);
|
|
113
|
|
- padding: 0 px(45) px(4);
|
|
114
|
|
- background-color: #efefef;
|
|
115
|
|
-
|
|
116
|
|
- &__input {
|
|
117
|
|
- width: px(820);
|
|
118
|
|
- height: px(86);
|
|
119
|
|
- padding: 0 px(24);
|
|
120
|
|
- font-size: px(36);
|
|
121
|
|
- color: #000;
|
|
122
|
|
- background-color: #fff;
|
|
123
|
|
- border-radius: px(8);
|
|
124
|
|
- }
|
|
|
142
|
+.search {
|
|
|
143
|
+ display: flex;
|
|
|
144
|
+ justify-content: space-between;
|
|
|
145
|
+ align-items: center;
|
|
|
146
|
+ width: 100%;
|
|
|
147
|
+ height: px(128);
|
|
|
148
|
+ padding: 0 px(45) px(4);
|
|
|
149
|
+ background-color: #efefef;
|
|
|
150
|
+
|
|
|
151
|
+ &__input {
|
|
|
152
|
+ width: px(820);
|
|
|
153
|
+ height: px(86);
|
|
|
154
|
+ padding: 0 px(24);
|
|
|
155
|
+ font-size: px(36);
|
|
|
156
|
+ color: #000;
|
|
|
157
|
+ background-color: #fff;
|
|
|
158
|
+ border-radius: px(8);
|
|
|
159
|
+ }
|
|
125
|
160
|
|
|
126
|
|
- &__cancel {
|
|
127
|
|
- font-size: px(36);
|
|
128
|
|
- color: #000;
|
|
129
|
|
- }
|
|
|
161
|
+ &__cancel {
|
|
|
162
|
+ font-size: px(36);
|
|
|
163
|
+ color: #000;
|
|
130
|
164
|
}
|
|
|
165
|
+}
|
|
131
|
166
|
|
|
132
|
|
- .keyword {
|
|
133
|
|
- margin-top: px(40);
|
|
|
167
|
+.keyword {
|
|
|
168
|
+ margin-top: px(40);
|
|
134
|
169
|
|
|
135
|
|
- &__title {
|
|
136
|
|
- padding: 0 px(45);
|
|
137
|
|
- font-size: px(34);
|
|
138
|
|
- color: #9d9d9d;
|
|
139
|
|
- }
|
|
|
170
|
+ &__title {
|
|
|
171
|
+ padding: 0 px(45);
|
|
|
172
|
+ font-size: px(34);
|
|
|
173
|
+ color: #9d9d9d;
|
|
140
|
174
|
}
|
|
|
175
|
+}
|
|
|
176
|
+
|
|
|
177
|
+.list {
|
|
|
178
|
+ display: flex;
|
|
|
179
|
+ flex-wrap: wrap;
|
|
|
180
|
+ padding: px(35) px(15) 0 px(45);
|
|
141
|
181
|
|
|
142
|
|
- .list {
|
|
|
182
|
+ &__item {
|
|
143
|
183
|
display: flex;
|
|
144
|
|
- flex-wrap: wrap;
|
|
145
|
|
- padding: px(35) px(15) 0 px(45);
|
|
146
|
|
-
|
|
147
|
|
- &__item {
|
|
148
|
|
- display: flex;
|
|
149
|
|
- justify-content: center;
|
|
150
|
|
- align-items: center;
|
|
151
|
|
- height: px(70);
|
|
152
|
|
- padding: 0 px(30);
|
|
153
|
|
- margin: 0 px(30) px(30) 0;
|
|
154
|
|
- font-size: px(28);
|
|
155
|
|
- color: #000;
|
|
156
|
|
- background-color: #efefef;
|
|
157
|
|
- border-radius: px(8);
|
|
158
|
|
- }
|
|
|
184
|
+ justify-content: center;
|
|
|
185
|
+ align-items: center;
|
|
|
186
|
+ height: px(70);
|
|
|
187
|
+ padding: 0 px(30);
|
|
|
188
|
+ margin: 0 px(30) px(30) 0;
|
|
|
189
|
+ font-size: px(28);
|
|
|
190
|
+ color: #000;
|
|
|
191
|
+ background-color: #efefef;
|
|
|
192
|
+ border-radius: px(8);
|
|
159
|
193
|
}
|
|
|
194
|
+}
|
|
160
|
195
|
</style>
|
