<template>
<view class="content">
<view class="info_bg">
<image src="../../static/management/login-bg.png" class="bgImg"></image>
<div class="title">
<image src="../../static/management/logo.svg"></image>
<text>双碳感知资产运营管理平台</text>
</div>
</view>
<view class="form-box">
<view class="loginTxt">登录</view>
<view class="row-input">
<u-icon
name="account"
color="#2979ff"
size="50"
style="padding: 0 20rpx"
></u-icon>
<input
v-model="account"
placeholder="请输入用户账号"
maxlength="18"
clearable
/>
</view>
<view class="row-input">
<u-icon
name="lock"
color="#2979ff"
size="50"
style="padding: 0 20rpx"
></u-icon>
<input
v-model="password"
placeholder="登陆密码"
clearable
:password="!isShowPassword"
/>
<u-icon
name="eye-fill"
color="#2979ff"
size="50"
style="padding-right: 20rpx"
v-if="isShowPassword"
@click="showOrHide"
></u-icon>
<u-icon
name="eye-off"
color="#2979ff"
size="50"
style="padding-right: 0rpx"
v-else
@click="showOrHide"
>
</u-icon>
</view>
<view class="Userprotocols">
<view class="Userprotocolchecked">
<checkbox :checked="rememberPsw" @click="checkboxChange" />
</view>
<view class="Userprotocoltext">记住账号密码</view>
</view>
<view class="Userprotocol">
<view class="Userprotocolchecked">
<checkbox
:checked="isChecked"
@click="isChecked = !isChecked"
style="transform: scale(0.7)"
></checkbox>
</view>
<view class="Userprotocoltext">我已阅读并同意 <span @click="useragement">用户协议</span> 和 <span @click="Userprotocol">隐私政策</span> </view
>
</view>
<view class="login-btn" @click="loginbtn">登录</view>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {
isChecked: true,
rememberPsw:true,
isShowPassword: false,
account: "",
password: "",
captcha: "",
uuid: "",
captchaPath: "",
};
},
onLoad() {
// this.getCaptcha();
//this.getDeviceInfo();
//this.getOAID();
},
onUnload() {
//触发水印显示
uni.$emit("ly-show-watermark");
},
mounted() {//记住密码
//缓存的账号
const HBusername = uni.getStorageSync('HBusername');
//缓存的密码
const HBpassword = uni.getStorageSync('HBpassword');
//console.log("缓存的账号:"+HBusername)
//console.log("缓存的密码:"+HBpassword)
//有缓存就赋值给文本没有就清空
if (HBusername && HBpassword) {
this.account = HBusername;
this.password = HBpassword;
} else {
this.account = '';
this.password = '';
}
//自动登录
},
methods: {
getDeviceInfo(){
plus.device.getInfo({
success:function(e){
console.log('getDeviceInfo success: '+JSON.stringify(e));
},
fail:function(e){
console.log('getDeviceInfo failed: '+JSON.stringify(e));
}
});
},
getOAID(){
plus.device.getOAID({
success:function(e){
console.log('getOAID success: '+JSON.stringify(e));
},
fail:function(e){
console.log('getOAID failed: '+JSON.stringify(e));
}
});
},
//复选框
checkboxChange: function(e) {
this.rememberPsw=!this.rememberPsw;
console.log('111111111111111111',this.rememberPsw)
if (this.rememberPsw == true) {
//获取缓存的账号 赋值
uni.getStorageSync('HBusername',this.account);
uni.getStorageSync('HBpassword',this.password);
} else {//销毁
uni.removeStorageSync('HBusername');
uni.removeStorageSync('HBpassword');
}
},
loginbtn() {
if (this.account == "") {
this.$refs.uToast.show({
type: "error",
message: "请输入账号",
});
return false
} else if (this.password == "") {
this.$refs.uToast.show({
type: "error",
message: "请同意用户协议和隐私政策",
});
return false
}
let formData = {
username: this.account,
password: this.password,
};
//登录功能
this.$api.post("/login", formData).then((res) => {
if (res.data.code == 0) {
uni.setStorageSync("tokendata", res.data.data.token); //token
uni.setStorageSync("Userinformation", formData); //用户信息
//获取用户的信息，如组织架构，个人信息，权限等
Promise.all([
this.getpermissions(),
this.getDictList(),
this.getuserInfo(),
]).then(() => {
uni.navigateTo({
url: "/pages/index/index",
});
});
return false
} else if (this.password == "") {
this.$refs.uToast.show({
type: "error",
message: "请输入密码",
});
return false
}
let formData = {
username: this.account,
password: this.password,
};
//登录功能
this.$api.post("/login", formData).then((res) => {
if (res.data.code == 0) {
uni.setStorageSync("tokendata", res.data.data.token); //token
uni.setStorageSync("Userinformation", formData); //用户信息
//勾选就缓存账号和密码
if (this.rememberPsw) {
uni.setStorageSync('HBusername', this.account);
uni.setStorageSync('HBpassword', this.password);
} else {//销毁缓存
uni.removeStorageSync('HBusername');
uni.removeStorageSync('HBpassword');
}
//获取用户的信息，如组织架构，个人信息，权限等
Promise.all([
this.getpermissions(),
this.getDictList(),
this.getuserInfo(),
]).then(() => {
uni.navigateTo({
url: "/pages/index/index",
});
});
} else {
this.$refs.uToast.show({
type: "error",
message: "账号或者密码错误，请重新输入",
});
}
});
})
},
getpermissions() {
//获取用户权限功能
return new Promise((resolve, reject) => {
this.$api
.get("/menu/permissions", {})
.then((res) => {
uni.setStorageSync("ButtonPermissions", res.data.data);
resolve(res);
})
.catch((e) => {
reject(e);
});
});
},
getDictList() {
//获取字典列表, 添加并全局变量保存
return new Promise((resolve, reject) => {
this.$api
.get("/all", {})
.then((res) => {
uni.setStorageSync("getDictDataList", res.data.data);
resolve(res);
// console.log('222222', res)
})
.catch((e) => {
reject(e);
});
});
},
getuserInfo() {
//获取用户信息
return new Promise((resolve, reject) => {
this.$api
.get("/user/userInfo", {})
.then((res) => {
uni.setStorageSync("getuserInfo", res.data.data);
resolve(res);
})
.catch((e) => {
reject(e);
});
});
},
// 密码显示/密码隐藏
showOrHide() {
this.isShowPassword = !this.isShowPassword;
},
Userprotocol() {
uni.navigateTo({
url: "/pages/login/Privacyagreement",
success: (res) => {},
fail: () => {},
complete: () => {},
});
},
useragement(){
uni.navigateTo({
url: "/pages/login/useragree",
success: (res) => {},
fail: () => {},
complete: () => {},
});
},
// 找回密码
forget() {
uni.navigateTo({
url: "/pages/login/forget",
success: (res) => {},
fail: () => {},
complete: () => {},
});
},
// 注册
register() {
uni.navigateTo({
url: "/pages/login/register",
success: (res) => {},
fail: () => {},
complete: () => {},
});
},
},
};
</script>
<style lang="scss">
.Userprotocol{
margin-top: 60rpx;
display: flex;
align-items: center;
justify-content: flex-start;
}
.Userprotocols{
margin-top: 30rpx;
display: flex;
align-items: center;
justify-content: flex-start;
}
.Userprotocoltext{
color: #5C8FFF;
span{
color: #a1a2a3;
}
}
.form-box {
width: 91%;
background: #fff;
margin: -148rpx auto 0;
position: relative;
z-index: 3;
padding: 60rpx 40rpx 100rpx;
box-sizing: border-box;
border-radius: 32rpx;
.loginTxt {
color: #0c1935;
font-size: 40rpx;
margin-bottom: 80rpx;
text-align: center;
}
.row-input {
display: flex;
align-items: center;
height: 80rpx;
background-color: #f4f7ff;
border-radius: 36rpx;
margin-bottom: 40rpx;
padding: 0 20rpx;
input {
width: 460rpx;
font-size: 30rpx;
color: #a1a2a3;
flex: 1;
}
}
.Userprotocol{
display: flex;
align-items: center;
justify-content: center;
margin-top: 100rpx;
}
.login-btn {
margin-top: 20rpx;
font-size: 16px;
letter-spacing: 7px;
color: #ffffff;
height: 40px;
border-radius: 18px;
background: #5c8fff;
text-align: center;
line-height: 40px;
}
}
.content {
.bgImg {
width: 78%;
position: absolute;
left: -5px;
top: 9px;
z-index: 0;
}
.title {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
image {
width: 64rpx;
height: 64rpx;
margin-right: 4rpx;
}
text {
font-size: 36rpx;
color: #fff;
}
}
}
.info_bg {
padding-top: 60rpx;
width: 100%;
height: 400rpx;
background: #5c8fff;
border-radius: 0px 0px 32rpx 32rpx;
position: relative;
image {
width: 272px;
height: 157px;
}
}
</style>