|
|
@@ -0,0 +1,271 @@
|
|
|
+<template>
|
|
|
+ <div class="main iot-login-content">
|
|
|
+ <div class="top-img"></div>
|
|
|
+ <div class="sign-text">登录到 联锁管理平台</div>
|
|
|
+ <a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
|
|
|
+ <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }" @change="handleTabClick" class="u-login-tabs">
|
|
|
+ <!-- <a-tab-pane key="sso" tab="SSO">
|
|
|
+ <login-sso ref="ssologin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-sso>
|
|
|
+ </a-tab-pane> -->
|
|
|
+ <a-tab-pane key="system" tab="标准">
|
|
|
+ <login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-account>
|
|
|
+ </a-tab-pane>
|
|
|
+
|
|
|
+ <!-- 修改框架 -->
|
|
|
+ <!-- <a-tab-pane key="tab2" tab="手机号登录">
|
|
|
+ <login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>
|
|
|
+ </a-tab-pane> -->
|
|
|
+ </a-tabs>
|
|
|
+
|
|
|
+ <a-form-model-item>
|
|
|
+ <a-checkbox @change="handleRememberMeChange" default-checked>记住我</a-checkbox>
|
|
|
+ <!-- 修改框架 -->
|
|
|
+ <!-- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
|
|
|
+ 忘记密码
|
|
|
+ </router-link> -->
|
|
|
+ <!-- <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
|
|
|
+ 注册账户
|
|
|
+ </router-link> -->
|
|
|
+ </a-form-model-item>
|
|
|
+
|
|
|
+ <a-form-item style="margin-top:24px">
|
|
|
+ <a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">登录
|
|
|
+ </a-button>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ </a-form-model>
|
|
|
+
|
|
|
+ <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>
|
|
|
+ <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
|
|
|
+ <!-- 修改框架 -->
|
|
|
+ <!-- <third-login ref="thirdLogin"></third-login> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Vue from 'vue'
|
|
|
+import { ACCESS_TOKEN, ENCRYPTED_STRING } from '@/store/mutation-types'
|
|
|
+import ThirdLogin from './third/ThirdLogin'
|
|
|
+import LoginSelectTenant from './LoginSelectTenant'
|
|
|
+import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
|
|
|
+import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
|
|
|
+import { timeFix } from '@/utils/util'
|
|
|
+
|
|
|
+import LoginAccount from './LoginAccount'
|
|
|
+import LoginSso from './LoginSSO'
|
|
|
+// import LoginPhone from './LoginPhone'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ LoginSelectTenant,
|
|
|
+ TwoStepCaptcha,
|
|
|
+ ThirdLogin,
|
|
|
+ LoginAccount,
|
|
|
+ LoginSso,
|
|
|
+ // LoginPhone
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ customActiveKey: 'system',
|
|
|
+ rememberMe: true,
|
|
|
+ loginBtn: false,
|
|
|
+ requiredTwoStepCaptcha: false,
|
|
|
+ stepCaptchaVisible: false,
|
|
|
+ encryptedString:{
|
|
|
+ key:"",
|
|
|
+ iv:"",
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ Vue.ls.remove(ACCESS_TOKEN)
|
|
|
+ this.getRouterData();
|
|
|
+ this.rememberMe = true
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ handleTabClick(key){
|
|
|
+ this.customActiveKey = key
|
|
|
+ },
|
|
|
+ handleRememberMeChange(e){
|
|
|
+ this.rememberMe = e.target.checked
|
|
|
+ },
|
|
|
+ /**跳转到登录页面的参数-账号获取*/
|
|
|
+ getRouterData(){
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let temp = this.$route.params.username || this.$route.query.username || ''
|
|
|
+ if (temp) {
|
|
|
+ this.$refs.alogin.acceptUsername(temp)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //登录
|
|
|
+ handleSubmit () {
|
|
|
+ this.loginBtn = true;
|
|
|
+ if (this.customActiveKey === 'sso') {
|
|
|
+ //SSO单点登录
|
|
|
+ this.$refs.ssologin.handleLogin(this.rememberMe)
|
|
|
+ } else {
|
|
|
+ // 使用账户密码登录
|
|
|
+ this.$refs.alogin.handleLogin(this.rememberMe)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 校验失败
|
|
|
+ validateFail(){
|
|
|
+ this.loginBtn = false;
|
|
|
+ },
|
|
|
+ // 登录后台成功
|
|
|
+ requestSuccess(loginResult){
|
|
|
+ this.$refs.loginSelect.show(loginResult)
|
|
|
+ },
|
|
|
+ //登录后台失败
|
|
|
+ requestFailed (err) {
|
|
|
+ let description = ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试"
|
|
|
+ this.$notification[ 'error' ]({
|
|
|
+ message: '登录失败',
|
|
|
+ description: description,
|
|
|
+ duration: 4,
|
|
|
+ });
|
|
|
+ //账户密码登录错误后更新验证码
|
|
|
+ // if(this.customActiveKey === 'sso' && description.indexOf('密码错误')>0){
|
|
|
+ // this.$refs.alogin.handleChangeCheckCode()
|
|
|
+ // }
|
|
|
+ this.loginBtn = false;
|
|
|
+ },
|
|
|
+ loginSelectOk(){
|
|
|
+ this.loginSuccess()
|
|
|
+ },
|
|
|
+ //登录成功
|
|
|
+ loginSuccess () {
|
|
|
+ this.$router.push({ path: "/interLock/summary" }).catch(()=>{
|
|
|
+ // this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
|
|
|
+ console.log('登录跳转首页出错,这个错误从哪里来的')
|
|
|
+ })
|
|
|
+ this.$notification.success({
|
|
|
+ message: '欢迎',
|
|
|
+ description: `${timeFix()}，欢迎回来`,
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ stepCaptchaSuccess () {
|
|
|
+ this.loginSuccess()
|
|
|
+ },
|
|
|
+ stepCaptchaCancel () {
|
|
|
+ this.Logout().then(() => {
|
|
|
+ this.loginBtn = false
|
|
|
+ this.stepCaptchaVisible = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取密码加密规则
|
|
|
+ getEncrypte(){
|
|
|
+ var encryptedString = Vue.ls.get(ENCRYPTED_STRING);
|
|
|
+ if(encryptedString == null){
|
|
|
+ getEncryptedString().then((data) => {
|
|
|
+ this.encryptedString = data
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.encryptedString = encryptedString;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+ .u-login-tabs{
|
|
|
+ .ant-tabs-nav-container{
|
|
|
+ font-size: 16px !important;
|
|
|
+ }
|
|
|
+ .ant-tabs-nav{
|
|
|
+ width: 100%;
|
|
|
+ .ant-tabs-tab{
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ant-tabs-nav .ant-tabs-tab-active{
|
|
|
+ color: #3395ff !important;
|
|
|
+ }
|
|
|
+ .ant-tabs-ink-bar{
|
|
|
+ width: 100% !important;
|
|
|
+ height: 3px;
|
|
|
+ background: #3395ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .iot-login-content{
|
|
|
+ .ant-checkbox-checked .ant-checkbox-inner{
|
|
|
+ background-color: #3395FF !important;
|
|
|
+ border-color: #3395FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="less" scoped>
|
|
|
+ .top-img{
|
|
|
+ width: 100%;
|
|
|
+ height: 64px;
|
|
|
+ background: url('../../assets/login_logo.svg') no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .sign-text{
|
|
|
+ width: 100%;
|
|
|
+ height: 32px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #646464;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-layout-login {
|
|
|
+ label {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .getCaptcha {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .forge-password {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ button.login-button {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ background: #004280;
|
|
|
+ font-weight: 700;
|
|
|
+ border-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-login-other {
|
|
|
+ text-align: left;
|
|
|
+ margin-top: 24px;
|
|
|
+ line-height: 22px;
|
|
|
+
|
|
|
+ .item-icon {
|
|
|
+ font-size: 24px;
|
|
|
+ color: rgba(0,0,0,.2);
|
|
|
+ margin-left: 16px;
|
|
|
+ vertical-align: middle;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: color .3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #1890ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .register {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+ .valid-error .ant-select-selection__placeholder{
|
|
|
+ color: #f5222d;
|
|
|
+ }
|
|
|
+</style>
|
yuhan