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

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

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

具体实现示例代码为：
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; } 

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