search() { if (this.inputValue == '') { uni.showToast({ title: '搜索内容不能为空', icon: 'none' }); } else { let params = { paramsName: this.inputValue } // 商品查询 this.$u.api.findFoodstuffList(params).then(res => { if (res.list.length > 0) { this.goodsList = res.list } else { this.goodsList = [] } }) this.$u.api.findComboList(params).then(res => { if (res.list.length > 0) { this.comboList = res.list } else { this.comboList = [] } }) // 拼接(全部) this.dataList = this.goodsList.concat(this.comboList); if(this.dataList.length==""){ uni.showToast({ icon: 'none', title: '没有搜到哟,换个词试试' }) } // 搜索词列表 if (!this.searchHistoryList.includes(this.inputValue)) { this.searchHistoryList.unshift(this.inputValue);//给数组的开头添加元素, uni.setStorage({ key: 'searchList', data: JSON.stringify(this.searchHistoryList) }); } else { //有搜索记录,删除之前的旧记录,将新搜索值重新push到数组首位 let i = this.searchHistoryList.indexOf(this.inputValue); this.searchHistoryList.splice(i, 1); this.searchHistoryList.unshift(this.inputValue); uni.setStorage({ key: 'searchList', data: JSON.stringify(this.searchHistoryList) }); } } },
时间: 2023-06-06 18:07:11 浏览: 33
这是一个关于搜索的代码,当输入框为空时会弹出提示信息,如果有输入则会通过商品查询和套餐查询接口来搜索相关的商品和套餐。搜索结果会被拼接到一个数据列表中,如果搜索结果为空则会弹出相应的提示信息。同时,如果搜索历史列表中不包含搜索词,则会将搜索词添加到数组的开头,如果已经存在,则会将旧记录删除并将新搜索值重新添加到数组的首位。
相关问题
优化这段代码 search() { if (this.inputValue == '') { uni.showToast({ title: '搜索内容不能为空', icon: 'none' }); } else { let params = { paramsName: this.inputValue } // 商品查询 this.$u.api.findFoodstuffList(params).then(res => { if (res.list.length > 0) { this.goodsList = res.list } else { this.goodsList = [] } }) this.$u.api.findComboList(params).then(res => { if (res.list.length > 0) { this.comboList = res.list } else { this.comboList = [] } }) // 拼接(全部) this.dataList = this.goodsList.concat(this.comboList); if(this.dataList.length==""){ uni.showToast({ icon: 'none', title: '没有搜到哟,换个词试试' }) } // 搜索词列表 if (!this.searchHistoryList.includes(this.inputValue)) { this.searchHistoryList.unshift(this.inputValue);//给数组的开头添加元素, uni.setStorage({ key: 'searchList', data: JSON.stringify(this.searchHistoryList) }); } else { //有搜索记录,删除之前的旧记录,将新搜索值重新push到数组首位 let i = this.searchHistoryList.indexOf(this.inputValue); this.searchHistoryList.splice(i, 1); this.searchHistoryList.unshift(this.inputValue); uni.setStorage({ key: 'searchList', data: JSON.stringify(this.searchHistoryList) }); } } },
为了优化这段代码,你可以使用async/await方法改写它,如下所示:
async search() {
if (this.inputValue == '') {
uni.showToast({ title: '搜索内容不能为空', icon: 'none' });
} else {
let params = { paramsName: this.inputValue };
try {
const res1 = await this.$u.api.findFoodstuffList(params);
this.goodsList = res1.list.length > 0 ? res1.list : [];
const res2 = await this.$u.api.findComboList(params);
this.comboList = res2.list.length > 0 ? res2.list : [];
this.dataList = this.goodsList.concat(this.comboList);
if (this.dataList.length == "") {
uni.showToast({ icon: 'none', title: '没有搜到哟,换个词试试' });
}
if (!this.searchHistoryList.includes(this.inputValue)) {
this.searchHistoryList.unshift(this.inputValue);
await uni.setStorage({ key: 'searchList', data: JSON.stringify(this.searchHistoryList) });
} else {
let i = this.searchHistoryList.indexOf(this.inputValue);
this.searchHistoryList.splice(i, 1);
this.searchHistoryList.unshift(this.inputValue);
await uni.setStorage({ key: 'searchList', data: JSON.stringify(this.searchHistoryList) });
}
} catch (error) {
console.log(error);
}
}
}
该方法可以使代码更加简洁易懂,同时也可以减少代码中的回调地狱。
uniapp 点击提交input内不能为空
对于uniapp中,点击提交时需要判断输入框是否为空的情况,可以使用以下方法:
1. 在模板中,给提交按钮添加一个点击事件监听:
```html
<template>
<input v-model="inputValue" type="text" placeholder="请输入内容" />
<button @click="handleSubmit">提交</button>
</template>
```
2. 在Vue实例的data中定义一个inputValue的数据属性,用于保存输入框的值:
```javascript
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleSubmit() {
if (this.inputValue.trim() === '') {
uni.showToast({
title: '输入不能为空',
icon: 'none'
})
return
}
// 输入不为空的处理逻辑
// ...
}
}
}
```
3. 在handleSubmit方法中,判断inputValue的值是否为空。如果为空,则使用uni.showToast方法显示一个提示信息,阻止后续逻辑的执行;如果不为空,则执行后续的处理逻辑。
这样,在uniapp中点击提交按钮时,就可以判断输入框是否为空了。如果为空,则会显示一个提示信息,否则可以进行后续操作。