master

分支 (1)

管理

管理

master

Vue
/
cart.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue购物车</title>
    <style>
            .product-num{
                display: inline-block;
                width: 50px;
            }
            img{
                width: 80px;
                height: 80px;


            }
    </style>
</head>
<body>
    <div id="app">
        <table border="1">
            <thead>
              <tr>
                <th><input type="checkbox" id="checkall"></th>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
              </tr>
            </thead>
            <tbody id="tbody">
                <tr v-for="(pro,index) in cartInfo.cartModels">
                    <td><input type="checkBox" class="check-item"></td>
                    <td><img :src="'https:'+pro.imageUrl"></td>
                    <td>{{pro.name}}</td>
                    <td class="product-price">{{pro.price.toFixed(2)}}</td>
                    <td>
                        <button class="btn" @click="pro.num>1?pro.num--:''">-</button>
                        <input class="product-num" :data-index="index" v-model="pro.num">
                        <button class="btn" @click="pro.num++">+</button>
                    </td>
                    <td class="product-sum">{{(pro.price*pro.num).toFixed(2)}}</td>
                </tr>
                <tr>
                    <td colspan="4" >总计</td>
                    <td id="totalnum">{{totalNum}}</td>
                    <td id="totalprice">{{totalPrice.toFixed(2)}}</td>
                </tr>
            </tbody>
          </table>

    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                cartInfo:{}
            },
            computed: {
                totalNum:function(){
                    let num =0;
                    this.cartInfo.cartModels.forEach(item=>{
                        num+=item.num
                    })
                    return num
                },
                totalPrice:function(){
                    let price =0;
                    this.cartInfo.cartModels.forEach(item=>{
                        price+=item.num*item.price
                    })
                    return price
                }

            },
            created(){
                // 获取数据
                this.getData();
            },
            methods: {
                getData(){
                    // $.ajax({
                    //     url:'xxx',
                    //     type:'POST',
                    //     data:{

                    //     },
                    //     success:function(res){
                    //         this.cartInfo=res.data
                    //     }
                    // })
                    this.cartInfo= {"cartModels":[{"productId":"100018955","name":"WORKPRO/万克宝-136PC 电钻组套(小)-(W004509N)/1套","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/4/2b517b55-3519-4595-96f6-fd0279d19e8e-thumbnail.jpg","price":199.0,"num":14,"sum":2786.00},
                                    {"productId":"100009828","name":"世达 V顶ABS标准安全帽 黄色 /1顶","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/6/1b762d34-ab42-45af-9e9d-1d7064de8585-170.jpg","price":27.37,"num":2,"sum":54.74},
                                    {"productId":"100018897","name":"WORKPRO/万克宝-综合工具组套 9PC 家用组套五金维修工具-(W009046N)/1套","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/7/185ef417-cb9b-4b40-88c1-5f3866769c19-170.jpg","price":50.0,"num":2,"sum":100.00},
                                    {"productId":"100012580","name":"DCA-电磨头S1J-FF03-10 可调速直磨打磨机-(1302020020)/1把","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/7/d956efe9-4f6f-4f71-a64d-99a9ff9da69c-170.jpg","price":145.0,"num":1,"sum":145.00},
                                    {"productId":"100012749","name":"DREMEL/琢美-电磨机 雕刻 打磨机组套 4000-3/36-(F0134000RA)/1套","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2016/12/3e320e21-8ca3-48d9-bbe1-e3ef7a21c3f0-thumbnail.jpg","price":879.0,"num":1,"sum":879.00},
                                    {"productId":"100019570","name":"WORKPRO/万克宝-工具组套 30PC-(W009047N)/1套","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/5/445b9bdc-c1f6-4c50-9d4a-0d1b941d4e2f-thumbnail.jpg","price":122.0,"num":4,"sum":488.00},
                                    {"productId":"100000314","name":"东成-240W电磨机电磨头雕刻工具木雕根雕电动抛光打磨机直磨机 S1J-FF-25-(1301020030)/1台","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2018/2/d2de6401-5aee-40d9-a79b-de10b0840797-170.jpg","price":151.0,"num":1,"sum":151.00}
                                ],"disabledCartModels":[],"totalPrice":4603.74}
                }
            }
        })
    </script>
</body>
</html>