购物车商家全选 全部全选 商品单选

<template>
    <div class="cart">
        <div class="header  header-cart" style="position: relative;">
            <div class="header-cart-title">购物车</div>
        </div>
        <div class="shop-content-bot" style="padding-top: 0rem;">
            <div class="empty " v-if="!dataShow">
                <div class="empty-img"><img src="@/assets/image/icon/empty_cart.png" alt=""></div>
                <p class="empty-text">暂无购物车...</p>
            </div>
            <div class="cart-wrapper " v-else="cartList.length > 0">
                <template v-for="(item,index) in cartList">
                    <div class="cart-item">
                        <div class="cart-item-top">
                            <div class="cart-shop-select shop-checkbox"  @change="checkAll">
                                <input type="checkbox" v-model="item.checked" @change="_checkAll(item)" :value="item.sellerid" class="shop-select shopChoice">
                            </div>
                            <div class="cart-shopstore-title"><a   href="javascript:;">{{item.username}}</a></div>
                        </div>
                        <div class="cart-item-goods">
                            <div v-for="(gooditem,goodindex) in item.goodslist" class="cart-item-good-list swipe-delete-element" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="skip">
                                <div class="cart-item-good-listbox">
                                    <div class="cart-good-select shop-checkbox " @change="handleCheck(gooditem,goodindex)">
                                        <input type="checkbox" v-model="gooditem.checked" :value="gooditem.goodsid" class="good-select son_check">
                                    </div>
                                    <div class="cart-item-good-list-right">
                                        <div class="cart-item-good-list-right-img"><img :src="gooditem.thumb" :alt="gooditem.goodstitle"></div>
                                        <div class="cart-item-good-list-right-info">
                                            <div class="cart-item-good-list-title"><a href="javascript:;">{{gooditem.goodstitle}}</a></div>
                                            <div class="cart-item-good-list-type">{{gooditem.goodstitle}}</div>
                                            <div class="sum_price" style="display: none;">{{gooditem.sumprice}}</div>
                                            <div class="cart-item-good-list-price price">${{gooditem.price}}</div>
                                            <div class="cart-item-good-list-delete delBtn">
                                                <i class="shop-icon shop-icon-delete"></i>
                                            </div>
                                            <div class="cart-item-good-list-action">
                                                <!-- 当购物车为1 时 加 class  reSty -->
                                                <div class="cart-item-good-list-btn reduce">-</div>
                                                <div class="cart-item-good-list-num  sum">{{gooditem.goodsnum}}</div>
                                                <div class="cart-item-good-list-btn plus">+</div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                                <div class="cart-item-good-list-slide">
                                    <div class="cart-item-good-list-slide-item">
                                        <div class="art-item-good-list-slide-s1"><i class="shop-good-collect-cart"></i></div>
                                        <p>收藏</p>
                                    </div>
                                    <div class="cart-item-good-list-slide-item delBtn">
                                        <div class="art-item-good-list-slide-s1"><i class="shop-good-delete-cart"></i></div>
                                        <p>删除</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </template>
                
                
            </div>
            
        </div>
        <div style="height: 0.9rem;"></div>
        <div class="cartfooter">
            <div class="cartfooter-wrapper">
                <div class="cartfooter-all-checkbox">
                    <div class="shop-checkbox" @change="checkAll()"><input type="checkbox" v-model="checkedAll" class="good-select whole_check"></div> <span>全选</span>
                </div>
                <div class="cartfooter-right">
                    <div style="display: none;" class="piece_num">0</div>
                    <div class="cartfooter-info">
                    
                        <span>合计：</span><span class="total_text">$0.00</span>
                    </div>
                    <div class="cartfooter-right-btn cartfooter-right-btn-none">结算</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getCartMultidata} from "@/network/cart.js";
export default {
    name: "Cart",
    data() {
        return {
            // startX : 0 ,
            // endX : 0 ,
            checkedAll: false, //控制是否全选
            total_IEPC: '0.0000', //总价格默认0
            dataShow: true,//是否有数据
            cartList:[],//购物车列表
        };
    },
    methods: {
        // 初始化购物车列表
        init() {
            var token = this.$store.state.token;
            var _this = this;
            getCartMultidata(this.$qs.stringify({
                token:token
            })).then(res => {

                if(res.code==200){
                    this.cartList = res.data;
                    this.dataShow = true;
                    console.log(this.cartList)
                    this.cartList.forEach(item => {
                        this.$set(item, "checked", false) //Vue 解决不能检测到对象属性的添加或删除
                        if (item.goodslist) {
                            item.goodslist.forEach((citem) => {
                                this.$set(citem, "checked", false)
                                    // citem.checked = false;
                            })
                        }
                    });
                }else{
                    this.dataShow = false;
                }
            })
        },
        // 修改购物车数量
        editCart(type,item) {
            if(type === 'add') {
                item.productNum ++
            }else if(type === 'minus') {
                item.productNum --
            }else {
                item.checked = !item.checked
            }
        },
        


        // 全选
        checkAll() {
            this.cartList.forEach(item => {
                item.checked = this.checkedAll;
                if (item.goodslist) {
                    item.goodslist.forEach(citem => {
                        citem.checked = this.checkedAll;
                    })
                }
            })
        },
        //商家全选
        _checkAll(val) {
            val.goodslist.forEach(item => {
                item.checked = val.checked;
            });
            if (this.cartList.every(item => item.checked)) {
                this.checkedAll = true;
            } else {
                this.checkedAll = false;
            }

        },
        //商品选择框
        handleCheck(item, index) {
            var check = []; //保存中间层是否被选中的布尔值
            this.cartList.forEach((items, index) => {
                if (items.goodslist) {
                    var bool = items.goodslist.every(citem => citem.checked);
                    if (bool) {
                        items.checked = true;
                    } else {
                        items.checked = false;
                    }
                    check.push(bool);
                }
            })
            if (check.indexOf(false) == -1) {
                this.checkedAll = true;
            } else {
                this.checkedAll = false;
            }
        },




    },
    components: {
    },
    computed: {
        checkAllFlag() {
            //每一项返回 true 整体函数返回 true
            return this.cartList.every((item) => {
                return item.checked
            })
        },
        // 判断购物车是否有选中的商品
        checkedCount() {
            return this.cartList.some((item) => {
                return item.checked
            })
        },
        // 计算总金额
        totalPrice() {
            let money = 0
            this.cartList.forEach((item) => {
                if(item.checked) {
                money += item.productPrice * item.productNum
                }
            })
            return money
        }
    },
    filters: {
        currency(value) {
        if(!value) return 0.00
        return '￥' + value.toFixed(2) + '元'
        }
    },
    mounted(){
        // 初始化购物车列表
        this.init();
    },
    created() {
    }
};
</script>
<style scoped>

</style>