| | |
| | | <img src="../assets/images/login-img.png" class="picImg" /> |
| | | </div> |
| | | <div class="login_box"> |
| | | <div class="title">用户登录</div> |
| | | <div class="login-tools"> |
| | | <el-tooltip |
| | | effect="dark" |
| | | :content="loginType.text" |
| | | placement="top"> |
| | | <i v-if="showPhoneLogin" :class="loginType.icon" @click="showPsdLogin"></i> |
| | | </el-tooltip> |
| | | </div> |
| | | <div class="title">{{ loginType.title }}</div> |
| | | <!-- 登录表单区 --> |
| | | <el-form |
| | | label-width="0px" |
| | | class="login_from" |
| | | :model="loginForm" |
| | | ref="loginFormRef" |
| | | v-if="psdLogin" |
| | | > |
| | | <!-- 用户名 --> |
| | | <el-form-item prop="username"> |
| | |
| | | <el-form-item v-if="!register"> |
| | | <a href="javascript:;" @click="license.show = true" class="regBtn" |
| | | >平台注册</a |
| | | > |
| | | </el-form-item> |
| | | <el-form-item v-else> |
| | | <a href="javascript:;" class="regBtn">已激活</a> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-form |
| | | label-width="0px" |
| | | class="login_from" |
| | | :model="loginForm" |
| | | v-else> |
| | | <!-- 手机号 --> |
| | | <el-form-item> |
| | | <el-input |
| | | class="input" |
| | | v-model="phoneInfo.phoneNum" |
| | | prefix-icon="el-icon-phone"> |
| | | </el-input> |
| | | </el-form-item> |
| | | <div class="flex-row"> |
| | | <div class="flex-content"> |
| | | <!-- 验证码 --> |
| | | <el-form-item> |
| | | <el-input v-model="phoneInfo.code"></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="flex-footer"> |
| | | <el-button type="primary" @click="getVerifyCode" :disabled="codeBtn.disabled">{{codeBtn.text}}</el-button> |
| | | </div> |
| | | </div> |
| | | <el-form-item class="btns"> |
| | | <el-button |
| | | :loading="loading" |
| | | type="primary" |
| | | class="loginBtn" |
| | | @click="phoneVerifyCodeLogin">登录</el-button> |
| | | </el-form-item> |
| | | <el-form-item v-if="!register"> |
| | | <a href="javascript:;" @click="license.show = true" class="regBtn" |
| | | >平台注册</a |
| | | > |
| | | </el-form-item> |
| | | <el-form-item v-else> |
| | |
| | | checkLoginSession, |
| | | uKeyLogin, |
| | | getRandomFromServer, |
| | | loginSignVerity, |
| | | loginSignVerity, phoneVerifyCodeLogin, |
| | | } from "@/assets/js/api"; |
| | | import ConfigInfo from "@/pages/configInfo"; |
| | | import UkeyBind from "@/components/UKeyBind"; |
| | |
| | | import randomString from "@/assets/js/tools/randomString"; |
| | | import pwdChange from "@/components/PwdChange"; |
| | | import const_user from "@/assets/js/const/const_user"; |
| | | import { |
| | | getVerifyCode |
| | | } from "@/assets/js/api"; |
| | | import {formatSeconds} from "@/assets/js/tools"; |
| | | |
| | | export default { |
| | | components: { |
| | |
| | | pwdChange, |
| | | }, |
| | | data() { |
| | | let readSeconds = Number(sessionStorage.getItem("readSeconds")); |
| | | return { |
| | | sysConfig: sysConfig, |
| | | register: false, |
| | |
| | | show: false, |
| | | }, |
| | | userType: const_user.type, |
| | | userStatus: const_user.status |
| | | userStatus: const_user.status, |
| | | showPhoneLogin: platform.messageCode.value, |
| | | psdLogin: true, |
| | | phoneInfo: { |
| | | phoneNum: "", |
| | | code: "" |
| | | }, |
| | | readSeconds: readSeconds?readSeconds:0, |
| | | codeBtnLoading: false, |
| | | }; |
| | | }, |
| | | created() { |
| | |
| | | this.$message.error("用户名或密码不能为空"); |
| | | } |
| | | }, |
| | | handleLogin(res) { |
| | | getVerifyCode() { |
| | | let num = this.phoneInfo.phoneNum; |
| | | if (!this.register && process.env.NODE_ENV != "dev") { |
| | | this.$layer.msg("平台未注册,请先注册平台!"); |
| | | return; |
| | | } |
| | | if(num.trim() == "") { |
| | | this.$message.error("手机号不能为空"); |
| | | return; |
| | | } |
| | | this.codeBtnLoading = true; |
| | | getVerifyCode(num).then(res=>{ |
| | | let rs = JSON.parse(res.data.result); |
| | | this.codeBtnLoading = false; |
| | | if(rs.code==1) { |
| | | this.$message.success("发送成功!"); |
| | | this.readSeconds = 360; |
| | | this.startReadSeconds(); |
| | | }else { |
| | | this.$message.error(rs.msg); |
| | | } |
| | | }).catch(error=>{ |
| | | this.codeBtnLoading = false; |
| | | console.log(error); |
| | | }); |
| | | }, |
| | | phoneVerifyCodeLogin() { |
| | | let num = this.phoneInfo.phoneNum; |
| | | let code = this.phoneInfo.code; |
| | | if (!this.register && process.env.NODE_ENV != "dev") { |
| | | this.$layer.msg("平台未注册,请先注册平台!"); |
| | | return; |
| | | } |
| | | if(num.trim() == "") { |
| | | this.$message.error("手机号不能为空"); |
| | | return; |
| | | } |
| | | if(code.trim() == "") { |
| | | this.$message.error("验证码不能为空"); |
| | | return; |
| | | } |
| | | this.loading = true; |
| | | phoneVerifyCodeLogin(num, code).then(res=>{ |
| | | this.handleLogin(res, true) |
| | | }).catch(error => { |
| | | // 关闭等待 |
| | | this.loading = false; |
| | | console.log(error); |
| | | this.$message.error("网络异常"); |
| | | }); |
| | | }, |
| | | handleLogin(res, phoneLogin) { |
| | | // 关闭等待 |
| | | this.loading = false; |
| | | let rs = JSON.parse(res.data.result); |
| | | if (rs.code == 1) { |
| | | this.$message.success("登录成功"); |
| | | sessionStorage.setItem("username", this.loginForm.username); |
| | | if(phoneLogin) { |
| | | sessionStorage.setItem("username", rs.msgN); |
| | | }else { |
| | | sessionStorage.setItem("username", this.loginForm.username); |
| | | } |
| | | sessionStorage.setItem("userId", rs.data); |
| | | sessionStorage.setItem("userPower", rs.data2); |
| | | // 自动登录无法返回登录页 |
| | |
| | | // 初始化登录状态 |
| | | sessionStorage.setItem("username", ""); |
| | | this.checkServeLicense(); |
| | | if(this.readSeconds > 0) { |
| | | this.startReadSeconds(); |
| | | } |
| | | |
| | | // 初始化置动 |
| | | this.$store.dispatch("user/changeAutoLogin", 0); |
| | |
| | | changeVerifyCode() { |
| | | this.verifyCode = randomString(4); |
| | | this.loginForm.verify = ""; |
| | | }, |
| | | showPsdLogin() { |
| | | this.psdLogin = this.psdLogin?false:true; |
| | | }, |
| | | startReadSeconds() { |
| | | let timer = ""; |
| | | timer = setInterval(()=>{ |
| | | if(this.readSeconds == 0) { |
| | | clearInterval(timer); |
| | | }else { |
| | | this.readSeconds--; |
| | | sessionStorage.setItem("readSeconds", this.readSeconds); |
| | | } |
| | | }, 1000); |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | } |
| | | return image; |
| | | }, |
| | | loginType() { |
| | | if(this.psdLogin) { |
| | | return { |
| | | text: "手机号登录", |
| | | title: "账号密码登录", |
| | | icon: "el-icon-mobile-phone" |
| | | } |
| | | }else { |
| | | return { |
| | | text: "账号密码登录", |
| | | title: "手机号登录", |
| | | icon: "el-icon-lock" |
| | | } |
| | | } |
| | | }, |
| | | codeBtn() { |
| | | let seconds = this.readSeconds; |
| | | if(seconds<=0) { |
| | | return { |
| | | text: "获取验证码", |
| | | disabled: false |
| | | } |
| | | }else { |
| | | return { |
| | | text: formatSeconds(seconds), |
| | | disabled: true, |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |
| | | let autoLogin = this.$route.query.autoLogin; |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | /* 登录大盒子背景 */ |
| | | .login_container { |
| | | width: 100%; |
| | |
| | | } |
| | | } |
| | | |
| | | .login-tools { |
| | | position: absolute; |
| | | top: 25px; |
| | | right: 16px; |
| | | font-size: 26px; |
| | | z-index: 999; |
| | | } |
| | | .el-icon-mobile-phone, |
| | | .el-icon-lock { |
| | | color: #0b388a; |
| | | } |
| | | .el-icon-mobile-phone:hover, |
| | | .el-icon-lock:hover { |
| | | cursor: pointer; |
| | | color: #ff0000; |
| | | } |
| | | |
| | | /* 登录按钮 */ |
| | | .btns { |
| | | text-align: center; |
| | |
| | | z-index: 999; |
| | | font-size: 12px; |
| | | } |
| | | .flex-row { |
| | | display: flex; |
| | | flex-direction: row; |
| | | } |
| | | .flex-row .flex-content { |
| | | flex: 1; |
| | | } |
| | | .flex-row .flex-footer { |
| | | margin-left: 8px; |
| | | } |
| | | </style> |