Skip to content

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

登录注册

parent 731715cd
Hide whitespace changes
Inline Side-by-side
Showing with 1457 additions and 301 deletions
src/App.vue
View file @ 15b38901
...@@ -13,6 +13,16 @@ ...@@ -13,6 +13,16 @@
<div class="bg-main view"> <div class="bg-main view">
<login></login> <login></login>
</div> </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>
<div class="container" v-else-if="$route.path=='/404'"> <div class="container" v-else-if="$route.path=='/404'">
<div class="bg-main view"> <div class="bg-main view">
...@@ -28,11 +38,15 @@ ...@@ -28,11 +38,15 @@
import bgMenu from '@/components/bg-menu.vue' import bgMenu from '@/components/bg-menu.vue'
import login from '@/page/login/index.vue' import login from '@/page/login/index.vue'
import page404 from '@/page/404.vue' import page404 from '@/page/404.vue'
import registe from '@/page/registe/index.vue'
import password from '@/page/password/index.vue'
export default { export default {
components:{ components:{
bgMenu, bgMenu,
login, login,
page404, page404,
registe,
password
}, },
computed:{ computed:{
msgBoxFlag(){ msgBoxFlag(){
...@@ -48,10 +62,10 @@ export default { ...@@ -48,10 +62,10 @@ export default {
return this.$store.state.menuObj return this.$store.state.menuObj
}, },
navShow(){ navShow(){
return false||!['/','/404','/login'].includes(this.$route.path) return false||!['/','/404','/login','/registe','/password'].includes(this.$route.path)
}, },
pageShow(){ pageShow(){
return false||!['/404','/login'].includes(this.$route.path) return false||!['/404','/login','/registe','/password'].includes(this.$route.path)
}, },
rowPath(){ rowPath(){
if(this.pageShow&&this.$store.state.userInfo){ if(this.pageShow&&this.$store.state.userInfo){
......
src/assets/css/index.css
View file @ 15b38901
...@@ -1563,3 +1563,21 @@ border-radius:8px; ...@@ -1563,3 +1563,21 @@ border-radius:8px;
color: #d75138; 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 @@ ...@@ -11,9 +11,7 @@
@click="changeActiveName(item, index)"> @click="changeActiveName(item, index)">
{{ item.label }} {{ item.label }}
</li> </li>
<li>
<!-- empty -->
</li>
</ul> </ul>
</div> </div>
<div class="bg-tabs-content"> <div class="bg-tabs-content">
......
src/bg-ui/index.scss
View file @ 15b38901
...@@ -837,7 +837,7 @@ a { ...@@ -837,7 +837,7 @@ a {
.bg-tabs { .bg-tabs {
background-color: #ffffff; 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; border-radius: 12px;
overflow: hidden; overflow: hidden;
...@@ -862,9 +862,10 @@ a { ...@@ -862,9 +862,10 @@ a {
align-items: center; align-items: center;
padding: 8px; padding: 8px;
border-bottom: 1px solid #e6e9ef; border-bottom: 1px solid #e6e9ef;
font-size: 16px; font-size: 20px;
line-height: 25px; line-height: 25px;
color: #404a62; color: #404a62;
background: #f7f7f9;
cursor: pointer; cursor: pointer;
&.current { &.current {
...@@ -874,18 +875,19 @@ a { ...@@ -874,18 +875,19 @@ a {
border-right: 1px solid #e6e9ef; border-right: 1px solid #e6e9ef;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
border-left: 1px solid #e6e9ef; border-left: 1px solid #e6e9ef;
color: #e56600; color: #3759be;
background-color: #fff;
overflow: hidden; overflow: hidden;
&::before { // &::before {
content: ""; // content: "";
position: absolute; // position: absolute;
top: 0; // top: 0;
left: 0; // left: 0;
width: 100%; // width: 100%;
height: 4px; // height: 4px;
background-color: #e56600; // background-color: #e56600;
} // }
} }
&:first-child { &:first-child {
......
src/components/login-by-account.vue
View file @ 15b38901
<template> <template>
<div class="login-by-account"> <div class="login-by-account">
<el-form <el-form
ref="loginForm" ref="loginFormRef"
label-position="top" label-position="top"
:model="loginForm" :model="loginForm"
:rules="steploginFormRules" :rules="steploginFormRules"
> >
<el-form-item label="账号" prop="userid"> <el-form-item prop="userid">
<el-input <el-input
v-model="loginForm.userid" v-model="loginForm.userid"
autofocus="autofocus"
placeholder="请输入账号" placeholder="请输入账号"
@keyup.enter.native="loginAction()" @keyup.enter.native="loginAction()"
/> />
</el-form-item> </el-form-item>
<el-form-item label="密码" prop="password"> <el-form-item prop="password">
<el-input <el-input
:type="hidePassword ? 'password' : 'text'" :type="hidePassword ? 'password' : 'text'"
v-model="loginForm.password" v-model="loginForm.password"
...@@ -30,134 +29,141 @@ ...@@ -30,134 +29,141 @@
></span> ></span>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="验证码" prop="yzm"> <el-form-item prop="yzm">
<div class="msg-code"> <div class="msg-code">
<el-input <el-input
v-model="loginForm.yzm" v-model="loginForm.yzm"
placeholder="请输入验证码" placeholder="请输入验证码"
@keyup.enter.native="loginAction()" @keyup.enter.native="loginAction()"
style="width: 240px"
/> />
<img <div class="yzm_img">
class="yzm_img" <img
title="看不清？换一张" title="看不清？换一张"
:src="imgSrc" :src="imgSrc"
@click="getImg()" @click="getImg()"
/> style="width: 100%"
/>
</div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item>
<el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="loginAction()" style="width: 100%"> <el-button type="primary" @click="loginAction()" style="width: 100%">
登 录 登 录
</el-button> </el-button>
</el-form-item> </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> </el-form>
</div> </div>
</template> </template>
<script> <script setup>
import CryptoJS from "crypto-js"; import CryptoJS from "crypto-js";
import { getCookie, clearCookie, setCookie } from "@/services/cookie.js"; import { getCookie, clearCookie, setCookie } from "@/services/cookie.js";
import menu from "../router/function"; import menu from "../router/function";
import { generateRoutes } from "../router/index"; 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 { const state = reactive({
name: "LoginByAccount", // 账号密码登录 loginForm: {
data() { userid: "",
return { password: "",
loginForm: { yzm: "",
userid: "", },
password: "", steploginFormRules: {
yzm: "", userid: [{ required: true, message: "请输入账号", trigger: "blur" }],
}, password: [{ required: true, message: "请输入密码", trigger: "blur" }],
steploginFormRules: { yzm: [{ required: true, message: "请输入验证码", trigger: "blur" }],
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: { imgId: "",
loginAction() { imgSrc: "",
if (this.rememberPassword) { identifyCode: "",
hidePassword: true,
rememberPassword: false,
})
const store = useStore()
const loginFormRef = ref(null)
const loginAction = () => {
if (state.rememberPassword) {
let userinfo = window.btoa( let userinfo = window.btoa(
encodeURI(`${this.loginForm.userid},${this.loginForm.password}`) encodeURI(`${state.loginForm.userid},${state.loginForm.password}`)
); );
setCookie("userinfo", userinfo); setCookie("userinfo", userinfo);
} else { } else {
clearCookie("userinfo"); clearCookie("userinfo");
} }
this.$refs.loginForm.validate((valid) => { loginFormRef.value.validate((valid) => {
if (valid) { if (valid) {
this.$axios axios.get(
.get( `/apaas/system/v5/user/verifyCaptcha?id=${state.imgId}&value=${state.loginForm.yzm}`
`/apaas/system/v5/user/verifyCaptcha?id=${this.imgId}&value=${this.loginForm.yzm}`
) )
.then((res) => { .then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.login(); login();
} else { } else {
this.$message.error(res.data.data); ElMessage.error(res.data.data);
} }
}); });
} }
}); });
}, }
login() { const login = () => {
this.$axios axios.post(`/apaas/system/v5/user/login`, {
.post(`/apaas/system/v5/user/login`, { system_account: state.loginForm.userid,
system_account: this.loginForm.userid, password: Decrypt(state.loginForm.password)
password: CryptoJS.AES.encrypt(
this.loginForm.password,
"swuE9cmCZQwrkYRV"
).toString(),
}) })
.then(({ data }) => { .then(({ data }) => {
if (data.code == 200) { if (data.code == 200) {
this.getUser(); getUser();
} else { } else {
this.getImg(true); getImg(true);
this.$message({ ElMessage.error(data.data);
message: data.data,
type: "error",
});
} }
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
}); });
}, }
getUserInfo() { const getUserInfo = () => {
return this.$axios.get(`/apaas/system/v5/user/getUserInfo`); return axios.get(`/apaas/system/v5/user/getUserInfo`);
}, }
getMenu(search) { const getMenu = (search) => {
return this.$axios.get(`/apaas/system/v5/menu/user/tree?search=${search}`); return axios.get(`/apaas/system/v5/menu/user/tree?search=${search}`);
}, }
getUser() { const getUser = () => {
Promise.all([this.getUserInfo(), this.getMenu('dadb2d3f-e263-48d1-9389-42acb9ea49f8')]).then((res) => { Promise.all([getUserInfo(), getMenu('dadb2d3f-e263-48d1-9389-42acb9ea49f8')]).then((res) => {
if (res[0].data.code == 200 && res[1].data.code == 200) { if (res[0].data.code == 200 && res[1].data.code == 200) {
let data = res[1].data.data&&res[1].data.data[0].children || []; 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) { // if (res.data.data.userType == 1) {
//超管 //超管
this.$store.commit("setMenu", data); store.commit("setMenu", data);
menu.menuToRouter(data); menu.menuToRouter(data);
this.$store.commit("setRoute", data); store.commit("setRoute", data);
//存储菜单对象信息 //存储菜单对象信息
let menuObj = {}; let menuObj = {};
this.getMenuObj(data, "", menuObj); getMenuObj(data, "", menuObj);
this.$store.commit("setMenuObj", menuObj); store.commit("setMenuObj", menuObj);
// } // }
generateRoutes(); generateRoutes();
// this.$router.push("/"); // this.$router.push("/");
...@@ -165,56 +171,67 @@ export default { ...@@ -165,56 +171,67 @@ export default {
window.location.href = "/apaas/portal/ui/#/"; window.location.href = "/apaas/portal/ui/#/";
} }
}); });
}, }
getMenuObj(menu, parentRowPath, menuObj) { const getMenuObj = (menu, parentRowPath, menuObj) => {
menu.forEach((e, idx) => { menu.forEach((e, idx) => {
e.rowPath = parentRowPath + "." + idx; e.rowPath = parentRowPath + "." + idx;
menuObj[e.path] = e; menuObj[e.path] = e;
if (e.children && e.children.length) { if (e.children && e.children.length) {
this.getMenuObj(e.children, e.rowPath, menuObj); getMenuObj(e.children, e.rowPath, menuObj);
} }
}); });
}, }
getImg(clearInput = false) { const getImg = (clearInput = false) => {
this.$axios axios.get(`/apaas/system/v5/user/getCaptcha??width=240&height=32`)
.get(`/apaas/system/v5/user/getCaptcha??width=240&height=32`)
.then((res) => { .then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.imgId = res.data.data.id; state.imgId = res.data.data.id;
this.imgSrc = res.data.data.captcha; state.imgSrc = res.data.data.captcha;
} }
}); });
if (clearInput) { if (clearInput) {
this.loginForm.yzm = ""; state.loginForm.yzm = "";
} }
}, }
}, onBeforeMount(() => {
created() { getImg();
this.getImg();
if (getCookie("userinfo")) { if (getCookie("userinfo")) {
let userinfo = window.atob(decodeURI(getCookie("userinfo"))).split(","); let userinfo = window.atob(decodeURI(getCookie("userinfo"))).split(",");
this.loginForm.userid = userinfo[0]; state.loginForm.userid = userinfo[0];
this.loginForm.password = userinfo[1]; state.loginForm.password = userinfo[1];
this.checked = true; state.checked = true;
this.rememberPassword = true; state.rememberPassword = true;
} else { } else {
this.checked = false; state.checked = false;
} }
}, })
}; const {loginForm, steploginFormRules, imgId, imgSrc, identifyCode, hidePassword, rememberPassword} = toRefs(state)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.msg-code { .login-by-account {
display: flex;
justify-content: space-between;
align-items: center;
> .bg-identify { .msg-code {
margin-left: 6px; display: flex;
flex-shrink: 0; 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> </style>
src/components/login-by-code.vue
View file @ 15b38901
<template> <template>
<div class="login-by-code"> <div class="login-by-code">
<el-form ref="loginForm" :model="loginForm" :rules="loginFormRules"> <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
<el-form-item prop="mobile"> <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 <el-input
v-model="loginForm.mobile" v-model="loginForm.mobile"
autofocus="autofocus" autofocus="autofocus"
...@@ -23,41 +9,53 @@ ...@@ -23,41 +9,53 @@
@keyup.enter.native="loginAction()" @keyup.enter.native="loginAction()"
/> />
</el-form-item> </el-form-item>
<el-form-item label="验证码" prop="code"> <el-form-item prop="code">
<el-input <div class="msg-code">
v-model="loginForm.code" <el-input
placeholder="请输入验证码" v-model="loginForm.code"
@keyup.enter.native="loginAction()" placeholder="请输入验证码"
> @keyup.enter.native="loginAction()"
<template slot="append"> style="width: 280px"
<a class="input-append disabled" v-if="countDown > 0"> >
{{ countDown }}秒后再次获取
</a> </el-input>
<a class="input-append" @click="getMsgCode" v-else> <div class="yzm_img">
获取验证码 <el-button type="primary" @click.prevent="getMsgCode()" style="width: 100%;height: 34px;">
</a> {{countDown > 0 ? countDown + '秒后再次获取' : '发送验证码'}}
</template> </el-button>
</el-input> <!-- <a class="input-append disabled" v-if="false && countDown > 0">
{{ countDown }}秒后再次获取
</a>
<a class="input-append" @click="getMsgCode" v-else>
获取验证码
</a> -->
</div>
</div>
</el-form-item> </el-form-item>
<el-form-item style="margin-top: 54px;"> <el-form-item style="margin-top: 54px;">
<el-button type="primary" @click.prevent="loginAction()"> <el-button type="primary" @click.prevent="loginAction()" style="width: 100%">
登 录 登 录
</el-button> </el-button>
</el-form-item> </el-form-item>
<el-form-item style="margin-top: 24px;"> <el-form-item style="margin-top: 24px;">
<el-button @click.prevent="$emit('register')"> <el-button class="register_btn" @click.prevent="$emit('register')" style="width: 100%">
还没有账户？立即注册&emsp;<i class="el-icon-arrow-right"></i> 还没有账号？前往注册&emsp; <bg-icon style="font-size: 12px; margin-right: 8px" icon="#bg-ic-arrow-right"></bg-icon>
</el-button> </el-button>
</el-form-item> </el-form-item>
<div>
<span class="fr forget_psd">忘记密码？</span>
</div>
</el-form> </el-form>
</div> </div>
</template> </template>
<script> <script setup>
export default { import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
name: "LoginByCode", // 短信验证码登录 import { ElMessage } from "element-plus";
data() { import axios from "@/request/http.js";
const validatePhone = (rule, value, callback) => {
const validatePhone = (rule, value, callback) => {
const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
setTimeout(() => { setTimeout(() => {
...@@ -67,90 +65,214 @@ ...@@ -67,90 +65,214 @@
callback(); callback();
} }
}); });
}; };
return { const state = reactive({
loginForm: { loginForm: {
mobile: "", mobile: "",
code: "", code: "",
}, },
loginFormRules: { loginFormRules: {
mobile: [ mobile: [
{ required: true, message: "请输入手机号码", trigger: "change" }, { required: true, message: "请输入手机号码", trigger: "blur" },
{ validator: validatePhone, trigger: "blur" }, { validator: validatePhone, trigger: "blur" },
], ],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }], code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
},
countDown: 0,
countDownTimer: null,
};
}, },
methods: { countDown: 0,
getMsgCode() { countDownTimer: null,
this.$refs.loginForm.validateField("mobile", (errMsg) => { })
if (!errMsg) {
this.$api.general.getCode(this.loginForm.mobile).then(({ data }) => { const loginFormRef = ref(null)
if (data.success == 1) {
this.countDownAction(); const getMsgCode = () => {
loginFormRef.value.validateField("mobile", (valid) => {
if (valid) {
axios.post('/apaas/system/v5/sms/verifyCode',{phone: state.loginForm.mobile}).then(({ data }) => {
if (data.code == 200) {
countDownAction();
} }
}); });
} }
}); });
}, // 获取验证码 };// 获取验证码
countDownAction() { const countDownAction = () => {
this.countDown = 60; state.countDown = 60;
if (this.countDownTimer) { if (state.countDownTimer) {
clearInterval(this.countDownTimer); clearInterval(state.countDownTimer);
} }
this.countDownTimer = setInterval(() => { state.countDownTimer = setInterval(() => {
if (this.countDown > 0) { if (state.countDown > 0) {
this.countDown--; state.countDown--;
} else { } else {
clearInterval(this.countDownTimer); clearInterval(state.countDownTimer);
} }
}, 1000); }, 1000);
}, }
loginAction() { const loginAction = () => {
this.$refs.loginForm.validate((valid) => { loginFormRef.value.validate((valid) => {
if (valid) { if (valid) {
this.$api.general axios.post(`/apaas/system/v5/user/phone/login`, {
.loginByCode(this.loginForm) phone: state.loginForm.mobile,
.then(({ data }) => { code: state.loginForm.code,
if (data.success == 1) { })
let redirect = "/apaas/ui/#/index"; .then(({ data }) => {
if (data.code == 200) {
getUser();
} else {
ElMessage.error(data.data);
}
})
.catch((error) => {
console.log(error);
});
}
});
} // 短信验证码登录
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 || [];
store.commit("setUserInfo", res[0].data.data);
// if (res.data.data.userType == 1) {
//超管
store.commit("setMenu", data);
menu.menuToRouter(data);
store.commit("setRoute", data);
//存储菜单对象信息
let menuObj = {};
getMenuObj(data, "", menuObj);
store.commit("setMenuObj", menuObj);
// }
generateRoutes();
// this.$router.push("/");
//跳转到工作台页面
window.location.href = "/apaas/portal/ui/#/";
}
});
}
// GIS重定向使用 const { loginForm, loginFormRules, countDown, countDownTimer } = toRefs(state);
if (this.$route.query.ReturnUrl) {
redirect = this.$route.query.ReturnUrl; // export default {
} // name: "LoginByCode", // 短信验证码登录
// data() {
// const validatePhone = (rule, value, callback) => {
// const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
// 前端重定向使用 // setTimeout(() => {
else if (this.$route.query.redirect) { // if (!reg.test(value)) {
redirect = `/apaas/ui/#${this.$route.query.redirect}`; // callback(new Error("请输入正确的手机号码"));
} // } else {
// callback();
// }
// });
// };
window.location.href = redirect; // return {
} else { // loginForm: {
this.$message({ // mobile: "",
message: data.errMsg || data.data || "登陆失败", // code: "",
type: "error", // },
}); // loginFormRules: {
} // mobile: [
}) // { required: true, message: "请输入手机号码", trigger: "change" },
.catch((error) => { // { validator: validatePhone, trigger: "blur" },
console.log(error); // ],
}); // 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> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.login-by-code { .login-by-code {
.msg-code {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.yzm_img {
flex: 1;
margin-left: 20px;
}
}
.el-form { .el-form {
.form-title { .form-title {
display: flex; display: flex;
......
src/page/login/index.vue
View file @ 15b38901
<template> <template>
<div class="login-container"> <div class="login-container">
<div class="bg-main"> <div class="bg-main">
<div class="bg-logo"> <!-- <div class="bg-logo">
<img class="logo" src="../../assets/imgs/login_img_logo.png" /> <img class="logo" src="../../assets/imgs/login_img_logo.png" />
<!-- <span>BD-aPaaS</span> --> </div> -->
</div>
<div class="bg-content"> <div class="bg-content">
<bg-tabs <bg-tabs
class="login-tab" class="login-tab"
v-model="loginTab" v-model="loginTab"
style="min-height: 450px;" style="min-height: 450px;width: 480px"
v-if="pageType === 'login'" v-if="pageType === 'login'"
> >
<bg-tab label="账号密码登录" name="account"> <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-tab>
</bg-tabs> </bg-tabs>
</div> </div>
</div> </div>
<!-- v-if="pageType !== 'register'" -->
<p class="bg-msg" v-if="pageType !== 'register'"> <div class="bg-msg">
登录即代表您已同意 <span>《BD-aPaaS平台用户协议与隐私政策》</span> <p>
</p> Copyright © 比格大数据, All Rights Reserved.
</p>
<p>
ICP备案序号：晋ICP备12000773号 | 晋公网安备 14010602060307号
</p>
<p>
法律声明 | 隐私政策
</p>
</div>
</div> </div>
</template> </template>
<script> <script setup>
import LoginByAccount from "@/components/login-by-account.vue"; 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 RegisterPersonalUser from "@/components/register-personal-user.vue";
// import RegisterFrimUser from "@/components/register-firm-user.vue"; // import RegisterFrimUser from "@/components/register-firm-user.vue";
// import RegisterOrgUser from "@/components/register-org-user.vue"; // import RegisterOrgUser from "@/components/register-org-user.vue";
// import RegisterSuccess from "@/components/register-success.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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login-container { .login-container {
width: 100vw; width: 100vw;
height: calc(100vh - 56px); height: calc(100vh - 56px);
background-image: url("@/assets/imgs/login_ysgz.jpg"); background-image: url("@/assets/imgs/bg_zhuce.png");
background-size: cover; background-size: 100% 100%;
background-position: center center; background-position: center center;
position: relative; position: relative;
...@@ -118,18 +123,17 @@ ...@@ -118,18 +123,17 @@
> .bg-msg { > .bg-msg {
position: absolute; position: absolute;
bottom: 70px; bottom: 10px;
left: 0; left: 0;
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: #bcc1d0; color: #616f94;
text-align: center; text-align: center;
> p {
> span { padding: 8px 0;
color: #fff;
cursor: pointer;
} }
} }
} }
</style> </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
<template>
<div class="registe-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="registe-content">
<div class="registe-header">
<div>业务系统注册</div>
<div class="registe-heade-sub">注册信息提示审批后即可登录</div>
</div>
<div class="registe-form">
<el-form
ref="infoFormRef"
:model="infoForm"
label-width="120px"
:rules="infoFormRules"
style="width: 90%"
>
<div class="registe-info">
<div class="title">
<div><span class="icon_box"></span> 基础信息</div>
<div class="dashed_line"></div>
</div>
<div class="info-form">
<el-form-item prop="organization_id" label="所属机构">
<el-select
v-model="infoForm.organization_id"
placeholder="请选择"
style="width: 100%">
<el-option label="item.role_name" value="item.role_id" />
<!-- <el-option v-for="item in roleList" :key="item.role_id" :label="item.role_name" :value="item.role_id" /> -->
</el-select>
</el-form-item>
<el-form-item prop="business_name" label="业务系统名称">
<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
remote
remote-show-suffix
:remote-method="remoteMethod"
:loading="loading"
style="width: 100%">
<el-option
v-for="item in devOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<template #empty>
<div class="select-empty">
<div>无匹配数据</div>
<el-button style="height: 32px;margin-top: 10px;" @click="addDevelop"> 新增</el-button>
</div>
</template>
</el-select>
</el-form-item>
<el-form-item prop="system_account" label="账号">
<el-input
v-model="infoForm.system_account"
placeholder="请输入"
/>
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input
v-model="infoForm.password"
placeholder="请输入"
/>
</el-form-item>
<el-form-item prop="confirm_password" label="确认密码">
<el-input
v-model="infoForm.confirm_password"
placeholder="请输入"
/>
</el-form-item>
<el-form-item prop="phone" label="手机号">
<el-input
v-model="infoForm.phone"
placeholder="请输入"
/>
</el-form-item>
<el-form-item prop="code" label="验证码">
<div class="msg-code">
<el-input
v-model="infoForm.code"
placeholder="请输入"
style="860px"
>
</el-input>
<div class="yzm_img">
<el-button type="primary" style="width: 100%;height: 34px;" @click="sendSms" :disabled="countDown">
{{countDown > 0 ? countDown + '秒后再次获取' : '发送验证码'}}
</el-button>
</div>
</div>
</el-form-item>
<el-form-item prop="business_desc" label="业务系统概述">
<el-input
type="textarea"
:rows="4"
v-model="infoForm.business_desc"
placeholder="请输入"
maxlength="200"
show-word-limit
/>
</el-form-item>
</div>
</div>
<div class="registe-info">
<div class="title">
<div><span class="icon_box"></span> 联系人信息</div>
<div class="dashed_line"></div>
</div>
<div class="info-form">
<el-form-item prop="contact_name" label="联系人">
<el-input
v-model="infoForm.contact_name"
placeholder="请输入"
/>
</el-form-item>
<el-form-item prop="contact_phone" label="联系电话">
<el-input
v-model="infoForm.contact_phone"
placeholder="请输入"
/>
</el-form-item>
</div>
</div>
</el-form>
</div>
<div class="registe-footer">
<el-button @click="router.go(-1)">返回登录页</el-button>
<el-button type="primary" @click="submit">注册</el-button>
</div>
</div>
<el-dialog v-model="dialogVisit" title="新增" width="520px" :before-close="handleCloseDialog" destroy-on-close>
<div class="dialog_form">
<el-form
ref="developFormRef"
:model="developForm"
label-width="120px"
:rules="developFormRules"
style="width: 90%"
>
<el-form-item prop="develop" label="开发厂商名称">
<el-input
v-model="developForm.develop"
placeholder="请输入"
/>
</el-form-item>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleCloseDialog">取消</el-button>
<el-button type="primary" @click="confirmAdd">确认</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, computed, onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import axios from "@/request/http.js";
import { Encrypt } from "@/services/secret.js"
import { ElMessage } from "element-plus";
const validateBusinessName = (rule, value, callback) => {
let reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
if (!reg.test(value)) {
callback(new Error("只能输入字母、数字和汉字"));
} else {
// let params = null;
// if (props.id) {
// params = { id: parseInt(props.id), business_name: value, organization_id: systemForm.organization_id };
// } else {
// params = { business_name: value, organization_id: systemForm.organization_id };
// }
let params = { business_name: value };
axios.post(`/apaas/system/v5/user/checkBusiness`, params).then((res) => {
if (res.data.code == 200) {
callback();
} else {
callback(new Error(res.data.data));
}
});
}
};
const validateSystemAccount = (rule, value, callback) => {
let reg = /^[a-zA-Z0-9]+$/;
if (!reg.test(value)) {
callback(new Error("只能输入字母和数字"));
} else {
// let params = null;
// if (props.id) {
// params = { id: parseInt(props.id), system_account: value };
// } else {
// params = { system_account: value };
// }
let params = { system_account: value };
axios.post(`/apaas/system/v5/user/checkAccount`, params).then((res) => {
if (res.data.code == 200) {
callback();
} else {
callback(new Error(res.data.data));
}
});
}
};
const checkPhoneRepet = (rule, value, callback) => {
let params = {phone: value};
// if (props.id){
// params = {id: parseInt(props.id),contact_phone: value,}
// }else {
// params = {id: 0,contact_phone: value}
// }
$axios.post(`/apaas/system/v5/user/checkPhone`,params)
.then((res) => {
if (res.data.code == 200) {
callback()
}else {
callback(new Error(res.data.data))
}
})
}
const router = useRouter();
const state = reactive({
infoForm: {
organization_id: "",
business_name: "",
develop_id: "",
system_account: "",
password: "",
confirm_password: "",
phone: "",
code: "",
business_desc: "",
contact_name: "",
contact_phone: ""
},
infoFormRules: {
organization_id: [{ required: true, message: "请选择开发厂商", trigger: "blur" }],
business_name: [
{ required: true, message: "请输入业务系统名称", trigger: "blur" },
{ validator: validateBusinessName, trigger: "blur" },],
develop_id: [{ required: true, message: "请选择开发厂商", trigger: "blur" }],
system_account: [
{ required: true, message: "请输入账号", trigger: "blur" },
{ validator: validateSystemAccount, trigger: "blur" },
],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
confirm_password: [{ required: true, message: "请确认密码", trigger: "blur" }],
phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
contact_name: [{ required: true, message: "请输入联系人", trigger: "blur" }],
contact_phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
},
developForm: {
develop: ""
},
developFormRules: {
develop: [{ required: true, message: "请输入开发厂商名称", trigger: "blur" }],
},
devOptions: [],
dialogVisit: false,
countDown: 0,
countDownTimer: null
})
const loading = ref(false)
const list = ref([])
const infoFormRef = ref(null)
const developFormRef = ref(null)
const remoteMethod = (query) => {
if (query) {
loading.value = true
setTimeout(() => {
loading.value = false
state.devOptions = list.value.filter((item) => {
return item.label.toLowerCase().includes(query.toLowerCase())
})
}, 200)
} else {
state.devOptions = []
}
}
const submit = () => {
infoFormRef.value.validate((valid) => {
if(valid) {
const params = {
organization_id: state.infoForm.organization_id,
business_name: state.infoForm.business_name,
business_desc: state.infoForm.business_desc,
system_account: state.infoForm.system_account,
password: Encrypt(state.infoForm.password),
develop_id: state.infoForm.develop_id,
contact_name: state.infoForm.contact_name,
contact_phone: state.infoForm.contact_phone,
phone: state.infoForm.phone,
code: state.infoForm.code
}
axios.post('/apaas/system/v5/user/register',params).then(({ data }) => {
if (data.code == 200) {
}else {
ElMessage.error(data.data);
}
});
}
})
}
const sendSms = () => {
infoFormRef.value.validateField("phone", (valid) => {
if (valid) {
axios.post('/apaas/system/v5/sms/verifyCode',{phone: state.infoForm.phone}).then(({ data }) => {
if (data.code == 200) {
countDownAction();
}
});
}
});
}
const countDownAction = () => {
state.countDown = 60;
if (state.countDownTimer) {
clearInterval(state.countDownTimer);
}
state.countDownTimer = setInterval(() => {
if (state.countDown > 0) {
state.countDown--;
} else {
clearInterval(state.countDownTimer);
}
}, 1000);
}
const addDevelop = () => {
state.dialogVisit = true;
}
const handleCloseDialog = () => {
state.dialogVisit = false;
}
const confirmAdd = () => {
developFormRef.value.validate((valid) => {
if(valid) {
}
})
}
const states = [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California'
]
onMounted(() => {
list.value = states.map((item) => {
return { value: `value:${item}`, label: `label:${item}` }
})
})
const { infoForm, infoFormRules, devOptions, dialogVisit, developForm, developFormRules, countDown, countDownTimer } = toRefs(state)
</script>
<style lang="scss" scoped>
.registe-container {
margin: 0 auto;
width: 1200px;
height: 100%;
.registe-content {
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px
rgba(0, 7, 101, 0.15);
border-radius: 6px;
// height: calc(100% - 100px);
.registe-header {
padding: 20px 0;
text-align: center;
font-size: 22px;
color: #1a1a1a;
font-weight: bold;
.registe-heade-sub {
font-size: 14px;
font-weight: 400;
color: #404a62;
padding: 10px 0;
}
}
.registe-form {
padding: 0 24px;
.title {
font-size: 18px;
color: #1a1a1a;
font-weight: 600;
margin-bottom: 10px;
display: flex;
align-items: center;
.icon_box {
display: inline-block;
width: 4px;
height: 14px;
background-color: #3759be;
border-radius: 2px;
margin-right: 5px;
}
.dashed_line {
flex: 1;
height: 1px;
margin: 0 10px;
border-bottom: dashed 1px #dadee7;
}
}
.msg-code {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.yzm_img {
flex: 1;
margin-left: 20px;
}
}
}
.registe-footer {
border-top: solid 1px #e6e9ef;
text-align: right;
padding: 24px;
}
}
.dialog_form {
margin: 20px 0;
}
}
</style>
\ No newline at end of file
src/router/index.js
View file @ 15b38901
//路由前端原则可以不写，但是需要在recorder中记录，防止以后忘记 //路由前端原则可以不写，但是需要在recorder中记录，防止以后忘记
//不用新增父路由的文件，父路由全部由parent/parent.vue来支撑 //不用新增父路由的文件，父路由全部由parent/parent.vue来支撑
import {createRouter, createWebHashHistory} from "vue-router"; import {
createRouter,
createWebHashHistory
} from "vue-router";
import store from '../store' import store from '../store'
//写入初始必须有的路由 //写入初始必须有的路由
//或者隐藏式路由，不会表现在菜单上，但是需要存在的路由 //或者隐藏式路由，不会表现在菜单上，但是需要存在的路由
const routes = [ const routes = [{
{
path: '/login', path: '/login',
name: 'login', name: 'login',
show:true, show: true,
component: () => import('../page/login/index.vue') 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: '/', path: '/',
name: 'index', name: 'index',
...@@ -20,13 +34,13 @@ const routes = [ ...@@ -20,13 +34,13 @@ const routes = [
}, },
{ {
path: '/404', path: '/404',
show:true, show: true,
component: () => import('../page/404.vue') component: () => import('../page/404.vue')
}, },
] ]
//重新创建router //重新创建router
function newRouterFunc(){ function newRouterFunc() {
return createRouter({ return createRouter({
history: createWebHashHistory(), history: createWebHashHistory(),
routes routes
...@@ -37,7 +51,7 @@ const router = newRouterFunc() ...@@ -37,7 +51,7 @@ const router = newRouterFunc()
function inWhiteList(toPath) { function inWhiteList(toPath) {
//配置白名单 //配置白名单
const whiteList = ['/login'] const whiteList = ['/login', '/registe', '/password']
const path = whiteList.find((value) => { const path = whiteList.find((value) => {
// 使用正则匹配 // 使用正则匹配
const reg = new RegExp('^' + value) const reg = new RegExp('^' + value)
...@@ -52,11 +66,13 @@ router.beforeEach((to, from, next) => { ...@@ -52,11 +66,13 @@ router.beforeEach((to, from, next) => {
console.log(store.state.route); console.log(store.state.route);
//已登录不可跳转登陆页 //已登录不可跳转登陆页
if(userInfo&&(to.path=='/login'||to.path=='/')){ if (userInfo && (to.path == '/login' || to.path == '/')) {
next({path:'/develop/account'}) next({
path: '/develop/account'
})
} }
// 检查to.path是否存在于免登陆白名单 // 检查to.path是否存在于免登陆白名单
if (inWhiteList(to.path)) { if (inWhiteList(to.path)) {
next() next()
...@@ -69,7 +85,7 @@ router.beforeEach((to, from, next) => { ...@@ -69,7 +85,7 @@ router.beforeEach((to, from, next) => {
path: '/login', path: '/login',
}) })
} else { } else {
} }
} }
...@@ -77,7 +93,9 @@ router.beforeEach((to, from, next) => { ...@@ -77,7 +93,9 @@ router.beforeEach((to, from, next) => {
if (to.matched.length !== 0) { if (to.matched.length !== 0) {
next() next()
} else { } else {
return next({ path: '/404' }) return next({
path: '/404'
})
} }
}) })
...@@ -87,12 +105,12 @@ router.beforeEach((to, from, next) => { ...@@ -87,12 +105,12 @@ router.beforeEach((to, from, next) => {
// router.onReady(() => { // router.onReady(() => {
// generateRoutes() // generateRoutes()
// }) // })
function addRoute(router,routers){ function addRoute(router, routers) {
routers.forEach(e => { routers.forEach(e => {
if(e.path[0]=='/'){ if (e.path[0] == '/') {
router.addRoute(e) router.addRoute(e)
if(e.children&&e.children.length){ if (e.children && e.children.length) {
addRoute(router,e.children) addRoute(router, e.children)
} }
} }
}); });
...@@ -104,15 +122,13 @@ export function generateRoutes() { ...@@ -104,15 +122,13 @@ export function generateRoutes() {
if (_asyncRoutes) { if (_asyncRoutes) {
//动态添加路由 //动态添加路由
addRoute(router,_asyncRoutes) addRoute(router, _asyncRoutes)
} }
router.addRoute( router.addRoute({
{ path: '/:pathMatch(.*)',
path: '/:pathMatch(.*)', redirect: '/404'
redirect: '/404' })
}
)
console.log(router.getRoutes()); console.log(router.getRoutes());
...@@ -124,7 +140,4 @@ export function resetRouter() { ...@@ -124,7 +140,4 @@ export function resetRouter() {
router.matcher = newRouter.matcher router.matcher = newRouter.matcher
} }
export default router 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) { function Decrypt(word) {
let decrypt = CryptoJS.AES.decrypt(word, key); let decrypt = CryptoJS.AES.decrypt(word, key);
let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8); let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString(); return decryptedStr.toString();
} }
function Encrypt(word) { function Encrypt(word) {
let encrypted = CryptoJS.AES.encrypt(word, key); let encrypted = CryptoJS.AES.encrypt(word, key);
return encrypted.toString(); return encrypted.toString();
} }
export {Decrypt , Encrypt} export {
\ No newline at end of file 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