addicon
标识符 默认为false 不选中
<div v-for="(item,index) in shoppingCart" :key="index" @click="changeAddicon(item)">
<!--删除小圆点-->
<div style="display: flex;align-items: center;padding-left:19rpx;padding-right:14rpx;">
<image v-if="item.addicon ==false" src="../../static/icon/icon_weixuanzhong.png" style="height:34rpx;width:34rpx;"></image>
<image v-else src="../../static/icon/icon_xuanzhong1@2x.png" style="height:34rpx;width:34rpx;"></image>
</div>
</div>
底部价格
<div style="margin-left:23rpx;display:flex;align-items:center;" >
<image :src="bol==true?'/static/icon/icon_xuanzhong1@2x.png':'/static/icon/icon_weixuanzhong.png'" style="height:34rpx;width:34rpx;"
@click="SelectAll()"></image>
<div style="font-size:26rpx;color:#444444;margin-left:23rpx;">全选</div>
<div style="font-size:26rpx;color:#444444;margin-left:35rpx;">合计:</div>
<div style="font-size:26rpx;color:#FF800A;margin-left:10rpx;">¥ {{all_total_fee}}</div>
</div>
标识取反
a.addicon = !a.addicon;
默认给addicon 字段传一个false
// 列表接口
apiPortalProductGetListByCon() {
this.$api.apiPortal_product_getListByCon({}).then(res => {
this.card_goods = res.data.ret.data.map(function(data){
return{
addicon:false,
name:data.name
}
})
console.log("购物车列表", res)
})
},
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
NumberObject.toFixed(num)
export default {
data() {
return {
bol: false, //全选状态
all_total_fee: 0, //总金额
};
},
methods:{
//改变购物车标识状态
changeAddicon(a) {
a.addicon = !a.addicon;
this.is_allChange();
//只要有一个未选中,就要取消全选状态
//循环购物车长度,判断购物车的标识状态如果为false `addicon==false` ;全选状态不显示
for (let i = 0; i < this.shoppingCart.length; i++) {
if (this.shoppingCart[i].addicon == false) {
this.bol = false;
}
}
this.totalPrice();
},
//计算总价格方法
total_price() {
let allNum = 0;
for (let i = 0; i < this.shoppingCart.length; i++) {
if (this.shoppingCart[i].addicon && (!this.is_invalidGoods(this.cart_goods[i]))) {
console.log(this.shoppingCart[i].sku.sale_price);
console.log(this.shoppingCart[i].amount);
allNum += this.shoppingCart[i].sku.sale_price * this.cart_goods[i].amount;
}
}
this.all_total_fee = allNum.toFixed(2);
},
//判断是否全选
is_allChange() {
let noChange = true;
for (let i = 0; i < this.shoppingCart.length; i++) {
if (noChange) {
noChange = this.shoppingCart[i].addicon; //将标识符状态赋值给 noChange
}
}
console.log('noChange', noChange);
this.bol = noChange;
},
//点击全选按钮
SelectAll() {
this.bol = !this.bol;
for (let i = 0; i < this.shoppingCart.length; i++) {
this.shoppingCart[i].addicon = this.bol;
}
this.totalPrice();
},
}
}
捕获.PNG
网友评论