sr-publicServicePlatform/component/login-register/register.js

(function() {
	Vue.component('register-form', {
		template: '<div><div class="container-fluid c-border-b">\
				<div class="container" id="head">\
					<div class="ptb30 top-banner">\
						<img src="../../../images/LOGO.png"/>\
						<span class="qr-container">\
							<img src="../../../images/qr_code.png" class="qr_code" />\
							<p class="c-f12 text-center c-909090" style="padding-top:5px">下载APP</p>\
						</span>\
						<span class="backlogin" @click="gologin()">返回登录页</span>\
					</div>\
				</div>\
			</div>\
		<div class="container">\
			<div class="ptb40">\
				<div id="registerForm" class="main">\
					<div class="ptb10 c-border-b c-f20">注册</div>\
					<form id="form" class="m-t" role="form" onsubmit="return false;" style="width:310px;">\
						<div class="form-group">\
							<select class="form-control" v-model="idCardType">\
								<option v-for="ct in idCardTypes" :value="ct.value">{{ct.name}}</option>\
							</select>\
						</div>\
						<div class="form-group">\
							<input class="form-control idCardType" type="text" maxlength="18" placeholder="请输入身份证号码" v-model="IDCard" id="IDCard">\
						</div>\
						<div class="form-group">\
							<input class="form-control" placeholder="请输入手机号码" v-model="phone" type="text" length="11">\
						</div>\
						<div class="form-group">\
							<input class="form-control" placeholder="请确认验证码" v-model="captcha">\
							<span id="getCode" @click="sendMsg" v-text="codeMsg" :class="{\'disabled bgc-909090\':codeMsg!==\'获取验证码\'}">获取验证码</span>\
						</div>\
						<div class="form-group">\
							<input class="form-control form-password" type="password" placeholder="请输入登录密码" v-model="password" min-length="6" max-length="16">\
							<span class="type-change-icon" @click="changePwdType(event)"></span>\
						</div>\
						<div class="form-group">\
							<input class="form-control form-password" type="password" placeholder="请再次输入登录密码" v-model="rePassword" min-length="6" max-length="16">\
							<span class="type-change-icon" @click="changePwdType(event)"></span>\
						</div>\
						<p class="c-909090" style="margin-top:-10px;">密码格式为6-16位，不允许有空格</p>\
						<div class="checkbox">\
							<label><input type="checkbox" v-model="toggle"> 阅读并接受<a href="#" target="_blank">《健康之路用户协议》</a>及<a href="#" target="_blank">《健康之路隐私保护声明》</a></label>\
						</div>\
						<button type="submit" class="btn btn-theme block full-width m-b" :class="{\'disabled\' : !toggle}" @click="validate">完成注册并登录</button>\
					</form>\
				</div>\
			</div>\
		</div>\
		</div>',
		props: [],
		data: function() {
			return {
				IDCard: "",
				phone: "",
				password: "",
				rePassword: "",
				captcha: "",
				toggle: true,
				idCardType:1,
				idCardTypes:[
					{value:1,name:'身份证'},
//					{value:2,name:'军官证'},
				],
				pwdType:false,
				codeMsg:"获取验证码",
				spaceTime:60,//验证码间隔时间
			}
		},
		methods: {
			register: function() {
				var vm = this
				if(!isCardNo(vm.IDCard)) {
					return false;
				}
				if(!vm.phone) {
					console.log("手机号码不能为空！");
					return false;
				}
				if(!vm.captcha) {
					console.log("验证码不能为空！");
					return false;
				}
				if(!vm.password) {
					console.log("登录密码不能为空！");
					return false;
				}
				if(vm.password!==vm.rePassword) {
					console.log("两次密码输入不一致！");
					return false;
				}
				if(!vm.toggle) {
					console.log("未确认是否阅读并接受条款");
					return false;
				}
				//连接注册后台接口
				var data = {
					demographicId: vm.IDCard,
					telephone: vm.phone,
					password: vm.password,
				}
				var params = {
					userJsonData: JSON.stringify(data),
					appId: httpRequest.client_id
				}
				loginAPI.registe(params).then(function(res) {
					if(res.successFlg) {
						console.log("注册成功");
						sessionStorage.setItem("userAgent", JSON.stringify(res.obj));
						var data1 = {
							grant_type: httpRequest.grant_type,
							client_id: httpRequest.client_id,
							username: vm.phone,
							password: vm.password,
						}
						loginAPI.accessToken(data1).then(function(oauthInfo) {
							sessionStorage.setItem("oauthInfo", JSON.stringify(oauthInfo));
							vm.getJueSeData(res.obj);
						}).catch(function(e) {
							console.log("获取accessToken失败")
						})
					} else {
						console.log(res.errorMsg);
					}

				}).catch(function(err) {
					console.log(err);
				})
			},
			gologin: function() {
				location.href = "../../login/html/login.html"
			},
			getCode: function(num){
				var vm=this;
				if(num<0){
					vm.codeMsg="获取验证码";
				}else{
					setTimeout(function(){
						num--;
						vm.codeMsg="("+num+"s)重新获取";
						vm.getCode(num);
					},1000)
				}
			},
			sendMsg:function(){
				var vm=this;
				var isMobile = isMobilePhone(this.mobile);
				if(!isMobile) {
					toastr.error('请输入正确的手机号码！');
					return false;
				}
				if(vm.codeMsg!=="获取验证码"){
					console.log(vm.codeMsg || (vm.spaceTime+"秒内只能获取一次验证码"));
					vm.codeMsg="正在获取验证码";
					return ;
				}
				if(vm.codeMsg==="获取验证码"){
					vm.codeMsg="正在获取验证码";
				}
				var data = {
					tel:vm.phone,
					appId: httpRequest.client_id,
				}
				loginAPI.sendMsg(data).then(function(res) {
					if(res.successFlg) vm.getCode(vm.spaceTime);
					else{
						vm.codeMsg="获取验证码";
						console.log(res.errorMsg);
					}
					
				}).catch(function(err) {
					console.error(err);
					vm.codeMsg="获取验证码";
				})
			},
			validate : function(){
				var vm=this;
				var data = {
					tel:vm.phone,
					appId: httpRequest.client_id,
					verificationCode:vm.captcha
				}
				loginAPI.validate(data).then(function(res) {
					console.log(res)
					if(res.successFlg){
						vm.register();
					}else{				
						console.log(res.errorMsg);
					}
				}).catch(function(err) {
					console.log(err.errorMsg);
				})
			},
			changePwdType:function(ev){
				var obj=$(ev.target);
				if(obj.hasClass('type-change-icon-active')){			
					obj.removeClass('type-change-icon-active');
					obj.parent().find('.form-password').attr('type','password')
				}else{
					obj.addClass('type-change-icon-active');
					obj.parent().find('.form-password').attr('type','text')
				}
			},
			getJueSeData: function(userAgent) {
				var vm = this;
				//获取居民权限接口
				loginAPI.findByUserId({
					userId: userAgent.id
				}).then(function(data) {
					sessionStorage.setItem("roleList", JSON.stringify(data.detailModelList)); //缓存角色列表
					//					location.href = "../../../home/html/home.html"//跳转到主页面
					location.href = "../../../page/mine/html/personal-info.html"
				})
			},
		},
		watch: {
			Password: function(newVal, oldVal) {
				var val = newVal.toString();
				var reg = /\s+/g; //去除空格
				if(reg.test(val)) {
					this.Password = oldVal;
				}
			},
			idCardType:function(val){
				for(var i in this.idCardTypes){
					if(this.idCardTypes[i].value==val){
						$('.idCardType').attr('placeholder','请输入'+this.idCardTypes[i].name+'号码');
						break;
					}
				}
					
			}
		}
	});
	function isMobilePhone(phone) {  
	    var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
	    if (!myreg.test(phone.val())) {  
	        return false;  
	    } else {  
	        return true;  
	    }
  	}  
	function isCardNo(card) {
		// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
		var iscard = false;
		var reg1 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
		if(reg1.test(card) === false) {
			console.log("身份证号输入不合法");
		} else {
			iscard = true
		}
		return iscard;
	}

})()