|
|
@@ -0,0 +1,441 @@
|
|
|
+<template>
|
|
|
+ <div class="login">
|
|
|
+ <div class="login_Left">
|
|
|
+ <h2 class="topName">
|
|
|
+ <img src="@/assets/images/logo@2xSYT.png" alt="" />
|
|
|
+ {{ $store.state.user.companyName }}
|
|
|
+ </h2>
|
|
|
+ <div class="anima1"></div>
|
|
|
+ <div class="anima2"></div>
|
|
|
+ <div class="anima3"></div>
|
|
|
+ <div class="anima4"></div>
|
|
|
+ <div class="anima5"></div>
|
|
|
+ </div>
|
|
|
+ <div class="login_divs">
|
|
|
+ <el-form
|
|
|
+ class="login_Right"
|
|
|
+ ref="loginForm"
|
|
|
+ :model="loginForm"
|
|
|
+ :rules="loginRules"
|
|
|
+ >
|
|
|
+ <div class="weComeSty">
|
|
|
+ <img
|
|
|
+ style="width: 30px; height: 24px; vertical-align: sub"
|
|
|
+ src="@/assets/images/smile@2x.png"
|
|
|
+ alt=""
|
|
|
+ /><span class="textStys">欢迎登录</span>
|
|
|
+ </div>
|
|
|
+ <div class="mar_stys textStys">用户名</div>
|
|
|
+ <el-form-item prop="username">
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.username"
|
|
|
+ type="text"
|
|
|
+ auto-complete="off"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="mar_stys textStys">密码</div>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input
|
|
|
+ class="el_inputSty"
|
|
|
+ v-model="loginForm.password"
|
|
|
+ type="password"
|
|
|
+ auto-complete="off"
|
|
|
+ placeholder="密码"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="mar_stys textStys">验证码</div>
|
|
|
+ <el-form-item prop="code" v-if="captchaOnOff" class="fle_x">
|
|
|
+ <el-input
|
|
|
+ class="el_inputSty"
|
|
|
+ v-model="loginForm.code"
|
|
|
+ auto-complete="off"
|
|
|
+ placeholder="验证码"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <div class="login-code">
|
|
|
+ <img :src="codeUrl" @click="getCode" class="login-code-img" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="mar_stys textStys" v-if="commondual">手机号码</div>
|
|
|
+ <el-form-item prop="phonenumber" v-if="commondual">
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.phonenumber"
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入手机号码"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="mar_stys textStys" v-if="commondual">手机验证码</div>
|
|
|
+ <el-form-item prop="smsCode" v-if="commondual">
|
|
|
+ <el-input placeholder="获取验证码" v-model="loginForm.smsCode">
|
|
|
+ <span class="btn" slot="suffix" @click="getRegisterSms">
|
|
|
+ {{
|
|
|
+ registerCountDown == 0
|
|
|
+ ? "获取验证码"
|
|
|
+ : `${registerCountDown}秒重新获取`
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="rightStsyt">
|
|
|
+ <el-checkbox v-model="loginForm.rememberMe" class="checkStyles"
|
|
|
+ >记住密码</el-checkbox
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-form-item style="width: 100%">
|
|
|
+ <el-button
|
|
|
+ :loading="loading"
|
|
|
+ size="medium"
|
|
|
+ type="primary"
|
|
|
+ class="btnFootsty"
|
|
|
+ @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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getCodeImg, commondual_auth, commonsms_login } from "@/api/login";
|
|
|
+import Cookies from "js-cookie";
|
|
|
+import { encrypt, decrypt } from "@/utils/jsencrypt";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Login",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ registerCountDown: 0,
|
|
|
+ codeUrl: "",
|
|
|
+ cookiePassword: "",
|
|
|
+ loginForm: {
|
|
|
+ username: "",
|
|
|
+ password: "",
|
|
|
+ rememberMe: false,
|
|
|
+ code: "",
|
|
|
+ uuid: "",
|
|
|
+ phonenumber: "",
|
|
|
+ smsCode: "",
|
|
|
+ },
|
|
|
+ loginRules: {
|
|
|
+ username: [
|
|
|
+ { required: true, trigger: "blur", message: "请输入您的账号" },
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, trigger: "blur", message: "请输入您的密码" },
|
|
|
+ ],
|
|
|
+ code: [{ required: true, trigger: "change", message: "请输入验证码" }],
|
|
|
+ phonenumber: [
|
|
|
+ { required: true, trigger: "blur", message: "请输入手机号码" },
|
|
|
+ ],
|
|
|
+ smsCode: [
|
|
|
+ { required: true, trigger: "blur", message: "请输入手机验证码" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ // 验证码开关
|
|
|
+ captchaOnOff: true,
|
|
|
+ // 注册开关
|
|
|
+ register: false,
|
|
|
+ redirect: undefined,
|
|
|
+ commondual: false,
|
|
|
+ getRegisterCodeLock: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler: function (route) {
|
|
|
+ this.redirect = route.query && route.query.redirect;
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ commondual_auth().then((res) => {
|
|
|
+ if (res.data === "1") {
|
|
|
+ this.commondual = true;
|
|
|
+ } else {
|
|
|
+ this.commondual = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.getCode();
|
|
|
+ this.getCookie();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 获取注册验证码
|
|
|
+ */
|
|
|
+ getRegisterSms() {
|
|
|
+ var self = this;
|
|
|
+ this.$refs.loginForm.validateField("phonenumber", (valid) => {
|
|
|
+ if (!valid) {
|
|
|
+ if (this.registerCountDown == 0) {
|
|
|
+ if (this.getRegisterCodeLock) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.getRegisterCodeLock = true;
|
|
|
+ commonsms_login({ tel: this.loginForm.phonenumber })
|
|
|
+ .then((res) => {
|
|
|
+ this.getRegisterCodeLock = false;
|
|
|
+ this.$message({
|
|
|
+ message: `验证码已发送`,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.registerCountDown = 60;
|
|
|
+ this.registerCountDownTimer = setInterval(() => {
|
|
|
+ self.registerCountDown--;
|
|
|
+ if (self.registerCountDown == 0) {
|
|
|
+ clearInterval(self.registerCountDownTimer);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message({
|
|
|
+ message: err.msg,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ this.getRegisterCodeLock = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCode() {
|
|
|
+ getCodeImg().then((res) => {
|
|
|
+ // this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
|
|
|
+ // if (this.captchaOnOff) {
|
|
|
+ this.codeUrl = "data:image/gif;base64," + res.data.img;
|
|
|
+ this.loginForm.uuid = res.data.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("Login", this.loginForm)
|
|
|
+ .then(() => {
|
|
|
+ this.$router.push({ path: this.redirect || "/" }).catch(() => {});
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ if (this.captchaOnOff) {
|
|
|
+ this.getCode();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.login {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ .login_Left {
|
|
|
+ width: 100%;
|
|
|
+ min-width: 1920px;
|
|
|
+ background: url("../assets/images/left@2x.png") no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
+ overflow: hidden;
|
|
|
+ .topName {
|
|
|
+ user-select: none;
|
|
|
+ cursor: unset;
|
|
|
+ img {
|
|
|
+ width: 54.4px;
|
|
|
+ height: 38.4px;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+ text-shadow: 0px 0px 3px rgba(41, 115, 255, 0.7);
|
|
|
+ position: absolute;
|
|
|
+ color: rgb(41, 115, 255);
|
|
|
+ top: 50px;
|
|
|
+ left: 150px;
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+ .anima1 {
|
|
|
+ position: fixed;
|
|
|
+ top: 343px;
|
|
|
+ left: 182px;
|
|
|
+ width: 48px;
|
|
|
+ height: 136px;
|
|
|
+ background: url("../assets/images/mZ/1@2x.png");
|
|
|
+ background-size: 48px 136px;
|
|
|
+ animation: animal1 4s linear infinite;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .anima2 {
|
|
|
+ position: fixed;
|
|
|
+ top: 580px;
|
|
|
+ left: -20px;
|
|
|
+ width: 62px;
|
|
|
+ height: 170px;
|
|
|
+ background: url("../assets/images/mZ/2@2x.png");
|
|
|
+ background-size: 62px 170px;
|
|
|
+ animation: animal1 4s linear infinite;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .anima3 {
|
|
|
+ position: fixed;
|
|
|
+ bottom: -258px;
|
|
|
+ left: 183px;
|
|
|
+ width: 151px;
|
|
|
+ height: 415px;
|
|
|
+ background: url("../assets/images/mZ/3@2x.png");
|
|
|
+ background-size: 151px 415px;
|
|
|
+ animation: animal1 4s linear infinite;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .anima4 {
|
|
|
+ position: fixed;
|
|
|
+ bottom: -350px;
|
|
|
+ left: 987px;
|
|
|
+ width: 199px;
|
|
|
+ height: 551px;
|
|
|
+ background: url("../assets/images/mZ/4@2x.png");
|
|
|
+ background-size: 199px 551px;
|
|
|
+ animation: animal1 4s linear infinite;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .anima5 {
|
|
|
+ position: fixed;
|
|
|
+ top: 200px;
|
|
|
+ left: 1289px;
|
|
|
+ width: 85px;
|
|
|
+ height: 236px;
|
|
|
+ background: url("../assets/images/mZ/5@2x.png");
|
|
|
+ background-size: 85px 236px;
|
|
|
+ animation: animal1 4s linear infinite;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ @keyframes animal1 {
|
|
|
+ 50% {
|
|
|
+ transform: translateY(-50px);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .login_divs {
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ min-width: 500px;
|
|
|
+ width: 574px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #4174ff;
|
|
|
+ z-index: 1000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: -4px 0px 9px 1px rgba(17, 33, 77, 0.1);
|
|
|
+ .login_Right {
|
|
|
+ width: 420px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.textStys {
|
|
|
+ margin-left: 13px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 400;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+.weComeSty {
|
|
|
+ margin-bottom: 70px;
|
|
|
+}
|
|
|
+.mar_stys {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+/deep/.el-input--medium .el-input__inner {
|
|
|
+ height: 48px;
|
|
|
+ font-size: 20px;
|
|
|
+ border-radius: 24px;
|
|
|
+}
|
|
|
+/deep/.el-form-item--medium .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.login-code {
|
|
|
+ height: 40px;
|
|
|
+ margin-left: 18px;
|
|
|
+ .login-code-img {
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.rightStsyt {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+/deep/.checkStyles {
|
|
|
+ margin: 0px 0px 25px 0px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.btnFootsty {
|
|
|
+ width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 24px;
|
|
|
+ background-color: #fff;
|
|
|
+ color: #4174ff;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+}
|
|
|
+/deep/ .fle_x > .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #3f8dfd;
|
|
|
+ white-space: nowrap;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
