Vue精品购物车

Bertha 。 2023-05-29 02:03 11阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			table th,
    			table td {
    				text-align: center;
    			}
    
    			input[type='text'] {
    				width: 40px;
    				text-align: center;
    			}
    		</style>
    	</head>
    	<body>
    
    		<div class="cantainer" id='demo'>
    			<div class="row">
    				<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
    					<div class="page-header">
    						<h2>我的购物车</h2>
    					</div>
    				</div>
    			</div>
    			<div class="row" v-show="product.length!=0">
    				<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
    					<table class="table table-hover">
    						<thead>
    							<th>全选<input type="checkbox" v-model="allStatus" @click="changeAllStatus">
    							<button @click="deletaAll" class="btn btn-danger btn-sm">批量删除</button>
    							
    							</th>
    							<th>序号</th>
    							<th>品牌</th>
    							<th>品名</th>
    							<th>单价</th>
    							<th>购买数量</th>
    							<th>商品价格</th>
    							<th>操作</th>
    						</thead>
    						<tbody>
    							<tr v-for="(item,index) in product">
    								<td>
    									<input
    										type="checkbox" 
    										@click="checkStatus(item)"
    										v-model="item.status" 
    										:value="item.name">
    								</td>
    								<td>{
       {index+1}}</td>
    								<td>{
       {item.brand}}</td>
    								<td>{
       {item.name}}</td>
    								<td>{
       {item.price}}</td>
    
    								<td>
    									<button class='btn btn-xs btn-default' @click="item.count--" :disabled="item.count==1">-</button>
    									<input type="text" min="1" step="1" v-model="item.count" />
    									<button class='btn btn-xs btn-default' @click="item.count++">+</button>
    								</td>
    								<td>{
       {item.price*item.count}}</td>
    								<td>
    									<button class="btn btn-danger btn-xs" @click="deleteProduct(index)">删除</button>
    								</td>
    							</tr>
    						</tbody>
    					</table>
    					<div>您的购物总价为：{
       {totalprice}}</div>
    				</div>
    			</div>
    			
    			<div v-show="product.length==0">
    				<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
    					您的购物车空空如也,请返回首页
    				</div>
    			</div>
    		</div>
    
    	</body>
    	<script type="text/javascript">
    		var demo = new Vue({
    			el: '#demo',
    			data: {
    				product: [{
    						id: 1,
    						brand: '三星',
    						name: 'Galaxy X8',
    						price: 4500,
    						count: 1,
    						status:false
    					},
    					{
    						id: 2,
    						brand: 'Apple',
    						name: 'iphone X',
    						price: 6700,
    						count: 1,
    						status:false
    					},
    					{
    						id: 3,
    						brand: '红富士',
    						name: '苹果',
    						price: 3,
    						count: 10,
    						status:false
    					},
    					{
    						id: 4,
    						brand: '罗技',
    						name: '鼠标',
    						price: 1200,
    						count: 1,
    						status:false
    					},
    					{
    						id: 5,
    						brand: '今麦郎',
    						name: '矿泉水',
    						price: 1,
    						count: 3,
    						status:false
    					}
    				],
    				allStatus:false
    			},
    			methods: {
    				/* 删除商品 */
    				deleteProduct: function(index) {
    					if(confirm('您确定删除该商品吗？')){
    						this.product.splice(index, 1)
    					}	
    				},
    				/*全选与全不选*/
    				changeAllStatus(){
    					var _this = this;
    					if(!_this.allStatus){
    						/*全选*/
    						for(var i=0;i<_this.product.length;i++){
    							_this.product[i].status = true;
    						}
    					}else{
    						/*全不选*/
    						for(var i=0;i<_this.product.length;i++){
    							_this.product[i].status = false;
    						}
    					}
    				},
    				/*跟踪定位单个选项*/
    				checkStatus(item){
    					/*1、当前按钮状态*/
    					if(!item.status){
    						item.status = true;
    					}else{
    						item.status = false;
    					}
    					/* 2、every全真即真、some有真即真 */
    					var _this = this;
    					var result = _this.product.every(function(item,index,self){
    						return item.status;
    					})
    					if(!result){
    						_this.allStatus = false;
    					}else{
    					_this.allStatus = true;
    					}					
    				},
    				/*批量删除*/
    				deletaAll(){
    					var _this = this;
    					_this.product = _this.product.filter(function(item,index,self){
    						return item.status == false;
    					})
    					if(_this.allStatus){
    						_this.allStatus = false;
    					}
    				}
    			},
    			
    			computed: {
    				totalprice: function() {
    					var sum = 0;
    					for (var i = 0; i < this.product.length; i++) {
    						sum += this.product[i].price * this.product[i].count
    					}
    					return sum;
    				}
    			}
    		})
    	</script>
    </html>