点我扫二维码，查看demo
# SearchContainer 智能搜索业务组件模板
# 注意
使用当前代码时，请根据需要引入search tag tab dailog rate empty组件。
# 代码演示
当前业务组件大致分为搜索前、输入搜索产生联想搜索词、搜索后无结果、搜索后无结果但是有推荐、产生结果几个模块。以下根据上述阐述进行代码展示。
# 搜索主界面
<template>
<div class="demo-list">
<mx-search-bar
v-model="search"
round
theme="gray"
key="gray"
placeholder="搜索食谱"
show-suffix
@change="getSearchValue"
>
</mx-search-bar>
<div
class="related-search-list"
refs="related"
v-if="relatedTermsList.length > 0 && search"
>
<template v-for="item of relatedTermsList">
<div
class="related-terms"
:key="item.terms"
@click="updateSearch(item.terms)"
>
<p v-html="item.showTerms"></p>
</div>
</template>
</div>
<no-search v-if="!search" @getCurrentValue="updateSearch" />
<search-result v-if="enterFlag && !nullFlag" :keyword="search" />
<div v-if="nullFlag && search">
<mx-empty
v-if="!hasRecomment"
:img="require('../../assets/image/img_empty@3x.png')"
:desc="description"
/>
<div v-else class="recomment">
<p class="empty-tip">没有找到"{{ search }}"相关食谱</p>
<search-recomment />
</div>
</div>
</div>
</template>
<script>
import NoSearch from './component/no-search.vue'
import searchRecomment from './component/search-recomment'
import searchResult from './component/search-result'
export default {
components: {
NoSearch,
searchRecomment,
searchResult,
},
data() {
return {
enterFlag: false,
search: '',
relatedTermsList: [],
dataList: ['红烧肉', '太难了', '红烧'],
timeout: null,
tagList: [],
termsList: [
{
terms: '空调知识',
showTerms: '',
},
{
terms: '空调漏水',
showTerms: '',
},
{
terms: '空调维修',
showTerms: '',
},
{
terms: '空调组件保养',
showTerms: '',
},
{
terms:
'模拟很多字模拟很多字空调模拟很多字模拟很多字模拟空调很多字模拟很多字模拟很多字模拟很多字模拟很多字模拟很多字模拟很多字模拟很多字模拟很多字模拟很多字',
showTerms: '',
},
],
nullFlag: false,
description: '',
hasRecomment: false,
}
},
methods: {
// 监听用户按下enter键进行搜索
onSearch(ev) {
let event = ev || event
if (event.keyCode === 13) {
this.enterFlag = true
if (this.tagList.length > 10) {
this.tagList.shift()
}
this.tagList.push(this.search)
localStorage.setItem('tagList', JSON.stringify(this.tagList))
this.dataList.forEach((item) => {
if (item.indexOf(this.search) !== -1) {
this.nullFlag = false
} else {
this.nullFlag = true
this.description = `抱歉 没有找到“${this.search}”相关的内容`
if (this.search === '美食') {
this.hasRecomment = true
} else {
false
}
}
})
}
},
// 防抖 防止输入事件高频触发
debounce(fn, wait) {
return () => {
if (this.timeout !== null) {
clearTimeout(this.timeout)
}
this.timeout = setTimeout(() => {
fn()
}, wait)
}
},
handleRelatedTerms() {
const that = this
let tempList = that.termsList.filter((item) => {
return item.terms.indexOf(that.search) != -1
})
if (tempList.length > 0) {
that.relatedTermsList = tempList.map((item) => {
let keyword = `<span class="keyword-bg">${this.search}</span>`
item.showTerms = item.terms.replace(
new RegExp(this.search, 'g'),
keyword
)
return item
})
}
},
getSearchValue(val) {
this.relatedTermsList = []
if (val) {
this.debounce(this.handleRelatedTerms, 1000)()
} else {
this.hasRecomment = false
this.nullFlag = false
this.enterFlag = false
}
},
updateSearch(item) {
this.search = item
this.relatedTermsList = []
},
},
created() {
document.addEventListener('keyup', this.onSearch, false)
},
}
</script>
<style lang="scss">
.demo-list{
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
.demo-panel{
padding-left: 16px;
padding-right: 16px;
}
img {
height: 100%;
border-radius: 8px;
}
.keyword-bg{
color: #FF8F00;
}
.empty-tip{
font-size: 14px;
color: #8A8A8F;
letter-spacing: 0;
text-align: center;
line-height: 20px;
font-weight: 400;
}
.related-search-list{
padding-left: 16px;
font-size: 14px;
color: #000000;
.related-terms{
border-bottom: 1px solid #f2f2f2;
font-weight: 400;
padding: 19px 16px 19px 0;
p {
padding: 0;
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
}
}
}
</style>
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
# 搜索前
搜索前对应主界面中引入的主界面名称为 NoSearch
<template>
<div>
<div class="demo-panel no-search">
<div class="history" ref="historySearch">
<div class="history-tab">
<h5 class="classify">历史搜索</h5>
<mx-icon
name="icon_scene_kitchen"
size="18"
color=""
@click="showDialog = true"
></mx-icon>
</div>
<div class="tag-list" @click="getHotSearch">
<template v-for="(item, index) of tagList">
<mx-tag
class="tag-gutter"
color="#F6F6F6"
text-color="#666666"
:key="index"
>{{ item }}</mx-tag
>
</template>
</div>
</div>
<div class="hot">
<h5 class="classify">热门搜索</h5>
<div class="hot-list">
<div class="hot-list-left">
<template v-for="(item, index) of hotList.slice(0, 5)">
<div
class="host-list-item"
:key="index + 1 + item"
@click="getHotSearch"
>
<span
class="circle circle-yellow"
:class="{ 'circle-gray': index > 2 }"
>{{ index + 1 }}</span
>
<span>{{ item }}</span>
</div>
</template>
</div>
<div class="hot-list-right">
<template v-for="(item, index) of hotList.slice(5, hotList.length)">
<div
class="host-list-item"
:key="index + 5 + item"
@click="getHotSearch"
>
<span class="circle circle-gray">{{ index + 5 }}</span>
<span>{{ item }}</span>
</div>
</template>
</div>
</div>
</div>
</div>
<mx-dialog
:show="showDialog"
type="alert"
title="确定删除全部历史搜索"
:buttons="['取消', '删除']"
@button-click="exectOption"
/>
</div>
</template>
<script>
export default {
data() {
return {
showDialog: false,
}
},
computed: {
tagList() {
if (localStorage.getItem('tagList')) {
return JSON.parse(localStorage.getItem('tagList'))
}
return []
},
},
props: {
hotList: {
type: Array,
default: () => {
return [
'蛋挞',
'面包',
'破壁机',
'牛肉',
'番茄炒蛋',
'红烧茄子',
'米饭',
'可乐鸡翅',
'南瓜饼',
'泡芙',
]
},
},
},
methods: {
greplaceSearch(value) {
console.log(value)
},
exectOption(item) {
if (item.text === '删除') {
localStorage.setItem('tagList', '')
this.$refs.historySearch.remove()
}
this.showDialog = false
},
getHotSearch(event) {
this.$emit('getCurrentValue', event.target.innerText)
},
},
}
</script>
<style lang="scss" scoped>
.demo-panel{
padding-left: 16px;
padding-right: 16px;
}
.classify{
font-size: 15px;
padding: 0;
}
.history-tab{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
margin-bottom: 12px;
}
.tag-list{
.tag-gutter {
margin:4px 8px 4px 0;
}
}
.hot{
.classify {
margin-top: 32px;
margin-bottom: 16px;
}
.hot-list {
display: flex;
flex-direction: row;
width: 100%;
color: #666666;
font-size: 14px;
margin-top: 10px;
.hot-list-left{
flex-grow: 1;
}
.hot-list-right{
flex-grow: 1;
}
.host-list-item {
margin-bottom: 20px;
}
.circle{
margin-right: 8px;
width: 15px;
height: 15px;
border-radius: 15px;
color: #fff;
display: inline-block;
line-height: 15px;
text-align: center;
font-size: 9px;
}
.circle-yellow{
background: #FFAA10;
}
.circle-gray{
background: #BBBBBB;
}
}
}
</style>
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
# 搜索后无结果,但是存在推荐
在搜索框中输入搜索关键词时，搜索结果为空，但是存在推荐。对应主界面的组件为: searchRecomment。
<template>
<div>
<div class="hot-recipes">
<h4>热门食谱</h4>
<div class="hot-recipes-list">
<template v-for="item of 4">
<div class="hot-recipes-item" :key="item">
<div>
<div class="hot-recipes-img">
<img
src="../../../assets/image/example-bg.jpg"
style="width: 100%"
/>
<mx-tag class="tag-bg">抹茶蛋糕</mx-tag>
</div>
</div>
<div class="hot-recipes-info">
<h6>抹茶蛋糕</h6>
<p>20分钟<span>|</span> 简单<span>|</span>300打卡</p>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
img {
height: 100%;
border-radius: 8px;
}
.tag-bg{
position: absolute;
z-index: 2;
background: rgba(0,0,0,0.5);
margin: 4px;
right: 0;
}
.hot-recipes{
h4 {
padding-left:16px;
padding-right: 16px;
}
.hot-recipes-list {
padding-left: 9px;
padding-right: 8px;
.hot-recipes-item{
margin-right: 6px;
margin-left: 6px;
height: 188px;
width: 167px;
display: inline-block;
box-sizing: border-box;
.hot-recipes-img{
height: 125px;
border-radius: 8px;
position: relative;
z-index: 1;
img {
position: absolute;
z-index: 1;
}
}
.hot-recipes-info{
padding-top: 12px;
padding-bottom: 13px;
padding-left: 8px;
h6 {
font-size: 14px;
}
p {
padding-top: 4px;
margin: 0;
padding-left: 0;
padding-right: 0;
font-size: 10px;
color: #8A8A8F
}
}
}
}
}
</style>
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
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
# 搜索产生结果
对应主界面引入的组件名称为：searchResult。
<template>
<div>
<mx-tab v-model="currentTitle">
<mx-tab-pane v-for="item of titleList" :title="item" :key="item">
<div class="demo-panel">
<div class="delicacy-container" v-if="currentTitle === 2">
<div class="delicacy-list">
<template v-for="(item, index) of delicacyList">
<div class="delicacy-item" :key="index + item.title">
<div>
<div class="delicacy-img">
<img :src="item.imgUrl" />
<mx-tag class="tag-bg" v-if="index === 1 || index === 0"
>烤箱</mx-tag
>
</div>
</div>
<div class="delicacy-info">
<h6
class="more-line"
v-html="matchKeyword(item.title)"
></h6>
<div v-if="item.rateValue">
<mx-rate
:size="16"
v-model="rateValue"
readonly
></mx-rate>
<span class="rate"> {{ rateValue }}</span>
</div>
<div class="sender-info" v-if="item.avator">
<img
class="avator"
src="../../../assets/image/pexels-sena.jpg"
/>
<span>{{ item.avator }}</span>
</div>
</div>
</div>
</template>
</div>
</div>
<div class="article-container" v-else>
<div class="article-list">
<div class="article-item" v-for="i in 5" :key="i + 'article'">
<div class="article-info">
<div class="title">
…生活在21世纪却摊上这种没有安全感的生活，我太难了！
</div>
<p>
<span>广东顺德空调广东顺德空</span>
<span>284浏览</span>
</p>
</div>
<div class="article-img">
<img src="../../../assets/image/pexels-lisa.jpg" />
</div>
</div>
</div>
</div>
</div>
</mx-tab-pane>
</mx-tab>
</div>
</template>
<script>
export default {
data() {
return {
currentTitle: 0,
rateValue: 5.0,
delicacyList: [
{
title: '红烧肉',
rateValue: 5.0,
avator: '广东雨神本神',
imgUrl: require('../../../assets/image/pexels-sena.jpg'),
},
{
title: '红烧肉',
rateValue: 5.0,
imgUrl: require('../../../assets/image/pexels-sena.jpg'),
},
{
title: '红烧肉',
avator: '广东雨神本神',
imgUrl: require('../../../assets/image/example-bg.jpg'),
},
{
title: '红烧肉苏东坡很喜欢吃，很多文字的情况下，下雨了',
rateValue: '',
avator: '广东雨神本神',
imgUrl: require('../../../assets/image/pexels-lisa.jpg'),
},
{
title: '红烧肉红烧肉苏东坡很喜欢吃，很多文字的情况下',
rateValue: '',
avator: '',
imgUrl: require('../../../assets/image/pexels-sena.jpg'),
},
],
}
},
props: {
titleList: {
type: Array,
default: () => {
return ['综合', '文章', '食谱', '话题', '用户']
},
},
keyword: {
type: String,
default: '',
},
},
methods: {
matchKeyword(title) {
console.log(title)
if (title.indexOf(this.keyword) != 1) {
let tempKeyword = `<span class="keyword-bg">${this.keyword}</span>`
let newTitle = title.replace(new RegExp(this.keyword, 'g'), tempKeyword)
return newTitle
}
return title
},
},
}
</script>
<style lang="scss" scoped>
img {
height: 100%;
border-radius: 8px;
}
.keyword-bg{
color: #FF8F00;
}
.tag-bg{
position: absolute;
z-index: 2;
background: rgba(0,0,0,0.5);
margin: 4px;
right: 0;
}
.article-container{
.article-list{
padding-right: 16px;
.article-item {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 16px;
padding-bottom: 18px;
border-bottom: 0.5px solid #F2F2F2;
.article-img {
width: 110px;
height: 82px;
border-radius: 8px;
}
.title {
font-size: 16px;
color: #232323;
margin-bottom: 24px;
line-height: 22px;
}
p {
padding-bottom: 0;
padding-top: 0;
padding-left: 0;
font-size: 12px;
margin: 0;
color: #8A8A8F;
span {
padding-left: 8px;
}
}
}
}
}
.delicacy-container{
.delicacy-list{
margin-top:20px;
.delicacy-item{
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 16px;
.delicacy-img{
width: 156px;
height: 106px;
border-radius: 8px;
margin-right: 16px;
position:relative;
z-index: 1;
img{
position: absolute;
z-index: 2;
}
}
.delicacy-info{
.avator{
width: 27px;
height: 27px;
border-radius: 27px;
margin-right: 4px;
}
h6 {
font-size: 15px;
line-height: 22px;
margin-bottom: 8px;
}
.more-line{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.rate{
margin-left: 3px;
font-size: 14px;
}
.sender-info{
display: flex;
align-items: center;
margin-top: 8px;
padding: 0;
margin-bottom: 0;
font-size: 11px;
color:#8A8A8F
}
}
}
}
}
</style>
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237