一个vue小demo购物车

最新推荐文章于 2024-05-22 08:15:00 发布

weixin_30838873

最新推荐文章于 2024-05-22 08:15:00 发布

阅读量61

点赞数

原文链接：http://www.cnblogs.com/madlife/p/7294610.html

版权

代码很简单,跟着慕课上的vue例子做的,有个问题记录下

this.$http.get("data/cartData.json").then(function(res){
     // _this.productList = res.data.result.list;
  })

实际需要在catch里获取json 的内容

this.$http.get("data/cartData.json")
                .then(function(res){
                    // _this.productList = res.data.result.list;
                    
                })
                .catch(function(res){
                    if(res instanceof Error) {
                      console.log(res.message);
                    } else {
                      console.log(res.data);
                      _this.productList = res.data.result.list;
                      _this.calTotalMoney();
                    }
                });

还一个涉及到引用本地cartData.json,chrome浏览器会出错,需要在浏览器快捷方式后加 --allow-file-access-from-files 具体可以参考这个

代码如下

<html>
<head>
    <meta charset="utf-8"/>
    <title>shoppingCar</title>
    <link rel="stylesheet" href="style/reset.css"/>
    <link rel="stylesheet" href="style/main.css"/>
    <link rel="stylesheet" href="font/fonts/font.css"/>
    <link rel="stylesheet" href="style/bg-color.css"/>
    <link rel="stylesheet" href="style/style1.css"/>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    
</head>
<body>
<div id="container">
    <div id="shoppingCar">
        <header class="title-wrap"><span class="line-v"></span><span class="title">购物车</span><span
                class="line-v"></span></header>
        <form>
            <table class="detial-wrap">
                <tr>
                    <th>商品信息</th>
                    <th>商品金额</th>
                    <th>商品数量</th>
                    <th>总金额</th>
                    <th>编辑</th>
                </tr>
                <tr v-for="(item,index) in productList">
                    <td class="goods-detial-wrap">
                        <div class="checkbox-wrap left"><span class="checkbox" v-bind:class="{'checked':item.checked}" v-on:click="checkFun(item)"></span></div>
                        <div class="goods-detial right">
                            <div class="good-img left"><img v-bind:src="item.productImg"/></div>
                            <div class="good-text left">
                                <div class="name">{{item.productName}}</div>
                                <dl class="gifts">
                                    <dt>赠送：</dt>
                                    <dd v-for="part in item.parts">{{part.partsName}}</dd>
                                </dl>
                            </div>
                        </div>
                    </td>
                    <td class="unitprice">{{item.productPrice}}</td>
                    <td class="buy-num">
                        <div class="choosenum-handler"><i class="icon-minus" v-on:click="addFun(-1,index)"></i><span class="countbox" v-model="item.productQuentity">{{item.productQuentity}}</span><i
                                class="icon-plus" v-on:click="addFun(1,index)"></i></div>
                        <div class="stock onsell"></div>
                    </td>
                    <td class="amount">{{item.productPrice*item.productQuentity}}</td>
                    <td class="icon icon-delete" v-on:click="delProduct(index)"></td>
                </tr>
            </table>
            <footer class="checkout-wrap">
                <div class="total-check-wrap left">
                    <div class="checkbox-wrap left"><span class="checkbox" v-bind:class="{'checked':checkAllFlag}" v-on:click="checkAll(true)"></span></div>
                    <div class="check-text"><span class="checked-all" v-on:click="checkAll(true)">全选</span><span class="unchecked-all" v-on:click="checkAll(false)">取消全选</span>
                    </div>
                </div>
                <div class="checkout right">
                    <div class="total-money"><span class="name">总金额 :</span><span class="amount">{{totalMoney}}元</span></div>
                    <input type="submit" value="结账" class="danger"/>
                </div>
            </footer>
        </form>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#shoppingCar",
        data:{
            productList:[],
            totalMoney:0,
            checkAllFlag:true
        },
        mounted:function(){
            this.cartView();
        },
        methods:{
            cartView:function(){
                var _this = this;
                this.$http.get("data/cartData.json")
                .then(function(res){
                    // _this.productList = res.data.result.list;
                    
                })
                .catch(function(res){
                    if(res instanceof Error) {
                      console.log(res.message);
                    } else {
                      console.log(res.data);
                      _this.productList = res.data.result.list;
                      _this.calTotalMoney();
                    }
                });

            },
            addFun:function(flag,index){
                if(flag>0){
                     this.productList[index].productQuentity++;
                }else {
                     if (this.productList[index].productQuentity==1) {
                        this.productList[index].productQuentity=1;
                     }else{
                        this.productList[index].productQuentity--;
                     }
                } 

                this.calTotalMoney();
            },
            checkFun:function(item){
                var _this = this;
                var checkLen = 0;
                
                if(typeof item.checked =='undefined'){
                    Vue.set(item,"checked",true);
                }else{
                    item.checked = !item.checked;
                }
                this.productList.forEach(function(item,index){
                    if(item.checked){
                        checkLen++;
                    } 
                });
                if (checkLen == _this.productList.length) {
                    _this.checkAllFlag = true;
                }else{
                   _this.checkAllFlag = false;
                }

                this.calTotalMoney();
            },
            calTotalMoney:function(){
                this.totalMoney = 0;
                var _this = this;
                this.productList.forEach(function(item,index){
                    if(item.checked){
                        _this.totalMoney += item.productPrice*item.productQuentity;
                    } 
                });
            },
            checkAll:function(flag){
                this.checkAllFlag = flag;
                var _this = this;
                this.productList.forEach(function(item,index){
                    Vue.set(item,"checked",_this.checkAllFlag);
                });
                this.calTotalMoney();
            },
            delProduct:function(index){
                var _this = this;
                this.productList.splice(index,1);
                this.calTotalMoney();
                if (this.productList.length==0) {
                    _this.checkAllFlag = false;
                }
            }
        }
    })
</script>

</body>
</html>