user username to login

src/api/login.js

 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

   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

  * 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

     <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">
           登录
         </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()
       }
     }
     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
     }
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-    @import "src/styles/mixin.scss";
+  @import "src/styles/mixin.scss";
+  $bg:#2d3a4b;
+  $dark_gray:#889aa4;
+  $light_gray:#eee;
+
+  .login-container {
+    @include relative;
+    height: 100vh;
+    background-color: $bg;
+    input:-webkit-autofill {
+      -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
+      -webkit-text-fill-color: #fff !important;
+    }
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+    }
+    .el-input {
+      display: inline-block;
+      height: 47px;
+      width: 85%;
+    }
     .tips {
       font-size: 14px;
       color: #fff;
-      margin-bottom: 5px;
+      margin-bottom: 10px;
     }
-
-    .login-container {
-      @include relative;
-      height: 100vh;
-      background-color: #2d3a4b;
-      input:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
-        -webkit-text-fill-color: #fff !important;
-      }
-      input {
-        background: transparent;
-        border: 0px;
-        -webkit-appearance: none;
-        border-radius: 0px;
-        padding: 12px 5px 12px 15px;
-        color: #eeeeee;
-        height: 47px;
-      }
-      .el-input {
-        display: inline-block;
-        height: 47px;
-        width: 85%;
-      }
-      .svg-container {
-        padding: 6px 5px 6px 15px;
-        color: #889aa4;
-      }
-      .title {
-        font-size: 26px;
-        font-weight: 400;
-        color: #eeeeee;
-        margin: 0px auto 40px auto;
-        text-align: center;
-        font-weight: bold;
-      }
-      .login-form {
-        position: absolute;
-        left: 0;
-        right: 0;
-        width: 400px;
-        padding: 35px 35px 15px 35px;
-        margin: 120px auto;
-      }
-      .el-form-item {
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        background: rgba(0, 0, 0, 0.1);
-        border-radius: 5px;
-        color: #454545;
-      }
-      .forget-pwd {
-        color: #fff;
+    .svg-container {
+      padding: 6px 5px 6px 15px;
+      color: $dark_gray;
+      vertical-align: middle;
+      width: 30px;
+      display: inline-block;
+      &_login {
+        font-size: 20px;
       }
     }
+    .title {
+      font-size: 26px;
+      font-weight: 400;
+      color: $light_gray;
+      margin: 0px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+    .login-form {
+      position: absolute;
+      left: 0;
+      right: 0;
+      width: 400px;
+      padding: 35px 35px 15px 35px;
+      margin: 120px auto;
+    }
+    .el-form-item {
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 5px;
+      color: #454545;
+    }
+    .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>