学习敏捷开发，party_bid故事卡4---竞价分析

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

        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函数可以将一个列表的内容按照一定的规则映射为另外一个列表。我们先将其排序并分组，再把这个列表映射为价格和人数的列表，然后显示出来。