243 lines
6.7 KiB
Vue
243 lines
6.7 KiB
Vue
<template>
|
|
<div class="site-wrapper site-page--login">
|
|
<div class="site-content__wrapper">
|
|
<div class="site-content">
|
|
<div class="brand-info">
|
|
<h2 class="brand-info__text">企业数字化管理系统</h2>
|
|
</div>
|
|
<div class="login-main">
|
|
<h3 class="login-title">用户登录</h3>
|
|
<el-form
|
|
:model="dataForm"
|
|
:rules="dataRule"
|
|
ref="dataForm"
|
|
@keyup.enter.native="handleLogin()"
|
|
status-icon
|
|
>
|
|
<el-form-item prop="userName">
|
|
<el-input clearable v-model="dataForm.userName" placeholder="帐号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input clearable v-model="dataForm.password" type="password" placeholder="密码"></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item prop="captcha">-->
|
|
<!-- <el-row :gutter="20">-->
|
|
<!-- <el-col :span="14">-->
|
|
<!-- <el-input-->
|
|
<!-- @key.enter.native="handleLogin"-->
|
|
<!-- clearable-->
|
|
<!-- v-model="dataForm.captcha"-->
|
|
<!-- placeholder="验证码"-->
|
|
<!-- ></el-input>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="10" class="login-captcha">-->
|
|
<!-- <img :src="captchaPath" @click="handleGetImgCaptcha" />-->
|
|
<!-- </el-col>-->
|
|
<!-- </el-row>-->
|
|
<!-- </el-form-item>-->
|
|
<el-form-item prop="captcha">
|
|
<el-row :gutter="20">
|
|
<el-col :span="14">
|
|
<el-input v-model="dataForm.verify" placeholder="验证码">
|
|
</el-input>
|
|
</el-col>
|
|
<el-col :span="10" class="login-captcha">
|
|
<el-button v-if="!hasSendCode" type="primary" @click="handleVerify">获取验证码</el-button>
|
|
<el-button v-else type="primary">重新发送({{time}}S)</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
class="login-btn-submit"
|
|
type="primary"
|
|
:loading="isloading"
|
|
@click="handleLogin"
|
|
>登录</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getUUID } from '@/utils'
|
|
import { apiLogin, apiSsysSendSMS } from '@/api/api_sys'
|
|
import { apiDingtalkLogin } from '@/api/api_staff'
|
|
import * as dd from 'dingtalk-jsapi'
|
|
var dingCode = ''
|
|
export default {
|
|
data () {
|
|
return {
|
|
isloading: false,
|
|
dataForm: {
|
|
userName: '',
|
|
password: '',
|
|
uuid: '',
|
|
// captcha: ''
|
|
verify: ''
|
|
},
|
|
dataRule: {
|
|
userName: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],
|
|
password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
|
|
// captcha: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
|
|
verify: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
|
|
},
|
|
// captchaPath: '' // 图像验证码请求地址
|
|
time: 0,
|
|
timer: true,
|
|
hasSendCode: false
|
|
}
|
|
},
|
|
created () {
|
|
// this.handleGetImgCaptcha()
|
|
},
|
|
mounted () {
|
|
},
|
|
methods: {
|
|
// // 获取图像验证码
|
|
// handleGetImgCaptcha () {
|
|
// this.dataForm.uuid = getUUID()
|
|
// this.captchaPath = `/lz_management/captcha.jpg?uuid=${this.dataForm.uuid}`
|
|
// },
|
|
// 登录提交表单
|
|
handleLogin () {
|
|
let param = Object.assign(this.dataForm, {'userName': this.dataForm.userName}, {'uuid': this.dataForm.uuid}, {'verifyCode': this.dataForm.verify})
|
|
this.$refs.dataForm.validate((valid) => {
|
|
if (valid) {
|
|
this.isloading = true
|
|
apiLogin(param).then(res => {
|
|
this.isloading = false
|
|
if (res && res.code == 200) {
|
|
console.log('获取token')
|
|
this.$cookie.set('token', res.token)
|
|
console.log('保存token')
|
|
this.$router.replace({ name: 'home' })
|
|
console.log('跳转')
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
})
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
// 获取验证码
|
|
handleVerify () {
|
|
this.dataForm.uuid = getUUID()
|
|
if (!this.dataForm.userName) {
|
|
this.$message('请输入账号')
|
|
return false
|
|
}
|
|
// if (!this.dataForm.captcha) {
|
|
// this.$message('请输入图形验证码')
|
|
// return false
|
|
// }
|
|
let parmse = {
|
|
userName: this.dataForm.userName,
|
|
// captcha: this.dataForm.captcha,
|
|
password: this.dataForm.password,
|
|
uuid: this.dataForm.uuid
|
|
}
|
|
apiSsysSendSMS(parmse).then(res => {
|
|
if (res.code == 200) {
|
|
this.time = 60
|
|
this.hasSendCode = true
|
|
this.timer = setInterval(() => {
|
|
if (this.time === 0) {
|
|
this.hasSendCode = false
|
|
}
|
|
this.time--
|
|
}, 1000)
|
|
this.$message.success(res.msg)
|
|
} else {
|
|
// this.getCaptcha()
|
|
this.$message.error(res.msg)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.site-wrapper.site-page--login {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: rgba(38, 50, 56, 0.6);
|
|
overflow: hidden;
|
|
&:before {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 100%;
|
|
content: "";
|
|
background-image: url(~@/assets/img/login/login_bg.jpg);
|
|
background-size: cover;
|
|
}
|
|
.site-content__wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background-color: transparent;
|
|
}
|
|
.site-content {
|
|
min-height: 100%;
|
|
padding: 30px 500px 30px 30px;
|
|
}
|
|
.brand-info {
|
|
margin: 220px 100px 0 90px;
|
|
color: #fff;
|
|
}
|
|
.brand-info__text {
|
|
margin: 0 0 22px 0;
|
|
font-size: 48px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
}
|
|
.brand-info__intro {
|
|
margin: 10px 0;
|
|
font-size: 16px;
|
|
line-height: 1.58;
|
|
opacity: 0.6;
|
|
}
|
|
.login-main {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 150px 60px 180px;
|
|
width: 470px;
|
|
min-height: 100%;
|
|
background-color: #fff;
|
|
}
|
|
.login-title {
|
|
font-size: 16px;
|
|
}
|
|
/*.login-captcha {*/
|
|
/* overflow: hidden;*/
|
|
/* > img {*/
|
|
/* width: 100%;*/
|
|
/* cursor: pointer;*/
|
|
/* }*/
|
|
/*}*/
|
|
.login-btn-submit {
|
|
width: 100%;
|
|
margin-top: 38px;
|
|
}
|
|
}
|
|
</style>
|