购物车升级训练

在上一版代码基础上，增加了模态框弹窗效果，新增点击删除，全部删除按钮，结算时显示模态框提示消息，增加分类已加入，未加入，全部，分类按钮，用到了$ref对DOM操作，0表示未导入，1表示已加入，all表示全部列表，这个功能代码示例如下：

页面部分用到了v-show v-if条件作逻辑判断,动态消息提示部分让我深刻体会到了Vue 基于数据驱动是这样的方便，对DOM操作时，开始考虑到用指令去实现，后来试了几次都没有找到合适的方式，最后找到了$ref去操作DOM.Vue还有一些比如路由，组件，后续会用到的知识现在还有待学习，希望能完成的尽善尽美。

shopping_cart.js

//var newProduct = {name:'',color:'',price:0,amount:0,default_nums:1,add_nums:0,ischange:'btn-danger'};
// 商品列表json
var goodsTable = new Vue({
  el: '.content',
  data: {
    // 用于保存每件商品的对象
    goodItem: {},
      // 用于保存用户添加到购车的商品数组
      buyLists: [],
    //要删除的索引
    nowIndex: -100,
    //消息
    msg: "",
    //要从数组中移除的商品名
    nm: "",
    //是否结算
    suc: false,
    //isAdd: true,
      // 默认的商品列表
    goods: [
      {name:'iphone 7 plus 手机',color:'银色',price:100,amount:0,default_nums:1,add_nums:0},
        {name:'华硕笔记本电脑',color:'黑色',price:100,amount:0,default_nums:1,add_nums:0},
        {name:'九阳电热水瓶5L',color:'白色',price:100,amount:0,default_nums:1,add_nums:0}
    ],
    //用于增加新商品到列表
    newProduct: {name:'',color:'',price:0,amount:0,default_nums:1,add_nums:0,ischange:'btn-danger'},
  },  
  computed: {
    count: function() {
      var num = 0;
      for(var i in this.goods){
          num += parseInt(this.goods[i].default_nums);
      }
      return num;
    },
    total: function() {
      var total = 0;
      for(var i in this.goods){
          total += parseInt(this.goods[i].price * this.goods[i].default_nums);
      }
      return total;
    },
    addShoppingNum: function() {
      var addShoppingNum = 0;
      for(var i in this.goods){
          addShoppingNum += this.goods[i].add_nums;
      }
      return addShoppingNum;
    },
    costPaid: function() {
        var costPaid = 0;
        for(var i in this.goods){
          costPaid += parseInt(this.goods[i].price * this.goods[i].add_nums);
      }
      return costPaid;
    }
  },
  methods: {
    reduce: function(good) {
      if (good.default_nums <= 1) return;
      good.default_nums --;
      //good.ischange = 'btn-danger';
    },
    /*addNum: function(good) {
      good.default_nums += 1;
      //good.ischange = 'btn-danger';
    },*/
    addProduct: function() {
      //var len = this.goods.length;
      //追加商品
      //this.goods.push(Object.assign({},this.goods[len-1]));//浅拷贝
      //this.goods.push(Object.assign({}, this.newProduct));//浅拷贝
      this.goods.push(JSON.parse(JSON.stringify(this.newProduct)));//深拷贝
    },
    removeProduct: function(index,nm) {
      //删除商品
      if(index == -2){
        this.goods = [];
        this.buyLists = [];
      }else{
        this.goods.splice(index,1);
        //删除buyLists中的商品
        for(var i=this.buyLists.length-1; i>=0; i--){
          if(this.buyLists[i].name == nm){
              this.buyLists.splice(i,1);
          }
        }
      }
    },
      addToCar(good) {
          if(good.add_nums == good.default_nums) return;
          good.add_nums = good.default_nums;
      //good.ischange = 'btn-success';
      this.goodItem = {name: good.name, nums: good.add_nums};
      // 创建用户当前添加的商品对象
          // 开始向数组中提添加当前物品，这里存在3种情况
      // 1、用户未添加过该商品，则直接向数组中push
      // 2、用于已经添加了该商品、并且未做购买数量修改，则不向数组中添加
      // 3、用于已经添加了该商品、但是修改了购买数量，直接替换数组中的该商品对象
      var index = this.buyLists.findIndex((value, index, arr) => {
         return value.name === this.goodItem.name;
      });
      //Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
      index === -1 ? this.buyLists.push(this.goodItem) : Object.assign(this.buyLists[index], this.goodItem);
    },
    balance() {
      if(this.suc){

          console.log(this.buyLists);
          if(this.buyLists.length != 0){
            this.msg = '结算成功！';
            console.log("结算成功！");
          }else{
            this.msg = '购物车还没有加入商品,请先加入到购物车！';
            console.log("购物车还没有加入商品,请先加入到购物车！");
          }
      }
    },
    showFunction(n) {//$ref 操作DOM
      if(n == '0'){
        for(var i in this.goods){
          if(this.goods[i].default_nums == this.goods[i].add_nums){
              this.$refs.good[i].style.display = "none";
          }else{
            this.$refs.good[i].style.display = "";
          }
        }
      }else if(n=='all'){
        for(var i in this.goods){
            this.$refs.good[i].style.display = "";
          }
      }else if(n == '1'){
        for(var i in this.goods){
          if(this.goods[i].default_nums == this.goods[i].add_nums){
              this.$refs.good[i].style.display = "";
          }else{
            this.$refs.good[i].style.display = "none";
          }
        }
      }
   }
  },
  updated(){//数据更新完成后
      //this.$refs.good[0].style.display == "none";
      console.log(this.$refs.good);
      console.log(this.$el);
  }
})

