Vue框架购物车结算页面

MsleepyF
于 2023-03-17 20:59:14 发布
阅读量412
点赞数
文章标签： vue.js javascript 前端
本文链接：https://blog.csdn.net/m0_65748966/article/details/129628104
版权
<!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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        crossorigin="anonymous">
    <script src="vue.global.js"></script>
    <title></title>

</head>

<body>
    <div id="application">
        <div class="container-md">
            <template v-if="productList.length">
                <table class="table" v-for="(tableItem,tableIndex) in productList">
                    <thead class="thead-light">
                        <tr>
                            <th>
                                <input type="checkbox" :checked="isCheckedTableItem(tableItem)" @click="handleTableItem(tableItem)" />{{tableItem.name}}
                            </th>
                            <th scope="col">序号</th>
                            <th scope="col">商品名称</th>
                            <th scope="col">商品单价</th>
                            <th scope="col">购买数量</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in tableItem.list">
                            <th>
                                <input type="checkbox" :checked="item.status" @click="handleChecked(item)">
                            </th>
                            <th scope="row">{{index+1}}</th>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                            <td>
                                <button   @click="handleReduce(item)" :disabled="item.count == 1" class="btn btn-secondary">-</button>
                                {{item.count}}
                                <button   @click="handleAdd(item) " class="btn btn-secondary">+</button>
                            </td>
                            <td><button   @click="handleRemove(index,tableIndex)" class="btn btn-secondary">删除</button>
                            </td>
                        </tr>

                    </tbody>
                </table>
                <div>总价{{totalPrice}}</div>
                <div><input type="checkbox" :checked="isCheckedAll()" @click="handleAll">全选</div>
            </template>
            <div v-else>购物车为空</div>
        </div>
    </div>
    <script>
        const app = {
            data() {
                return {
                    list: [
                        {
                            id: 1,
                            name: 'iphone14',
                            price: 6588,
                            count: 1,
                            status: 1
                        },
                        {
                            id: 2,
                            name: 'iphone14 pro',
                            price: 10488,
                            count: 1,
                            status: 1
                        },
                        {
                            id: 3,
                            name: 'MacBook',
                            price: 16488,
                            count: 1,
                            status: 1
                        }
                    ],
                    productList:[
                        {
                            name:"张三的店",
                            list:[
                            {
                            id: 1,
                            name: 'iphone14',
                            price: 6588,
                            count: 1,
                            status: 1
                        },
                        {
                            id: 2,
                            name: 'iphone14 pro',
                            price: 10488,
                            count: 1,
                            status: 1
                        },
                        {
                            id: 3,
                            name: 'MacBook',
                            price: 16488,
                            count: 1,
                            status: 1
                        }
                            ]  
                        },
                        {
                            name:"李四的店",
                            list:[
                            {
                            id: 1,
                            name: 'iphone14',
                            price: 6588,
                            count: 1,
                            status: 1
                        },
                        {
                            id: 2,
                            name: 'iphone14 pro',
                            price: 10488,
                            count: 1,
                            status: 1
                        },
                        {
                            id: 3,
                            name: 'MacBook',
                            price: 16488,
                            count: 1,
                            status: 1
                        }
                            ]
                        },
                       {
                            name:"老王的店",
                            list:[
                            {
                            id: 1,
                            name: 'iphone14',
                            price: 6588,
                            count: 1,
                            status: 1
                        },
                        {
                            id: 2,
                            name: 'iphone14 pro',
                            price: 10488,
                            count: 1,
                            status: 1
                        },
                        {
                            id: 3,
                            name: 'MacBook',
                            price: 16488,
                            count: 1,
                            status: 1
                        }
                            ]
                        }
                    ]
                    }
                },
                computed: {
                totalPrice() {
                    let total = 0
                    for (let i = 0; i < this.productList.length; i++) {
                        for (let j = 0; j < this.productList[i].list.length; j++) {
                            let item = this.productList[i].list[j]
                            if (item.status)
                                total += item.price * item.count
                        }
                    }
                    return total.toLocaleString('en-US')
                }
            },
            methods: {
                handleReduce(item) {
                    if (item.count == 1)
                        return;
                    item.count--
                },
                handleAdd(item) {
                    item.count++
                },
                handleRemove(index, tableIndex) {
                    this.productList[tableIndex].list.splice(index, 1)
                    if (this.productList[tableIndex].list.length == 0)
                        this.productList.splice(tableIndex, 1)
                },
                handleChecked(item) {
                    item.status = !item.status
                },
                isCheckedAll() {
                    let status = true
                    for (let i = 0; i < this.productList.length; i++) {
                        for (let j = 0; j < this.productList[i].list.length; j++) {
                            if (!this.productList[i].list[j].status) {     // if (this.list[i].status == false) 
                                status = false
                                return status;
                            }

                        }
                    }
                    return status
                },
                handleAll() {
                    let status = this.isCheckedAll()
                    status = status ? 0 : 1
                    for (let i = 0; i < this.productList.length; i++) {
                        for (let j = 0; j < this.productList[i].list.length; j++)
                            this.productList[i].list[j].status = status
                    }
                },
                isCheckedTableItem(tableItem) {
                    let status = true
                    for (let i = 0; i < tableItem.list.length; i++) {
                        if (!tableItem.list[i].status) {
                            status = false
                            return status;
                        }
                    }
                    return status
                },
                handleTableItem(tableItem) {
                    let status = this.isCheckedTableItem(tableItem)
                    status = status ? 0 : 1
                    for (let i = 0; i < tableItem.list.length; i++)
                        tableItem.list[i].status = status
                }
            }
        }

        Vue.createApp(app).mount('#application')
    </script>
</body>

</html>
注意引入 vue.global.js
网址为Quick Start | Vue.js
实现效果