4b045f7c
 刘淇
江阴初始化项目
|
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
|
<template>
<view class="wrapper">
<view v-if="isHistory" class="history-box">
<view v-if="historyList.length > 0">
<view class="history-title">
<text>搜索历史</text>
<text class="uni-icon uni-icon-trash" @click="clearSearch"></text>
</view>
<view class="history-content">
<view class="history-item" v-for="(item, index) in historyList" :key="index">
{{ item.name }}
</view>
</view>
</view>
<view v-else class="no-data">您还没有历史记录</view>
</view>
<view v-else class="history-box">
<view v-if="historyList.length > 0" class="history-list-box">
<view
class="history-list-item"
v-for="(item, index) in historyList"
:key="index"
@click="listTap(item)"
>
<rich-text :nodes="item.nameNodes"></rich-text>
</view>
</view>
<view v-else class="no-data">没有搜索到相关内容</view>
</view>
</view>
</template>
<script>
import util from '@/components/amap-wx/js/util.js';
export default {
data() {
return {
historyList: [],
isHistory: true,
list: [],
flng: true,
timer: null
};
},
onLoad() {
// 本示例用的是高德 sdk ，请根据具体需求换成自己的服务器接口。
this.amapPlugin = util.mapInit();
this.historyList = uni.getStorageSync('search:history');
},
methods: {
/**
* 列表点击
*/
listTap(item) {
item = JSON.parse(JSON.stringify(item));
// 如果当前是历史搜索页面 ，那么点击不储存,直接 跳转
if (this.history) {
return;
} else {
this.isHistory = true;
// 去做一些相关搜索功能 ，这里直接返回到上一个页面
// 点击列表存储搜索数据
util.setHistory(item);
uni.navigateBack();
}
},
/**
* 清理历史搜索数据
*/
clearSearch() {
uni.showModal({
title: '提示',
content: '是否清理全部搜索历史？该操作不可逆。',
success: res => {
if (res.confirm) {
this.historyList = util.removeHistory();
}
}
});
},
/**
* 关键字搜索
* 调用高德地图关键字搜索api
*/
getInputtips(val) {
let _this = this;
this.amapPlugin.getInputtips({
keywords: val,
city: '北京',
success: data => {
let dataObj = data.tips;
// 处理返回数据文字高亮
dataObj.map(item => {
return util.dataHandle(item, val);
});
//成功回调
_this.historyList = dataObj;
},
fail: info => {
//失败回调
console.log(info);
}
});
}
},
/**
* 当 searchInput 输入时触发
*/
onNavigationBarSearchInputChanged(e) {
let text = e.text;
if (!text) {
this.isHistory = true;
this.historyList = [];
this.historyList = uni.getStorageSync('search:history');
return;
} else {
this.isHistory = false;
this.getInputtips(text);
}
},
/**
* 点击软键盘搜索按键触发
*/
onNavigationBarSearchInputConfirmed(e) {
let text = e.text;
if (!text) {
this.isHistory = true;
this.historyList = [];
this.historyList = uni.getStorageSync('search:history');
uni.showModal({
title: '提示',
content: '请输入内容。',
success: res => {
if (res.confirm) {
}
}
});
return;
} else {
uni.showModal({
title: '提示',
content: `您输入的内容为"${text}",如果点击确定,将记录到历史搜索,并返回.如果取消不做操作`,
success: res => {
if (res.confirm) {
util.setHistory(text);
uni.navigateBack();
}
}
});
}
},
/**
* 点击导航栏 buttons 时触发
*/
onNavigationBarButtonTap() {
uni.showModal({
title: '提示',
content: '点击确定，修改输入框的内容为abc',
success: res => {
if (res.confirm) {
const currentWebview = this.$mp.page.$getAppWebview();
currentWebview.setTitleNViewSearchInputText("abc");
}
}
});
}
};
</script>
<style>
.history-title {
display: flex;
justify-content: space-between;
padding: 20rpx 30rpx;
padding-bottom: 0;
font-size: 34rpx;
color: #333;
}
.history-title .uni-icon {
font-size: 40rpx;
}
.history-content {
display: flex;
flex-wrap: wrap;
padding: 15rpx;
}
.history-item {
padding: 4rpx 35rpx;
border: 1px #f1f1f1 solid;
background: #fff;
border-radius: 50rpx;
margin: 12rpx 10rpx;
color: #999;
}
.history-list-box {
/* margin: 10rpx 0; */
}
.history-list-item {
padding: 30rpx 0;
margin-left: 30rpx;
border-bottom: 1px #EEEEEE solid;
font-size: 28rpx;
}
.no-data {
text-align: center;
color: #999;
margin: 100rpx;
}
</style>
|
