|
|
@@ -1,157 +1,240 @@
|
|
|
<template>
|
|
|
- <!-- 全屏包裹容器 -->
|
|
|
- <div class="loginBg">
|
|
|
- <div class="loginBox">
|
|
|
- <div class="login_top">
|
|
|
- <img src="../../assets/school.png" alt="">
|
|
|
- <div class="top_title">深圳市荔园教育集团</div>
|
|
|
- <div>AI智慧校园平台</div>
|
|
|
- </div>
|
|
|
- <div class="login_content">
|
|
|
- 组织号
|
|
|
- <div class="input-container">
|
|
|
- <input type="text" placeholder="请输入组织号" class="input">
|
|
|
- </div>
|
|
|
- 账户
|
|
|
- <div class="input-container">
|
|
|
- <input type="text" placeholder="请输入账户" class="input">
|
|
|
- </div>
|
|
|
- 密码
|
|
|
- <div class="input-container">
|
|
|
- <input type="text" placeholder="请输入密码" class="input">
|
|
|
- </div>
|
|
|
- <button class="confirm">提交</button>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- 全屏包裹容器 -->
|
|
|
+ <div class="loginBg">
|
|
|
+ <div class="loginBox">
|
|
|
+ <div class="login_top">
|
|
|
+ <img src="../../assets/school.png" alt="" />
|
|
|
+ <div class="top_title">深圳市荔园教育集团</div>
|
|
|
+ <div>AI智慧校园平台</div>
|
|
|
+ </div>
|
|
|
+ <div class="login_content">
|
|
|
+ 组织号
|
|
|
+ <div class="input-container">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入组织号"
|
|
|
+ class="input"
|
|
|
+ v-model="org"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ 账户
|
|
|
+ <div class="input-container">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入账户"
|
|
|
+ class="input"
|
|
|
+ v-model="account"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ 密码
|
|
|
+ <div class="input-container">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ class="input"
|
|
|
+ v-model="password"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <button class="confirm" @click="loginFn()">提交</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- export default {
|
|
|
- name:'loginPage',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- orgId:'',
|
|
|
- account:'',
|
|
|
- password:''
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
+import { mapActions } from "vuex";
|
|
|
+export default {
|
|
|
+ name: "loginPage",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ org: "",
|
|
|
+ account: "",
|
|
|
+ password: "",
|
|
|
+ loading: false,
|
|
|
+ redirect:this.$route.query['redirect']
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions({
|
|
|
+ login: "user/login",
|
|
|
+ }),
|
|
|
+ loginFn() {
|
|
|
+ if (this.loading) return;
|
|
|
+
|
|
|
+ if (this.account.length <= 0) {
|
|
|
+ this.$message.error("请输入账号");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.password.length < 6 || /[\u4e00-\u9fa5]/.test(this.password)) {
|
|
|
+ this.$message.error("密码长度不少于6位或者密码包含特殊字符、中文");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ geetest_challenge: "",
|
|
|
+ geetest_validate: "",
|
|
|
+ geetest_seccode: "",
|
|
|
+ loginUsername: this.account.trim(),
|
|
|
+ loginPassword: window.btoa(this.password.trim()),
|
|
|
+ };
|
|
|
+ this.loading = true;
|
|
|
+ this.$ajax
|
|
|
+ .post("https://beta.api.cocorobo.cn/api/user", params)
|
|
|
+ .then(async (res) => {
|
|
|
+ console.log("res", res);
|
|
|
+ let _data = res.data[0][0];
|
|
|
+ if (_data.active === 1) {
|
|
|
+ window.localStorage["identity"] = JSON.stringify(_data.identity);
|
|
|
+ this.$message.success("登录成功");
|
|
|
+ await this.login();
|
|
|
+ this.$router.push({ path: this.redirect || "/" });
|
|
|
+ } else {
|
|
|
+ this.$message.error("登录失败");
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ if (e.response && e.response.data == "Wrong email or password") {
|
|
|
+ this.$message.error("账号或密码错误");
|
|
|
+ } else {
|
|
|
+ this.$message.error("登录失败");
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async getLoading() {
|
|
|
+ // 检查用户是否已登录
|
|
|
+ const hasToken = this.$store.getters.token;
|
|
|
+ if (hasToken) {
|
|
|
+ // 如果已登录，直接重定向
|
|
|
+ this.$router.push({ path: this.redirect || "/" });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const userid = await this.login();
|
|
|
+ if (userid) {
|
|
|
+ this.$router.push({ path: this.redirect || "/" });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getLoading();
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.loginBg {
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- background-image: url('../../assets/login.png');
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-image: url("../../assets/login.png");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
|
|
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
|
}
|
|
|
|
|
|
.loginBox {
|
|
|
- height: 533px;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- /* 添加投影提升层次感 */
|
|
|
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ height: 533px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ /* 添加投影提升层次感 */
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.loginBox img {
|
|
|
- width: 45px;
|
|
|
- height: 37px;
|
|
|
+ width: 45px;
|
|
|
+ height: 37px;
|
|
|
}
|
|
|
|
|
|
.login_top {
|
|
|
- margin-top: 36px;
|
|
|
- text-align: center;
|
|
|
+ margin-top: 36px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
.top_title {
|
|
|
- font-size: 25px;
|
|
|
- font-weight: 700;
|
|
|
+ font-size: 25px;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.login_top div {
|
|
|
- margin-top: 12px;
|
|
|
- color: #69727d;
|
|
|
+ margin-top: 12px;
|
|
|
+ color: #69727d;
|
|
|
}
|
|
|
-.login_content{
|
|
|
- margin: 33px;
|
|
|
- font-size: 14px;
|
|
|
- color: #59616f;
|
|
|
+.login_content {
|
|
|
+ margin: 33px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #59616f;
|
|
|
}
|
|
|
-.input{
|
|
|
- outline: none;
|
|
|
- width: 344px;
|
|
|
- height: 42px;
|
|
|
- border-radius: 10px;
|
|
|
- border: 1px solid #d1d5db;
|
|
|
- padding-left: 40px;
|
|
|
- font-size: 16px;
|
|
|
- margin-top: 5px;
|
|
|
- margin-bottom: 14px;
|
|
|
- color:#a3a9b4;
|
|
|
- line-height: 42px;
|
|
|
+.input {
|
|
|
+ outline: none;
|
|
|
+ width: 344px;
|
|
|
+ height: 42px;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #d1d5db;
|
|
|
+ padding-left: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ color: #a3a9b4;
|
|
|
+ line-height: 42px;
|
|
|
}
|
|
|
/* 设置占位符文字颜色 */
|
|
|
.input::placeholder {
|
|
|
- color: #a3a9b4; /* 替换为您想要的占位符颜色 */
|
|
|
- opacity: 1; /* 确保占位符不透明 */
|
|
|
+ color: #a3a9b4; /* 替换为您想要的占位符颜色 */
|
|
|
+ opacity: 1; /* 确保占位符不透明 */
|
|
|
}
|
|
|
|
|
|
.input-container {
|
|
|
- position: relative;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
.input-container:nth-child(1)::before {
|
|
|
- content: '';
|
|
|
- background-image: url('../../assets/organzation.png'); /* 组织号图片 */
|
|
|
- background-size: 20px 20px; /* 设置图片大小 */
|
|
|
- background-repeat: no-repeat;
|
|
|
- position: absolute;
|
|
|
- left: 10px; /* 图片距离输入框左边的距离 */
|
|
|
- top: 39%; /* 垂直居中 */
|
|
|
- transform: translateY(-50%); /* 垂直居中 */
|
|
|
- width: 20px; /* 图片宽度 */
|
|
|
- height: 20px; /* 图片高度 */
|
|
|
+ content: "";
|
|
|
+ background-image: url("../../assets/organzation.png"); /* 组织号图片 */
|
|
|
+ background-size: 20px 20px; /* 设置图片大小 */
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ position: absolute;
|
|
|
+ left: 10px; /* 图片距离输入框左边的距离 */
|
|
|
+ top: 39%; /* 垂直居中 */
|
|
|
+ transform: translateY(-50%); /* 垂直居中 */
|
|
|
+ width: 20px; /* 图片宽度 */
|
|
|
+ height: 20px; /* 图片高度 */
|
|
|
}
|
|
|
|
|
|
.input-container:nth-child(2)::before {
|
|
|
- content: '';
|
|
|
- background-image: url('../../assets/personal.png'); /* 账户图片 */
|
|
|
- background-size: 20px 20px; /* 设置图片大小 */
|
|
|
- background-repeat: no-repeat;
|
|
|
- position: absolute;
|
|
|
- left: 10px; /* 图片距离输入框左边的距离 */
|
|
|
- top: 41%; /* 垂直居中 */
|
|
|
- transform: translateY(-50%); /* 垂直居中 */
|
|
|
- width: 20px; /* 图片宽度 */
|
|
|
- height: 20px; /* 图片高度 */
|
|
|
+ content: "";
|
|
|
+ background-image: url("../../assets/personal.png"); /* 账户图片 */
|
|
|
+ background-size: 20px 20px; /* 设置图片大小 */
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ position: absolute;
|
|
|
+ left: 10px; /* 图片距离输入框左边的距离 */
|
|
|
+ top: 41%; /* 垂直居中 */
|
|
|
+ transform: translateY(-50%); /* 垂直居中 */
|
|
|
+ width: 20px; /* 图片宽度 */
|
|
|
+ height: 20px; /* 图片高度 */
|
|
|
}
|
|
|
|
|
|
.input-container:nth-child(3)::before {
|
|
|
- content: '';
|
|
|
- background-image: url('../../assets/password.png'); /* 密码图片 */
|
|
|
- background-size: 20px 20px; /* 设置图片大小 */
|
|
|
- background-repeat: no-repeat;
|
|
|
- position: absolute;
|
|
|
- left: 10px; /* 图片距离输入框左边的距离 */
|
|
|
- top: 41%; /* 垂直居中 */
|
|
|
- transform: translateY(-50%); /* 垂直居中 */
|
|
|
- width: 20px; /* 图片宽度 */
|
|
|
- height: 20px; /* 图片高度 */
|
|
|
+ content: "";
|
|
|
+ background-image: url("../../assets/password.png"); /* 密码图片 */
|
|
|
+ background-size: 20px 20px; /* 设置图片大小 */
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ position: absolute;
|
|
|
+ left: 10px; /* 图片距离输入框左边的距离 */
|
|
|
+ top: 41%; /* 垂直居中 */
|
|
|
+ transform: translateY(-50%); /* 垂直居中 */
|
|
|
+ width: 20px; /* 图片宽度 */
|
|
|
+ height: 20px; /* 图片高度 */
|
|
|
}
|
|
|
-.confirm{
|
|
|
- width: 384px;
|
|
|
- height: 40px;
|
|
|
- background: #0354d7;
|
|
|
- border: none;
|
|
|
- border-radius: 9px;
|
|
|
- color: #fff;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
+.confirm {
|
|
|
+ width: 384px;
|
|
|
+ height: 40px;
|
|
|
+ background: #0354d7;
|
|
|
+ border: none;
|
|
|
+ border-radius: 9px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
SanHQin