AngularJS学习第五天：订单列表

相关文章推荐

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;
    }

数据准备

• 预定义订单数据格式

{ 
status: '00901',
id: 10,
name: "秋装中长款毛呢外套 7796#姜黄色 S ",
total: '500',
count: '10',
time:"2016.12.12 15:45"
}
//属性从上到下分别代表订单状态，订单ID，订单内第一个商品名，订单总价，订单内商品数目，下单时间

• 订单状态预定义

00901 已下单
00902 已支付
00903 已发货
00904 已收货
00905 订单已取消

• 根据功能进行方法准备和代码的编写

根据代码显示订单列表

    
        

            

              

               
                

                  待支付
                  去支付
                
                

                  已支付
                  提醒发货
                
                

                  已发货
                  确认收货
                
                

                  已收货
                
                

                  订单已取消
                

                
                
                
                    

                        

                        
{{item.name}}
                        
共{{item.count}}件商品 共￥{{item.total}}
                    
                
                

                  {{item.time}}
                
            
        
    

      您暂时没有订单
    
    

• 本次新增指令 ng-switch 需要与 ng-switch-when配合使用
• 为什么要用这个指令？因为，通常情况下 当订单还未支付（订单状态为00901）的时候，我们需要显示去支付按钮；已经支付（00902），我们需要显示提醒发货按钮；已经发货（00903），我们需要显示确认收货；已收货（00904）需要显示已收货；订单已取消（00905），我们需要显示 订单已取消；也就是说我们会根据订单的状态（status）去显示不同的内容
• ng-switch 定义根据什么来判断内容是否显示 = 后面跟 变量

• ng-switch-when 的功能是当变量等于某个值（=后面跟的值）时，指令所在的标签显示