party_bid项目 第四张卡总结

第四张卡主要功能是分析参与者的出价，得到竞价结果并显示在页面上。

1,竞价结束后自动跳转到竞价结果页面，弹出提示框显示竞价成功者的信息。使用bootstrap的模态框。由于bootstrap样式已经在前面的卡中成功引用，这里就直接使用了。

在竞价结果页view的body中添加：

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">竞价结果</h3>
    </div>
    <div class="modal-body">
        <p>姓名：{{win.name}}</p>//显示竞价成功者的名字
        <p>电话：{{win.phone}}</p>//显示竞价成功者的电话
        <p>价格：{{win.price}}</p>//显示竞价成功者的出价
        <p>{{win.information}}</p>//显示“竞价成功”或“竞价失败”
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
    </div>
</div>

 让模态框显示并3秒后自动消失：需要在控制器中写：

 $('#myModal').modal("show");//‘#myModel'表示页面id show为显示模态框，hide为隐藏
        setTimeout(function(){
                $('#myModal').modal('hide')}
            ,3000);//3秒后将属性改为hide，隐藏模态框。
    });

竞价成功折的信息：

竞价分析：首先给竞价信息排序，用到了underscore里的sortBy方法。

Bid.sort_result_information=function(){
    var result_information=Get_Storage('bid_information');//读取全部竞价信息
    return _.sortBy(result_information,'price');//按照price排序
};

 然后通过_.groupBy方法将排序好的竞价信息分组，返回没一个价格的数量，用_.find方法找出第一个价格数量为1的价格，便能确定竞价成功的价格。

Bid.win_person=function(array){
   var group= _.groupBy(array,'price');
    Bid.statistics(group);
   var win_price= _.find(group,function(num){
       return num.length==1;
   });
    if(win_price==undefined){
        win_price={information:'竞价失败！'};
        return win_price;
    }
    else{
        win_price[0].information='竞价成功！';
        return win_price[0];//返回竞价成功的价格
    }
};

 显示竞价成功者的信息：

 $scope.win=Bid.win_person('result_information');

 

Underscore一个JavaScript实用库，提供了一整套函数式变成有用的实用功能，可以到官网下载API,引用到项目中。然后就可以根据需要使用相应的方法了。