register.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <div class="register">
  3. <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
  4. <h3 class="title">RuoYi-Vue-Plus后台管理系统</h3>
  5. <el-form-item prop="username">
  6. <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
  7. <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
  8. </el-input>
  9. </el-form-item>
  10. <el-form-item prop="password">
  11. <el-input
  12. v-model="registerForm.password"
  13. type="password"
  14. auto-complete="off"
  15. placeholder="密码"
  16. @keyup.enter.native="handleRegister"
  17. >
  18. <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
  19. </el-input>
  20. </el-form-item>
  21. <el-form-item prop="confirmPassword">
  22. <el-input
  23. v-model="registerForm.confirmPassword"
  24. type="password"
  25. auto-complete="off"
  26. placeholder="确认密码"
  27. @keyup.enter.native="handleRegister"
  28. >
  29. <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
  30. </el-input>
  31. </el-form-item>
  32. <el-form-item prop="code" v-if="captchaEnabled">
  33. <el-input
  34. v-model="registerForm.code"
  35. auto-complete="off"
  36. placeholder="验证码"
  37. style="width: 63%"
  38. @keyup.enter.native="handleRegister"
  39. >
  40. <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
  41. </el-input>
  42. <div class="register-code">
  43. <img :src="codeUrl" @click="getCode" class="register-code-img"/>
  44. </div>
  45. </el-form-item>
  46. <el-form-item style="width:100%;">
  47. <el-button
  48. :loading="loading"
  49. size="medium"
  50. type="primary"
  51. style="width:100%;"
  52. @click.native.prevent="handleRegister"
  53. >
  54. <span v-if="!loading">注 册</span>
  55. <span v-else>注 册 中...</span>
  56. </el-button>
  57. <div style="float: right;">
  58. <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
  59. </div>
  60. </el-form-item>
  61. </el-form>
  62. <!-- 底部 -->
  63. <div class="el-register-footer">
  64. <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
  65. </div>
  66. </div>
  67. </template>
  68. <script>
  69. import { getCodeImg, register } from "@/api/login";
  70. export default {
  71. name: "Register",
  72. data() {
  73. const equalToPassword = (rule, value, callback) => {
  74. if (this.registerForm.password !== value) {
  75. callback(new Error("两次输入的密码不一致"));
  76. } else {
  77. callback();
  78. }
  79. };
  80. return {
  81. codeUrl: "",
  82. registerForm: {
  83. username: "",
  84. password: "",
  85. confirmPassword: "",
  86. code: "",
  87. uuid: "",
  88. user_type: "sys_user"
  89. },
  90. registerRules: {
  91. username: [
  92. { required: true, trigger: "blur", message: "请输入您的账号" },
  93. { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
  94. ],
  95. password: [
  96. { required: true, trigger: "blur", message: "请输入您的密码" },
  97. { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
  98. ],
  99. confirmPassword: [
  100. { required: true, trigger: "blur", message: "请再次输入您的密码" },
  101. { required: true, validator: equalToPassword, trigger: "blur" }
  102. ],
  103. code: [{ required: true, trigger: "change", message: "请输入验证码" }]
  104. },
  105. loading: false,
  106. captchaEnabled: true
  107. };
  108. },
  109. created() {
  110. this.getCode();
  111. },
  112. methods: {
  113. getCode() {
  114. getCodeImg().then(res => {
  115. this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;
  116. if (this.captchaEnabled) {
  117. this.codeUrl = "data:image/gif;base64," + res.data.img;
  118. this.registerForm.uuid = res.data.uuid;
  119. }
  120. });
  121. },
  122. handleRegister() {
  123. this.$refs.registerForm.validate(valid => {
  124. if (valid) {
  125. this.loading = true;
  126. let registerForm = this.registerForm;
  127. registerForm.userType = "sys_user"
  128. register(registerForm).then(res => {
  129. const username = this.registerForm.username;
  130. this.$alert("<font color='red'>恭喜你,您的账号 " + username + " 注册成功!</font>", '系统提示', {
  131. dangerouslyUseHTMLString: true,
  132. type: 'success'
  133. }).then(() => {
  134. this.$router.push("/login");
  135. }).catch(() => {});
  136. }).catch(() => {
  137. this.loading = false;
  138. if (this.captchaEnabled) {
  139. this.getCode();
  140. }
  141. })
  142. }
  143. });
  144. }
  145. }
  146. };
  147. </script>
  148. <style rel="stylesheet/scss" lang="scss">
  149. .register {
  150. display: flex;
  151. justify-content: center;
  152. align-items: center;
  153. height: 100%;
  154. background-image: url("../assets/images/login-background.jpg");
  155. background-size: cover;
  156. }
  157. .title {
  158. margin: 0px auto 30px auto;
  159. text-align: center;
  160. color: #707070;
  161. }
  162. .register-form {
  163. border-radius: 6px;
  164. background: #ffffff;
  165. width: 400px;
  166. padding: 25px 25px 5px 25px;
  167. .el-input {
  168. height: 38px;
  169. input {
  170. height: 38px;
  171. }
  172. }
  173. .input-icon {
  174. height: 39px;
  175. width: 14px;
  176. margin-left: 2px;
  177. }
  178. }
  179. .register-tip {
  180. font-size: 13px;
  181. text-align: center;
  182. color: #bfbfbf;
  183. }
  184. .register-code {
  185. width: 33%;
  186. height: 38px;
  187. float: right;
  188. img {
  189. cursor: pointer;
  190. vertical-align: middle;
  191. }
  192. }
  193. .el-register-footer {
  194. height: 40px;
  195. line-height: 40px;
  196. position: fixed;
  197. bottom: 0;
  198. width: 100%;
  199. text-align: center;
  200. color: #fff;
  201. font-family: Arial;
  202. font-size: 12px;
  203. letter-spacing: 1px;
  204. }
  205. .register-code-img {
  206. height: 38px;
  207. }
  208. </style>