黑马程序员技术交流社区

标题: 【郑州校区】Java之品优购课程讲义_day17（5） [打印本页]

---

作者: 谷粒姐姐    时间: 2018-10-26 11:14
标题: 【郑州校区】Java之品优购课程讲义_day17（5）

结算页-支付方式选择

3.1 需求分析

实现支付方式的选择，品优购支持两种支付方式：微信支付和货到付款

3.2 支付方式选择

3.2.1 前端控制层

cartController.js

[AppleScript] 纯文本查看 复制代码

$scope.order={paymentType:'1'};



//选择支付方式



$scope.selectPayType=function(type){





$scope.order.paymentType=  type;





}

3.1.1 页面

[/img]getOrderInfo.html

[AppleScript] 纯文本查看 复制代码

<li  class="selected"  ng-click="selectPayType('1')">微信付款<span  title="点击取消选择

"></span></li>



<li  ng-click="selectPayType('2')">货到付款<span  title="点击取消选择"></span></li>

结算页-商品清单与金额显示

4.1 需求分析

显示购物车中的商品清单以及合计数量、金额

4.2 显示商品清单

（1）页面 getOrderInfo.html 上初始化调用

（2）循环显示商品清单

[AppleScript] 纯文本查看 复制代码

<div  ng-repeat="cart  in  cartList">



<ul  class="yui3-g"  ng-repeat="orderItem  in  cart.orderItemList">



<li  class="yui3-u-1-6">



<span><img  src="{{orderItem.picPath}}"/></span>



</li>



<li  class="yui3-u-7-12">



<div  class="desc">{{orderItem.title}}</div>



<div  class="seven">7 天无理由退货</div>

</li>



<li  class="yui3-u-1-12">



<div  class="price">￥{{orderItem.price}}</div>



</li>



<li  class="yui3-u-1-12">



<div  class="num">X{{orderItem.num}}</div>



</li>



<li  class="yui3-u-1-12">



<div  class="exit">有货</div>



</li>



</ul>



</div>

4.1 显示合计金额

修 改 getOrderInfo.html

[AppleScript] 纯文本查看 复制代码

<        div        class="list">



<span><i  class="number">{{totalValue.totalNum}}</i>件商品，总商品金额</span>



<em  class="allprice">¥{{totalValue.totalMoney.toFixed(2)}}</em>





</div>





......



<div  class="fc-price">应付金额:



<span  class="price">¥{{totalValue.totalMoney.toFixed(2)}}</span></div>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2