Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
438e8c46 by joe
Options

登录、验证接口

1 parent 69f5d420
Inline Side-by-side
Showing 11 changed files with 825 additions and 206 deletions
......@@ -12,10 +12,15 @@ module.exports = {
gsRegCheck : "/pingan_hklife_webapi/auth/gsRegCheck",
// 账户整合登录接口
gsLogin : "/pingan_hklife_webapi/auth/gsLogin",
// 注册接口
stdRegister : "/pingan_hklife_webapi/auth/stdRegister",
// 找回密码定位用户信息
gsLocateUserV2 : "/pingan_hklife_webapi/auth/gsLocateUserV2",
// 账户整合忘记密码重置用户密码
gsResetPwd : "/pingan_hklife_webapi/auth/gsResetPwd",
// 账户整合修改密码接口
gsModifyPwd : "/pingan_hklife_webapi/auth/gsModifyPwd",
// 短信验证码登录
otpLogin : "/pingan_hklife_webapi/otpLogin",
}
\ No newline at end of file
......
......@@ -137,6 +137,18 @@ module.exports = {
verifyCodeGet: "獲取驗證碼",
},
register: {
mobileOptions: [{
type: "hk",
name: "香港手機號",
placeHolder: "請輸入8位手機號碼",
areaCode: "+852"
}, {
type: "zh",
name: "大陸手機號",
placeHolder: "請輸入11位手機號碼",
areaCode: "+86"
}],
coutTips : "{second}秒後重新獲取",
title: "歡迎註冊一賬通",
title2: "請設置新的密碼",
mobilePlaceholder: "请输入8位手机号码",
......
......@@ -13,90 +13,90 @@ module.exports = {
name: "登入",
path: "",
list: [{
name: "註冊",
path: "/register",
type : "noAuth",
value: ""
},{
name: "登入",
path: "/login",
type : "noAuth",
value: ""
},
{
name: "修改密碼",
path: "",
type : "auth",
value: ""
},
{
name: "登出",
path: "",
type : "auth",
value: "logout"
},
name: "註冊",
path: "/register",
type: "noAuth",
value: ""
}, {
name: "登入",
path: "/login",
type: "noAuth",
value: ""
},
{
name: "修改密碼",
path: "",
type: "auth",
value: ""
},
{
name: "登出",
path: "",
type: "auth",
value: "logout"
},
]
},
navList: [{
name: "產品介紹",
path: "/product",
list: []
name: "產品介紹",
path: "/product",
list: []
},
{
name: "客戶服務",
path: "/custom/product",
list: [{
name: "聯系我們",
path: "/custom/service?q=m1"
},
{
name: "客戶服務",
path: "/custom/product",
list: [{
name: "聯系我們",
path: "/custom/service?q=m1"
},
{
name: "繳付保費",
path: "/payment/type"
},
{
name: "保單查詢",
path: "/custom/service?q=m3"
},
{
name: "保單變更",
path: "/custom/service?q=m4"
},
{
name: "理賠申請",
path: "/custom/service?q=m5"
},
{
name: "預約服務",
path: "/custom/service?q=m6"
},
{
name: "投訴受理",
path: "/custom/service?q=m7"
},
{
name: "常用表格",
path: "/custom/service?q=m8"
},
]
name: "繳付保費",
path: "/payment/type"
},
{
name: "新聞資訊",
path: "/news/list",
list: []
name: "保單查詢",
path: "/custom/service?q=m3"
},
{
name: "關於平安人壽",
path: "",
list: [{
name: "公司簡介",
path: "/profile"
},
{
name: "領導人概況",
path: ""
},
]
name: "保單變更",
path: "/custom/service?q=m4"
},
{
name: "理賠申請",
path: "/custom/service?q=m5"
},
{
name: "預約服務",
path: "/custom/service?q=m6"
},
{
name: "投訴受理",
path: "/custom/service?q=m7"
},
{
name: "常用表格",
path: "/custom/service?q=m8"
},
]
},
{
name: "新聞資訊",
path: "/news/list",
list: []
},
{
name: "關於平安人壽",
path: "",
list: [{
name: "公司簡介",
path: "/profile"
},
{
name: "領導人概況",
path: ""
},
]
},
]
},
footer: {
......@@ -137,6 +137,18 @@ module.exports = {
verifyCodeGet: "獲取驗證碼",
},
register: {
mobileOptions: [{
type: "hk",
name: "香港手機號",
placeHolder: "請輸入8位手機號碼",
areaCode: "+852"
}, {
type: "zh",
name: "大陸手機號",
placeHolder: "請輸入11位手機號碼",
areaCode: "+86"
}],
coutTips : "{second}秒後重新獲取",
title: "歡迎註冊一賬通",
title2: "請設置新的密碼",
mobilePlaceholder: "請輸入8位手機號碼",
......@@ -250,7 +262,7 @@ module.exports = {
t4Title: "受益人資料", // t4BeneficiaryInformation
t4NameCn: "姓名（中文）",
t4NameEn: "姓名（英文）",
t4Relation : "與受保人關係",
t4Relation: "與受保人關係",
t4Allocation: "分配比例",
t5Title: "繳費資料",
......@@ -267,8 +279,8 @@ module.exports = {
t6ClosingDate: "實收日期",
t6PaymentAmount: "繳費金額",
},
reservation :{
submitBtn : '確認'
reservation: {
submitBtn: '確認'
}
}
}
......
......@@ -13,90 +13,90 @@ module.exports = {
name: "登陆",
path: "",
list: [{
name: "注册",
path: "/register",
type : "noAuth",
value: ""
},{
name: "登陆",
path: "/login",
type : "noAuth",
value: ""
},
{
name: "修改密码",
path: "",
type : "auth",
value: ""
},
{
name: "登出",
path: "",
type : "auth",
value: "logout"
},
name: "注册",
path: "/register",
type: "noAuth",
value: ""
}, {
name: "登陆",
path: "/login",
type: "noAuth",
value: ""
},
{
name: "修改密码",
path: "",
type: "auth",
value: ""
},
{
name: "登出",
path: "",
type: "auth",
value: "logout"
},
]
},
navList: [{
name: "产品介绍",
path: "/product",
list: []
name: "产品介绍",
path: "/product",
list: []
},
{
name: "客户服务",
path: "/custom/product",
list: [{
name: "联系我们",
path: "/custom/service?q=m1"
},
{
name: "客户服务",
path: "/custom/product",
list: [{
name: "联系我们",
path: "/custom/service?q=m1"
},
{
name: "缴付保费",
path: "/payment/type"
},
{
name: "保单查询",
path: "/custom/service?q=m3"
},
{
name: "保单变更",
path: "/custom/service?q=m4"
},
{
name: "理赔申请",
path: "/custom/service?q=m5"
},
{
name: "预约服务",
path: "/custom/service?q=m6"
},
{
name: "投诉受理",
path: "/custom/service?q=m7"
},
{
name: "常用表格",
path: "/custom/service?q=m8"
},
]
name: "缴付保费",
path: "/payment/type"
},
{
name: "新闻资讯",
path: "/news/list",
list: []
name: "保单查询",
path: "/custom/service?q=m3"
},
{
name: "关于平安人寿",
path: "",
list: [{
name: "公司简介",
path: "/profile"
},
{
name: "领导人概况",
path: ""
},
]
name: "保单变更",
path: "/custom/service?q=m4"
},
{
name: "理赔申请",
path: "/custom/service?q=m5"
},
{
name: "预约服务",
path: "/custom/service?q=m6"
},
{
name: "投诉受理",
path: "/custom/service?q=m7"
},
{
name: "常用表格",
path: "/custom/service?q=m8"
},
]
},
{
name: "新闻资讯",
path: "/news/list",
list: []
},
{
name: "关于平安人寿",
path: "",
list: [{
name: "公司简介",
path: "/profile"
},
{
name: "领导人概况",
path: ""
},
]
},
]
},
footer: {
......@@ -137,6 +137,18 @@ module.exports = {
verifyCodeGet: "获取验证码",
},
register: {
mobileOptions: [{
type: "hk",
name: "香港手机号",
placeHolder: "请输入8位手机号码",
areaCode: "+852"
}, {
type: "zh",
name: "大陆手机号",
placeHolder: "请输入11位手机号码",
areaCode: "+86"
}],
coutTips : "{second}秒后重新获取",
title: "欢迎注册一账通",
title2: "请设置新的密码",
mobilePlaceholder: "请输入8位手机号码",
......@@ -250,7 +262,7 @@ module.exports = {
t4Title: "受益人资料", // t4BeneficiaryInformation
t4NameCn: "姓名（中文）",
t4NameEn: "姓名（英文）",
t4Relation : "与受保人关系",
t4Relation: "与受保人关系",
t4Allocation: "分配比例",
t5Title: "缴费资料",
......@@ -267,8 +279,8 @@ module.exports = {
t6ClosingDate: "实收日期",
t6PaymentAmount: "缴费金额",
},
reservation :{
submitBtn : '确认'
reservation: {
submitBtn: '确认'
}
}
}
......
......@@ -84,7 +84,7 @@ export default {
this.sTitle = curData.name;
window.location.reload();
} else {
console.log("curData.value == =", curData.value)
// console.log("curData.value == =", curData.value)
if (curData.value == "logout") {
// this.$store.commit("SET_USER_INFO", null);
this._loginHandler();
......
......@@ -6,9 +6,6 @@ import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
import { reject } from '_any-promise@1.3.0@any-promise';
let urls
let PK = 'B5FE03847F02046C47292AF0FF2DE88977241483DD40C123046EB39CBE4C48167B120096CFF12CD16559322884A3C56FA92B07B89AB51FC8C91A75127622151DDD730DFF1F993D5A290CEAC0BBA7FC88285D8994ACBAFF50101EDE9A0925AD5DFFAFE96D53C370E9C5B37DF2F871F81C4D7CA6B7EC37FF459C07975AD9A74A95';
let E = '10001';
......@@ -22,10 +19,27 @@ export default {
// 返回的token，串连整个流程，后台安全校验使用
token: "",
deviceId: "",
vcodeuuid: "",
token: "",
deviceId: "",
imageBase64: "",
password: "",
passwordRepeat: ""
},
times: {
interval: 0, // 索引
remain: 0, // 剩余时间
tip: "" // 显示的文字
},
loginForm: {
userId: "18334783910",
password: "qweqwe123"
// userId: "18334783910",
// password: "qweqwe123"
userId: "",
password: "",
imageValue: "",
mobileNo: "",
otp: ""
},
loginCheck: {
showImageCode: false,
......@@ -99,11 +113,17 @@ export default {
},
handlerLogin() {
this.refreshDeviceId();
// console.log("this.loginCheck.agreeProtocol == ", this.loginCheck.agreeProtocol);
if (!this.loginCheck.agreeProtocol) {
this._showAgreeProtocalTips();
return;
}
if (this.type == 1) {
this._passwordLogin();
} else {
this._otpLogin();
}
},
_passwordLogin() {
// 刷新图形二维码
this.handlerIsShowImageVcode().then(() => {
httpPost({
......@@ -121,7 +141,7 @@ export default {
// 处理登录结果
_handlerLoginResponse(response) {
// let res = response.content;
if (response.returnCode == 0) {
if (response.returnCode == 0 || response.resultCode == "0") {
this.$store.commit("SET_USER_INFO", response.data);
this._redirectTo();
} else {
......@@ -141,14 +161,160 @@ export default {
path: path
});
},
handlerSendOTP() {
// 发送短信
_otpLogin() {
this._checkOptParams().then(() => {
let data = {
mobileNo: this.loginForm.mobileNo,
token: this.values.token,
otp: this.loginForm.otp,
deviceId: this.refreshDeviceId()
};
httpPost({
url: api.otpLogin,
data: data
}).then(response => {
this._handlerLoginResponse(response);
});
});
},
_checkOptParams() {
return new Promise((resolve, reject) => {
this._checkMobileLegal().then(() => {
if (!this.loginForm.otp) {
this._showOtpEmptyTips();
return;
}
if (!this.values.token) {
this._showGetOptTips();
return;
}
resolve();
});
})
},
_showGetOptTips() {
alert('请先获取短信验证码');
},
_showImageValueTip() {
alert("请输入图片验证码")
},
_showOtpEmptyTips() {
alert('请输入短信验证码');
},
handlerStdSendOTP() {
// 发送短信验证码
this._checkMobileLegal().then(() => {
if (this.times.remain > 0) {
return;
}
if (this.values.vcodeuuid && !this.loginForm.imageValue) {
this._showImageValueTip();
return;
}
this._handlerIsShowImageVcode().then(() => {
this._startStdSendOTP();
this._startTimeClick();
});
});
},
handlerRefreshImageValue() {
httpPost({
url: api.stdRefreshVcode,
data: {
vcodeuuid: this.values.vcodeuuid
}
}).then(response => {
this.values.imageBase64 = response.data.image;
})
},
handlerValidateOTPandRepeat() {
// 验证短信验证码
_checkMobileLegal() {
// 检测手机号是否正确
return new Promise((resolve, reject) => {
let mobile = this.loginForm.mobileNo;
if (mobile.length != 8 && 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.loginForm.mobileNo
}
}).then(response => {
// 判断是否显示图形验证码
if (response.returnCode == "0") {
this.values.token = response.data.token;
if (response.data.isShowVcode == "N") {
// if (!this.values.vcodeuuid) {
// this.loginCheck.showImageCode = true;
// this.values.vcodeuuid = "123456";
// return;
// }
this.values.vcodeuuid = null;
resolve(response);
} else {
// image 值：
this.loginCheck.showImageCode = true;
this.values.vcodeuuid = response.data.vcodeuuid;
this.values.imageBase64 = response.data.image;
}
}
return false;
})
});
},
_showMobileNoIllegalTip() {
alert("手机号不正确");
},
_startStdSendOTP() {
// 正式发送OTP信号
let data = {
mobileNo: this.loginForm.mobileNo,
token: this.values.token,
signFactor: new Date().getTime(),
scene: "otpLogin",
deviceId: this.refreshDeviceId()
}
if (this.values.vcodeuuid) {
data["vcodeuuid"] = this.values.vcodeuuid;
data["imageValue"] = this.loginForm.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);
},
refreshDeviceId() {
this.values.deviceId = this.values.deviceId || (Math.random() + "").substring(2)
if (!this.values.deviceId) {
this.values.deviceId = (Math.random() + "").substring(2)
}
return this.values.deviceId
},
_passwordEncrypt(rawPwd) {
let rsa = new RSAKey();
......@@ -158,6 +324,11 @@ export default {
return res;
}
},
watch: {
type() {
this.loginCheck.showImageCode = false;
}
},
mounted() {
// console.log("PK === ", this.PK)
// console.log("E === ", this.E)
......
......@@ -124,7 +124,16 @@
justify-content: space-between;
flex-wrap: wrap;
.vcode {
background-color: transparent !important;
padding: 0 !important;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
&-item {
position: relative;
// margin-top: 2.75rem;
......@@ -189,6 +198,7 @@
color: #4c4948;
}
// 框内按钮
.ipt2 {
display: flex;
......@@ -204,13 +214,12 @@
color: #f05a23;
text-decoration: underline;
}
}
.veri-btn-default {
color: #aaaaaa;
}
}
}
}
}
......
......@@ -35,10 +35,12 @@
<input v-model="loginForm.password" :placeholder="$t('login.passwordPlaceholder')" class="ipt" type="password">
</div>
</div>
<div class="pure-u-1 form-item" v-if="loginCheck.showImageCode">
<div class="pure-u-1 form-item" v-if="type == 1 && loginCheck.showImageCode">
<div class="ipt-wrap">
<input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" type="text">
<div class="ipt verify-btn pointer">5136</div>
<input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" type="text" v-model="loginForm.imageValue">
<div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue">
<img :src="values.imageBase64">
</div>
</div>
</div>
</div>
......@@ -73,7 +75,15 @@
<img src="@/assets/images/login/icon-login-phone.png"> {{$t('login.mobile')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('login.mobilePlaceholder')" class="ipt" type="text">
<input :placeholder="$t('login.mobilePlaceholder')" class="ipt" type="text" v-model="loginForm.mobileNo">
</div>
</div>
<div class="pure-u-1 form-item" v-if="type == 2 && loginCheck.showImageCode">
<div class="ipt-wrap">
<input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" type="text" v-model="loginForm.imageValue">
<div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue">
<img :src="values.imageBase64">
</div>
</div>
</div>
<div class="pure-u-1 form-item">
......@@ -82,17 +92,20 @@
</div>
<div class="ipt-wrap">
<div class="ipt ipt2">
<input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text">
<div class="veri-btn pointer"> {{$t('login.verifyCodeGet')}}</div>
<input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="loginForm.otp">
<div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP" >{{$t('register.verifyCodeGet')}}</div>
<div v-else class="veri-btn-default">{{times.tip}}</div>
</div>
</div>
</div>
</div>
<div class="login-protocol">
<img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png"> {{$t('login.agree')}}
<div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol" >
<img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
<img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png">
{{$t('login.agree')}}
<span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
</div>
<div @click="onSubmitHandler()" class="login-submit pointer">{{$t('login.login')}}</div>
<div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
<div class="login-func">
<div @click="onRegisterHandler()" class="login-func-btn pointer">{{$t('login.register')}}</div>
<div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div>
......
......@@ -4,11 +4,43 @@ import {
httpPost
} from '@/api/fetch-api.js'
let PK = 'B5FE03847F02046C47292AF0FF2DE88977241483DD40C123046EB39CBE4C48167B120096CFF12CD16559322884A3C56FA92B07B89AB51FC8C91A75127622151DDD730DFF1F993D5A290CEAC0BBA7FC88285D8994ACBAFF50101EDE9A0925AD5DFFAFE96D53C370E9C5B37DF2F871F81C4D7CA6B7EC37FF459C07975AD9A74A95';
let E = '10001';
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: "" // 显示的文字
},
PK: process.env.RSA_PUBLIC_KEY || PK,
E: process.env.RSA_KEY_INDEX || E,
}
},
components: {},
......@@ -21,19 +53,324 @@ export default {
}
},
methods: {
onCheckHandler() {
},
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.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: this._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() {
......@@ -41,8 +378,31 @@ export default {
onLoginTypeHandler(val) {
},
initData() {}
_passwordEncrypt(rawPwd) {
let rsa = new RSAKey();
rsa.setPublic(this.PK, this.E);
let res = rsa.encrypt(rawPwd);
if (res == null) return rawPwd;
return res;
},
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);
}
})
}
},
mounted() {},
created() {}
created() {
this.initData();
}
}
......
......@@ -120,6 +120,20 @@
justify-content: space-between;
flex-wrap: wrap;
.vcode {
background-color: transparent !important;
padding: 0 !important;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
input {
font-size: 1.166667rem; /* 14/12 */
letter-spacing: .1rem;/* 1.2/12 */
}
&-item {
position: relative;
......@@ -206,6 +220,9 @@
color: #f05a23;
text-decoration: underline;
}
.veri-btn-default {
color: #aaaaaa;
}
}
}
......
......@@ -16,36 +16,44 @@
<div class="pure-u-1 form-item">
<div class="ipt-wrap">
<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
<select class="ipt">
<template v-if="locale == 'zh'">
<option>香港手机号</option>
</template>
<template v-else>
<option>香港手機號</option>
</template>
<select class="ipt" v-model="mobileNoType">
<option v-for="(item,index) in mobileOptions" :key="index" :value="item.type">{{item.name}}</option>
</select>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="ipt-wrap">
<div class="ipt ipt2">
<div class="region-tel">+852</div>
<input :placeholder="$t('register.mobilePlaceholder')" class="ipt-tel" type="text">
<div class="region-tel">{{mobileTip.areaCode}}</div>
<input :placeholder="mobileTip.placeHolder" class="ipt-tel" type="text" v-model="registerForm.mobileNo">
</div>
</div>
</div>
<div class="pure-u-1 form-item" v-if="registerCheck.showImageCode">
<div class="ipt-wrap">
<input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" type="text" v-model="registerForm.imageValue">
<div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageVcode">
<img :src="values.imageBase64">
</div>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="ipt-wrap">
<div class="ipt ipt2">
<input :placeholder="$t('register.verifyCodePlaceholder')" class="ipt-code" type="text">
<div class="veri-btn pointer">{{$t('register.verifyCodeGet')}}</div>
<input :placeholder="$t('register.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="registerForm.opt">
<div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP" >{{$t('register.verifyCodeGet')}}</div>
<div v-else class="veri-btn-default">{{times.tip}}</div>
</div>
</div>
</div>
</div>
<div class="login-protocol">
<img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png">{{$t('register.agree')}}
<span @click="onProtocolHandler()" class="protocol pointer">{{$t('register.protocol')}}</span>
<div class="login-protocol pointer" @click="registerCheck.agreeProtocol = !registerCheck.agreeProtocol" >
<img v-if="!registerCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
<img v-if="registerCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png">
{{$t('login.agree')}}
<span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
</div>
<div @click="onSubmitHandler()" class="login-submit pointer">{{$t('register.register')}}</div>
</div>
......@@ -57,7 +65,7 @@
<img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" type="text">
<input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" type="password" v-model="values.password">
</div>
</div>
<div class="pure-u-1 form-item">
......@@ -65,11 +73,11 @@
<img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" type="text">
<input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" type="password" v-model="values.passwordRepeat">
</div>
</div>
</div>
<div @click="onSubmitHandler()" class="login-submit pointer">{{$t('register.sure')}}</div>
<div @click="onRegisterHandler()" class="login-submit pointer">{{$t('register.sure')}}</div>
</div>
</div>
</div>
......