使用vue实现购物车功能
页面效果图:
html代码:
<div class="shop-car" id='car'> <div class="count-custom"> 全部商品 {{count}} </div> <table border="1" cellspacing="0" cellpadding="10"> <tr> <th><input type="checkbox" name="" id="checkAll" value="" @click="checkAll"/>全部</th> <th>商品</th> <th>单价(元)</th> <th>数量</th> <th>操作</th> </tr> <tr v-for="item in goods" :key="item.id"> <td><input type="checkbox" name="" class="checked"id="" value="" @click="checked()"/></td> <td> <div class="info"> <div class="img-left"> <img :src="item.img" > </div> <div class="info-right"> <p class="name">{{item.name}}</p> <p class="cun">{{item.cicun}}</p> <p class="memery">{{item.memery}}</p> </div> </div> </td> <td> {{item.price}} </td> <td> <div class="steper"> <input type="button" class="opts" id="" value="-" @click="options(-1,item.id)" /> <span>{{item.num}}</span> <input type="button" name="" @click="options(+1,item.id)" value="+" /> </div> </td> <td><a href="#" @click="del(item.id)">删除</a></td> </tr> <tr> <td colspan="5" style="text-align: center;">统计:{{countPrice}}元</td> </tr> </table> </div>
css代码:
*{ margin: 0px; padding: 0px; box-sizing: border-box; } .shop-car{ margin-left: 20px; margin-top: 20px1; } table{ /* text-align: center; */ /* align-content: center; */ } tr>td:first-child{ text-align: center; } .info{ display: flex; flex-direction: row; align-items: center; } .info-right{ height: 80px; display: flex; flex-direction: column; justify-content: space-between; } .img-left>img{ width: 100px; } .steper{ margin: 0px 20px; } .steper>input[type="button"]{ width:30px; } .steper>span{ display: inline-block; width: 20px; text-align: center; }
js代码:
var vm=new Vue({ el:"#car", data:{ count:0, countPrice:0, goods:[ {id:0,name:"oppo 麦芒5 全网通 4GB+64GB版 墨黑 移动联通电信4G手机 双卡双待",cicun:"4.9英寸",memery:"4GB+64GB",price:"1339.00",img:"./images/phone01.jpg",num:1}, {id:1,name:"vivo 麦芒5 全网通 4GB+64GB版 墨黑 移动联通电信4G手机 双卡双待",cicun:"4.9英寸",memery:"4GB+64GB",price:"130.00",img:"./images/phone02.jpg",num:1}, {id:2,name:"华为 麦芒5 全网通 4GB+64GB版 墨黑 移动联通电信4G手机 双卡双待",cicun:"4.9英寸",memery:"4GB+64GB",price:"19.00",img:"./images/phone03.jpg",num:1}, ] }, methods:{
//全选 checkAll(){ var checkAll=document.getElementById("checkAll"); var checkeds=document.getElementsByClassName("checked") if(checkAll.checked==true){ for(var i=0;i<checkeds.length;i++){ checkeds[i].checked=true } } this.countPrices() }, checked(status){ var checkAll=document.getElementById("checkAll"); var checkeds=document.getElementsByClassName("checked") console.log(checkeds) for (var i=0;i<checkeds.length;i++){ if(checkeds[i].checked==false){ checkAll.checked=false return false } checkAll.checked=true; } this.countPrices() }, options(value,id){ let goods=this.goods; var newGoods=goods.map((item,index,arr)=>{ if(item.id==id){ item.num=item.num+value; this.butonStatus() } return item; }) this.goods=newGoods this.countPrices() }, // 计算价格 countPrices(){ var countPrice=0; console.log(this.goods) var goods=this.goods var checkAll=document.getElementById("checkAll"); var checkeds=document.getElementsByClassName("checked") console.log(checkeds) for (var i=0;i<checkeds.length;i++){ if(checkeds[i].checked==true){ countPrice+=goods[i].price*goods[i].num } } this.countPrice=countPrice console.log(countPrice) }, // 删除 del(id){ console.log(id) var goods=this.goods; var newGoods=goods.map((item,index,arr)=>{ if(item.id==id){ return arr.splice(index,1) } }) }, butonStatus(){ var opts=document.getElementsByClassName("opts") var goods=this.goods; var newGoods=goods.map((item,index)=>{ if(item.num<2){ console.log(index) opts[index].disabled=true }else{ opts[index].disabled=false } }) } }, mounted(){ this.count=this.goods.length;//获取添加购物车商品的数量 this.butonStatus(); //这里判断 - 号按钮是否可用 } })