<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>
|
|
<ExInput :placeholderText="$t('请输入姓名')" v-model="form.username" />
|
<ExInput :placeholderText="$t('请输入邮箱地址')" v-model="form.email" />
|
<div class="code-box">
|
<div
|
class="btn btnMain code-but"
|
:class="`${codeButTexst === '发送验证码' ? '' : ' S-but'}`"
|
@click="sendCode"
|
>
|
{{ $t(codeButTexst) }}{{ codeButTexst === "发送验证码" ? "" : " S " }}
|
</div>
|
|
<ExInput :placeholderText="$t('请输入邮箱验证码')" v-model="form.code" />
|
</div>
|
<ExInput :placeholderText="$t('请输入手机号码')" v-model="form.phone" />
|
<ExInput
|
:placeholderText="$t('密码（6-12个字符）')"
|
v-model="form.password"
|
typeText="password"
|
/>
|
<ExInput
|
:placeholderText="$t('请确认密码')"
|
v-model="form.re_password"
|
typeText="password"
|
/>
|
<ExInput
|
:placeholderText="$t('请输入邀请码')"
|
v-model="form.usercode"
|
: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 AxiosuserCenter from "@/API/userCenter.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";
|
// /sendVerifyCode
|
export default {
|
props: {},
|
components: {
|
[Popup.name]: Popup,
|
ExInput,
|
Step,
|
nationalityList,
|
Vcode,
|
},
|
data() {
|
return {
|
// 发送验证码倒计时定时器
|
tiem: null,
|
codeButTexst: "发送验证码",
|
form: {
|
phone: "",
|
email: "",
|
code: "",
|
username: "",
|
password: "",
|
re_password: "",
|
usercode: "",
|
},
|
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,
|
};
|
},
|
beforeDestroy() {
|
if (this.tiem) {
|
clearInterval(this.tiem);
|
this.tiem = null;
|
}
|
},
|
|
mounted() {
|
let usercode = getStorage("usercode");
|
if (usercode) {
|
this.invitCode = usercode;
|
}
|
},
|
computed: {
|
...mapGetters({
|
theme: "home/theme",
|
}),
|
},
|
methods: {
|
async bindEmail() {
|
await AxiosuserCenter.bindEmail({
|
email: this.form.email,
|
verifcode: this.form.code,
|
});
|
return true;
|
},
|
...mapActions("user", [GET_USERINFO]),
|
async sendCode() {
|
// codeButTexst === '发送验证码' ? '' : ' S-but'
|
if (this.codeButTexst !== "发送验证码") {
|
return;
|
}
|
if (this.form.email) {
|
await Axios.sendVerifyCode({
|
target: this.form.email,
|
});
|
this.codeButTexst = 60;
|
this.tiem = setInterval(() => {
|
this.codeButTexst = this.codeButTexst - 1;
|
if (this.codeButTexst === 0) {
|
this.codeButTexst = "发送验证码";
|
clearInterval(this.tiem);
|
}
|
}, 1000);
|
}
|
},
|
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");
|
},
|
async onSuccess() {
|
this.show = false;
|
// this.registerApi();
|
AxiosuserCenter.invitationCode({
|
email: this.form.email,
|
verificationCode: this.form.code,
|
code: this.form.usercode,
|
phone: this.form.phone,
|
})
|
.then(() => {
|
this.registerApi();
|
})
|
.catch((err) => {
|
// this.$toast(this.$t(res.msg));
|
});
|
},
|
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.form.username == "") {
|
return this.$toast(this.$t("请输入姓名"));
|
}
|
let match = this.form.email.search(/@/);
|
if (this.form.email == "" || match == -1) {
|
return this.$toast(this.$t("请输入正确的邮箱地址"));
|
}
|
if (this.form.phone == "") {
|
this.$toast(this.$t("请输入手机号"));
|
return;
|
}
|
if (this.form.password == "") {
|
this.$toast(this.$t("请输入密码"));
|
return;
|
}
|
if (this.form.password !== this.form.re_password) {
|
this.$toast(this.$t("密码不一致"));
|
return;
|
}
|
if (this.form.usercode == "") {
|
this.$toast(this.$t("请输入邀请码"));
|
return;
|
}
|
if (!this.agree) {
|
this.$toast(this.$t("请同意服务条款"));
|
return;
|
}
|
this.show = true;
|
},
|
|
async registerApi() {
|
this.$store.state.user.userInfo.token = undefined;
|
console.log({
|
...this.form,
|
type: 0,
|
em: this.form.email,
|
});
|
Axios.registerUser({
|
...this.form,
|
type: 4,
|
em: this.form.email,
|
})
|
.then((res) => {
|
console.log(res, "=======");
|
// this.GET_USERINFO(res.data);
|
// this.bindEmail(res.data.token);
|
this.$toast(this.$t("注册成功"));
|
setTimeout(() => {
|
this.$router.push("login");
|
}, 1000);
|
})
|
.catch((error) => {
|
this.codeButTexst = "发送验证码";
|
clearInterval(this.tiem);
|
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%;
|
}
|
}
|
}
|
|
.code-box {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
// justify-content: space-between;
|
|
.code-but {
|
width: 200px;
|
font-size: 23px;
|
text-align: center;
|
background-color: #6ff;
|
margin-right: 20px;
|
margin-top: 0;
|
}
|
}
|
::v-deep .inputCom {
|
width: 100%;
|
padding-bottom: 10px;
|
}
|
.S-but {
|
// background-color:;
|
opacity: 0.5 !important;
|
}
|
</style>
|
