当点击查询之后,显示查询后的数据,同时清空输入框中的文字,求指教,如图:
代码:
<form bindsubmit="formSubmit">
<view class="search-input-group">
<view class="input-group">
<input class="search-input" placeholder="出发地" value="{{startPoint}}" bindinput="onStartPointEvent" />
<image class="thumbnail" src="../../images/return.png" />
<input class="search-input" placeholder="终点" value="{{goal}}" bindinput="onGoalEvent" />
</view>
<button class="search-button" size="mini" formType="submit">查询</button>
</view>
</form>
js代码
page
/**
* 页面的初始数据
*/
data: {
hasmore: true,
nomore: false,
wehicles: [],
startPoint: [],
goal: [],
isQuerying: false,
},
/**
* 获取起点输入信息
*/
onStartPointEvent(event) {
const that = this;
const startPoint = event.detail.value
console.log('起点', startPoint);
that.setData({
startPoint: startPoint
})
},
/**
* 获取终点输入信息
*/
onGoalEvent(event) {
const that = this;
const goal = event.detail.value
console.log('终点', goal);
that.setData({
goal: goal
})
},
/**
* 按条件查询数据
*/
formSubmit(event) {
console.log(event);
const that = this;
that.setData({
isQuerying: true
})
let list = db.collection("wehicle").where({
startPoint: that.data.startPoint,
goal: that.data.goal,
});
if (event > 0) {
list = list.skip(event);
}
list.limit(5).orderBy("create_time", "desc").get().then(res => {
console.log(res);
const wehicles = res.data;
let nomore = true;
let hasmore = true
if (wehicles.length == 0) {
hasmore = false
} else {
nomore = false
}
let newWehicles = [];
if (event > 0) {
newWehicles = that.data.wehicles.concat(wehicles);
} else {
newWehicles = wehicles;
}
newWehicles.forEach((wehicle, index) => {
wehicle.create_time = wehicle.create_time.toString();
})
that.setData({
wehicles: newWehicles,
hasmore: hasmore,
nomore: nomore,
})
});
}