<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,

})

},

})