购物车

最新推荐文章于 2022-07-15 16:39:44 发布

c_1584912579

最新推荐文章于 2022-07-15 16:39:44 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/c_1584912579/article/details/79081503

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚滚滚</title>
<link href="lib/css/ionic.css" rel="stylesheet" />
<script src="lib/js/ionic.bundle.js"></script>
<script type="text/javascript">
angular.module("sss",[]).controller("dom",function($scope){
/* 1 创建数据的操作 */
$scope.datas = [{
state: false,
head: "https://img12.360buyimg.com/n1/jfs/t12223/184/496496336/324104/74ab9eb0/5a0d3eb2N5604ef8d.jpg",
title: "新鲜水果",
price: 3.8,
num: 1
},
{
state: false,
head: "https://img10.360buyimg.com/jdcms/s130x130_jfs/t3220/28/2650111828/190096/d36bddd4/57e4c912Nf23ee79b.jpg!q80.webp",
title: "鸳鸯柚子2粒装",
price: 19.8,
num: 1
},
{
state: false,
head: "https://img11.360buyimg.com/jdcms/s130x130_jfs/t9445/267/2454589847/216899/d2f252ed/59cf3955N38166d89.jpg!q80.webp",
title: "阳澄湖大闸蟹",
price: 209,
num: 1
}
];
$scope.update=function(id,i){
$scope.datas[id].num=$scope.datas[id].num+i;
if($scope.datas[id].num==0){
$scope.datas.splice(id,1);
}
}
$scope.cheall=function(){
var ss=$scope.chel;
for (var i = 0; i < $scope.datas.length; i++) {
$scope.datas[i].state=ss;
}
}
$scope.count = 0; //计算总数量

$scope.sumprice = function() {
var sum = 0;
$scope.count = 0;

for(var i in $scope.datas) {
//如果当前对象的状态是选中状态,
if($scope.datas[i].state) {
sum += $scope.datas[i].price * $scope.datas[i].num;
$scope.count += $scope.datas[i].num;
}

}
return sum;
}
})
</script>
</head>
<body ng-app="sss" ng-controller="dom">
<div class="bar bar-header bar-light">
<h1 class="title">购物车</h1>
<button class="button button-royal">管理</button>
</div>
<div class="content has-header has-footer padding">
<div class="list" style="padding-bottom:40px">
<div class="item item-divider">
<span>10元任选3件</span>
<span style="float: right;">去凑单</span>
</div>
<a class="item" href="#" style="min-height: 100px; display: flex;" ng-repeat="s in datas" >
<label class="checkbox" style="padding: 0px; " >
<input type="checkbox" ng-model="s.state" style="margin-top: 30px;"/>
</label>
<img src={{s.head}} style="width: 80px; height: 80px;" />
<div>
<h2>{{s.title}}</h2>
<div style="margin-top: 20px;">
<div style="float: left;" >￥{{s.price}}</div>
<div style="float: right;margin-left: 20px;" >
<button ng-click="update($index,1)">+</button>
<input ng-model="s.num" style="width: 40px;margin: 0px;" />
<button ng-click="update($index,-1)">-</button>
</div>
</div>
</div>
</a>
</div>

</div>
<div class="bar bar-footer bar-balanced" style="height: 70px;line-height: 70px;">
<div>
<span style="font-size: 20px;">全选</span>    
<label class="checkbox" style="padding: 0px; " >
<input type="checkbox" ng-click="cheall()" ng-model="chel" />
</label>
</div>

<div class="title" >
<span> 总额:{{sumprice()|currency:"¥"}}</span>
<span>优惠金额￥0.00</span>
</div>
<button class="button button-royal pull-right">结算（{{count}}）</button>
</div>
</body>

</html>