|
|
@@ -4,8 +4,8 @@
|
|
|
<el-header style="display:block;position:relative;margin:auto;">
|
|
|
<!-- logo -->
|
|
|
<img :src="this.logo ? this.logo : this.baseLogo" alt="" class="rightulliimg" />
|
|
|
- </el-header>
|
|
|
- <el-main>
|
|
|
+ </el-header>
|
|
|
+ <el-main>
|
|
|
<!-- 中间部分 -->
|
|
|
<div class="login">
|
|
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
|
|
@@ -23,10 +23,10 @@
|
|
|
</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" />
|
|
|
+ <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" />
|
|
|
+ <img :src="codeUrl" @click="getCode" class="login-code-img" />
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
<el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
|
|
|
@@ -42,21 +42,25 @@
|
|
|
</el-form-item>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="手机验证码" name="second">
|
|
|
- <div :class="{on: loginWay}">
|
|
|
- <section class="login_message">
|
|
|
- <dl><dd><input name="phone" type="tel" id="phone" placeholder="您的手机号码" maxlength="11"/></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: 120px;" placeholder="短信验证码" /><input type="button" id="btn" class="btn_mfyzm" value="获取动态密码" onclick="Sendpwd(this)" /></dd>
|
|
|
- </dl>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
- <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin" style="width: 190px;border-radius: 50px;margin-left:10%;margin-top:40px">
|
|
|
- <span v-if="!loading">登 录</span>
|
|
|
- <span v-else>登 录 中...</span>
|
|
|
- </el-button>
|
|
|
+
|
|
|
+ <el-form-item prop="phone">
|
|
|
+ <el-input v-model="loginForm.phone" type="tel" 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="cade">
|
|
|
+ <el-input v-model="loginForm.cade" type="text" auto-complete="off" placeholder="短信验证码" id="" onkeydown="enterHandler(event)" style=" width: 120px; ">
|
|
|
+ <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
|
|
+ </el-input>
|
|
|
+ <el-button :loading="loading" size="min" type="primary" style="width: 120px; margin-left:12px">
|
|
|
+ <span >获取动态密码 </span>
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin" style="width: 190px;border-radius: 50px;margin-left:10%;margin-top:10%">
|
|
|
+ <span v-if="!loading">登 录</span>
|
|
|
+ <span v-else>登 录 中...</span>
|
|
|
+ </el-button>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
|
|
|
@@ -77,30 +81,22 @@ export default {
|
|
|
name: "Login",
|
|
|
data() {
|
|
|
return {
|
|
|
- //验证码
|
|
|
- loginWay:false,//true代表短信登陆, false代表密码
|
|
|
- phone:'',//手机号,
|
|
|
- computeTime: 0,
|
|
|
- code:'',//验证码
|
|
|
- timer:null,
|
|
|
- showPwd:false,
|
|
|
- captcha:'',
|
|
|
- pwd:'',
|
|
|
- name,
|
|
|
|
|
|
//默认背景图
|
|
|
activeName: "first",
|
|
|
- baseImg: require("../assets/images/logi_bg1.jpg"),
|
|
|
- BackgroundImg: require("../assets/images/logi_bg1.jpg"),
|
|
|
- logo: "",
|
|
|
- baseLogo: require("../assets/images/lgo.png"),
|
|
|
+ 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: "",
|
|
|
+ username: "",
|
|
|
password: "",
|
|
|
+ phone: "",
|
|
|
rememberMe: false,
|
|
|
code: "",
|
|
|
+ cade: "",
|
|
|
uuid: "",
|
|
|
},
|
|
|
loginRules: {
|
|
|
@@ -111,13 +107,13 @@ export default {
|
|
|
message: "用户名不能为空",
|
|
|
},
|
|
|
],
|
|
|
- password: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- trigger: "blur",
|
|
|
- message: "密码不能为空",
|
|
|
- },
|
|
|
- ],
|
|
|
+ // phone: [
|
|
|
+ // {
|
|
|
+ // required: true,
|
|
|
+ // trigger: "blur",
|
|
|
+ // message: "手机号不能为空",
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
code: [
|
|
|
{
|
|
|
required: true,
|
|
|
@@ -125,6 +121,13 @@ export default {
|
|
|
message: "验证码不能为空",
|
|
|
},
|
|
|
],
|
|
|
+ // cade: [
|
|
|
+ // {
|
|
|
+ // required: true,
|
|
|
+ // trigger: "change",
|
|
|
+ // message: "验证码不能为空",
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
},
|
|
|
loading: false,
|
|
|
redirect: undefined,
|
|
|
@@ -140,58 +143,16 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
-
|
|
|
this.getCode();
|
|
|
this.getCookie();
|
|
|
this.getlistDomain();
|
|
|
-
|
|
|
},
|
|
|
methods: {
|
|
|
-//验证码
|
|
|
- getCode(){
|
|
|
- if(!this.computeTime){
|
|
|
- this.computeTime = 30;
|
|
|
- this.timer = setInterval(() => {
|
|
|
- this.computeTime --;
|
|
|
- if( this.computeTime <= 0){
|
|
|
- clearInterval(this.timer)
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
- },
|
|
|
- login(){
|
|
|
- //短信验证
|
|
|
- if(this.loginWay){
|
|
|
- console.log(this.rightPhone);
|
|
|
- if(!this.rightPhone){
|
|
|
- alert('手机号不正确');
|
|
|
- }else if(!/^\d{6}$/.test(this.code)){
|
|
|
- alert('验证码必须是6位')
|
|
|
- }
|
|
|
- }else{
|
|
|
- //密码验证
|
|
|
- if(!/^[\u4E00-\u9FA5]{2,4}$/.test(this.name)){
|
|
|
- alert('用户名必须是2-4个汉字');
|
|
|
- }else if(!/^\d{6}$/.test(this.pwd)){
|
|
|
- alert('密码必须是6位');
|
|
|
- }else if(!this.captcha){
|
|
|
- alert('图片验证码不正确');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- console.log(111);
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- //标签页
|
|
|
- handleClick(tab, event) {
|
|
|
- console.log(tab, event);
|
|
|
+ changeImg(){
|
|
|
+ this.wxSrc = require("../assets/images/wx.png")
|
|
|
},
|
|
|
- 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) => {
|
|
|
@@ -214,24 +175,25 @@ export default {
|
|
|
rememberMe === undefined ? false : Boolean(rememberMe),
|
|
|
};
|
|
|
},
|
|
|
- sendcodeItem () {
|
|
|
- loginVerify({
|
|
|
- mobile: this.phoneNum, // 请求接口的参数 手机号
|
|
|
- smsCode: this.verifyNum // 验证码
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- sessionStorage.setItem( // 请求时将后台返给我的token 存在了sessionStorage中。后续每次请求都需要携带token
|
|
|
- 'token',
|
|
|
- 'Bearer ' + res.tokenData.access_token // token的格式
|
|
|
- )
|
|
|
- this.uid = res.uid // 将个人的uid根据 路由传参方式传给首页
|
|
|
- this.$router.push({ path: '/index', query: { uid: this.uid } }) // 路由跳转 跳转到首页
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- Toast(error.data.errMessage) // 返回一下错误信息
|
|
|
- // 返回错误信息
|
|
|
- })
|
|
|
- },
|
|
|
+ // 查询域名
|
|
|
+ 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) => {
|
|
|
if (valid) {
|
|
|
@@ -256,15 +218,13 @@ 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;
|
|
|
@@ -274,22 +234,16 @@ 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
|
|
|
+ })
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
@@ -311,6 +265,7 @@ 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;
|
|
|
@@ -323,7 +278,7 @@ export default {
|
|
|
.input-icon {
|
|
|
height: 39px;
|
|
|
width: 14px;
|
|
|
- margin-left: 1px;
|
|
|
+ margin-left: 2px;
|
|
|
}
|
|
|
}
|
|
|
.login-tip {
|
|
|
@@ -335,7 +290,8 @@ export default {
|
|
|
width: 33%;
|
|
|
height: 38px;
|
|
|
float: right;
|
|
|
- margin-right: 6%;
|
|
|
+ margin-right: 6%;
|
|
|
+
|
|
|
img {
|
|
|
cursor: pointer;
|
|
|
vertical-align: middle;
|
|
|
@@ -346,6 +302,7 @@ export default {
|
|
|
}
|
|
|
// 大背景图
|
|
|
.backdrop {
|
|
|
+
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 1536px 752px;
|
|
|
background-size: cover;
|
|
|
@@ -357,159 +314,11 @@ 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; }
|
|
|
-.loginContainer {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #fff;
|
|
|
-}
|
|
|
-.loginInner {
|
|
|
- width: 80%;
|
|
|
- margin: 0 auto;
|
|
|
- padding-top: 60px;
|
|
|
-}
|
|
|
-.loginInner .login_header .login_logo {
|
|
|
- color: #02a774;
|
|
|
- font-weight: bolder;
|
|
|
- font-size:40px;
|
|
|
- text-align:center;
|
|
|
-}
|
|
|
-.login_header .login_header_title{
|
|
|
- text-align:center;
|
|
|
- padding-top:40px;
|
|
|
-}
|
|
|
-.login_header_title a{
|
|
|
- text-decoration: none;
|
|
|
- font-size:14px;
|
|
|
- color:#333;
|
|
|
- padding-bottom:4px;
|
|
|
-}
|
|
|
-.login_header_title a:first-child{
|
|
|
- margin-right:40px;
|
|
|
-}
|
|
|
-.login_header_title a.on{
|
|
|
- color :#02a774;
|
|
|
- font-weight: bolder;
|
|
|
- border-bottom:2px solid #02a774;
|
|
|
-}
|
|
|
-.login_content form div{
|
|
|
- display:none;
|
|
|
-}
|
|
|
-.login_content form div.on{
|
|
|
- display:block;
|
|
|
-}
|
|
|
-.login_content form input{
|
|
|
- width:100%;
|
|
|
- height:100%;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius :4px;
|
|
|
- outline: none;
|
|
|
- padding-left:10px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
-}
|
|
|
-.login_content form input:focus{
|
|
|
- border: 1px solid #02a774;
|
|
|
-}
|
|
|
-.login_message{
|
|
|
- position:relative;
|
|
|
- margin-top:16px;
|
|
|
- height:48px;
|
|
|
- font-size:14px;
|
|
|
- background:#fff;
|
|
|
-}
|
|
|
-.login_message .get_verification{
|
|
|
- position:absolute;
|
|
|
- top:50%;
|
|
|
- right:10px;
|
|
|
- transform: translateY(-50%);
|
|
|
- border:none;
|
|
|
- color:#ccc;
|
|
|
- background :transparent;
|
|
|
- font-size:14px;
|
|
|
-}
|
|
|
-.login_message .get_verification.right_phone{
|
|
|
- color:#000;
|
|
|
-}
|
|
|
-.login_hint{
|
|
|
- color:#999;
|
|
|
- margin-top:12px;
|
|
|
- font-size:14px;
|
|
|
- line-height:20px;
|
|
|
-}
|
|
|
-.login_hint a{
|
|
|
- text-decoration: none;
|
|
|
- color :#02a774;
|
|
|
-}
|
|
|
-
|
|
|
-.login_verification{
|
|
|
- position:relative;
|
|
|
- margin-top:16px;
|
|
|
- height:48px;
|
|
|
- font-size:14px;
|
|
|
- background:#fff;
|
|
|
-}
|
|
|
-.login_verification .switch_button{
|
|
|
- border:1px solid #ddd;
|
|
|
- width:30px;
|
|
|
- height:16px;
|
|
|
- position:absolute;
|
|
|
- top:50%;
|
|
|
- right:10px;
|
|
|
- transform: translateY(-50%);
|
|
|
- border-radius:8px;
|
|
|
- padding:0 6px;
|
|
|
- line-height:16px;
|
|
|
- font-size:12px;
|
|
|
- transition: background-color 0.3s;
|
|
|
-
|
|
|
-}
|
|
|
-.login_verification .switch_button.on{
|
|
|
- background :#02a774;
|
|
|
-}
|
|
|
-.login_verification .switch_button.off{
|
|
|
- background:#fff;
|
|
|
-}
|
|
|
-.switch_button .switch_circle{
|
|
|
- background:#fff;
|
|
|
- border:1px solid #ddd;
|
|
|
- border-radius:50%;
|
|
|
- width:16px;
|
|
|
- height:16px;
|
|
|
- position:absolute;
|
|
|
- left:-1px;
|
|
|
- top:-1px;
|
|
|
- box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
|
|
|
-}
|
|
|
-.switch_button .switch_circle.right{
|
|
|
- transform :translateX(30px);
|
|
|
-}
|
|
|
-.switch_button .switch_text{
|
|
|
- color: #ddd;
|
|
|
- float:right;
|
|
|
-}
|
|
|
-.login_submit{
|
|
|
- display:block;
|
|
|
- width:100%;
|
|
|
- height:42px;
|
|
|
- margin-top:30px;
|
|
|
- background :#4cd96f;
|
|
|
- border-radius:4px;
|
|
|
- font-size:16px;
|
|
|
- line-height:42px;
|
|
|
- color:#fff;
|
|
|
- text-align:center;
|
|
|
- border:none;
|
|
|
-}
|
|
|
-
|
|
|
</style>
|
zhaigk