实战之确认购买



上节课回顾


介绍了购买下单第一步,也就是确认购买的商品。



购买下单页面需求


1.确认下单页面数据结构;


2.购买下单第一步:确认购买商品;


3.购买下单第二步:确认用户信息。


实例代码


<!doctype html>
<html ng-app="lesson" ng-controller="lesson13">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
LESSON 14
  </title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <style>
  #content1{padding:16px;}
  table
  {
  border-collapse:collapse;
  }
 
table,th, td
  {
  border: 1px solid black;
  vertical-align:top;
  padding:12px;
  }
  .buyAmount{width:30px;}
  .logo{width:100px;height:100px;}
  .accountInfo{margin-top:20px;}
  .accountInfo label { width:90px; display:inline-block; text-align:right;}
  .accountInfo p {margin:0;padding:0;}
  .accountInfo ul li span{color:red;}
  </style>
  </head>
 
  <body>
  
  
<div>
<div ng-show="Step1IsOk!=true">
<table>
<thead>
<tr>
<th>选中</th>
<th>ID</th>
<th>名称</th>
<th>编号</th>
<th>商品图片</th>
<th>购买数量</th>
<th>价格</th>
<th>应付</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in productList">
<td><input type="checkbox" ng-model="p.selected" /></td>
<td>{{p.productId}}</td>
<td>{{p.productName}}</td>
<td>{{p.productCode}}</td>
<td><img src="{{p.logo}}"  class="logo" ></td>
<td><input type="text" ng-model="p.buyAmount" /></td>
<td><b>{{p.retailPrice}}</b> <span>{{p.oldPrice}}</span></td>
<td>{{p.payment}}</td>
</tr>
</tbody>
</table>
</div>
 
<div ng-show="Step1IsOk==true">
<ul>
<li ng-repeat="p in orderProductList">
<b>{{p.productName}}</b>,购买数量:<span>{{p.buyAmount}}</span>,应付价格:<b>{{p.payment}}</b>
</li>
</ul>
</div>
 
<button ng-click="ConfirmStep1()" >确认商品</button>
<form name="AccountInfo" ng-show="Step2IsOk!=true" >
<ul>
<li><label>收货人姓名:</label><input type="text" name="TrueName" ng-model="TrueName" required ng-pattern="/^\w{2,5}$/" />
<span ng-show="AccountInfo.TrueName.$dirty && AccountInfo.TrueName.$invalid">
请输入2到5位的收货人姓名
</span>
</li>
<li><label>电话号码:</label><input type="text" name="Mobile" ng-model="Mobile" required ng-pattern="/^[0-9]{11}$/" />
<span ng-show="AccountInfo.Mobile.$dirty && AccountInfo.Mobile.$invalid">
请输入11位的电话号码
</span>
</li>
<li><label>QQ:</label><input type="text" name="QQ" ng-model="QQ" required ng-pattern="/^[0-9]{5,11}$/" />
<span ng-show="AccountInfo.QQ.$dirty && AccountInfo.QQ.$invalid">
请输入5到11位的QQ号码
</span>
</li>
<li><label>收货地址:</label><input type="text" name="Address" ng-model="Address" required />
<span ng-show="AccountInfo.Address.$dirty && AccountInfo.Address.$invalid">
请输入你的收货地址
</span>
</li>
<li>
<p ng-show="!NeedInvoice">
<input type="checkbox" ng-model="NeedInvoice" />需要发票
</p>
<p ng-show="NeedInvoice">
<label>发票抬头:</label><input type="text" name="InvoiceTitle" ng-model="InvoiceTitle" />
</p>
</li>
</ul>
<button ng-click="ConfirmStep2()" ng-disabled="AccountInfo.$invalid" >确认个人信息</button>
</form>
 
<div ng-show="Step2IsOk==true" >
<ul>
<li>{{TrueName}}</li>
<li>{{Mobile}}</li>
<li>{{QQ}}</li>
<li>{{Address}}</li>
<li>{{NeedInvoice}}</li>
<li>{{InvoiceTitle}}</li>
</ul>
</div>
 
</div>
<script src="scripts/angular-1.4.6.min.js"></script>
<script>
 
Array.prototype.remove=function(dx)
 {
  if(isNaN(dx)||dx>this.length){return false;}
  for(var i=0,n=0;i<this.length;i++)
  {
    if(this[i]!=this[dx])
    {
      this[n++]=this[i]
    }
  }
  this.length-=1
 }
 
var app = angular.module("lesson",[]);
app.controller("lesson13",function($scope){
 
$scope.productList = [
{
productId:1,
productName:'耳机',
productCode:'P0001',
logo:'http://y.zdmimg.com/201603/26/56f5e694762045067.jpg_d200.jpg',
buyAmount:1,
retailPrice:1500,
oldPrice:1700,
payment:1500,
selected:true
},
{
productId:2,
productName:'单反相机',
productCode:'P0002',
logo:'http://ym.zdmimg.com/201603/26/56f5e989a0a4a.jpg_d200.jpg',
buyAmount:1,
retailPrice:5200,
oldPrice:6000,
payment:5200,
selected:true
},
{
productId:3,
productName:'乐高积木',
productCode:'P0003',
logo:'http://y.zdmimg.com/201603/25/56f5086b664574407.png_d200.jpg',
buyAmount:1,
retailPrice:490,
oldPrice:600,
payment:490,
selected:true
}
];
 
$scope.Step1IsOk=false;
$scope.orderProductList = [];
 
$scope.ConfirmStep1 = function(){
for(var i in $scope.productList)
{
var product = $scope.productList[i];
if(product.selected){
$scope.orderProductList.push(product);
}
}
$scope.Step1IsOk = true;
};
 
 
$scope.TrueName = "";
$scope.Mobile = "";
$scope.QQ = "";
$scope.Address = "";
$scope.NeedInvoice = false;
$scope.InvoiceTitle = "";
 
$scope.Step2IsOk = false;
$scope.ConfirmStep2 = function(){
$scope.Step2IsOk =true;
};
 
});
 
</script>
 
  </body>
</html>


执行结果:


page5.png


请确认我们要购买的商品:


page6.png


填写个人信息:


page7.png


确认个人信息:


page8.png



本课小结


1.购买下单页面需求;


2.确认下单页面数据结构;


3.购买下单第二步:确认用户信息;


4.下一节课将为大家介绍支付方式。



【本文由大发二分彩—大发三分彩官方独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 tvqo.cn
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部