A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

购物车前端代码
3.1 需求分析
实现购物车页面的展示与相关操作
图片4.png
可以实现购物车列表、数量的增减与移除以及合计数统计
3.1 购物车列表
3.1.1 前端服务层
pinyougou-cart-web 增加 cartService.js
[AppleScript] 纯文本查看 复制代码
//购物车服务层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
[AppleScript] 纯文本查看 复制代码
//购物车控制层app.controller('cartController',function($scope,cartService){
//查询购物车列表

$scope.findCartList=function(){ cartService.findCartList().success(
function(response){


$scope.cartList=response;


}


);


}


});
3.1.1 页面
修改 cart.html        引入 js
[AppleScript] 纯文本查看 复制代码
<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>
添加相关指令,指定控制器,调用初始化方法
[AppleScript] 纯文本查看 复制代码
<body  ng-app="pinyougou"  ng-controller="cartController"  ng-init="findCartList()">
循环显示购物车列表
[AppleScript] 纯文本查看 复制代码
<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">
[AppleScript] 纯文本查看 复制代码
{{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  href="javascript:void(0)"  class="increment  mins">-</a>


<input  autocomplete="off"  type="text"  ng-model="orderItem.num" minnum="1"  class="itxt"  />

<a  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  href="#none">删除</a><br  />

<a  href="#none">移到我的关注</a>

</li>


</ul>


</div>


</div>


</div>

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马