美文网首页
根据标识判断是否选择哪一个(购物车)

根据标识判断是否选择哪一个(购物车)

作者: 琳媚儿 | 来源:发表于2020-08-24 12:15 被阅读0次

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

相关文章

网友评论

      本文标题:根据标识判断是否选择哪一个(购物车)

      本文链接:https://www.haomeiwen.com/subject/qnagjktx.html