AngularJS学习第五天：订单列表
2016-10-10 本文已影响297人
小枫学幽默
相关文章推荐
Angular学习第一天：登录功能
Angular学习第二天：tab标签页切换效果
Angular学习第三天：用户地址管理
Angular学习第四天：用户地址管理
今天我们来做一下电商网站常见的订单列表功能
实现功能，订单列表相信大家都熟悉（小编最喜欢的就是确认收货了！！）
- 显示商品列表
- 订单支付
- 提醒发货
- 当订单列表没有订单时，显示没有订单
- 确认收货订单
首先我们来看下实际运行效果
Paste_Image.png
样式是基础知识，不在赘述
* {
padding: 0;
margin: 0;
font-family: Arial, 'Microsoft YaHei', Helvetica, 'Hiragino Sans GB';
}
html {
font-size: 10px;
}
.orders-list {
background-color: #f8f8f8;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0px;
overflow: auto;
text-align: left;
font-size: 1.4rem;
}
.orders-list .orders-item {
background-color: #fff;
margin-bottom: 10px;
}
.orders-list .item-op {
color: #333;
padding: 10px 15px;
position: relative;
}
.orders-list .item-op span.btn{
background-color: #ff4354;
color: #fff;
display: block;
position: absolute;
padding: 5px 0px;
border-radius: 5px;
right: 15px;
top: 5px;
width: 80px;
text-align: center;
}
.orders-list a:link,
.orders-list a:visited {
color: #333;
}
.orders-list .item-con {
padding: 10px 15px 10px 80px;
position: relative;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
}
.orders-list .item-con p {
padding-top: 5px;
}
.orders-list .item-con .img-placeholder {
position: absolute;
left: 15px;
top: 10px;
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 5px;
}
.orders-list .c_333 {
color: #333;
}
.orders-list .c_ff4354 {
color: #ff4354;
}
.orders-list .c_ccc {
color: #ccc;
}
.orders-list .f-r {
float: right;
}
.orders-list .item-btn {
display: inline-block;
padding: 0 10px;
margin-left: 10px;
}
.nothing {
padding: 40px;
}
.nothing div {
background-color: #ff4354;
color: #ffffff;
border-radius: 10px;
margin: 0 auto;
padding: 10px;
text-align: center;
}
#toast {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,50%);
background-color: #717171;
color: #ffffff;
padding: 10px;
border-radius: 10px;
font-size: 1.4rem;
}
</style>
数据准备
- 预定义订单数据格式
{
status: '00901',
id: 10,
name: "秋装中长款毛呢外套 7796#姜黄色 S ",
total: '500',
count: '10',
time:"2016.12.12 15:45"
}
//属性从上到下分别代表订单状态，订单ID，订单内第一个商品名，订单总价，订单内商品数目，下单时间
- 订单状态预定义
00901 已下单
00902 已支付
00903 已发货
00904 已收货
00905 订单已取消
- 根据功能进行方法准备和代码的编写
<script src="angular-1.3.0.js"></script>
<script>
function showAltMsg(msg) {
var toast = document.getElementById('toast');
if (toast) {
toast.innerHTML = msg;
toast.style.display = "block";
} else {
var msgDom = document.createElement('div');
msgDom.id = 'toast';
msgDom.innerHTML = msg;
var body = document.getElementsByTagName('body')[0]
body.appendChild(msgDom);
}
setTimeout(function() {
var toast = document.getElementById('toast');
toast.style.display = "none";
}, 2000);
}
function myTabCtrl($scope) {
//订单列表
$scope.orders = [
{
status: '00901',
id: 10,
name: "秋装中长款毛呢外套 7796#姜黄色 S ",
total: '500',
count: '10',
time:"2016.12.12 15:45"
}, {
status: '00902',
id: 11,
name: "秋装中长款毛呢外套 7796#姜黄色 S ",
total: '500',
count: '10',
time:"2016.12.12 15:45"
}, {
status: '00903',
id: 12,
name: "秋装中长款毛呢外套 7796#姜黄色 S ",
total: '500',
count: '10',
time:"2016.12.12 15:45"
}, {
status: '00904',
id: 13,
name: "秋装中长款毛呢外套 7796#姜黄色 S ",
total: '500',
count: '10',
time:"2016.12.12 15:45"
}, {
status: '00905',
id: 14,
name: "秋装中长款毛呢外套 7796#姜黄色 S ",
total: '500',
count: '10',
time:"2016.12.12 15:45"
}, {
status: '00905',
id: 15,
name: "秋装中长款毛呢外套 7796#姜黄色 S ",
total: '500',
count: '10',
time:"2016.12.12 15:45"
}
]
//支付订单
$scope.pay = function(item) {
var realIndex = $scope.getRealIndex(item.id);
$scope.orders[realIndex].status ='00902';
showAltMsg("支付成功");
}
//获得订单在订单列表中的真实索引
$scope.getRealIndex = function(id) {
var realIndex = -1;
for (var i = 0; i < $scope.orders.length; i++) {
if ($scope.orders[i].id == id) {
realIndex = i;
break;
}
}
return realIndex;
}
//确认收货
$scope.confirmRecive = function(item) {
var realIndex = $scope.getRealIndex(item.id);
$scope.orders[realIndex].status ='00904';
showAltMsg("确认收货");
};
//提醒发货
$scope.alertExpress = function(item) {
var realIndex = $scope.getRealIndex(item.id);
showAltMsg("订单号为："+item.id+"的订单，已提醒发货");
};
}
</script>
根据代码显示订单列表
<body ng-app="" ng-controller="myTabCtrl">
<div class="orders-list" ng-if="orders.length>0">
<div class="orders-item" ng-repeat="item in orders">
<div class="item-op-wrapper" ng-switch="item.status">
<!--判断状态-->
<div class="item-op" ng-switch-when="00901">
<span class="c_ff4354">待支付</span>
<span class="btn" ng-click="pay(item)">去支付</span>
</div>
<div class="item-op" ng-switch-when="00902">
<span >已支付</span>
<span class="btn" ng-click="alertExpress(item)">提醒发货</span>
</div>
<div class="item-op" ng-switch-when="00903">
<span >已发货</span>
<span class="btn" ng-click="confirmRecive(item)">确认收货</span>
</div>
<div class="item-op" ng-switch-when="00904">
<span >已收货</span>
</div>
<div class="item-op" ng-switch-when="00905">
<span class="c_ccc" >订单已取消</span>
</div>
<!--判断状态/-->
</div>
<a class="home">
<div class="item-con">
<div class="img-placeholder"></div>
<p>{{item.name}}</p>
<p>共{{item.count}}件商品 共￥{{item.total}}</p>
</div>
</a>
<div class="item-op c_ccc">
{{item.time}}
</div>
</div>
</div>
<div class="nothing" ng-if="orders.length==0">
您暂时没有订单
</div>
</body>
- 本次新增指令 ng-switch 需要与 ng-switch-when配合使用
- 为什么要用这个指令？因为，通常情况下 当订单还未支付（订单状态为00901）的时候，我们需要显示去支付按钮；已经支付（00902），我们需要显示提醒发货按钮；已经发货（00903），我们需要显示确认收货；已收货（00904）需要显示已收货；订单已取消（00905），我们需要显示 订单已取消；也就是说我们会根据订单的状态（status）去显示不同的内容
- ng-switch 定义根据什么来判断内容是否显示 = 后面跟 变量
<div class="item-op-wrapper" ng-switch="item.status">
</div>
- ng-switch-when 的功能是当变量等于某个值（=后面跟的值）时，指令所在的标签显示
