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.
376 lines
8.6 KiB
376 lines
8.6 KiB
<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_tenant.svg"></image>
|
|
租户
|
|
</view>
|
|
<view>
|
|
<input class="uni-input" placeholder="请输入租户名" v-model="tenantName" disabled="true" />
|
|
</view>
|
|
</view>
|
|
<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 style="display: flex;flex-direction: row;">
|
|
<!-- <view class="uni-input">
|
|
<input class="" placeholder="请输入验证码"
|
|
v-model="code"
|
|
style="background-color: lightgray;padding-top: 40rpx;padding-bottom: 40rpx;margin-right: 20rpx;" />
|
|
</view> -->
|
|
<view class="uni-input-wrapper">
|
|
<input class="" style="height: 80rpx; background-color: #F7F9FF;margin-right: 20rpx;"
|
|
placeholder="请输入验证码" type="number" v-model="code" />
|
|
</view>
|
|
<view class="display: flex; align-items: center; text-center">
|
|
<view class="">
|
|
<image :src="imageSrc" style="width: 260rpx;height: 80rpx;"></image>
|
|
</view>
|
|
<view style="font-size: 35rpx;color: #476DF5;" @click="getCode"> 获取验证码?</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="loginbtnbox">
|
|
<button @click="handelerlogin()" class="loginbtn">登录</button>
|
|
</view>
|
|
</form>
|
|
</view>
|
|
</view>
|
|
<comMessage ref="comMessage"></comMessage>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import comMessage from '@/mycomponents/common/comMessage.vue'
|
|
import {
|
|
login,
|
|
authorize,
|
|
getUserInfo,
|
|
} from '@/api/request.js';
|
|
import {
|
|
getCaptchaImage
|
|
} from '@/api/request2.js';
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from 'vuex'
|
|
|
|
export default {
|
|
components: {
|
|
comMessage
|
|
},
|
|
data() {
|
|
return {
|
|
smloginmsg: "",
|
|
tenantName: "闻荫源码",
|
|
username: "",
|
|
password: "",
|
|
tapstyle: 2,
|
|
loading: false,
|
|
showPassword: true,
|
|
imageSrc: "",
|
|
code: "",
|
|
uuid: ""
|
|
}
|
|
},
|
|
// computed: mapState(['forcedLogin', 'hasLogin']),
|
|
mounted() {
|
|
|
|
localStorage.clear();
|
|
sessionStorage.clear();
|
|
uni.clearStorage(); //清除缓存
|
|
if (process.env.NODE_ENV === 'development') {
|
|
this.username = "admin"
|
|
this.password = "123456";
|
|
}
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#ffffff',
|
|
backgroundColor: "#476DF5 !important"
|
|
})
|
|
},
|
|
//返回首页
|
|
onNavigationBarButtonTap(e) {
|
|
if (e.index === 0) {
|
|
uni.navigateTo({
|
|
url:"/pages/config/config"
|
|
})
|
|
}
|
|
|
|
},
|
|
onLoad() {
|
|
getCaptchaImage().then(res => {
|
|
if (res) {
|
|
var code = res.data.img;
|
|
let base64 = 'data:image/jpeg;base64,' + code
|
|
// console.log("图标", base64)
|
|
this.imageSrc = base64.replace(/[\r\n]/g, "")
|
|
this.uuid = res.data.uuid
|
|
}
|
|
}).catch(error=>{
|
|
this.showErrorMessage(error);
|
|
})
|
|
},
|
|
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 if (this.code === '') {
|
|
uni.showToast({
|
|
title: '验证码不能为空',
|
|
icon: 'none',
|
|
mask: true
|
|
})
|
|
} else {
|
|
// console.log("用户名：", this.username, "密码：", this.password, this.tapstyle, this.smloginmsg)
|
|
let logininfo = {
|
|
username: "",
|
|
password: "",
|
|
code: "",
|
|
uuid: ""
|
|
}
|
|
if (this.tapstyle == 2) //密码登录
|
|
{
|
|
logininfo.username = this.username;
|
|
logininfo.password = this.password
|
|
logininfo.code = this.code;
|
|
logininfo.uuid = this.uuid;
|
|
} 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);
|
|
this.newLogin(logininfo)
|
|
|
|
}
|
|
},
|
|
|
|
async newLogin(logininfo) {
|
|
uni.showLoading({
|
|
title:"正在登录",
|
|
mask:true
|
|
})
|
|
await this.$store.dispatch('Login', logininfo);
|
|
// await this.$store.dispatch('GetTenantIdInfo', this.tenantName)
|
|
uni.hideLoading()
|
|
sessionStorage.setItem('hasLogin', true);
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
});
|
|
},
|
|
|
|
|
|
tapchenge(e) {
|
|
this.tapstyle = e
|
|
},
|
|
onchange(e) {
|
|
const value = e.detail.value
|
|
},
|
|
changePassword: function() {
|
|
this.showPassword = !this.showPassword;
|
|
},
|
|
showErrorMessage(message) {
|
|
this.$refs.comMessage.showErrorMessage(message, res => {
|
|
if (res) {
|
|
|
|
}
|
|
});
|
|
},
|
|
getCode() {
|
|
getCaptchaImage().then(res => {
|
|
if (res) {
|
|
var code = res.data.img;
|
|
let base64 = 'data:image/jpeg;base64,' + code
|
|
this.imageSrc = base64.replace(/[\r\n]/g, "")
|
|
this.uuid = res.data.uuid
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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>
|
|
|