購物車升級訓練

時間 2019-12-13

標籤購物車升級訓練简体版

原文原文鏈接

在上一版代碼基礎上，增長了模態框彈窗效果，新增點擊刪除，所有刪除按鈕，結算時顯示模態框提示消息，增長分類已加入，未加入，所有，分類按鈕，用到了$ref對DOM操做，0表示未導入，1表示已加入，all表示所有列表，這個功能代碼示例以下：javascript

頁面部分用到了v-show v-if條件做邏輯判斷,動態消息提示部分讓我深入體會到了Vue 基於數據驅動是這樣的方便，對DOM操做時，開始考慮到用指令去實現，後來試了幾回都沒有找到合適的方式，最後找到了$ref去操做DOM.Vue還有一些好比路由，組件，後續會用到的知識如今還有待學習，但願能完成的盡善盡美。css

shopping_cart.jshtml

  1 //var newProduct = {name:'',color:'',price:0,amount:0,default_nums:1,add_nums:0,ischange:'btn-danger'};
  2 // 商品列表json
  3 var goodsTable = new Vue({
  4   el: '.content',
  5   data: {
  6     // 用於保存每件商品的對象
  7     goodItem: {},
  8       // 用於保存用戶添加到購車的商品數組
  9       buyLists: [],
 10     //要刪除的索引
 11     nowIndex: -100,
 12     //消息
 13     msg: "",
 14     //要從數組中移除的商品名
 15     nm: "",
 16     //是否結算
 17     suc: false,
 18     //isAdd: true,
 19       // 默認的商品列表
 20     goods: [
 21       {name:'iphone 7 plus 手機',color:'銀色',price:100,amount:0,default_nums:1,add_nums:0},
 22         {name:'華碩筆記本電腦',color:'黑色',price:100,amount:0,default_nums:1,add_nums:0},
 23         {name:'九陽電熱水瓶5L',color:'白色',price:100,amount:0,default_nums:1,add_nums:0}
 24     ],
 25     //用於增長新商品到列表
 26     newProduct: {name:'',color:'',price:0,amount:0,default_nums:1,add_nums:0,ischange:'btn-danger'},
 27   },  
 28   computed: {
 29     count: function() {
 30       var num = 0;
 31       for(var i in this.goods){
 32           num += parseInt(this.goods[i].default_nums);
 33       }
 34       return num;
 35     },
 36     total: function() {
 37       var total = 0;
 38       for(var i in this.goods){
 39           total += parseInt(this.goods[i].price * this.goods[i].default_nums);
 40       }
 41       return total;
 42     },
 43     addShoppingNum: function() {
 44       var addShoppingNum = 0;
 45       for(var i in this.goods){
 46           addShoppingNum += this.goods[i].add_nums;
 47       }
 48       return addShoppingNum;
 49     },
 50     costPaid: function() {
 51         var costPaid = 0;
 52         for(var i in this.goods){
 53           costPaid += parseInt(this.goods[i].price * this.goods[i].add_nums);
 54       }
 55       return costPaid;
 56     }
 57   },
 58   methods: {
 59     reduce: function(good) {
 60       if (good.default_nums <= 1) return;
 61       good.default_nums --;
 62       //good.ischange = 'btn-danger';
 63     },
 64     /*addNum: function(good) {
 65       good.default_nums += 1;
 66       //good.ischange = 'btn-danger';
 67     },*/
 68     addProduct: function() {
 69       //var len = this.goods.length;
 70       //追加商品
 71       //this.goods.push(Object.assign({},this.goods[len-1]));//淺拷貝
 72       //this.goods.push(Object.assign({}, this.newProduct));//淺拷貝
 73       this.goods.push(JSON.parse(JSON.stringify(this.newProduct)));//深拷貝
 74     },
 75     removeProduct: function(index,nm) {
 76       //刪除商品
 77       if(index == -2){
 78         this.goods = [];
 79         this.buyLists = [];
 80       }else{
 81         this.goods.splice(index,1);
 82         //刪除buyLists中的商品
 83         for(var i=this.buyLists.length-1; i>=0; i--){
 84           if(this.buyLists[i].name == nm){
 85               this.buyLists.splice(i,1);
 86           }
 87         }
 88       }
 89     },
 90       addToCar(good) {
 91           if(good.add_nums == good.default_nums) return;
 92           good.add_nums = good.default_nums;
 93       //good.ischange = 'btn-success';
 94       this.goodItem = {name: good.name, nums: good.add_nums};
 95       // 建立用戶當前添加的商品對象
 96           // 開始向數組中提添加當前物品，這裏存在3種狀況
 97       // 一、用戶未添加過該商品，則直接向數組中push
 98       // 二、用於已經添加了該商品、而且未作購買數量修改，則不向數組中添加
 99       // 三、用於已經添加了該商品、可是修改了購買數量，直接替換數組中的該商品對象
100       var index = this.buyLists.findIndex((value, index, arr) => {
101          return value.name === this.goodItem.name;
102       });
103       //Object.assign() 方法用於將全部可枚舉屬性的值從一個或多個源對象複製到目標對象。它將返回目標對象。
104       index === -1 ? this.buyLists.push(this.goodItem) : Object.assign(this.buyLists[index], this.goodItem);
105     },
106     balance() {
107       if(this.suc){
108 
109           console.log(this.buyLists);
110           if(this.buyLists.length != 0){
111             this.msg = '結算成功！';
112             console.log("結算成功！");
113           }else{
114             this.msg = '購物車尚未加入商品,請先加入到購物車！';
115             console.log("購物車尚未加入商品,請先加入到購物車！");
116           }
117       }
118     },
119     showFunction(n) {//$ref 操做DOM
120       if(n == '0'){
121         for(var i in this.goods){
122           if(this.goods[i].default_nums == this.goods[i].add_nums){
123               this.$refs.good[i].style.display = "none";
124           }else{
125             this.$refs.good[i].style.display = "";
126           }
127         }
128       }else if(n=='all'){
129         for(var i in this.goods){
130             this.$refs.good[i].style.display = "";
131           }
132       }else if(n == '1'){
133         for(var i in this.goods){
134           if(this.goods[i].default_nums == this.goods[i].add_nums){
135               this.$refs.good[i].style.display = "";
136           }else{
137             this.$refs.good[i].style.display = "none";
138           }
139         }
140       }
141    }
142   },
143   updated(){//數據更新完成後
144       //this.$refs.good[0].style.display == "none";
145       console.log(this.$refs.good);
146       console.log(this.$el);
147   }
148 })

