获取搜索历史记录

点击输入框时弹出搜索并样式反选

<view class='query-model' wx:if='{{queryModel}}' catchtap="queryClose">
  <view class="query-all {{searchList.length>0?'pad-b-20':''}}" catchtap="on">
    <view class="sou {{sel?'selsou':''}}">
      <view class="right {{sel?'selr':''}}">
        <view class='iii'>
          <view class='seach'>
            <image src='https://jxtf-store.oss-cn-hangzhou.aliyuncs.com/car-image/wxapp/seach.png'></image>
          </view>
          <view class='input'>
            <input type='text' value="{{searchCondition.conditions.name}}" bindinput="nameEdit" bindconfirm="search" placeholder='请输入商品名'></input>
          </view>
          <view class="iccc">
            <view class="ico" wx:if='{{searchCondition.conditions.name}}' catchtap="cleanAllTi">
              <image src="https://jxtf-store.oss-cn-hangzhou.aliyuncs.com/car-image/wxapp/cs3.png"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="sss" catchtap="search">搜索</view>
      <view class="plus">
        <image src="https://jxtf-store.oss-cn-hangzhou.aliyuncs.com/car-image/wxapp/scan-3.png"></image>
      </view>
    </view>
    <view class='query-f1' wx:if="{{searchList.length>0}}">
      <view>
        <text>历史搜索</text> </view>
      <view class='m-l-au' catchtap="removeShows">
        <image src='https://jxtf-store.oss-cn-hangzhou.aliyuncs.com/bs-store-mini/wxapp/del-sek.png'></image>
      </view>
    </view>
    <view class='query-f2' wx:if="{{searchList.length>0}}">
      <view catchtap="selItem" data-item="{{item}}" wx:for='{{searchList}}' wx:for-item="item" wx:for-index='idx' wx:key='unique'>
        <text class='i' wx:if="{{item.title}}">{{item.title}}</text>
       <text wx:else></text>
      </view>
    </view>
  </view>
</view>

//引入app
const app = getApp();

//点击输入框获取value
nameEdit(e) {
    let name = e.detail.value;
    let se = this.data.searchCondition;
    se.conditions.name=name;
    se.conditions.categoryId = 0
    se.page.page=1
  },
  isQueryModel() {
    console.log('111')
    this.setData({
      sel: true,
      queryModel: true
    })
    console.log(this.data.queryModel)
  },
//清除输入框内容
  cleanAllTi() {
    let name = this.data.searchCondition.conditions.name
    name = ''
    this.setData({
      "searchCondition.conditions.name": name
    })
this.search();
  },
  on() {

  },
//关闭
  queryClose() {
    this.setData({
      sel: true,
      queryModel: false,
      title: ''
    })
  },
  trim(str) {
    str = str.replace(/^(\s|\u00A0)+/, '');
    for (var i = str.length - 1; i >= 0; i--) {
      if (/\S/.test(str.charAt(i))) {
        str = str.substring(0, i + 1);
        break;
      }
    }
    return str;
  },
//组件的方法
  noSure() {
    this.setData({
      show: false
    })
  },
  sure() {
    this.removeSearchList()
    this.setData({
      show: false,
      queryModel: false,
      title: ''
    })
    wx.showToast({
      title: '历史记录清除成功',
      icon: 'none',
      duration: 3000
    })
  },
//removeCache移除搜索记录
  removeSearchList() {
    app.removeCache("searchList");
    this.getSearchList()
  },
  removeShows() {
    console.log('22')
    this.setData({
      show: true,
    })
  },
//getCache获取搜索记录
  getSearchList() {
    let searchList = app.getCache("searchList");
    if (searchList.length == 0) {
      searchList = []
    }
    this.setData({
      searchList: searchList
    })
  },
//setCache保存历史记录缓存
  addSearchList(searchList, title) {
    let that = this
    title = that.trim(title)//去除空格
    title = title.slice(0, 10);//读取title，最多10位
    title = String(title)//对象的值转字符串
    if (title.length > 9) {
      title = title + '...'
    }
    if (searchList.length == 0) {
      searchList.unshift({
        title: title//新的记录添加到数组起始位置
      })
      app.setCache("searchList", searchList);
    } else {
      let sel = false
      console.log(title)
      console.log(searchList)
      searchList.forEach(item => {
        if (item.title == title) {
          sel = true
        }
      })
      if (sel) {

      } else {
        if (searchList.length >= 10) {
          searchList.unshift({
            title: title
          })
          searchList.splice(searchList.length - 1, 1)
          app.setCache("searchList", searchList);
        } else {
          searchList.unshift({
            title: title
          })
          app.setCache("searchList", searchList);
        }
      }
    }
  },
//sou's
  search(){
    let title = this.data.searchCondition.conditions.name
    let searchList = this.data.searchList
    let list = this.data.categoryList;
    list.forEach(function (item) {
      item.iscurrent = false;
    });
    list[0].iscurrent = true;
    this.setData({
      categoryList:list,
    })
    this.addSearchList(searchList, title)
    this.setData({
      sel: false,
      queryModel: false
    })
    this.getSearchList()
    this.queryPage(this.data.searchCondition)
  },
  changetab: function(e) {
    let se = this.data.searchCondition
    se.conditions.name = ''
    this.setData({
      searchCondition:se
    })
    let that = this;
    let id = e.currentTarget.dataset.id;
    let list = this.data.categoryList;
    list.forEach(function(item) {
      if (id === item.id) {
        item.iscurrent = true;
      } else {
        item.iscurrent = false;
      }
    });
    this.setData({
      categoryList: list
    });
    let searchCondition = that.data.searchCondition;
    searchCondition.page.page = 1;
    searchCondition.conditions.categoryId = id;
    that.setData({
      list: []
    });
    this.queryPage(searchCondition);
  },
  getCategory: function() {
    let that = this;
    productApi.queryCategoryAll(function(data) {
      if (data.code === 0) {
        let list = data.list;
        list.forEach(function(item) {
          item.iscurrent = false;
        });
        list.splice(0, 0, {
          id: 0,
          name: '全部好货',
          iscurrent: true
        });
        that.setData({
          categoryList: list
        })
      }
    })
  },
  queryPage: function(searchCondition) {
    let that = this;
    that.pageStart(searchCondition);
    productApi.queryList(searchCondition, function(data) {
      searchCondition.page.max = data.page.totalCount;
      let list = data.page.list;
      if (searchCondition.page.page === 1) {
        that.setData({
          list: []
        })
      }
      let datalist = [...that.data.list, ...list];
      that.setData({
        list: datalist,
        searchCondition: searchCondition
      });
      that.pageEnd(searchCondition);
    });
  },
  }