var self = this;
this.$http.get("shop.json").then(function (res) {
self.goods = res.data.result.goods;
},function () {
console.log("failed");
});
},
//是否全选
checkAll:function (flag) {
this.checkAllFlag = flag;
var self = this;
this.goods.forEach(function(value,index){
if(typeof value.checked == 'undefined'){
self.$set(value,"checked",self.checkAllFlag);
}else{
value.checked = self.checkAllFlag;
}
});
this.totalMoney();
},
//结算选中商品的价格
totalMoney:function () {
//初始化总价
this.totalAll = 0;
var self =this;
//通过foreach循环判断是否被选中
this.goods.forEach(function(value,index){
if(value.checked){
self.totalAll += value.price * value.number;
}
});
}
}
})
下面是CSS代码：
*{padding: 0;margin: 0;}
a{text-decoration: none;color: black;}
#app{width: 500px;height: 600px;border: 1px solid;position: absolute;margin-top:20px;margin-left:50px;}
.header{width: 500px;height: 30px;line-height: 30px;background-color: darkmagenta;}
.header span{display: inline-block;width: 50px;height: 30px;}
.show{width: 500px;height: 85px;margin-top: 5px;}
#footer{position: absolute;bottom: 0;width: 500px;height: 50px;background-color: #c7c7c9;}
.output{width: 40px;height: 20px;}
.image{width: 60px;height: 80px;float:left;}
.choice{display: inline-block;width: 15px;height: 15px;border-radius: 15px;border: 1px solid;float: left;margin-top: 30px;margin-left: 20px;}
.checked{background-color: darkorange;}
.icon{background-image: url(del.png);display: inline-block;width: 30px;height: 30px;margin-left: 50px;margin-top: 20px;}
.text{display:inline-block;width:50px;height:20px;line-height:20px;font:12px;margin-top:20px;margin-left:5px;float:left;}
.count{width:100px;height:40px;background-color:red;line-height:40px;font-size:16px;margin-left:40px;margin-top:5px;}
#footer a{display:inline-block;margin-left:5px;height:22px;}
#info{width:250px;height:100px;position:absolute;border:1px solid;margin-top:-250px;margin-left:120px;background-color:#c7c7c9;text-align:center;z-index:999;}
.get{width:80px;height:30px;font:17px;margin-top:10px;}
.shadow{width:100%;height:100%;background-color:black;opacity:0.8;margin-top:-480px;z-index:1;}
.close{position:absolute;right:2px;top:-5px;cursor:pointer;}下面是json代码：
{
"status":1,
"result":{
"total":50,
"goods":[
{
"name":"香烟",
"price":15,
"number":1,
