<template>
|
<view class="box">
|
<view class="topContainer">
|
<image :src="loginTop" class="topImg" mode="widthFix"></image>
|
<image :src="loginPic" class="topPic" mode="widthFix"></image>
|
</view>
|
|
<view class="main">
|
<view class="header">
|
<view class="titleFirst">
|
你好~<br/>欢迎来到危化品全生命周期管理平台</view>
|
</view>
|
<view>
|
<u-form :model="form" ref="uForm" class="form" >
|
<u-form-item style="width: 80%;"><u-input v-model="form.username" :class="{'isFocused': userFocused}" placeholder="请输入用户名" @focus="focusUser"/></u-form-item>
|
<u-form-item style="margin-top: 10px;width: 80%;" ><u-input v-model="form.password" :class="{'isFocused': codeFocused}" :type="codeType" placeholder="请输入密码" @focus="focusCode">
|
<template slot="suffix">
|
<u-icon v-show="codeType == 'password'" name="eye" color="#999" size="20" @click="viewCode"></u-icon>
|
<u-icon v-show="codeType == 'text'" name="eye-off" color="#999" size="20" @click="viewCode"></u-icon>
|
</template>
|
</u-input></u-form-item>
|
<!-- <view class="loginPsw">
|
<u-checkbox-group >
|
<u-checkbox disabled="true"></u-checkbox><text style="color: #fff;">自动登录</text>
|
</u-checkbox-group>
|
<text style="color: lightblue;">忘记密码</text>
|
</view> -->
|
<u-form-item style="margin-top: 10px;width: 80%;">
|
<u-button class="loginBtn" :loading="isLogining" style="width: 100%;height: 56px;border-radius: 28px" @click="Login" type="primary">登录</u-button>
|
</u-form-item>
|
<!-- <view style="color: white;margin-top: 150px;">技术支持：技术保障部</view>-->
|
</u-form>
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import {login,getLastApp} from '../../api/index.js';
|
import store from '@/store/index.js'
|
import VUE_APP_BASE_URL from '../../common/constant.js'
|
const jpushModule = uni.requireNativePlugin('JG-JPush')
|
import loginTop from '../../static/loginBg.png'
|
import loginPic from '../../static/loginPic.png'
|
export default {
|
data() {
|
return {
|
loginTop: loginTop,
|
loginPic: loginPic,
|
userFocused: false,
|
codeFocused: false,
|
form: {
|
username: '',
|
password: '',
|
code: '',
|
uuid: ''
|
},
|
codeType: 'password',
|
type: '',
|
//极光推送
|
connectStatus: '未连接',
|
registrationID: '未获得',
|
isLogining: false
|
}
|
},
|
onShow() {
|
if(uni.getStorageSync('name') && uni.getStorageSync('pwd')){
|
// this.form.name = uni.getStorageSync('name');
|
// this.form.pwd = uni.getStorageSync('pwd');
|
// if(uni.getStorageSync('roleName') == '工作人员'){
|
// this.$store.commit('setRoleId', 'user_other');
|
// uni.switchTab({
|
// url: '/pages/tabBar/notice/notice'
|
// });
|
// }else if (uni.getStorageSync('roleName') == '管理员'){
|
// this.$store.commit('setRoleId', '');
|
// uni.showToast({
|
// icon: "none",
|
// title: '管理员请使用平台登录'
|
// });
|
// }else{
|
// this.$store.commit('setRoleId', 'user_leader');
|
// uni.switchTab({
|
// url: '/pages/tabBar/firstPage/firstPage'
|
// });
|
// }
|
}else{
|
uni.clearStorageSync();
|
uni.clearStorage();
|
}
|
},
|
onLoad() {
|
// this.connect()
|
},
|
methods: {
|
base64Encode(str) {
|
return btoa(unescape(encodeURIComponent(str)));
|
},
|
Login(){
|
if(this.form.username == ''){
|
uni.showToast({
|
title: '请输入用户名',
|
duration: 1000
|
})
|
return
|
}
|
if(this.form.password == ''){
|
uni.showToast({
|
title: '请输入密码',
|
duration: 1000
|
})
|
return
|
}
|
this.isLogining = true;
|
// this.form.password = this.base64Encode(this.form.password)
|
const {username,password,code,uuid} = this.form
|
const data = {username,password,code,uuid}
|
data.password = this.base64Encode(data.password)
|
uni.removeStorageSync('tk');
|
login(data).then(res => {
|
if (res.code === 200) {
|
this.isLogining = false;
|
//登录成功后
|
//设置别名
|
// jpushModule.setAlias({
|
// 'alias': this.phone,
|
// 'sequence': 1
|
// })
|
uni.setStorageSync("name", this.form.username);
|
uni.setStorageSync("pwd", this.form.password);
|
uni.setStorageSync("tk", res.data.token);
|
uni.setStorageSync("uid",res.data.id);
|
uni.setStorageSync('user', res.data);
|
// uni.setStorageSync('unittype',res.data.unittype);
|
// uni.setStorageSync('roleName', res.data.role.roleName);
|
// if(res.data.role.roleName == '工作人员'){
|
// this.$store.commit('setRoleId', 'user_other');
|
// uni.switchTab({
|
// url: '/pages/tabBar/notice/notice'
|
// });
|
// }else if (res.data.role.roleName == '管理员'){
|
// this.$store.commit('setRoleId', '');
|
// uni.showToast({
|
// icon: "none",
|
// title: '管理员请使用平台登录'
|
// });
|
// }else{
|
this.$store.commit('setRoleId', 'user_leader');
|
uni.switchTab({
|
url: '/pages/tabBar/firstPage/firstPage'
|
})
|
// }
|
}else{
|
uni.showToast({
|
icon: "none",
|
title: res.message
|
});
|
this.form.password = '';
|
this.isLogining = false;
|
}
|
}).catch(err=>{
|
this.form.password = '';
|
this.isLogining = false;
|
})
|
},
|
connect() {
|
uni.$on('connectStatusChange', (connectStatus) => {
|
var connectStr = ''
|
if (connectStatus == true) {
|
connectStr = '已连接'
|
this.getRegistrationID()
|
} else {
|
connectStr = '未连接'
|
}
|
console.log('监听到了连接状态变化 --- ', connectStr)
|
this.connectStatus = connectStr
|
})
|
},
|
//获取推送ID
|
getRegistrationID() {
|
jpushModule.getRegistrationID(result => {
|
let registerID = result.registerID
|
this.registrationID = registerID
|
this.form.registrationId = registerID;
|
uni.setStorageSync('registrationID', registerID);
|
console.log("iddd",uni.getStorageSync('registrationID'))
|
})
|
},
|
|
focusUser(){
|
this.userFocused = true
|
this.codeFocused = false
|
},
|
focusCode(){
|
this.codeFocused = true
|
this.userFocused = false
|
},
|
viewCode(){
|
if(this.codeType == 'password'){
|
this.codeType = 'text'
|
} else{
|
this.codeType = 'password'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.box{
|
width: 100%;
|
height: 100vh;
|
background: #f5f5f5;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.topContainer {
|
position: relative; /* 新增容器，并设置相对定位 */
|
width: 100%;
|
}
|
|
.topImg{
|
width: 100%;
|
filter: drop-shadow(0 3px 8px rgba(21,148,232,.4));
|
}
|
.topPic{
|
width: 80%;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
animation: float 3s ease-in-out infinite;
|
}
|
|
@keyframes float {
|
0%, 100% {
|
transform: translate(-50%, -50%)
|
}
|
50% {
|
transform: translate(-50%, calc(-50% + 12rpx))
|
}
|
}
|
|
.main{
|
width: 100%;
|
margin-top: 24rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: left;
|
}
|
|
.header {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.titleFirst{
|
width: 80%;
|
font-size: 34rpx;
|
line-height: 1.5;
|
font-weight: bold;
|
letter-spacing: 2px;
|
color: #333;
|
}
|
|
.titleSecond{
|
text-align: center;
|
font-size: 19px;
|
color: #fff;
|
margin-top: 10px;
|
}
|
.form{
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin-top: 40rpx;
|
}
|
|
.u-input{
|
border-color: #f5f5f5 !important;
|
border-radius: 99px;
|
background: #f5f5f5;
|
padding: 15px 20px !important;
|
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1)!important;
|
transition: box-shadow .1s ease !important;
|
|
&:active{
|
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1),0px 3px 6px rgba(0, 0, 0, 0.1) inset !important;
|
}
|
}
|
|
.isFocused{
|
background: #fff;
|
border-width: 2px !important;
|
border-color: #fff !important;
|
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1),0px 3px 6px rgba(0, 0, 0, 0.1) inset !important;
|
}
|
|
.loginPsw{
|
margin-bottom: 20px;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.loginBtn{
|
border: 2px solid rgba(255,255,255,.8);
|
letter-spacing: 10px;
|
box-shadow: 0 2px 4px rgba(0,0,0,.2);
|
background-image: linear-gradient(#41a2ff,#0f7ff9);
|
transition: box-shadow .15s ease !important;
|
font-size: 30rpx;
|
}
|
|
.loginBtn:active{
|
box-shadow: 0 2px 4px rgba(0,0,0,0);
|
background-image: linear-gradient(#0f7ff9,#41a2ff);
|
}
|
|
|
</style>
|
