index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <template>
  2. <div id="userLayout">
  3. <div class="login_panle">
  4. <div class="login_panle_form">
  5. <div class="login_panle_form_title">
  6. <img class="login_panle_form_title_logo" :src="$GIN_VUE_ADMIN.appLogo" alt=""><p class="login_panle_form_title_p">{{ $GIN_VUE_ADMIN.appName }}</p>
  7. </div>
  8. <el-form
  9. ref="loginForm"
  10. :model="loginForm"
  11. :rules="rules"
  12. @keyup.enter="submitForm"
  13. >
  14. <el-form-item prop="username">
  15. <el-input v-model="loginForm.username" placeholder="请输入用户名">
  16. <template #suffix>
  17. <i class="el-input__icon el-icon-user" />
  18. </template>
  19. </el-input>
  20. </el-form-item>
  21. <el-form-item prop="password">
  22. <el-input
  23. v-model="loginForm.password"
  24. :type="lock === 'lock' ? 'password' : 'text'"
  25. placeholder="请输入密码"
  26. >
  27. <template #suffix>
  28. <i
  29. :class="'el-input__icon el-icon-' + lock"
  30. @click="changeLock"
  31. />
  32. </template>
  33. </el-input>
  34. </el-form-item>
  35. <el-form-item style="position: relative">
  36. <el-input
  37. v-model="loginForm.captcha"
  38. name="logVerify"
  39. placeholder="请输入验证码"
  40. style="width: 60%"
  41. />
  42. <div class="vPic">
  43. <img
  44. v-if="picPath"
  45. :src="picPath"
  46. alt="请输入验证码"
  47. @click="loginVerify()"
  48. >
  49. </div>
  50. </el-form-item>
  51. <el-form-item>
  52. <el-button
  53. type="primary"
  54. style="width: 46%"
  55. @click="checkInit"
  56. >前往初始化</el-button>
  57. <el-button
  58. type="primary"
  59. style="width: 46%;margin-left:8%"
  60. @click="submitForm"
  61. >登 录</el-button>
  62. </el-form-item>
  63. </el-form>
  64. </div>
  65. <div class="login_panle_right" />
  66. <div class="login_panle_foot">
  67. <div class="links">
  68. <a href="http://doc.henrongyi.top/"><img src="@/assets/docs.png" class="link-icon"></a>
  69. <a href="https://www.yuque.com/flipped-aurora/"><img src="@/assets/yuque.png" class="link-icon"></a>
  70. <a href="https://github.com/flipped-aurora/gin-vue-admin"><img src="@/assets/github.png" class="link-icon"></a>
  71. <a href="https://space.bilibili.com/322210472"><img src="@/assets/video.png" class="link-icon"></a>
  72. </div>
  73. <div class="copyright">Copyright &copy; {{ curYear }} 💖 flipped-aurora</div>
  74. </div>
  75. </div>
  76. </div>
  77. </template>
  78. <script>
  79. import { mapActions } from 'vuex'
  80. import { captcha } from '@/api/user'
  81. import { checkDB } from '@/api/initdb'
  82. export default {
  83. name: 'Login',
  84. data() {
  85. const checkUsername = (rule, value, callback) => {
  86. if (value.length < 5) {
  87. return callback(new Error('请输入正确的用户名'))
  88. } else {
  89. callback()
  90. }
  91. }
  92. const checkPassword = (rule, value, callback) => {
  93. if (value.length < 6) {
  94. return callback(new Error('请输入正确的密码'))
  95. } else {
  96. callback()
  97. }
  98. }
  99. return {
  100. curYear: 0,
  101. lock: 'lock',
  102. loginForm: {
  103. username: 'admin',
  104. password: '123456',
  105. captcha: '',
  106. captchaId: ''
  107. },
  108. rules: {
  109. username: [{ validator: checkUsername, trigger: 'blur' }],
  110. password: [{ validator: checkPassword, trigger: 'blur' }]
  111. },
  112. logVerify: '',
  113. picPath: ''
  114. }
  115. },
  116. created() {
  117. this.loginVerify()
  118. this.curYear = new Date().getFullYear()
  119. },
  120. methods: {
  121. ...mapActions('user', ['LoginIn']),
  122. async checkInit() {
  123. const res = await checkDB()
  124. if (res.code === 0) {
  125. if (res.data?.needInit) {
  126. this.$store.commit('user/NeedInit')
  127. this.$router.push({ name: 'Init' })
  128. } else {
  129. this.$message({
  130. type: 'info',
  131. message: '已配置数据库信息,无法初始化'
  132. })
  133. }
  134. }
  135. },
  136. async login() {
  137. return await this.LoginIn(this.loginForm)
  138. },
  139. async submitForm() {
  140. this.$refs.loginForm.validate(async(v) => {
  141. if (v) {
  142. const flag = await this.login()
  143. if (!flag) {
  144. this.loginVerify()
  145. }
  146. } else {
  147. this.$message({
  148. type: 'error',
  149. message: '请正确填写登录信息',
  150. showClose: true
  151. })
  152. this.loginVerify()
  153. return false
  154. }
  155. })
  156. },
  157. changeLock() {
  158. this.lock = this.lock === 'lock' ? 'unlock' : 'lock'
  159. },
  160. loginVerify() {
  161. captcha({}).then((ele) => {
  162. this.picPath = ele.data.picPath
  163. this.loginForm.captchaId = ele.data.captchaId
  164. })
  165. }
  166. }
  167. }
  168. </script>
  169. <style lang="scss" scoped>
  170. @import "@/style/newLogin.scss";
  171. </style>