微信小程序购物车功能

<view class='shop-mana'>

<text class='management'>管理您的购物车</text>

<text class='goto'>点击立即前往>></text>

</view>

<view class='carts'>

<view class='goods' wx:for="{{goods}}" wx:key="goods">

<view class='goods-check'>

<!-- wx:if 是否选择显示不同图标 -->

<icon wx:if="{{item.selected}}" type="success" color="red" bindtap="change" data-index="{{index}}" />

<icon wx:else type="circle" bindtap="change" data-index="{{index}}"/>

<!-- <icon type="{{item.select}}" size="22" data-index="{{index}}" data-select="{{item.select}}" bindtap="change" /> -->

</view>

<view class='goods-details'>

<view class='goods-img'>

<image src='{{staticImg}}shopping-carts/item1.png'></image>

</view>

<view class='goods-title'>

<view class='goods-name'>{{item.goodsName}}</view>

<view class='goods-apply'>{{item.goodsApply}}</view>

<view class='goods-bot'>

<text class='goods-pri'>¥{{item.goodsPrice}}</text>

<view class="goods-number">

<button class="goods-minu" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">-</button>

<text class="num">{{item.num}}</text>

<button class="goods-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button>

</view>

</view>

</view>

</view>

</view>

</view>

<view class='goods-footer'>

<view class="allSelect">

<!-- <icon type="{{allSelect}}" size="22" data-select="{{allSelect}}" bindtap="allSelect" class='allse' /> -->

<icon wx:if="{{selectAllStatus}}" type="success" color="red" bindtap="selectAll" class='allse' />

<icon wx:else type="circle" bindtap="selectAll" class='allse'/>

<view class="allSelect-text">全选</view>

</view>

<text class='sum'>合计:</text>

<text class='total-pri'>¥{{totalPrice}}</text>

<view class='settlement'>结算

<text>({{num}})</text>

</view>

</view>

　　

