微信小程序简单实现购物车功能

微信小程序简单实现购物车结算和购物车列表展示功能

实现在微信小程序中对每一个购物车界面的商品订单，进行勾选结算和取消结算的功能，相关界面截图如下：

具体实现示例代码为：

1、js代码：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    checked: false,
    checkAll: false,
    dataList: [{
        id: '000',
        img: 'https://img-blog.csdnimg.cn/img_convert/0e449547f8e5354646f76af0d1b4800a.png',
        content: '生活百般滋味，编写不易，关注博主，分享更多内容呦',
        price: 3289,
        showPrice: '32.89',
        number: 1
      },
      {
        id: '111',
        img: 'https://img2.baidu.com/it/u=2681955314,221996905&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300',
        content: '努力学习，天天向上，进我主也查看更多内容',
        price: 2456,
        showPrice: '24.56',
        number: 2
      }, {
        id: '222',
        img: 'https://img-blog.csdnimg.cn/img_convert/0e449547f8e5354646f76af0d1b4800a.png',
        content: '关注博主，分享更多内容，欢迎批评指导',
        price: 3289,
        showPrice: '89.89',
        number: 5
      },
    ],
    totalMoney: '0.00',
    selectDatas: []
  },
  // 查看详情
  detailClick(e) {
    let data = e.currentTarget.dataset.item;
    wx.showToast({
      title: '点击了查看详情',
      icon: 'none'
    })
    console.log('详情数据：', data)
  },
  // 单选
  checkboxChange(e) {
    let money = 0,
      str = [];
    let attr = e.detail.value;
    let list = this.data.dataList;
    for (let i = 0; i  0) ? true : false
    })
  },
  // 全选
  checkboxChangeAll(e) {
    let money = 0,
      str = [];
    let val = e.detail.value;
    let list = this.data.dataList;
    if (val.length > 0) {
      for (let i = 0; i  {
        if (res.confirm) {
          wx.showToast({
            title: '结算完成',
          })
        }
      }
    })
  },
})

2、wxml代码：