<template>
|
<div class="register">
|
<div class="top" @click="$router.go(-1)"><img :src="require(`../../assets/theme/${theme}/image/Union.png`)" alt="">
|
</div>
|
<Step :step="1"></Step>
|
<div class="title textColor">{{ $t('注册') }}</div>
|
<div class="flex re-tab">
|
<!-- <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{ $t('账号') }}</div>-->
|
<div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }}</div>
|
<div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('手机号') }}</div>
|
</div>
|
<ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)" v-model.trim="username"
|
:area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
|
|
<ExInput :label="$t('设置密码')" :placeholderText="$t('密码（6-12个字符）')" v-model="password" typeText="password" />
|
<ExInput :label="$t('确认密码')" :placeholderText="$t('请确认密码')" v-model="repassword" typeText="password" />
|
<ExInput :label="$t('邀请码(选填)')" :placeholderText="$t('请输入邀请码')" v-model="invitCode" :clearBtn="false" />
|
<div class="protocol textColor">
|
<i @click="agreeProt">
|
<img v-show="agree" src="../../assets/image/login/prot2.png" alt="" />
|
<img v-show="!agree" src="../../assets/image/login/prot1.png" alt="" />
|
</i>
|
{{ $t('我已阅读并同意') }}<span class="colorMain" @click="$router.push('/TermsOfService?serviceTerm=1')">{{ $t('服务条款')
|
}}</span>
|
</div>
|
<div class="btn btnMain" @click="register">{{ $t('注册') }}</div>
|
<div class="noTips textColor">{{ $t('已有账号') }}<span class="colorMain" @click="$router.push('/login')">
|
{{ $t('去登录') }}</span>
|
</div>
|
<nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)"></nationality-list>
|
|
<Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail"
|
@close="show = false;" sliderText='' :successText="$t('验证通过!')" :failText="$t('验证失败,请重试')" />
|
|
<div>{{ msg }}</div>
|
</div>
|
</template>
|
|
<script>
|
import { Popup } from "vant";
|
import ExInput from "@/components/ex-input";
|
import Step from "./step.vue";
|
import Axios from "@/API/login.js";
|
import { mapActions, mapGetters } from 'vuex';
|
import { GET_USERINFO } from '@/store/const.store';
|
import nationalityList from '../authentication/components/nationalityList.vue'
|
import Vcode from "vue-puzzle-vcode";
|
import img1 from "../../assets/image/slider/1.png";
|
import img2 from "../../assets/image/slider/2.png";
|
import { getStorage } from '@/utils/utis'
|
export default {
|
props: {
|
|
},
|
components: {
|
[Popup.name]: Popup,
|
ExInput,
|
Step,
|
nationalityList,
|
Vcode
|
},
|
data() {
|
return {
|
show: false,
|
msg: '',
|
type: 3,// 1手机 2 邮箱 3账号
|
agree: false,
|
username: '',
|
password: "",
|
repassword: '',
|
invitCode: '',//邀请码
|
activeIndex: 1,
|
typeText: "password",
|
isArea: false,
|
dialCode: 0, //电话号前缀
|
icon: '',
|
img1,
|
img2,
|
}
|
},
|
mounted() {
|
let usercode = getStorage('usercode')
|
if (usercode) {
|
this.invitCode = usercode;
|
}
|
},
|
computed: {
|
...mapGetters({
|
theme: 'home/theme'
|
}),
|
},
|
methods: {
|
...mapActions('user', [GET_USERINFO]),
|
getRegType(activeIndex, bFlag) {
|
switch (activeIndex) {
|
case 0:
|
return bFlag ? this.$t('账号') : this.$t('请输入账号');
|
case 1:
|
return bFlag ? this.$t('邮箱') : this.$t('请输入邮箱');
|
case 2:
|
return bFlag ? this.$t('手机号') : this.$t('请输入手机号');
|
}
|
},
|
onClose() {
|
console.log('onClose')
|
},
|
onSuccess() {
|
console.log('onSuccess')
|
this.registerApi();
|
this.show = false;
|
},
|
onFail() {
|
this.msg = ''
|
},
|
onRefresh() {
|
this.msg = ''
|
},
|
onSelectArea() {
|
this.openBtn();
|
},
|
//打开国家列表底部弹窗
|
openBtn() {
|
this.$refs.controlChild.open();
|
},
|
//获取到当前选中国家的code值
|
getName(params) {
|
this.icon = params[1];
|
this.dialCode = params[2];
|
},
|
agreeProt() {
|
this.agree = !this.agree
|
},
|
register() {
|
// if (this.activeIndex == 0){
|
// let match = this.username.search(/@/);
|
// if (this.username == '' || match == -1) {
|
// this.$toast(this.$t('请输入正确的邮箱地址'));
|
// return
|
// }
|
// }else{
|
// if (this.username == '' ) {
|
// this.$toast(this.$t('请输入手机号'));
|
// return
|
// }
|
// }
|
switch (this.activeIndex) {
|
case 0:
|
{
|
if (this.username == '') {
|
this.$toast(this.$t('请输入账号'));
|
return;
|
}
|
if (this.username.length < 6 || this.username.length > 30) {
|
this.$toast(this.$t('账号长度必须6-30位'));
|
return;
|
}
|
break;
|
}
|
case 1:
|
{
|
let match = this.username.search(/@/);
|
if (this.username == '' || match == -1) {
|
this.$toast(this.$t('请输入正确的邮箱地址'));
|
return;
|
}
|
break;
|
}
|
case 2:
|
{
|
if (this.username == '') {
|
this.$toast(this.$t('请输入手机号'));
|
return;
|
}
|
break;
|
}
|
}
|
if (this.password == '') {
|
this.$toast(this.$t('请输入密码'));
|
return
|
}
|
if (this.password.length < 6) {
|
this.$toast(this.$t('密码（6-12个字符）'));
|
return
|
}
|
if (this.repassword !== this.password) {
|
this.$toast(this.$t('密码不一致'));
|
return
|
}
|
if (!this.agree) {
|
this.$toast(this.$t('请同意服务条款'));
|
return
|
}
|
this.show = true
|
},
|
changeIndex(index) {
|
this.activeIndex = index;
|
switch (index) {
|
case 0:
|
case 1: {
|
this.isArea = false;
|
break;
|
}
|
case 2: {
|
this.isArea = true;
|
break;
|
}
|
}
|
},
|
registerApi() {
|
switch (this.activeIndex) {
|
case 0:
|
{
|
this.type = 3;
|
break;
|
}
|
case 1:
|
{
|
this.type = 2;
|
break;
|
}
|
case 2:
|
{
|
this.type = 1;
|
break;
|
}
|
}
|
Axios.registerUser({
|
username: (this.activeIndex == 0 || this.activeIndex == 1) ? this.username : `${this.username}`,
|
password: this.password,
|
re_password: this.repassword,
|
type: this.type,
|
usercode: this.invitCode,
|
}).then((res) => {
|
this.GET_USERINFO(res.data)
|
if (this.activeIndex == 0||this.activeIndex == 2) {
|
this.$router.push('/setFond')
|
}
|
else {
|
this.$router.push({ name: 'verify', query: { type: this.activeIndex, account: this.activeIndex == 1 ? this.username : `${this.username}` } })
|
}
|
}).catch((error) => {
|
if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
|
else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.register {
|
width: 100%;
|
box-sizing: border-box;
|
padding: 32px;
|
font-size: 26px;
|
}
|
|
.top {
|
padding-left: 18px;
|
padding-top: 18px;
|
|
img {
|
width: 37px;
|
height: 37px;
|
}
|
}
|
|
.title {
|
font-weight: 700;
|
font-size: 52px;
|
margin-top: 54px;
|
margin-bottom: 66px;
|
}
|
|
.re-tab {
|
margin-bottom: 44px;
|
|
div {
|
padding: 0 36px;
|
height: 68px;
|
line-height: 68px;
|
text-align: center;
|
border-radius: 8px;
|
margin-right: 20px;
|
}
|
|
.active {
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
}
|
|
.forget {
|
color: #1D91FF;
|
font-size: 24px;
|
line-height: 28px;
|
}
|
|
.btn {
|
color: #fff;
|
height: 88px;
|
line-height: 88px;
|
text-align: center;
|
font-size: 32px;
|
margin-top: 40px;
|
border-radius: 10px;
|
}
|
|
.noTips {
|
margin-top: 48px;
|
}
|
|
.protocol {
|
display: flex;
|
align-items: center;
|
height: 30px;
|
|
i {
|
width: 30px;
|
height: 30px;
|
margin-right: 18px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