View Code

shopping_cart.htmlvue

  1 <!DOCTYPE html>
  2 <html lang="zh-en">
  3 <head>
  4     <title>添加購物車商品列表</title>
  5     <meta charset="utf-8" />
  6     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  7     <style type="text/css">
  8         [v-cloak]{ /*防止頁面閃爍*/
  9             display: none !important;
 10         }
 11         .content{
 12             width: 1000px;
 13             margin: 100px auto;
 14         }
 15         .sWidth{
 16             width:50px;
 17             height:20px;
 18         }
 19         .hide{
 20             display: none;
 21         }
 22     </style>
 23 </head>
 24 <body>
 25 
 26     <div class="content">
 27         <!-- 商品列表 -->
 28         <table class="table table-bordered" id="goods-table" v-cloak>
 29             <thead>
 30                 <th>序號</th>
 31                 <th>商品名稱</th>
 32                 <th>顏色</th>
 33                 <th>數量</th>
 34                 <th>單價</th>
 35                 <th>金額</th>
 36                 <th>操做</th>
 37             </thead>
 38             <tbody>
 39                 <tr v-for="(good, $index) in goods" ref="good">
 40                     <td>{{ $index+1 }}</td>
 41                     <td><input v-model.lazy="good.name"></td>
 42                     <td><input v-model.lazy="good.color" class="sWidth"></td>
 43                     <td>
 44                         <button v-on:click="reduce(good)">-</button>
 45                         <input type="text" type="number"  v-model.number="good.default_nums"/>
 46                         <button v-on:click="good.default_nums += 1">+</button>
 47                     </td>
 48                     <td>
 49                         <input class="sWidth" v-model.number="good.price"></span>
 50                     </td>
 51                     <td>
 52                         <span>{{good.price*good.default_nums}}</span>
 53                     </td>
 54                     <td>
 55                         <button class="btn btn-sm" v-bind:class="good.default_nums == good.add_nums ? 'btn-success' : 'btn-danger'" v-on:click="addToCar(good)">加入購物車</button>
 56                         <span>已加入購物車的該商品數量:</span>
 57                         <span>{{good.add_nums}}</span>
 58                         <button class="btn btn-sm btn-danger" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index,msg='確認刪除嗎?',nm=good.name">刪除</button>
 59                     </td>
 60                 </tr>
 61             </tbody>
 62             <tfoot>
 63                 <tr>
 64                     <td colspan="7">
 65                         <button class="btn btn-danger" v-on:click="addProduct()">添加商品</button>
 66                         
 67                         <button class="btn btn-sm btn-danger pull-right" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2,msg='確認所有刪除嗎?'">所有刪除</button>
 68                     </td>
 69                     
 70                 </tr>
 71                 <tr>
 72                     <td colspan="6">
 73                         <span class="modal-title">{{msg}}</span>
 74                         <span v-show="msg==''">合計數量{{count}}件</span>
 75                         <span v-show="msg==''">合計金額{{total}}元</span>
 76                         <b v-show="msg!='已加入' && msg!='未加入' && msg!='結算成功！'">||</b>
 77                         <span v-show="msg=='未加入'">購物車{{count - addShoppingNum}}件</span>
 78                         <span v-show="msg!='未加入'">購物車{{addShoppingNum}}件</span>
 79                         <span v-show="msg!='未加入'">花費{{costPaid}}元</span>
 80                     </td>
 81                     <td colspan="1">
 82                         <button class="btn btn-danger pull-left" v-on:click="msg='',showFunction('all')">所有</button>
 83                         <button class="btn btn-danger pull-left" v-on:click="msg='已加入',showFunction('1')">已加入</button>
 84                         <button class="btn btn-danger pull-left" v-on:click="msg='未加入',showFunction('0')">未加入</button>
 85                         <button class="btn btn-danger pull-right" data-toggle="modal" data-target="#layer" v-on:click="suc=true,msg='是否結算?'">結算</button>
 86                     </td>
 87                 </tr>
 88             </tfoot>
 89         </table>
 90         
 91         <!--模態框 彈出框-->
 92         <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
 93             <div class="modal-dialog">
 94                 <div class="modal-content">
 95                     <div class="modal-header">
 96                         <button type="button" class="close" data-dismiss="modal">
 97                             <span>&times;</span>
 98                         </button>
 99                         <h4 class="modal-title">{{msg}}</h4>
100                     </div>
101                     <div class="modal-body text-right">
102                         <button data-dismiss="modal" class="btn btn-default btn-sm" v-on:click="suc=false,msg=''">取消</button>
103                         <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="removeProduct(nowIndex,nm),msg=''" v-if="!suc">確認</button>
104                         <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="balance()" v-else>結算</button>
105                     </div>
106                 </div>
107             </div>
108         </div>
109 
110     </div>
111     <!-- js -->
112     <script type="text/javascript" src="js/vue.js"></script>
113     <script type="text/javascript" src="js/shopping_cart.js"></script>
114     <script src="js/jquery-1.8.1.min.js"></script>
115     <script src="js/bootstrap.js"></script>
116 </body>
117 </html>