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