<!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>
<!-- 当购物车里面的东西清空的时候 product.length=0-->
<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>
