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

</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 的功能是当变量等于某个值(=后面跟的值)时,指令所在的标签显示
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容