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

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

具体实现示例代码为：
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 < list.length; i++) {      for (let k = 0; k < attr.length; k++) {        if (list[i].id === attr[k]) {          money += list[i].price * list[i].number;          str.push(list[i]);        }      }    }    this.setData({      selectDatas: str,      totalMoney: (money / 100).toFixed(2),      checkAll: (list.length == attr.length && list.length > 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 < list.length; i++) {        money += list[i].price * list[i].number;        str.push(list[i]);      }      this.setData({        checked: true,        selectDatas: str,        totalMoney: (money / 100).toFixed(2)      })    } else {      this.setData({        checked: false,        selectDatas: [],        totalMoney: '0.00'      })    }  },  // 结算  totalClick() {    let list = this.data.selectDatas;    if (list.length < 1) {      wx.showToast({        title: '无结算订单',        icon: 'error'      })      return false;    }    wx.showModal({      title: '提示',      content: '确定结算当前订单吗？',      complete: (res) => {        if (res.confirm) {          wx.showToast({            title: '结算完成',          })        }      }    })  },})

2、wxml代码：

<view class="bg-color"></view><view class="car-box">  <checkbox-group bindchange="checkboxChange">    <view class="row-data" wx:for="{{dataList}}" wx:for-index="index" wx:key="item">      <view class="row-btn">        <checkbox value="{{item.id}}" checked="{{checked}}" />      </view>      <view class="row-list" bind:tap="detailClick" data-item="{{item}}">        <view class="row-img">          <image src="{{item.img}}" mode="aspectFill" />        </view>        <view class="row-info">          <view class="row-text">{{item.content}}</view>          <view class="row-price">            <view>              <text class="row-icon">￥</text>              <text class="row-money">{{item.showPrice}}</text>            </view>            <view>              <text class="btn">x{{item.number}}</text>            </view>          </view>        </view>      </view>    </view>  </checkbox-group></view><!-- 结算 --><view class="footer-box">  <view>    <checkbox-group bindchange="checkboxChangeAll">      <label class="level">        <checkbox value="all" checked="{{checkAll}}" />全选      </label>    </checkbox-group>  </view>  <view class="level">    <view>      <text>合计：</text>      <text class="total-btn row-icon">￥</text>      <text class="total-btn row-money">{{totalMoney}}</text>    </view>    <view class="total-end" bind:tap="totalClick">结 算</view>  </view></view>

3、wxss代码：

page {  font-size: 32rpx;  background-color: #f1f1f1;}.bg-color {  background-color: #008B8B;  height: 200rpx;  width: 100%;}.car-box {  min-height: 300rpx;  border-radius: 20rpx;  background-color: white;  margin: -190rpx 20rpx 20rpx 20rpx;  padding: 20rpx 10rpx;}.row-data {  display: flex;  flex-direction: row;  align-items: center;  margin-top: 20rpx;}.row-btn {  width: 10%;  text-align: center;}.row-list {  width: 90%;  display: flex;  flex-direction: row;}.row-img {  width: 30%;  background-color: #f1f1f1;}.row-info {  width: 70%;  display: flex;  flex-direction: column;  justify-content: space-between;  margin-left: 20rpx;}.row-img image {  width: 100%;  height: 200rpx;}.row-text {  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2;  text-overflow: ellipsis;  overflow: hidden;  font-size: 30rpx;}.row-price {  display: flex;  flex-direction: row;  justify-content: space-between;}.row-price view:first-child {  color: #FA5422;}.row-icon {  font-size: 26rpx;}.row-money {  font-weight: bold;}.btn {  padding: 5rpx 20rpx;  font-size: 28rpx;  color: gray;}checkbox {  zoom: .8;}.footer-box {  position: fixed;  bottom: 0;  left: 0;  right: 0;  z-index: 999;  height: 100rpx;  display: flex;  flex-direction: row;  align-items: center;  justify-content: space-between;  background-color: white;  padding: 0 20rpx;}.level {  display: flex;  flex-direction: row;  align-items: center;}.total-btn {  color: #FA5422;}.total-end {  background-color: #008B8B;  margin-left: 20rpx;  padding: 15rpx 50rpx;  border-radius: 50rpx;  font-size: 30rpx;  color: white;}

本示例代码较为简单，适合初学的友友们借鉴，编写不易，关注博主，分享更多实用好用示例代码给大家，谢谢大家的支持和指导。