GIF:

 

I. Relevant documents

Component – “form component -“

Developers.weixin.qq.com/miniprogram…

Component – view container – Swiper:

Developers.weixin.qq.com/miniprogram…

Form component – input:

Developers.weixin.qq.com/miniprogram…

Second, code introduction

 

1. Adjust the back-end interface to obtain all the data of the commodity. The commodity is displayed in categories

  onLoad: function (options) {
    wx.request({
      url: 'http://localhost:8888/wx/day5/food'.success:(res) = > {
        console.log(res)
        if (res.data.code === 200) {
          let spuList =  res.data.data.categoryList[0].spuList
          this.setData({
            categoryList: res.data.data.categoryList,
            currentFoodList: spuList
          })
        }
      }
    })
  },
Copy the code

Dynamically modify currentFootList each time you click to switch TAB, which determines the list of items rendered on the page

  handleNav(e) {
    let {index} = e.currentTarget.dataset
    let {categoryList} = this.data
    this.setData({
      currentIndex: index,
      currentFoodList: categoryList[index].spuList
    })
  },
Copy the code

3. When clicking the plus or minus sign, dynamically modifies a Ordered object that holds information about all the items added to the shopping cart, including the number of items added for a particular item. This ordered object then copies it in the global object

  handleListItemAdd(e) {
    let { item } = e.currentTarget.dataset
    let {currentIndex, ordered} = this.data
    if (ordered[item.spuId]) {
      ordered[item.spuId].count = ordered[item.spuId].count + 1
      ordered[item.spuId].checked = true
    } else {
      ordered[item.spuId] = item
      ordered[item.spuId].count = 1
      ordered[item.spuId].checked = true
    }
    app.globalData.ordered = ordered
    this.setData({
      ordered
    })    
  },
Copy the code

4. Shopping cart page, get ordered object from global data and render shopping cart page. Shopping cart page, each item contains a check box, according to the check box check case dynamic calculation of the total price, total number of goods.

  priceAndCount() {
    let {orderedArr} = this.data
    let totalCount = 0
    let totalPrice = 0
    for (let i = 0; i < orderedArr.length; i++) {
      if (orderedArr[i].checked) {
        totalCount = totalCount + orderedArr[i].count
        totalPrice = totalPrice + orderedArr[i].count * orderedArr[i].currentPrice
      }
    }
    this.setData({
      totalCount,
      totalPrice
    })
  },
Copy the code
  handleCheckboxChange(e) {
    let {value} = e.detail
    let {orderedArr} = this.data
    for (let i = 0; i < orderedArr.length; i++) {
      if (value.indexOf(orderedArr[i].spuId + ' ') > =0) {
        orderedArr[i].checked = true
      } else {
        orderedArr[i].checked = false}}this.setData({
      orderedArr,
      selectAll: value.length === orderedArr.length
    })
    console.log(e)
    this.priceAndCount()
  },
Copy the code

 

5. Select all buttons. Changes the entire orderedArr array based on the state of the all-select button, modifying the checked properties of each item.


  handleSelectAll(e) {
    let { value } = e.detail
    let { orderedArr } = this.data
    let checkedCount = 0
    for (let i = 0; i < orderedArr.length; i++) {
      if (value.length > 0) {
        orderedArr[i].checked = true
        checkedCount = checkedCount + 1
      } else {
        orderedArr[i].checked = false}}this.setData({
      orderedArr,
      selectAll: checkedCount === orderedArr.length
    })    
    this.priceAndCount()
  },
Copy the code

6. Add plus and minus signs for the modified quantity on the shopping cart page

      <button size="mini" disabled="{{item.subBtnDisabled}}" data-index="{{index}}" bindtap="handleSub">-</button>
      <text>Quantity: {{item. Count}}</text>
      <button size="mini" data-index="{{index}}" bindtap="handleAdd">+</button>
Copy the code
handleSub(e) {
    let { index } = e.currentTarget.dataset
    let { orderedArr } = this.data

    orderedArr[index].count = orderedArr[index].count - 1
    if (orderedArr[index].count <= 1) {
      orderedArr[index].subBtnDisabled = true
    } else {
      orderedArr[index].subBtnDisabled = false
    }    
    this.setData({
      orderedArr
    })
    this.priceAndCount()
  },

  handleAdd(e) {
    let {index} = e.currentTarget.dataset
    let {orderedArr} = this.data
    orderedArr[index].count = orderedArr[index].count + 1
    orderedArr[index].subBtnDisabled = false
    this.setData({
      orderedArr
    })
    this.priceAndCount()
  },
Copy the code

 

 

 

 

Three, search,

1.swiper

Indicator -dots: Whether to display panel indicator points

Autoplay: Indicates whether to switch automatically

Interval: indicates the interval for automatic switchover

Duration: sliding animation duration

<swiper 
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" 
  interval="{{interval}}" 
  duration="{{duration}}">
  <view wx:for="{{imgUrls}}" wx:key="{{index}}">
    <swiper-item>
      <image src="{{item}}" class="m-slide-image"/>
    </swiper-item>
  </view>
</swiper>
Copy the code

input

  <input 
    type="text" 
    value="{{searchValue}}" 
    bindinput="handleInputChange" 
    placeholder="Please enter search content" 
    class="m-input"></input>
Copy the code

Request search interface:

    wx.request({
      url: 'https://jbiz.share1diantong.com/fa053/topic/search/v1'.method: 'POST'.data: {
        "pageNum": 1."kw": searchValue,
        "pageSize": 10."userId": 0
      },
      success: (res) = > {
        console.log(res)
        this.setData({
          list: res.data.data.list
        })
        console.log(res.data.data.list)
      }
    })   
Copy the code

GIF: