<template>
|
<div class="loginDiv">
|
<div class="logo-bg"></div>
|
<div class="login-con">
|
<div class="appName">{{ platformName }}</div>
|
<div class="login-title">
|
<div :class="{'active':active===0}" class="tab" @click="tabClick(0)">登录</div>
|
<div :class="{'active':active===1}" class="tab" @click="tabClick(1)">注册</div>
|
</div>
|
<div v-if="active==0">
|
<div class="lineInput">
|
<img src="../../assets/img/login-ico1.png" class="ico1" />
|
<van-field v-model="userName" placeholder="请输入账号" />
|
</div>
|
<div class="lineInput">
|
<img src="../../assets/img/login-ico2.png" class="ico2" />
|
<van-field v-model="password" placeholder="请输入密码" type="password" />
|
</div>
|
<div class="subBtn" @click="submit">登录</div>
|
</div>
|
<div v-if="active==1">
|
<div class="lineInput">
|
<img src="../../assets/img/login-ico1.png" class="ico1" />
|
<van-field v-model="register.UName" placeholder="请输入账号" />
|
</div>
|
<div class="lineInput">
|
<img src="../../assets/img/login-ico2.png" class="ico2" />
|
<van-field v-model="register.USnId" placeholder="请输入密码" type="password" />
|
</div>
|
<div class="lineInput">
|
<img src="../../assets/img/login-ico1.png" class="ico1" />
|
<van-field v-model="register.UMobilephone" placeholder="请输入手机号" />
|
</div>
|
<!-- <div class="sexLine">
|
<div class="tips">选择性别</div>
|
<van-radio-group v-model="register.USex" direction="horizontal">
|
<van-radio name="男">男</van-radio>
|
<van-radio name="女">女</van-radio>
|
</van-radio-group>
|
</div>-->
|
|
<div class="subBtn" @click="toRegister">注册</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
login,
|
register,
|
searchPlatformName,
|
getLoginVerity,
|
getRealTabsConfig
|
} from "@/pages/login/js/api";
|
export default {
|
data() {
|
return {
|
userName: '',
|
password: '',
|
verifyCode: '',
|
platformName: "",
|
active: 0,
|
register: {
|
UName: '',
|
USnId: '',
|
USex: '男',
|
UMobilephone: '',
|
}
|
}
|
},
|
mounted() {
|
this.changeVerifyCode()
|
this.searchPlatformName();
|
},
|
methods: {
|
tabClick(num) {
|
this.active = num
|
},
|
searchPlatformName() {
|
searchPlatformName()
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
let data = rs.data[0];
|
this.platformName = data.param;
|
} else {
|
this.platformName = "蓄电池后台监控管理平台";
|
}
|
sessionStorage.setItem("platformName", this.platformName);
|
})
|
.catch((error) => {
|
this.platformName = "蓄电池后台监控管理平台";
|
sessionStorage.setItem("platformName", this.platformName);
|
});
|
},
|
//注册
|
toRegister() {
|
let self = this;
|
if (self.register.UName == '') {
|
self.$toast('请输入账号!')
|
return
|
}
|
if (self.register.USnId == '') {
|
self.$toast('请输入密码!')
|
return
|
}
|
if (self.register.USex == '') {
|
self.$toast('请选择性别!')
|
return
|
}
|
if (self.register.UMobilephone == '') {
|
self.$toast('请输入手机号!')
|
return
|
}
|
// 开启等待框
|
this.$toast.loading({
|
message: '注册中...',
|
duration: 0
|
})
|
console.log('self.register', self.register)
|
register(self.register.UName, self.register.USnId, self.register.USex, self.register.UMobilephone).then(res => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
self.$toast("注册成功!");
|
this.active = 0;
|
this.register = {
|
UName: '',
|
USnId: '',
|
USex: '男',
|
UMobilephone: '',
|
}
|
} else {
|
self.$toast("注册失败!");
|
}
|
}).catch(error => {
|
self.$toast("注册失败");
|
});
|
},
|
// 登录
|
submit() {
|
let self = this;
|
if (self.userName == '') {
|
self.$toast('请输入账号!')
|
return
|
}
|
if (self.password == '') {
|
self.$toast('请输入密码!')
|
return
|
}
|
// 开启等待框
|
this.$toast.loading({
|
message: '登录中...',
|
duration: 0
|
})
|
login(self.userName, self.password, self.verifyCode).then(res => {
|
// 对结果进行处理
|
self.handleLogin(res)
|
}).catch(error => {
|
console.log(error)
|
// 关闭等待
|
// console.log(error);
|
self.changeVerifyCode();
|
self.$toast("网络异常");
|
});
|
},
|
changeVerifyCode() {
|
getLoginVerity().then(res => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.verifyCode = rs.data + "";
|
} else {
|
this.verifyCode = "";
|
}
|
}).catch(error => {
|
this.verifyCode = "";
|
});
|
},
|
// 登录验证
|
handleLogin(res) {
|
// 关闭等待
|
// this.loading = false;
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
sessionStorage.setItem('username', this.username);
|
this.$store.dispatch("user/login", rs);
|
this.initPageConfig()
|
} else {
|
this.changeVerifyCode();
|
this.$toast(rs.msg);
|
}
|
},
|
initPageConfig() {
|
getRealTabsConfig().then(res => {
|
let rs = JSON.parse(res.data.result);
|
// 设置pageConfig
|
this.$store.dispatch('user/changeRealTabsConfig', rs.data);
|
this.$toast("登录成功!");
|
this.$router.push({
|
path: '/menu'
|
})
|
}).catch(error => {
|
// 设置pageConfig
|
this.$store.dispatch('user/changeRealTabsConfig', []);
|
})
|
},
|
}
|
}
|
</script>
|
|
<style scoped="scoped">
|
.loginDiv {
|
width: 100%;
|
height: 100%;
|
background: #ffffff;
|
padding-top: 160px;
|
}
|
|
.logo-bg {
|
width: 100%;
|
height: 100%;
|
background: url("../../assets/img/logo-bg.png") 0 0 no-repeat;
|
background-size: 100% 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
}
|
|
.login-con {
|
width: 100%;
|
padding: 0 70px;
|
position: relative;
|
}
|
|
.appName {
|
color: #ffffff;
|
font-size: 48px;
|
font-weight: bold;
|
margin-bottom: 240px;
|
width: 100%;
|
text-align: center;
|
}
|
|
.login-title {
|
height: 76px;
|
line-height: 76px;
|
margin-bottom: 68px;
|
}
|
|
.login-title .tab {
|
font-size: 50px;
|
font-weight: bold;
|
color: rgb(185, 185, 185);
|
text-align: center;
|
margin-right: 60px;
|
float: left;
|
}
|
|
.login-title .tab.active {
|
border-bottom: 8px solid #4b88f9;
|
color: #333;
|
}
|
|
.lineInput {
|
width: 100%;
|
height: 88px;
|
background-color: #f5f5f5;
|
border-radius: 44px;
|
margin-bottom: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 40px;
|
}
|
|
.lineInput .ico1 {
|
width: 25px;
|
height: 31px;
|
}
|
|
.lineInput .ico2 {
|
width: 26px;
|
height: 31px;
|
}
|
|
.lineInput /deep/ .van-cell {
|
background-color: transparent;
|
}
|
|
.sexLine {
|
width: 100%;
|
height: 88px;
|
border-radius: 44px;
|
margin-bottom: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.subBtn {
|
width: 100%;
|
height: 88px;
|
border-radius: 44px;
|
background-image: linear-gradient(to right, #08aeec, #4b88f9);
|
box-shadow: 0 10px 20px rgb(85 149 246 / 50%);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #ffffff;
|
font-size: 32px;
|
margin-top: 50px;
|
}
|
</style>
|
