party_bid第二张卡片要点总结 -

Ad853076601

浏览: 2411 次

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (4)

社区版块

存档分类

party_bid第二张卡片要点总结

party_bid 发短信 angularJS web开发

Party_bid第二张卡片【活动报名】

要实现第二张卡片需要用到一个发短信的函数，在做这张卡片的时候，我们需要先引用一个sms的js文件，里面有一些接受和发短信的函数，主要在控制台用来模拟实现收发短信的功能。在使用之前一定要记得在index.html上引用，下面就来总结一下第二张卡片的各种要点。

1.报名页面的按钮控制

(1).开始和结束的状态切换

第二张卡片的报名页面相较于第一张卡片多了一个按钮控制，主要用于实现活动的报名和结束。页面按钮的初始状态为“开始”，当你点击“开始”之后，按钮变为“结束”，如果再点击一下就会弹出提示窗口，询问：“是否结束报名？”。点击“是”，按钮初始化变为“开始”，点击“否”，按钮不变。html代码如下：

<button>ng-switch-when=false>结束</button>
<button>ng-switch-when=true>开始</button>

在controller里面写下读取ng-switch的$scope,当ng-switch为true为开始状态，为false为结束状态。js代码如下：

//controlloer
$scope.button_states=Sign_up.State_switch($routeParams.activity,false);//读取按钮状态

value对应的需要切换的状态（true或false）。model里面实现函数功能：

Sign_up.State_switch=function(activity_name,value){  //点击开始，完成开始或结束状态切换函数
    var action=Create.get_Action_information();
    var states= _.find(action,function(list){
        return list.activity==activity_name;
    });
    var index = _.indexOf(action, states);
    action[index].states = value;
    localStorage['Action_information'] = JSON.stringify(action);
};

（2）读取报名这信息并更新显示

只需要从localstroage存储的数组对象里面查找到对应的活动所在的对象就可以显示出来了，js代码(读取的同时还能动态刷新页面，能即使更新你的报名信息，不需要重新加载页面)。

 $scope.refresh = function (){
            $scope.Messages =Sign_up.get_click_information($routeParams.activity);
            $scope.nums = $scope.Messages.length;
        };
 $scope.refresh();

html上面显示（用 ng-repeat遍历Messages数组并逐个显示）：

 <li class=" clearfix btn-default" ng-repeat="messages in Messages">
            <h3 style="height: 30px">姓名：  {{messages.message}}</h3>
            <p>电话号码：{{messages.phone}}</p>
 </li>

（3）正在进行的活动底色变黄色

在这里我定义了一个css样式，通过读取数组中报名活动的状态来处理。

.status{
    background: yellow !important;
}

然后读取数组里面“活动一”等的“status”来给活动列表对应的活动名上色。

（4）“开始”或“结束”按钮的变灰控制

第二张卡片要求活动有活动正在进行时，进入其他活动的报名页面，活动状态的按钮变灰色不可用。变灰用ng-disabled处理，这在第一张卡片已经提到。

//controller 
$scope.button_states=Sign_up.Judge_available($routeParams.activity); //获取活动按钮状态
//model
Sign_up.Judge_available=function(activity_name){  //获取并返回当前点击活动的available      
    var action=Create.get_Action_information();
    var state= _.find(action,function(list){
        return list.activity==activity_name;
    });
    return state.available;
};

html中的按钮控制：

<button  ng-disabled="{{button_states}}" ng-switch-when=false>开始</button>
<button  ng-disabled="{{button_states}}"  ng-switch-when=true>结束</button>

button_states通过conroller与对应活动的available属性绑定在一起，不同的活动available是不同的。

2.短信接受处理和数据存储

（1）接受短信并存储对应的信息

报名信息一般是通过sms .js里面的函数来接受并储存的，所以这些功能都需要在sms里面实现。成功接收报名信息需要2点条件：第一点：只要当报名页面的按钮状态为结束即报名已经开始时才能接收到短信；第二点：发送报名信息必须要遵守相应的格式即“BM+名字”，BM不限制大小写，允许有空格。下面是判断信息是否合格的js代码：

 var messages=json_message.messages[0].message.replace(/\s/g,""); //读取报名者的名字并处理空格部分。
     if (messages.search(/bm/i)==0) { //格式正确即进入下一步验证
             var Status=Judge_Ongoing_action();  //读取活动进行的状态
               if (Status == true) {
                return "对不起，活动报名已结束';
           }
            if(Status == false){  //进入数据存储部分
                  ..........
        }
}

（2）报名信息的存储

报名信息的存储是一件至关重要的事情，你的存储形式关系到你的代码质量以及可读性，在之前我是分散存储的，以至于后面做第三张卡片的时候数据的存取特别费劲，所以后来修改了存储结构，采用数组对象的方式存储。

存储形式如下：

js代码： sms.js里面实现逻辑调用：

var Message = new Sign_up(activity_name,message); //sms.js里面实例化对象
         return "恭喜你，报名成功";
          Message.storage_sms();    // 调用储存函数存储数据
}

model里面实现函数的存储功能：

Sign_up.prototype.storage_sms=function() {       //model里面的存储函数
  var sms_information =  JSON.parse(ocalStorage['Activity_smsinformation'] || '[ ]');
  var list = _.findWhere(sms_information,{'activity':this.activity});//查找进行活动所在对象
  list.information.unshift(this.information);
  localStorage['Activity_smsinformation'] = JSON.stringify(sms_information);
}

(3)报名号码重复判断

在活动已经有信息存储成功之后，就需要判断有没有相同的号码再次报名，如果有给出相应提示：“号码重复”。

 function Phone_judgment(){
     return  _.findWhere(list.information,{'phone':json_message.messages[0].phone})
}
if (Phone_judgment()) {    //查询数组发现存在相应号码，给与提示
     return '号码重复，请输入正确的报名信息';
} ;

3.underscore的引入

underscore三一个javaScript实用库，提供了一整套函数式变成有用的实用功能，但没有扩展任何javaScript的内置对象，能有效的简化代码和逻辑结构。网上提供了许多了资源可供下载，也有中文档的，第三张卡也要用到了。

以上就算第二张卡片的需求以及知识要点总结了。