|
|
|
我这里遇到两个问题：
1>在onChange时，展示搜索列表，点击搜索列表的某一项展示产品列表，但是在点击搜索列表的某一项的时候又触发了一次onchange，因为不支持
oninput，所以不知道怎么处理
2>滚动加载不生效，page没法+1
<template>
<div class="box">
<div class="search">
<div class="search-wrap fix-flex">
<stack class="search-input">
<input type="text" placeholder="搜索" class="input" value="{{ inputVal }}" onChange="inputChange"/>
<div class="search-input-img" if="{{ showClearBtn }}"><image class="search-clear" src="../Common/img/clear.png">image>div>
stack>
<div class="search-btn-box flex-item">
<text class="search-btn" onclick="routerHome">取消text>
div>
div>
<list class="search-result" if="{{ searchData.length > 0 && !show }}">
<list-item type="searchResult" for="{{ searchData }}" onclick="showProList($item.name)"><text class="search-result-item">{{ $item.name }}text>list-item>
list>
<div class="search-none" if="{{ showSearchNone && !searchData.length }}">
<image src="../Common/img/icon_null.png" class="search-none-img">image>
<text class="search-none-text">抱歉!暂无搜索结果text>
div>
<list class="search-pro-result" if="{{ proData && show }}">
<list-item type="productLeft" class="search-pro-item" for="{{ proData }}">
<div class="product-item-inner">
<div class="product-item-left">
<image src="{{ $item.pic }}" class="product-item-img">image>
div>
<div class="product-item-right">
<text class="product-item-top">{{ $item.name }}text>
<div class="product-item-bto"><text class="product-item-price-num">{{ $item.price }}text>div>
div>
div>
list-item>
<list-item type="loadStatus" class="load-status">
<progress type="circular" if="{{hasMoreData}}">progress>
<text if="{{hasMoreData}}">加载更多~text>
<text else>全部加载完毕~text>
list-item>
list>
div>
div>
template>
import fetch from '@system.fetch'
import router from '@system.router'
import storage from '@system.storage'
export default {
data: {
show: false, // 显示哪块内容
inputVal: '', // 输入值
showClearBtn: false, // 显示清除按钮
showSearchNone: false, // 显示搜索为空
searchData: [], // 搜索列表
page: 1,
proData: [], // 产品列表
hasMoreData: true
},
onInit() {
this.$page.setTitleBar({text: 'IT查报价'});
},
inputChange(e) {
var that = this;
if(e.value == '') {
that.showClearBtn = false;
return;
} else {
that.showClearBtn = true;
}
fetch.fetch({
url:'',
data: { keyword: e.value, a: 'SearchSuggest' },
success: function(res) {
if (res.data[0]) {
console.log("res",JSON.stringify(res.data))
that.searchData = JSON.parse(res.data);
that.showSearchNone = false;
that.show = false;
} else {
that.showSearchNone = true;
that.searchData = [];
return;
}
}
})
},
showProList(value) {
console.log("value",value)
var that = this;
var page = that.page;
that.show = true;
that.searchData = [];
that.inputVal = value;
if(value == '') {
return;
}
console.log("page",page)
fetch.fetch({
url:'',
data: { keyword: value, page: page, a: 'Search' },
success: function(res) {
var proOne = JSON.parse(res.data);
var proTwo = proOne.data;
if (proTwo.list) {
that.proData = that.proData.concat(proTwo.list);
page++;
} else {
that.hasMoreData = false;
}
}
})
},
|
|
