Skip to content

S
so-manage-ui
Commit 15b38901 authored by 何小勇's avatar 何小勇
Browse files
Options

登录注册

parent 731715cd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1457 additions and 301 deletions
src/App.vue
View file @ 15b38901
......@@ -13,6 +13,16 @@
<div class="bg-main view">
<login></login>
</div>
</div>
<div class="container" v-else-if="$route.path=='/registe'">
<div class="bg-main view">
<registe></registe>
</div>
</div>
<div class="container" v-else-if="$route.path=='/password'">
<div class="bg-main view">
<password></password>
</div>
</div>
<div class="container" v-else-if="$route.path=='/404'">
<div class="bg-main view">
......@@ -28,11 +38,15 @@
import bgMenu from '@/components/bg-menu.vue'
import login from '@/page/login/index.vue'
import page404 from '@/page/404.vue'
import registe from '@/page/registe/index.vue'
import password from '@/page/password/index.vue'
export default {
components:{
bgMenu,
login,
page404,
registe,
password
},
computed:{
msgBoxFlag(){
......@@ -48,10 +62,10 @@ export default {
return this.$store.state.menuObj
},
navShow(){
return false||!['/','/404','/login'].includes(this.$route.path)
return false||!['/','/404','/login','/registe','/password'].includes(this.$route.path)
},
pageShow(){
return false||!['/404','/login'].includes(this.$route.path)
return false||!['/404','/login','/registe','/password'].includes(this.$route.path)
},
rowPath(){
if(this.pageShow&&this.$store.state.userInfo){
......
src/assets/css/index.css
View file @ 15b38901
......@@ -1563,3 +1563,21 @@ border-radius:8px;
color: #d75138;
}
.register_btn {
background-color: #eff2fa;
border-radius: 4px;
border: solid 1px #b0bee8;
color: #3759be;
}
.forget_psd {
font-size: 14px;
color: #3759be;
cursor: pointer;
}
.select-empty {
color: #616f94;
text-align: center;
padding: 20px;
}
src/bg-ui/bg-tabs.vue
View file @ 15b38901
......@@ -11,9 +11,7 @@
@click="changeActiveName(item, index)">
{{ item.label }}
</li>
<li>
<!-- empty -->
</li>
</ul>
</div>
<div class="bg-tabs-content">
......
src/bg-ui/index.scss
View file @ 15b38901
......@@ -837,7 +837,7 @@ a {
.bg-tabs {
background-color: #ffffff;
box-shadow: 0px 6px 12px 0px rgba(0, 20, 53, 0.3);
box-shadow: 0px 4px 16px 0px rgba(18, 30, 0.03, 0.08);
border-radius: 12px;
overflow: hidden;
......@@ -862,9 +862,10 @@ a {
align-items: center;
padding: 8px;
border-bottom: 1px solid #e6e9ef;
font-size: 16px;
font-size: 20px;
line-height: 25px;
color: #404a62;
background: #f7f7f9;
cursor: pointer;
&.current {
......@@ -874,18 +875,19 @@ a {
border-right: 1px solid #e6e9ef;
border-bottom: 1px solid #fff;
border-left: 1px solid #e6e9ef;
color: #e56600;
color: #3759be;
background-color: #fff;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #e56600;
}
// &::before {
// content: "";
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 4px;
// background-color: #e56600;
// }
}
&:first-child {
......
src/components/login-by-account.vue
View file @ 15b38901
<template>
<div class="login-by-account">
<el-form
ref="loginForm"
ref="loginFormRef"
label-position="top"
:model="loginForm"
:rules="steploginFormRules"
>
<el-form-item label="账号" prop="userid">
<el-form-item 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-form-item prop="password">
<el-input
:type="hidePassword ? 'password' : 'text'"
v-model="loginForm.password"
......@@ -30,134 +29,141 @@
></span>
</el-input>
</el-form-item>
<el-form-item label="验证码" prop="yzm">
<el-form-item prop="yzm">
<div class="msg-code">
<el-input
v-model="loginForm.yzm"
placeholder="请输入验证码"
@keyup.enter.native="loginAction()"
style="width: 240px"
/>
<img
class="yzm_img"
title="看不清？换一张"
:src="imgSrc"
@click="getImg()"
/>
<div class="yzm_img">
<img
title="看不清？换一张"
:src="imgSrc"
@click="getImg()"
style="width: 100%"
/>
</div>
</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-item style="margin-top: 24px;">
<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>
</el-button>
</el-form-item>
<div class="regist_bottom">
<el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
<span class="fr forget_psd" @click.prevent="$emit('password')">忘记密码？</span>
</div>
</el-form>
</div>
</template>
<script>
<script setup>
import CryptoJS from "crypto-js";
import { getCookie, clearCookie, setCookie } from "@/services/cookie.js";
import menu from "../router/function";
import { generateRoutes } from "../router/index";
import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
import { Decrypt } from "@/services/secret.js"
import { useStore } from "vuex"
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,
};
const state = reactive({
loginForm: {
userid: "",
password: "",
yzm: "",
},
steploginFormRules: {
userid: [{ required: true, message: "请输入账号", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
yzm: [{ required: true, message: "请输入验证码", trigger: "blur" }],
},
methods: {
loginAction() {
if (this.rememberPassword) {
imgId: "",
imgSrc: "",
identifyCode: "",
hidePassword: true,
rememberPassword: false,
})
const store = useStore()
const loginFormRef = ref(null)
const loginAction = () => {
if (state.rememberPassword) {
let userinfo = window.btoa(
encodeURI(`${this.loginForm.userid},${this.loginForm.password}`)
encodeURI(`${state.loginForm.userid},${state.loginForm.password}`)
);
setCookie("userinfo", userinfo);
} else {
clearCookie("userinfo");
}
this.$refs.loginForm.validate((valid) => {
loginFormRef.value.validate((valid) => {
if (valid) {
this.$axios
.get(
`/apaas/system/v5/user/verifyCaptcha?id=${this.imgId}&value=${this.loginForm.yzm}`
axios.get(
`/apaas/system/v5/user/verifyCaptcha?id=${state.imgId}&value=${state.loginForm.yzm}`
)
.then((res) => {
if (res.data.code == 200) {
this.login();
login();
} else {
this.$message.error(res.data.data);
ElMessage.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(),
}
const login = () => {
axios.post(`/apaas/system/v5/user/login`, {
system_account: state.loginForm.userid,
password: Decrypt(state.loginForm.password)
})
.then(({ data }) => {
if (data.code == 200) {
this.getUser();
getUser();
} else {
this.getImg(true);
this.$message({
message: data.data,
type: "error",
});
getImg(true);
ElMessage.error(data.data);
}
})
.catch((error) => {
console.log(error);
});
},
getUserInfo() {
return this.$axios.get(`/apaas/system/v5/user/getUserInfo`);
},
getMenu(search) {
return this.$axios.get(`/apaas/system/v5/menu/user/tree?search=${search}`);
},
getUser() {
Promise.all([this.getUserInfo(), this.getMenu('dadb2d3f-e263-48d1-9389-42acb9ea49f8')]).then((res) => {
}
const getUserInfo = () => {
return axios.get(`/apaas/system/v5/user/getUserInfo`);
}
const getMenu = (search) => {
return axios.get(`/apaas/system/v5/menu/user/tree?search=${search}`);
}
const getUser = () => {
Promise.all([getUserInfo(), getMenu('dadb2d3f-e263-48d1-9389-42acb9ea49f8')]).then((res) => {
if (res[0].data.code == 200 && res[1].data.code == 200) {
let data = res[1].data.data&&res[1].data.data[0].children || [];
this.$store.commit("setUserInfo", res[0].data.data);
store.commit("setUserInfo", res[0].data.data);
// if (res.data.data.userType == 1) {
//超管
this.$store.commit("setMenu", data);
store.commit("setMenu", data);
menu.menuToRouter(data);
this.$store.commit("setRoute", data);
store.commit("setRoute", data);
//存储菜单对象信息
let menuObj = {};
this.getMenuObj(data, "", menuObj);
this.$store.commit("setMenuObj", menuObj);
getMenuObj(data, "", menuObj);
store.commit("setMenuObj", menuObj);
// }
generateRoutes();
// this.$router.push("/");
......@@ -165,56 +171,67 @@ export default {
window.location.href = "/apaas/portal/ui/#/";
}
});
},
getMenuObj(menu, parentRowPath, menuObj) {
}
const 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);
getMenuObj(e.children, e.rowPath, menuObj);
}
});
},
getImg(clearInput = false) {
this.$axios
.get(`/apaas/system/v5/user/getCaptcha??width=240&height=32`)
}
const getImg = (clearInput = false) => {
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;
state.imgId = res.data.data.id;
state.imgSrc = res.data.data.captcha;
}
});
if (clearInput) {
this.loginForm.yzm = "";
state.loginForm.yzm = "";
}
},
},
created() {
this.getImg();
}
onBeforeMount(() => {
getImg();
if (getCookie("userinfo")) {
let userinfo = window.atob(decodeURI(getCookie("userinfo"))).split(",");
this.loginForm.userid = userinfo[0];
this.loginForm.password = userinfo[1];
this.checked = true;
state.loginForm.userid = userinfo[0];
state.loginForm.password = userinfo[1];
state.checked = true;
this.rememberPassword = true;
state.rememberPassword = true;
} else {
this.checked = false;
state.checked = false;
}
},
};
})
const {loginForm, steploginFormRules, imgId, imgSrc, identifyCode, hidePassword, rememberPassword} = toRefs(state)
</script>
<style lang="scss" scoped>
.msg-code {
display: flex;
justify-content: space-between;
align-items: center;
.login-by-account {
> .bg-identify {
margin-left: 6px;
flex-shrink: 0;
.msg-code {
display: flex;
justify-content: space-between;
align-items: center;
.yzm_img {
flex: 1;
}
> .bg-identify {
margin-left: 6px;
flex-shrink: 0;
}
}
:deep() .el-input__wrapper {
background-color: #f7f8f9;
}
.regist_bottom {
line-height: 34px;
}
}
</style>
src/components/login-by-code.vue
View file @ 15b38901
This diff is collapsed.
src/page/login/index.vue
View file @ 15b38901
<template>
<div class="login-container">
<div class="bg-main">
<div class="bg-logo">
<!-- <div class="bg-logo">
<img class="logo" src="../../assets/imgs/login_img_logo.png" />
<!-- <span>BD-aPaaS</span> -->
</div>
</div> -->
<div class="bg-content">
<bg-tabs
class="login-tab"
v-model="loginTab"
style="min-height: 450px;"
style="min-height: 450px;width: 480px"
v-if="pageType === 'login'"
>
<bg-tab label="账号密码登录" name="account">
<LoginByAccount @register="switchPageType('register')" />
<LoginByAccount @register="switchPageType('account')" @password="password"/>
</bg-tab>
<bg-tab label="验证码登录" name="register">
<LoginByCode @register="switchPageType('register')" />
</bg-tab>
</bg-tabs>
</div>
</div>
<p class="bg-msg" v-if="pageType !== 'register'">
登录即代表您已同意 <span>《BD-aPaaS平台用户协议与隐私政策》</span>
</p>
<!-- v-if="pageType !== 'register'" -->
<div class="bg-msg">
<p>
Copyright © 比格大数据, All Rights Reserved.
</p>
<p>
ICP备案序号：晋ICP备12000773号 | 晋公网安备 14010602060307号
</p>
<p>
法律声明 | 隐私政策
</p>
</div>
</div>
</template>
<script>
<script setup>
import LoginByAccount from "@/components/login-by-account.vue";
// import LoginByCode from "@/components/login-by-code.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";
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const pageType = ref('login')
const loginTab = ref('account')
const registerTab = ref('registerTab')
const switchPageType = (type) => {
// pageType.value = type
router.push('/registe')
}
const password = () => {
router.push('/password')
}
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;
},
},
};
</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-image: url("@/assets/imgs/bg_zhuce.png");
background-size: 100% 100%;
background-position: center center;
position: relative;
......@@ -118,18 +123,17 @@
> .bg-msg {
position: absolute;
bottom: 70px;
bottom: 10px;
left: 0;
width: 100%;
font-size: 14px;
line-height: 20px;
color: #bcc1d0;
color: #616f94;
text-align: center;
> span {
color: #fff;
cursor: pointer;
> p {
padding: 8px 0;
}
}
}
</style>
src/page/password/account-form.vue 0 → 100644
View file @ 15b38901
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="accountForm"
:rules="formRules"
ref="accountRef"
style="max-width: 90%">
<el-form-item label="手机号" prop="phone">
<el-input v-model="accountForm.phone"/>
</el-form-item>
<el-form-item label="账号" prop="account">
<el-input v-model="accountForm.account" />
</el-form-item>
<el-form-item label="验证码" prop="code">
<div class="msg-code">
<el-input
v-model="accountForm.code"
placeholder="请输入"
style="860px"
>
</el-input>
<div class="yzm_img">
<el-button type="primary" @click="sendSms" style="width: 100%;height: 34px;">
发送验证码
</el-button>
</div>
</div>
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onBeforeMount, onMounted, computed } from "vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const props = defineProps({
});
const accountForm = reactive({
phone: "",
account: "",
code: ""
});
const formRules = reactive({
phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
account: [
{ required: true, message: "请输入账号", trigger: "blur" },
],
code: [
{ required: true, message: "请输入验证码", trigger: "blur" },
],
});
const accountRef = ref(null);
const emit = defineEmits(["action"]);
const submitForm = async () => {
if (!accountRef) return;
await accountRef.value.validate((valid, fields) => {
if (valid) {
emit("action", accountForm);
} else {
emit("action", null);
}
});
};
const clearForm = () => {
if (!accountRef) return;
accountRef.value.resetFields();
};
const setForm = (data) => {
Object.assign(accountForm, data);
};
const sendSms = () => {
}
onBeforeMount(() => {
});
onMounted(() => {});
defineExpose({ submitForm, clearForm, setForm });
</script>
<style lang="scss" scoped>
.msg-code {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.yzm_img {
flex: 1;
margin-left: 20px;
}
}
</style>
src/page/password/index.vue 0 → 100644
View file @ 15b38901
<template>
<div class="password_container">
<div class="bg-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/login' }"> 登录 </el-breadcrumb-item>
<el-breadcrumb-item > 忘记密码 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page_content flex_cloumn">
<div class="content_top apaas_scroll">
<div class="content_process">
<div>
<el-steps :active="step">
<el-step title="" :class="{ process_complete: step > 1 }">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 0"
><bg-icon class="step_icon" icon="#bg-ic-file-editing"></bg-icon
></span>
<span class="circle" v-else></span>
验证账号
</span>
</template>
</el-step>
<el-step title="" :class="{ process_complete: step > 2 }">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 1"
><bg-icon class="step_icon" icon="#bg-ic-file-lock"></bg-icon
></span>
<span class="circle" v-else></span>
确认密码
</span>
</template>
</el-step>
<el-step title="">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 2"
><bg-icon class="step_icon" icon="#bg-ic-file-success"></bg-icon
></span>
<span class="circle" v-else></span>
完成
</span>
</template>
</el-step>
</el-steps>
</div>
</div>
<div class="content_main">
<accountFrom
v-show="step === 1"
ref="accountFromRef"
:form-type="route.query.id ? true : false"
:id="route.query.id"
@action="getAccountFromData"></accountFrom>
<passwordForm
v-show="step === 2"
ref="passwordFormRef"
:id="route.query.id"
@action="getPasswordFormData"></passwordForm>
<div class="process_end" v-show="step === 3">
<div>
<div>
<img v-if="successFlag" src="@/assets/imgs/img_data-complete.png" alt="" />
<img v-else src="@/assets/imgs/img_data-fail.png" alt="" />
</div>
<div class="font_bold">
{{
successFlag
? "密码修改成功"
: "密码修改失败"
}}
</div>
<el-button type="primary" @click="cancel">返回登录页</el-button>
<!-- <el-button v-if="!route.query.id" type="primary" @click="continueCreate">继续创建</el-button> -->
</div>
</div>
</div>
</div>
<div class="content_bottom" v-if="step !== 3">
<div v-show="step === 1">
<el-button @click="cancel">返回登录页</el-button>
<el-button type="primary" @click="nextStep">下一步</el-button>
</div>
<div v-show="step === 2">
<el-button @click="cancel">返回登录页</el-button>
<el-button type="primary" @click="previousStep">上一步</el-button>
<el-button type="primary" @click="submit">保存</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import accountFrom from "./account-form.vue";
import passwordForm from "./password-form.vue";
import { reactive, ref, onBeforeMount, toRefs, computed, onBeforeUnmount, onMounted } from "vue";
import CryptoJS from "crypto-js";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const route = useRoute();
const router = useRouter();
const step = ref(1);
const accountFromRef = ref(null);
const passwordFormRef = ref(null);
const formData = reactive({
phone: "",
account: "",
code: "",
new_password: "",
});
const successFlag = ref(false);
// 下一步
const nextStep = () => {
accountFromRef.value.submitForm();
};
//验证账号表单检验触发事件 data为null 校验失败
const getAccountFromData = (data) => {
if (data) {
Object.assign(formData, data);
step.value = 2;
} else {
}
};
//密码表单检验触发事件 data为null 校验失败
const getPasswordFormData = (data) => {
if (data) {
Object.assign(formData, data);
if (route.query.id) {
// console.log(formData);
// let params = {
// ...formData,
// id: parseInt(route.query.id),
// logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : "",
// };
// axios.post(`/apaas/system/v5/user/update`, params).then((res) => {
// if (res.data.code == 200) {
// successFlag.value = true;
// step.value = 3;
// } else {
// ElMessage.error(res.data.data);
// }
// });
} else {
// let params = {
// ...formData,
// logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : "",
// password: CryptoJS.AES.encrypt(formData.password, "swuE9cmCZQwrkYRV").toString(),
// };
// axios.put(`/apaas/system/v5/user/create`, params).then((res) => {
// if (res.data.code == 200) {
// successFlag.value = true;
// step.value = 3;
// } else {
// ElMessage.error(res.data.data);
// }
// });
}
}
};
//上一步
const previousStep = () => {
step.value--;
};
//提交表单
const submit = () => {
passwordFormRef.value.submitForm();
};
//继续创建 清空表单
const continueCreate = () => {
// accountFromRef.value.clearForm();
// passwordFormRef.value.clearForm();
// step.value = 1;
// successFlag.value = false;
};
//取消
const cancel = () => {
router.go(-1);
// router.push({
// path: "/develop/account",
// query: {
// id: formData.organization_id,
// },
// });
};
const getDetail = () => {
// axios.get(`/apaas/system/v5/user/detail/${route.query.id}`).then((res) => {
// if (res.data.code == 200) {
// const form = res.data.data;
// accountFromRef.value.setForm({
// organization_id: form.organization_id,
// system_role_id: form.system_role_id,
// logo: form.logo ? [{ url: form.logo }] : [],
// business_code: form.business_code,
// business_name: form.business_name,
// business_desc: form.business_desc,
// system_account: form.system_account,
// access_address: form.access_address,
// develop_id: form.develop_id,
// state: form.state,
// appid: form.app_id,
// appsecret: form.app_secret,
// });
// passwordFormRef.value.setForm({
// password_name: form.password_name,
// password_phone: form.password_phone,
// password_email: form.password_email,
// remark: form.remark,
// });
// } else {
// ElMessage.error(res.data.data);
// }
// });
};
onBeforeUnmount(() => {});
onMounted(() => {
// if (route.query.id) {
// getDetail();
// }
});
</script>
<style scoped>
.password_container {
margin: 0 auto;
width: 1200px;
height: 70%;
}
.flex_cloumn {
display: flex;
flex-direction: column;
}
.content_top {
flex: 1;
display: flex;
flex-direction: column;
overflow: auto;
}
/* .content_top::-webkit-scrollbar {
width: 5px;
height: 0px;
}
.content_top::-webkit-scrollbar-thumb {
background: #dedede;
border-radius: 10px;
height: 0px;
}
.content_top::-webkit-scrollbar-track {
background: transparent;
border-radius: 2px;
} */
.content_bottom {
height: 68px;
line-height: 68px;
text-align: right;
padding: 0 20px;
border-top: 1px solid #e6e9ef;
}
.content_process {
border-bottom: 1px solid #e6e9ef;
padding: 38px 16%;
}
.content_main {
flex: 1;
padding: 30px;
box-sizing: border-box;
}
.process_desc {
background-color: #fff;
display: inline-block;
position: absolute;
padding: 0 5px;
font-size: 18px;
color: #202531;
font-weight: bold;
}
.process_desc img {
height: 25px;
width: 25px;
vertical-align: middle;
}
.process_end {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.process_end div {
text-align: center;
}
.step_icon {
color: #fff;
font-weight: 600;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon_box {
display: inline-block;
background-color: #2b4695;
width: 48px;
height: 48px;
border-radius: 99px;
position: relative;
border: 3px solid #b0bee8;
vertical-align: middle;
}
.circle {
display: inline-block;
background-color: #a9b1c7;
width: 24px;
height: 24px;
border-radius: 99px;
position: relative;
border: 4px solid #e6e9ef;
vertical-align: middle;
}
.content_process :deep() .el-step.is-horizontal .el-step__line {
height: 4px;
}
.content_process :deep() .el-step__head.is-finish .el-step__line {
background: linear-gradient(to right, #2b4695 50%, #e6e9ef 50%);
}
.process_complete :deep() .el-step__head.is-finish .el-step__line {
background: linear-gradient(to right, #2b4695 100%, #e6e9ef 0%);
}
</style>
src/page/password/password-form.vue 0 → 100644
View file @ 15b38901
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="passwordForm"
:rules="passwordFormRules"
ref="passwordRef"
style="max-width: 90%">
<el-form-item label="新密码" prop="new_password">
<el-input v-model="passwordForm.new_password" />
</el-form-item>
<el-form-item label="确认密码" prop="confirm_password">
<el-input v-model="passwordForm.confirm_password" />
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
const passwordForm = reactive({
new_password: "",
confirm_password: "",
});
const props = defineProps({
});
const passwordFormRules = reactive({
new_password: [
{ required: true, message: "请输入新密码", trigger: "blur" },
],
confirm_password: [
{ required: true, message: "请确认密码", trigger: "blur" },
],
});
const passwordRef = ref(null);
const emit = defineEmits(["action"]);
const submitForm = async () => {
if (!passwordRef) return;
await passwordRef.value.validate((valid, fields) => {
if (valid) {
emit("action", passwordForm);
} else {
emit("action", null);
}
});
};
const clearForm = () => {
if (!passwordRef) return;
passwordRef.value.resetFields();
};
const setForm = (data) => {
Object.assign(passwordForm, data);
};
onMounted(() => {});
defineExpose({ submitForm, clearForm, setForm });
</script>
src/page/registe/index.vue 0 → 100644
View file @ 15b38901
This diff is collapsed.
src/router/index.js
View file @ 15b38901
//路由前端原则可以不写，但是需要在recorder中记录，防止以后忘记
//不用新增父路由的文件，父路由全部由parent/parent.vue来支撑
import {createRouter, createWebHashHistory} from "vue-router";
import {
createRouter,
createWebHashHistory
} from "vue-router";
import store from '../store'
//写入初始必须有的路由
//或者隐藏式路由，不会表现在菜单上，但是需要存在的路由
const routes = [
{
const routes = [{
path: '/login',
name: 'login',
show:true,
show: true,
component: () => import('../page/login/index.vue')
},
{
path: '/registe',
name: 'registe',
show: true,
component: () => import('../page/registe/index.vue')
},
{
path: '/password',
name: 'password',
show: true,
component: () => import('../page/password/index.vue')
},
{
path: '/',
name: 'index',
......@@ -20,13 +34,13 @@ const routes = [
},
{
path: '/404',
show:true,
show: true,
component: () => import('../page/404.vue')
},
]
//重新创建router
function newRouterFunc(){
function newRouterFunc() {
return createRouter({
history: createWebHashHistory(),
routes
......@@ -37,7 +51,7 @@ const router = newRouterFunc()
function inWhiteList(toPath) {
//配置白名单
const whiteList = ['/login']
const whiteList = ['/login', '/registe', '/password']
const path = whiteList.find((value) => {
// 使用正则匹配
const reg = new RegExp('^' + value)
......@@ -52,11 +66,13 @@ router.beforeEach((to, from, next) => {
console.log(store.state.route);
//已登录不可跳转登陆页
if(userInfo&&(to.path=='/login'||to.path=='/')){
next({path:'/develop/account'})
if (userInfo && (to.path == '/login' || to.path == '/')) {
next({
path: '/develop/account'
})
}
// 检查to.path是否存在于免登陆白名单
if (inWhiteList(to.path)) {
next()
......@@ -69,7 +85,7 @@ router.beforeEach((to, from, next) => {
path: '/login',
})
} else {
}
}
......@@ -77,7 +93,9 @@ router.beforeEach((to, from, next) => {
if (to.matched.length !== 0) {
next()
} else {
return next({ path: '/404' })
return next({
path: '/404'
})
}
})
......@@ -87,12 +105,12 @@ router.beforeEach((to, from, next) => {
// router.onReady(() => {
// generateRoutes()
// })
function addRoute(router,routers){
function addRoute(router, routers) {
routers.forEach(e => {
if(e.path[0]=='/'){
if (e.path[0] == '/') {
router.addRoute(e)
if(e.children&&e.children.length){
addRoute(router,e.children)
if (e.children && e.children.length) {
addRoute(router, e.children)
}
}
});
......@@ -104,15 +122,13 @@ export function generateRoutes() {
if (_asyncRoutes) {
//动态添加路由
addRoute(router,_asyncRoutes)
addRoute(router, _asyncRoutes)
}
router.addRoute(
{
path: '/:pathMatch(.*)',
redirect: '/404'
}
)
router.addRoute({
path: '/:pathMatch(.*)',
redirect: '/404'
})
console.log(router.getRoutes());
......@@ -124,7 +140,4 @@ export function resetRouter() {
router.matcher = newRouter.matcher
}
export default router
src/services/secret.js
View file @ 15b38901
const CryptoJS = require('crypto-js');
// const CryptoJS = require('crypto-js');
import * as CryptoJS from 'crypto-js'
const key = "swuE9cmCZQwrkYRV";
const key = "swuE9cmCZQwrkYRV";
function Decrypt(word) {
let decrypt = CryptoJS.AES.decrypt(word, key);
let decrypt = CryptoJS.AES.decrypt(word, key);
let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
}
function Encrypt(word) {
let encrypted = CryptoJS.AES.encrypt(word, key);
return encrypted.toString();
let encrypted = CryptoJS.AES.encrypt(word, key);
return encrypted.toString();
}
export {Decrypt , Encrypt}
\ No newline at end of file
export {
Decrypt,
Encrypt
}
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