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.
382 lines
9.4 KiB
382 lines
9.4 KiB
<template>
|
|
<div class="login">
|
|
<div class="logoTitle" style="margin-left: 50px;margin-top: 50px;">
|
|
<img src="../../assets/loginImg/yxt-logo.png" style="width: 250px;height:50px; margin-right: 10px;" />
|
|
</div>
|
|
|
|
<div class="main">
|
|
|
|
<img src="../../assets/loginImg/login_left.png" style="width:50%;height:100%; " />
|
|
|
|
<div class="main-right">
|
|
|
|
<span class="main-right-title">欢迎登录商享通WMS</span>
|
|
|
|
|
|
<div class="main-right-table">
|
|
|
|
<div :class="tableIndex == 1 ? 'main-right-table-text1' : 'main-right-table-text3'" @click="tableClick(1)">
|
|
密码登录</div>
|
|
<div :class="tableIndex == 2 ? 'main-right-table-text2' : 'main-right-table-text4'" @click="tableClick(2)">
|
|
验证码登录</div>
|
|
|
|
</div>
|
|
|
|
<div class="main-right-table-password" v-show="tableIndex==1">
|
|
|
|
<el-input class="input" placeholder="请输入手机号/邮箱" clearable v-model="loginForm.userName" />
|
|
<el-input class="input" placeholder="请输入密码" type="password" show-password v-model="loginForm.password" />
|
|
|
|
</div>
|
|
|
|
<div class="main-right-table-code" v-show="tableIndex==2">
|
|
<el-input class="input" placeholder="请输入手机号/邮箱" clearable v-model="loginForm.userName" />
|
|
<div style="display: flex;flex-direction: row;align-items: center;width: 100%;">
|
|
<el-input class="input" style="flex: 1; margin-right: 10px;" maxlength="6" placeholder="请输入验证码"
|
|
v-model="loginForm.verifyCode" />
|
|
<span :class="sendCodeType ? 'sendCode1' : 'sendCode2'" @click="sendCode">{{sendCodeText}}</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<el-button type="primary" size="small" style="width: 65%;margin-top: 30px; font-size: 25px;line-height: 40px;"
|
|
@click="login">登录</el-button>
|
|
|
|
<div class="main-right-bom">
|
|
|
|
<el-checkbox class="main-right-bom-left">7天内免登录</el-checkbox>
|
|
|
|
<div class="main-right-bom-right">
|
|
|
|
<span>忘记密码</span>
|
|
<div style="margin-left: 8px;margin-right: 8px;width: 1px; height: 18px;background: #999;"></div>
|
|
<span>去注册</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
doLogin,
|
|
getUserById,
|
|
imgCode
|
|
} from '@/api/user.js'
|
|
import user from '@/api/User/login.js'
|
|
import {
|
|
setToken,
|
|
getToken,
|
|
setSession
|
|
} from '@/utils/auth'
|
|
import imgCodeRole from '@/components/imgCodeRole/index.vue'
|
|
import qs from 'qs'
|
|
export default {
|
|
components: {
|
|
imgCodeRole
|
|
},
|
|
data() {
|
|
return {
|
|
tableIndex: 1,
|
|
sendCodeText: "发送验证码",
|
|
sendCodeType: false,
|
|
totalTime: 10, //一般是60
|
|
timer: '', //定时器
|
|
|
|
loginForm: {
|
|
userName: '',
|
|
password: '',
|
|
verifyCode: "",
|
|
type: "1"
|
|
},
|
|
imgCode: '',
|
|
loading: false,
|
|
loginCode: false,
|
|
showMsg: false,
|
|
forgetPwd: false,
|
|
nopassword: {
|
|
userPhone: '',
|
|
userName: '',
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
tableClick(index) {
|
|
this.tableIndex = index
|
|
|
|
this.loginForm.type = index + ""
|
|
|
|
},
|
|
|
|
// 验证码倒计时
|
|
sendCode() {
|
|
if (this.sendCodeType) return
|
|
// this.getCode() // 获取验证码的接口
|
|
this.sendCodeType = true
|
|
this.sendCodeText = this.totalTime + 's'
|
|
this.timer = setInterval(() => {
|
|
this.totalTime--
|
|
this.sendCodeText = this.totalTime + 's'
|
|
if (this.totalTime < 0) {
|
|
clearInterval(this.timer)
|
|
this.sendCodeText = '发送验证码'
|
|
this.totalTime = 10
|
|
this.sendCodeType = false
|
|
}
|
|
}, 1000)
|
|
},
|
|
|
|
login() {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: 'Loading',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
})
|
|
doLogin(this.loginForm).then((response) => {
|
|
if (response.code == 200) {
|
|
this.$router.push({
|
|
path: '/index'
|
|
})
|
|
loading.close()
|
|
// this.getUserInfo(response.data.loginId)
|
|
window.sessionStorage.setItem('token', response.data.token)
|
|
window.sessionStorage.setItem('sid', response.data.sid)
|
|
window.sessionStorage.setItem('staffSid', response.data.staffSid)
|
|
window.sessionStorage.setItem('userName', response.data.userName)
|
|
|
|
console.log(" token", sessionStorage.getItem('token'))
|
|
}else{
|
|
loading.close()
|
|
}
|
|
|
|
}).catch(() => {
|
|
loading.close()
|
|
})
|
|
|
|
},
|
|
getUserInfo(id) {
|
|
getUserById(id).then((response) => {
|
|
if (response.code == 200) {
|
|
console.log(" response", response)
|
|
let user = response.data
|
|
// 结果存入缓存
|
|
window.sessionStorage.setItem('staffSid', user.staffSid)
|
|
window.sessionStorage.setItem('sid', user.sid)
|
|
window.sessionStorage.setItem('userName', user.userName)
|
|
}
|
|
|
|
}).catch(() => {})
|
|
|
|
},
|
|
codeShow() {
|
|
if (this.loginForm.password == '' || this.loginForm.userName == '') {
|
|
this.loginCode = false
|
|
this.showMsg = true
|
|
return
|
|
}
|
|
this.$refs.imgCodeRole.getCodeImage()
|
|
},
|
|
reGetPwd() {
|
|
user.reGetPwd(this.nopassword).then((res) => {})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
.el-input__inner {
|
|
border: none;
|
|
color: #000;
|
|
font-size: 16px;
|
|
}
|
|
|
|
input:-webkit-autofill {
|
|
-webkit-box-shadow: 0 0 0px 1000px white inset;
|
|
-webkit-text-fill-color: #000;
|
|
}
|
|
|
|
|
|
.login {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
background-image: url(../../assets/home/bj.png);
|
|
background-position: center;
|
|
overflow: hidden;
|
|
|
|
.logoTitle {
|
|
margin: 30px;
|
|
|
|
}
|
|
|
|
.main {
|
|
width: 60%;
|
|
height: 500px;
|
|
background: #ffffff;
|
|
box-shadow: 0px 13px 12px 0px rgba(0, 0, 0, 0.15);
|
|
opacity: 0.8;
|
|
border-radius: 5px;
|
|
position: absolute;
|
|
right: 20%;
|
|
top: 25%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.main-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 50%;
|
|
height: 100%;
|
|
|
|
.main-right-title {
|
|
margin-top: 40px;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.main-right-table {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-top: 30px;
|
|
width: 70%;
|
|
|
|
.main-right-table-text1 {
|
|
flex: 1;
|
|
font-size: 22px;
|
|
text-align: center;
|
|
color: #3E77CD;
|
|
}
|
|
|
|
.main-right-table-text1:after {
|
|
content: '';
|
|
display: block;
|
|
width: 60px;
|
|
border-bottom: 2px solid #3E77CD;
|
|
margin: 0 auto;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
|
|
.main-right-table-text3 {
|
|
flex: 1;
|
|
font-size: 22px;
|
|
text-align: center;
|
|
color: #333;
|
|
border-bottom: none;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.main-right-table-text2 {
|
|
flex: 1;
|
|
font-size: 22px;
|
|
text-align: center;
|
|
color: #3E77CD;
|
|
}
|
|
|
|
.main-right-table-text2:after {
|
|
content: '';
|
|
display: block;
|
|
width: 80px;
|
|
border-bottom: 2px solid #3E77CD;
|
|
margin: 0 auto;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.main-right-table-text4 {
|
|
flex: 1;
|
|
font-size: 22px;
|
|
text-align: center;
|
|
color: #333;
|
|
border-bottom: none;
|
|
padding-bottom: 8px;
|
|
}
|
|
}
|
|
|
|
.main-right-table-password {
|
|
display: flex;
|
|
width: 65%;
|
|
margin-top: 10px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.input {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
height: 45px;
|
|
border-bottom: 1px #ccc solid;
|
|
}
|
|
}
|
|
|
|
.main-right-table-code {
|
|
|
|
display: flex;
|
|
width: 65%;
|
|
margin-top: 10px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.input {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
height: 45px;
|
|
border-bottom: 1px #ccc solid;
|
|
}
|
|
|
|
.sendCode1 {
|
|
font-size: 16px;
|
|
color: #c9c9c9;
|
|
}
|
|
|
|
.sendCode2 {
|
|
font-size: 16px;
|
|
color: #3E77CD;
|
|
}
|
|
|
|
}
|
|
|
|
.main-right-bom {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
display: flex;
|
|
width: 65%;
|
|
margin-top: 10px;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.main-right-bom-left {
|
|
color: #000;
|
|
align-items: center;
|
|
}
|
|
|
|
.main-right-bom-right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
span {
|
|
color: #666;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|