Java Goods Shopping Course Lecture _day17(5)

Keywords: Java Front-end

Page Settlement - Payment Choice
3.1 Demand Analysis
To realize the choice of payment mode, there are two payment modes: Wechat payment and cash on delivery payment.

3.2 Choice of Payment Method
3.2.1 Front-end Control Layer

cartController.js

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

//Choose payment method

$scope.selectPayType=function(type){

$scope.order.paymentType=  type;

}

3.1.1 page

[/img]getOrderInfo.html

<li  class="selected"  ng-click="selectPayType('1')">WeChat payment<span  title="Click Cancel Selection
"></span></li>

<li  ng-click="selectPayType('2')">Cash on Delivery<span  title="Click Cancel Selection"></span></li>

Settlement Page - List of Goods and Amount Display
4.1 Demand Analysis
Show the list of items in the shopping cart and the total amount and amount.

4.2 Show the list of goods
(1) Initialization call on page getOrderInfo.html

(2) Circulating display of list of goods

<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 No reason to return goods</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">In stock</div>

</li>

</ul>

</div>

4.1 Display the total amount

Modify getOrderInfo.html

<        div        class="list">

<span><i  class="number">{{totalValue.totalNum}}</i>Goods, Total Goods Amount</span>

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

</div>

......

<div  class="fc-price">Amount payable:

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

Posted by TheBurtle on Thu, 24 Jan 2019 03:27:15 -0800