购物车升级训练
Posted double2014
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了购物车升级训练相关的知识，希望对你有一定的参考价值。
在上一版代码基础上，增加了模态框弹窗效果，新增点击删除，全部删除按钮，结算时显示模态框提示消息，增加分类已加入，未加入，全部，分类按钮，用到了$ref对DOM操作，0表示未导入，1表示已加入，all表示全部列表，这个功能代码示例如下：
页面部分用到了v-show v-if条件作逻辑判断,动态消息提示部分让我深刻体会到了Vue 基于数据驱动是这样的方便，对DOM操作时，开始考虑到用指令去实现，后来试了几次都没有找到合适的方式，最后找到了$ref去操作DOM.Vue还有一些比如路由，组件，后续会用到的知识现在还有待学习，希望能完成的尽善尽美。
shopping_cart.js
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 // 1、用户未添加过该商品，则直接向数组中push 98 // 2、用于已经添加了该商品、并且未做购买数量修改，则不向数组中添加 99 // 3、用于已经添加了该商品、但是修改了购买数量，直接替换数组中的该商品对象 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 })
shopping_cart.html
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>×</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以上是关于购物车升级训练的主要内容，如果未能解决你的问题，请参考以下文章
在android studio中升级repo v9后，片段必须是公共静态类崩溃错误