nw-cqdevicemgt-ui/src/views/login.vue

565 lines
20 KiB
Vue
Raw Normal View History

2024-08-29 10:27:08 +08:00
<template>
<div class="login">
<div class="login-bar">
<div class="form-bar">
<h3 class="title">智慧仓储管理平台</h3>
<el-tabs
v-model="activeName"
style="width: 82%; margin: 0 auto"
>
<el-tab-pane label="账号登录" name="account"></el-tab-pane>
<el-tab-pane label="手机登录" name="phone"></el-tab-pane>
</el-tabs>
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<el-form-item
prop="username"
v-if="activeName == 'account'"
>
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
<svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item
prop="password"
v-if="activeName == 'account'"
>
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
show-password
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item
prop="code"
v-if="captchaEnabled && activeName == 'account'"
class="code-box"
>
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="图形验证码"
style="width: 65%"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</el-input>
<div class="login-code">
<img
:src="codeUrl"
@click="getCode"
class="login-code-img"
/>
</div>
</el-form-item>
<el-form-item
style="width: 100%"
v-if="activeName == 'account'"
>
<el-button
:loading="loading"
size="medium"
type="primary"
style="width: 100%"
@click.native.prevent="handleLogin"
>
<span v-if="!loading"> </span>
<span v-else> 中...</span>
</el-button>
<div style="float: right" v-if="register">
<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
<router-link class="link-type" :to="'/register'"
>立即注册</router-link
>
</div>
</el-form-item>
<el-form-item prop="phone" v-if="activeName == 'phone'">
<el-input
v-model="loginForm.phone"
type="text"
:readonly="readonlyFlag"
@focus="handleInputClick"
auto-complete="off"
placeholder="手机号"
>
<svg-icon
slot="prefix"
icon-class="phone"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item
prop="textCode"
v-if="activeName == 'phone'"
class="code-box"
>
<el-input
v-model="loginForm.textCode"
auto-complete="off"
placeholder="短信验证码"
style="width: 65%"
>
<svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</el-input>
<div class="login-code">
<!-- <div class="login-code-img" style="border: 1px solid rgb(220, 223, 230);" @click="getTextCode">获取验证码</div> -->
<div
class="login-code-img"
style="border: 1px solid rgb(220, 223, 230)"
v-show="show === 1"
@click="getTextCode"
>
获取验证码
</div>
<div
class="login-code-img"
style="border: 1px solid rgb(220, 223, 230)"
v-show="show === 2"
>
{{ count }} s
</div>
<div
class="login-code-img"
style="border: 1px solid rgb(220, 223, 230)"
v-show="show === 3"
@click="getTextCode"
>
重发
</div>
</div>
</el-form-item>
<el-form-item
style="width: 100%"
v-if="activeName == 'phone'"
>
<el-button
:loading="loading"
size="medium"
type="primary"
style="width: 100%"
@click.native.prevent="textLogin"
>
<span v-if="!loading"> </span>
<span v-else> 中...</span>
</el-button>
<div style="float: right" v-if="register">
<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
<router-link class="link-type" :to="'/register'"
>立即注册</router-link
>
</div>
</el-form-item>
</el-form>
</div>
</div>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
</div>
</div>
</template>
<script>
import { getCodeImg, sendCode, loginByMall } from '@/api/login'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
export default {
name: 'Login',
data() {
return {
codeUrl: '',
loginForm: {
username: '',
password: '',
phone: '',
rememberMe: false,
code: '',
uuid: '',
},
loginRules: {
username: [
{
required: true,
trigger: 'blur',
message: '请输入您的账号',
},
],
phone: [
{
required: true,
trigger: 'blur',
message: '请输入您的手机号',
},
],
textCode: [
{
required: true,
trigger: 'blur',
message: '请输入短信验证码',
},
],
password: [
{
required: true,
trigger: 'blur',
message: '请输入您的密码',
},
],
code: [
{
required: true,
trigger: 'change',
message: '请输入验证码',
},
],
},
loading: false,
// 验证码开关
captchaEnabled: true,
// 注册开关
register: false,
redirect: undefined,
activeName: 'account',
readonlyFlag: true,
show: 1,
count: '',
timer: null,
loginParams: {}, //登录页面地址栏参数
}
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect
// console.log(this.$route.query.redirect.split("?"))
// console.log(this.$route.query.redirect.split("?")[1].split("&"))
if (this.$route.query.redirect.split('?').length > 1) {
let arr =
this.$route.query.redirect.split('?')[1].split('&') ||
[]
arr.forEach((item, index) => {
this.$set(
this.loginParams,
item.split('=')[0] + '',
item.split('=')[1],
)
})
}
},
immediate: true,
},
},
created() {
// console.log(this.$route.query.redirect.split("?")[1])
if (JSON.stringify(this.loginParams) != '{}') {
this.jumpLogin()
}
this.getCode()
this.getCookie()
},
methods: {
getCode() {
getCodeImg().then((res) => {
this.captchaEnabled =
res.captchaEnabled === undefined ? true : res.captchaEnabled
if (this.captchaEnabled) {
this.codeUrl = 'data:image/gif;base64,' + res.img
this.loginForm.uuid = res.uuid
}
})
},
//防止手机号自动充填
handleInputClick() {
this.readonlyFlag = false
},
//获取短信验证码
getTextCode() {
const regExp = /^1[3456789]\d{9}$/
if (regExp.test(this.loginForm.phone)) {
console.log('手机号格式正确')
sendCode({ phone: this.loginForm.phone }).then((res) => {
if (res.code == 200) {
this.$modal.msgSuccess('发送成功')
const TIME_COUNT = 60
if (!this.timer) {
this.count = TIME_COUNT
this.show = 2
this.timer = setInterval(() => {
if (
this.count > 0 &&
this.count <= TIME_COUNT
) {
this.count--
} else {
this.show = 3
clearInterval(this.timer)
this.timer = null
}
}, 1000)
}
}
})
} else {
this.$modal.msgError('请输入正确手机号')
}
},
//短信登录
textLogin() {
// checkCode
console.log(this.loginForm)
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true
if (this.loginForm.rememberMe) {
Cookies.set('username', this.loginForm.username, {
expires: 30,
})
Cookies.set(
'password',
encrypt(this.loginForm.password),
{ expires: 30 },
)
Cookies.set('rememberMe', this.loginForm.rememberMe, {
expires: 30,
})
} else {
Cookies.remove('username')
Cookies.remove('password')
Cookies.remove('rememberMe')
}
console.log(this.loginForm)
this.$store
.dispatch('textLogin', this.loginForm)
.then(() => {
this.$router.push({ path: '/' }).catch(() => {})
})
.catch(() => {
this.loading = false
})
}
})
},
//南网登录
jumpLogin() {
this.loading = true
let param = {
token: this.loginParams.token,
username: this.loginParams.userName,
}
// console.log(param)
this.$store
.dispatch('ssoLogin', param)
.then(() => {
//成功后会跳转页面入首页
this.$router.push({ path: '/' }).catch(() => {})
})
.catch(() => {
this.loading = false
//失败返回南网登录页面
// window.location.replace('https://test-sso.csgmall.com.cn/?client_id=549OWptc&theme=zhgc_storage&response_type=code&redirect_uri=https%3A%2F%2Ftest-cc.zhgkxt.com')
})
},
getCookie() {
const username = Cookies.get('username')
const password = Cookies.get('password')
const rememberMe = Cookies.get('rememberMe')
this.loginForm = {
username:
username === undefined ? this.loginForm.username : username,
password:
password === undefined
? this.loginForm.password
: decrypt(password),
rememberMe:
rememberMe === undefined ? false : Boolean(rememberMe),
}
},
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true
if (this.loginForm.rememberMe) {
Cookies.set('username', this.loginForm.username, {
expires: 30,
})
Cookies.set(
'password',
encrypt(this.loginForm.password),
{ expires: 30 },
)
Cookies.set('rememberMe', this.loginForm.rememberMe, {
expires: 30,
})
} else {
Cookies.remove('username')
Cookies.remove('password')
Cookies.remove('rememberMe')
}
this.$store
.dispatch('Login', this.loginForm)
.then(() => {
if (localStorage.getItem('isCode') == 1) {
this.$router
.push({ path: '/resetPassword' })
.catch(() => {})
} else {
this.$router.push({ path: '/' }).catch(() => {})
}
// this.$router.push({ path: '/' }).catch(() => {})
2024-08-29 10:27:08 +08:00
})
.catch(() => {
this.loading = false
if (this.captchaEnabled) {
this.getCode()
}
})
}
})
},
},
watch: {
activeName: {
handler(newVal) {
this.$refs['loginForm'].clearValidate()
},
},
},
}
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
//display: flex;
//justify-content: center;
//align-items: center;
position: relative;
height: 100%;
background-image: url('../assets/images/login.png');
background-size: 100% 100%;
//background: #1891FF;
}
.title {
margin: 0px auto 30px auto;
//text-align: center;
color: #707070;
}
.login-bar {
position: absolute;
height: auto;
top: 20%;
left: 14%;
width: auto;
height: 500px;
border-radius: 6px;
display: flex;
background: #fff;
text-align: center;
padding-top: 40px;
}
.form-bar {
//height: 500px;
background: #fff;
}
.login-form {
//border-radius: 6px;
//height: 100%;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 45px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
// width: 30%;
flex: 1;
height: 38px;
// float: right;
margin-left: 12px;
img {
width: 100%;
cursor: pointer;
vertical-align: middle;
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
width: 100%;
cursor: pointer;
}
.code-box .el-form-item__content {
display: flex;
}
</style>