vue购物车（多商家）

展示效果

代码

<template>
    <div class="hello">
        <div v-for="(item, index) in list" :key="index" class="items">
            <el-checkbox v-model="item.isclick" @change="isClickName(item)">{{ item.name }}</el-checkbox>
            <div v-for="(its, i) in item.bookList" :key="i" class="childerList">
                <div class="its">
                    <el-checkbox v-model="its.isclick" @change="changeItem(item)"></el-checkbox>
                    <div class="margin-l">书名：{{ its.bookname }}</div>
                    <div class="margin-l">价格：{{ its.bookprice }}</div>
                    <div class="margin-l">
                        数量：
                        <div style="display:flex;">
                            <button :disabled="its.num <= 1" @click="its.num--">-</button>
                            <div style="margin:0px 10px;">{{ its.num }}</div>
                            <button @click="its.num++">+</button>
                        </div>
                    </div>
                </div>
                <el-button size="mini" type="danger" @click="deleteItem(item, i, index)">删除</el-button>
            </div>
        </div>
        <div class="footer">
            <div style="display: flex;">
                <el-checkbox v-model="isall" @change="allChange(isall)">全选</el-checkbox>
                <div class="margin-l">已选{{ alllist.length }}件</div>
                <div class="margin-l">合计:{{ allPrice }}</div>
            </div>
            <el-button size="mini" type="primary" @click="getShoplist">提交订单</el-button>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'ShopingCar',
    data() {
        return {
            //是否全选
            isall: false,
            //模拟数据
            list: [
                {
                    name: '赵老师',
                    isclick: false,
                    bookList: [
                        {
                            bookname: '小红书',
                            bookprice: 100,
                            num: 1,
                            isclick: false,
                        },
                        {
                            bookname: '灵魂摆渡人',
                            bookprice: 40,
                            num: 1,
                            isclick: false,
                        }
                    ]
                },
                {
                    name: '张老师',
                    bookList: [
                        {
                            bookname: '月亮与六便士',
                            bookprice: 40,
                            num: 1,
                            isclick: false,
                        }
                    ]
                }
            ],
        }
    },
    computed: {
        //获取总价格
        allPrice() {
            let sum = 0;
            this.list.forEach(item => {
                item.bookList.forEach(its => {
                    if (its.isclick) {
                        sum += its.bookprice * its.num
                    }
                })
            })
            return sum
        },
        //获取选中的商品
        alllist() {
            let alllistActive = [];
            this.list.forEach(item => {
                item.bookList.forEach(its => {
                    if (its.isclick) {
                        alllistActive.push(its)
                    }
                })
            })
            return alllistActive
        }
    },
    methods: {
        //判断是否全选
        isallclick() {
            const isActve = this.list.every((item) => {
                return item.isclick
            })
            if (isActve) { this.isall = true } else { this.isall = false }
        },
        //点击店铺
        isClickName(item) {
            if (item.isclick) {
                item.bookList.forEach(its => {
                    its.isclick = true
                });
            } else {
                item.bookList.forEach(its => {
                    its.isclick = false
                });
            }
            this.isallclick()
        },
        //点击单个商品
        changeItem(item) {
            const isActve = item.bookList.every((item) => {
                return item.isclick
            })
            if (isActve) { item.isclick = true } else { item.isclick = false }
            this.isallclick()
        },
        //点击全选
        allChange(isall) {
            if (isall) {
                this.list.forEach(item => {
                    item.isclick = true
                    item.bookList.forEach(item => {
                        item.isclick = true
                    });
                })
            } else {
                this.list.forEach(item => {
                    item.isclick = false
                    item.bookList.forEach(item => {
                        item.isclick = false
                    });
                })
            }

        },
        //点击删除
        deleteItem(item, i, index) {
            item.bookList.splice(i, 1)
            if (item.bookList.length == 0) {
                this.list.splice(index, 1)
            }
        },
        //获取选中的数据列表,直接使用计算属性中的alllist
        getShoplist() {
            console.log(this.alllist);
        }
    }
}
</script>
<style scoped lang="scss">
.margin-l {
    margin-left: 20px;
    display: flex;
    align-content: center;
}

.hello {
    border: 1px solid #999999;
    padding: 20px;
    border-radius: 10px;

    .items {
        border: 1px solid #999999;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 10px;

        .childerList {
            display: flex;
            margin: 30px;
            align-items: center;
            justify-content: space-between;

            .its {
                display: flex;
                align-items: center;
            }
        }
    }
}

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>