|
|
@@ -0,0 +1,217 @@
|
|
|
+<template>
|
|
|
+ <div class="login">
|
|
|
+ <main class="login-container">
|
|
|
+ <div class="title">注册</div>
|
|
|
+ <el-form ref="loginForm" :model="form" :rules="rules" label-position="right">
|
|
|
+ <el-form-item prop="server_address" label="服务器地址">
|
|
|
+ <el-input v-model="form.server_address" placeholder="请输入服务器地址" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="user_name" label="用户名">
|
|
|
+ <el-input v-model="form.user_name" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password" label="密码">
|
|
|
+ <el-input v-model="form.password" type="password" show-password />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="user_type" label="用户类型">
|
|
|
+ <el-radio-group v-model="form.user_type">
|
|
|
+ <el-radio label="USER">机构用户</el-radio>
|
|
|
+ <el-radio label="ORG_MANAGER">机构管理员</el-radio>
|
|
|
+ <el-radio label="ADMIN">系统管理员</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="verification_code_image_text" class="verification-code" label="验证码">
|
|
|
+ <el-input v-model="form.verification_code_image_text" @keyup.enter.native="signIn" />
|
|
|
+ <el-image
|
|
|
+ v-if="image_content_base64.length > 0"
|
|
|
+ :src="`data:image/jpg;base64,${image_content_base64}`"
|
|
|
+ @click="updateVerificationCode"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button class="submit" type="primary" @click="signIn">登录</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div class="protocol">
|
|
|
+ <span>
|
|
|
+ <el-checkbox v-model="isAgree" /> 我已阅读并同意<span style="color: #4d78ff">《用户协议》</span>
|
|
|
+ </span>
|
|
|
+ <span style="color: #4d78ff">忘记密码？| <a>注册</a></span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import md5 from 'md5';
|
|
|
+import { GetVerificationCodeImage, GetLogo } from '@/api/app';
|
|
|
+import { setConfig } from '@/utils/auth';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'RegisterPage',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isAgree: true, // 是否同意用户协议
|
|
|
+ form: {
|
|
|
+ user_type: 'USER',
|
|
|
+ user_name: '',
|
|
|
+ password: '',
|
|
|
+ is_password_md5: 'true',
|
|
|
+ verification_code_image_id: '',
|
|
|
+ verification_code_image_text: '',
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ user_name: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入用户名',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入密码',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ verification_code_image_text: [{ required: true, trigger: 'blur', message: '验证码不能为空' }],
|
|
|
+ },
|
|
|
+ image_content_base64: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.updateVerificationCode();
|
|
|
+ this.getLogo();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ updateVerificationCode() {
|
|
|
+ GetVerificationCodeImage().then(({ image_id, image_content_base64: image }) => {
|
|
|
+ this.form.verification_code_image_id = image_id;
|
|
|
+ this.image_content_base64 = image;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ getLogo() {
|
|
|
+ GetLogo().then((res) => {
|
|
|
+ setConfig(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ signIn() {
|
|
|
+ this.$refs.loginForm.validate((valid) => {
|
|
|
+ if (!valid) return false;
|
|
|
+
|
|
|
+ let _form = { ...this.form, password: md5(this.form.password).toUpperCase() };
|
|
|
+ this.$store
|
|
|
+ .dispatch('user/login', _form)
|
|
|
+ .then(() => {
|
|
|
+ this.$router.push({ path: '/' });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.updateVerificationCode();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.login {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #2148c0 url('~@/assets/login/login-bg.png') no-repeat center center / cover;
|
|
|
+
|
|
|
+ &-container {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-top: -350px;
|
|
|
+ margin-left: -200px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin-bottom: 28px;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .el-form {
|
|
|
+ max-width: 400px;
|
|
|
+ padding: 24px 32px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16px;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ &__label {
|
|
|
+ margin-bottom: 4px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ &__inner {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .verification-code {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ label {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ width: calc(100% - 112px);
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-image {
|
|
|
+ height: 38px;
|
|
|
+ vertical-align: bottom;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .protocol {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item--small.el-form-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .not-tips {
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha