ionic简单购物车案例

最新推荐文章于 2020-07-29 10:39:21 发布

沉迷学习一一无法自拔

最新推荐文章于 2020-07-29 10:39:21 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/tangxueqin/article/details/79085931

HTML5 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用Angular开发的简易购物车应用案例。该应用通过Angular框架实现了一个包含商品选择、数量调整、全选及总价计算等功能的购物车界面。

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width" />


<link href="../lib/css/ionic.css" rel="stylesheet">

<script src="../lib/js/ionic.bundle.js"></script>
<style>
input{
text-align: center;
}
</style>
<script>
angular.module("myApp", [])
.controller("democ", 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.ckAll = function() {
var isck = $scope.ckall;
//改变数据时,
for(var i in $scope.datas) {
$scope.datas[i].state = isck;
}
}
//计算总价和总数量
$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;
}

//修改
$scope.update=function(index,num){

$scope.datas[index].num=$scope.datas[index].num+num;
if($scope.datas[index].num==0){
$scope.datas.splice(index,1);
}

}

})
</script>
</head>

<body ng-app="myApp" ng-controller="democ">

<div class="bar bar-header ">
<h2 class="title">购物车</h2>
<h3 class="title title-right" style="font-size: 10px;">管理</h3>
</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="data in datas">

<label class="checkbox" style="padding: 0px;" >
  <input type="checkbox" ng-model="data.state"/>
  </label>
  

<img src={{data.head}} style="width: 80px; height: 80px;">

<div style="padding:0px 10px; display: flex;flex-direction: column;">
<div>
[次日达]{{data.title}}
</div>
<div style="margin-top: 18px; width: 100%; display: flex; flex-direction: column;">
<div>{{data.price|currency:"¥"}}</div>
<div style="float: right;">
<button ng-click="update($index,1)">+</button>
<input ng-model="data.num" style="width: 40px;margin: 0px;" />
<button ng-click="update($index,-1)">-</button>
</div>

</div>
</div>
</a>
</div>

</div>


<div class="bar bar-footer" style="background: #999; height: 70px;">
<label class="checkbox">
<input type="checkbox" ng-click="ckAll()" ng-model="ckall">全选
</label>

<div style="margin-left: 100px;">
<h2>合计{{sumprice()|currency:"¥"}}</h2> 总额:{{sumprice()|currency:"¥"}} 优惠:{{0|currency:"¥"}}
</div>

<button class="button button-assertive pull-right" style="width:100px ;">结算({{count}})</button>
</div>
</body>

</html>