小程序购物车和搜索（1702H）

gif：

 

一、相关文档

组件-》表单组件-》checkbox：

https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

组件-》视图容器-》swiper:

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

组件-》表单组件-》input：

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

二、代码介绍

1、调后端接口获得商品的全部数据，商品是分类展示的，先将第一类的所有商品都取出来，展示在页面上

  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
          })
        }
      }
    })
  },

 2、每次点击切换tab页时，动态修改currentFootList的值，这个值决定页面渲染的商品列表

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

3、点击加号或减号时，动态修改一个ordered对象，这个对象保存着所有添加到购物车的商品信息，包括某一个商品添加的数量，ordered这个对象再复制一份放在全局对象中

  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
    })    
  },

4、购物车页面，从全局数据中获取ordered对象，并渲染购物车页面。购物车页面，每个商品都包含一个复选框，根据复选框的勾选情况动态计算总价，商品总数。

  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
    })
  },

  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()
  },

5、全选按钮。根据全选按钮的状态，变了整个orderedArr数组，修改每一项的checked属性。

  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()
  },

6.购物车页面添加修改数量的加号和减号

      <button size="mini" disabled="{{item.subBtnDisabled}}" data-index="{{index}}" bindtap="handleSub">-</button>
      <text>数量：{{item.count}}</text>
      <button size="mini" data-index="{{index}}" bindtap="handleAdd">+</button>

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()
  },

三、搜索

1.swiper

indicator-dots:是否显示面板指示点

autoplay:是否自动切换

interval:自动切换时间间隔

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>

input

  <input 
    type="text" 
    value="{{searchValue}}" 
    bindinput="handleInputChange" 
    placeholder="请输入搜索内容" 
    class="m-input"></input>

请求搜索接口：

    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)
      }
    })   

gif：