<template>
|
<div class="register-container page-w page-content">
|
<div class="register-left">
|
<div class="logo-container flex-center">
|
<img src="@/assets/images/logo.png" alt="Kuspit Pro" class="logo" />
|
</div>
|
<!-- <div class="slogan">
|
<h1>Purchase, Trading</h1>
|
<h2>All here</h2>
|
</div> -->
|
</div>
|
<div class="register-right">
|
<div class="register-form">
|
<h2>{{ $t("hj15") }}</h2>
|
<el-form :model="registerForm" :rules="rules" ref="registerForm">
|
|
<el-form-item prop="phone">
|
<label>{{ $t("hj16") }}</label>
|
<el-input v-model="registerForm.phone" placeholder=""></el-input>
|
</el-form-item>
|
|
<!-- <el-form-item prop="code">
|
<label>{{ $t("hj25") }}</label>
|
<el-input v-model="registerForm.code" placeholder="">
|
<el-button slot="append" :loading="djs > 0" @click="getYzm">
|
{{ djs > 0 ? djs : $t('获取验证码') }}
|
</el-button>
|
</el-input>
|
</el-form-item> -->
|
|
<el-form-item prop="userPwd">
|
<label>{{ $t("Password") }}</label>
|
<el-input v-model="registerForm.userPwd" type="password" placeholder="" show-password></el-input>
|
</el-form-item>
|
<el-form-item prop="confirmPwd">
|
<label>{{ $t("Confirm Password") }}</label>
|
<el-input v-model="registerForm.confirmPwd" type="password" placeholder="" show-password></el-input>
|
</el-form-item>
|
<el-form-item prop="inviteCode">
|
<label>{{ $t("hj21") }}</label>
|
<el-input v-model="registerForm.inviteCode" placeholder=""></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" class="register-button" @click="submitForm('registerForm')" :loading="isloading">
|
{{ $t("hj15") }}
|
</el-button>
|
</el-form-item>
|
<div class="register-options">
|
<span>{{ $t("hj23") }}?</span>
|
<router-link to="/login" class="login-link">{{
|
$t("Go to login")
|
}}</router-link>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api.js";
|
export default {
|
name: "RegisterView",
|
data() {
|
// 确认密码验证
|
const validateConfirmPwd = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error(this.$t("请输入")));
|
} else if (value !== this.registerForm.userPwd) {
|
callback(new Error(this.$t("两次输入密码不一致")));
|
} else {
|
callback();
|
}
|
};
|
return {
|
djs: 0,
|
registerForm: {
|
phone: "",
|
userPwd: "",
|
confirmPwd: "",
|
inviteCode: "",
|
code: "6666",
|
},
|
rules: {
|
phone: [
|
{ required: true, message: this.$t("请输入"), trigger: "blur" },
|
],
|
userPwd: [
|
{ required: true, message: this.$t("请输入"), trigger: "blur" },
|
],
|
code: [
|
{ required: true, message: this.$t("请输入"), trigger: "blur" },
|
],
|
confirmPwd: [
|
{ required: true, validator: validateConfirmPwd, trigger: "blur" },
|
],
|
inviteCode: [
|
{ required: true, message: this.$t("请输入"), trigger: "blur" },
|
],
|
},
|
isloading: false,
|
};
|
},
|
methods: {
|
// 提交表单 注册
|
submitForm(formName) {
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
// 注册逻辑
|
this.isloading = true; // 显示加载状态
|
const params = {
|
phone: this.registerForm.phone,
|
userPwd: this.registerForm.userPwd,
|
yzmCode: this.registerForm.code,
|
agentCode: this.registerForm.inviteCode,
|
};
|
let data = await api.register(params);
|
|
if (data.status == 0) {
|
this.$message.success(this.$t("注册成功"));
|
this.$router.replace({ path: "/login" }); // 跳转到登录页
|
}
|
this.isloading = false; // 隐藏加载状态
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
async getYzm() {
|
let data = await api.getsendmail({ email: this.registerForm.phone });
|
if (data.status == 0) {
|
this.$message.success(data.msg);
|
this.djs = 60;
|
let time = setInterval(() => {
|
this.djs--;
|
if (this.djs <= 0) {
|
clearInterval(time);
|
}
|
}, 1000);
|
} else {
|
this.$message.warning(data.msg);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .el-input__inner {
|
background: none;
|
color: #fff;
|
border: none;
|
border-radius: 0;
|
border-bottom: #ccc solid 1px;
|
}
|
|
.register-container {
|
display: flex;
|
height: 100vh;
|
width: 100%;
|
// background-color: #fff;
|
}
|
|
.register-left {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
background-color: #333;
|
}
|
|
.logo-container {
|
margin-bottom: 40px;
|
}
|
|
.logo {
|
width: 200px;
|
}
|
|
.slogan {
|
margin: 0 auto;
|
|
h1 {
|
font-size: 36px;
|
color: #333;
|
margin-bottom: 10px;
|
font-weight: bold;
|
}
|
|
h2 {
|
font-size: 36px;
|
color: #287dff;
|
font-weight: bold;
|
}
|
}
|
|
.register-right {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.register-form {
|
width: 70%;
|
max-width: 400px;
|
|
h2 {
|
font-size: 24px;
|
margin-bottom: 30px;
|
font-weight: normal;
|
}
|
|
label {
|
display: block;
|
margin-bottom: 8px;
|
color: #606266;
|
}
|
|
.el-form-item {
|
margin-bottom: 25px;
|
}
|
|
.el-input {
|
width: 100%;
|
}
|
|
.register-button {
|
width: 100%;
|
height: 50px;
|
font-size: 16px;
|
border-radius: 25px;
|
margin-top: 10px;
|
}
|
|
.register-options {
|
text-align: center;
|
margin-top: 15px;
|
font-size: 14px;
|
color: #606266;
|
|
.login-link {
|
color: #287dff;
|
margin-left: 5px;
|
text-decoration: none;
|
|
&:hover {
|
text-decoration: underline;
|
}
|
}
|
}
|
}
|
</style>
|
