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