<template>
|
<div class="register">
|
<div class="top" @click="$router.go(-1)"><img :src="require(`../../assets/theme/${theme}/image/Union.png`)" alt="">
|
</div>
|
<div class="title textColor">{{ $t('试用账号申请') }}</div>
|
<ExInput :label="$t('账号')" :placeholderText="$t('请输入账号')" v-model="username" />
|
<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="usercode" />
|
<p><span @click="$router.push('/customerService')" style="text-decoration: underline" class="colorMain">{{
|
$t('点此联系客服') }}</span>,{{ $t('取得试用码') }}</p>
|
<div class="btn btnMain activeBKClick" @click="register">{{ $t('确认') }}</div>
|
</div>
|
</template>
|
|
<script>
|
import { Popup } from "vant";
|
import ExInput from "@/components/ex-input";
|
import Axios from "@/API/login.js";
|
import { mapActions, mapGetters } from 'vuex';
|
import { GET_USERINFO } from '@/store/const.store';
|
export default {
|
components: {
|
[Popup.name]: Popup,
|
ExInput,
|
},
|
data() {
|
return {
|
username: '',
|
password: "",
|
repassword: '',
|
usercode: ''
|
}
|
},
|
computed: {
|
...mapGetters({
|
theme: 'home/theme'
|
}),
|
},
|
mounted() {
|
},
|
methods: {
|
...mapActions('user', [GET_USERINFO]),
|
register() {
|
if (this.username == '') {
|
this.$toast(this.$t('请输入账号'));
|
return;
|
}
|
if (this.username.length < 6 || this.username.length > 30) {
|
this.$toast(this.$t('账号长度必须6-30位'));
|
return;
|
}
|
|
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.usercode == '') {
|
this.$toast(this.$t('请输入试用码'));
|
return
|
}
|
|
//this.show = true
|
this.testLogin();
|
},
|
testLogin() {
|
Axios.registerTest({
|
username: this.username,
|
password: this.password,
|
re_password: this.repassword,
|
usercode: this.usercode,
|
}).then((res) => {
|
this.GET_USERINFO(res.data)
|
this.$router.push('/home')
|
}).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>
|
.activeBKClick {
|
&:active {
|
@include themify() {
|
background: themed("color_main");
|
}
|
|
opacity: 0.5;
|
}
|
}
|
|
.activeClick {
|
&:active {
|
background: #fff;
|
opacity: 0.5;
|
}
|
}
|
|
.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>
|
