购物车前端代码
3.1 需求分析
实现购物车页面的展示与相关操作
可以实现购物车列表、数量的增减与移除以及合计数统计
3.1 购物车列表
3.1.1 前端服务层
pinyougou-cart-web 增加 cartService.js
//购物车服务层app.service('cartService',function($http){
//购物车列表
this.findCartList=function(){
}
});
3.1.1 file:///C:\Users\user\AppData\Local\Temp\ksohtml\wpsC1F6.tmp.pngfile:///C:\Users\user\AppData\Local\Temp\ksohtml\wpsC1F7.tmp.png前端控制层
pinyougou-cart-web 增加 cartController.js
//购物车控制层app.controller('cartController',function($scope,cartService){
//查询购物车列表
$scope.findCartList=function(){ cartService.findCartList().success(
function(response){
$scope.cartList=response;
}
);
}
});
3.1.1 页面 修改 cart.html 引入 js
<script type="text/javascript" src="plugins/angularjs/angular.min.js"> </script>
<script type="text/javascript" src="js/base.js"> </script>
<script type="text/javascript" src="js/service/cartService.js"> </script>
<script type="text/javascript" src="js/controller/cartController.js"> </script>
添加相关指令，指定控制器，调用初始化方法
<body ng-app="pinyougou" ng-controller="cartController" ng-init="findCartList()">
循环显示购物车列表
<div class="cart-item-list" ng-repeat="cart in cartList">
<div class="cart-shop">
<input type="checkbox" name="" id="" value="" />
<span class="shopname self">{{cart.sellerName}}【商家 ID:{{cart.sellerId}}】
</span>
</div>
<div class="cart-body">
<div class="cart-list" ng-repeat="orderItem in cart.orderItemList">
<ul class="goods-list yui3-g">
<li class="yui3-u-1-24">
<input type="checkbox" name="" id="" value="" />
</li>
<li class="yui3-u-11-24">
<div class="good-item">
<div class="item-img"><img src="{{orderItem.picPath}}"
/></div>
<div class="item-msg">
{{orderItem.title}}[/size][/font][/align][font=微软雅黑][size=3]
</div>
</div>
</li>
<li class="yui3-u-1-8"><span class="price">{{orderItem.price.toFixed(2)}}</span></li>
<li class="yui3-u-1-8">
<a rel="nofollow" href="javascript:void(0)" class="increment mins">-</a>
<input autocomplete="off" type="text" ng-model="orderItem.num" minnum="1" class="itxt" />
<a rel="nofollow" href="javascript:void(0)" class="increment plus">+</a>
</li>
<li class="yui3-u-1-8"><span class="sum">{{orderItem.totalFee.toFixed(2)}}</span></li>
<li class="yui3-u-1-8">
<a rel="nofollow" href="#none">删除</a><br />
<a rel="nofollow" href="#none">移到我的关注</a>
</li>
</ul>
</div>
</div>
</div>
