You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
361 lines
8.1 KiB
361 lines
8.1 KiB
10 months ago
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<!-- <image mode="widthFix" class="loginimg" src="../../static/login.png"></image> -->
|
||
|
|
<image mode="widthFix" class="loginimg" src="../../static/icons_ui/login_bg.png"></image>
|
||
|
|
<view class="login_title">
|
||
|
|
<text>您好，欢迎使用</text><br>
|
||
|
|
WMS仓库管理系统
|
||
|
|
</view>
|
||
|
|
<view class="bgf login_wrap">
|
||
|
|
<view class="loginbox">
|
||
|
|
<form @submit="formSubmit">
|
||
|
|
<view class="mytab">
|
||
|
|
<!-- <view class="mytabline" :class="tapstyle == 1?'active':''" @click="tapchenge(1)">扫码登录</view> -->
|
||
|
|
<view class="mytabline" :class="tapstyle == 2?'active_in':''" @click="tapchenge(2)">密码登录</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- <view class="mybox" v-if="tapstyle == 1">
|
||
|
|
<view class="conone">
|
||
|
|
<uni-easyinput prefixIcon="scan" class="uni-input" type="password" v-model="smloginmsg"
|
||
|
|
name="nickname" placeholder="扫码登录"></uni-easyinput>
|
||
|
|
</view>
|
||
|
|
</view> -->
|
||
|
|
<view class="mybox" v-if="tapstyle == 2">
|
||
|
|
<view class="conone">
|
||
|
|
<view class="title uni-flex">
|
||
|
|
<image class="icon_normal" src="../../static/icons_ui/icon_login_user.svg"></image>
|
||
|
|
用户名
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<input class="uni-input" placeholder="请输入用户名" v-model="username"></input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="conone">
|
||
|
|
<view class="title uni-flex">
|
||
|
|
<image class="icon_normal" src="../../static/icons_ui/icon_login_password.svg"></image>
|
||
|
|
密码
|
||
|
|
</view>
|
||
|
|
<view class="uni-input-wrapper">
|
||
|
|
<input class="uni-input" placeholder="请输入密码" :password="showPassword"
|
||
|
|
v-model="password" />
|
||
|
|
<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
|
||
|
|
@click="changePassword"></text>
|
||
|
|
</view>
|
||
|
|
<!-- <view class="uni-input-wrapper">
|
||
|
|
<input class="uni-input" type="password" name="password"
|
||
|
|
:password="showPassword"
|
||
|
|
placeholder="请输入密码" v-model="password"></input>
|
||
|
|
<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword"></text>
|
||
|
|
</view> -->
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<view class="loginbtnbox">
|
||
|
|
<button @click="handelerlogin()" class="loginbtn">登录</button>
|
||
|
|
</view>
|
||
|
|
</form>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getlogin,
|
||
|
|
profile
|
||
|
|
} from '@/api/index.js';
|
||
|
|
import jwtDecode from 'jwt-decode'
|
||
|
|
import qs from 'qs'
|
||
|
|
import {
|
||
|
|
mapState,
|
||
|
|
mapMutations
|
||
|
|
} from 'vuex'
|
||
|
|
import VUE from 'vue'
|
||
|
|
import Base64 from 'base-64';
|
||
|
|
// import vue from vue
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
smloginmsg: "",
|
||
|
|
username: "",
|
||
|
|
password: "",
|
||
|
|
tapstyle: 2,
|
||
|
|
loading: false,
|
||
|
|
showPassword: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: mapState(['forcedLogin', 'hasLogin']),
|
||
|
|
mounted() {
|
||
|
|
uni.clearStorage(); //清除缓存
|
||
|
|
if (process.env.NODE_ENV === 'development') {
|
||
|
|
this.username = "admin"
|
||
|
|
this.password = "1234qwer!@#$QWER";
|
||
|
|
}
|
||
|
|
uni.setNavigationBarColor({
|
||
|
|
frontColor: '#ffffff',
|
||
|
|
backgroundColor: "#476DF5 !important"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
onLoad() {},
|
||
|
|
methods: {
|
||
|
|
...mapMutations(['login']),
|
||
|
|
handelerlogin() {
|
||
|
|
if (this.username === '') {
|
||
|
|
uni.showToast({
|
||
|
|
title: '用户名不能为空',
|
||
|
|
icon: 'none',
|
||
|
|
mask: true
|
||
|
|
})
|
||
|
|
} else if (this.password === '') {
|
||
|
|
uni.showToast({
|
||
|
|
title: '密码不能为空',
|
||
|
|
icon: 'none',
|
||
|
|
mask: true
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
// console.log("用户名：", this.username, "密码：", this.password, this.tapstyle, this.smloginmsg)
|
||
|
|
let logininfo = {
|
||
|
|
grant_type: 'password',
|
||
|
|
client_id: 'Auth_App',
|
||
|
|
client_secret: '1q2w3E*',
|
||
|
|
username: "",
|
||
|
|
password: ""
|
||
|
|
}
|
||
|
|
if (this.tapstyle == 2) //密码登录
|
||
|
|
{
|
||
|
|
logininfo.username = this.username;
|
||
|
|
logininfo.password = this.password
|
||
|
|
} else if (this.tapstyle == 1) {
|
||
|
|
let arr = Base64.decode(this.smloginmsg).split(':')
|
||
|
|
logininfo.username = arr[0];
|
||
|
|
logininfo.password = arr[1]
|
||
|
|
}
|
||
|
|
let params = JSON.stringify(logininfo);
|
||
|
|
console.log('params', params);
|
||
|
|
// let params = qs.stringify(logininfo)
|
||
|
|
this.toLogin(params);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
toLogin(params) {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '登录中...'
|
||
|
|
})
|
||
|
|
localStorage.setItem("token_type", 'application/json')
|
||
|
|
getlogin(params).then((res) => {
|
||
|
|
console.log("res", res)
|
||
|
|
this.setStorage(res);
|
||
|
|
if (res) {
|
||
|
|
this.toMain(res);
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: '请求失败',
|
||
|
|
icon: 'none',
|
||
|
|
mask: true
|
||
|
|
})
|
||
|
|
}
|
||
|
|
uni.hideLoading();
|
||
|
|
}).catch((err) => {
|
||
|
|
this.loading = false;
|
||
|
|
if (err.message.includes('token返回的res为空')) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '无法连接到认证服务器!',
|
||
|
|
icon: 'none',
|
||
|
|
duration: 2000
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: err.message,
|
||
|
|
icon: 'none',
|
||
|
|
duration: 2000
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
uni.hideLoading();
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
setStorage(res) {
|
||
|
|
sessionStorage.setItem('isLogin', 1); //登录判断
|
||
|
|
sessionStorage.setItem('hasLogin', true);
|
||
|
|
localStorage.setItem("token_type", res.token_type + ' ' + res.access_token)
|
||
|
|
localStorage.setItem('userName', this.username);
|
||
|
|
localStorage.setItem('company', this.$companyCode);
|
||
|
|
localStorage.setItem('warehouseCode', this.$warehouseCode);
|
||
|
|
var decode = jwtDecode(localStorage.getItem('token_type'))
|
||
|
|
localStorage.setItem('userId', decode.sub);
|
||
|
|
},
|
||
|
|
clearStorage(res) {
|
||
|
|
sessionStorage.setItem('isLogin', 0); //登录判断
|
||
|
|
sessionStorage.setItem('hasLogin', false);
|
||
|
|
localStorage.setItem("token_type", "")
|
||
|
|
},
|
||
|
|
|
||
|
|
toMain(user) {
|
||
|
|
console.log("user", user)
|
||
|
|
this.login(user);
|
||
|
|
uni.switchTab({
|
||
|
|
url: '/pages/index/index'
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 强制登录时使用reLaunch方式跳
|
||
|
|
* 返回首页也是使用reLaunch方式
|
||
|
|
*/
|
||
|
|
// if (this.forcedLogin) //强制登录
|
||
|
|
// {
|
||
|
|
// uni.reLaunch({
|
||
|
|
// url: '../index/index'
|
||
|
|
// })
|
||
|
|
// } else {
|
||
|
|
// uni.navigateBack()
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
tapchenge(e) {
|
||
|
|
this.tapstyle = e
|
||
|
|
},
|
||
|
|
onchange(e) {
|
||
|
|
const value = e.detail.value
|
||
|
|
},
|
||
|
|
onCompanyChange(company) {
|
||
|
|
if (company === 'IACHZ') {} else {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// onBackPress(e) {
|
||
|
|
// console.log("监听返回按钮事件", e);
|
||
|
|
// // 此处一定要return为true，否则页面不会返回到指定路径
|
||
|
|
// return true;
|
||
|
|
// }
|
||
|
|
changePassword: function() {
|
||
|
|
this.showPassword = !this.showPassword;
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
page {
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs {
|
||
|
|
margin-bottom: 20upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mytab {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mytabline {
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
padding: 20rpx 0;
|
||
|
|
color: #666;
|
||
|
|
position: relative;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active_in {
|
||
|
|
color: #101010;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active_in::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
height: 8rpx;
|
||
|
|
background-color: #007AFF;
|
||
|
|
width: 40rpx;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loginbox {
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 30rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.loginimg {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
height: 200rpx;
|
||
|
|
width: 200rpx;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-bottom: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.conone {
|
||
|
|
margin: 30rpx 0;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.conone .uni-input-wrapper {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.conone .uni-input {
|
||
|
|
background-color: #F7F9FF;
|
||
|
|
height: 90rpx;
|
||
|
|
line-height: 90rpx;
|
||
|
|
padding: 0 0 0 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.conone .title {
|
||
|
|
font-size: .875rem;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
letter-spacing: 1rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.conone .title image {
|
||
|
|
margin-right: 6rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.uni-easyinput .is-input-border {
|
||
|
|
border-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loginbtnbox {
|
||
|
|
margin-top: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loginbtn {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
height: 100rpx;
|
||
|
|
line-height: 100rpx;
|
||
|
|
background: #5d66de;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.conone .uni-icon {
|
||
|
|
float: right;
|
||
|
|
position: absolute;
|
||
|
|
right: 20rpx;
|
||
|
|
color: #ccc;
|
||
|
|
font-size: 1.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.conone .uni-eye-active {
|
||
|
|
color: #5a7cf3;
|
||
|
|
}
|
||
|
|
</style>
|