发表于: 2017-03-07 23:36:48
1 1328
今天完成的事情:
完成绑定页面:
手机、邮箱验证、验证码倒计时、验证信息展示;
验证手机邮箱格式,格式正确检测绑定情况,,已绑定弹出信息,未绑定则发送验证码,设置倒计时60s,可重获。
明天计划的事情:
整理完成前台;
开始进行后台页面;
遇到的问题:
因为手机验证和邮箱验证页面相同,所有验证这里用指令, 通过设置参数对象options来配置验证类型、接口等,这里暂时用官网开发环境的接口只有手机;
scope:{
options:'=?',//配置验证类型,接口
account:'='//需验证的账号
},
restrict:'A ',
link:function (scope, ele, attrs) {
var timer;$('.ui-tab').append('<p style="position:absolute; left: 50%; bottom: 100px; margin-left:-100px;border-radius:4px;width: 200px;height:36px;line-height:36px;background-color: rgba(0,0,0,.7);color:white;text-align: center;display: none"></p>')//动态生成信息提示tip
ele.on('click',function () {
var options=scope.options;$http.get(options.url,{params:{mobile:scope.account}})//暂用测试技能树接口;
$http.get(options.url,{params:{openid:scope.account,type:options.type}})//实际接口.then(function (res) {
res.data.code==0?confirmation():false;
scope.msg=res.data.message;
$('p:last').fadeIn().text(res.data.message)//弹出信息提示
$timeout(function () {
$('p:last').fadeOut()
},3000)
})
function confirmation() {var time=attrs.countdown||options.countdown;//倒计时时间,可在属性中配置,也可在options中配置
//
var inputValue = scope.account;
$log.debug(inputValue)
ele.attr('disabled','disabled');
ele.text('重获'+time--+'s');
$interval.cancel(timer);
timer=$interval(function () {//倒计时
if(time){
ele.text('重获'+time--+'s');
} else {
ele.text('重新获取')
ele.removeAttr('disabled');
$interval.cancel(timer);
}
},1000);
}
})
}
一开始选择在body下创建信息提示标签,显示隐藏都没问题,在显示的时候切换验证页面,标签不会消失,看element每切换一次页面,标签就增加一个,仔细想一下,切换页面的时候,只刷新了路由视图,但body是不刷新的,所以每次都会新建一个标签,这么一来问题很大,所以将标签生成到当前视图下,每次切换视图可以覆盖;
收获:
如上
评论