login.ftl 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4. <title></title>
  5. <#include "/include/head-file.ftl"/>
  6. <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/css/login.css">
  7. <!--
  8. <!--#include virtual="include/head-file.ftl" -->
  9. <link rel="stylesheet" href="../../../static/ms-admin/4.7.0/css/login.css">
  10. -->
  11. </head>
  12. <body>
  13. <div id="login" class="login">
  14. <el-container class="ms-admin-login-container">
  15. <el-main class="ms-admin-login-main">
  16. <div class="ms-admin-login-warp">
  17. <img :src="ms.base+'/static/ms-admin/4.7.0/images/login-slogn.png'">
  18. <el-form :model="loginForm" status-icon :rules="loginFormRule" ref="loginForm" label-width="100px" class="ms-admin-login-form">
  19. <h1>
  20. <span>账户登录 / </span>User login</h1>
  21. <el-form-item prop="name" class="ms-admin-form-item">
  22. <el-input type="text" placeholder='用户名' v-model="loginForm.managerName" autocomplete="off"></el-input>
  23. </el-form-item>
  24. <el-form-item prop="pass" class="ms-admin-form-item">
  25. <el-input type="password" placeholder='密码' v-model="loginForm.managerPassword" autocomplete="off"></el-input>
  26. </el-form-item>
  27. <el-form-item prop="code" class="ms-admin-form-item ms-admin-form-item-code">
  28. <el-input type="text" placeholder='验证码' v-model="loginForm.rand_code" autocomplete="off"></el-input>
  29. <img :src="verifCode" class="code-img" @click="code" />
  30. <p>
  31. <span>看不清?</span>
  32. <span @click="code">换一张</span>
  33. </p>
  34. </el-form-item>
  35. <el-form-item class="ms-admin-form-item ms-admin-form-item-checkout">
  36. <el-checkbox v-model="rememberPass">记住密码</el-checkbox>
  37. </el-form-item>
  38. <el-form-item class="ms-admin-form-item">
  39. <el-button type="primary" @click="checkLogin" class="ms-admin-login-btn">登录</el-button>
  40. </el-form-item>
  41. </el-form>
  42. </div>
  43. </el-main>
  44. </el-container>
  45. </div>
  46. </body>
  47. </html>
  48. <script>
  49. var loginVue = new Vue({
  50. el: '#login',
  51. data: {
  52. loginForm: {
  53. managerName: '',
  54. managerPassword: "",
  55. rand_code: ''
  56. },
  57. verifCode: ms.manager + "/code?t=" + new Date().getTime(),
  58. rememberPass: '',
  59. loginFormRule: {
  60. managerName: [{
  61. required: true,
  62. message: '请输入用户名',
  63. trigger: 'blur'
  64. },
  65. {
  66. min: 3,
  67. max: 6,
  68. message: '长度在 3 到 5 个字符',
  69. trigger: 'blur'
  70. }
  71. ],
  72. managerPassword: [{
  73. required: true,
  74. message: '请输入密码',
  75. trigger: 'blur'
  76. },
  77. {
  78. min: 6,
  79. max: 20,
  80. message: '长度在 6 到 20 个字符',
  81. trigger: 'blur'
  82. }
  83. ],
  84. rand_code: [{
  85. required: true,
  86. message: '请填写验证码',
  87. trigger: 'blur'
  88. },
  89. {
  90. min: 1,
  91. max: 4,
  92. message: '长度在1 到 4 个字符',
  93. trigger: 'blur'
  94. }
  95. ],
  96. }
  97. },
  98. methods: {
  99. // 登录
  100. checkLogin: function() {
  101. var that = this;
  102. ms.http.post(ms.manager + "/checkLogin.do", that.loginForm).then(function(data) {
  103. if(data.result) {
  104. that.$notify({
  105. title: '成功',
  106. message: '登录成功',
  107. type: 'success'
  108. });
  109. location.href = ms.manager + "/index.do";
  110. } else {
  111. that.$notify({
  112. title: '失败',
  113. message: data.resultMsg,
  114. type: 'warning'
  115. });
  116. }
  117. }, (err) => {
  118. that.$message.error(data.resultMsg);
  119. })
  120. },
  121. code: function() {
  122. this.verifCode = ms.web + "/code?t=" + new Date().getTime();
  123. },
  124. },
  125. mounted: function() {
  126. this.verifCode = ms.web + "/code?t=" + new Date().getTime()
  127. }
  128. })
  129. </script>