vue小练习—购物车

当没有商品选中时则不能提交表单,支持全选全不选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
		<style>
		.table{
			margin-top: 100px;
		}
		</style>
	</head>
	<body>
		<div class="container hidden" id="app">
			<table class="table table-striped table-bordered">
				<tr>
					<th>#</th>
					<th><input type="checkbox" v-model="checkedAll" v-on:click="checkAll()" />全选</th>
					<th>商品</th>
					<th>单价</th>
					<th style="width: 120px;">数量</th>
					<th>小计</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in goods">
					<td>{{index}}</td>
					<td><input type="checkbox" v-model="item.checked" v-on:click="checkbox()" /></td>
					<td>{{item.name}}</td>
					<td>{{item.price}}</td>
					<td>
						<div class="input-group">
							<span class="input-group-addon" v-on:click="reduce(index)">-</span>
						  	<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" v-model="item.num">
						  	<span class="input-group-addon" v-on:click="add(index)">+</span>
						</div>
					</td>
					<td>{{item.num*item.price}}</td>
					<td><button type="button" class="btn btn-danger" v-on:click="modal(index)">删除</button></td>
				</tr>
				<tr>
					<td>总价</td>
					<td colspan="5">{{totalPrice}}</td>
					<td><button type="button" class="btn btn-danger" v-on:click="modal(-2)">清空购物车</button></td>
				</tr>
			</table>
			<button type="button" class="btn btn-danger" v-bind:class="{disabled:!submit}" v-on:click="onsubmit()">提交订单</button>
			<!--弹出框-->
			<div class="modal fade" id="mymodal" tabindex="-1" role="dialog">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">提示</h4>
						</div>
						<div class="modal-body">
							<p>确定要删除{{removegood}}吗?</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-danger" data-dismiss="modal" v-on:click="remove(nowIndex)">确定</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
		</div>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script>
		
			var app = new Vue({
				el:"#app",
				data:{
					totalPrice:0,					//总金额
					nowIndex:-10,					//控制弹窗
					removegood:'',					//要删除的物品
					checkedAll:false,				//全选
					submit:false,					//提交,true为可以提交,false为不能提交
					goods:[
						{
							id:'001',
							checked:false,
							name:"javascript",
							price:120,
							num:1
						},
						{
							id:'002',
							checked:false,
							name:"java",
							price:100,
							num:1
						},
						{
							id:'003',
							checked:false,
							name:"php",
							price:110,
							num:1
						}
					]
				},
				methods: {
					add: function(index){					//数量增加
						this.goods[index].num++;
					},
					reduce: function(index){				//数量减少
						var vm = this;
						vm.goods[index].num--;
						if(vm.goods[index].num < 1){
							vm.goods[index].num = 1;
							vm.modal(index);
						}
						
					},
					modal: function(index){					//弹窗
						var vm = this;
						vm.nowIndex = index;
						if(index >= 0){
							vm.removegood = vm.goods[index].name;
						}else{
							vm.removegood = "购物车全部商品"
						}
						$("#mymodal").modal();
					},
					remove: function(n){					//判断是删除一个商品还是清空购物车
						if(n == -2){
							this.goods = [];
							return;
						}
						this.goods.splice(n,1);
					},
					checkAll: function(){					//全选
						var vm = this;
						
						vm.goods.forEach(function(element) {
							if(vm.checkedAll){
								element.checked = true;
								vm.submit = true;
							} else{
								element.checked = false;
								vm.submit = false;
							}
						});
						
					},
					checkbox: function () {					//选中某一个商品,如果全部选中则 checkedAll 为true,如果一个都没选中则不能提交订单
						var vm = this;
						var len = vm.goods.length;
						var n = 0;
						for (var i = 0; i < len; i++) {
							if(vm.goods[i].checked){
								n++;
								if(n == len){
									vm.checkedAll = true;
								} else{
									vm.checkedAll = false;
								}
							}
						}

						if (n > 0) {
							vm.submit = true;
						} else {
							vm.submit = false;
						}
					},
					onsubmit: function(){					//提交订单,需要判断是否有选中的商品
						if(this.totalPrice == 0){
							console.log("请选择要购买的商品")
							return false;
						}
						console.log(JSON.stringify(this.goods))
					}
				},
				computed: {									//计算总金额
					totalPrices: function(){
						var total = 0;
						this.goods.forEach(function(mes){
							if(mes.checked){
								total += mes.num*mes.price
							}							
						})
						this.totalPrice = total;
						return this.totalPrice;
					}
				},
				watch:{										//实时观察金额是否有变化
					totalPrices: function(newValue, oldValue){
						return this.totalPrice = newValue;
					}
				},
				mounted: function(){						//为了防止闪屏,数据渲染后再显示DOM
					$("#app").removeClass("hidden");
				}
			})
		</script>
	</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » vue小练习—购物车

赞 (1)
分享到:更多 ()

发表评论 0