shopping_cart.html

<!DOCTYPE html>
<html lang="zh-en">
<head>
    <title>添加购物车商品列表</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <style type="text/css">
        [v-cloak]{ /*防止页面闪烁*/
            display: none !important;
        }
        .content{
            width: 1000px;
            margin: 100px auto;
        }
        .sWidth{
            width:50px;
            height:20px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

    <div class="content">
        <!-- 商品列表 -->
        <table class="table table-bordered" id="goods-table" v-cloak>
            <thead>
                <th>序号</th>
                <th>商品名称</th>
                <th>颜色</th>
                <th>数量</th>
                <th>单价</th>
                <th>金额</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr v-for="(good, $index) in goods" ref="good">
                    <td>{{ $index+1 }}</td>
                    <td><input v-model.lazy="good.name"></td>
                    <td><input v-model.lazy="good.color" class="sWidth"></td>
                    <td>
                        <button v-on:click="reduce(good)">-</button>
                        <input type="text" type="number"  v-model.number="good.default_nums"/>
                        <button v-on:click="good.default_nums += 1">+</button>
                    </td>
                    <td>
                        <input class="sWidth" v-model.number="good.price"></span>
                    </td>
                    <td>
                        <span>{{good.price*good.default_nums}}</span>
                    </td>
                    <td>
                        <button class="btn btn-sm" v-bind:class="good.default_nums == good.add_nums ? 'btn-success' : 'btn-danger'" v-on:click="addToCar(good)">加入购物车</button>
                        <span>已加入购物车的该商品数量:</span>
                        <span>{{good.add_nums}}</span>
                        <button class="btn btn-sm btn-danger" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index,msg='确认删除吗?',nm=good.name">删除</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="7">
                        <button class="btn btn-danger" v-on:click="addProduct()">添加商品</button>
                        
                        <button class="btn btn-sm btn-danger pull-right" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2,msg='确认全部删除吗?'">全部删除</button>
                    </td>
                    
                </tr>
                <tr>
                    <td colspan="6">
                        <span class="modal-title">{{msg}}</span>
                        <span v-show="msg==''">合计数量{{count}}件</span>
                        <span v-show="msg==''">合计金额{{total}}元</span>
                        <b v-show="msg!='已加入' && msg!='未加入' && msg!='结算成功！'">||</b>
                        <span v-show="msg=='未加入'">购物车{{count - addShoppingNum}}件</span>
                        <span v-show="msg!='未加入'">购物车{{addShoppingNum}}件</span>
                        <span v-show="msg!='未加入'">花费{{costPaid}}元</span>
                    </td>
                    <td colspan="1">
                        <button class="btn btn-danger pull-left" v-on:click="msg='',showFunction('all')">全部</button>
                        <button class="btn btn-danger pull-left" v-on:click="msg='已加入',showFunction('1')">已加入</button>
                        <button class="btn btn-danger pull-left" v-on:click="msg='未加入',showFunction('0')">未加入</button>
                        <button class="btn btn-danger pull-right" data-toggle="modal" data-target="#layer" v-on:click="suc=true,msg='是否结算?'">结算</button>
                    </td>
                </tr>
            </tfoot>
        </table>
        
        <!--模态框 弹出框-->
        <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">{{msg}}</h4>
                    </div>
                    <div class="modal-body text-right">
                        <button data-dismiss="modal" class="btn btn-default btn-sm" v-on:click="suc=false,msg=''">取消</button>
                        <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="removeProduct(nowIndex,nm),msg=''" v-if="!suc">确认</button>
                        <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="balance()" v-else>结算</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- js -->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/shopping_cart.js"></script>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
</body>
</html>

效果图如下：

删除效果

　

  

全部删除

 

 

已加入购物车

未加入购物车
 

结算提示
 

结算成功提示
 

最后，欢迎大家对我做的这个小练习，批评指正，共同进步。

git>https://github.com/double2018/shopping_cart/
demo:https://double2018.github.io/shopping_cart/