You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
udi-cpt-vue/src/views/register.vue

175 lines
4.1 KiB
Vue

<template>
<div class="register">
2 years ago
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form" label-width="100px" size="mini">
<h3 class="title">用户注册</h3>
<el-form-item prop="mobile">
<span slot="label">
<i class="el-icon-edit"></i>
手机号
</span>
<el-input v-model="registerForm.mobile" style="width: 63%"></el-input>
<el-input
v-model="registerForm.code"
auto-complete="off"
placeholder="验证码"
2 years ago
style="width: 23%"
@keyup.enter.native="handleRegister"
2 years ago
> <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
2 years ago
</el-form-item>
2 years ago
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
2 years ago
style="width:85%;"
@click.native.prevent="handleRegister"
>
<span v-if="!loading"> </span>
<span v-else> ...</span>
</el-button>
2 years ago
<div >
<router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-register-footer">
<span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
</div>
</div>
</template>
<script>
import { getCodeImg, register } from "@/api/login";
export default {
name: "Register",
data() {
2 years ago
return {
codeUrl: "",
registerForm: {
username: "",
password: "",
confirmPassword: "",
code: "",
uuid: "",
2 years ago
user_type: "user_register"
},
registerRules: {
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
},
loading: false,
captchaEnabled: true
};
},
created() {
this.getCode();
},
methods: {
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.data.img;
this.registerForm.uuid = res.data.uuid;
}
});
},
handleRegister() {
this.$refs.registerForm.validate(valid => {
if (valid) {
this.loading = true;
let registerForm = this.registerForm;
registerForm.userType = "sys_user"
register(registerForm).then(res => {
const username = this.registerForm.username;
this.$alert("<font color='red'>恭喜你,您的账号 " + username + " 注册成功!</font>", '系统提示', {
dangerouslyUseHTMLString: true,
type: 'success'
}).then(() => {
this.$router.push("/login");
}).catch(() => {});
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
})
}
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.register {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
2 years ago
width: 100%;
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
}
.register-form {
border-radius: 6px;
background: #ffffff;
2 years ago
width: 50%;
height: 100%;
padding: 0px 0px 0px 0px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.register-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.register-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-register-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.register-code-img {
height: 38px;
}
</style>