一.第二张卡的要求
1.活动开始后,能够接收短信,并统计报名信息。 2.根据当前活动的状态,分别返回不同的信息。 3.能够实现显示新增的报名人 4.当前正在进行的活动为黄色
二.相关函数功能的分析
2.1短信接收函数
说明,这里我们在调试的时候先不用在真实手机环境中调试,可以先在控制台调试!
var native_accessor = {
send_sms: function (phone, message) {
// native_access.send_sms({"receivers":[{"name":'name', "phone":phone}]}, {"message_content":message});
console.log(phone,message);
},
receive_message: function (json_message) {
if (typeof this.process_received_message === 'function') {
this.process_received_message(json_message);
}
},
//收到短信之后的处理函数
process_received_message: function (json_message) {
var message = new Message(json_message);
message.isRightmessage();
}
};
function notify_message_received(message_json) {
native_accessor.receive_message(message_json);
}
在控制台中,我们按照一定的格式输入,
notify_message_received(...)
这样,在发送的时候,就能够交给notify_message_received函数处理了,最终我们的入口就是
process_received_message: function (json_message)
而出口则是
native_accessor
在这里,我们先使用控制台console.log打印出返回信息!
2.1短信处理(大小写空格)
这里我们使用js中的正则表达式来处理短信内容!
function Message (json_message) {
var result_name_origin=json_message.messages[0].message.replace(/\s/g,'');
this.type= result_name_origin.toLowerCase().substring(0,2);
this.name= result_name_origin.toLowerCase().slice(2);
this.phone = json_message.messages[0].phone;
}
在message这个model中,使用replace(/\s/g,")去掉字符串中的空格! 利用toLowCase()将所有的字母转换成小写字母,方便后面判断 利用slice截取从2开始一直到结束的部分,得到短信中的报名人的名字 然后,利用实例方法,对处理后的短信内容进行进一步处理
Message.prototype.isRightmessage=function(json_message){
if(this.type=="bm"){
var Signupuser = new SignUpInfo(this.name,this.phone);
Signupuser.back_message();
}
};
2.3活动报名开始结束按钮的状态切换
<div ng-switch="signup_button_status">
<button ng-disabled="false" ng-click="start_activity_btn()" ng-switch-when="unstart" class="btn btn-primary header-right">开始</button>
<button ng-disabled="false" ng-click="start_activity_btn()" ng-switch-when="start" class="btn btn-primary header-right">结束</button>
<button ng-disabled="true" ng-click="start_activity_btn()" ng-switch-when="end" class="btn btn-primary header-right">结束</button>
<button ng-disabled="true" ng-click="start_activity_btn()" ng-switch-default="" class="btn btn-primary header-right">开始</button>
</div>
这里,我们使用ng-switch切换按钮的各种状态 ng-switch-when分别匹配返回的参数,当参数相同时,就显示匹配到的button,当所以都没用匹配到的时候,就使用ng-switch-default默认的button!
2.4动态刷新
function Page_Refresh () {
var refresh_page = <span style="font-family: Arial, Helvetica, sans-serif;">document.getElementById("refresh_user_num");</span>
if (refresh_page) {
var scope = angular.element(refresh_page).scope();
scope.$apply(function () {
var during_name= JSON.parse(localStorage['current_activity']).name;
var result=JSON.parse(localStorage[during_name]);
<pre name="code" class="javascript"> scope.users_data= result;
scope.user_num='('+result.length+'人'+')';
}) } }
当在活动报名页面,有人报名的时候,需要动态显示。当接收到报名短信后,调用Page_Refresh()!
其中refresh_user_num为需要刷新页面元素的id。
scope.users_data= result;
scope.user_num='('+result.length+'人'+')';
这两条语句应该放到controller中!因为我们采用的是MVC编程思想!
2.5使用正在报名的活动背景为黄色
在我们自己定义的css样式中新增.start{
background: yellow !important
}
并将该css文件引入到index中
<li ng-repeat="activity in activity_names track by $index" ng-click="choose_activity(activity)" class="clearfix btn-default">
<h3 class="{{activity.status}}">{{activity.name}}</h3><i class="icon-angle-right"></i>
</li>
ng-repeat在上一篇中已经介绍,当匹配到该活动的status状态为start的时候,该活动就会优先显示黄色!