小程序购物车和搜索(1702H)

150 阅读2分钟

gif:

 

一、相关文档

组件-》表单组件-》checkbox:

developers.weixin.qq.com/miniprogram…

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

developers.weixin.qq.com/miniprogram…

组件-》表单组件-》input:

developers.weixin.qq.com/miniprogram…

二、代码介绍

 

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: