1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>购物车</title> 6 <style> 7 .content{ 8 height: 500px; 9 margin: 50px 30px; 10 border: 1px solid #e3e3e3; 11 border-top: 2px solid #0078E7; 12 } 13 h3{ 14 color: #0078E7; 15 padding-left: 20px; 16 } 17 .title{ 18 height: 50px; 19 border-bottom: 1px solid #e3e3e3; 20 background: #f7f7f7; 21 text-align: center; 22 } 23 td{ 24 text-align: center; 25 } 26 td div{ 27 display: inline-block; 28 } 29 .wid200{ 30 width: 168px; 31 text-align: center; 32 /* background: yellow; */ 33 } 34 .goods-logo{ 35 display: inline-block; 36 height: 100px; 37 width: 100px; 38 border: 1px solid #ccc; 39 } 40 .goods-logo img{ 41 display: inline-block; 42 height: 100%; 43 width: 100%; 44 } 45 .goods-instr{ 46 font-size: 12px; 47 text-align: left; 48 padding-left: 0.625rem; 49 } 50 .goods-countout{ 51 border: 1px solid #f7f7f7; 52 } 53 .goods-countout span{ 54 display: inline-block; 55 width: 40px; 56 height: 1.875rem; 57 text-align: center; 58 } 59 .goods-count{ 60 background: #f7f7f7; 61 } 62 .footer{ 63 width: 100%; 64 height: 50px; 65 line-height: 50px; 66 } 67 .footer div{ 68 display: inline-block; 69 text-align: center; 70 } 71 .delete-all{ 72 width: 6.25rem; 73 height: 100%; 74 padding-left: 20px; 75 } 76 .going-buy{ 77 margin-left: 20px; 78 } 79 .goods-price{ 80 float: right; 81 } 82 .orange{ 83 color: #ff7700; 84 } 85 .out-buy{ 86 float: right; 87 width: 100px; 88 background: #ff7700; 89 font-size: 18px; 90 margin-left: 25px; 91 } 92 .active{ 93 background: #ff7700; 94 } 95 .delect:hover{ 96 height: 50px; 97 line-height: 50px; 98 display: inline-block; 99 background: #ff7700; 100 padding-left: 10px; 101 padding-right: 10px; 102 } 103 .checke{ 104 display: inline-block; 105 height: 1.25rem; 106 width: 1.25rem; 107 border: 1px solid #ff7700; 108 border-radius: 50%; 109 margin-right: 6px; 110 vertical-align: middle; 111 } 112 113 </style> 114 </head> 115 <body> 116 <div class="content" id="app1"> 117 <h3>购物清单</h3> 118 <table style="100%;"> 119 <tr class="title"> 120 <td class="wid200"><a class="checke" :class="{active:allchekdflag}" @click="allcheck"></a><span>全选</span></td> 121 <td style=" 400px;">商品</td> 122 <td class="wid200">数量</td> 123 <td class="wid200">单价（元）</td> 124 <td class="wid200">金额（元）</td> 125 <td class="wid200">操作</td> 126 </tr> 127 </table> 128 <!-- 商品购买详情 --> 129 <div > 130 <table style="100%;"> 131 <tr v-for="(item,index) in productList"> 132 <td><a @click="checkfun(index)" class="checke" :class="{active:item.checkedflag}"></a></td> 133 <td style=" 400px;"> 134 <div class="goods-logo"> 135 <img class v-bind:src="item.pro_img"> 136 </div> 137 <div class="goods-instr"> 138 <p>{{item.pro_name}}</p> 139 <p>{{item.pro_place}}</p> 140 <p>{{item.pro_purity}}|{{item.pro_min}}</p> 141 <p>配送仓储：{{item.pro_depot}}</p> 142 </div> 143 </td> 144 <td class="wid200"> 145 <div class="goods-countout"> 146 <span class="down goods-count" @click="item.pro_num>0?item.pro_num--:0" :class="{'active':curIndex===index+'0'}">-</span> 147 <span class="count">{{item.pro_num}}</span> 148 <span class="up goods-count" @click="item.pro_num++" :class="{'active':curIndex===index+'1'}"> + </span> 149 </div> 150 </td> 151 <td class="wid200 orange">￥<span>{{item.pro_price}}</span></td> 152 <td class="wid200 orange">￥<span>{{item.pro_price*item.pro_num}}</span></td> 153 <td class="wid200"><span class="delect" @click="delect(index)">删除</span></td> 154 </tr></table> 155 </div> 156 <!-- 结算 --> 157 <div class="footer goods-count"> 158 <div class="delete-all delect" @click="deleteActive"><span>删除所选产品</span></div> 159 <div class="going-buy"><span>继续购物</span></div> 160 <div class="out-buy">去结算</div> 161 <div class="goods-price"> 162 <span class="orange">{{getTotle.totleCount}}</span>件商品总计（不含运费）：￥ 163 <span class="orange">{{getTotle.totlePrice}}</span> 164 </div> 165 166 </div> 167 </div> 168 <script src="vue.js"></script> 169 <script> 170 new Vue({ 171 el:"#app1", 172 data:{ 173 productList:[{ 174 'pro_name':'【斯文】甘油|丙三醇1',//产品名称 175 'pro_brand':'skc',//产品品牌 176 'pro_place':'韩国',//产地 177 'pro_purity':'99.7%',//规格 178 'pro_min':'215千克',//最小起订量 179 'pro_depot':'上海沧海仓库',//所在仓库 180 'pro_num':3,//数量 181 'pro_img':'../build/logo.png',//图片 182 'pro_price':800//单价 183 },{ 184 'pro_name':'【斯文】甘油|丙三醇2',//产品名称 185 'pro_brand':'skc',//产品品牌 186 'pro_place':'韩国',//产地 187 'pro_purity':'99.7%',//规格 188 'pro_min':'215千克',//最小起订量 189 'pro_depot':'上海沧海仓库',//所在仓库 190 'pro_num':1,//数量 191 'pro_img':'../build/logo.png',//图片 192 'pro_price':800//单价 193 }], 194 curIndex:'', 195 checkedflag:false, 196 allchekdflag:false, 197 }, 198 methods:{ 199 // countDown(index){//数量减少 200 // this.curIndex=index+'0'; 201 // var num = this.productList[index].pro_num; 202 // if(num>0){ 203 // this.productList[index].pro_num = this.productList[index].pro_num-1; 204 // if(this.productList[index].pro_num==0){ 205 // this.curIndex=''; 206 // } 207 // console.log(this.childTotal); 208 // this.childTotal = this.productList[index].pro_num*this.productList[index].pro_price; 209 // }else{ 210 // this.curIndex=''; 211 // } 212 // }, 213 // countUp(index){//数量增加 214 // this.curIndex=index+'1'; 215 // var num = this.productList[index].pro_num; 216 // this.productList[index].pro_num = this.productList[index].pro_num+1; 217 // }, 218 delect(index){ 219 // 删除指定列表 220 this.productList.splice(index,1); 221 }, 222 deleteActive(){//删除已选择列表 223 var productList = this.productList; 224 if(this.allchekdflag){ 225 this.productList=[]; 226 this.allchekdflag = false; 227 }else{ 228 this.productList = productList.filter(function(value){ 229 return !value.checkedflag; 230 }); 231 } 232 }, 233 checkfun(index){//单选 234 // Vue.set实时更新视图数据 235 Vue.set(this.productList[index],'checkedflag',!this.productList[index].checkedflag); 236 if(!this.productList[index].checkedflag){ 237 this.allchekdflag =false; 238 } 239 }, 240 allcheck(){//全选 241 this.allchekdflag = !this.allchekdflag; 242 for(var i=0;i<this.productList.length;i++){ 243 Vue.set(this.productList[i],'checkedflag',this.allchekdflag) 244 // this.productList[i].checkedflag = this.allchekdflag; 245 } 246 } 247 }, 248 computed:{ 249 getTotle(){ //对下面两个写法的简单写法 250 var totlePrice = 0,productList = this.productList; 251 var _productList = this.productList.filter(function(value){ 252 return value.checkedflag; 253 }) 254 for(var i=0;i<_productList.length;i++){ 255 totlePrice+=_productList[i].pro_num*_productList[i].pro_price; 256 } 257 return {'totlePrice':totlePrice,'totleCount':_productList.length}; 258 }, 259 // total(){//总价格 260 // var allcount = 0,productList = this.productList; 261 // var _productList = this.productList.filter(function(value){ 262 // return value.checkedflag; 263 // }) 264 // for(var i=0;i<_productList.length;i++){ 265 // allcount+=_productList[i].pro_num*_productList[i].pro_price; 266 // } 267 // return allcount; 268 // }, 269 // buyscounts(){//购买的总数 270 // var count=0,productList = this.productList; 271 // for(var i=0;i<productList.length;i++){ 272 // productList[i].checkedflag&&count++; 273 // } 274 // return count; 275 // } 276 } 277 }) 278 </script> 279 </body> 280 </html>
