parent
251563e0cb
commit
2cee7d6edd
5 changed files with 692 additions and 675 deletions
|
After Width: | Height: | Size: 395 KiB |
@ -1,339 +1,354 @@ |
||||
<template> |
||||
<div class="home_view"> |
||||
<div class="homeback"> |
||||
<div class="homeHeader flex-between"> |
||||
<div class="logo flex-center"> |
||||
<!-- 非凡 --> |
||||
<!-- <img src="../../assets/img/ff-icon.png" class="ff-icon"> --> |
||||
<!-- 大庆待恢复 --> |
||||
<img src="../../assets/img/logo.png"> |
||||
<span>智慧管理平台</span> |
||||
</div> |
||||
<span class="aboutUs">关于我们</span> |
||||
</div> |
||||
<!-- 登录card --> |
||||
<div class="Login_view" v-show="cardType == 1" v-loading="loading" > |
||||
<div class="flex-between login_title"> |
||||
<span>登录</span> |
||||
<router-link :to="{path:'beforeLogin'}"> |
||||
<i class="el-icon-close"></i> |
||||
</router-link> |
||||
</div> |
||||
<el-form :model="param" :rules="rules" ref="param" label-width="0px" class="login_form"> |
||||
<el-form-item prop="username"> |
||||
<p>用户名</p> |
||||
<el-input v-model="param.username" placeholder="请输入账号/手机号" maxlength="11" @keyup.enter.native="nextInput($event)"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="password" class="item_password"> |
||||
<p>密码</p> |
||||
<el-input |
||||
type="password" |
||||
maxlength="20" |
||||
ref="password" |
||||
placeholder="请输入账号密码" |
||||
v-model="param.password" |
||||
@keyup.enter.native="submitForm('param')" |
||||
></el-input> |
||||
</el-form-item> |
||||
<div class="login-btn"> |
||||
<el-button v-preventReClick type="primary" round @click="submitForm('param')">马上登录</el-button> |
||||
</div> |
||||
<div class="flex-between forget_view"> |
||||
<el-checkbox v-model="checked">十天内自动登录</el-checkbox> |
||||
<el-button type="text" @click="cardType = 2">忘记密码?</el-button> |
||||
</div> |
||||
<p class="login-wechat">其他登陆方式</p> |
||||
<div class="wechat-btn"> |
||||
<el-button type="primary" round @click="wxCode"><i class="icon-weixin"></i>微信一键登录</el-button> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
<!-- 找回密码card --> |
||||
<RetrievePsd v-show="cardType == 2" @gohome="gohome" @nextStep="nextStep"></RetrievePsd> |
||||
<!-- 重新设置密码card --> |
||||
<SetPsd v-show="cardType == 3" @setBack="setBack" @reLogin="reLogin"></SetPsd> |
||||
<!-- 微信一键扫码 --> |
||||
<ScanCode v-show="cardType == 4" @toAccount="toAccount"></ScanCode> |
||||
<!-- 微信扫码后绑定手机号 --> |
||||
<BindPhone v-show="cardType == 5" @toWechat="toWechat"></BindPhone> |
||||
<div class="home_view"> |
||||
<div class="homeback"> |
||||
<div class="homeHeader flex-between"> |
||||
<div class="logo flex-center"> |
||||
<!-- 非凡 --> |
||||
<!-- <img src="../../assets/img/ff-icon.png" class="ff-icon"> --> |
||||
<!-- 大庆待恢复 --> |
||||
<img src="../../assets/img/logo.png"> |
||||
<span>智慧管理平台</span> |
||||
</div> |
||||
<Foot></Foot> |
||||
<span class="aboutUs">关于我们</span> |
||||
</div> |
||||
<!-- 登录card --> |
||||
<div class="Login_view" v-show="cardType == 1" v-loading="loading"> |
||||
<div class="flex-between login_title"> |
||||
<span>登录</span> |
||||
<router-link :to="{ path: 'beforeLogin' }"> |
||||
<i class="el-icon-close"></i> |
||||
</router-link> |
||||
</div> |
||||
<el-form :model="param" :rules="rules" ref="param" label-width="0px" class="login_form"> |
||||
<el-form-item prop="username"> |
||||
<p>用户名</p> |
||||
<el-input v-model="param.username" placeholder="请输入账号/手机号" maxlength="11" |
||||
@keyup.enter.native="nextInput($event)"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="password" class="item_password"> |
||||
<p>密码</p> |
||||
<el-input type="password" maxlength="20" ref="password" placeholder="请输入账号密码" v-model="param.password" |
||||
@keyup.enter.native="submitForm('param')"></el-input> |
||||
</el-form-item> |
||||
<div class="login-btn"> |
||||
<el-button v-preventReClick type="primary" round @click="submitForm('param')">马上登录</el-button> |
||||
</div> |
||||
<div class="flex-between forget_view"> |
||||
<el-checkbox v-model="checked">十天内自动登录</el-checkbox> |
||||
<el-button type="text" @click="cardType = 2">忘记密码?</el-button> |
||||
</div> |
||||
<p class="login-wechat">其他登陆方式</p> |
||||
<div class="wechat-btn"> |
||||
<el-button type="primary" round @click="wxCode"><i class="icon-weixin"></i>微信一键登录</el-button> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
<!-- 找回密码card --> |
||||
<RetrievePsd v-show="cardType == 2" @gohome="gohome" @nextStep="nextStep"></RetrievePsd> |
||||
<!-- 重新设置密码card --> |
||||
<SetPsd v-show="cardType == 3" @setBack="setBack" @reLogin="reLogin"></SetPsd> |
||||
<!-- 微信一键扫码 --> |
||||
<ScanCode v-show="cardType == 4" @toAccount="toAccount"></ScanCode> |
||||
<!-- 微信扫码后绑定手机号 --> |
||||
<BindPhone v-show="cardType == 5" @toWechat="toWechat"></BindPhone> |
||||
</div> |
||||
<Foot></Foot> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { login,WXCordImg,bindPhone,phoneAuthCord,getNowRole } from '../../utils/api'; |
||||
import {resetRouter} from '../../router/resetRouter'; |
||||
import { login, WXCordImg, bindPhone, phoneAuthCord, getNowRole } from '../../utils/api'; |
||||
import { resetRouter } from '../../router/resetRouter'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
// 待删除，测试用 |
||||
param: { |
||||
// username: '15773390498', |
||||
// password: 'Aa1111', |
||||
// username: 'admin', |
||||
// password: 'Aa1234' |
||||
}, |
||||
rules: { |
||||
username: [ |
||||
{ required: true, message: '请输入账号/手机号', trigger: 'blur' } |
||||
// { |
||||
// pattern: /^1[3456789]\d{9}$/, |
||||
// message: '请输入正确的手机号', |
||||
// trigger: 'blur' |
||||
// } |
||||
], |
||||
password: [{ required: true, message: '请输入账号密码', trigger: 'blur' }] |
||||
}, |
||||
cardType: 1, //1：首页登录，2：找回密码 |
||||
checked: false, |
||||
tenDayEffective: 2, |
||||
loginType: 1,//1为手机号，2为微信登录 |
||||
// appid : 'wx3b7bca679da34921', |
||||
// scope : 'snsapi_login', |
||||
// redirect_uri : encodeURIComponent("http://192.168.31.254:8080/#/Dashboard"), |
||||
loading:false |
||||
}; |
||||
}, |
||||
beforeCreate(){ |
||||
if(this.$route.query.token){// 扫码登录跳转 |
||||
sessionStorage.setItem("token",this.$route.query.token) |
||||
if(this.$route.query.account){ |
||||
if(this.$route.query.headerImg){ |
||||
this.$store.commit("userNameData", { userName: this.$route.query.account,headerImg: this.changePercent(this.$route.query.headerImg) }); |
||||
}else{ |
||||
this.$store.commit("userNameData", { userName: this.$route.query.account }); |
||||
} |
||||
} |
||||
this.$router.push('/homePage') |
||||
data () { |
||||
return { |
||||
// 待删除，测试用 |
||||
param: { |
||||
// username: '15773390498', |
||||
// password: 'Aa1111', |
||||
// username: 'admin', |
||||
// password: 'Aa1234' |
||||
}, |
||||
rules: { |
||||
username: [ |
||||
{ required: true, message: '请输入账号/手机号', trigger: 'blur' } |
||||
// { |
||||
// pattern: /^1[3456789]\d{9}$/, |
||||
// message: '请输入正确的手机号', |
||||
// trigger: 'blur' |
||||
// } |
||||
], |
||||
password: [{ required: true, message: '请输入账号密码', trigger: 'blur' }] |
||||
}, |
||||
cardType: 1, //1：首页登录，2：找回密码 |
||||
checked: false, |
||||
tenDayEffective: 2, |
||||
loginType: 1,//1为手机号，2为微信登录 |
||||
// appid : 'wx3b7bca679da34921', |
||||
// scope : 'snsapi_login', |
||||
// redirect_uri : encodeURIComponent("http://192.168.31.254:8080/#/Dashboard"), |
||||
loading: false |
||||
}; |
||||
}, |
||||
beforeCreate () { |
||||
if (this.$route.query.token) {// 扫码登录跳转 |
||||
sessionStorage.setItem("token", this.$route.query.token) |
||||
if (this.$route.query.account) { |
||||
if (this.$route.query.headerImg) { |
||||
this.$store.commit("userNameData", { userName: this.$route.query.account, headerImg: this.changePercent(this.$route.query.headerImg) }); |
||||
} else { |
||||
this.$store.commit("userNameData", { userName: this.$route.query.account }); |
||||
} |
||||
} |
||||
this.$router.push('/homePage') |
||||
} |
||||
}, |
||||
created () { |
||||
// this.$store.commit("homeMenuData", { homeMenu: [] }) |
||||
if (this.$route.query.token) {// 扫码登录跳转 |
||||
sessionStorage.setItem("token", this.$route.query.token) |
||||
sessionStorage.setItem('userID', this.$route.query.id) |
||||
if (this.$route.query.account) { |
||||
if (this.$route.query.headerImg) { |
||||
this.$store.commit("userNameData", { userName: this.$route.query.account, headerImg: this.changePercent(this.$route.query.headerImg) }); |
||||
} else { |
||||
this.$store.commit("userNameData", { userName: this.$route.query.account }); |
||||
} |
||||
} |
||||
this.$router.push('/homePage') |
||||
} |
||||
}, |
||||
methods: { |
||||
// 登录按钮 |
||||
submitForm (param) { |
||||
sessionStorage.clear() |
||||
localStorage.clear() |
||||
resetRouter() |
||||
this.$store.commit("routerData", { router: false });// 重置路由权限 |
||||
sessionStorage.removeItem('routerData')// 重置路由权限 |
||||
// this.$store.getters.clear |
||||
this.$refs.param.validate(valid => { |
||||
// 没登录直接进去,开发调试用 |
||||
// this.$router.push('/customer') |
||||
if (valid) { |
||||
if (this.checked) { |
||||
this.tenDayEffective = 1 |
||||
} else { |
||||
this.tenDayEffective = 2 |
||||
} |
||||
this.loading = true |
||||
login({ |
||||
phone: this.param.username, |
||||
type: this.loginType, |
||||
wechatId: '', |
||||
password: this.param.password, |
||||
tenDayEffective: this.tenDayEffective |
||||
}).then(res => { |
||||
sessionStorage.setItem("token", res.data.token); |
||||
sessionStorage.setItem("userID", res.data.id); |
||||
this.$store.commit("userNameData", { userName: res.data.account, userPhone: this.param.username, headerImg: res.data.headPortaritUrl }); |
||||
this.getNowRole()// 获取当前用户角色id |
||||
this.loading = false |
||||
}).catch(res => { |
||||
this.loading = false |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
created(){ |
||||
// this.$store.commit("homeMenuData", { homeMenu: [] }) |
||||
if(this.$route.query.token){// 扫码登录跳转 |
||||
sessionStorage.setItem("token",this.$route.query.token) |
||||
sessionStorage.setItem('userID',this.$route.query.id) |
||||
if(this.$route.query.account){ |
||||
if(this.$route.query.headerImg){ |
||||
this.$store.commit("userNameData", { userName: this.$route.query.account,headerImg: this.changePercent(this.$route.query.headerImg) }); |
||||
}else{ |
||||
this.$store.commit("userNameData", { userName: this.$route.query.account }); |
||||
} |
||||
nextInput (event) { |
||||
if (event) { |
||||
event.target.blur() |
||||
this.$refs.password.focus() |
||||
} |
||||
}, |
||||
getNowRole () { |
||||
return getNowRole().then(res => { |
||||
if (res.success) { |
||||
sessionStorage.setItem("now-roleBtn", res.data); |
||||
this.$nextTick(() => { |
||||
if (this.$route.query.redirect && this.$route.query.redirect != '/login') {// 重定向 |
||||
this.$router.push(this.$route.query.redirect) |
||||
} else { |
||||
this.$router.push('/homePage') |
||||
// console.log(sessionStorage.getItem('token')) |
||||
} |
||||
this.$router.push('/homePage') |
||||
}) |
||||
} |
||||
}).catch(err => { |
||||
// this.getNowRole() |
||||
}) |
||||
}, |
||||
methods:{ |
||||
// 登录按钮 |
||||
submitForm(param) { |
||||
sessionStorage.clear() |
||||
localStorage.clear() |
||||
resetRouter() |
||||
this.$store.commit("routerData", { router: false });// 重置路由权限 |
||||
sessionStorage.removeItem('routerData')// 重置路由权限 |
||||
// this.$store.getters.clear |
||||
this.$refs.param.validate(valid => { |
||||
// 没登录直接进去,开发调试用 |
||||
// this.$router.push('/customer') |
||||
if (valid) { |
||||
if(this.checked){ |
||||
this.tenDayEffective = 1 |
||||
}else{ |
||||
this.tenDayEffective = 2 |
||||
} |
||||
this.loading = true |
||||
login({ |
||||
phone: this.param.username, |
||||
type: this.loginType, |
||||
wechatId: '', |
||||
password: this.param.password, |
||||
tenDayEffective: this.tenDayEffective |
||||
}).then(res => { |
||||
sessionStorage.setItem("token",res.data.token); |
||||
sessionStorage.setItem("userID",res.data.id); |
||||
this.$store.commit("userNameData", { userName: res.data.account, userPhone: this.param.username,headerImg:res.data.headPortaritUrl }); |
||||
this.getNowRole()// 获取当前用户角色id |
||||
this.loading = false |
||||
}).catch(res => { |
||||
this.loading = false |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
nextInput (event) { |
||||
if (event) { |
||||
event.target.blur() |
||||
this.$refs.password.focus() |
||||
} |
||||
}, |
||||
getNowRole(){ |
||||
return getNowRole().then(res=>{ |
||||
if(res.success){ |
||||
sessionStorage.setItem("now-roleBtn",res.data); |
||||
this.$nextTick(()=>{ |
||||
if(this.$route.query.redirect&&this.$route.query.redirect!='/login'){// 重定向 |
||||
this.$router.push(this.$route.query.redirect) |
||||
}else{ |
||||
this.$router.push('/homePage') |
||||
// console.log(sessionStorage.getItem('token')) |
||||
} |
||||
}) |
||||
} |
||||
}).catch(err=>{ |
||||
// this.getNowRole() |
||||
}) |
||||
}, |
||||
// 找回密码的下一步按钮 |
||||
nextStep(val){ |
||||
this.cardType = val |
||||
}, |
||||
// 找回密码的 X |
||||
gohome(val){ |
||||
this.cardType = val |
||||
}, |
||||
// 重新设置新密码的 X |
||||
setBack(val){ |
||||
this.cardType = val |
||||
}, |
||||
reLogin(val){ |
||||
this.cardType = val |
||||
}, |
||||
// 微信扫码登录的 X和账号登录按钮 |
||||
toAccount(val){ |
||||
this.cardType = val |
||||
}, |
||||
// 绑定手机号的 X和暂不绑定按钮 |
||||
toWechat(val){ |
||||
this.cardType = val |
||||
}, |
||||
wxCode(){ |
||||
this.cardType = 4 |
||||
|
||||
}, |
||||
// 删除%转换成/，用于提取链接 |
||||
changePercent(str){ |
||||
return str.replace(/%2F/g,'/').replace(/%3A/g,':') |
||||
}, |
||||
// 找回密码的下一步按钮 |
||||
nextStep (val) { |
||||
this.cardType = val |
||||
}, |
||||
// 找回密码的 X |
||||
gohome (val) { |
||||
this.cardType = val |
||||
}, |
||||
// 重新设置新密码的 X |
||||
setBack (val) { |
||||
this.cardType = val |
||||
}, |
||||
reLogin (val) { |
||||
this.cardType = val |
||||
}, |
||||
// 微信扫码登录的 X和账号登录按钮 |
||||
toAccount (val) { |
||||
this.cardType = val |
||||
}, |
||||
mounted() { |
||||
// this.setWxerwma() |
||||
// 绑定手机号的 X和暂不绑定按钮 |
||||
toWechat (val) { |
||||
this.cardType = val |
||||
}, |
||||
wxCode () { |
||||
this.cardType = 4 |
||||
|
||||
}, |
||||
// 删除%转换成/，用于提取链接 |
||||
changePercent (str) { |
||||
return str.replace(/%2F/g, '/').replace(/%3A/g, ':') |
||||
}, |
||||
}, |
||||
mounted () { |
||||
// this.setWxerwma() |
||||
}, |
||||
} |
||||
|
||||
// } |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.home_view{ |
||||
.home_view { |
||||
width: 100%; |
||||
height: 100%; |
||||
color: #00B9FF; |
||||
|
||||
.homeback { |
||||
width: 100%; |
||||
height: 100%; |
||||
color: #00B9FF; |
||||
.homeback{ |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow:hidden; |
||||
// background: url('../../assets/img/login-bg-1.jpg'); |
||||
background: url('https://www.feifanhitech.com/enclosureFile/3d7ad5b15d0141eelogin-bg-1.jpg'); |
||||
// background: url('https://www.huorantech.cn/enclosureFile/96664d5774e54494login-bg-1.jpg'); |
||||
background-size: 100% 100%; |
||||
position: relative; |
||||
.homeHeader{ |
||||
width: 100%; |
||||
height: 60px; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
color: #fff; |
||||
.logo{ |
||||
margin-left: 140px; |
||||
img{ |
||||
// 大庆待恢复 |
||||
// width: 45px; |
||||
// height: 34px; |
||||
margin-right: 9px; |
||||
} |
||||
} |
||||
.aboutUs{ |
||||
margin-right: 140px; |
||||
cursor: pointer; |
||||
} |
||||
overflow: hidden; |
||||
background: url('../../assets/img/login-bg-1.jpg'); |
||||
// background: url('https://www.feifanhitech.com/enclosureFile/3d7ad5b15d0141eelogin-bg-1.jpg'); |
||||
// background: url('https://www.huorantech.cn/enclosureFile/96664d5774e54494login-bg-1.jpg'); |
||||
background-size: 100% 100%; |
||||
position: relative; |
||||
|
||||
.homeHeader { |
||||
width: 100%; |
||||
height: 60px; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
color: #fff; |
||||
|
||||
.logo { |
||||
margin-left: 140px; |
||||
|
||||
img { |
||||
// 大庆待恢复 |
||||
// width: 45px; |
||||
// height: 34px; |
||||
margin-right: 9px; |
||||
} |
||||
.Login_view{ |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 120px; |
||||
transform: translate(-50%, 0); |
||||
background-color: #fff; |
||||
border-radius: 20px; |
||||
width: 812px; |
||||
padding: 52px 0; |
||||
.login_title{ |
||||
span{ |
||||
font-size: 26px; |
||||
margin-left: 146px; |
||||
} |
||||
i{ |
||||
margin-right: 50px; |
||||
color: #666; |
||||
font-size: 20px; |
||||
} |
||||
} |
||||
.login_form{ |
||||
margin: 60px 146px 0 146px; |
||||
p{ |
||||
margin-bottom: 10px; |
||||
font-size: 14px; |
||||
} |
||||
.item_password{ |
||||
margin-top: 40px; |
||||
} |
||||
.login-btn{ |
||||
margin-top: 70px; |
||||
} |
||||
.forget_view{ |
||||
font-size: 14px; |
||||
} |
||||
.login-wechat{ |
||||
text-align: center; |
||||
color: #00B9FF; |
||||
font-size: 14px; |
||||
margin-top: 60px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.aboutUs { |
||||
margin-right: 140px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.Login_view { |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 120px; |
||||
transform: translate(-50%, 0); |
||||
background-color: #fff; |
||||
border-radius: 20px; |
||||
width: 812px; |
||||
padding: 52px 0; |
||||
|
||||
.login_title { |
||||
span { |
||||
font-size: 26px; |
||||
margin-left: 146px; |
||||
} |
||||
|
||||
i { |
||||
margin-right: 50px; |
||||
color: #666; |
||||
font-size: 20px; |
||||
} |
||||
} |
||||
|
||||
.login_form { |
||||
margin: 60px 146px 0 146px; |
||||
|
||||
p { |
||||
margin-bottom: 10px; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.item_password { |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.login-btn { |
||||
margin-top: 70px; |
||||
} |
||||
|
||||
.forget_view { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.login-wechat { |
||||
text-align: center; |
||||
color: #00B9FF; |
||||
font-size: 14px; |
||||
margin-top: 60px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.login_form /deep/ .el-form-item{ |
||||
margin-bottom: 0; |
||||
.login_form /deep/ .el-form-item { |
||||
margin-bottom: 0; |
||||
} |
||||
.login_form /deep/ .el-input__inner{ |
||||
background-color: #f5f5f5; |
||||
height: 46px; |
||||
line-height: 46px; |
||||
border: none; |
||||
|
||||
.login_form /deep/ .el-input__inner { |
||||
background-color: #f5f5f5; |
||||
height: 46px; |
||||
line-height: 46px; |
||||
border: none; |
||||
} |
||||
.login-btn /deep/ .el-button{ |
||||
width: 100%; |
||||
// border-radius: 23px; |
||||
height: 46px; |
||||
|
||||
.login-btn /deep/ .el-button { |
||||
width: 100%; |
||||
// border-radius: 23px; |
||||
height: 46px; |
||||
} |
||||
.forget_view /deep/ .el-button--text{ |
||||
color: #FF9784; |
||||
|
||||
.forget_view /deep/ .el-button--text { |
||||
color: #FF9784; |
||||
} |
||||
.forget_view /deep/ .el-button--text:hover{ |
||||
text-decoration:underline; |
||||
|
||||
.forget_view /deep/ .el-button--text:hover { |
||||
text-decoration: underline; |
||||
} |
||||
.wechat-btn /deep/ .el-button{ |
||||
width: 100%; |
||||
// border-radius: 23px; |
||||
height: 46px; |
||||
background-color: #f5f5f5; |
||||
border: none; |
||||
color: #666; |
||||
margin-top: 20px; |
||||
|
||||
.wechat-btn /deep/ .el-button { |
||||
width: 100%; |
||||
// border-radius: 23px; |
||||
height: 46px; |
||||
background-color: #f5f5f5; |
||||
border: none; |
||||
color: #666; |
||||
margin-top: 20px; |
||||
} |
||||
.ff-icon{ |
||||
width: 100%; |
||||
|
||||
.ff-icon { |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue