小程序--搜索页面(有搜索历史记录)

实现如图所示的效果

1.xml部分代码如下

<view class="weui-search-bar">
  <view class="weui-search-bar__form">
      <view class="weui-search-bar__box">
        <icon class="weui-icon-search_in-box" type="search" size="17" color="#0C98C5"></icon>
        <input type="text" name='containerNo' value="{{containerNo}}" bindconfirm='searchAction'  class="weui-search-bar__input" placeholder="输入申请编号、箱号查询"  placeholder-style="color:#2EA7E0;font-size:26rpx;" focus="{{true}}" bindblur="searchBlur"/>
        <view class="weui-icon-clear" wx:if="{{containerNo.length > 0}}" bindtap="clearInput" >
            <icon type="clear" size="17" color="#0C98C5"></icon>
        </view>
      </view>
  </view>
  <view class="weui-search-bar__cancel-btn fonsize"  bindtap="clearInput">取消</view>
</view>
<view class="topbottom"></view>

<view class="search-detail">
  {{tongguanbao}}
</view>
<view class="page__bd conhist" wx:if="{{containerSearch && containerSearch.length > 0}}">
  <view class="cells__title">历史记录</view>
  <view class="weui-cells_after-title" wx:for="{{containerSearch}}" wx:key="**this">
    <view class="weui-cell weui-cell_access const" hover-class="weui-cell_active">
      <!--历史记录-->
      <view class="weui-cell__bd" bindtap="searchHistAction" data-text="{{item.containerNo}}" data-id="{{item.containerID}}">{{item.containerNo}}
      </view>
      <!--删除图标-->
      <view  class="del" data-text="{{item.containerNo}}" bindtap="deleteSearchHist">
        <image src="../../images/del.png"></image>
      </view>
    </view>
  </view>
</view>

2.css部分代码如下

page{
  background-color: #f7f7f5;
  margin: 0 auto;
  font-family: PingFangSC-Medium;
}
.weui-search-bar{
  display: flex;
  align-items: center;
}
.search-detail{
  opacity: 1;
  text-align: center;
  color: #2EA7E0;
  margin-top: 32rpx;
}

3.js部分代码如下

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    containerNo: '',
    containerID: '',
    tongguanbao: '', // 通关宝信息
    containerSearch: []
  },
  clearInput: function () {
    this.setData({
      containerNo: ""
    });
  },
  //加载上一个页面中的数据
  onLoad: function (options) {
    var that = this;
    this.setData({
      containerNo: options.containerNo,
      containerID: options.containerID,
    })
    console.log('containerNo', options.value)
  },

  onShow: function (e) {
    var containerSearch = wx.getStorageSync("containerSearch");
    var searchHist = []
    if (containerSearch) {
      searchHist = containerSearch.slice(0, 10)
    }
    this.setData({
      containerSearch: searchHist
    })
    if (this.data.containerNo) {
      this.loadDetail()
    }
  },
//失去焦点
  searchBlur: function (e) {
    this.setData({
      containerNo: e.detail.value
    })
  },
  searchAction: function (e) {
    var that = this
    var touchType = e.type
    var containerNo = ''
    if (touchType === 'tap') {
      containerNo = that.data.containerNo
    } else if (touchType === 'confirm') {
    //键盘事件
      containerNo = e.detail.value
    } 
    if (containerNo) {
      // 触发键盘事件的时候 给containerNo塞值，
      //如果不写 this.setData而直接调用loadDetail函数则会一直报错，因为此时containerNo未定义
      this.setData({
        containerNo: containerNo
      })
      that.loadDetail();
    } else {
      wx.showToast({
        title: '未输入箱号',
        icon: 'none'
      })
    }
  },
  searchHistoryAdd: function (containerNoHist) {
    var containerSearch = wx.getStorageSync("containerSearch");
    if (containerSearch) {
      var deleteIndex = -1
      var deleteFlag = false
      for (var i = 0, j = containerSearch.length; i < j; i++) {
        var tempJson = containerSearch[i]
        if (tempJson.containerNo === containerNoHist.containerNo) {
          deleteIndex = i
          deleteFlag = true
          break
        }
      }
      if (deleteFlag) {
        containerSearch.splice(deleteIndex, 1)
      }

      containerSearch.unshift(containerNoHist)

      if (containerSearch.length > 10) {
        containerSearch = containerSearch.slice(0, 10)
      }

   } else {
      containerSearch = []
      containerSearch.push(containerNoHist)
    }
    wx.setStorageSync("containerSearch", containerSearch)

    this.setData({
      'containerSearch': containerSearch
    })
  },
  //历史记录
  searchHistAction: function (e) {

    var containerNo = e.currentTarget.dataset.text
    var containerID = e.currentTarget.dataset.id

    this.setData({
      containerNo: containerNo,
      containerID: containerID ? containerID : ''
    })

    this.loadDetail()
  },
  //删除某一条历史记录
  deleteSearchHist: function (e) {
    var containerNo = e.currentTarget.dataset.text
    var containerSearch = wx.getStorageSync("containerSearch");
    containerSearch.splice(containerSearch.findIndex(item => item.containerNo === containerNo), 1)
    wx.setStorageSync("containerSearch", containerSearch)

    this.setData({
      'containerSearch': containerSearch
    })
  },
  loadDetail: function () {
    var that = this
    var postData = {
      containerNo: that.data.containerNo.toUpperCase(),
      // containerNo: that.detail.value.trim().toUpperCase(),
      containerID: that.data.containerID ? that.data.containerID : ''
    }
    // 增加缓存
    var containerNoSearchHistObj = postData
    this.searchHistoryAdd(containerNoSearchHistObj)

    app.request_json(app.request_url.getTongGuanBao, postData, 'POST').then(function (result) {
      if (result.code == 0) {
        var data = result.data

        that.setData({
          tongguanbao: data.tongguanbao
        })
      } else {
        wxUtil.showModalNoCancle(result.message)
      }
    })
  },
})