Skip to content

S
so-manage-ui
Commit 8b09ef31 authored by 白舜's avatar 白舜 🎱
Browse files
Options

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

parent eee46766
Show whitespace changes
Inline Side-by-side
Showing with 203 additions and 152 deletions
src/assets/css/index.css
View file @ 8b09ef31
......@@ -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
View file @ 8b09ef31
......@@ -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
View file @ 8b09ef31
......@@ -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
View file @ 8b09ef31
......@@ -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
View file @ 8b09ef31
......@@ -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
View file @ 8b09ef31
......@@ -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
View file @ 8b09ef31
......@@ -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
View file @ 8b09ef31
......@@ -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
View file @ 8b09ef31
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;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment