首页初始化

src/App.vue

@@ -5,7 +5,13 @@
 </template>
 
 <script>
-export default  {
+export default {
-  name:  'App'
+  name: 'App'
-}
+};
 </script>
+<style lang="scss">
+.content {
+  width: 1400px;
+  margin: 0 auto;
+}
+</style>

src/api/login.js

@@ -1,18 +1,38 @@
 import request from '@/utils/request';
 
 // 登录方法
-export function login(username, password, code) {
+export function login(username, password, newPassword) {
   const data = {
     username,
     password,
-    code
+    newPassword
   };
   return request({
-    url: '/admin/login',
+    url: '/mobile/login',
     method: 'post',
     data: data
   });
 }
+// 注册
+export function register(username, password, newPassword) {
+  const data = {
+    username,
+    password,
+    newPassword
+  };
+  return request({
+    url: '/mobile/register',
+    method: 'post',
+    data: data
+  });
+}
+// 获取验证码
+export function getAuthCode(params) {
+  return request({
+    url: '/mobile/getAuthCode',
+    params
+  });
+}
 
 // 获取用户详细信息
 export function getInfo() {

src/router/index.js

@@ -24,11 +24,14 @@ Vue.use(Router);
 // 公共路由
 export const constantRoutes = [
   {
-    path: '/index',
+    path: '',
     component: resolve => require(['@/views/index'], resolve),
-    // component: () => import("@/views/login/index"),
-    // hidden: true
     name: 'index'
+  },
+  {
+    path: '/login',
+    component: resolve => require(['@/views/login'], resolve),
+    name: 'login'
   }
   // {
   //   path: '/redirect',

src/store/modules/user.js

@@ -1,5 +1,5 @@
-import { login, logout, getInfo } from '@/api/login'
+import { login, logout, getInfo } from '@/api/login';
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { getToken, setToken, removeToken } from '@/utils/auth';
 
 const user = {
   state: {
@@ -12,84 +12,110 @@ const user = {
 
   mutations: {
     SET_TOKEN: (state, token) => {
-      state.token = token
+      state.token = token;
     },
     SET_NAME: (state, name) => {
-      state.name = name
+      state.name = name;
     },
     SET_AVATAR: (state, avatar) => {
-      state.avatar = avatar
+      state.avatar = avatar;
     },
     SET_ROLES: (state, roles) => {
-      state.roles = roles
+      state.roles = roles;
     },
     SET_PERMISSIONS: (state, permissions) => {
-      state.permissions = permissions
+      state.permissions = permissions;
     }
   },
 
   actions: {
     // 登录
     Login({ commit }, userInfo) {
-      const username = userInfo.username.trim()
+      const username = userInfo.username.trim();
-      const password = userInfo.password
+      const password = userInfo.password;
-      const code = userInfo.code
+      const newPassword = userInfo.newPassword;
       return new Promise((resolve, reject) => {
-        login(username, password, code).then(res => {
+        login(username, password, newPassword)
-          setToken(res.data.token)
+          .then(res => {
-          commit('SET_TOKEN', res.data.token)
+            setToken(res.data.token);
-          resolve()
+            commit('SET_TOKEN', res.data.token);
-        }).catch(error => {
+            resolve();
-          reject(error)
+          })
-        })
+          .catch(error => {
-      })
+            reject(error);
+          });
+      });
+    },
+    // 注册
+    Register({ commit }, userInfo) {
+      const username = userInfo.username.trim();
+      const password = userInfo.password;
+      const newPassword = userInfo.newPassword;
+      return new Promise((resolve, reject) => {
+        register(username, password, newPassword)
+          .then(res => {
+            setToken(res.data.token);
+            commit('SET_TOKEN', res.data.token);
+            resolve();
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
     },
 
     // 获取用户信息
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
-        getInfo(state.token).then(res => {
+        getInfo(state.token)
-          const user = res.data
+          .then(res => {
-          const avatar = !res.data.icon ? require("@/assets/image/profile.jpg") : process.env.VUE_APP_BASE_API + user.icon;
+            const user = res.data;
-          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
+            const avatar = !res.data.icon
-            commit('SET_ROLES', res.roles)
+              ? require('@/assets/image/profile.jpg')
-            // commit('SET_PERMISSIONS', res.permissions)
+              : process.env.VUE_APP_BASE_API + user.icon;
-          } else {
+            if (res.roles && res.roles.length > 0) {
-            commit('SET_ROLES', ['ROLE_DEFAULT'])
+              // 验证返回的roles是否是一个非空数组
-          }
+              commit('SET_ROLES', res.roles);
-          commit('SET_NAME', user.userName)
+              // commit('SET_PERMISSIONS', res.permissions)
-          commit('SET_AVATAR', avatar)
+            } else {
-          resolve(res)
+              commit('SET_ROLES', ['ROLE_DEFAULT']);
-        }).catch(error => {
+            }
-          reject(error)
+            commit('SET_NAME', user.userName);
-        })
+            commit('SET_AVATAR', avatar);
-      })
+            resolve(res);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
     },
-    
+
     // 退出系统
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {
-        logout(state.token).then(() => {
+        logout(state.token)
-          commit('SET_TOKEN', '')
+          .then(() => {
-          commit('SET_ROLES', [])
+            commit('SET_TOKEN', '');
-          commit('SET_PERMISSIONS', [])
+            commit('SET_ROLES', []);
-          removeToken()
+            commit('SET_PERMISSIONS', []);
-          resolve()
+            removeToken();
-        }).catch(error => {
+            resolve();
-          reject(error)
+          })
-        })
+          .catch(error => {
-      })
+            reject(error);
+          });
+      });
     },
 
     // 前端 登出
     FedLogOut({ commit }) {
       return new Promise(resolve => {
-        commit('SET_TOKEN', '')
+        commit('SET_TOKEN', '');
-        removeToken()
+        removeToken();
-        resolve()
+        resolve();
-      })
+      });
     }
   }
