小程序购物车实现

<!-- wxml -->
<view class='cartMain'>
    <view wx:for="{{cartItems}}" wx:key="key" wx:for-index="index">
        <view data-id="{{item.id}}" class='cart-box' data-index="{{index}}">
　　　　　　<！-- 复选框 -->
            <view class='icon'>
                <icon wx:if="{{item.selected}}" type="success" color="rgb(51, 138, 238)" size="20" bindtap="selectedCart" data-index="{{index}}" />
                <icon wx:else type="circle" bindtap="selectedCart" size="20" data-index="{{index}}" />
            </view>
　　　　　　　　<！-- 图片 -->
            <view class='cart_main'>
                    <view class='left_imgae'  data-key="{{index}}" style="background-color:{{randomColorArr[index]}}">
                        <!-- <image class="cart-image" src="{{item.image}}"></image> -->
                        {{item.type}}
                    </view>
                <view class='left_box'>
                        <text class="cart-title">{{item.title}}</text>
            <text class="cart-goods">{{item.titleTwo}}</text>
                        <text class="cart-price">￥{{item.price}}</text>
                    </view>
                <view class="jisuan">
                    <text bindtap='reduce'  class="input cart-reduce"  data-index="{{index}}">-</text>
                    <text class="input cart-text">{{item.value}}</text>
                    <text bindtap='add' class="input cart-add"  data-index="{{index}}">+</text>
                </view>
            </view>
            <!-- 底部 -->
            <view class="cart-bottom">
                <icon wx:if="{{CheckAll}}" class="cart-icon" type="success" color="rgb(51, 138, 238)" size="20" bindtap="select" data-index="{{index}}" />
                <icon wx:else type="circle" class="cart-icon" size="20" bindtap="select" data-index="{{index}}" />
                <text class='checkAll'>全选</text>
                <view class='cart-sum'>
                    <text class='cart_sum'>
             <text class='sum_text'>合计：</text>
                    <text class='sum_color'>￥{{total}}元</text>
                    </text>
                </view>
                    <view class='cart-pay'>
                    <text class='cart_pay' bindtap="go" data-id="{{item.id}}">结算</text>
                </view>
            </view>
        </view>
    </view>