page{
background-color:#f0f0f0;
font-family: "微软雅黑";
}
.shop-mana{
width: 100%;
height: 70rpx;
background-color:#fffeee;
border-bottom: 1rpx solid #ccc;
}
.management{
float: left;
height: 70rpx;
line-height: 70rpx;
font-size: 26rpx;
margin-left: 40rpx;
}
.goto{
float: right;
height: 70rpx;
line-height: 70rpx;
font-size: 26rpx;
color: #c00;
margin-right: 30rpx;
cursor: pointer;
}
.carts{
width: 100%;
height: 520px;
overflow-y: scroll;
}
.goods{
width: 100%;
height: 275rpx;
background: #fff;
margin-bottom: 15rpx;
box-sizing: border-box;
padding:35rpx 17rpx;
}
.goods-check{
float: left;
width: 74rpx;
height: 205rpx;
line-height: 205rpx;
text-align: center;
/* */
}
.checkbox{
width: 36rpx;
height: 36rpx;
}
.goods-details{
float: left;
width: 642rpx;
height: 205rpx;
}
.goods-img{
float: left;
width: 200rpx;
height: 200rpx;
margin-top:5rpx;
margin-right: 20rpx;
}
.goods-img image{
width: 200rpx;
height: 200rpx;
}
.goods-title{
float: left;
width: 423rpx;
height: 205rpx;
}
.goods-name{
width:100%;
height: 70rpx;
margin-bottom: 15rpx;
font-size: 30rpx;
line-height: 35rpx;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.goods-apply{
font-size: 24rpx;
width: 100%;
color: #888888;
height: 30rpx;
line-height: 30rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.goods-bot{
width: 100%;
height: 60rpx;
line-height: 60rpx;
margin-top:35rpx;
}
.goods-pri{
float: left;
height: 60rpx;
line-height: 60rpx;
font-size: 32rpx;
font-weight: 700;
color: #c00;
}
.goods-number{
margin-top:5rpx;
float: right;
width:160rpx;
height: 60rpx;
line-height: 60rpx;
}
.goods-minu{
float: left;
width:50rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
font-size: 28rpx;
padding:0;
border-radius: 0;

}
.num{
  float: left;
  width:40rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-size: 24rpx;
}
.goods-add{
  float: left;
  width:50rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-size: 28rpx;
  padding:0;
  border-radius: 0;
}
.goods-num{
  float: right;
  margin-right: 15rpx;
  height: 35rpx;
  line-height: 35rpx;
  font-size: 26rpx;
  color: #888888;
}
.goods-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color:#fff;
  /*  */
}
.allSelect{
  float: left;
  width:150rpx;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 24rpx;
  box-sizing: border-box;
  padding-left: 30rpx;
}
.allse{
  float: left;
  height: 100rpx;
  line-height: 100rpx;
  margin-top:18rpx;
}
.allSelect-text{
  float: left;
  margin-left:10rpx;
  font-size: 24rpx;
  height: 100rpx;
  line-height: 100rpx;
}
.sum{
  float: left;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 24rpx;
  margin-left:25rpx;
}
.total-pri{
  float: left;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 32rpx;
  color:#c00;
  margin-left: 5rpx;
}
.settlement{
  float: right;
  width: 260rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  background-color:#c00;
  cursor: pointer;
}

const app = getApp()
Page({
data: {
staticImg: app.globalData.staticImg,
goods:[
{
code: "0001",
goodsName: '汽车玻璃水大瓶雨刷精车用雨刮水清洁剂清洗液除油膜 2L……',
goodsApply: '适用于各种型号的车辆',
goodsPrice: '178.99',
num: '1',
},
{
code: "0002",
goodsName: '汽车玻璃水大瓶雨刷精车用雨刮水清洁剂清洗液除油膜 2L……',
goodsApply: '适用于各种型号的车辆',
goodsPrice: '178.99',
num: '1',
},
 
],
totalPrice:'0.00',
num:'0',
},
// 单个选中
change: function (e) {
var that = this;
const index = e.currentTarget.dataset.index; // 获取data- 传进来的index
var goods = that.data.goods; // 获取购物车列表
var selectAllStatus = that.data.selectAllStatus; //获取全选状态
const selected = goods[index].selected; // 获取当前商品的选中状态
goods[index].selected = !selected; // 改变状态
goods[index]['selected'] = !selected;
//判断有一个没有选中，全选取消
var j = 0;
for (var i = 0; i < goods.length; i++) {
if (goods[i].selected == true) {
j++;
continue;
} else {
selectAllStatus = false;
}
}
if (j == goods.length) {
selectAllStatus = true;
}
//如果都选中，全选也选中实现
that.setData({
goods: goods,
selectAllStatus: selectAllStatus,
});
//调用计算数目方法
that.countNum()
//计算金额
that.count()
},
// 全选事件
selectAll: function(e) {
var that = this;
var selectAllStatus = that.data.selectAllStatus; // 是否全选状态
selectAllStatus = !selectAllStatus;
var goods = that.data.goods;
for (var i = 0; i < goods.length; i++) {
goods[i].selected = selectAllStatus;
goods[i]['selected'] = selectAllStatus; // 改变所有商品状态
}
that.setData({
selectAllStatus: selectAllStatus,
goods: goods
});
//调用计算数目方法
that.countNum()
//计算金额
that.count()
},
//加法
addtion: function (e) {
console.log(e)
var that = this
//得到下标
var index = e.currentTarget.dataset.index
//得到点击的值
var num = e.currentTarget.dataset.num
//默认99件最多
if (num < 100) {
num++
}
//把新的值给新的数组
var newList = that.data.goods
newList[index].num = num

    //把新的数组传给前台
    that.setData({
      goods: newList
    })
    //调用计算数目方法
    that.countNum()
    //计算金额
    that.count()
  },
  //减法
  subtraction: function (e) {
    var that = this
    //得到下标
    var index = e.currentTarget.dataset.index
    //得到点击的值
    var num = e.currentTarget.dataset.num
    //把新的值给新的数组
    var newList = that.data.goods
    //当1件时，点击移除
    if (num == 1) {
      num==1
    } else {
      num--
      newList[index].num = num
    }
    //把新的数组传给前台
    that.setData({
      goods: newList
    })
    //调用计算数目方法
    that.countNum()
    //计算金额
    that.count()
  },
  //计算数量
  countNum: function () {
    var that = this
    //遍历数组，把既选中的num加起来
    var newList = that.data.goods
    var allNum = 0
    for (var i = 0; i < newList.length; i++) {
      if (newList[i].selected) {
        allNum += parseInt(newList[i].num)
      }
    }
    that.setData({
      num: allNum
    })
  },
  //计算金额方法
  count: function () {
    var that = this
    //选中的订单，数量*价格加起来
    var goodsPrice = parseFloat(that.data.goods.goodsPrice)
    var newList = that.data.goods
    var newCount = 0.00
    for (var i = 0; i < newList.length; i++) {
      if (newList[i].selected) {
        newCount += newList[i].goodsPrice * newList[i].num
      }
    }
    that.setData({
      // newCount: newCount.toFixed(2),
      totalPrice: newCount,
    })
  },
})