register.js 9.38 KB
import api from '@/api/api'
import {
	httpGet,
	httpPost
} from '@/api/fetch-api.js'

import { passwordEncrypt } from '@/utils/encrypt.js';

export default {
	data() {
		return {
			key: 'value',
			type: 1, // 1:手机验证 2:输入密码
			mobileNoType: "hk",// 选择的手机好类型
			mobileTip: {},
			mobileOptions: [],

			registerCheck: {
				showImageCode: false,
				agreeProtocol: false
			},
			values: {
				// 返回的token,串连整个流程,后台安全校验使用
				vcodeuuid: "",
				token: "",
				deviceId: "",
				imageBase64: "",
				password: "",
				passwordRepeat: ""
			},
			registerForm: {
				imageValue: "",
				mobileNo: "",
				otp: ""
			},
			times: {
				interval: 0, // 索引
				remain: 0, // 剩余时间
				tip: "" // 显示的文字
			},
		}
	},
	components: {},
	computed: {
		locale() {
			return this.$i18n.locale || 'tc';
		},
		i18n() {
			return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
		}
	},
	methods: {
		onProtocolHandler() {
			this.$router.push({
				path: "/protocol"
			})
		},
		handlerStdSendOTP() {
			// 发送短信验证码
			this._checkMobileLegal().then(() => {
				if (this.times.remain > 0) {
					return;
				}
				if (this.values.vcodeuuid && !this.registerForm.imageValue) {
					this._showImageValueTip();
					return;
				}
				this._handlerIsShowImageVcode().then(() => {
					this._startStdSendOTP();
					this._startTimeClick();
				});
			});
		},
		_checkMobileLegal() {
			// 检测手机号是否正确
			return new Promise((resolve, reject) => {
				let mobile = this.registerForm.mobileNo;
				if (this.mobileNoType == "hk") {
					if (mobile.length != 8) {
						this._showMobileNoIllegalTip()
						return;
					}
				} else {
					if (mobile.length != 11) {
						this._showMobileNoIllegalTip()
						return;
					}
				}
				resolve(true);
			});
		},
		_handlerIsShowImageVcode() {
			return new Promise((resolve, reject) => {

				// 如果这个值不为空,标识出现了图片验证码,不需要重新询问是否需要图像验证码了
				if (this.values.vcodeuuid) {
					resolve();
					return;
				}

				httpPost({
					url: api.stdIsShowImageVcode,
					data: {
						deviceId: this.values.deviceId,
						userId: this.registerForm.mobileNo
					}
				}).then(response => {
					// 判断是否显示图形验证码
					if (response.returnCode == "0") {
						this.values.token = response.data.token;
						if (response.data.isShowVcode == "N") {
							// 测试代码
							// if (!this.values.vcodeuuid) {
							// 	this.registerCheck.showImageCode = true;
							// 	this.values.vcodeuuid = "123456";
							// 	return;
							// }
							this.values.vcodeuuid = null;
							resolve(response);
						} else {
							// image 值:
							this.registerCheck.showImageCode = true;
							this.values.vcodeuuid = response.data.vcodeuuid;
							this.values.imageBase64 = response.data.image;
						}
					}
					return false;
				})
			});
		},
		_showMobileNoIllegalTip() {
			alert("手机号不正确");
		},
		_startStdSendOTP() {
			// 正式发送OTP信号
			let data = {
				mobileNo: this.registerForm.mobileNo,
				token: this.values.token,
				signFactor: new Date().getTime(),
				scene: "register",
			}
			if (this.values.vcodeuuid) {
				data["vcodeuuid"] = this.values.vcodeuuid;
				data["imageValue"] = this.registerForm.imageValue;
			}
			httpPost({ url: api.stdSendOTP, data: data });
		},
		_startTimeClick() {
			this.times.remain = 120;
			let _this = this;
			let i18n = this.$i18n.messages[this.$i18n.locale] || {};
			let msg = i18n.register.coutTips;
			_this.times.tip = msg.replace("{second}", _this.times.remain);
			this.times.interval = setInterval(function () {
				if (_this.times.remain <= 0) {
					clearInterval(_this.times.interval);
					_this.times.interval = 0;
					_this.times.remain = 0;
					return;
				}
				_this.times.remain--;
				_this.times.tip = msg.replace("{second}", _this.times.remain);
				_this.$set(_this, 'times', _this.times);
			}, 1000);
		},
		onSubmitHandler() {
			// this.type = 2;
			this._checkParams().then(() => {
				this._regCheck().then(() => {
					// 验证短信验证码
					this._validateOTPandRepeat().then(() => {
						this.type = 2;
					});
				});
			});
		},
		_validateOTPandRepeat() {
			return new Promise((resolve, reject) => {
				let data = {
					mobileNo: this.registerForm.mobileNo,
					token: this.values.token,
					signFactor: new Date().getTime(),
					otp: this.registerForm.opt
				};
				httpPost({
					url: api.stdValidateOTPandRepeat,
					data: data
				}).then(response => {
					if (response.returnCode != "0") {
						this._showCheckOTPErrTip(response.returnMsg);
						// TODO 测试代码
						// resolve();
					} else {
						// this.type = 2;
						resolve();
					}
				})
			});
		},
		_regCheck() {
			// 检测手机号注册情况
			return new Promise((resolve, reject) => {
				let data = {
					mobileNo: this.registerForm.mobileNo,
				};
				httpPost({
					url: api.gsRegCheck,
					data: data
				}).then(response => {
					if (response.returnCode == "0") {
						if (response.data.mobileStatus == "N") {
							resolve();
						} else {
							// 重复注册
							this._showDuplicateRegistrationTip();
						}
					} else {
						// 错误提示
						this._showCheckOTPErrTip(response.returnMsg);
					}
				})
			});
		},
		_checkParams() {
			return new Promise((resolve, reject) => {
				if (!this.registerCheck.agreeProtocol) {
					this._showAgreeProtocolTip();
					return;
				}
				if (!this.values.token) {
					this._showTokenTip();
					return;
				}
				if (this.values.vcodeuuid && !this.registerForm.imageValue) {
					this._showImageValueTip();
					return;
				}
				if (!this.registerForm.opt) {
					this._showOTPTip();
					return;
				}
				this._checkMobileLegal().then(() => {
					resolve();
				})
			});
		},

		_showAgreeProtocolTip() {
			alert("请同意协议")
		},
		_showOTPTip() {
			alert("请填写短信验证码")
		},
		_showTokenTip() {
			alert("请先请求短信验证码")
		},
		_showDuplicateRegistrationTip() {
			alert("手机号已经被注册,请使用其他手机号重新注册")
		},
		_showImageValueTip() {
			alert("请输入图片验证码")
		},
		_showCheckOTPErrTip(msg) {
			alert(msg);
		},
		onRegisterHandler() {
			this._checkPassword().then(() => {
				let data = {
					token: this.values.token,
					mobileNo: this.registerForm.mobileNo,
					loginPwd: passwordEncrypt(this.values.password)
				};
				httpPost({
					url: api.stdRegister,
					data: data
				}).then(response => {
					if (response.returnCode != 0) {
						this._showRegisterFailure(response);
						this.type = 1;
					} else {
						this._showSuccessMessage();
						this.$router.push({
							path: "/login"
						});
					}
				})
			});
		},
		_checkPassword() {
			return new Promise((resolve, reject) => {
				let password = this.values.password;
				if (password.length < 8) {
					this._showPasswordLenthNotEnouth();
					return;
				}
				// 匹配字母
				let m1 = /([a-z])+/.test(password);
				let m2 = /([A-Z])+/.test(password);
				// 匹配数字
				let m3 = /([0-9])+/.test(password);
				// 匹配特殊字符
				let m4 = /[^a-zA-Z0-9]+/.test(password);
				console.log(m1, m2, m3, m4)
				if ((m1 | m2) & m3 & m4) {
					if (password != this.values.passwordRepeat) {
						this._showPasswordNotTheSameTips();
					} else {
						resolve();
					}
				} else {
					this._showPasswordComplexityTips();
				}
			});
		},
		_showPasswordLenthNotEnouth() {
			alert("密码长度不能少于8位")
		},
		_showPasswordComplexityTips() {
			alert("密码必须同时包含数字、字母、特殊字符")
		},
		_showPasswordNotTheSameTips() {
			alert("两次输入的密码不一致")
		},
		_showRegisterFailure(response) {
			if ("COMMON_ERROR_052" == response.returnCode) {
				this._resetRegisterParam();
				this.handlerRefreshImageVcode();
				alert("验证码过期,请重新申请验证码");
			} else {
				this._resetAllParams();
				alert("注册失败,请联系工作人员");
			}
		},
		_resetAllParams() {
			this.values.vcodeuuid = "";
			this.values.token = "";
			this.values.imageBase64 = "";
			this.values.password = "";
			this.values.passwordRepeat = "";

			this.registerForm.imageValue = "";
			this.registerForm.mobileNo = "";
			this.registerForm.otp = "";

			this.times.interval = "";
			this.times.remain = "";
			this.times.tip = "";
		},
		_resetRegisterParam() {
			this.values.token = "";
			this.registerForm.otp = "";
			this.times.interval = "";
			this.times.remain = "";
			this.times.tip = "";
		},
		handlerRefreshImageVcode() {
			if (this.values.vcodeuuid) {
				let data = {
					vcodeuuid: this.values.vcodeuuid
				}
				httpPost({
					url: api.stdRefreshVcode,
					data: data
				}).then(response => {
					this.$set(this.values, 'imageBase64', response.data.image);
				})
			}
		},
		_showSuccessMessage() {
			alert("注册成功")
		},
		onForgetHandler() {

		},
		onLoginTypeHandler(val) {

		},
		initData() {
			let i18n = this.$i18n.messages[this.$i18n.locale] || {};
			let mobileOptions = JSON.parse(JSON.stringify(i18n.register.mobileOptions));
			this.mobileOptions = mobileOptions;
			this.mobileTip = this.mobileOptions[0];
		}
	},
	mounted() { },
	watch: {
		mobileNoType() {
			this.mobileOptions.forEach(element => {
				if (element.type == this.mobileNoType) {
					this.$set(this, 'mobileTip', element);
				}
			})
		}
	},
	created() {
		this.initData();
	}
}