Party_bid第四张卡片竞价分析
第四张卡片需要用到的知识已经没有前面三张卡片多了,所以相对来讲要简单一些。主要是完成数据的存取和比较和显示的功能,下面来总结一下第四张卡片的要点。
1.竞价成功结果的顺序显示
(1)竞价成功者的弹窗显示
在一个竞价已经结束之后点击结束按钮,页面会自动跳转到竞价结果页面,进入页面的瞬间会弹出一个提示窗口,窗口显示为最终竞价成功者的竞价信息,并且最多显示3秒,可手动关闭。
$('#success').modal('show'); //jQuery显示与隐藏窗口 setTimeout(function(){ $('#success').modal('hide')} ,3000);
html显示代码:、
<div id="success" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<p>姓名:{{success[0].name}}</p>
<p>电话:{{success[0].phone}}</p>
<p>价格:{{success[0].price}}</p>
<p>竞价成功</p>
</div>
(2)竞价报名者信息的显示
竞价报名者信息是按报名者的竞猜价格的升序排列,只需完成对象的排序即可。js代码:
controller控制函数读取数据
//congtroller $scope.Messages=Bid_result.get_bid_price($routeParams.action,$routeParams.bid_name);
model实现操作:
var list = _.findWhere(bid_information, {'activity': activity});//查询活动名的对象 var lists = _.findWhere(list.bidding, {'bid_name': bid_name}); //查询竞价名的对象 _.sortBy(lists.information,'price') //按价格排序
(3)判断竞价成功者
竞价成功者的产生原则是竞猜价格最低且无人与之重复,这里只需要对排序过后的竞价进行分组。然后读取即可。js代码如下:
_.sortBy(lists.information,'price');按价格排序
return _.find(_.groupBy(list,"price"), function (num) {
return num.length == 1; //判断竞猜价格是否唯一
2。统计结果显示
在竞价结果页面成功显示之后点击右上角的统计按钮,页面自动跳转到竞价统计页面,竞价统计页面主要以列表的形式显示竞价报名的价格和与之对应的人数,因为在之前已经排序分组了,所以这里只需要从之前的数组中读取出来显示即可。js代码如下:
var list = _.findWhere(bid_information, {'activity': activity}); //查询活动的对象var lists = _.findWhere(list.bidding, {'bid_name': bid_name});//查询竞价对象
_.groupBy(lists.information,'price'); //分组
return result = _.map(argument,function(value,key){
return {'price':key,'count':value.length} //返回竞猜价格和与之对应的个数
html代码显示如下:
<li class=" clearfix btn-default" ng-repeat="messages in Messages">
<h3 >¥{{messages.price}} {{messages.count}}人</h3>
</li>
以上就是第四章卡片的要点总结,相比于前面的3张卡片,第四张卡片相对于简单一些。