|
|
@@ -0,0 +1,454 @@
|
|
|
+<template>
|
|
|
+ <div class="login">
|
|
|
+ <div class="login-content">
|
|
|
+ <!-- 公告栏 -->
|
|
|
+ <!-- <div class="announcement">
|
|
|
+ <div class="announcement-header">
|
|
|
+ <div class="announcement-bg">
|
|
|
+ 公示公告 <img src="../assets/img/装饰.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="announcement-list">
|
|
|
+ <div v-for="item in announcements" :key="item.noticeId" class="announcement-item"
|
|
|
+ :class="{ highlighted: item.show === true }">
|
|
|
+ <div class="announcement-item-header" @click="announcementChange(item)">
|
|
|
+ <el-tooltip class="item" effect="dark" :content="item.noticeTitle" placement="left-start">
|
|
|
+ <div class="announcement-title" :class="{ highlighted: item.show === true }">
|
|
|
+ {{ item.noticeTitle }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <div class="announcement-date">{{ item.updateTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="announcement-qs" v-if="item.show">
|
|
|
+ <div v-html="item.noticeContent"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <el-form
|
|
|
+ ref="loginForm"
|
|
|
+ :model="loginForm"
|
|
|
+ :rules="loginRules"
|
|
|
+ class="login-form"
|
|
|
+ >
|
|
|
+ <h3 class="title">邮箱登录</h3>
|
|
|
+ <el-form-item prop="username">
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.username"
|
|
|
+ type="text"
|
|
|
+ auto-complete="off"
|
|
|
+ placeholder="账号"
|
|
|
+ >
|
|
|
+ <svg-icon
|
|
|
+ slot="prefix"
|
|
|
+ icon-class="mail"
|
|
|
+ class="el-input__icon input-icon"
|
|
|
+ />
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
|
|
|
+ @keyup.enter.native="handleLogin">
|
|
|
+ <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="code" v-if="captchaEnabled">
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.code"
|
|
|
+ auto-complete="off"
|
|
|
+ placeholder="验证码"
|
|
|
+ style="width: 63%"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ >
|
|
|
+ <svg-icon
|
|
|
+ slot="prefix"
|
|
|
+ icon-class="validCode"
|
|
|
+ class="el-input__icon input-icon"
|
|
|
+ />
|
|
|
+ </el-input>
|
|
|
+ <div class="login-code">
|
|
|
+ <!-- <img :src="codeUrl" @click="getCode" class="login-code-img" /> -->
|
|
|
+ <!-- <el-button type="text">发送邮件</el-button> -->
|
|
|
+ <el-button
|
|
|
+ @click="sendEmail"
|
|
|
+ :disabled="isCountingDown"
|
|
|
+ class="sendEmail_btn"
|
|
|
+ style=""
|
|
|
+ >
|
|
|
+ {{ isCountingDown ? `重新发送 (${countdown}s)` : "发送验证码" }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-checkbox
|
|
|
+ v-model="loginForm.rememberMe"
|
|
|
+ style="margin: 0px 0px 25px 0px"
|
|
|
+ >记住密码</el-checkbox
|
|
|
+ >
|
|
|
+ <el-form-item style="width: 100%">
|
|
|
+ <el-button
|
|
|
+ round
|
|
|
+ :loading="loading"
|
|
|
+ size="medium"
|
|
|
+ type="primary"
|
|
|
+ style="width: 100%"
|
|
|
+ @click.native.prevent="handleLogin"
|
|
|
+ >
|
|
|
+ <span v-if="!loading">登 录</span>
|
|
|
+ <span v-else>登 录 中...</span>
|
|
|
+ </el-button>
|
|
|
+ <div style="float: right" v-if="register">
|
|
|
+ <router-link class="link-type" :to="'/register'"
|
|
|
+ >立即注册</router-link
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="">
|
|
|
+ <div>
|
|
|
+ <el-button type="text" @click="goLogin">账号密码登录</el-button>
|
|
|
+ <el-button type="text">数字登录证书</el-button
|
|
|
+ ><el-button type="text">短信验证码登录</el-button
|
|
|
+ ><el-button type="text">微信登录</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <!-- 底部 -->
|
|
|
+ <div class="el-login-footer">
|
|
|
+ <p>版权所有 上海市疾病预防控制中心</p>
|
|
|
+ <p>地址：上海市中申虹路1509号</p>
|
|
|
+ <p>电话：021-62758710 邮编：200336</p>
|
|
|
+ <p>
|
|
|
+ 提醒：本系统建议采用IE11或 Google chrome（谷歌)或火狐或奇安信的测览雅
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 公示公告
|
|
|
+import { listNotice } from "@/api/system/notice";
|
|
|
+import { getCodeImg, sendMail,verifyMail } from "@/api/login";
|
|
|
+import Cookies from "js-cookie";
|
|
|
+import { encrypt, decrypt } from "@/utils/jsencrypt";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Login",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isCountingDown: false, // 控制按钮禁用和倒计时
|
|
|
+ countdown: 60, // 倒计时初始值
|
|
|
+ timer: null, // 存储计时器的引用
|
|
|
+ loginForm: {
|
|
|
+ username: "admin",
|
|
|
+ password: "admin123",
|
|
|
+ rememberMe: false,
|
|
|
+ code: "",
|
|
|
+ uuid: "",
|
|
|
+ },
|
|
|
+ loginRules: {
|
|
|
+ username: [
|
|
|
+ { required: true, trigger: "blur", message: "请输入您的账号" },
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, trigger: "blur", message: "请输入您的密码" },
|
|
|
+ ],
|
|
|
+ code: [{ required: true, trigger: "change", message: "请输入验证码" }],
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ // 验证码开关
|
|
|
+ captchaEnabled: true,
|
|
|
+ // 注册开关
|
|
|
+ register: false,
|
|
|
+ redirect: undefined,
|
|
|
+ announcements: [
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler: function (route) {
|
|
|
+ this.redirect = route.query && route.query.redirect;
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.loginForm={}
|
|
|
+ // this.getCode();
|
|
|
+ this.getCookie();
|
|
|
+ this.getListNotice();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getListNotice() {
|
|
|
+ listNotice({ noticeType: 2 }).then((response) => {
|
|
|
+ response.rows.forEach((item) => {
|
|
|
+ item.show = false;
|
|
|
+ });
|
|
|
+ this.announcements = response.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ announcementChange(item) {
|
|
|
+ this.announcements.forEach((element) => {
|
|
|
+ if (element.noticeId === item.noticeId) {
|
|
|
+ element.show = !element.show;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // getCode() {
|
|
|
+ // getCodeImg().then((res) => {
|
|
|
+ // this.captchaEnabled =
|
|
|
+ // res.captchaEnabled === undefined ? true : res.captchaEnabled;
|
|
|
+ // if (this.captchaEnabled) {
|
|
|
+ // this.codeUrl = "data:image/gif;base64," + res.img;
|
|
|
+ // this.loginForm.uuid = res.uuid;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ getCookie() {
|
|
|
+ const username = Cookies.get("username");
|
|
|
+ const password = Cookies.get("password");
|
|
|
+ const rememberMe = Cookies.get("rememberMe");
|
|
|
+ this.loginForm = {
|
|
|
+ username: username === undefined ? this.loginForm.username : username,
|
|
|
+ password:
|
|
|
+ password === undefined ? this.loginForm.password : decrypt(password),
|
|
|
+ rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ handleLogin() {
|
|
|
+ this.$refs.loginForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true;
|
|
|
+ if (this.loginForm.rememberMe) {
|
|
|
+ Cookies.set("username", this.loginForm.username, { expires: 30 });
|
|
|
+ Cookies.set("password", encrypt(this.loginForm.password), {
|
|
|
+ expires: 30,
|
|
|
+ });
|
|
|
+ Cookies.set("rememberMe", this.loginForm.rememberMe, {
|
|
|
+ expires: 30,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ Cookies.remove("username");
|
|
|
+ Cookies.remove("password");
|
|
|
+ Cookies.remove("rememberMe");
|
|
|
+ }
|
|
|
+ this.$store
|
|
|
+ .dispatch("MailLogin", this.loginForm)
|
|
|
+ .then(() => {
|
|
|
+ this.$router.push({ path: this.redirect || "/" }).catch(() => {});
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ if (this.captchaEnabled) {
|
|
|
+ // this.getCode();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goLogin() {
|
|
|
+ this.$router.push("/login").catch(() => {});
|
|
|
+ },
|
|
|
+ // 发送验证码
|
|
|
+ sendEmail() {
|
|
|
+ if (!this.isCountingDown) {
|
|
|
+ sendMail({ toMail: this.loginForm.username }).then((res) => {
|
|
|
+ if (+res.code===200) {
|
|
|
+ this.$message.success("验证码已发送到您的邮箱，请查收");
|
|
|
+ // 启动倒计时
|
|
|
+ this.isCountingDown = true;
|
|
|
+ this.startCountdown();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 倒计时逻辑
|
|
|
+ startCountdown() {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (this.countdown > 0) {
|
|
|
+ this.countdown -= 1;
|
|
|
+ } else {
|
|
|
+ this.resetCountdown();
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 重置倒计时
|
|
|
+ resetCountdown() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.countdown = 60;
|
|
|
+ this.isCountingDown = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+.login {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url("../assets/img/互联网门户登录页.jpg");
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ margin: 0px auto 30px auto;
|
|
|
+ text-align: center;
|
|
|
+ color: #707070;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.login-form {
|
|
|
+ border-radius: 6px;
|
|
|
+ background: rgba(255, 255, 255, 0.7);
|
|
|
+ width: 440px;
|
|
|
+ padding: 25px 25px 5px 25px;
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ border-radius: 19px;
|
|
|
+ border: 1px solid #2692ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ height: 38px;
|
|
|
+
|
|
|
+ input {
|
|
|
+ height: 38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-icon {
|
|
|
+ height: 39px;
|
|
|
+ width: 14px;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.login-tip {
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ color: #bfbfbf;
|
|
|
+}
|
|
|
+
|
|
|
+.login-code {
|
|
|
+ width: 33%;
|
|
|
+ height: 38px;
|
|
|
+ float: right;
|
|
|
+ .sendEmail_btn {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-login-footer {
|
|
|
+ // height: 40px;
|
|
|
+ // line-height: 40px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-family: Arial;
|
|
|
+ font-size: 12px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.login-code-img {
|
|
|
+ height: 38px;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+}
|
|
|
+
|
|
|
+.announcement {
|
|
|
+ height: 400px;
|
|
|
+ width: 440px;
|
|
|
+ background: rgba(255, 255, 255, 0.7);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 15px;
|
|
|
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.announcement-header {
|
|
|
+ font-size: 16px;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .announcement-bg {
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1a8ff9;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.announcement-list {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding-right: 20px;
|
|
|
+ height: 320px;
|
|
|
+ overflow-y: auto;
|
|
|
+ // overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.announcement-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ border-bottom: 1px dashed #f2f1f3;
|
|
|
+ // margin-bottom: 10px;
|
|
|
+
|
|
|
+ .announcement-item-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .announcement-qs {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #a3acb3;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.highlighted {
|
|
|
+ background-color: rgba(#dbe7f5, 0.3);
|
|
|
+ /* 淡蓝色背景 */
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.announcement-title {
|
|
|
+ cursor: pointer;
|
|
|
+ max-width: 260px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #828282;
|
|
|
+ white-space: nowrap; // 防止文本换行
|
|
|
+ overflow: hidden; // 超出部分隐藏
|
|
|
+ text-overflow: ellipsis; // 如果超出部分隐藏，则使用省略号显示
|
|
|
+
|
|
|
+ &.highlighted {
|
|
|
+ font-weight: 700;
|
|
|
+ color: #3981db;
|
|
|
+ /* 深蓝色标题 */
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.announcement-date {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #888;
|
|
|
+}
|
|
|
+</style>
|
