Vue 购物车案例

Vue 购物车案例

该购物车主要实现了全选、数量加减、自动计算总金额、删除等功能

代码如下
html部分

<!-- view -->
<div id="app">
	<h3>购物车</h3>
	<div class="box" v-for="(item,index) in list" v-if="item.list.length>0">
		<h4 class="shop-title">
			<input type="checkbox" @click="dealSelectShop(index)" :checked="item.isSelect">
			{{item.title}}
		</h4>
		<ul>
			<li>
				<span class="goods-check">选择</span>
				<span class="goods-title">商品名</span>
				<span class="goods-num">数量</span>
				<span class="goods-price">单价</span>
				<span class="goods-button">
					操作
				</span>
				
			</li>
			<li v-for="(subitem,subindex) in item.list" class="goods">
				<input type="checkbox" @click="dealSelectGoods(index,subindex)" :checked="subitem.isSelect" class="goods-check">
				<span class="goods-title">{{subitem.title}}</span>
				<span class="goods-num">
					<button @click="dealSub(index,subindex)">-</button>
					{{subitem.num}}
					<button @click="dealAdd(index,subindex)">+</button>
				</span>
				<span class="goods-price">{{subitem.price}}元</span>
				<span class="goods-button">
					<button @click="dealDelete(index,subindex)">删除</button>
				</span>
			</li>
		</ul>
	</div>
	<div>
		<div>全选<input type="checkbox" @click="dealSelectAll" :checked="isSelectAll"></div>
		<div>您已经选择了<span class="allNum">{{allNum}}</span>种商品</div>
		<div>总价为 <span class="allPrice">{{allPrice}}</span>元</div>
		<div>
			<button>去结算</button>
		</div>
	</div>
</div>

css部分

body,ul,li{
	margin:0;
	list-style: none;
}
li{
	width: 100%;

}
span{
	display: inline-block;
}
.goods-check{
	width: 5%;
}
.goods-title{
	width: 30%;
}
.goods-num{
	width: 20%;
}
.goods-price{
	width: 15%;
}
.goods-button{
	width: 15%;
}
.allNum,.allPrice{
	font-size: 30px;
	color: #f90;
}
.shop-title{
	background: #eaeaea;
	line-height: 40px;
	padding-left:10px;
}
.goods{
	background: #eaeaea;
	line-height: 30px;
	margin:5px 0;
}

js部分

<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
<script type="text/javascript">
	
	//model
	var data = {
		isSelectAll:false,
		list:[

			{
				title:"天猫超市",
				isSelect:false,
				list:[
						{
							id:1001,
							title:"小当家干吃面",
							num:1,
							price:39,
							isSelect:false
						},{
							id:1002,
							title:"夹心饼干",
							num:2,
							price:55,
							isSelect:false
						}
					]
			},{
				title:"球球旗舰店",
				isSelect:false,
				list:[
						{
							id:2001,
							title:"球球外套",
							num:1,
							price:88,
							isSelect:false
						},{
							id:2002,
							title:"球球球鞋",
							num:5,
							price:199,
							isSelect:false
						}
					]
			}	
		]
	}
	
	//viewModel
	var app = new Vue({
		el:"#app",
		data:data,
		computed:{
			allNum(){
				var allNum = 0;
				for(shop of this.list){
					for(goods of shop.list){
						if(goods.isSelect){
							allNum+=1
						}
					}
				}
				return allNum
			},
			allPrice(){
				var allPrice = 0;
				for(shop of this.list){
					for(goods of shop.list){
						if(goods.isSelect){
							allPrice+=goods.num*goods.price
						}
					}
				}
				return allPrice
			}
		},
		methods:{
			dealSub(index,subindex){
				var shop = this.list[index]
				var goods = shop.list[subindex]
				if(goods.num-1>0){
					goods.num--
				}	
			},
			dealAdd(index,subindex){
				var shop = this.list[index]
				var goods = shop.list[subindex]
				goods.num++
			},
			dealDelete(index,subindex){
				var shop = this.list[index]
				shop.list.splice(subindex,1)
			},
			dealSelectGoods(index,subindex){
				var shop = this.list[index]
				var goods = shop.list[subindex]
				goods.isSelect =!goods.isSelect;

				//判断所有商品是否被选中
				var isSelectAllGoods = true;
				for(goods of shop.list){
					if(goods.isSelect==false){
						isSelectAllGoods=false
					}
				}
				if(isSelectAllGoods){
					shop.isSelect=true
				}else{
					shop.isSelect=false
				}

				//判断所有商铺是否被选中
				var isSelectAllShop = true;
				for(shop of this.list){
					if(shop.isSelect==false){
						isSelectAllShop=false
					}
				}
				
				if(isSelectAllShop){
					this.isSelectAll=true
				}else{
					this.isSelectAll=false
				}
			},
			dealSelectShop(index){
				var shop = this.list[index]
				shop.isSelect=!shop.isSelect
				for(goods of shop.list){
					goods.isSelect = shop.isSelect
				}

				//判断所有商铺是否被选中
				var isSelectAllShop = true;
				for(shop of this.list){
					if(shop.isSelect==false){
						isSelectAllShop=false
					}
				}

				if(isSelectAllShop){
					this.isSelectAll=true
				}else{
					this.isSelectAll=false
				}
			},
			dealSelectAll(){
				this.isSelectAll=!this.isSelectAll;
				for(shop of this.list){
					shop.isSelect = this.isSelectAll
					for(goods of shop.list){
						goods.isSelect = this.isSelectAll
					}
				}
				
			}
		}
	})
	
</script>