微信小程序之购物车功能

##cart.wxml

<view class="post">
<scroll-view scroll-y="true" class="scroll">
<checkbox-group bindchange="checkboxChange">
  <view wx:for="{{coupon}}" class="top">
    <label class="top-check">
    <checkbox value="{{item.id}}" checked="{{item.selected}}" hidden='hidden'></checkbox>
    <icon type="circle" size="23" wx:if="{{!item.selected}}"></icon>
    <icon type="success" size="23" wx:if="{{item.selected}}"></icon>
    </label>
    <view class="bd" wx:key="{{item.id}}">
      <image class="bd-image" src="../../static/images/2.jpg"></image>
      <image class="img" src="../../static/images/cha.png" bindtap="deleteList" data-index="{{index}}"></image>
      <view class="bd-pro">
      <view class="bd-prod">
        <text class="bd-pro-name">{{item.title}}</text>
        <text class="bd-pro-weight">{{item.num}}</text>
        <text class="bd-pro-price">{{item.price}}</text>
      </view>
      <view class="bd-product">
      <view class="algorithm" bindtap="reduceTap" data-index="{{index}}">
<image src="../../static/images/reduce.png"></image>
      </view>
        <text class="bd-product-text">{{item.number}}</text>
        <view class="algorithm" bindtap="addTap" data-index="{{index}}">
        <image src="../../static/images/plus.png"></image>
        </view>
      </view>
    </view>
    </view>
  </view>
  </checkbox-group>
  </scroll-view>
</view>
<!-- 底部 -->
<view class="fixed" style="position:fixed;bottom:0;width:750rpx;">
  <checkbox-group bindchange="selectAll">
          <label class='fixed-img'>
            <checkbox value="{{!selectAllStatus}}" checked="{{selectAllStatus}}" hidden='hidden' />
            <icon type="circle" size="23" wx:if="{{!selectAllStatus}}"></icon>
            <icon type="success" size="23" wx:if="{{selectAllStatus}}"></icon>
          </label>
        </checkbox-group>
  <view class="fixed-text">
    <text class="fixed-text1">总计</text>
    <view>
      <text class="text">￥</text>
      <text class="fixed-text2">{{money}}</text>
    </view>
  </view>
  <view class="fixed-cart" bindtap="orderTap">
    <text>立即付款</text>
    <image src="../../static/images/Arrow.png"></image>
  </view>
</view>

##cart.wxss

.post {
  margin: 0 42rpx 180rpx 42rpx;
}
.scroll{
  height: 100%;
}
.top-check{
  width: 40rpx;
  height: 40rpx;
  margin-right: 28rpx;
  margin-top: 126rpx;
}
.top{
  display: flex;
  position: relative;
}
.algorithm{
  /* padding: 20rpx 0; */
  width:50rpx;
  height: 50rpx; 
}
.bd {
  width: 604rpx;
  height: 232rpx;
  border-radius: 28rpx;
  background: rgba(248, 248, 248, 1);
  display: flex;
  margin-top: 28rpx;
}

.bd-image {
  width: 228rpx;
  height: 232rpx;
  border-radius: 28rpx;
}
.img{
  position: absolute;
  right: 24rpx;
  top: 52rpx;
  width: 26rpx;
  height: 24rpx;
}
.bd-pro {
  /* width: 436rpx; */
  height: 232rpx;
  margin: 0 30rpx;
  display: flex;
}

.bd-prod {
  margin-top: 38rpx;
  display: flex;
  flex-direction: column;
}

.bd-pro-name {
  color: #333;
  font-size: 34rpx;
}

.bd-pro-weight {
  font-size: 28rpx;
  color: #999;
  margin-top: 24rpx;
}

.bd-pro-price {
  font-size: 24rpx;
  color: #a70900;
  margin-top: 15rpx;
}

.bd-product {
  position: absolute;
  bottom: 28rpx;
  right: 28rpx;
  display: flex;
}

.bd-product image {
  width: 48rpx;
  height: 48rpx;
}

.bd-product-text {
  margin: 0 20rpx;
  color: #000;
  font-size: 36rpx;
  text-align: center;
}

.fixed {
  background-color: #f8f8f8;
  height: 132rpx;
  border-radius: 28rpx 28rpx 0 0;
  display: flex;
  justify-content: space-between;
}
.fixed-img{
  position: absolute;
left: 42rpx;
top: 50rpx;
width: 40rpx;
height: 40rpx;
}

.fixed-text {
  display: flex;
  flex-direction: column;
  margin-left: 90rpx;
  margin-top: 30rpx;
}

.fixed-text1 {
  font-size: 26rpx;
  color: #333;
}

.fixed-text2 {
  font-size: 40rpx;
  color: #a70900;
}
.text{
  font-size:26rpx;
color: #a70900;
}
.fixed-cart {
  width: 434rpx;
  height: 98rpx;
  display: flex;
  background-color: #fd7564;
 margin-right: 42rpx;
  margin-top: 18rpx;
  border-radius: 28rpx;

}

.fixed-cart text {
  text-align: center;
  line-height: 98rpx;
    color: white;
  font-size: 28rpx;
  font-weight: 100;
  font-family: SourceHanSansCN-Regular;
  margin-left:150rpx;
}

.fixed-cart image {
  margin: 32rpx 0;
  position: absolute;
  right: 80rpx;
  width: 34rpx;
  height: 34rpx;
}

##cart.js

