421 lines
12 KiB
Vue
421 lines
12 KiB
Vue
<template>
|
||
<div class="login-wrap">
|
||
<div class="login-logo">
|
||
<img src="../../assets/image/login-logo.png" height="40" alt="">
|
||
</div>
|
||
<div class="login-box">
|
||
<div class="login-content flex-column-center">
|
||
<div class="logo-wrap flex-row-center align-items-center">
|
||
<div class="f32 color-text-regular">欢迎登录</div>
|
||
</div>
|
||
|
||
<div class="flex-column-center width100">
|
||
<el-tabs class="zd-el-tabs-custom p-v-24"
|
||
v-model="loginWay" @tab-click="handleChangeLoginWay">
|
||
<el-tab-pane label="短信登录" name="phone"></el-tab-pane>
|
||
<el-tab-pane label="账号登录" name="account"></el-tab-pane>
|
||
</el-tabs>
|
||
<!--通过手机验证码登录-->
|
||
<el-form v-if="loginWay === 'phone'"
|
||
:model="ruleForm" :rules="rules"
|
||
ref="ruleForm" label-width="0"
|
||
class="width100">
|
||
<el-form-item label="" prop="telephone">
|
||
<el-input v-model.trim="ruleForm.telephone" placeholder="请输入手机号" maxLength="11"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="smsCode">
|
||
<div class="position-r">
|
||
<el-input v-model.trim="ruleForm.smsCode" maxLength="6"
|
||
placeholder="请输入验证码" class="login-sms-code"></el-input>
|
||
|
||
<div class="login-sms-code-btn position-a flex-row-center align-items-center">
|
||
<el-divider direction="vertical"></el-divider>
|
||
<el-button type="text" @click="handleGetMsgCode"
|
||
:disabled="codeBtnDisabled">
|
||
<div style="width: 110px">{{codeBtnText}}</div>
|
||
</el-button>
|
||
</div>
|
||
|
||
</div>
|
||
</el-form-item>
|
||
|
||
|
||
<div class="flex mt-24">
|
||
<el-button class="flex-fill" type="primary" @click="handleLoginByPhone">登录</el-button>
|
||
</div>
|
||
</el-form>
|
||
|
||
<!--通过账号密码登录-->
|
||
<el-form v-if="loginWay === 'account'" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0"
|
||
class="width100 mt-30 pt-5">
|
||
<el-form-item label="" prop="account">
|
||
<el-input v-model.trim="ruleForm.account" placeholder="请输入手机号/账号" maxLength="18"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="password">
|
||
<el-input v-model.trim="ruleForm.password" placeholder="请输入密码" maxLength="18"
|
||
type="password"></el-input>
|
||
</el-form-item>
|
||
|
||
<div class="flex mt-24">
|
||
<el-button class="flex-fill" type="primary" @click="handleLoginByAccount">登录</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="login_footer_ad flex-column-center align-items-center">
|
||
<div class="f12 color-86909C pt-8">
|
||
<span class="pl-8">Copyright © {{$util.getToyear()}} 法智数科 版权所有</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import socketClass from "../../utils/stompSocket";
|
||
|
||
export default {
|
||
data() {
|
||
const validatePhone = (rule, value, callback) => {
|
||
if (!value) {
|
||
callback(new Error('请输入11位手机号码'));
|
||
}
|
||
//使用正则表达式进行验证手机号码
|
||
else if (!/^1[3456789]\d{9}$/.test(value)) {
|
||
callback(new Error('手机号不正确！'));
|
||
} else {
|
||
callback()
|
||
}
|
||
};
|
||
return {
|
||
loginWay: 'phone',
|
||
qrCodeSrc: '',
|
||
qrCodeInfo: {},
|
||
qrFail: false, // true-二维码失效
|
||
strKey: 'trydotec',
|
||
codeBtnText: '获取验证码',
|
||
codeBtnDisabled: false,
|
||
ruleForm: {
|
||
telephone: '',
|
||
account: '18381082759',
|
||
password: 'trydo@123456',
|
||
smsCode: '',
|
||
},
|
||
rules: {
|
||
telephone: [
|
||
{validator: validatePhone, trigger: 'blur'}
|
||
],
|
||
smsCode: [
|
||
{required: true, message: '请输入短信验证码', trigger: 'blur'}
|
||
],
|
||
account: [
|
||
{required: true, message: '请输入手机号', trigger: 'blur'}
|
||
],
|
||
password: [
|
||
{required: true, message: '请输入密码', trigger: 'blur'}
|
||
],
|
||
},
|
||
timer: null,
|
||
outTime: 60
|
||
};
|
||
},
|
||
methods: {
|
||
handleLoginByPhone() {
|
||
this.$refs.ruleForm.validate((valid) => {
|
||
if (valid) {
|
||
|
||
let telephone = this.$util.encryptByDES(this.strKey, this.ruleForm.telephone)
|
||
let smsCode = this.$util.encryptByDES(this.strKey, this.ruleForm.smsCode)
|
||
let formData = {
|
||
'phone': telephone,
|
||
'code': smsCode,
|
||
'type': 2,
|
||
'platform': 2
|
||
}
|
||
this.$fetchApi.login(formData).then(res => {
|
||
sessionStorage.setItem('token', res.token)
|
||
this.$store.commit('setToken', res.token)
|
||
sessionStorage.setItem('userInfo', JSON.stringify(res.user))
|
||
this.$store.commit('setUserInfo', res.user)
|
||
if (res.user.resources.length > 0) {
|
||
let url = "/workbench";
|
||
// let data= res.user.resources[0].children[0]
|
||
// if(data.children.length>0){
|
||
// url = data.children[0].url
|
||
// }else{
|
||
// url = data.url
|
||
// }
|
||
this.$store.commit('setRoutes', url)
|
||
this.$router.push(url)
|
||
} else {
|
||
this.$message.warning('未赋予数据权限！')
|
||
}
|
||
})
|
||
|
||
}
|
||
});
|
||
},
|
||
handleLoginByAccount() {
|
||
this.$refs.ruleForm.validate((valid) => {
|
||
if (valid) {
|
||
|
||
this.$store.commit('setPassword', this.rules.password)
|
||
let username = this.$util.encryptByDES(this.strKey, this.ruleForm.account)
|
||
let password = this.$util.encryptByDES(this.strKey, this.ruleForm.password)
|
||
let formData = {
|
||
'username': username,
|
||
'password': password,
|
||
'type': 1,
|
||
'platform': 2
|
||
}
|
||
this.$fetchApi.login(formData).then(res => {
|
||
|
||
sessionStorage.setItem('token', res.token)
|
||
this.$store.commit('setToken', res.token)
|
||
sessionStorage.setItem('userInfo', JSON.stringify(res.user))
|
||
this.$store.commit('setUserInfo', res.user)
|
||
|
||
sessionStorage.setItem('brokerEndpoint', res.brokerEndpoint)
|
||
this.$store.commit('setBrokerEndpoint', res.brokerEndpoint)
|
||
let socketUrl = res.brokerEndpoint ? res.brokerEndpoint : `wss://mediate.dev.trydotec.com/mediate/ws/websocket`;
|
||
this.$stompSocket.initStomp(socketUrl,a => this.socketSucc(a), b => this.socketErr(b));
|
||
if (res.user.resources.length > 0) {
|
||
let url = "/workbench";
|
||
// let data= res.user.resources[0].children[0]
|
||
// if(data.children.length>0){
|
||
// url = data.children[0].url
|
||
// }else{
|
||
// url = data.url
|
||
// }
|
||
this.$store.commit('setRoutes', url)
|
||
this.$router.push(url)
|
||
} else {
|
||
this.$message.warning('未赋予数据权限！')
|
||
}
|
||
})
|
||
|
||
|
||
}
|
||
});
|
||
},
|
||
// 获取短信验证码
|
||
handleGetMsgCode() {
|
||
// form为表单名字并ref="form"; prop 换成你想监听的prop字段
|
||
this.$refs.ruleForm.validateField('telephone', (errMsg) => {
|
||
if (!errMsg) {
|
||
// 验证成功，获取短信验证码
|
||
// 防止重复点击
|
||
if (!this.$clickThrottle()) {
|
||
return
|
||
}
|
||
this.$fetchApi.sendVerifyCode(this.ruleForm.telephone).then(res => {
|
||
|
||
this.codeBtnDisabled = true
|
||
if (!this.timer) {
|
||
this.timer = setInterval(() => {
|
||
this.codeBtnText = this.outTime + 's 再次获取'
|
||
this.outTime = this.outTime - 1
|
||
if (this.outTime <= 0) {
|
||
// 倒计时结束，重置时间器clearInterval(this.timer)
|
||
clearInterval(this.timer)
|
||
this.codeBtnText = '获取短信验证码'
|
||
this.outTime = 60
|
||
this.timer = null
|
||
this.codeBtnDisabled = false
|
||
}
|
||
}, 1000)
|
||
// 每秒执行一次
|
||
}
|
||
|
||
})
|
||
|
||
}
|
||
})
|
||
},
|
||
handleChangeLoginWay(tab, event) {
|
||
if (this.$refs.ruleForm) {
|
||
this.$refs.ruleForm.clearValidate();
|
||
}
|
||
if (tab && typeof tab === 'string') {
|
||
this.loginWay = type
|
||
return
|
||
}
|
||
|
||
// if('phone,account'.indexOf(this.loginWay) !== -1) {
|
||
// this.loginWay = 'qrCode'
|
||
// }else{
|
||
// this.loginWay = 'phone'
|
||
// }
|
||
|
||
// if(this.loginWay === 'qrCode') {
|
||
// // 生成二维码
|
||
// this.getQRCode()
|
||
// }
|
||
},
|
||
|
||
|
||
getQRCode() {
|
||
this.qrFail = false
|
||
this.$fetchApi.getLoginQRCode().then(res => {
|
||
this.qrCodeInfo = res
|
||
this.qrCodeSrc = res.qrCode
|
||
this.loginByScanCode()
|
||
})
|
||
},
|
||
loginByScanCode() {
|
||
let timeNum = 0
|
||
let scanCodeTimer = setInterval(() => {
|
||
|
||
if (timeNum > 200) {
|
||
clearInterval(scanCodeTimer);
|
||
this.qrFail = true
|
||
} else {
|
||
|
||
this.$fetchApi.loginByQRCode(this.qrCodeInfo.verify).then(res => {
|
||
|
||
if (res.status == 'INVALID') {
|
||
this.qrFail = true
|
||
clearInterval(scanCodeTimer);
|
||
}
|
||
if (res.status == 'SUCCESS') {
|
||
// 登录成功
|
||
this.$store.commit('setToken', res.token)
|
||
this.$store.commit('setRoutes', JSON.parse(res.perms))
|
||
this.$router.push('/')
|
||
clearInterval(scanCodeTimer);
|
||
}
|
||
}).catch(err => {
|
||
this.qrFail = true
|
||
clearInterval(scanCodeTimer);
|
||
})
|
||
|
||
}
|
||
timeNum++;
|
||
}, 1500);
|
||
},
|
||
resetForm(formName) {
|
||
this.$refs[formName].resetFields();
|
||
},
|
||
|
||
socketSucc(frame) {
|
||
console.log(frame, '---初始化成功login')
|
||
},
|
||
socketErr(frame) {
|
||
console.log(frame, '---初始化失败login')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.login-logo {
|
||
padding: 20px 0 0 40px;
|
||
}
|
||
|
||
.login-wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url('~@/assets/image/login-bg1.png') no-repeat;
|
||
background-size: cover;
|
||
position: relative;
|
||
}
|
||
|
||
.login-box {
|
||
width: 384px;
|
||
height: 370px;
|
||
position: absolute;
|
||
right: 15%;
|
||
top: 50%;
|
||
margin-top: -185px;
|
||
}
|
||
|
||
.login-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
border-radius: 2px;
|
||
background: $color-white;
|
||
padding: $size32;
|
||
padding-bottom: 0;
|
||
border-radius: 5px;
|
||
// box-shadow: 0px 33px 114px rgba(25, 96, 244, 0.26), 0px 9.94853px 34.3677px rgba(25, 96, 244, 0.169413), 0px 4.13211px 14.2746px rgba(25, 96, 244, 0.13), 0px 1.4945px 5.16283px rgba(25, 96, 244, 0.0905869);
|
||
box-shadow: 0px 4px 4px 0px #00000014;
|
||
|
||
}
|
||
|
||
.login-tab {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.login-btn {
|
||
color: #fff;
|
||
background-color: #5d78ff;
|
||
border-color: #5d78ff;
|
||
|
||
&:hover {
|
||
background-color: #3758ff;
|
||
border-color: #2a4eff;
|
||
}
|
||
}
|
||
|
||
.login-qr-code-box {
|
||
width: 260px;
|
||
height: 260px;
|
||
position: relative;
|
||
}
|
||
|
||
.login-qr-fail {
|
||
width: 260px;
|
||
height: 260px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.login_footer_ad {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
left: 50%;
|
||
margin-left: -129px;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.logo-wrap {
|
||
height: 29px;
|
||
}
|
||
|
||
.logo-img {
|
||
width: 58%;
|
||
height: 24px;
|
||
}
|
||
|
||
</style>
|
||
<style lang="scss">
|
||
.login-wrap {
|
||
.el-tabs__nav-wrap {
|
||
&::after {
|
||
background-color: $color-white !important;
|
||
}
|
||
}
|
||
|
||
.el-input__inner {
|
||
border-top: 0 !important;
|
||
border-left: 0 !important;
|
||
border-right: 0 !important;
|
||
border-radius: 0 !important;
|
||
color: $color-text-primary;
|
||
}
|
||
|
||
.login-sms-code .el-input__inner {
|
||
padding-right: 150px;
|
||
}
|
||
|
||
.login-sms-code-btn {
|
||
top: 3px;
|
||
right: 0;
|
||
}
|
||
}
|
||
</style> |