feat(登录注册): 样式修正，增加提示弹窗，修复跳转问题

src/assets/css/index.css

@@ -1561,11 +1561,16 @@ border-radius:8px;
 }
 
 .register_btn {
+  display: flex;
+  align-items: center;
   background-color: #eff2fa;
   border-radius: 4px;
   border: solid 1px #b0bee8;
   color: #3759be;
 }
+.register_btn .icon-arrow-right {
+  margin-left: 39px;
+}
 .forget_psd {
   font-size: 14px;
 	color: #3759be;

src/components/login-by-account.vue

@@ -31,12 +31,12 @@
         </div>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="loginAction()" style="width: 100%"> 登 录 </el-button>
+        <el-button type="primary" @click="loginAction()" style="width: 100%"> 登录 </el-button>
       </el-form-item>
-      <el-form-item style="margin-top: 24px">
+      <el-form-item>
         <el-button class="register_btn" @click.prevent="$emit('register')" style="width: 100%">
-          还没有账号？前往注册&emsp;
-          <bg-icon style="font-size: 12px; margin-right: 8px" icon="#bg-ic-arrow-right"></bg-icon>
+          还没有账号？前往注册
+          <bg-icon class="icon-arrow-right" icon="#bg-ic-arrow-right"></bg-icon>
         </el-button>
       </el-form-item>
       <div class="regist_bottom">
@@ -159,7 +159,7 @@ const getMenuObj = (menu, parentRowPath, menuObj) => {
   });
 };
 const getImg = (clearInput = false) => {
-  axios.get(`/apaas/system/v5/user/getCaptcha??width=240&height=32`).then((res) => {
+  axios.get(`/apaas/system/v5/user/getCaptcha??width=138&height=36`).then((res) => {
     if (res.data.code == 200) {
       state.imgId = res.data.data.id;
       state.imgSrc = res.data.data.captcha;
@@ -193,6 +193,7 @@ const { loginForm, steploginFormRules, imgId, imgSrc, identifyCode, hidePassword
     justify-content: space-between;
     align-items: center;
     .yzm_img {
+      margin: 4px 0 0 16px;
       flex: 1;
     }
 
@@ -205,7 +206,13 @@ const { loginForm, steploginFormRules, imgId, imgSrc, identifyCode, hidePassword
     background-color: #f7f8f9;
   }
   .regist_bottom {
-    line-height: 34px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    :deep(.el-checkbox) {
+      height: auto;
+    }
   }
 }
 </style>

src/components/login-by-code.vue

@@ -33,13 +33,13 @@
           </div>
         </div>
       </el-form-item>
-      <el-form-item style="margin-top: 54px">
+      <el-form-item>
         <el-button type="primary" @click.prevent="loginAction()" style="width: 100%"> 登 录 </el-button>
       </el-form-item>
-      <el-form-item style="margin-top: 24px">
+      <el-form-item>
         <el-button class="register_btn" @click.prevent="$emit('register')" style="width: 100%">
-          还没有账号？前往注册&emsp;
-          <bg-icon style="font-size: 12px; margin-right: 8px" icon="#bg-ic-arrow-right"></bg-icon>
+          还没有账号？前往注册
+          <bg-icon icon="#bg-ic-arrow-right"></bg-icon>
         </el-button>
       </el-form-item>
       <div>

src/main.js

@@ -75,7 +75,7 @@ function getMenuObj(menu, parentRowPath, menuObj) {
     }
   });
 }
-
+store.commit("setWhiteList", ["/", "/login", "/register", "/password"]);
 Promise.all([getUser(), getMenu("dadb2d3f-e263-48d1-9389-42acb9ea49f8")])
   .then((res) => {
     if (res[0].data.code == 200 && res[1].data.code == 200) {
@@ -98,8 +98,9 @@ Promise.all([getUser(), getMenu("dadb2d3f-e263-48d1-9389-42acb9ea49f8")])
     generateRoutes();
   })
   .catch((e) => {
-    console.error(e)
-  }).finally(() => {
+    console.error(e);
+  })
+  .finally(() => {
     createVue.use(ElementPlus, { locale }).use(store).use(router).use(i18n).use(bgui);
     createVue.mount("#app");
   });

src/page/login/index.vue

@@ -6,18 +6,14 @@
         configOptions.backgroundUrl ? JSON.parse(configOptions.backgroundUrl)[0].url : getImageUrl('bg.png')
       })`,
     }">
-    <div class="bg-warning">系统有效期剩余345 天，请管理员及时更换license！</div>
+    <el-alert class="bg-warning" title="系统有效期剩余345 天，请管理员及时更换license！" type="warning" />
     <div class="bg-main">
       <!-- <div class="bg-logo">
           <img class="logo" src="../../assets/imgs/login_img_logo.png" />
         </div> -->
 
       <div class="bg-content">
-        <bg-tabs
-          class="login-tab"
-          v-model="loginTab"
-          style="min-height: 450px; width: 480px"
-          v-if="pageType === 'login'">
+        <bg-tabs class="login-tab" v-model="loginTab" style="width: 480px" v-if="pageType === 'login'">
           <bg-tab label="账号密码登录" name="account">
             <LoginByAccount @register="switchPageType('account')" @password="password" />
           </bg-tab>
@@ -38,9 +34,18 @@
       </p>
       <p>
         <span class="can_click_text" @click="open(configOptions.legalStatementUrl)">法律声明</span> |
-        <span class="can_click_text" @click="open(configOptions.privacyPolicyUrl)"> 隐私政策 </span>
+        <span class="can_click_text" @click="open(configOptions.privacyPolicyUrl)">隐私政策</span>
       </p>
     </div>
+
+    <el-dialog class="dialog_box" title="提示" v-model="dialogPasswordChange" width="400px">
+      <div>密码已过期，请修改密码后再次登录</div>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="primary" @click="password">立即修改</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -59,6 +64,8 @@ const pageType = ref("login");
 const loginTab = ref("account");
 
 const configOptions = ref({});
+const dialogPasswordChange = ref(false);
+
 const switchPageType = (type) => {
   // pageType.value = type
   router.push("/register");
@@ -96,15 +103,13 @@ onBeforeMount(() => {
   background-image: url("@/assets/imgs/bg.png");
   background-size: 100% 100%;
   background-position: center center;
+  background-size: cover;
   position: relative;
 
   .bg-main {
     position: absolute;
-    top: 50%;
-    right: 0;
-    margin-right: 16vw;
-    margin-bottom: 80px;
-    transform: translateY(calc(-50%));
+    top: calc(50vh - 250px);
+    right: calc(28vw - 240px);
     width: 500px;
     max-height: calc(100vh - 100px);
     overflow: hidden auto;
@@ -141,7 +146,18 @@ onBeforeMount(() => {
       }
     }
 
-    > .bg-content {
+    .bg-content {
+      :deep(.bg-tabs-content) {
+        padding: 32px 0;
+      }
+    }
+    :deep(.el-form) {
+      .el-form-item {
+        .el-input,
+        .el-button {
+          height: 40px;
+        }
+      }
     }
   }
   > .bg-warning {
@@ -151,6 +167,8 @@ onBeforeMount(() => {
     font-size: 14px;
     height: 32px;
     line-height: 32px;
+    display: flex;
+    justify-content: center;
   }
 
   > .bg-msg {

src/page/register/index.vue

@@ -32,7 +32,7 @@
                 <el-input v-model="infoForm.business_name" placeholder="请输入" maxlength="20" show-word-limit />
               </el-form-item>
               <el-form-item prop="develop_id" label="开发厂商名称">
-                <el-select v-model="infoForm.develop_id" placeholder="请选择" filterable style="width: 100%">
+                <el-select v-model="infoForm.develop_id" placeholder="请选择，如需新增，请输入任意字符" filterable style="width: 100%">
                   <el-option
                     v-for="item in developList"
                     :key="'develop_' + item.dict_id"

src/request/http.js

@@ -2,9 +2,9 @@
  * axios封装
  * 请求拦截、响应拦截、错误统一处理
  */
-import axios from 'axios';
-import router from '../router/index';
-import store from '../store/index';
+import axios from "axios";
+import router from "../router/index";
+import store from "../store/index";
 
 function getCookie(name) {
   var strCookie = document.cookie;
@@ -16,22 +16,27 @@ function getCookie(name) {
   return "";
 }
 
-const tip = msg => {
-    console.log(msg)
-}
+const tip = (msg) => {
+  console.log(msg);
+};
 
 /**
  * 跳转登录页
  * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
  */
 const toLogin = () => {
-    router.replace({
-        path: '/login',
-        query: {
-            redirect: router.currentRoute.fullPath
+  let path = router.currentRoute.value.path;
+  //白名单中的401不做跳转
+  if (!store.state.whiteList.includes(path)) {
+    window.location.href = `/apaas/manage/ui/#/login`;
   }
-    });
-}
+  // router.replace({
+  //     path: '/login',
+  //     query: {
+  //         redirect: router.currentRoute.fullPath
+  //     }
+  // });
+};
 
 /**
  * 请求失败后的错误统一处理
@@ -40,7 +45,9 @@ const toLogin = () => {
 const errorHandle = (status, other) => {
   // 状态码判断
   switch (status) {
-        case 400: tip('请求错误(400)'); break;
+    case 400:
+      tip("请求错误(400)");
+      break;
     // 401: 未登录状态，跳转登录页
     case 401:
       toLogin();
@@ -48,35 +55,45 @@ const errorHandle = (status, other) => {
     // 403 token过期
     // 清除token并跳转登录页
     case 403:
-            tip('登录过期，请重新登录');
-            localStorage.removeItem('token');
-            store.commit('loginSuccess', null);
+      tip("登录过期，请重新登录");
+      localStorage.removeItem("token");
+      store.commit("loginSuccess", null);
       setTimeout(() => {
         // toLogin();
       }, 1000);
       break;
-        case 404: tip('请求的资源不存在'); break;
-        case 408: tip('请求超时(408)');
-        case 500: tip('服务器错误(500)');
-        case 501: tip('服务未实现(501)');
-        case 502: tip('网络错误(502)');
-        case 503: tip('服务不可用(503)');
-        case 504: tip('网络超时(504)');
-        case 505: tip('HTTP版本不受支持(505)');
-        default: tip(`连接出错,${other}`);
+    case 404:
+      tip("请求的资源不存在");
+      break;
+    case 408:
+      tip("请求超时(408)");
+    case 500:
+      tip("服务器错误(500)");
+    case 501:
+      tip("服务未实现(501)");
+    case 502:
+      tip("网络错误(502)");
+    case 503:
+      tip("服务不可用(503)");
+    case 504:
+      tip("网络超时(504)");
+    case 505:
+      tip("HTTP版本不受支持(505)");
+    default:
+      tip(`连接出错,${other}`);
   }
-}
+};
 
 // 创建axios实例
 var instance = axios.create({ timeout: 1000 * 12 });
 // 设置post请求头
-instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+instance.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
 /**
  * 请求拦截器
  * 每次请求前，如果存在token则在请求头中携带token
  */
 instance.interceptors.request.use(
-    config => {
+  (config) => {
     // const token = store.state.token;
     // var token = 'Basic cm9vdA%3D%3D'
     // token && (config.headers.Authorization = token);
@@ -93,20 +110,22 @@ instance.interceptors.request.use(
     // }
     return config;
   },
-    error => Promise.error(error))
+  (error) => Promise.error(error)
+);
 
 // 响应拦截器
 instance.interceptors.response.use(
   // 请求成功
-    res => res.status === 200|| res.status === 201? Promise.resolve(res) : Promise.reject(res),
+  (res) => (res.status === 200 || res.status === 201 ? Promise.resolve(res) : Promise.reject(res)),
   // 请求失败
-    error => {
+  (error) => {
     const { response } = error;
     if (response) {
       // 请求已发出，但是不在2xx的范围
       errorHandle(response.status, response.data.errmessage);
       return Promise.reject(response);
     }
-    });
+  }
+);
 
 export default instance;

