Skip to content

S
so-manage-ui
Commit 9476148b authored by 张俊's avatar 张俊
Browse files
Options

新增登录页

parent 30d7974f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1706 additions and 200 deletions
src/bg-ui/bg-tabs.vue
View file @ 9476148b
......@@ -55,15 +55,14 @@ export default {
calcTabs() {
let tabSlots = [];
if (this.$slots.default) {
tabSlots = this.$slots.default
if (this.$slots.default()) {
tabSlots = this.$slots.default()
.filter(
(vnode) =>
vnode.tag &&
vnode.componentOptions &&
vnode.componentOptions.Ctor.options.name === "BgTab"
vnode.type &&
vnode.type.name === "BgTab"
)
.map((vnode) => vnode.componentOptions.propsData);
.map((vnode) => vnode.props);
}
return tabSlots;
......
src/bg-ui/index.scss
View file @ 9476148b
......@@ -865,7 +865,7 @@ a {
border-right: 1px solid #e6e9ef;
border-bottom: 1px solid #fff;
border-left: 1px solid #e6e9ef;
color: #275a9d;
color: #e56600;
overflow: hidden;
&::before {
......@@ -875,7 +875,7 @@ a {
left: 0;
width: 100%;
height: 4px;
background-color: #275a9d;
background-color: #e56600;
}
}
......@@ -960,7 +960,7 @@ a {
}
> .tab-content {
padding: 0 16px;
padding: 0px 40px;
}
& + .bg-tab {
......
src/components/login-by-account.vue 0 → 100644
View file @ 9476148b
<template>
<div class="login-by-account">
<el-form ref="loginForm" label-position="top" :model="loginForm" :rules="steploginFormRules">
<el-form-item label="账号" prop="userid">
<el-input
v-model="loginForm.userid"
autofocus="autofocus"
placeholder="请输入账号"
@keyup.enter.native="loginAction()"
/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
:type="hidePassword ? 'password' : 'text'"
v-model="loginForm.password"
placeholder="请输入密码"
@keyup.enter.native="loginAction()"
>
<span
slot="suffix"
:title="hidePassword ? '显示密码' : '隐藏密码'"
:class="hidePassword ? 'hide-password' : 'show-password'"
@click="hidePassword = !hidePassword"
style="cursor:pointer;"
></span>
</el-input>
</el-form-item>
<el-form-item label="验证码" prop="yzm">
<div class="msg-code">
<el-input
v-model="loginForm.yzm"
placeholder="请输入验证码"
@keyup.enter.native="loginAction()"
/>
<img class="yzm_img" title="看不清？换一张" :src="imgSrc" @click="getImg()" />
</div>
</el-form-item>
<el-form-item>
<el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginAction()" style="width:100%;">
登 录
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import CryptoJS from "crypto-js";
import { getCookie, clearCookie, setCookie } from "@/services/cookie.js";
import menu from '../router/function'
import {generateRoutes} from '../router/index'
export default {
name: "LoginByAccount", // 账号密码登录
data() {
return {
loginForm: {
userid: "",
password: "",
yzm: "",
},
steploginFormRules: {
userid: [{ required: true, message: "请输入账号", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
yzm: [
{ required: true, message: "请输入验证码", trigger: "blur" },
],
},
imgId:'',
imgSrc:'',
identifyCode: "",
hidePassword: true,
rememberPassword: false,
};
},
methods: {
loginAction() {
if (this.rememberPassword) {
let userinfo = encodeURI(
encodeURI(`${this.loginForm.userid},${this.loginForm.password}`)
);
setCookie("userinfo", userinfo);
} else {
clearCookie("userinfo");
}
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.$axios
.get(`/apaas/system/v5/user/verifyCaptcha?id=${this.imgId}&value=${this.loginForm.yzm}`)
.then((res) => {
if (res.data.code == 200) {
this.login();
} else {
this.$message.error(res.data.data);
}
});
}
});
},
login(){
this.$axios
.post(`/apaas/system/v5/user/login`, {
system_account: this.loginForm.userid,
password: CryptoJS.AES.encrypt(this.loginForm.password,"swuE9cmCZQwrkYRV").toString(),
}).then(({ data }) => {
if (data.code == 200) {
this.getUser();
} else {
this.getImg(true);
this.$message({
message: data.errMsg,
type: "error",
});
}
})
.catch((error) => {
console.log(error);
});
},
getUser() {
this.$axios.get(`/apaas/system/v5/user/getUserInfo`).then((res) => {
if (res.data.code == 200) {
this.$store.commit("setUserInfo", res.data.data);
// if (res.data.data.userType == 1) {
//超管
this.$store.commit("setMenu", menu.adminMenu);
menu.menuToRouter(menu.adminMenu)
this.$store.commit('setRoute',menu.adminMenu)
//存储菜单对象信息
let menuObj = {}
this.getMenuObj(menu.adminMenu,'',menuObj)
this.$store.commit('setMenuObj',menuObj)
// }
generateRoutes()
// this.$router.push("/");
//跳转到工作台页面
window.location.href = '/apaas/portal/ui/#/'
}
});
},
getMenuObj(menu,parentRowPath,menuObj){
menu.forEach((e,idx) => {
e.rowPath = parentRowPath + '.' + idx
menuObj[e.path] = e
if(e.children&&e.children.length){
this.getMenuObj(e.children,e.rowPath,menuObj)
}
});
},
getImg(clearInput = false) {
this.$axios.get(`/apaas/system/v5/user/getCaptcha??width=240&height=32`).then((res) => {
if (res.data.code == 200) {
this.imgId = res.data.data.id;
this.imgSrc = res.data.data.captcha;
}
});
if (clearInput) {
this.loginForm.yzm = "";
}
},
},
created() {
this.getImg();
if (getCookie("userinfo")) {
let userinfo = decodeURI(decodeURI(getCookie("userinfo"))).split(",");
this.loginForm.userid = userinfo[0];
this.loginForm.password = userinfo[1];
this.checked = true;
this.rememberPassword = true
} else {
this.checked = false;
}
},
};
</script>
<style lang="scss" scoped>
.msg-code {
display: flex;
justify-content: space-between;
align-items: center;
> .bg-identify {
margin-left: 6px;
flex-shrink: 0;
}
}
</style>
\ No newline at end of file
src/components/login-by-code.vue 0 → 100644
View file @ 9476148b
<template>
<div class="login-by-code">
<el-form ref="loginForm" :model="loginForm" :rules="loginFormRules">
<el-form-item prop="mobile">
<template name="label">
<div class="form-title">
<span>
手机号码
</span>
<el-tooltip class="item" effect="dark" placement="top">
<template slot="content">
个人用户及企业（主账号）<br />可通过短信验证码登录
</template>
<img src="@/assets/imgs/ic_tips.png" />
</el-tooltip>
</div>
</template>
<el-input
v-model="loginForm.mobile"
autofocus="autofocus"
placeholder="请输入手机号码"
@keyup.enter.native="loginAction()"
/>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input
v-model="loginForm.code"
placeholder="请输入验证码"
@keyup.enter.native="loginAction()"
>
<template slot="append">
<a class="input-append disabled" v-if="countDown > 0">
{{ countDown }}秒后再次获取
</a>
<a class="input-append" @click="getMsgCode" v-else>
获取验证码
</a>
</template>
</el-input>
</el-form-item>
<el-form-item style="margin-top: 54px;">
<el-button type="primary" @click.prevent="loginAction()">
登 录
</el-button>
</el-form-item>
<el-form-item style="margin-top: 24px;">
<el-button @click.prevent="$emit('register')">
还没有账户？立即注册&emsp;<i class="el-icon-arrow-right"></i>
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "LoginByCode", // 短信验证码登录
data() {
const validatePhone = (rule, value, callback) => {
const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
setTimeout(() => {
if (!reg.test(value)) {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
});
};
return {
loginForm: {
mobile: "",
code: "",
},
loginFormRules: {
mobile: [
{ required: true, message: "请输入手机号码", trigger: "change" },
{ validator: validatePhone, trigger: "blur" },
],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
},
countDown: 0,
countDownTimer: null,
};
},
methods: {
getMsgCode() {
this.$refs.loginForm.validateField("mobile", (errMsg) => {
if (!errMsg) {
this.$api.general.getCode(this.loginForm.mobile).then(({ data }) => {
if (data.success == 1) {
this.countDownAction();
}
});
}
});
}, // 获取验证码
countDownAction() {
this.countDown = 60;
if (this.countDownTimer) {
clearInterval(this.countDownTimer);
}
this.countDownTimer = setInterval(() => {
if (this.countDown > 0) {
this.countDown--;
} else {
clearInterval(this.countDownTimer);
}
}, 1000);
},
loginAction() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.$api.general
.loginByCode(this.loginForm)
.then(({ data }) => {
if (data.success == 1) {
let redirect = "/apaas/ui/#/index";
// GIS重定向使用
if (this.$route.query.ReturnUrl) {
redirect = this.$route.query.ReturnUrl;
}
// 前端重定向使用
else if (this.$route.query.redirect) {
redirect = `/apaas/ui/#${this.$route.query.redirect}`;
}
window.location.href = redirect;
} else {
this.$message({
message: data.errMsg || data.data || "登陆失败",
type: "error",
});
}
})
.catch((error) => {
console.log(error);
});
}
});
}, // 短信验证码登录
},
};
</script>
<style lang="less" scoped>
.login-by-code {
.el-form {
.form-title {
display: flex;
justify-content: flex-start;
align-items: center;
line-height: 20px;
margin-bottom: 5px;
> img {
margin-left: 5px;
}
}
}
}
</style>
\ No newline at end of file
src/components/register-firm-user.vue 0 → 100644
View file @ 9476148b
This diff is collapsed.
src/components/register-org-user.vue 0 → 100644
View file @ 9476148b
<template>
<div class="register-personal-user">
<el-form ref="form" :model="formData" :rules="formDataRules">
<el-form-item label="用户组织机构" prop="oid">
<el-select
v-model="formData.oid"
placeholder="搜索并选择"
filterable
remote
:remote-method="getOrgList"
:laoding="laodingOrgList"
>
<el-option
v-for="(org, index) in orgList"
:label="org.department_name"
:value="org.department_id"
:key="`org_${index}`"
/>
</el-select>
</el-form-item>
<el-form-item label="用户名" prop="user_id">
<el-input
v-model="formData.user_id"
placeholder="输入4-20字符。支持字母、数字"
/>
</el-form-item>
<el-form-item label="登录密码" prop="password">
<el-input
v-model="formData.password"
placeholder="8--20位字符，必须由字母、数字、特殊符号组成"
:type="hidePassword ? 'password' : 'text'"
>
<span
slot="suffix"
:title="hidePassword ? '显示密码' : '隐藏密码'"
:class="hidePassword ? 'hide-password' : 'show-password'"
@click="hidePassword = !hidePassword"
style="cursor:pointer;"
></span>
</el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirm_password">
<el-input
v-model="formData.confirm_password"
placeholder="再次输入密码"
:type="hideConfirmPassword ? 'password' : 'text'"
>
<span
slot="suffix"
:title="hideConfirmPassword ? '显示密码' : '隐藏密码'"
:class="hideConfirmPassword ? 'hide-password' : 'show-password'"
@click="hideConfirmPassword = !hideConfirmPassword"
style="cursor:pointer;"
></span>
</el-input>
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="formData.phone" placeholder="国内11位数手机号码" />
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model="formData.code" placeholder="请输入验证码">
<template slot="append">
<a class="input-append disabled" v-if="countDown > 0">
{{ countDown }}秒后再次获取
</a>
<a class="input-append" @click="getMsgCode" v-else>
获取验证码
</a>
</template>
</el-input>
</el-form-item>
<div class="switch-to-login">
<a @click.prevent="$emit('login')">
已有账号？立即登录
</a>
</div>
<el-form-item style="margin-top: 20px;">
<el-button type="primary" @click="submitAction">
注册
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import md5 from "js-md5";
export default {
name: "RegisterOrgUser", // 注册政府机构用户
data() {
const validateUserId = (rule, value, callback) => {
let reg = new RegExp(/^[a-zA-Z0-9|\-|_|\.]+$/);
if (value == "") {
callback(new Error("请输入用户名"));
} else if (value.length > 16 || value.length < 3) {
callback(new Error("长度请大于三位且不超过16位"));
} else if (!reg.test(value)) {
callback(new Error("只支持字母、数字、-、_、."));
} else {
this.$api.general
.validateUserId({ value })
.then(({ data }) => {
if (data.success == 1) {
callback();
} else {
callback(new Error(data.errMsg));
}
})
.catch((error) => {
console.log(error);
callback(new Error("用户名验证失败"));
});
}
};
const validatePassword = (rule, value, callback) => {
let reg = new RegExp(/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}$/);
setTimeout(() => {
if (value == "") {
callback(new Error("请输入密码"));
} else if (!reg.test(value)) {
callback(new Error("8--20位字符，必须由字母、数字、特殊符号组成"));
} else {
callback();
}
}, 100);
};
const validateConfirmPassword = (rule, value, callback) => {
setTimeout(() => {
if (value !== this.formData.password) {
callback(new Error("密码和确认密码不一致"));
} else {
callback();
}
}, 100);
};
const validatePhone = (rule, value, callback) => {
const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
setTimeout(() => {
if (!reg.test(value)) {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
});
};
return {
formData: {
is_inside: 1, // 固定1
user_category: 0, // 用户类型0
oid: "", // 用户组织机构 必填
user_id: "", // 用户名 必填
password: "", // 密码 必填
confirm_password: "",
phone: "", // 电话 必填
code: "", // 验证码 必填
user_name: "", // 姓名 选填
system_name: "", // 业务系统名称 选填
domain_name: "", // 域名 选填
ip_whitelist: "", // ip地址 选填
},
formDataRules: {
oid: [
{ required: true, message: "请选择用户组织机构", trigger: "change" },
],
user_id: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ validator: validateUserId, trigger: "blur" },
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ validator: validatePassword, trigger: "blur" },
],
confirm_password: [
{ required: true, message: "请再次输入密码", trigger: "blur" },
{ validator: validateConfirmPassword, trigger: "blur" },
],
phone: [
{ required: true, message: "请输入手机号码", trigger: "change" },
{ validator: validatePhone, trigger: "blur" },
],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
},
orgList: [],
orgListAll: [],
laodingOrgList: false,
hidePassword: true,
hideConfirmPassword: true,
countDown: 0,
countDownTimer: null,
};
},
methods: {
getOrgList(queryText) {
if (queryText) {
this.laodingOrgList = true;
this.$api.general
.getOrgList({
limit: 9999999,
search: queryText,
})
.then(({ data }) => {
if (data.success === 1) {
this.orgList = data.data;
} else {
this.$message.error(data.errMsg);
this.orgList = [];
}
this.laodingOrgList = false;
});
} else {
this.orgList = this.orgListAll;
}
},
getMsgCode() {
this.$refs.form.validateField("phone", (errMsg) => {
if (!errMsg) {
this.$api.general.getCode(this.formData.phone).then(({ data }) => {
if (data.success == 1) {
this.countDownAction();
}
});
}
});
},
countDownAction() {
this.countDown = 60;
if (this.countDownTimer) {
clearInterval(this.countDownTimer);
}
this.countDownTimer = setInterval(() => {
if (this.countDown > 0) {
this.countDown--;
} else {
clearInterval(this.countDownTimer);
}
}, 1000);
},
submitAction() {
this.$refs.form.validate((valid) => {
if (valid) {
let formData = {
...this.formData,
password: md5(this.formData.password),
};
delete formData.confirm_password;
this.$api.general.registerlUser(formData).then(({ data }) => {
if (data.success == 1) {
this.$message({
message: "注册成功",
type: "success",
});
this.$emit("success");
} else {
this.$message({
message: data.errMsg || "注册失败",
type: "error",
});
}
});
}
});
},
},
created() {
this.$api.general
.getOrgList({
limit: 9999999,
})
.then(({ data }) => {
if (data.success === 1) {
this.orgList = data.data;
this.orgListAll = data.data;
} else {
this.$message.error(data.errMsg);
}
});
},
};
</script>
<style lang="less" scoped>
.msg-code {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
> .bg-identify {
margin-left: 6px;
flex-shrink: 0;
}
}
</style>
\ No newline at end of file
src/components/register-personal-user.vue 0 → 100644
View file @ 9476148b
<template>
<div class="register-personal-user">
<el-form ref="form" :model="formData" :rules="formDataRules">
<el-form-item label="用户名" prop="user_id">
<el-input
v-model="formData.user_id"
placeholder="输入4-20字符。支持字母、数字"
/>
</el-form-item>
<el-form-item label="设置密码" prop="password">
<el-input
v-model="formData.password"
placeholder="8--20位字符，必须由字母、数字、特殊符号组成"
:type="hidePassword ? 'password' : 'text'"
>
<span
slot="suffix"
:title="hidePassword ? '显示密码' : '隐藏密码'"
:class="hidePassword ? 'hide-password' : 'show-password'"
@click="hidePassword = !hidePassword"
style="cursor:pointer;"
></span>
</el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirm_password">
<el-input
v-model="formData.confirm_password"
placeholder="再次输入密码"
:type="hideConfirmPassword ? 'password' : 'text'"
>
<span
slot="suffix"
:title="hideConfirmPassword ? '显示密码' : '隐藏密码'"
:class="hideConfirmPassword ? 'hide-password' : 'show-password'"
@click="hideConfirmPassword = !hideConfirmPassword"
style="cursor:pointer;"
></span>
</el-input>
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="formData.phone" placeholder="国内11位数手机号码" />
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model="formData.code" placeholder="请输入验证码">
<template slot="append">
<a class="input-append disabled" v-if="countDown > 0">
{{ countDown }}秒后再次获取
</a>
<a class="input-append" @click="getMsgCode" v-else>
获取验证码
</a>
</template>
</el-input>
</el-form-item>
<div class="switch-to-login">
<a @click.prevent="$emit('login')">
已有账号？立即登录
</a>
</div>
<el-form-item style="margin-top: 20px;">
<el-button type="primary" @click="submitAction">
注册
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import md5 from "js-md5";
export default {
name: "RegisterPersonalUser", // 注册个人用户
data() {
const validateUserId = (rule, value, callback) => {
let reg = new RegExp(/^[a-zA-Z0-9|\-|_|\.]+$/);
if (value == "") {
callback(new Error("请输入用户名"));
} else if (value.length > 16 || value.length < 3) {
callback(new Error("长度请大于三位且不超过16位"));
} else if (!reg.test(value)) {
callback(new Error("只支持字母、数字、-、_、."));
} else {
this.$api.general
.validateUserId({ value })
.then(({ data }) => {
if (data.success == 1) {
callback();
} else {
callback(new Error(data.errMsg));
}
})
.catch((error) => {
console.log(error);
callback(new Error("用户名验证失败"));
});
}
};
const validatePassword = (rule, value, callback) => {
let reg = new RegExp(/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}$/);
setTimeout(() => {
if (value == "") {
callback(new Error("请输入密码"));
} else if (!reg.test(value)) {
callback(new Error("8--20位字符，必须由字母、数字、特殊符号组成"));
} else {
callback();
}
}, 100);
};
const validateConfirmPassword = (rule, value, callback) => {
setTimeout(() => {
if (value !== this.formData.password) {
callback(new Error("密码和确认密码不一致"));
} else {
callback();
}
}, 100);
};
const validatePhone = (rule, value, callback) => {
const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
setTimeout(() => {
if (!reg.test(value)) {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
});
};
return {
formData: {
is_inside: 1, // 固定1
user_category: 2, // 个人用户2
user_id: "", // 用户名 必填
password: "", // 密码 必填
confirm_password: "",
phone: "", // 手机号 必填
code: "", // 验证码 必填
user_name: "", // 姓名 选填
id_number: "", // 身份证号 选填
},
formDataRules: {
user_id: [
{ required: true, message: "请输入用户名", trigger: "change" },
{ validator: validateUserId, trigger: "blur" },
],
password: [
{ required: true, message: "请输入密码", trigger: "change" },
{ validator: validatePassword, trigger: "blur" },
],
confirm_password: [
{ required: true, message: "请再次输入密码", trigger: "change" },
{ validator: validateConfirmPassword, trigger: "blur" },
],
phone: [
{ required: true, message: "请输入手机号码", trigger: "change" },
{ validator: validatePhone, trigger: "blur" },
],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
},
hidePassword: true,
hideConfirmPassword: true,
countDown: 0,
countDownTimer: null,
};
},
methods: {
getMsgCode() {
this.$refs.form.validateField("phone", (errMsg) => {
if (!errMsg) {
this.$api.general.getCode(this.formData.phone).then(({ data }) => {
if (data.success == 1) {
this.countDownAction();
}
});
}
});
},
countDownAction() {
this.countDown = 60;
if (this.countDownTimer) {
clearInterval(this.countDownTimer);
}
this.countDownTimer = setInterval(() => {
if (this.countDown > 0) {
this.countDown--;
} else {
clearInterval(this.countDownTimer);
}
}, 1000);
},
submitAction() {
this.$refs.form.validate((valid) => {
if (valid) {
let formData = {
...this.formData,
password: md5(this.formData.password),
};
delete formData.confirm_password;
this.$api.general.registerlUser(formData).then(({ data }) => {
if (data.success == 1) {
this.$message({
message: "注册成功",
type: "success",
});
this.$emit("success");
} else {
this.$message({
message: data.errMsg || "注册失败",
type: "error",
});
}
});
}
});
},
},
};
</script>
<style lang="less" scoped>
.msg-code {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
> .bg-identify {
margin-left: 6px;
flex-shrink: 0;
}
}
</style>
\ No newline at end of file
src/components/register-success.vue 0 → 100644
View file @ 9476148b
<template>
<div class="register-success">
<div class="success-status">
<div class="status-icon">
<img src="@/assets/imgs/ic_success.png" />
</div>
<div class="status-text">
<p>账号已注册</p>
<p>需完成实名认证后方可正常使用</p>
</div>
</div>
<div class="success-action">
<el-button type="primary" @click="successAction">
立即登录
</el-button>
</div>
</div>
</template>
<script>
export default {
name: "RegisterSuccess",
methods: {
successAction() {
this.$emit("login");
},
},
};
</script>
<style lang="less" scoped>
.register-success {
width: 500px;
height: 320px;
background-color: #ffffff;
box-shadow: 0px 6px 12px 0px rgba(0, 20, 53, 0.3);
border-radius: 12px;
padding: 90px 115px 0;
box-sizing: border-box;
overflow: hidden;
> .success-status {
display: flex;
justify-content: space-between;
align-items: center;
> .status-icon {
font-size: 0;
}
> .status-text {
> p {
margin: 0;
line-height: 2;
&:nth-child(1) {
font-size: 18px;
color: #242c43;
}
&:nth-child(2) {
font-size: 14px;
color: #8890a7;
}
}
}
}
> .success-action {
margin-top: 40px;
}
}
</style>
\ No newline at end of file
src/page/login/index.vue
View file @ 9476148b
<template>
<div class="login-bg">
<div class="login-box">
<p class="login-title">登录</p>
<el-form :model="form" ref="form" class="login_forms">
<el-form-item>
<el-input v-model.trim="form.userid" autofocus="autofocus" placeholder="请输入账号" @keyup.enter="login_remember_info()"></el-input>
</el-form-item>
<el-form-item>
<el-input type="password" v-model.trim="form.password" placeholder="请输入密码" @keyup.enter="login_remember_info()">
<!-- <span
slot="suffix"
:title="visible ? '显示密码' : '隐藏密码'"
@click="changePass()"
style="cursor: pointer"
:class="visible ? 'eye_dis' : 'eye'"
></span> -->
</el-input>
</el-form-item>
<el-form-item prop="yzm" class="yzm">
<div class="yzm_ctx">
<el-input class="yzm_ipt" v-model.trim="form.yzm" placeholder="请输入验证码" :validate-event="false" @keyup.enter="login_remember_info()"></el-input>
<img class="yzm_img" title="看不清？换一张" :src="imgSrc" @click="getImg()" />
</div>
</el-form-item>
<div class="apaas_button">
<el-button class="btn_sub" type="primary" @click.prevent="login_remember_info()">登 录</el-button>
<div class="login-container">
<div class="bg-main">
<div class="bg-logo">
<img class="logo" src="../../assets/imgs/login_img_logo.png" />
<!-- <span>BD-aPaaS</span> -->
</div>
</el-form>
<div class="bg-content">
<bg-tabs
class="login-tab"
v-model="loginTab"
style="min-height: 450px;"
v-if="pageType === 'login'"
>
<bg-tab label="账号密码登录" name="account">
<LoginByAccount @register="switchPageType('register')" />
</bg-tab>
</bg-tabs>
</div>
</div>
<p class="bg-msg" v-if="pageType !== 'register'">
登录即代表您已同意 <span>《BD-aPaaS平台用户协议与隐私政策》</span>
</p>
</div>
</div>
</template>
<script>
import { setCookie, clearCookie } from "../../services/cookie.js";
import menu from '../../router/function'
import {generateRoutes} from '../../router/index'
import inputTable from '../../components/input-table.vue';
import inputObjectTable from '../../components/input-object-table.vue';
import CryptoJS from "crypto-js";
export default {
props: {},
components: {
inputTable,
inputObjectTable
},
data() {
return {
form: {
userid: "",
password: "",
yzm: "",
</template>
<script>
import LoginByAccount from "@/components/login-by-account.vue";
// import LoginByCode from "@/components/login-by-code.vue";
// import RegisterPersonalUser from "@/components/register-personal-user.vue";
// import RegisterFrimUser from "@/components/register-firm-user.vue";
// import RegisterOrgUser from "@/components/register-org-user.vue";
// import RegisterSuccess from "@/components/register-success.vue";
export default {
name: "Index",
components: {
LoginByAccount,
// LoginByCode,
// RegisterPersonalUser,
// RegisterFrimUser,
// RegisterOrgUser,
// RegisterSuccess,
},
data() {
return {
pageType: "login", // login（登录） / register（注册） / success（认证）
loginTab: "account", // account（账号密码登录） / or register（短信验证码登录）
registerTab: "personal", // personal（个人用户） / firm（企业用户） / org（政府机构用户）
};
},
methods: {
switchPageType(type) {
this.pageType = type;
},
imgSrc: "",
};
},
watch: {},
computed: {},
created() {
console.log(111);
this.getImg();
},
mounted() {},
methods: {
getMenuObj(menu,parentRowPath,menuObj){
menu.forEach((e,idx) => {
e.rowPath = parentRowPath + '.' + idx
menuObj[e.path] = e
if(e.children&&e.children.length){
this.getMenuObj(e.children,e.rowPath,menuObj)
}
});
},
getUser() {
this.$axios.get(`/apaas/system/v5/user/getUserInfo`).then((res) => {
if (res.data.code == 200) {
this.$store.commit("setUserInfo", res.data.data);
// if (res.data.data.userType == 1) {
//超管
this.$store.commit("setMenu", menu.adminMenu);
menu.menuToRouter(menu.adminMenu)
this.$store.commit('setRoute',menu.adminMenu)
//存储菜单对象信息
let menuObj = {}
this.getMenuObj(menu.adminMenu,'',menuObj)
this.$store.commit('setMenuObj',menuObj)
// }
generateRoutes()
// this.$router.push("/");
//跳转到工作台页面
window.location.href = '/apaas/portal/ui/#/'
};
</script>
<style lang="scss" scoped>
.login-container {
width: 100vw;
height: calc(100vh - 56px);
background-image: url("@/assets/imgs/login_ysgz.jpg");
background-size: cover;
background-position: center center;
position: relative;
.bg-main {
position: absolute;
top: 50%;
right: 0;
margin-right: 16vw;
margin-bottom: 80px;
transform: translateY(calc(-50%));
width: 500px;
max-height: calc(100vh - 100px);
overflow: hidden auto;
&::-webkit-scrollbar {
width: 16px;
height: 1px;
}
/* &::-webkit-scrollbar-track {
border-radius: 8px;
box-shadow: 8px 0 0 #f4f4f4 inset;
border: 4px solid rgba(0, 0, 0, 0);
} */
&::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: 8px 0 0 #a5adb7 inset;
border: 4px solid rgba(0, 0, 0, 0);
}
> .bg-logo {
display: flex;
justify-content: center;
align-items: center;
.logo{
width: 450px;
}
> span {
font-size: 36px;
color: #ffffff;
margin-left: 25px;
}
});
},
login_remember_info() {
if (!this.form.userid) {
return this.$message.error("请输入账号");
}
if (!this.form.password) {
return this.$message.error("请输入密码");
> .bg-content {
}
if (!this.form.yzm) {
return this.$message.error("请输入验证码");
}
> .bg-msg {
position: absolute;
bottom: 70px;
left: 0;
width: 100%;
font-size: 14px;
line-height: 20px;
color: #bcc1d0;
text-align: center;
> span {
color: #fff;
cursor: pointer;
}
this.$axios
.get(`/apaas/system/v5/user/verifyCaptcha?id=${this.imgId}&value=${this.form.yzm}`)
.then((res) => {
if (res.data.code == 200) {
this.login();
} else {
this.$message.error(res.data.data);
}
});
},
login() {
this.$axios
.post(`/apaas/system/v5/user/login`, {
system_account: this.form.userid,
password: CryptoJS.AES.encrypt(this.form.password,"swuE9cmCZQwrkYRV").toString(),
})
.then((res) => {
if (res.data.code == 200) {
let data = res.data.data;
// console.log(data);
// setCookie("bgToken", data.name);
this.getUser();
} else {
this.$message.error(res.data.desc);
}
});
},
getImg() {
this.$axios.get(`/apaas/system/v5/user/getCaptcha??width=240&height=32`).then((res) => {
if (res.data.code == 200) {
this.imgId = res.data.data.id;
this.imgSrc = res.data.data.captcha;
}
});
},
},
};
</script>
<style scoped>
.login-bg {
width: 100%;
height: 100%;
background-image: url("../../assets/imgs/bg.png");
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
.login-box {
width: 480px;
height: 401px;
background-color: #ffffff;
box-shadow: 0px 6px 12px 0px rgba(0, 20, 53, 0.3);
border-radius: 6px;
padding: 40px;
}
.login-title {
font-size: 24px;
font-weight: 600;
color: #202531;
text-align: center;
margin-bottom: 40px;
}
.yzm_ipt {
width: 240px;
}
.yzm_img {
vertical-align: middle;
width: 150px;
height: 32px;
margin-left: 10px;
display: inline-block;
}
.btn_sub {
width: 400px;
height: 40px;
/* line-height: 20px; */
background-color: #2b4695;
border-radius: 4px;
font-size: 18px;
font-weight: 600;
padding: 0;
color: #ffffff;
margin-top: 20px;
}
</style>
}
}
</style>
\ No newline at end of file
src/page/login/index1.vue 0 → 100644
View file @ 9476148b
<template>
<div class="login-bg">
<div class="login-box">
<p class="login-title">登录</p>
<el-form :model="form" ref="form" class="login_forms">
<el-form-item>
<el-input v-model.trim="form.userid" autofocus="autofocus" placeholder="请输入账号" @keyup.enter="login_remember_info()"></el-input>
</el-form-item>
<el-form-item>
<el-input type="password" v-model.trim="form.password" placeholder="请输入密码" @keyup.enter="login_remember_info()">
<!-- <span
slot="suffix"
:title="visible ? '显示密码' : '隐藏密码'"
@click="changePass()"
style="cursor: pointer"
:class="visible ? 'eye_dis' : 'eye'"
></span> -->
</el-input>
</el-form-item>
<el-form-item prop="yzm" class="yzm">
<div class="yzm_ctx">
<el-input class="yzm_ipt" v-model.trim="form.yzm" placeholder="请输入验证码" :validate-event="false" @keyup.enter="login_remember_info()"></el-input>
<img class="yzm_img" title="看不清？换一张" :src="imgSrc" @click="getImg()" />
</div>
</el-form-item>
<div class="apaas_button">
<el-button class="btn_sub" type="primary" @click.prevent="login_remember_info()">登 录</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
import { setCookie, clearCookie } from "../../services/cookie.js";
import menu from '../../router/function'
import {generateRoutes} from '../../router/index'
import inputTable from '../../components/input-table.vue';
import inputObjectTable from '../../components/input-object-table.vue';
import CryptoJS from "crypto-js";
export default {
props: {},
components: {
inputTable,
inputObjectTable
},
data() {
return {
form: {
userid: "",
password: "",
yzm: "",
},
imgSrc: "",
};
},
watch: {},
computed: {},
created() {
console.log(111);
this.getImg();
},
mounted() {},
methods: {
getMenuObj(menu,parentRowPath,menuObj){
menu.forEach((e,idx) => {
e.rowPath = parentRowPath + '.' + idx
menuObj[e.path] = e
if(e.children&&e.children.length){
this.getMenuObj(e.children,e.rowPath,menuObj)
}
});
},
getUser() {
this.$axios.get(`/apaas/system/v5/user/getUserInfo`).then((res) => {
if (res.data.code == 200) {
this.$store.commit("setUserInfo", res.data.data);
// if (res.data.data.userType == 1) {
//超管
this.$store.commit("setMenu", menu.adminMenu);
menu.menuToRouter(menu.adminMenu)
this.$store.commit('setRoute',menu.adminMenu)
//存储菜单对象信息
let menuObj = {}
this.getMenuObj(menu.adminMenu,'',menuObj)
this.$store.commit('setMenuObj',menuObj)
// }
generateRoutes()
// this.$router.push("/");
//跳转到工作台页面
window.location.href = '/apaas/portal/ui/#/'
}
});
},
login_remember_info() {
if (!this.form.userid) {
return this.$message.error("请输入账号");
}
if (!this.form.password) {
return this.$message.error("请输入密码");
}
if (!this.form.yzm) {
return this.$message.error("请输入验证码");
}
this.$axios
.get(`/apaas/system/v5/user/verifyCaptcha?id=${this.imgId}&value=${this.form.yzm}`)
.then((res) => {
if (res.data.code == 200) {
this.login();
} else {
this.$message.error(res.data.data);
}
});
},
login() {
this.$axios
.post(`/apaas/system/v5/user/login`, {
system_account: this.form.userid,
password: CryptoJS.AES.encrypt(this.form.password,"swuE9cmCZQwrkYRV").toString(),
})
.then((res) => {
if (res.data.code == 200) {
let data = res.data.data;
// console.log(data);
// setCookie("bgToken", data.name);
this.getUser();
} else {
this.$message.error(res.data.desc);
}
});
},
getImg() {
this.$axios.get(`/apaas/system/v5/user/getCaptcha??width=240&height=32`).then((res) => {
if (res.data.code == 200) {
this.imgId = res.data.data.id;
this.imgSrc = res.data.data.captcha;
}
});
},
},
};
</script>
<style scoped>
.login-bg {
width: 100%;
height: 100%;
background-image: url("../../assets/imgs/bg.png");
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
.login-box {
width: 480px;
height: 401px;
background-color: #ffffff;
box-shadow: 0px 6px 12px 0px rgba(0, 20, 53, 0.3);
border-radius: 6px;
padding: 40px;
}
.login-title {
font-size: 24px;
font-weight: 600;
color: #202531;
text-align: center;
margin-bottom: 40px;
}
.yzm_ipt {
width: 240px;
}
.yzm_img {
vertical-align: middle;
width: 150px;
height: 32px;
margin-left: 10px;
display: inline-block;
}
.btn_sub {
width: 400px;
height: 40px;
/* line-height: 20px; */
background-color: #2b4695;
border-radius: 4px;
font-size: 18px;
font-weight: 600;
padding: 0;
color: #ffffff;
margin-top: 20px;
}
</style>
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