-}
+};
 
-export default user
+export default user;

src/views/index.vue

@@ -1,6 +1,25 @@
 <template>
-  <div class="dashboard-editor-container">
+  <div class="index_page">
-    home
+    <el-container>
+      <div class="img_box">
+        <img src="@/assets/image/toubu.png" alt="" />
+      </div>
+      <!-- 整体宽度 -->
+      <div class="content">
+        <!-- 头部 -->
+        <div class="header">
+          <div class="login">
+            <el-button type="text" @click="aaa">登录</el-button>
+            <i class="mark">|</i>
+            <el-button type="text" @click="aaa">注册</el-button>
+          </div>
+        </div>
+      </div>
+      <!-- <el-footer>
+        <el-button >登录</el-button>
+        <el-button v-for="item in 30" :key="item">注册</el-button>
+      </el-footer> -->
+    </el-container>
   </div>
 </template>
 
@@ -10,11 +29,45 @@ export default {
   data() {
     return {};
   },
-  methods: {}
+  methods: {
+    aaa() {
+      this.$router.push({ path: '/login' });
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
+.index_page {
+  padding-top: 200px;
+  .img_box {
+    width: 100%;
+    height: 750px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+
+  .header {
+    height: 206px;
+    background-image: url(../assets/image/01.png);
+    .login {
+      text-align: right;
+      padding-right: 100px;
+      .el-button {
+        font-size: 16px;
+        color: #4097e7;
+      }
+      .mark {
+        width: 1px;
+        color: #dcdcdc;
+        margin: 0 14px;
+      }
+    }
+  }
+}
+
 @media (max-width: 1024px) {
   .chart-wrapper {
     padding: 8px;

src/views/login.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="login">
-    <div class="login-title">
+    <!-- <div class="login-title">
-      <!-- <img src="../assets/image/logo.png" alt="" /> -->
+      <img src="../assets/image/logo.png" alt="" />
-      <!-- <span>嘉策服务平台</span> -->
+      <span>嘉策服务平台</span>
-    </div>
+    </div> -->
-    <el-form
+    <!-- <el-form
       ref="loginForm"
       :model="loginForm"
       :rules="loginRules"
@@ -60,8 +60,109 @@
           </el-button>
         </el-form-item>
       </div>
-    </el-form>
+    </el-form> -->
     <!-- <div class="login-form-bg"></div> -->
+    <div class="my-box">
+      <div class="my-left">
+        <div class="bg-img">
+          <img src="@/assets/login.png" alt="" />
+        </div>
+      </div>
+      <div class="my-right">
+        <div style="min-width:360px;max-width:360px;padding-bottom: 55px;">
+          <div class="m-title">欢迎登录</div>
+          <el-form
+            ref="loginForm"
+            :model="loginForm"
+            :rules="loginRules"
+            class="login-form"
+            auto-complete="on"
+            label-position="left"
+          >
+            <el-form-item prop="username">
+              <el-input
+                v-model="loginForm.username"
+                type="text"
+                auto-complete="off"
+                placeholder="手机号"
+              >
+                <svg-icon
+                  slot="prefix"
+                  icon-class="user"
+                  class="el-input__icon input-icon"
+                />
+              </el-input>
+            </el-form-item>
+
+            <el-form-item prop="password" v-if="mode">
+              <el-input
+                v-model="loginForm.password"
+                type="password"
+                auto-complete="off"
+                placeholder="密码"
+                @keyup.enter.native="handleLogin"
+              >
+                <svg-icon
+                  slot="prefix"
+                  icon-class="password"
+                  class="el-input__icon input-icon"
+                />
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="code" class="code-input" v-if="!mode">
+              <el-input
+                v-model="loginForm.password"
+                auto-complete="off"
+                placeholder="验证码"
+                style="width: 63%"
+                @keyup.enter.native="handleLogin"
+              >
+                <svg-icon
+                  slot="prefix"
+                  icon-class="validCode"
+                  class="el-input__icon input-icon"
+                />
+              </el-input>
+              <div class="login-code">
+                <el-button @click="getCode" type="primary" :disabled="!show">
+                  获取验证码
+                  <span v-show="!show" class="count">({{ count }}s)</span>
+                </el-button>
+              </div>
+            </el-form-item>
+            <div
+              class="check-box"
+              :class="mode ? '' : 'flex-end'"
+              style="padding:0 0 15px"
+            >
+              <el-checkbox v-if="mode">记住密码</el-checkbox>
+              <el-button type="text" @click="mode = false" v-if="mode"
+                >验证码登录</el-button
+              >
+              <el-button type="text" @click="mode = true" v-else
+                >密码登录</el-button
+              >
+            </div>
+            <el-button
+              id="login_btn"
+              :loading="loading"
+              type="primary"
+              style="width:100%"
+              @click.native.prevent="handleLogin"
+              >登录</el-button
+            >
+          </el-form>
+          <el-checkbox style="padding:15px 0 0"
+            >我已阅读并同意<el-button type="text"
+              >《用户协议》</el-button
+            ></el-checkbox
+          >
+          <div style="color:#666;font-size:16px">
+            新用户通过手机验证码登录自动注册账号
+          </div>
+        </div>
+      </div>
+    </div>
     <!--  底部  -->
     <!-- <div class="el-login-footer">
       <span>版权所有：嘉策</span>
@@ -72,11 +173,17 @@
 <script>
 import Cookies from 'js-cookie';
 import { encrypt, decrypt } from '@/utils/jsencrypt';
+import { getAuthCode } from '@/api/login';
 
 export default {
   name: 'Login',
   data() {
     return {
+      mode: true,
+      TIME_COUNT: 60,
+      show: true,
+      count: '', // 初始化次数
+      timer: null,
       loginForm: {
         username: '',
         password: '',
@@ -115,6 +222,28 @@ export default {
         rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
       };
     },
+    getCode() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          if (!this.timer) {
+            this.count = this.TIME_COUNT;
+            this.show = false;
+            getAuthCode({ phone: this.loginForm.username }).then(res => {
+              console.log(res);
+              this.timer = setInterval(() => {
+                if (this.count > 0 && this.count <= this.TIME_COUNT) {
+                  this.count--;
+                } else {
+                  this.show = true;
+                  clearInterval(this.timer); // 清除定时器
+                  this.timer = null;
+                }
+              }, 1000);
+            });
+          }
+        }
+      });
+    },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
@@ -132,14 +261,26 @@ export default {
             Cookies.remove('password');
             Cookies.remove('rememberMe');
           }
-          this.$store
+          if (this.mode) {
-            .dispatch('Login', this.loginForm)
+            this.$store
-            .then(() => {
+              .dispatch('Login', this.loginForm)
-              this.$router.push({ path: this.redirect || '/' });
+              .then(() => {
-            })
+                this.$router.push({ path: this.redirect || '/' });
-            .catch(() => {
+              })
-              this.loading = false;
+              .catch(() => {
-            });
+                this.loading = false;
+              });
+          } else {
+            this.$store
+              .dispatch('Register', this.loginForm)
+              .then(() => {
+                // this.$router.push({ path: this.redirect || '/' });
+                this.$router.go(-1);
+              })
+              .catch(() => {
+                this.loading = false;
+              });
+          }
         }
       });
     }
@@ -186,35 +327,35 @@ $loginForm: 383px;
 .col {
   color: #209cff;
 }
-.login-form {
+// .login-form {
-  border-radius: 10px;
+//   border-radius: 10px;
-  background: #ffffff;
+//   background: #ffffff;
-  width: 520px;
+//   width: 520px;
-  min-height: $loginForm;
+//   min-height: $loginForm;
-  padding: 20px;
+//   padding: 20px;
-  padding-top: 10px;
+//   padding-top: 10px;
-  position: absolute;
+//   position: absolute;
-  top: 50%;
+//   top: 50%;
-  left: 50%;
+//   left: 50%;
-  transform: translate(-50%, -50%);
+//   transform: translate(-50%, -50%);
-  z-index: 9;
+//   z-index: 9;
-  // bottom: 0;
+//   // bottom: 0;
-  // margin: auto;
+//   // margin: auto;
-  .el-input {
+//   .el-input {
-    height: 38px;
+//     height: 38px;
-    input {
+//     input {
-      height: 38px;
+//       height: 38px;
-    }
+//     }
-  }
+//   }
-  .input-icon {
+//   .input-icon {
-    height: 39px;
+//     height: 39px;
-    width: 14px;
+//     width: 14px;
-    margin-left: 2px;
+//     margin-left: 2px;
-  }
+//   }
-  .login-info {
+//   .login-info {
-    padding: 0 100px;
+//     padding: 0 100px;
-  }
+//   }
-}
+// }
 .login-form-bg {
   border-radius: 6px;
   position: absolute;
@@ -232,13 +373,7 @@ $loginForm: 383px;
   color: #bfbfbf;
 }
 .login-code {
-  width: 33%;
+  margin-left: 10px;
-  height: 38px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
 }
 .el-login-footer {
   height: 40px;
@@ -255,6 +390,65 @@ $loginForm: 383px;
 .login-code-img {
   height: 38px;
 }
+.my-box {
+  min-height: 454px;
+  display: flex;
+  border-radius: 10px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 10px;
+  overflow: hidden;
+  .my-left {
+    min-width: 500px;
+    .bg-img {
+      height: 100%;
+      background-color: #3494ff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 405px;
+        height: 325px;
+      }
+    }
+  }
+  .my-right {
+    min-width: 550px;
+    display: flex;
+    justify-content: center;
+    .m-title {
+      color: #333;
+      font-size: 26px;
+      font-weight: 700;
+      text-align: center;
+      margin: 55px auto 45px;
+    }
+    .el-form {
+      .el-form-item {
+        .el-form-item__content {
+          display: flex;
+        }
+      }
+      .check-box {
+        padding: 0 5px;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+  }
+}
+.flex-end {
+  justify-content: flex-end !important;
+}
+// .code-input {
+//   .el-form-item__content {
+//     display: flex;
+//     justify-content: space-between;
+//   }
+// }
 </style>
 <style>
 .el-input__prefix {