Authored by 郭成尧

reg-protocol

... ... @@ -29,6 +29,10 @@
</div>
<input name="token" type="hidden" value="{{token}}">
<div data-geetest="{{useGeetest}}" id="js-img-check"{{#unless useGeetest}} class="full-img-verify"{{/unless}}></div>
<div class="protocol">
<span class="iconfont checkbox icon-cb-radio"></span>
<a href="#" title="注册协议">注册协议</a>
</div>
<button id="regBtn" class="reg-btn">注册</button>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -27,7 +27,8 @@ class RegisterNew {
passwordEyeIcon: $('#passwordEyeIcon'),
eyeClose: $('.eye-close'),
eyeOpen: $('.eye-open'),
tokenInput: $('input[name=token]')
tokenInput: $('input[name=token]'),
protocolCheckbox: $('.protocol .checkbox')
};
validate.init();
... ... @@ -41,10 +42,23 @@ class RegisterNew {
this.view.passwordInput.bind('input', this.changeBtnStatus.bind(this));
this.view.passwordEyeIcon.on('click', this.passwordShowStatus.bind(this));
this.view.getVerifyCodeBtn.on('click', this.getVerifyCode.bind(this));
this.view.protocolCheckbox.on('click', this.changePrtclckbxStatus.bind(this));
}
/**
* 改变用户协议勾选按钮状态
*/
changePrtclckbxStatus() {
if (this.view.protocolCheckbox.hasClass('icon-cb-radio')) {
this.view.protocolCheckbox.addClass('icon-radio').removeClass('icon-cb-radio');
} else {
this.view.protocolCheckbox.addClass('icon-cb-radio').removeClass('icon-radio');
}
this.changeBtnStatus();
}
/**
* 清除输入的手机号
*/
clearMobile() {
... ... @@ -118,7 +132,8 @@ class RegisterNew {
if (this.view.mobileInput.val() &&
this.view.passwordInput.val() &&
this.view.verifyCodeInput.val() &&
this.view.getVerifyCodeBtn.data('oneClick')) {
this.view.getVerifyCodeBtn.data('oneClick') &&
this.view.protocolCheckbox.hasClass('icon-cb-radio')) {
this.view.regBtn.addClass('active');
} else {
this.view.regBtn.removeClass('active');
... ...
... ... @@ -151,12 +151,22 @@ $disableGray: #b0b0b0;
}
}
.protocol {
width: 100%;
text-align: center;
a {
font-size: 16px;
color: #444;
}
}
.reg-btn {
width: 600px;
height: 70px;
border-radius: 4px;
background-color: $disableGray;
margin-top: 40px;
margin-top: 20px;
font-size: 32px;
color: #fff;
}
... ...