|
|
@@ -4,40 +4,61 @@
|
|
|
<el-header style="display:block;position:relative;margin:auto;">
|
|
|
<!-- logo -->
|
|
|
<img :src="this.logo ? this.logo : this.baseLogo" alt="" class="rightulliimg" />
|
|
|
- </el-header>
|
|
|
+ </el-header>
|
|
|
<el-main>
|
|
|
<!-- 中间部分 -->
|
|
|
<div class="login">
|
|
|
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="margin-left:-10px">
|
|
|
- <el-form-item prop="username" style=" margin-left: -70px;">
|
|
|
- <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" style=" width: 260px; ">
|
|
|
- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="password" style=" margin-left: -70px;">
|
|
|
- <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin" style=" width: 260px; ">
|
|
|
- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="code">
|
|
|
- <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%; margin-left: -70px;" @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" style="margin-left: -50px;" />
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px -34px 25px -70px;">记住密码</el-checkbox>
|
|
|
- <el-form-item style="width:100%;">
|
|
|
- <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin" style="width: 190px;margin-left: -30px;border-radius: 50px;">
|
|
|
- <span v-if="!loading">登 录</span>
|
|
|
- <span v-else>登 录 中...</span>
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- <el-divider class="divider_left"><span style="font-size:10px;word-break: keep-all;">第三方快捷登录</span></el-divider>
|
|
|
- <el-form-item style="width:100%;">
|
|
|
- <img :src="wxSrc" @mouseover="changeImg" @mouseleave="returnImg" @click="getWeChatImg" style="width:30px;margin-left: 47px;">
|
|
|
- </el-form-item>
|
|
|
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: -61px;margin-top:-45px">
|
|
|
+ <el-tab-pane label="账号密码登录" name="first">
|
|
|
+ <el-form-item prop="username">
|
|
|
+ <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
|
|
+ <svg-icon slot="prefix" icon-class="user" 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" style=" width: 260px; ">
|
|
|
+ <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="code">
|
|
|
+ <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 53%;" @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" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
|
|
|
+ <el-form-item style="width:100%;">
|
|
|
+ <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin" style="width: 190px;border-radius: 50px;margin-left:10%">
|
|
|
+ <span v-if="!loading">登 录</span>
|
|
|
+ <span v-else>登 录 中...</span>
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-divider class="divider_left"><span style="font-size:10px;word-break: keep-all;">第三方快捷登录</span></el-divider>
|
|
|
+ <el-form-item style="width:100%;">
|
|
|
+ <img :src="wxSrc" @mouseover="changeImg" @mouseleave="returnImg" @click="getWeChatImg" style="width:30px;margin-left: 77px;">
|
|
|
+ </el-form-item>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="手机验证码" name="second">
|
|
|
+
|
|
|
+ <dl><dd><input name="phone" type="text" id="phone" placeholder="您的手机号码" /></dd></dl>
|
|
|
+ <!-- <dl id="yz-code" style="display: none;">
|
|
|
+ <dd><input type="text" id="txtCode2" name="txtCode2" style="width: 133px; margin-right: 10px;" placeholder="验证码" /><img id="Img1" src="" width="90" height="34" title="点击换一个" style="vertical-align: middle; margin-top: -4px;" onclick="this.src='/ImgCode.aspx?t='+Math.random()*100" /></dd>
|
|
|
+ </dl> -->
|
|
|
+ <dl>
|
|
|
+ <dd><input type="text" id="dynamicPWD" onkeydown="enterHandler(event)" style="width: 100px;" placeholder="短信验证码" /><input type="button" id="btn" class="btn_mfyzm" value="获取动态密码" onclick="Sendpwd(this)" /></dd>
|
|
|
+ </dl>
|
|
|
+ <div class="remember">
|
|
|
+ <input type="checkbox" id="issave1" checked /><label for="issave1">下次自动登录</label>
|
|
|
+ </div>
|
|
|
+ <div class="tishi"></div>
|
|
|
+ <button type="button" id="dynamicLogon" style="outline:none">登 录</button>
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
</el-form>
|
|
|
<!-- 底部 -->
|
|
|
</div>
|
|
|
@@ -47,6 +68,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+// import {myfun} from '@/api/tests'; //注意路径
|
|
|
import { getCodeImg, listSscDomain } from "@/api/login";
|
|
|
import { wxImg } from "@/api/system/weChat";
|
|
|
import Cookies from "js-cookie";
|
|
|
@@ -56,19 +78,19 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
//默认背景图
|
|
|
-
|
|
|
- baseImg: require('../assets/images/logi_bg1.jpg'),
|
|
|
- BackgroundImg : require('../assets/images/logi_bg1.jpg'),
|
|
|
- logo: '',
|
|
|
- baseLogo: require('../assets/images/lgo.png'),
|
|
|
+ activeName: "first",
|
|
|
+ baseImg: require("../assets/images/logi_bg1.jpg"),
|
|
|
+ BackgroundImg: require("../assets/images/logi_bg1.jpg"),
|
|
|
+ logo: "",
|
|
|
+ baseLogo: require("../assets/images/lgo.png"),
|
|
|
codeUrl: "",
|
|
|
cookiePassword: "",
|
|
|
loginForm: {
|
|
|
- username: "",
|
|
|
- password: "",
|
|
|
- rememberMe: false,
|
|
|
- code: "",
|
|
|
- uuid: "",
|
|
|
+ username: "",
|
|
|
+ password: "",
|
|
|
+ rememberMe: false,
|
|
|
+ code: "",
|
|
|
+ uuid: "",
|
|
|
},
|
|
|
loginRules: {
|
|
|
username: [
|
|
|
@@ -112,11 +134,15 @@ export default {
|
|
|
this.getlistDomain();
|
|
|
},
|
|
|
methods: {
|
|
|
- changeImg(){
|
|
|
- this.wxSrc = require("../assets/images/wx.png")
|
|
|
+ //标签页
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ },
|
|
|
+ changeImg() {
|
|
|
+ this.wxSrc = require("../assets/images/wx.png");
|
|
|
},
|
|
|
- returnImg(){
|
|
|
- this.wxSrc = require("../assets/images/wx1.png")
|
|
|
+ returnImg() {
|
|
|
+ this.wxSrc = require("../assets/images/wx1.png");
|
|
|
},
|
|
|
getCode() {
|
|
|
getCodeImg().then((res) => {
|
|
|
@@ -140,23 +166,23 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
// 查询域名
|
|
|
- // getlistDomain() {
|
|
|
- // var sscDomain = document.location.hostname;
|
|
|
- // this.loginForm.sscDomain = document.location.hostname;
|
|
|
- // listSscDomain(sscDomain).then(response => {
|
|
|
- // if(response && response.data.lenth > 0){
|
|
|
- // const sscConfig = response.data[0].sscConfig;
|
|
|
- // const companyId = response.data[0].sscCompanyId;
|
|
|
- // console.log(companyId)
|
|
|
- // const imgForm = JSON.parse(sscConfig);
|
|
|
- // if(imgForm){
|
|
|
- // this.BackgroundImg = imgForm.BackgroundImg;
|
|
|
- // this.logo = imgForm.logo;
|
|
|
- // }
|
|
|
- // console.log(this.logo)
|
|
|
- // }
|
|
|
- // });
|
|
|
- // },
|
|
|
+ // getlistDomain() {
|
|
|
+ // var sscDomain = document.location.hostname;
|
|
|
+ // this.loginForm.sscDomain = document.location.hostname;
|
|
|
+ // listSscDomain(sscDomain).then(response => {
|
|
|
+ // if(response && response.data.lenth > 0){
|
|
|
+ // const sscConfig = response.data[0].sscConfig;
|
|
|
+ // const companyId = response.data[0].sscCompanyId;
|
|
|
+ // console.log(companyId)
|
|
|
+ // const imgForm = JSON.parse(sscConfig);
|
|
|
+ // if(imgForm){
|
|
|
+ // this.BackgroundImg = imgForm.BackgroundImg;
|
|
|
+ // this.logo = imgForm.logo;
|
|
|
+ // }
|
|
|
+ // console.log(this.logo)
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
|
|
|
handleLogin() {
|
|
|
this.$refs.loginForm.validate((valid) => {
|
|
|
@@ -182,13 +208,15 @@ export default {
|
|
|
this.$store
|
|
|
.dispatch("Login", this.loginForm)
|
|
|
.then(() => {
|
|
|
- if(this.redirect == '/index'){
|
|
|
- this.$router.push({ path: "/homePage"+this.redirect || "/" });
|
|
|
- }else{
|
|
|
- this.$router.push({ path: this.redirect || "/" });
|
|
|
+ if (this.redirect == "/index") {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/homePage" + this.redirect || "/",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$router.push({
|
|
|
+ path: this.redirect || "/",
|
|
|
+ });
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.loading = false;
|
|
|
@@ -198,16 +226,22 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
getUrlKey(name) {
|
|
|
- return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
|
|
|
+ return (
|
|
|
+ decodeURIComponent(
|
|
|
+ (new RegExp(
|
|
|
+ "[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)"
|
|
|
+ ).exec(location.href) || [, ""])[1].replace(/\+/g, "%20")
|
|
|
+ ) || null
|
|
|
+ );
|
|
|
},
|
|
|
- getWeChatImg(){
|
|
|
+ getWeChatImg() {
|
|
|
const origin = document.location.origin.toString();
|
|
|
- let params = {}
|
|
|
- params.state = origin
|
|
|
+ let params = {};
|
|
|
+ params.state = origin;
|
|
|
wxImg(params).then((res) => {
|
|
|
// console.log(res)
|
|
|
- location.href = res
|
|
|
- })
|
|
|
+ location.href = res;
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
@@ -229,7 +263,6 @@ export default {
|
|
|
background-image: url("../assets/images/login_bg2.png");
|
|
|
background-size: 935px 434px;
|
|
|
background-repeat: no-repeat;
|
|
|
- margin-top: 40px;
|
|
|
// 输入框大小
|
|
|
.el-input {
|
|
|
height: 40px;
|
|
|
@@ -242,7 +275,7 @@ export default {
|
|
|
.input-icon {
|
|
|
height: 39px;
|
|
|
width: 14px;
|
|
|
- margin-left: 2px;
|
|
|
+ margin-left: 1px;
|
|
|
}
|
|
|
}
|
|
|
.login-tip {
|
|
|
@@ -254,6 +287,7 @@ export default {
|
|
|
width: 33%;
|
|
|
height: 38px;
|
|
|
float: right;
|
|
|
+ margin-right: 6%;
|
|
|
img {
|
|
|
cursor: pointer;
|
|
|
vertical-align: middle;
|
|
|
@@ -264,7 +298,6 @@ export default {
|
|
|
}
|
|
|
// 大背景图
|
|
|
.backdrop {
|
|
|
-
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 1536px 752px;
|
|
|
background-size: cover;
|
|
|
@@ -276,11 +309,15 @@ export default {
|
|
|
background-position: right top;
|
|
|
background-attachment: fixed;
|
|
|
}
|
|
|
-.rightulliimg{
|
|
|
+.rightulliimg {
|
|
|
width: 860px;
|
|
|
-
|
|
|
}
|
|
|
-.divider_left{
|
|
|
+.divider_left {
|
|
|
margin-left: -40px;
|
|
|
}
|
|
|
+.btn_mfyzm { width: 90px; margin-left: 10px; height: 36px; background: #f0f0f0; border: 1px solid #d6d6d6; border-radius:3px; cursor:pointer;font-size: 11px;}
|
|
|
+.remember { margin-top: 15px; }
|
|
|
+.remember input[type=checkbox] { vertical-align: middle; margin-right: 5px; }
|
|
|
+.remember label { color: #999; }
|
|
|
+.tishi { line-height: 26px; color: #f60; margin-top: 10px; }
|
|
|
</style>
|
zhaigk