Page({
  data: {
    cartGoods: [],
    cartTotal: {
      "goodsCount": 0,
      "goodsAmount": 0.00,
      "checkedGoodsCount": 0,
      "checkedGoodsAmount": 0.00
    },
    isEditCart: false,
    checkedAllStatus: true,
    editCartList: [],
    hidden: false,
    selectAllStatus: false,
    status: true,
    money: 0,
    // number: '6',
    // price: '20',
    coupon: [{
      id:22,
        title: '芒果雪媚娘',
        num: '500g',
        number: '5',
        price: '20',
        selected: true
      },
      {
        id:23,
        title: '芒果雪媚娘',
        num: '500g',
        number: '6',
        price: '20',
        selected: true
      },
      {
        id:33,
        title: '芒果雪媚娘',
        num: '500g',
        number: '4',
        price: '20',
        selected: true
      },
      {
        id:44,
        title: '芒果雪媚娘',
        num: '500g',
        number: '3',
        price: '20',
        selected: true
      }
    ],
    values: []
  },
  onLoad: function(options) {
    // 页面初始化 options为页面跳转所带来的参数
    var that = this;
    let coupon = this.data.coupon; // 获取购物车列表
    let total = 0;
    for (let i = 0; i < coupon.length; i++) { // 循环列表得到每个数据
      if (coupon[i].selected) { // 判断选中才会计算价格
        total += coupon[i].number * coupon[i].price; // 所有价格加起来
      }
    }
    that.setData({ // 最后赋值到data中渲染到页面
      coupon: coupon,
      money: total.toFixed(2)
    });
    this.selectedTap()

  },
  checkboxChange:function(e) {
    const index = e.currentTarget.dataset.index; // 获取data- 传进来的index
    var selectAllStatus = this.data.selectAllStatus
    var values = e.detail.value;
    let coupon = this.data.coupon; // 获取购物车列表
    // const selected = coupon[index].selected; // 获取当前商品的选中状态
    console.log('checkbox发生change事件，携带value值为：', e.detail.value);
    // coupon[index].selected = !selected;// 改变状态
    for (var i = 0; i < coupon.length; ++i) {
      coupon[i].selected = false;
      for (var j = 0; j < values.length; ++j) {
        if (coupon[i].id == values[j]) {
          coupon[i].selected = true;
          break;
        }
      }
    }

    var selectAllStatus = false;
    if (coupon.length == values.length) {
      selectAllStatus = true;
    }
    this.setData({
      coupon: coupon,
      selectAllStatus: selectAllStatus
    });
    console.log(selectAllStatus)
    this.getTotalPrice(); // 重新获取总价
  },
  addTap: function(e) {
    var that = this;
    const index = e.currentTarget.dataset.index;
    var coupon = this.data.coupon;
    var number = Number(coupon[index].number);
    if (number <= 1000) {
      number = number + 1
    }
    coupon[index].number = number;
    that.setData({
      coupon: coupon
    });
    this.getTotalPrice();
  },
  reduceTap: function(e) {
    var that = this;
    const index = e.currentTarget.dataset.index;
    var coupon = this.data.coupon;
    var number = coupon[index].number;
    if (number <= 1) {
      return false;
    }
    number = number - 1;
    coupon[index].number = number;
    that.setData({
      coupon: coupon
    });
    this.getTotalPrice();
  },
  selectAll(e) {
    let selectAllStatus = this.data.selectAllStatus; // 是否全选状态
    selectAllStatus = !selectAllStatus;
    let coupon = this.data.coupon;
    for (let i = 0; i < coupon.length; i++) {
      coupon[i].selected = selectAllStatus; // 改变所有商品状态
    }
    this.setData({
      selectAllStatus: selectAllStatus,
      coupon: coupon
    });
    this.getTotalPrice(); // 重新获取总价
  },
  getTotalPrice() {
    var that = this;
    let coupon = this.data.coupon; // 获取购物车列表
    let total = 0;
    for (let i = 0; i < coupon.length; i++) { // 循环列表得到每个数据
      if (coupon[i].selected) { // 判断选中才会计算价格
        total += coupon[i].number * coupon[i].price; // 所有价格加起来
      }
    }
    that.setData({ // 最后赋值到data中渲染到页
      coupon: coupon,
      money: total.toFixed(2)
    });
  },
  deleteList(e) {
    var that = this
    const index = e.currentTarget.dataset.index;
    let coupon = this.data.coupon;
    wx.showModal({
      title: '',
      content: '是否要删除？',
      success(res) {
        if (res.confirm) {
          coupon.splice(index, 1)
          that.setData({
            coupon: coupon
          })
          that.getTotalPrice();
        }
      }
    })
    if (!coupon.length) { // 如果购物车为空
      this.setData({
        hasList: false // 修改标识为false，显示购物车为空页面
      });
      this.getTotalPrice();
    } else { // 如果不为空
      this.getTotalPrice(); // 重新计算总价格
    }
  },
  selectedTap() {
    var coupon = this.data.coupon
    var selectAllStatus = this.data.selectAllStatus
    if (coupon.selected = true) {
      selectAllStatus = true
    } else {
      selectAllStatus = false
    }
    this.setData({
      selectAllStatus: selectAllStatus
    })
  },
  onReady: function() {
    // 页面渲染完成

  },
  onShow: function() {
    // 页面显示
    this.getCartList();
  },
  onHide: function() {
    // 页面隐藏

  },
  onUnload: function() {
    // 页面关闭

  }
  
})