search.js
3.36 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
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
import request from '../../utils/request'
let isSend = false; // 函数节流使用
Page({
/**
* 页面的初始数据
*/
data: {
placeholderContent: '', // placeholder的内容
hotList: [], // 热搜榜数据
searchContent: '', // 用户输入的表单项数据
searchList: [], // 关键字模糊匹配的数据
historyList: [], // 搜索历史记录
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取初始化数据
this.getInitData();
// 获取历史记录
this.getSearchHistory();
},
// 获取初始化的数据
async getInitData(){
let placeholderData = await request('/search/default');
let hotListData = await request('/search/hot/detail');
this.setData({
placeholderContent: placeholderData.data.showKeyword,
hotList: hotListData.data
})
},
// 获取本地历史记录的功能函数
getSearchHistory(){
let historyList = wx.getStorageSync('searchHistory');
if(historyList){
this.setData({
historyList
})
}
},
// 表单项内容发生改变的回调
handleInputChange(event){
// console.log(event);
// 更新searchContent的状态数据
this.setData({
searchContent: event.detail.value.trim()
})
if(isSend){
return
}
isSend = true;
this.getSearchList();
// 函数节流
setTimeout( () => {
isSend = false;
}, 300)
},
// 获取搜索数据的功能函数
async getSearchList(){
if(!this.data.searchContent){
this.setData({
searchList: []
})
return;
}
let {searchContent, historyList} = this.data;
// 发请求获取关键字模糊匹配数据
let searchListData = await request('/search', {keywords: searchContent, limit: 10});
this.setData({
searchList: searchListData.result.songs
})
// 将搜索的关键字添加到搜索历史记录中
if(historyList.indexOf(searchContent) !== -1){
historyList.splice(historyList.indexOf(searchContent), 1)
}
historyList.unshift(searchContent);
this.setData({
historyList
})
wx.setStorageSync('searchHistory', historyList)
},
// 清空搜索内容
clearSearchContent(){
this.setData({
searchContent: '',
searchList: []
})
},
// 删除搜索历史记录
deleteSearchHistory(){
wx.showModal({
content: '确认删除吗?',
success: (res) => {
if(res.confirm){
// 清空data中historyList
this.setData({
historyList: []
})
// 移除本地的历史记录缓存
wx.removeStorageSync('searchHistory');
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})