<template>
|
<div class="registerBox">
|
<van-nav-bar style="background-color:#528abe;">
|
<template #left>
|
<van-icon @click="pageBack" name="arrow-left" size="18" />
|
</template>
|
<template #title>
|
<label >{{$t('simpleLoginPage.register.TR')}}</label>
|
</template>
|
</van-nav-bar>
|
<div class="register_main">
|
<van-steps :active="m_stepActive" active-icon="arrow" active-color="#528abe">
|
<van-step>{{$t('simpleLoginPage.verifyAccount.TR')}}</van-step>
|
<van-step>{{$t('simpleLoginPage.fillInInformation.TR')}}</van-step>
|
<van-step>{{$t('simpleLoginPage.registerSuccess.TR')}}</van-step>
|
</van-steps>
|
<van-form colon validate-first validate-trigger="onSubmit" :show-error="true">
|
<div v-if="m_stepActive == 0">
|
<van-field
|
v-model="m_registerFromData.Telphone"
|
name="Telphone"
|
:label="$t('header.telPhoneNumber.TR')"
|
:placeholder="$t('simpleLoginPage.formValidate.TelPhone0.TR')"
|
:rules="[{ pattern:Telvalidator, message: $t('simpleLoginPage.formValidate.TelPhone1.TR'),trigger :'onBlur' }]"
|
required
|
autocomplete
|
/>
|
<van-field
|
v-model="m_registerFromData.VerifyCode"
|
@input="VerifyCodeChange"
|
center
|
clearable
|
name="VerifyCode"
|
:label="$t('simpleLoginPage.verifyCode.TR')"
|
required
|
:placeholder="$t('simpleLoginPage.enterVerificCode.TR')"
|
>
|
<template #button>
|
<van-button
|
size="small"
|
class="sendVerifyCodeBtn_style"
|
type="primary"
|
@click="getVerifyCode"
|
:disabled="daojishi"
|
>
|
{{$t('simpleLoginPage.send.TR')}}
|
<span v-if="daojishi">({{ time }})</span>
|
</van-button>
|
</template>
|
</van-field>
|
</div>
|
<div v-if="m_stepActive == 1">
|
<van-field
|
v-model="m_registerFromData.LoginName"
|
name="LoginName"
|
:label="$t('simpleLoginPage.loginName.TR')"
|
:placeholder="$t('simpleLoginPage.formValidate.loginName0.TR')"
|
required
|
:rules="[{ validator:isNull, message: $t('simpleLoginPage.formValidate.loginName0.TR')}]"
|
autocomplete
|
/>
|
<van-field
|
v-model="m_registerFromData.Password"
|
name="Password"
|
:label="$t('simpleLoginPage.password.TR')"
|
:placeholder="$t('simpleLoginPage.formValidate.pass0.TR')"
|
:rules="[{ validator:isNull, message: $t('simpleLoginPage.formValidate.pass0.TR')}]"
|
required
|
autocomplete
|
/>
|
<van-field
|
v-model="m_registerFromData.CheckPassWord"
|
name="CheckPassWord"
|
:label="$t('simpleLoginPage.confirmPassword.TR')"
|
:placeholder="$t('simpleLoginPage.confirmPassword.TR')"
|
required
|
:rules="[{ validator:isPassWord, message: $t('simpleLoginPage.pwdRule.TR')}]"
|
autocomplete
|
/>
|
<van-field
|
v-model="m_registerFromData.RealName"
|
name="RealName"
|
:label="$t('simpleLoginPage.userName.TR')"
|
:placeholder="$t('simpleLoginPage.userName.TR')"
|
required
|
autocomplete
|
/>
|
<van-field
|
v-model="m_registerFromData.CorpName"
|
name="CorpName"
|
:label="$t('simpleLoginPage.corpName.TR')"
|
:placeholder="$t('simpleLoginPage.formValidate.corpName0.TR')"
|
autocomplete
|
/>
|
<van-field
|
v-model="m_registerFromData.CorpAddress"
|
name="CorpAddress"
|
:label="$t('simpleLoginPage.companyAddress.TR')"
|
:placeholder="$t('simpleLoginPage.formValidate.corpAddress0.TR')"
|
autocomplete
|
/>
|
<van-field
|
v-model="m_registerFromData.Email"
|
name="Email"
|
:label="$t('simpleLoginPage.email.TR')"
|
:placeholder="$t('simpleLoginPage.formValidate.email0.TR')"
|
required
|
autocomplete
|
/>
|
</div>
|
<div style="padding: 20px; font-size: 24px; color: green" v-if="m_stepActive == 2">{{$t('simpleLoginPage.welcomeLogin.TR')}}</div>
|
<div style="margin: 16px;">
|
<van-button class="regBtn_style" color="#3b3b3b" @click="next" round block type="info">{{regitBtn}}</van-button>
|
</div>
|
</van-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import languageMixin from "@/mixin/language";
|
export default {
|
mixins: [languageMixin],
|
data() {
|
return {
|
CorpName:"",
|
m_Title:"",
|
m_pageName: "注册",
|
m_stepActive: 0,
|
daojishi: false,
|
locale: "CN",
|
time: 120,
|
regitBtn: "下一步", //注册按钮显示文字
|
Interval: null, //验证码倒计时定时器
|
isCode: false, //验证码是否正确
|
VerifyCode: "", //手机注册返回的验证码
|
Telvalidator: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/, //手机号验证
|
m_registerFromData: {
|
Telphone: "", //手机号
|
VerifyCode: "", //验证码
|
LoginName: "", //登录名
|
Password: "", //密码
|
CheckPassWord: "", //二次密码
|
RealName: "", //真实姓名
|
CorpName: "", //公司名称
|
CorpAddress: "", //公司地址
|
Email: "" //邮箱
|
}
|
};
|
},
|
mounted(){
|
this.m_Title = this.getSoftName();;
|
document.title = this.m_Title
|
},
|
methods: {
|
//获取验证码
|
getVerifyCode() {
|
let _this = this;
|
let Toast = _this.$toast;
|
let url =
|
this.$globalConfig.WebApiUrl.MainUrl +
|
"v1/UserRegit/GetTelVerifyCode?TelPhone=" +
|
this.m_registerFromData.Telphone;
|
this.$axios.get(url).then(function(res) {
|
//console.log(res);
|
let data = res.data;
|
if (data.Code != 0) {
|
Toast(data.Message);
|
return;
|
}
|
_this.VerifyCode = data.Message;
|
//console.log(data.Message, 156);
|
_this.daojishi = true;
|
_this.Interval = setInterval(() => {
|
if (_this.time == 0) {
|
clearInterval(_this.Interval);
|
_this.time = 120;
|
_this.daojishi = false;
|
}
|
_this.time--;
|
}, 1000);
|
});
|
},
|
next() {
|
let _this = this;
|
let Toast = _this.$toast;
|
// console.log(this.stepActive);
|
if (this.m_stepActive == 2) {
|
_this.$router.push({
|
path: `/${this.$getCurrentLanguageUrl()}/login/simpleLogin`,
|
replace: true
|
});
|
}
|
if (this.m_stepActive == 1) {
|
_this.stepTwo();
|
}
|
if (this.m_stepActive == 0) {
|
if (_this.isCode) {
|
_this.m_stepActive = 1;
|
_this.m_registerFromData.LoginName =
|
_this.m_registerFromData.Telphone;
|
_this.regitBtn = "完成";
|
if (_this.Interval != null) {
|
clearInterval(_this.Interval);
|
_this.tiem = 120;
|
_this.daojishi = false;
|
}
|
} else {
|
Toast("验证码错误");
|
}
|
}
|
},
|
//验证是否为空
|
isNull(str) {
|
if (str == "") return false;
|
return true;
|
},
|
//验证再次输入的密码是否一致
|
isPassWord(str) {
|
if (str != this.m_registerFromData.Password) return false;
|
return true;
|
},
|
//验证验证码是否正确
|
VerifyCodeChange() {
|
let code = this.VerifyCode;
|
if (code == "") {
|
this.isCode = false;
|
return;
|
}
|
if (code == this.m_registerFromData.VerifyCode) {
|
this.isCode = true;
|
} else {
|
this.isCode = false;
|
}
|
},
|
//注册完成
|
stepTwo() {
|
let _this = this;
|
let Toast = _this.$toast;
|
let url =
|
this.$globalConfig.WebApiUrl.MainUrl + "v1/UserRegit/RegitOuterUserByTel";
|
let data = {
|
LoginName: this.m_registerFromData.LoginName,
|
Telphone: this.m_registerFromData.Telphone,
|
Password: this.m_registerFromData.Password,
|
RealName: this.m_registerFromData.RealName,
|
CorpName: this.m_registerFromData.CorpName,
|
CorpAddress: this.m_registerFromData.CorpAddress,
|
Email: this.m_registerFromData.Email
|
};
|
if (this.m_registerFromData.LoginName == "") {
|
Toast.fail("登录名不能为空");
|
return;
|
}
|
if (this.m_registerFromData.Password == "") {
|
Toast.fail("密码不能为空");
|
return;
|
}
|
|
//console.log(data);
|
this.$axios({
|
url: url,
|
method: "post",
|
data: data,
|
headers: { "Content-Type": "application/json" }
|
}).then(function(res) {
|
//console.log(res);
|
let resdata = res.data;
|
if (resdata.Code != 0) {
|
Toast(resdata.Message);
|
return;
|
}
|
_this.m_stepActive = 2;
|
_this.regitBtn = `${_this.$t('simpleLoginPage.returnLogin.TR')}`;
|
});
|
},
|
//返回上一页
|
pageBack() {
|
this.$router.go(-1);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.registerBox {
|
width: 100%;
|
height: calc(100vh - 46px);
|
.van-step--horizontal:first-child .van-step__title {
|
margin-left: -122px;
|
}
|
.van-step--horizontal .van-step__title {
|
margin-left: -122px;
|
}
|
.van-step--horizontal:last-child .van-step__title {
|
margin: 0;
|
}
|
}
|
</style>
|
