添加购物车

最新推荐文章于 2022-06-29 19:12:27 发布

wei844067872

最新推荐文章于 2022-06-29 19:12:27 发布

阅读量397

点赞数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="lib/css/ionic.css" />
<script src="lib/js/ionic.bundle.js"></script>
<style>
body{
width: 1000px;
margin: 0 auto;
}
ul{
float: left;
}
#content{
width: 500px;
background-color: red;
float: right;
}
</style>

<script>
angular.module("myapp",["ionic"])
.config(function($stateProvider){
$stateProvider
.state("shouye",{
url:"/shouye",
templateUrl:"shouye.html"
})
.state("cart",{
url:"/tocart",
templateUrl:"cart.html"
})
})

.controller("dataCtrl", function($scope, $http, $filter, $state) {
//默认把路径设置 state1
$state.go("shouye");

//定义变量 ,存放从json得到数据
var datagoods;
$scope.count = 0; //总数量
$scope.sumprice = 0; //总价
$scope.goodCart = []; //买的商品 ,商品数量

$http.get("datas.json").success(function(resp) {

console.log("获取到的商品数组,", resp); //resp 指向数组
$scope.goods = resp;
datagoods = resp;

})

$scope.selData=function(t){
$f=$filter("filter");
$scope.goods=$f(datagoods,{"type":t});
}

$scope.goCart=function(i){
var good=$scope.goods[i];
console.log("商品价格",good.price);
$scope.sumprice=$scope.sumprice+good.price;
$scope.count=$scope.count+1;

addCart(good);
}

//向购物车中添加商品私有函数
addCart = function(good) {
// [{"good":{"proname","鼠标","price":10},"num":1},{"good":good,"num":1}] 购物车的结构
var b = false; //b=true,有 b=false 没有 b代表购物车中是否存在本次购买的商品

for(var i = 0; i < $scope.goodCart.length; i++) {
if($scope.goodCart[i].good == good) {
$scope.goodCart[i].num = $scope.goodCart[i].num + 1;
b = true;
return;
}
}
if(b == false) {
$scope.goodCart.push({
"good": good,
"num": 1
});
}
}

$scope.del=function(index){
var gcart=$scope.goodCart[index];
gcart.num=gcart.num-1;
if(gcart.num==0){
$scope.goodCart.splice(index,1);
}
$scope.count = $scope.count-1; //总数量
$scope.sumprice = $scope.sumprice-gcart.good.price; //总价

}

})

</script>

</head>
<body ng-app="myapp" ng-controller="dataCtrl">
<ion-header-bar align-title="right" class="bar-positive">
<a class="button" href="#/shouye">运动商城</a>
<h1 class="title">你的购物车{{count}} {{sumprice|currency:"RMB ￥"}}</h1>
<div class="buttons">
<a class="button" href="#/tocart">结算</a>
</div>

</ion-header-bar>
<br /><br /><br />
<div ui-view></div>
</body>

</html>

<ul>
<li><button class="button button-light" style="width: 200px;" ng-click="selData('')">首页</button></li>
<li><button class="button button-light" style="width: 200px;" ng-click="selData('女装')">女装</button></li>
<li><button class="button button-light" style="width: 200px;" ng-click="selData('男装')">男装</button></li>
</ul>
<div id="content">
<ul class="list">
<li class="item" ng-repeat="g in goods">
<h3>{{g.proname}}</h3>
<img src="img/y.jpg" width="160px" />

<button class="button button-calm" style="float: right;" ng-click="goCart($index)">
加入购物车
</button>
<span>{{g.price|currency:"RMB ￥"}}</span>
</li>
</ul>

</div>

<div class="alert alert-warning" ng-show="goodCart.length==0">
您的购物车是空的。<a href="#/index" class="alert-link">继续购物</a>
</div>
<table ng-hide="goodCart.length==0">
<tr>
<th>数量</th>
<th>商品名称</th>
<th>单价</th>
<th>小计</th>
</tr>
<tr ng-repeat="c in goodCart">
<td>{{c.num}}</td>
<td>{{c.good.proname}}</td>
<td>{{c.good.price}}</td>
<td>{{c.good.price * c.num|currency:"RMB ￥"}}
<button class="button-small" ng-click="del($index)">删除</button>
</td>
</tr>
</table>

[{"proname":"天天特价S925银渐变天鹅项链吊坠女纯银锁骨链韩版简约生日送女友","price":158,"type":"饰品"},
{"proname":"羊剪绒外套短款女仿皮草大衣连帽皮毛一体狐狸毛领","price":120,"type":"女装"},
{"proname":"星星的你同款皮草大衣女中长款狐狸毛内胆仿皮草外套","price":278,"type":"女装"},
{"proname":"天天特价男士棉服冬季韩版潮流面包服男款棉衣冬天袄子男冬装外套","price":88,"type":"男装"},
{"proname":"天天特价花花公子贵宾马甲男秋冬季外套羽绒棉背心休闲马夹坎肩潮","price":69,"type":"男装"},
{"proname":"天天特价马丁靴女秋冬女鞋2017新款短靴女百搭英伦风裸靴平底女靴","price":79,"type":"鞋包"}
]