Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
12c9ed1b by simon
Options

用户体系样式/文案

1 parent 035a0a77
Inline Side-by-side
Showing 8 changed files with 192 additions and 124 deletions
......@@ -191,10 +191,10 @@ module.exports = {
},
login: {
title: "PingAn Account Member Service",
loginType1: "Login with user name and password",
loginType1: "Dynamic password login",
loginType2: "Dynamic password login",
account: "Account",
accountPlaceholder: "Please enter Mobile no.",
accountPlaceholder: "Please enter user name",
password: "Password",
passwordPlaceholder: "Please enter password",
verifyPlaceholder: "Please enter password",
......@@ -206,8 +206,9 @@ module.exports = {
mobile: "Mobile no.",
mobilePlaceholder: "Please enter Mobile no",
verifyCode: "SMS verification code",
verifyCodePlaceholder: "SMS verification code",
verifyCodeGet: "Get SMS verification code",
verifyCodePlaceholder: "Please enter verification code",
verifyCodeGet: "Get verification codee",
SMSVerificationCode:"SMS verification code",
tips: {
e1: "Please enter account",
e2: "Please enter the password",
......@@ -221,7 +222,8 @@ module.exports = {
oe2: "Please enter the picture verification code",
oe3: "Please enter the picture verification code",
oe4: "Your verify code is not correct. Please try again",
}
},
accountPlaceholder:"Please setup user name ",
},
session: {
sidExpire: "It has not been operated for a long time. For the sake of your account security, please restart",
......
......@@ -193,23 +193,24 @@ module.exports = {
},
login: {
title: "平安賬戶",
loginType1: "賬密登入",
loginType1: "動態密碼登錄",
loginType2: "動態密碼登入",
account: "賬號",
accountPlaceholder: "請輸入手機號",
accountPlaceholder: "請輸入用戶名稱",
password: "密碼",
passwordPlaceholder: "輸入登入密碼",
verifyPlaceholder: "請輸入驗證碼",
agree: "同意",
protocol: "《平安香港會員網上帳戶服務協定》",
login: "登入",
login: "登錄",
register: "註冊",
forget: "忘記密碼",
mobile: "手機號",
mobilePlaceholder: "手機號",
verifyCode: "驗證碼",
verifyCodePlaceholder: "驗證碼",
verifyCodePlaceholder: "請輸入驗證碼",
verifyCodeGet: "獲取驗證碼",
SMSVerificationCode:"手機短信驗證碼",
tips: {
e1: "請輸入賬號信息",
e2: "請輸入密碼",
......@@ -266,7 +267,8 @@ module.exports = {
e10: "驗證碼過期，請重新申請驗證碼",
e11: "註冊失敗，請聯繫工作人員",
e12: "註冊成功"
}
},
accountPlaceholder:"請設置用戶名稱",
},
session: {
sidExpire: "長時間未操作，為了您賬戶的安全，請登入後再操作"
......
......@@ -193,10 +193,10 @@ module.exports = {
},
login: {
title: "平安账户",
loginType1: "账密登入",
loginType1: "动态密码登录",
loginType2: "动态密码登入",
account: "账号",
accountPlaceholder: "请输入手机号",
accountPlaceholder: "请输入用户名称",
password: "密码",
passwordPlaceholder: "输入登入密码",
verifyPlaceholder: "请输入验证码",
......@@ -208,8 +208,9 @@ module.exports = {
mobile: "手机号",
mobilePlaceholder: "手机号",
verifyCode: "验证码",
verifyCodePlaceholder: "验证码",
verifyCodePlaceholder: "请输入验证码",
verifyCodeGet: "获取验证码",
SMSVerificationCode:"手机短信验证码",
tips: {
e1: "请输入账号信息",
e2: "请输入密码",
......@@ -269,7 +270,8 @@ module.exports = {
e10: "验证码过期，请重新申请验证码",
e11: "注册失败，请联系工作人员",
e12: "註冊成功"
}
},
accountPlaceholder:"请设置用户名称",
},
passwordCheck: {
error1: "密码长度不少于8位",
......
......@@ -91,7 +91,9 @@
&-tit {
flex: 1;
font-size: $fontSizeTitle;
// font-size: $fontSizeTitle;
// font-size: $fontSizeTitle-M2;
font-size: $fontSize-M2;
font-weight: bold;
}
......@@ -104,12 +106,13 @@
&-protocol {
margin: 36px auto 0;
display: flex;
align-items: center;
// align-items: center;
// padding-left: 12px;
.check {
height: 12px;
margin-right: 6px;
margin-right: 7.2px;
margin-top: 4px;
}
.protocol {
......
......@@ -74,7 +74,9 @@
</div>
</template>
<template v-else>
<!-- 不接入一账通 -->
<!-- 不接入一账通 -OTP登陆 -->
<div class="login-nav">
<div class="login-nav-tit text-c pointer active">{{$t('login.loginType1')}}</div>
</div>
......@@ -90,7 +92,7 @@
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
</div>
</div>
<div class="pure-u-1 form-item">
<!-- <div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-password.png"> {{$t('login.password')}}
</div>
......@@ -100,10 +102,10 @@
<div class="validator" v-if="errorTips.e2.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
</div>
</div>
</div> -->
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-message.png"> {{$t('login.verifyCode')}}
<img src="@/assets/images/login/icon-login-phone.png"> {{$t('login.SMSVerificationCode')}}
</div>
<div class="ipt-wrap">
<div class="ipt ipt2" :class="{ err : errorTips.oe2.length > 0 }">
......
......@@ -2,32 +2,28 @@
* 页面描述:用户注册
*/
import { mapState } from "vuex";
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
import api from "@/api/api";
import { httpGet, httpPost } from "@/api/fetch-api.js";
import { contactMethodCheck, checkVerifyCode } from '@utils/utils.js';
import { contactMethodCheck, checkVerifyCode } from "@utils/utils.js";
import modalComp from '@/components/modal-comp/modal-comp.vue';
import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue';
import modalProtocolComp from '@/components/modal-protocol-comp/modal-protocol-comp.vue';
import { passwordEncrypt } from '@/utils/encrypt.js';
import Vue from 'vue';
import { Loading } from 'vant';
import modalComp from "@/components/modal-comp/modal-comp.vue";
import modalSimpleComp from "@/components/modal-simple-comp/modal-simple-comp.vue";
import modalProtocolComp from "@/components/modal-protocol-comp/modal-protocol-comp.vue";
import { passwordEncrypt } from "@/utils/encrypt.js";
import Vue from "vue";
import { Loading } from "vant";
Vue.use(Loading);
export default {
data() {
return {
loading: false,
key: 'value',
key: "value",
type: 1, // 1:手机验证 2:输入密码
mobileNoType: "hk",// 选择的手机好类型
mobileNoType: "hk", // 选择的手机好类型
mobileTip: {},
mobileOptions: [],
......@@ -47,7 +43,8 @@ export default {
registerForm: {
imageValue: "",
mobileNo: "",
otp: ""
otp: "",
userId: ""
},
times: {
interval: 0, // 索引
......@@ -56,11 +53,24 @@ export default {
},
errorTips: {
p1: "",// 手機號
p2: "",// 短信驗證碼
p3: "",// 圖像驗證碼
p4: "",// 密碼
p5: "",// 確認密碼
p1: "", // 手機號
p2: "", // 短信驗證碼
p3: "", // 圖像驗證碼
p4: "", // 密碼
p5: "", // 確認密碼
// 账密登录页
e1: "", // 账号
e2: "", // 密码
e3: "", // 图像验证码
e4: "", // 勾选同意
// 短信验证码
oe1: "", // 账号
oe2: "", // 短信验证码
oe3: "", // 图像验证码
// 注册
p4: "",
p5: ""
},
modalSimpleVisiable: false,
modalVisiable: false,
......@@ -68,7 +78,7 @@ export default {
targetPath: "",
modalIcon: "succ",
modalContent: ""
}
};
},
components: {
modalComp,
......@@ -80,10 +90,12 @@ export default {
userInfo: state => state.userInfo
}),
locale() {
return this.$i18n.locale || 'tc';
return this.$i18n.locale || "tc";
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
return this.$i18n.messages && this.$i18n.locale
? this.$i18n.messages[this.$i18n.locale]
: {};
},
registerDisabled() {
let b1 = !this.registerCheck.agreeProtocol;
......@@ -93,16 +105,23 @@ export default {
return b1 || b2 || b3 || b4;
},
registerDisabledV2() {
let b1 = !this.values.password || this.checkPassword(this.values.password) ? true : false;
let b2 = this.values.passwordRepeat != this.values.password ? true : false;
let b1 =
!this.values.password || this.checkPassword(this.values.password)
? true
: false;
let b2 =
this.values.passwordRepeat != this.values.password ? true : false;
let b3 = !this.registerCheck.agreeProtocol;
let b4 = !this.registerForm.mobileNo ? true : false;
return b1 || b2 || b3 || b4;
},
submitDisabled() {
let b1 = !this.values.password || this.checkPassword(this.values.password) ? true : false;
let b2 = this.values.passwordRepeat != this.values.password ? true : false;
let b1 =
!this.values.password || this.checkPassword(this.values.password)
? true
: false;
let b2 =
this.values.passwordRepeat != this.values.password ? true : false;
return b1 || b2;
},
oneAccountCenterOff() {
......@@ -152,13 +171,13 @@ export default {
return new Promise((resolve, reject) => {
let mobile = this.registerForm.mobileNo;
if (this.mobileNoType == "hk") {
if (!contactMethodCheck('hkmobile', mobile)) {
this._showMobileNoIllegalTip()
if (!contactMethodCheck("hkmobile", mobile)) {
this._showMobileNoIllegalTip();
return;
}
} else {
if (!contactMethodCheck('mobile', mobile)) {
this._showMobileNoIllegalTip()
if (!contactMethodCheck("mobile", mobile)) {
this._showMobileNoIllegalTip();
return;
}
}
......@@ -167,7 +186,6 @@ export default {
},
_handlerIsShowImageVcode() {
return new Promise((resolve, reject) => {
// 如果这个值不为空，标识出现了图片验证码，不需要重新询问是否需要图像验证码了
if (this.values.vcodeuuid) {
resolve();
......@@ -201,7 +219,7 @@ export default {
}
}
return false;
})
});
});
},
_showMobileNoIllegalTip() {
......@@ -215,8 +233,8 @@ export default {
mobileNo: this.registerForm.mobileNo,
token: this.values.token,
signFactor: new Date().getTime(),
scene: "register",
}
scene: "register"
};
if (this.values.vcodeuuid) {
data["vcodeuuid"] = this.values.vcodeuuid;
data["imageValue"] = this.registerForm.imageValue;
......@@ -230,7 +248,7 @@ export default {
default:
this.errorTips.p2 = response.returnMsg;
break;
};
}
});
},
_startTimeClick() {
......@@ -239,7 +257,7 @@ export default {
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 () {
this.times.interval = setInterval(function() {
if (_this.times.remain <= 0) {
clearInterval(_this.times.interval);
_this.times.interval = 0;
......@@ -248,7 +266,7 @@ export default {
}
_this.times.remain--;
_this.times.tip = msg.replace("{second}", _this.times.remain);
_this.$set(_this, 'times', _this.times);
_this.$set(_this, "times", _this.times);
}, 1000);
},
onSubmitHandler() {
......@@ -258,15 +276,19 @@ export default {
}
this._checkParams().then(() => {
this.loading = true;
this._regCheck().then(() => {
this._regCheck()
.then(() => {
// 验证短信验证码
this._validateOTPandRepeat().then(() => {
this._validateOTPandRepeat()
.then(() => {
this.loading = false;
this.type = 2;
}).catch(e => {
})
.catch(e => {
this.loading = false;
});
}).catch(e => {
})
.catch(e => {
this.loading = false;
});
});
......@@ -289,16 +311,18 @@ export default {
let data = {
account: this.registerForm.mobileNo,
password: this.values.password
}
};
this.loading = true;
httpPost({
url: api.doRegisterV2,
data: data
}).then(res => {
})
.then(res => {
this.loading = false;
this.$store.commit("SET_USER_INFO", res);
this._showSuccessMessage();
}).catch(e => {
})
.catch(e => {
this.loading = false;
switch (e.code) {
case 1103:
......@@ -306,7 +330,7 @@ export default {
this.errorTips.p1 = message;
break;
}
})
});
});
},
_validateOTPandRepeat() {
......@@ -320,7 +344,8 @@ export default {
httpPost({
url: api.stdValidateOTPandRepeat,
data: data
}).then(response => {
})
.then(response => {
if (response.returnCode != "0") {
switch (response.returnCode) {
case "SMS_ERROR_006":
......@@ -335,21 +360,23 @@ export default {
// this.type = 2;
resolve();
}
}).catch(err => {
reject();
})
.catch(err => {
reject();
});
});
},
_regCheck() {
// 检测手机号注册情况
return new Promise((resolve, reject) => {
let data = {
mobileNo: this.registerForm.mobileNo,
mobileNo: this.registerForm.mobileNo
};
httpPost({
url: api.gsRegCheck,
data: data
}).then(response => {
})
.then(response => {
if (response.returnCode == "0") {
if (response.data.mobileStatus == "N") {
resolve();
......@@ -363,9 +390,10 @@ export default {
this._showCheckOTPErrTip(response.returnMsg);
reject();
}
}).catch(err => {
reject();
})
.catch(err => {
reject();
});
});
},
_checkParams() {
......@@ -388,7 +416,7 @@ export default {
return;
}
resolve();
})
});
});
},
......@@ -446,7 +474,8 @@ export default {
httpPost({
url: api.stdRegister,
data: data
}).then(response => {
})
.then(response => {
this.loading = false;
if (response.returnCode != 0) {
this._showRegisterFailure(response);
......@@ -455,9 +484,10 @@ export default {
this.$store.commit("SET_USER_INFO", response.data);
this._showSuccessMessage();
}
}).catch(e => {
this.loading = false;
})
.catch(e => {
this.loading = false;
});
}
},
checkPassword(password) {
......@@ -534,13 +564,13 @@ export default {
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);
})
this.$set(this.values, "imageBase64", response.data.image);
});
}
},
_showSuccessMessage() {
......@@ -552,12 +582,8 @@ export default {
// });
// alert("注册成功")
},
onForgetHandler() {
},
onLoginTypeHandler(val) {
},
onForgetHandler() {},
onLoginTypeHandler(val) {},
initData() {
if (this.userInfo && (this.userInfo.sid || this.userInfo.name)) {
this.$router.push({
......@@ -566,7 +592,9 @@ export default {
return;
}
let i18n = this.$i18n.messages[this.$i18n.locale] || {};
let mobileOptions = JSON.parse(JSON.stringify(i18n.register.mobileOptions));
let mobileOptions = JSON.parse(
JSON.stringify(i18n.register.mobileOptions)
);
this.mobileOptions = mobileOptions;
this.mobileTip = this.mobileOptions[0];
},
......@@ -574,7 +602,7 @@ export default {
this.modalVisiable = false;
if (this.targetPath) {
this.$router.push({
"path": this.targetPath
path: this.targetPath
});
}
}
......@@ -587,47 +615,44 @@ export default {
this.mobileOptions.forEach(element => {
// this.errorTips.p1 = "";
if (element.type == this.mobileNoType) {
this.$set(this, 'mobileTip', element);
this.$set(this, "mobileTip", element);
this.checkMobileActivity();
}
})
});
},
'registerForm.mobileNo': function () {
"registerForm.mobileNo": function() {
this.errorTips.p1 = "";
},
'registerForm.opt': function () {
"registerForm.opt": function() {
this.errorTips.p2 = "";
},
'registerForm.imageValue': function () {
"registerForm.imageValue": function() {
this.errorTips.p3 = "";
},
'values.password': function () {
this.$set(this.errorTips, 'p4', this.checkPassword(this.values.password));
"values.password": function() {
this.$set(this.errorTips, "p4", this.checkPassword(this.values.password));
},
'values.passwordRepeat': function () {
"values.passwordRepeat": function() {
if (this.values.password != this.values.passwordRepeat) {
this._showPasswordNotTheSameTips();
} else {
this.errorTips.p5 = "";
}
}
},
},
beforeDestroy() {
},
beforeDestroy() {},
created() {
this.initData();
try {
this.$root.eventBus.$off("/register");
} catch (e) {
}
} catch (e) {}
this.$root.eventBus.$on("/register", () => {
this.type = 1;
});
this.$root.eventBus.$on("langChange", () => {
try {
this.initData();
} catch (e) { }
} catch (e) {}
});
}
}
};
......
@import '@/styles/_support.scss';
@import "@/styles/_support.scss";
.content {
position: relative;
......@@ -21,7 +21,7 @@
}
.ebg {
background: url('~@/assets/images/common/login-bg.png') center no-repeat;
background: url("~@/assets/images/common/login-bg.png") center no-repeat;
width: 100%;
height: 325px;
position: absolute;
......@@ -39,7 +39,6 @@
}
.login {
@extend .bb;
padding: 32px 75px 54px;
border-bottom: solid 10.8px $cGreen;
......@@ -51,8 +50,6 @@
@extend .box-shadow;
background-color: #ffffff;
&-tit {
color: $cOrange;
display: flex;
......@@ -70,7 +67,9 @@
&-tit2 {
color: $cOrange;
text-align: center;
font-size: $fontSizeTitle;
// font-size: $fontSizeTitle;
// font-size: $fontSizeTitle-M2;
font-size: $fontSize-M2;
font-weight: bold;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
margin-top: 24px;
......@@ -80,7 +79,6 @@
letter-spacing: 2.4px;
}
&-nav {
margin: 32px auto 12px;
display: flex;
......@@ -96,7 +94,9 @@
&-tit {
flex: 1;
font-size: $fontSizeTitle;
// font-size: $fontSizeTitle;
// font-size: $fontSizeTitle-M2;
font-size: $fontSize-M2;
font-weight: bold;
}
......@@ -109,12 +109,13 @@
&-protocol {
margin: 36px auto 0;
display: flex;
align-items: center;
// align-items: center;
// padding-left: 12px;
.check {
height: 12px;
margin-right: 7.2px;
margin-top: 4px;
}
.protocol {
......@@ -126,11 +127,9 @@
padding-left: 12px;
}
&-submit {
@include btc2(207px, 63px, 16px);
margin: 50px auto 0;
}
&-submit:lang(zh) {
......@@ -165,7 +164,8 @@
}
}
input {}
input {
}
input:lang(zh) {
letter-spacing: 1.2px;
......@@ -221,7 +221,6 @@
max-width: 30%;
}
.verify-btn {
@extend .fcc;
// font-family: Arial;
......@@ -234,7 +233,6 @@
color: $cFontGray;
}
// 框内按钮
.ipt2 {
display: flex;
......@@ -275,7 +273,6 @@
margin-right: 4.8px;
}
}
}
}
......@@ -310,7 +307,6 @@
&-item {
margin-top: 24px;
}
}
&-protocol {
......
......@@ -125,6 +125,7 @@
</div>
</div>
<!-- OPT -->
<div class="content" v-else>
<div class="top-space"></div>
<div class="box">
......@@ -133,6 +134,22 @@
<div class="login-tit2">{{$t('register.title')}}</div>
<div class="gird-g form">
<!-- 账号 -->
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-user.png"> {{$t('login.account')}}
</div>
<div class="ipt-wrap">
<!-- <input v-model="registerForm.userId" :placeholder="$t('register.accountPlaceholder')" class="ipt" :class="{ err : errorTips.e1.length > 0 }" type="text" @blur="userIdLegalCheck"> -->
<input v-model="registerForm.userId" :placeholder="$t('register.accountPlaceholder')" class="ipt" :class="{ err : errorTips.e1.length > 0 }" type="text" >
</div>
<div class="validator" v-if="errorTips.p1.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p1}}
</div>
</div>
<!-- 手机号 -->
<div class="pure-u-1 form-item">
<div class="label">
......@@ -155,6 +172,25 @@
</div>
</div>
<!-- 短信验证 -->
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/register/icon-register-phone.png"> {{$t('login.SMSVerificationCode')}}
</div>
<div class="ipt-wrap">
<div class="ipt ipt2" :class="{ err : errorTips.oe2.length > 0 }">
<input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="registerForm.otp">
<!-- <div v-if="times.remain == 0" class="veri-btn pointer" @click="sendOTPWhenOneAccountCenterOff">{{$t('register.verifyCodeGet')}}</div> -->
<div v-if="times.remain == 0" class="veri-btn pointer" >{{$t('register.verifyCodeGet')}}</div>
<div v-else class="veri-btn-default">{{times.tip}}</div>
</div>
</div>
<div class="validator" v-if="errorTips.oe2.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe2}}
</div>
</div>
<!--
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}}
......@@ -176,7 +212,7 @@
<div class="validator" v-if="errorTips.p5.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}}
</div>
</div>
</div> -->
</div>
......