vue实现购物车

最新推荐文章于 2024-10-07 17:50:34 发布
咩咩咩..
最新推荐文章于 2024-10-07 17:50:34 发布
阅读量274
点赞数
文章标签： vue
本文链接：https://blog.csdn.net/weixin_55865982/article/details/124412166
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入vue -->
    <script src="../libs/vue.js"></script>

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            width: 1000px;
            margin: 20px auto;
        }

        .form-group {
            margin: 15px 0;
        }

        .form-control {
            height: 40px;
            padding: 10px;
            width: 100%;
            border: 1px solid #DDD;
            border-radius: 4px;
        }

        tr {
            height: 60px;
            text-align: center;
        }


        .active {
            background-color: #EEE;
        }

        table {
            width: 100%;
        }

        table,
        th,
        td {
            border: 1px solid #CCC;
            /* 合并边框 */
            border-collapse: collapse;
        }

        label {
            cursor: pointer;
        }

        input[type='checkbox'] {
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }

        .btn {
            border: 0;
            width: 70px;
            line-height: 35px;
            text-align: center;
            color: #555;
            background: #EEE;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 700;
            outline: 0;
            margin: 0 2px;
        }

        .btn.danger {
            background-color: #D9534F;
            color: #FFF;
        }

        .btn.success {
            background-color: #337AB7;
            color: #FFF;
        }

        .line {
            border-bottom: 1px solid #DDD;
            margin: 10px 0;
        }

        .btn-cart {
            width: 30px;
            height: 30px;
            background: #CCC;
            border: 0;
            outline: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <h1>购物车</h1>
        <table cellpadding="0" cellspacing="0" width="100%">
            <thead>
                <tr class="active">
                    <th width="80">
                        <label><input type="checkbox" v-model="allChecked">&nbsp;全选</label>
                    </th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

                <tr v-for="(item,index) in cartList">
                    <td>
                        <input type="checkbox" v-model="item.checked" />
                    </td>
                    <td>

                        <img style="height: 120px;" :src="item.goodsimg" alt="">
                        <h5>{{item.goodsname}}</h5>

                    </td>
                    <td>&yen;{{item.price}}</td>
                    <td>
                        <button class="btn-cart" @click="goodsNum(index,1)">-</button>
                        {{item.num}}
                        <button class="btn-cart" @click="goodsNum(index,2)">+</button>

                    </td>

                    <td>&yen;{{item.price*item.num}}</td>
                    <td>
                        <button class="btn danger" @click="del(index)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="6" style="text-align: left;">
                        <b style="color:red">
                            &nbsp;订单总金额: &yen;{{cartGoodsPrice}}
                        </b>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        methods: {
            //删除
            del(index) {
                this.cartList.splice(index, 1);
            },
            //加减
            //index:下标
            //type:操作类型 1- 2+
            goodsNum(index, type) {
                //减
                if (type === 1) {
                    this.cartList[index].num -= 1;
                    if (this.cartList[index].num === 0) {
                        //将商品移除
                        this.cartList.splice(index, 1);
                    }
                } else {
                    //加
                    this.cartList[index].num += 1;
                }
            }
        },
        computed: {
            //总价
            cartGoodsPrice() {
                //记录总价
                let price = 0;
                this.cartList.forEach(item => {
                    if (item.checked) {
                        price += item.price * item.num;
                    }
                })
                return price;
            },
            //全选
            allChecked: {
                get() {
                    return this.cartList.every(function (item) {
                        return item.checked;
                    })
                },
                set(checked) {
                    // 根据计算属性的最新值, 更新每一个商品的选中状态
                    this.cartList.forEach(item => {
                        item.checked = checked;
                    })
                }
            }
        },
        data: {
            //购物车列表
            cartList: [{
                    id: 1,
                    goodsname: "vivo IQ777",
                    goodsimg: "https://img12.360buyimg.com/seckillcms/s280x280_jfs/t1/166249/4/1781/100467/5ffc0654Eb618aa21/2188e4ef3f6abe7e.jpg.webp",
                    price: 2999,
                    num: 1,
                    checked: true
                },
                {
                    id: 2,
                    goodsname: "小米10",
                    goodsimg: "https://img10.360buyimg.com/seckillcms/s280x280_jfs/t1/97161/40/12127/66234/5e440190E7cd0f54e/33627b2c39a67241.jpg.webp",
                    price: 998,
                    num: 1,
                    checked: true
                },
                {
                    id: 3,
                    goodsname: "传世的珐琅锅",
                    goodsimg: "https://img20.360buyimg.com/seckillcms/s280x280_jfs/t1/168750/15/16697/127861/606c22c0Eca19515e/5adfe8e452fffbff.png.webp",
                    price: 1768,
                    num: 1,
                    checked: true
                },
                {
                    id: 4,
                    goodsname: "蔻驰的丑包",
                    goodsimg: "https://img12.360buyimg.com/ceco/s300x300_jfs/t1/119430/19/3585/133796/5eb12fe7E1a4ee264/392d83858bb8cd52.jpg!q70.jpg.webp",
                    price: 17865,
                    num: 1,
                    checked: true
                }
            ]
        }
    })
</script>