party_bid 项目之活动报名 (board2)

最新推荐文章于 2025-11-27 12:57:01 发布

原创最新推荐文章于 2025-11-27 12:57:01 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #angularjs #移动应用 #ViewUI

项目实践专栏收录该内容

4 篇文章

订阅专栏

本文介绍了使用AngularJS实现活动报名系统的具体步骤，包括通过短信进行报名的功能、页面跳转时的问题及解决方法、活动中报名状态的管理和实时更新报名者信息的方法。

1.功能介绍:

board2部分实现的功能是在创建完活动后,进入活动报名页面,点击通过手机发送短信到指定号码来实现活动报名.发送短信后,指定手机接收短信并判断,当开始报名之前和结束之后接收的短信将返回报名失败提示,当开始报名后,接收的短信并判断符合条件的,保存数据到本地,并发送成功报名的提示.

2.页面残留问题:

在angularjs中,实现页面跳转的是$navigate.go(),但是在执行过程中会遇到一些问题:

function ActivityListController($scope,$navigate)
{ 
    if(!localStorage.localEventsLists)
    {
        $navigate.go("/creat_activity", "none");
    }
}

在上面这段代码中,当if语句中的条件为真时,会执行下面的跳转语句,但是新跳转的页面会残留上一个页面的元素,通过审查元素发现,两个页面合并成一个页面.跳转后,手动刷新页面,残留元素消失,页面正常显示.但是,通过调用函数执行的页面跳转语句却正常执行.

解决办法:将上述代码装进一个函数中,并在页面结尾手动调用该函数.改进后,页面跳转正常显示.

$scope.check_empty =function(){
        if(!localStorage.localEventsLists)
        {
            $navigate.go("/creat_activity", "none");
        }
        return "";
    }

{{check_empty()}}

3.当有别的活动正在报名的时候，该活动在活动列表中的底色为黄色，活动列表页面的创建按钮为不可点击状态，查看其他活动，进入活动报名页面后，无法开始报名，开始按钮不可点击。

解决方法:在创建对象的时候有一个标记活动开始或者正在进行或者活动结束的属性.当点击开始按钮和点击结束按钮后,该属性改变为相对应的值:

function newActivity()
    {
        this.name = $scope.put;
        this.bid=0;
        this.disabled=false;
        this.signuping="";
    }

在页面中,将背景色属性设置为变量,当变量的值为空的时候,不变色,当值为"yellow"的时候,背景变为黄色.

%div()

%ul(class="list-style-1 " style="height:100% ")

%li( ng-repeat="list in newList")

%a(style="background:{{list.signuping}}" id="lists" ng-tap="goto_signUpPage(list)")

%h3() {{list.name}}

4.当接收到一条报名短信并判断符合格式,将信息保存到本地之后,需要在报名页面立刻更新出报名者的信息

解决方法:

定义一个刷新的函数,刷新要迭代的数组信息.

function bid_page_refresh() {
    var bid_info = document.getElementById("price_list");
    if (bid_info) {
        var scope = angular.element(bid_info).scope();
        scope.$apply(function () {
            scope.priceList();
        })
    }
}

并在接受到短信后调用该函数:

if(Keyword == "BM" && JSON.parse(localStorage.getItem("list_disabled")).signuping=="yellow" && JSON.parse(localStorage.getItem("list_disabled")).bid==1 && key)
    {
        var person = new Person(json_message.messages[0].message.substring(2,5),json_message.messages[0].phone);
        var personList = JSON.parse(localStorage.getItem("localPersonLists_"+JSON.parse(localStorage.getItem("list_disabled")).name)) || [];
        personList.push(person);
        localStorage.setItem("localPersonLists_"+JSON.parse(localStorage.getItem("list_disabled")).name,JSON.stringify(personList));
        console.log("报名成功！");
        signup_page_refresh();
        return;
    }