39 changed files with 157 additions and 517 deletions
@ -1,410 +0,0 @@ |
|||||
<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 > |
|
||||
<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" /> |
|
||||
</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 |
|
||||
} 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(); |
|
||||
}) |
|
||||
// this.loading = false; |
|
||||
// uni.showToast({ |
|
||||
// title: eror.message, |
|
||||
// icon: 'none', |
|
||||
// duration: 2000 |
|
||||
// }); |
|
||||
// if (eror=='token返回的res为空') { |
|
||||
// uni.showToast({ |
|
||||
// title: '无法连接到认证服务器!', |
|
||||
// icon: 'none', |
|
||||
// duration: 2000 |
|
||||
// }); |
|
||||
// } else { |
|
||||
// uni.showToast({ |
|
||||
// title: err.message, |
|
||||
// icon: 'none', |
|
||||
// duration: 2000 |
|
||||
// }); |
|
||||
// } |
|
||||
// getlogin(params).then(res => { |
|
||||
// console.log("请求getlogin", 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> |
|
||||
Loading…
Reference in new issue