vue实现购物车全选批量删除价格计算等功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        table {
            width: 1000px;
            border-collapse: collapse;
            text-align: center;
        }

        tr {
            height: 140px;
        }

        .title {
            height: 70px;
            border: 1px solid #333
        }

        .good-desc {
            display: flex;
        }

        ul,
        li {
            list-style: none;
            text-align: left;
            font-size: 14px;
        }

        img {
            width: 100px;
            height: 100px;
        }

        .num input {
            width: 30px;
            height: 30px;
            text-align: center;
            border: 0
        }

        .num button {
            width: 25px;
        }

        .footer {
            width: 1000px;
            display: flex;
            justify-content: space-between;
        }

        .left span {
            color: #aaa;
            font-size: 14px;
            margin-left: 30px
        }

        .right {
            color: #333;
        }

        .right b {
            color: red
        }

        .right button {
            border: 0;
            width: 60px;
            height: 40px;
            background: orangered;
            color: #fff
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>购物清单</h2>
        <table>
            <tr class="title">
                <th><input type="checkbox" v-model='statusAll' @change='chooseAll'>全选</th>
                <th v-for='item in title'>{{item}}</th>
            </tr>
            <tr v-for='item,index in datalist'>
                <td><input type="checkbox" @change='chooseHandle()' v-model='item.status'></td>
                <td class="good-desc">
                    <img :src="item.img" alt="">
                    <ul>
                        <li>{{item.title}}</li>
                        <li>品牌:{{item.brand}}</li>
                        <li>产地:{{item.place}}</li>
                        <li>规格:{{item.norms}}</li>
                        <li>起定量:{{item.startnum}}</li>
                        <li>配送仓库:{{item.store}}</li>
                    </ul>
                </td>
                <td class="num">
                    <button @click='changeNum("-",item)'>-</button>
                    <input type="text" v-model='item.num'>
                    <button @click='changeNum("+",item)'>+</button>
                </td>
                <td>{{item.price}}</td>
                <td>{{item.total}}</td>
                <td>
                    <button @click='delHandle(index)'>删除</button>
                </td>
            </tr>
        </table>
        <div class="footer">
            <div class="left">
                <span @click='delAll'>删除所选商品</span>
                <span>继续购物</span>
            </div>
            <div class="right">
                <span><b>{{num}}</b>件商品总计(不含运费):<b>{{priceAll}}</b></span>
                <button>去结算</button>
            </div>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                title: ['商品', '数量', '单价', '金额(元)', '操作'],
                datalist: [
                    {title: "11111",brand: "哈哈",place: "中国",norms: "大",startnum: "216千克",store: "上海沧海仓库",num: 4,price: 200,total: 800,img: "./goods.png",status: false},
                    {title: "22222",brand: "哈哈",place: "中国",norms: "大",startnum: "216千克",store: "上海沧海仓库",num: 4,price: 200,total: 800,img: "./goods.png",status: false},
                    {title: "33333",brand: "哈哈",place: "中国",norms: "大",startnum: "216千克",store: "上海沧海仓库",num: 4,price: 200,total: 800,img: "./goods.png",status: false}
                ],
                statusAll: false,
                indexList: []
            },
            computed: {
                //所选商品总价
                priceAll() {
                    var totalprice = 0;
                    this.datalist.forEach((item) => {
                        if (item.status === true) {
                            totalprice += item.total
                        }
                    })
                    return totalprice
                },
                //所选商品总数
                num() {
                    var list = this.datalist.filter((item, index, arr) => {
                        return item.status === true
                    })
                    return list.length
                }
            },
            methods: {
                //单选
                chooseHandle() {
                    this.statusAll = this.datalist.every(item => {
                        return item.status === true
                    })
                },
                //全选
                chooseAll() {
                    console.log(this.statusAll)
                    this.datalist.forEach((item) => {
                        item.status = this.statusAll
                    })
                },
                //改变数值
                changeNum(type, item) {
                    if (type === '+') {
                        item.num++
                    } else {
                        item.num--
                    }
                    if(item.num<=0){
                        item.num=0
                    }
                    item.total = item.num * item.price
                    this.chooseHandle()
                },
                //删除单个
                delHandle(index) {
                    this.datalist.splice(index, 1)
                },
                //删除所选
                delAll() {
                    this.datalist = this.datalist.filter((item) => {
                        return item.status !== true
                    })
                }

            }
        })
    </script>
</body>

</html>
在这里插入图片描述
vue实现购物车全选 批量删除价格计算等功能

猜你喜欢

vue实现购物车全选批量删除价格计算等功能