</view>
/* wxss */
.cartMain{
  margin-bottom: 120rpx;
 }
 .cart-image{
   width: 180rpx;
   height: 200rpx;
   float: left;
   padding: 15rpx 10rpx;
 }
 .cart-box{
   width: 100vw;
   display: flex;
   height: 235rpx;
   background: white;
   /* margin-top: 15rpx; */
   border-bottom: 1px solid #eee;
   /* padding-left: 60rpx; */
 }
 .icon{
   width: 60rpx;
   height: 235rpx;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .cart_main{
   flex: 1;
   display: flex;
   
 }
 
 .cart-boxtwo{
   display: flex;
   flex-direction:column;
   
 }
 .left_imgae{
   width: 200rpx;
   height: 200rpx;
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   margin: 19rpx;
 }
 .left_box{
   flex: 1;
   margin-top: 20rpx;
   line-height: 60rpx
 }
 .cart-title{
   margin-top: 30rpx;
   font-family: "微软雅黑";
   font-size: 30rpx;
 }
 .cart-goods{
  display: flex;
  font-size: 30rpx
}
 .cart-price{
   display: flex;
   color: red;
   font-size: 30rpx
 }
 .right image{
   width: 50rpx;
   height: 50rpx;
   float: right;
   margin-right: 30rpx;
   margin-top: 30rpx;
 }
 .input{
   display: block;
   width: 65rpx;
   height: 65rpx;
   line-height: 65rpx;
   text-align: center;
   /* border: 1px solid red; */
   float: left;
 }
 .cart-add{
   border-left: none;
   background: #FBFBFB;
 }
 .cart-reduce{
   border-right: none;
   background: #FBFBFB;
 }
 .cart-text{
   width: 90rpx;
   background: #F4F4F4;
   font-size: 30rpx;
 }
 .cart-bottom{
   position: fixed;
   width: 100vw;
   display: flex;
   height: 100rpx;
   bottom:0;
   background: white;
 }
 .yuan{
   display: block;
   width: 50rpx;
   height: 100rpx;
   line-height: 100rpx;
   border-radius: 50%;
   border: 1px solid red;
 }
 
 .SpCart{
   display: block;
   width: 300rpx;
   height: 300rpx;
 }
 .Sptext{
   font-size: 30rpx;
 }
 .cart-icon{
   margin:30rpx 20rpx;
 }
 .cart-sum{
   flex: 1;
   height: 100%;
   line-height: 100rpx;
   text-align: right;
   padding-right: 36rpx;
 }
 .cart-pay{
   width: 230rpx;
   height: 100rpx;
   line-height: 100rpx;
   background:  rgb(51, 138, 238); /* 不支持线性的时候显示 */
 }
 .cart_pay{
   display: block;
   line-height: 100rpx;
   text-align: center;
   font-size: 30rpx;
   color: white;
 }
 .sum_color{
   color: red;
   font-size: 25rpx;
 }
 .sum_text{
   font-size: 30rpx;
 }
 .checkAll{
   line-height: 100rpx;
   font-size: 28rpx;
 }
 .jisuan{
   padding-top: 160rpx;
   box-sizing: border-box;
 }
// js
Page({
   data: {
     cartItems: [{
         id: 0,
         title: "时长优惠券",
         titleTwo: "抵扣时长",
         type:'2小时',
         price: "20",
         value: "0",
         image: "",
         selected: false,
       },
       {
         id: 1,
         title: "金额优惠券",
         titleTwo: "抵扣金额",
         type:'42元',
         price: "21",
         value: "0",
         image: "",
         selected: false,
       },
       {
         id: 2,
         title: "折扣优惠券",
         titleTwo: "抵扣折扣",
         price: "34",
         type:'7折',
         value: "0",
         image: "",
         selected: false,
       },
       {
         id: 3,
         title: "金额优惠券",
         titleTwo: "抵扣金额",
         type:'80元',
         price: "39",
         value: "0",
         image: "",
         selected: false,
       },{
        id: 4,
        title: "时长优惠券",
        titleTwo: "抵扣时长",
        type:'2小时',
        price: "20",
        value: "0",
        image: "",
        selected: false,
      },
      {
        id: 5,
        title: "金额优惠券",
        titleTwo: "抵扣金额",
        type:'42元',
        price: "21",
        value: "0",
        image: "",
        selected: false,
      },
      {
        id: 6,
        title: "折扣优惠券",
        titleTwo: "抵扣折扣",
        price: "34",
        type:'7折',
        value: "0",
        image: "",
        selected: false,
      },
      {
        id: 7,
        title: "金额优惠券",
        titleTwo: "抵扣金额",
        type:'80元',
        price: "39",
        value: "0",
        image: "",
        selected: false,
      },
     ],
     total: 0,
     CheckAll: false,
     indexs:'',//下标
     selectedit:'',//checked选择
     num:'',//数量
 // 自定义自己喜欢的颜色
 colorArr: [ "rgb(85, 198, 226)",'#6495ed','rgb(51, 138, 238)' ],
 // 存储随机颜色
 randomColorArr: []
   },
   onLoad: function (e) {
    wx.clearStorage({
      key:"carItems"
    })
    let that = this,
    labLen = that.data.cartItems.length,
    colorArr = that.data.colorArr,
    colorLen = colorArr.length,
    randomColorArr = [];
    //判断执行
    do{
      let random = colorArr[Math.floor(Math.random() * colorLen)];
      randomColorArr.push(random);
      labLen--;
    } while (labLen > 0)

    that.setData({ 
      randomColorArr: randomColorArr
    });
   },
   onShow: function () {
     //  var cartItems = wx.getStorageSync("cartItems")
     //  this.setData({
     //    cartList: false,
     //    cartItems: cartItems
     //  })
     this.getsumTotal()

   },

   //选择
   select: function (e) {
     var CheckAll = this.data.CheckAll;
     CheckAll = !CheckAll
     var cartItems = this.data.cartItems

     for (var i = 0; i < cartItems.length; i++) {
       cartItems[i].selected = CheckAll
     }

     this.setData({
       cartItems: cartItems,
       CheckAll: CheckAll
     })
     this.getsumTotal()
   },
   add: function (e) {
     var cartItems = this.data.cartItems //获取购物车列表
     var index = e.currentTarget.dataset.index //获取当前点击事件的下标索引
     var value = cartItems[index].value //获取购物车里面的value值

     value++
     cartItems[index].value = value;
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()

     wx.setStorageSync("cartItems", cartItems) //存缓存
   },

   //减
   reduce: function (e) {
     var cartItems = this.data.cartItems //获取购物车列表
     var index = e.currentTarget.dataset.index //获取当前点击事件的下标索引
     var value = cartItems[index].value //获取购物车里面的value值
     if (value == 0) {
       value--
       cartItems[index].value = 0
     } else {
       value--
       cartItems[index].value = value;
     }
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },

   // 选择
   selectedCart: function (e) {
     var cartItems = this.data.cartItems //获取购物车列表
     var index = e.currentTarget.dataset.index; //获取当前点击事件的下标索引
     var selected = cartItems[index].selected; //获取购物车里面的value值
     //取反
     cartItems[index].selected = !selected;
     this.setData({
       cartItems: cartItems,
       indexs:e.currentTarget.dataset.index,
       selectedit:selected
     })
     this.getsumTotal();
     wx.setStorageSync("cartItems", cartItems)
   },

   //结算
   go: function (e) {
    var cardatas=[]
    for (var i = 0; i < this.data.cartItems.length; i++) {
      if (this.data.cartItems[i].selected) {
        cardatas.push(this.data.cartItems[i])
      }
    }
    console.log(cardatas)//选中结算的物品
   },


   //合计
   getsumTotal: function () {
     var sum = 0,num=0
     for (var i = 0; i < this.data.cartItems.length; i++) {
       if (this.data.cartItems[i].selected) {
         num+=this.data.cartItems[i].value 
         sum += this.data.cartItems[i].value * this.data.cartItems[i].price
       }
     }
     //更新数据
     this.setData({
       total: sum,
       num:num
     })
   },
 })