<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('hj27') }}</label>
|
<el-input v-model="registerForm.phone" placeholder=""></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 {
|
registerForm: {
|
phone: "",
|
userPwd: "",
|
confirmPwd: "",
|
inviteCode: "",
|
code: '6666'
|
},
|
rules: {
|
phone: [
|
{ required: true, message: this.$t('请输入'), trigger: "blur" }
|
],
|
userPwd: [
|
{ 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;
|
}
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.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: #f5f5f5;
|
}
|
|
.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: #c8d405;
|
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;
|
background-color: #c8d405;
|
border-color: #c8d405;
|
font-size: 16px;
|
border-radius: 25px;
|
margin-top: 10px;
|
|
&:hover,
|
&:focus {
|
background-color: #b8c205;
|
border-color: #b8c205;
|
}
|
}
|
|
.register-options {
|
text-align: center;
|
margin-top: 15px;
|
font-size: 14px;
|
color: #606266;
|
|
.login-link {
|
color: #c8d405;
|
margin-left: 5px;
|
text-decoration: none;
|
|
&:hover {
|
text-decoration: underline;
|
}
|
}
|
}
|
}
|
</style>
|
