<template>
|
<div class="login_container">
|
<img class='login_bg' src='../../assets/img/login/login_bg.png' />
|
<div class='center_container'>
|
<div class="left">
|
<img class="left-pic" src='../../assets/img/login/login.png' />
|
</div>
|
<div class="right">
|
<div id="wx_qrcode" class='wx_qrcode'></div>
|
<!--<el-form
|
ref="loginForm"
|
v-if="loginProgress ==1"
|
:model="loginForm"
|
:rules="loginRules"
|
class="login-form"
|
auto-complete="on"
|
label-position="left">
|
<div class="title">北京友联华宇科技有限公司</div>
|
<el-form-item prop="LoginName">
|
<el-input
|
ref="name"
|
v-model="loginForm.LoginName"
|
autofocus="autofocus"
|
name="LoginName"
|
type="text"
|
auto-complete="on"
|
placeholder="请输入用户名"
|
@keyup.enter.native="handleLogin" />
|
</el-form-item>
|
<el-form-item prop="LoginPassword">
|
<el-input
|
v-model="loginForm.LoginPassword"
|
type="password"
|
name="LoginPassword"
|
auto-complete="on"
|
placeholder="请输入密码"
|
@keyup.enter.native="handleLogin" />
|
</el-form-item>
|
<el-form-item prop="VerifyCode">
|
<el-row :span="24">
|
<el-col :span="16">
|
<el-input v-model="loginForm.VerifyCode" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="handleLogin('loginForm')"/>
|
</el-col>
|
<el-col :span="8">
|
<div class="login-code" @click="refreshCode">
|
<img :src='loginImg' class='loginImg' />
|
</div>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
:loading="loading"
|
class="submit-btn"
|
@click.native.prevent="handleLogin">
|
登录
|
</el-button>
|
<div class='getPsd' @click='getPsd'>找回密码</div>
|
</el-form-item>
|
</el-form>-->
|
|
<el-form
|
ref="vertifyForm"
|
v-if="loginProgress ==2"
|
:model="vertifyForm"
|
:rules="vertifyRules"
|
class="login-form"
|
auto-complete="on"
|
label-position="left">
|
<el-form-item prop="ResetName" v-if="loginProgress ==2">
|
<el-input
|
ref="ResetName"
|
v-model="vertifyForm.ResetName"
|
autofocus="autofocus"
|
name="ResetName"
|
type="text"
|
auto-complete="on"
|
placeholder="请输入邮箱/手机号"
|
@blur.prevent="handleVertify" />
|
</el-form-item>
|
<el-form-item prop="ResetCode" v-if="loginProgress ==2">
|
<el-row :span="24">
|
<el-col :span="16">
|
<el-input
|
ref="ResetCode"
|
v-model="vertifyForm.ResetCode"
|
autofocus="autofocus"
|
name="ResetCode"
|
type="text"
|
auto-complete="on"
|
placeholder="请输入验证码"
|
@keyup.enter.native="handleVertify" />
|
</el-col>
|
<el-col :span="6">
|
<el-button
|
:disabled="codeDisabled"
|
class="codeBtn"
|
@click.native.prevent="getResetCode">
|
{{codeMsg}}
|
</el-button>
|
</el-col>
|
</el-row>
|
|
</el-form-item>
|
<el-form-item v-if="loginProgress ==2">
|
<el-button
|
:loading="vertifyloading"
|
class="submit-btn"
|
@click.native.prevent="handleVertify">
|
验证
|
</el-button>
|
<div class='getPsd' @click='backToLogin'>返回登录</div>
|
</el-form-item>
|
</el-form>
|
<el-form
|
ref="resetForm"
|
v-if="loginProgress ==3"
|
:model="resetForm"
|
:rules="resetRules"
|
class="login-form"
|
auto-complete="on"
|
label-position="left">
|
<el-form-item prop="newPsd" label="新密码" v-if="loginProgress ==3">
|
<el-input
|
ref="newPsd"
|
v-model="resetForm.newPsd"
|
autofocus="autofocus"
|
name="newPsd"
|
type="text"
|
auto-complete="on"
|
placeholder="请输入新密码"
|
@keyup.enter.native="handleConfirmChange" />
|
</el-form-item>
|
<el-form-item prop="newPsdSceond" label="确认新密码" v-if="loginProgress ==3">
|
<el-input
|
ref="newPsdSceond"
|
v-model="resetForm.newPsdSceond"
|
autofocus="autofocus"
|
name="newPsdSceond"
|
type="text"
|
auto-complete="on"
|
placeholder="请确认新密码"
|
@keyup.enter.native="handleNewCode" />
|
</el-form-item>
|
<el-form-item v-if="loginProgress ==3">
|
<el-button
|
:loading="resetloading"
|
class="submit-btn"
|
@click.native.prevent="handleConfirmChange">
|
确定
|
</el-button>
|
</el-form-item>
|
</el-form>
|
<!--<div class="copyright">
|
北京友联华宇科技有限公司CRM受国家计算机软件著作权保护，未经授权不得进行商业行为，违者必究。<br>
|
<a
|
target="_blank"
|
href="http://www.urlink.com.cn/">©2021 北京友联华宇科技有限公司</a>
|
</div>-->
|
</div>
|
</div>
|
<!--<img
|
src="../../assets/img/logo_bg.png"
|
class="logo" > -->
|
</div>
|
</template>
|
|
<script>
|
import SIdentify from '@/components/common/SIdentify'
|
// FindPassword FindPasswordStep2 FindPasswordStep3 CreateVerifyCode, requestLogin,
|
import { WxLogin, CheckLogin } from '@/api/login'
|
import Lockr from 'lockr'
|
import {
|
addAuth
|
} from '@/utils/auth'
|
export default {
|
name: 'Login',
|
components: { SIdentify },
|
data () {
|
const validateLoginName = (rule, value, callback) => {
|
if (value.length === 0) {
|
callback(new Error('请输入账号'))
|
} else {
|
callback()
|
}
|
}
|
const validatePass = (rule, value, callback) => {
|
let psd = /^[A-Za-z0-9]{6,20}$/
|
if (value === '') {
|
callback(new Error('请输入密码'))
|
} else if (!psd.test(value)) {
|
callback(new Error('请输入至少包含 数字和英文，长度6-20的密码'))
|
} else {
|
callback()
|
}
|
}
|
const validateCode = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入验证码'))
|
} else {
|
callback()
|
}
|
}
|
const validateResetName = (rule, value, callback) => {
|
let phone = /^1(3|4|5|6|7|8|9)\d{9}$/
|
let mail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
|
if (value.length === 0) {
|
callback(new Error('请输入邮箱/手机号'))
|
} else if (!phone.test(value) && !mail.test(value)) {
|
callback(new Error('请输入正确的手机号/邮箱地址'))
|
} else {
|
this.codeDisabled = false
|
console.log(this.codeDisabled)
|
callback()
|
}
|
}
|
const validateresetCode = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入验证码'))
|
} else {
|
if (value !== this.identifyCode) {
|
callback(new Error('请输入正确的验证码'))
|
}
|
callback()
|
}
|
}
|
const validatenewPsd = (rule, value, callback) => {
|
let psd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
|
if (value === '') {
|
callback(new Error('请输入新密码'))
|
} else if (!psd.test(value)) {
|
callback(new Error('请输入至少包含 数字和英文，长度6-20的密码'))
|
} else {
|
callback()
|
}
|
}
|
const validatenewPsdTrue = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请再次输入新密码'))
|
} else if (value !== this.resetForm.newPsd) {
|
callback(new Error('请输入相同的新密码'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
loginProgress: '1', // 1 登录 2 重置密码验证 3 重置密码
|
loginForm: {
|
LoginName: '',
|
LoginPassword: '',
|
VerifyCode: ''
|
},
|
vertifyForm: {
|
ResetName: '',
|
ResetCode: ''
|
},
|
vertifyRules: {
|
ResetName: [
|
{ required: true, trigger: 'blur', validator: validateResetName }
|
],
|
ResetCode: [{ required: true, trigger: 'blur', validator: validateresetCode }]
|
},
|
resetForm: {
|
newPsd: '',
|
newPsdSceond: ''
|
},
|
resetRules: {
|
newPsd: [
|
{ required: true, trigger: 'blur', validator: validatenewPsd }
|
],
|
newPsdSceond: [{ required: true, trigger: 'blur', validator: validatenewPsdTrue }]
|
},
|
loginRules: {
|
LoginName: [
|
{ required: true, trigger: 'blur', validator: validateLoginName }
|
],
|
LoginPassword: [{ required: true, trigger: 'blur', validator: validatePass }],
|
VerifyCode: [
|
{ required: true, trigger: 'blur', validator: validateCode }
|
]
|
},
|
loading: false,
|
vertifyloading: false, // 验证
|
resetloading: false, // 重置
|
redirect: undefined,
|
remember: false,
|
identifyCodes: [1, 2, 3, 4],
|
identifyCode: '3333',
|
codeMsg: '获取验证码',
|
countdown: 60,
|
timer: null,
|
codeDisabled: true,
|
loginImg: '',
|
loginToken: ''
|
}
|
},
|
watch: {
|
$route: {
|
handler: function (route) {
|
console.log(sessionStorage.getItem('code'))
|
const query = route.query
|
if (query) {
|
let queryCode = sessionStorage.getItem('code')
|
if (queryCode) {
|
// this.userWxLogin(queryCode)
|
// 成功后删除不必要的参数（state,code,appid 在其他页面并不需要），保证路由是干净的
|
// delete this.otherQuery.code
|
// delete this.otherQuery.state
|
// delete this.otherQuery.appid
|
}
|
}
|
},
|
immediate: true
|
}
|
},
|
mounted () {
|
console.log('localStorage' + '-----' + window.localStorage.getItem('token'))
|
console.log('sessionStorage' + '-----' + window.sessionStorage.getItem('token'))
|
console.log(Lockr.get('Admin-Token'))
|
if (window.localStorage.getItem('token')) {
|
this.setToken(window.localStorage.getItem('token'))
|
} else if (Lockr.get('Admin-Token')) {
|
this.setToken(Lockr.get('Admin-Token'))
|
} else {
|
window.WwLogin({
|
'id': 'wx_qrcode',
|
'appid': 'wwcb2217872225e05b',
|
'agentid': '1000004',
|
'redirect_uri': encodeURIComponent('http://crm.urlink.com.cn/#/logining'),
|
'state': '',
|
'href': ''
|
})
|
}
|
|
// this.loginToken = Lockr.get('Login-Cache')
|
// this.getTextCode()
|
},
|
methods: {
|
// getTextCode () {
|
// CreateVerifyCode(this.loginToken).then(res => {
|
// console.log(res)
|
// return (
|
// 'data:image/png;base64,' +
|
// btoa(
|
// new Uint8Array(res.data).reduce(
|
// (data, byte) => data + String.fromCharCode(byte),
|
// ''
|
// )
|
// )
|
// )
|
// })
|
// .then(data => {
|
// this.loginImg = data
|
// })
|
// },
|
// onKeyUp (type) {
|
// this[type] = this[type].replace(/./g, '*')
|
// },
|
// 找回密码 1
|
// getPsd () {
|
// this.loginProgress = 2
|
// },
|
// 忘记密码 重置 2
|
// backToLogin () {
|
// this.loginProgress = 1
|
// },
|
// 重置- 获取验证码 2
|
// resetVertifyForm () {
|
// this.$refs.vertifyForm.resetFields()
|
// },
|
// 验证- 获取验证码
|
// handleVertify () {
|
// this.$refs.vertifyForm.validate(valid => {
|
// if (valid) {
|
// // let params = {
|
// // 'Token': '',
|
// // 'ValiteCode': ''
|
// // }
|
// // FindPasswordStep2(params).then(res => {
|
|
// // })
|
// this.loginProgress = 3
|
// clearInterval(this.timer)
|
// this.codeMsg = '获取短信验证码'
|
// this.countdown = 60
|
// this.timer = null
|
// this.codeDisabled = false
|
// this.resetVertifyForm()
|
// }
|
// })
|
// },
|
// 重置- 获取验证码 2
|
// getResetCode () {
|
// console.log('11111')
|
// if (this.vertifyForm.ResetName !== '') {
|
// this.codeDisabled = true
|
// // let data = {
|
// // Account: this.ResetName
|
// // }
|
// // FindPassword(data).then(res=>{
|
// // if(res.code === 200){
|
// if (!this.timer) {
|
// console.log(this.countdown)
|
// this.timer = setInterval(() => {
|
// if (this.countdown > 0 && this.countdown <= 60) {
|
// this.countdown--
|
// if (this.countdown !== 0) {
|
// this.codeDisabled = true
|
// this.codeMsg = '重新发送(' + this.countdown + ')'
|
// } else {
|
// clearInterval(this.timer)
|
// this.codeMsg = '获取短信验证码'
|
// this.countdown = 60
|
// this.timer = null
|
// this.codeDisabled = false
|
// }
|
// }
|
// }, 1000)
|
// }
|
// }else{
|
// this.message({
|
// message:res.message,
|
// type:'error'
|
// })
|
// this.codeDisabled = false;
|
// }
|
// })
|
// }
|
// },
|
// 确认新密码 3
|
// resetConfirmForm () {
|
// this.$refs.resetForm.resetFields()
|
// },
|
// 确认新密码 3
|
// handleConfirmChange () {
|
// this.$refs.resetForm.validate(valid => {
|
// if (valid) {
|
// // let params = {
|
// // 'NewPassword': this.resetForm.newPsd,
|
// // 'ConfirmPassword': this.resetForm.newPsdSceond,
|
// // 'Token': ''
|
// // }
|
// // FindPasswordStep3(params).then(res => {
|
|
// // })
|
// this.loginProgress = 1
|
// this.resetConfirmForm()
|
// }
|
// })
|
// },
|
// 登录 1
|
// resetLoginForm () {
|
// this.$refs.loginForm.resetFields()
|
// },
|
userWxLogin (code) {
|
WxLogin(code).then(res => {
|
console.log(res)
|
if (res.data.ErrorCode !== 200) {
|
this.$message.error('登录失败！')
|
this.loading = false
|
} else {
|
if (res.data.ErrorCode === 500) {
|
this.$message.error(res.data.Message)
|
this.loading = false
|
} else {
|
this.loading = false
|
this.$message.success('登录成功！')
|
addAuth(res.data.Result.Token)
|
Lockr.set('Admin-Token', res.data.Result.Token)
|
Lockr.set('User-Info', res.data.Result.LoginUserInfo)
|
this.$store.commit('SET_USERINFO', res.data.Result.LoginUserInfo)
|
window.localStorage.setItem('token', res.data.Result.Token)
|
this.$store.dispatch('getAuth')
|
this.$router.replace('/home')
|
}
|
}
|
})
|
},
|
setToken (token) {
|
CheckLogin({'Token': token}).then(res => {
|
if (res.data.ErrorCode === 200) {
|
this.$message.success('登录成功！')
|
addAuth(res.data.Result.Token)
|
Lockr.set('Admin-Token', res.data.Result.Token)
|
Lockr.set('User-Info', res.data.Result.LoginUserInfo)
|
this.$store.commit('SET_USERINFO', res.data.Result.LoginUserInfo)
|
window.localStorage.setItem('token', res.data.Result.Token)
|
this.$store.dispatch('getAuth')
|
this.$router.replace('/home')
|
} else {
|
window.WwLogin({
|
'id': 'wx_qrcode',
|
'appid': 'wwcb2217872225e05b',
|
'agentid': '1000004',
|
'redirect_uri': encodeURIComponent('http://crm.urlink.com.cn/#/logining'),
|
'state': '',
|
'href': ''
|
})
|
}
|
})
|
.catch(res => {
|
window.WwLogin({
|
'id': 'wx_qrcode',
|
'appid': 'wwcb2217872225e05b',
|
'agentid': '1000004',
|
'redirect_uri': encodeURIComponent('http://crm.urlink.com.cn/#/logining'),
|
'state': '',
|
'href': ''
|
})
|
})
|
}
|
// 登录 1
|
// handleLogin () {
|
// this.$refs.loginForm.validate(valid => {
|
// console.log(valid)
|
// if (!valid) return
|
// this.loading = true
|
// // this.$message.success('登录成功！')
|
// // window.sessionStorage.setItem('token', this.loginForm.LoginPassword)
|
// // this.loading = false
|
// // this.$router.replace('/home')
|
// let params = {
|
// LoginName: this.loginForm.LoginName,
|
// LoginPassword: this.loginForm.LoginPassword,
|
// VerifyCode: this.loginForm.VerifyCode,
|
// Verify: this.loginToken
|
// }
|
// requestLogin(params).then(res => {
|
// console.log(res)
|
// if (res.data.ErrorCode !== 200) {
|
// this.resetLoginForm()
|
// this.$message.error('登录失败！')
|
// this.loading = false
|
// } else {
|
// if (res.data.ErrorCode === 500) {
|
// this.$message.error(res.data.Message)
|
// this.loading = false
|
// } else {
|
// this.loading = false
|
// this.$message.success('登录成功！')
|
// addAuth(res.data.Result.Token)
|
// Lockr.set('Admin-Token', res.data.Result.Token)
|
// Lockr.set('User-Info', res.data.Result.LoginUserInfo)
|
// window.localStorage.setItem('token', res.data.Result.Token)
|
// this.$store.dispatch('getAuth')
|
// this.$router.replace('/home')
|
// }
|
// }
|
// })
|
// })
|
// },
|
// randomNum (min, max) {
|
// return Math.floor(Math.random() * (max - min) + min)
|
// },
|
// refreshCode () {
|
// console.log('111')
|
// this.getTextCode()
|
// // this.identifyCode = ''
|
// // this.makeCode(this.identifyCodes, 4)
|
// },
|
// makeCode (o, l) {
|
// for (let i = 0; i < l; i++) {
|
// // eslint-disable-next-line standard/computed-property-even-spacing
|
// this.identifyCode += this.identifyCodes[
|
// this.randomNum(0, this.identifyCodes.length)
|
// ]
|
// }
|
// }
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
@media screen and (max-width:1366px) and (min-width:300px){
|
.login_bg{
|
width: 100%;
|
height:470px;
|
position: absolute;
|
content: '1366';
|
left: 0;
|
bottom: 0;
|
}
|
}
|
@media screen and (max-width:1440px) and (min-width:1367px){
|
.login_bg{
|
width: 100%;
|
height:536px;
|
position: absolute;
|
content: '1440';
|
left: 0;
|
bottom: 0;
|
}
|
}
|
@media screen and (max-width:1920px) and (min-width:1441px){
|
.login_bg{
|
width: 100%;
|
height:500px;
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
}
|
}
|
.login_container{
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background: #F0F1F5;
|
min-width: 1300px;
|
display: flex;
|
align-items: center;
|
.center_container{
|
position: absolute;
|
left:50%;
|
transform:translateX(-50%);
|
width: 1000px;
|
height: 680px;
|
background: #FFFFFF;
|
box-shadow: 0px 2px 4px 0px rgba(15, 27, 51, 0.05);
|
border-radius: 4px;
|
display: flex;
|
.left {
|
width: 440px;
|
.left-pic {
|
height: 100%;
|
background-color:#f0f8ff;
|
}
|
}
|
.right {
|
position: relative;
|
width: 560px;
|
background-color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
.el-form {
|
width: 70%;
|
.title {
|
font-size: 26px;
|
color: #333;
|
margin: 0 auto 50px;
|
text-align: center;
|
}
|
.submit-btn {
|
width: 100%;
|
line-height: 2;
|
font-size: 16px;
|
color: white;
|
border-radius: 3px;
|
background-color: #ff7d00;
|
display: block;
|
}
|
.codeBtn{
|
width: 124px;
|
height: 40px;
|
line-height: 1;
|
font-size: 14px;
|
color: white;
|
border-radius: 3px;
|
background-color: #ff7d00;
|
display: block;
|
margin-left: 20px;
|
}
|
.getPsd{
|
color: #333;
|
font-size: 14px;
|
cursor:pointer;
|
float:right;
|
&:hover{
|
color:#ff7d00;
|
}
|
}
|
.el-button {
|
border: 0 none;
|
}
|
.action-control {
|
color: #999;
|
/deep/ .el-checkbox {
|
.el-checkbox__label {
|
color: #999;
|
}
|
.el-checkbox__input.is-checked .el-checkbox__inner {
|
background-color: #ff7d00;
|
border-color: #ff7d00;
|
}
|
}
|
|
.forget {
|
cursor: pointer;
|
float: right;
|
}
|
}
|
}
|
|
.register {
|
width: 70%;
|
padding-top: 30px;
|
color: #333;
|
border-top: 1px solid #e6e6e6;
|
text-align: center;
|
margin-top: 28px;
|
.register-btn {
|
color: #ff7d00;
|
cursor: pointer;
|
}
|
}
|
|
.copyright {
|
width: 92%;
|
position: absolute;
|
bottom: 5%;
|
color: #d0d0d0;
|
font-size: 12px;
|
text-align: center;
|
line-height: 1.5;
|
}
|
}
|
}
|
|
.logo {
|
position: absolute;
|
left: 60px;
|
top: 0px;
|
width: 200px;
|
height: 200px;
|
z-index: 200;
|
}
|
.loginImg{
|
width: 124px;
|
margin-left: 20px;
|
}
|
}
|
</style>
|
