index.wxml
<!-- 当购物车有商品时 -->
<view>
<!-- 旗舰店标题 -->
<view class="cartTitleBigView">
<view class="text1">
<image src="/images/icons/usercenter.png" class="img1"></image>
<view>青岛啤酒官方旗舰店</view>
<image src="/images/icons/usercenter.png" class="img2"></image>
</view>
<view class="text2" bindtap="editorGoods">{{editor}}</view>
</view>
<!-- 购物车商品 -->
<checkbox-group bindchange="checkboxChange">
<view class="cartGoodsBigView" wx:for="{{cartGoodsList}}" wx:key="key">
<!-- 换购 -->
<!-- <view class="buyBigView">
<checkbox class="radio" value="{{item.goods_id}}" checked="{{item.checked}}"></checkbox>
<view class="text1">换购</view>
<view class="text2">
<text>再购40元,立享【满99元可换购】</text>
<image src="/images/indexImages/icon11.png"></image>
</view>
<view class="text3">
<text>去凑单</text>
<image src="/images/indexImages/icon12.png"></image>
</view>
</view> -->
<!-- 商品信息 -->
<view class="goodsInfoBigView">
<view style="display:flex;height:180rpx;align-items: center;">
<checkbox class="radio" value="{{item.goods_id}}" checked="{{item.checked}}"></checkbox>
<image src="/images/icons/usercenter.png" class="goodsInfoImage"></image>
</view>
<view class="goodsInfoView">
<view class="text1">青岛啤酒10度500ml*12福禧罐/箱</view>
<view class="text2">
<text>500ml*12听</text>
<image src="/images/icons/usercenter.png"></image>
</view>
<view class="text3">担保</view>
<view class="goodsInfoPriceView">
<view>￥<text class="price">59</text></view>
<view class="goodsInfoNumberView">
<view style="{{num==0?'backcolor:#f7f8fa;color:#c8c9cc;':''}}" bindtap="reduceNum">-</view>
<view>{{num}}</view>
<view bindtap="increaseNum">+</view>
</view>
</view>
</view>
</view>
</view>
</checkbox-group>
</view>
<!-- 编辑商品 弹出框 -->
<view class="edtiorBigView">
<checkbox-group class="checkAllView" bindtap="checkAll">
<label>
<checkbox checked="{{select_all}}"></checkbox>全选
</label>
</checkbox-group>
<view class="delete {{select_single?'deleteSelect':''}}" wx:if="{{editor=='完成'}}" bindtap="delete_car">删除</view>
<view wx:else class="settlementView">
<view class="totalView">
<view class="text1">合计：<text class="text2">￥</text><text class="text3">59</text></view>
<view class="text4">不含运费</view>
</view>
<view class="settlement {{select_single?'settlementSelect':''}}">结算</view>
</view>
</view>
index.js
Page({
data:{
// 购物车商品
cartGoodsList:[
{'goods_id':1,'checked':true},
{'goods_id':1,'checked':true},
{'goods_id':1,'checked':true}
],
// 全选
select_all: false,
select_single:false, //单选
checkbox_goodsid:'',
// 商品数量
num:0,
// 编辑
editor:'编辑',
},
// 编辑商品
editorGoods:function(){
var that=this;
var arr='0';
if(this.data.editor=='编辑'){ //所有商品不被选中
for (let i = 0; i < that.data.cartGoodsList.length; i++) {
//循环给每个商品的checked赋值
that.data.cartGoodsList[i].checked =false
}
console.log("arr="+arr)
//赋值
that.setData({
cartGoodsList: that.data.cartGoodsList,
select_all:false,
editor:'完成'
})
}else{
this.setData({
editor:'编辑'
})
}
},
// 全选
checkAll:function(){
this.setData({
checkAll:!this.data.checkAll,
})
var that=this;
var arr='0';
//that.data.cartGoodsList.length是商品的个数
for (let i = 0; i < that.data.cartGoodsList.length; i++) {
//循环给每个商品的checked赋值
that.data.cartGoodsList[i].checked = (!that.data.select_all)
if (that.data.cartGoodsList[i].checked == true) {
// 全选获取选中的值 以字符串拼接的形式 拼成一个字符串
arr = arr +","+ that.data.cartGoodsList[i].goods_id;
}
}
console.log("arr="+arr)
//赋值
that.setData({
cartGoodsList: that.data.cartGoodsList,
select_all: (!that.data.select_all),
checkbox_goodsid: arr
})
// 设置按钮的颜色
if(that.data.select_all==true){
that.setData({
select_single:true
})
}else{
that.setData({
select_single:false
})
}
},
// 单选
checkboxChange: function (e) {
var that =this;
//这加个0 是我为了方便后台处理。
var checkbox_goodsid = 0+ ','+that.data.checkbox_goodsid;
this.setData({
checkbox_goodsid: checkbox_goodsid,//单个选中的值
})
console.log("checkbox_goodsid=" +that.data.checkbox_goodsid)
// 计算选中了多少个商品 // 设置按钮的颜色
var value=e.detail.value;
console.log(value.length);
console.log(that.data.cartGoodsList.length); //总商品的个数
if(value.length>0 &&value.length<that.data.cartGoodsList.length){
//选中有但没有完全选中时
that.setData({
select_single:true,
select_all:false,
})
}else if(value.length==that.data.cartGoodsList.length){
//商品全部选中的时候
that.setData({
select_single:true,
select_all:true,
})
}else{ //没有选中商品时
that.setData({
select_single:false,
select_all:false,
})
}
},
})
index.wxss
/* 旗舰店标题 */
.cartTitleBigView{
width: 100%;
height: 100rpx;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
box-sizing: border-box;
}
.cartTitleBigView .text1{
height: 100%;
display: flex;
align-items: center;
font-size: 37rpx;
color: #333333;
}
.cartTitleBigView .text1 .img1{
width:33rpx ;
height: 33rpx;
margin:5rpx 15rpx 0 0;
}
.cartTitleBigView .text1 .img2{
width: 30rpx;
height: 30rpx;
margin:5rpx 0 0 15rpx;
}
.cartTitleBigView .text2{
font-size: 32rpx;
color: #505050;
}
/* 购物车商品 */
.cartGoodsBigView{
width: 95%;
margin: 30rpx auto;
background-color: white;
border-radius: 20rpx;
padding: 30rpx 20rpx;
box-sizing: border-box;
}
/* 换购 */
.buyBigView{
width: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
margin-bottom: 40rpx;
}
checkbox .wx-checkbox-input {
/* 自定义样式.... */
height: 35rpx;
width: 35rpx;
border-radius: 50%;
border: 2rpx solid #6cbe72;
background: transparent;
margin-bottom: 5rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
border-radius: 50%; /* 圆角 */
width: 35rpx; /* 选中对勾后，对勾背景的大小，不要超过背景的尺寸 */
height: 35rpx; /* 选中对勾后，对勾背景的大小，不要超过背景的尺寸 */
line-height: 35rpx;
text-align: center;
font-size: 25rpx; /* 对勾大小 30rpx */
color: #fff; /* 对勾颜色 白色 */
background: #6cbe72;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
.buyBigView .text1{
padding: 3rpx 8rpx;
box-sizing: border-box;
background-color: #f0f9f1;
border-radius: 50rpx;
font-size: 26rpx;
color: #6cbe72;
margin-right: 10rpx;
}
.buyBigView .text2{
flex: 1;
display: flex;
align-items: center;
font-size: 27rpx;
color: #333333;
}
.buyBigView .text2 image{
width: 35rpx;
height: 35rpx;
}
.buyBigView .text3{
display: flex;
align-items: center;
font-size: 27rpx;
color:#6cbe72 ;
}
.buyBigView .text3 image{
width: 25rpx;
height: 25rpx;
margin-top: 5rpx;
}
/* 商品信息 */
.goodsInfoBigView{
width: 100%;
display: flex;
}
.goodsInfoImage{
width: 190rpx;
height:190rpx;
border-radius: 20rpx;
margin-right: 15rpx;
}
.goodsInfoView{
flex:1;
height: 100%;
font-size: 28rpx;
word-break: break-all;
}
.goodsInfoView .text2{
width: 220rpx;
background-color: #f7f8fa;
padding: 0 20rpx;
box-sizing: border-box;
height: 50rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin: 20rpx 0;
font-size: 26rpx;
color: #969799;
border-radius: 10rpx;
}
.goodsInfoView .text2 image{
width: 25rpx;
height: 25rpx;
}
.goodsInfoView .text3{
font-size: 26rpx;
color: #0cc363;
margin-bottom: 20rpx;
}
.goodsInfoPriceView{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 30rpx;
color:#7ac47f;
}
.goodsInfoPriceView .price{
font-size: 40rpx;
font-weight: bold;
}
.goodsInfoNumberView{
display: flex;
align-items: center;
color: #323233;
}
.goodsInfoNumberView>view{
width: 70rpx;
height: 60rpx;
background-color:#f7f8fa;
display: flex;
align-items: center;
justify-content: center;
margin-left: 5rpx;
font-size:35rpx;
border-radius: 5rpx;
}
/* 编辑弹出框 */
pages{
position: relative;
}
.edtiorBigView{
width: 100%;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding:15rpx 30rpx;
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
}
.checkAllView{
display: flex;
align-items: center;
font-size: 33rpx;
color: #585858;
}
.edtiorBigView .delete{
width: 220rpx;
height: 90rpx;
font-size: 40rpx;
font-weight: bold;
background-color: #e7e9ec;
color: #969799;
text-align: center;
line-height: 80rpx;
border-radius: 50rpx;
}
.edtiorBigView .deleteSelect{
background-color: #6cbe72;
color: white;
}
/* 结算 */
.settlementView{
display: flex;
align-items: center;
}
.totalView{
margin-right: 20rpx;
text-align: right;
}
.totalView .text1{
font-size: 28rpx;
font-weight: bold;
}
.totalView .text2{
color:#6cbe72 ;
}
.totalView .text3{
font-size: 35rpx;
color:#6cbe72 ;
}
.totalView .text4{
color:gray ;
font-size: 30rpx;
}
.settlementView .settlement{
width: 220rpx;
height: 90rpx;
font-size: 40rpx;
font-weight: bold;
background-color: #e7e9ec;
color: #969799;
text-align: center;
line-height: 80rpx;
border-radius: 50rpx;
}
.settlementView .settlementSelect{
background-color: #6cbe72;
color: white;
}