user username to login

src/api/login.js

@@ -1,11 +1,11 @@
 import fetch from '@/utils/fetch'
 
-export function login(email, password) {
+export function login(username, password) {
   return fetch({
     url: '/user/login',
     method: 'post',
     data: {
-      email,
+      username,
       password
     }
   })

src/store/modules/user.js

@@ -27,9 +27,9 @@ const user = {
   actions: {
     // 登录
     Login({ commit }, userInfo) {
-      const email = userInfo.email.trim()
+      const username = userInfo.username.trim()
       return new Promise((resolve, reject) => {
-        login(email, userInfo.password).then(response => {
+        login(username, userInfo.password).then(response => {
           const data = response.data
           setToken(data.token)
           commit('SET_TOKEN', data.token)

src/utils/validate.js

@@ -2,10 +2,9 @@
  * Created by jiachenpan on 16/11/18.
  */
 
-/* 是否是公司邮箱*/
-export function isWscnEmail(str) {
-  const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i
-  return reg.test(str.trim())
+export function isvalidUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
 }
 
 /* 合法uri*/

src/views/login/index.vue

@@ -3,11 +3,11 @@
     <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
       class="card-box login-form">
       <h3 class="title">系统登录</h3>
-      <el-form-item prop="email">
-        <span class="svg-container">
-          <icon-svg icon-class="email"></icon-svg>
+       <el-form-item prop="username">
+        <span class="svg-container svg-container_login">
+          <icon-svg icon-class="yonghuming" />
         </span>
-        <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
+        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="邮箱" />
       </el-form-item>
       <el-form-item prop="password">
         <span class="svg-container">
@@ -21,21 +21,21 @@
           登录
         </el-button>
       </el-form-item>
-      <div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
-      <div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
+      <div class='tips'>账号:admin 密码随便填</div>
+      <div class='tips'>账号:editor  密码随便填</div>
     </el-form>
   </div>
 </template>
 
 <script>
-import { isWscnEmail } from '@/utils/validate'
+import { isvalidUsername } from '@/utils/validate'
 
 export default {
   name: 'login',
   data() {
-    const validateEmail = (rule, value, callback) => {
-      if (!isWscnEmail(value)) {
-        callback(new Error('请输入正确的合法邮箱'))
+    const validateUsername = (rule, value, callback) => {
+      if (!isvalidUsername(value)) {
+        callback(new Error('请输入正确的用户名'))
       } else {
         callback()
       }
@@ -49,16 +49,12 @@ export default {
     }
     return {
       loginForm: {
-        email: 'admin@wallstreetcn.com',
+        username: 'admin',
         password: '111111'
       },
       loginRules: {
-        email: [
-                { required: true, trigger: 'blur', validator: validateEmail }
-        ],
-        password: [
-                { required: true, trigger: 'blur', validator: validatePass }
-        ]
+        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+        password: [{ required: true, trigger: 'blur', validator: validatePass }]
       },
       loading: false
     }
@@ -86,16 +82,14 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
   @import "src/styles/mixin.scss";
-    .tips {
-      font-size: 14px;
-      color: #fff;
-      margin-bottom: 5px;
-    }
+  $bg:#2d3a4b;
+  $dark_gray:#889aa4;
+  $light_gray:#eee;
 
   .login-container {
     @include relative;
     height: 100vh;
-      background-color: #2d3a4b;
+    background-color: $bg;
     input:-webkit-autofill {
       -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
       -webkit-text-fill-color: #fff !important;
@@ -106,7 +100,7 @@ export default {
       -webkit-appearance: none;
       border-radius: 0px;
       padding: 12px 5px 12px 15px;
-        color: #eeeeee;
+      color: $light_gray;
       height: 47px;
     }
     .el-input {
@@ -114,14 +108,25 @@ export default {
       height: 47px;
       width: 85%;
     }
+    .tips {
+      font-size: 14px;
+      color: #fff;
+      margin-bottom: 10px;
+    }
     .svg-container {
       padding: 6px 5px 6px 15px;
-        color: #889aa4;
+      color: $dark_gray;
+      vertical-align: middle;
+      width: 30px;
+      display: inline-block;
+      &_login {
+        font-size: 20px;
+      }
     }
     .title {
       font-size: 26px;
       font-weight: 400;
-        color: #eeeeee;
+      color: $light_gray;
       margin: 0px auto 40px auto;
       text-align: center;
       font-weight: bold;
@@ -140,8 +145,18 @@ export default {
       border-radius: 5px;
       color: #454545;
     }
-      .forget-pwd {
-        color: #fff;
+    .show-pwd {
+      position: absolute;
+      right: 10px;
+      top: 7px;
+      font-size: 16px;
+      color: $dark_gray;
+      cursor: pointer;
+    }
+    .thirdparty-button{
+      position: absolute;
+      right: 35px;
+      bottom: 28px;
     }
   }
 </style>