学习敏捷开发，party_bid故事卡4---竞价分析_敏捷故事卡案例-优快云博客

本文链接：https://blog.youkuaiyun.com/zuiku_baozi/article/details/38779137

上一张卡完成了组织竞价的功能，我们通过接收参与竞价的短信来获得了一些信息，然后就需要对这些信息进行一些处理来获得竞价结果，就是谁竞价成功了或者竞价失败了。根据竞价的规则，出价最低且不重复的竞价者竞价成功，如果没有出价或者没有最低且不重复的那么就竞价失败。竞价结果页面会根据出价升序排列所有参加竞价者的信息，竞价统计页面会统计不同的出价有多少人，按升序排列。竞价结束后自动跳转到竞价分析并弹窗提示竞价结果（谁成功了或者竞价失败），三秒后显示在页面底部。这部分新的东西主要就是模态框的使用。

1.模态框

Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。使用模态框可以丰富用户体验。要使用它有一些东西是必须的，需要 Jquery、Bootstrap CSS 和 JavaScript 文件 bootstrap-modal.js。这个 js 文件位于下载的 Bootstrap 主文件夹中的 js 文件夹内。Jquery 位于 Bootstrap 主文件夹中的 docs > assets > js 下，名为 jquery.js。

这里我们使用模态框来显示竞价结果，并三秒后消失也可手动关闭，代码如下：

var flag = Biding.get_bid_statistics_flag();
if( flag != 'done'){
    if(bid_result != null){
        $("#my_success_modal").modal('show',{backdrop:false});
        $timeout(function(){
            $("#my_success_modal").modal("hide");
            $scope.foot_message = true;
            $scope.show_footer_message = 'success_message';
        },3000);

     }
     else{
         $("#<span style="font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">my_failure_modal</span>").modal('show',{backdrop:false});
         $timeout(function(){
              $("#<span style="font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">my_failure_modal</span>").modal("hide");
              $scope.foot_message = true;
              $scope.show_footer_message = 'fail_message';
          },3000);
      }
}
else{
     if (bid_result != null) {
          $scope.foot_message = true;
          $scope.show_footer_message = 'success_message';
     }
     else {
          $scope.foot_message = true;
          $scope.show_footer_message = 'fail_message';
     }
}

这里的flag是用来标志是不是竞价结束自动跳转过来的，如果是则显示模态框，如果不是，则是从统计列表页面跳转过来的，这个时候就不再显示模态框了。竞价成功的时候显示my_success_modal，竞价失败的时候显示my_failure_modal。

通过id来找到要显示的模态框，并设置为显示或者隐藏，通过timeout函数来保证模态框自动的情况下只显示三秒。

另外页面代码如下：

<div id="my_success_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>{{success_bid_name}}   ￥{{success_bid_price}}</h3>
    </div>
    <div class="modal-body" >
        <h4>{{success_bid_person_phone}}</h4>
        <h3>竞价成功</h3>
    </div>
</div>

2.竞价结果

我们拥有了一个包含了竞价者姓名，出价，电话号码的一个列表，要对其进行处理然后得到竞价成功的人的信息或者是竞价失败信息。在这里要用到underscore.js库里的sortBy,groupBy,find三个方法。

代码如下：

analyze_bid_data : function(bid_name) {
    var bid_data = Biding.get_bid_person_list(bid_name);
    var result = _.sortBy(bid_data,function(bid){return bid.price});
    var result1=_.groupBy(result,function(temp){return temp.price});
    return _.find(result1,function(value,key){return value.length==1});
},

这里bid_data是竞价信息列表，先对其进行排序得到result，然后对result进行分组，然后从result1中找到长度为一的那个分组，如果找到了就是我们要找的竞价成功的人。如果没找到则竞价失败。（对于这几个方法的使用，请参考underscore.js官方文档）

3.竞价统计

然后是对竞价信息进行一个简单的统计，就是统计出每一个价格出价的人数，并且升序排列。

代码如下：

make_price_statistic : function(bid_name) {
    var bid_data = Biding.get_bid_person_list(bid_name);
    var group =  _.groupBy(_.sortBy(bid_data,function(bid){
        return bid.price}),function(bid_item){
        return bid_item.price});

    return _.map(group,function(value,key){
        return  {'price':key,'count':value.length}
    })
}

这里又使用了一个underscore.js里边的一个函数map，map函数可以将一个列表的内容按照一定的规则映射为另外一个列表。我们先将其排序并分组，再把这个列表映射为价格和人数的列表，然后显示出来。