src/router/index.js

@@ -48,7 +48,7 @@ const router = newRouterFunc();
 
 function inWhiteList(toPath) {
   //配置白名单
-  const whiteList = ["/login", "/register", "/password"];
+  const whiteList = store.state.whiteList;
   const path = whiteList.find((value) => {
     // 使用正则匹配
     const reg = new RegExp("^" + value);
@@ -59,7 +59,6 @@ function inWhiteList(toPath) {
 
 router.beforeEach((to, from, next) => {
   const userInfo = store.state.userInfo;
-
   //已登录不可跳转登陆页
   if (userInfo && (to.path == "/login" || to.path == "/")) {
     next({

src/store/index.js

-import {createStore} from 'vuex'
-
+import { createStore } from "vuex";
 
 const store = createStore({
   state: {
-    userInfo:null,
-    menu:null,
-    route:null,
-    nameFlag:false,
-    msgBoxFlag:false,
-    nowzz:null,
-    menuObj:{},
-    treeFlag:false,
-    registerValid:false,
+    userInfo: null,
+    menu: null,
+    route: null,
+    nameFlag: false,
+    msgBoxFlag: false,
+    nowzz: null,
+    menuObj: {},
+    treeFlag: false,
+    registerValid: false,
     msgUnreadNum: 0,
     systemLogo: "",
+    whiteList: [],
   },
   getters: {
     count(state) {
-      return state.userInfo
-    }
+      return state.userInfo;
+    },
   },
   mutations: {
     setUserInfo(state, info) {
-      state.userInfo = info
+      state.userInfo = info;
     },
-    setMenu(state,menu){
-      state.menu = menu
+    setMenu(state, menu) {
+      state.menu = menu;
     },
-    setMenuObj(state,menuObj){
-      state.menuObj = menuObj
+    setMenuObj(state, menuObj) {
+      state.menuObj = menuObj;
     },
-    setRoute(state,route){
-      state.route = route
+    setRoute(state, route) {
+      state.route = route;
     },
-    setNameFlag(state,nameFlag){
-      state.nameFlag = nameFlag
+    setNameFlag(state, nameFlag) {
+      state.nameFlag = nameFlag;
     },
-    setMsgBoxFlag(state,msgBoxFlag){
-      state.msgBoxFlag = msgBoxFlag
+    setMsgBoxFlag(state, msgBoxFlag) {
+      state.msgBoxFlag = msgBoxFlag;
     },
-    setNowzz(state,nowzz){
-      state.nowzz = nowzz
+    setNowzz(state, nowzz) {
+      state.nowzz = nowzz;
     },
-    setTreeFlag(state,treeFlag){
-      state.treeFlag = treeFlag
+    setTreeFlag(state, treeFlag) {
+      state.treeFlag = treeFlag;
     },
-    setRegisterValid(state,registerValid){
-      state.registerValid = registerValid
+    setRegisterValid(state, registerValid) {
+      state.registerValid = registerValid;
     },
     setUnreadNum(state, num) {
-      state.msgUnreadNum = num
+      state.msgUnreadNum = num;
+    },
+    setSystemLogo(state, logo) {
+      state.systemLogo = logo;
     },
-    setSystemLogo(state,logo) {
-      state.systemLogo = logo
-    }
+    setWhiteList(state, arr) {
+      state.whiteList = arr;
     },
-  actions: {}
+  },
+  actions: {},
 });
 export default store;
-