<template>
|
<div class="login-page">
|
<div class="form-content">
|
<div class="text-22 font-bold text-mainTitle">HELLO</div>
|
<div class="text-26 font-bold text-mainTitle">
|
欢迎来到<span class="text-primary">{{ platformName }}</span>
|
</div>
|
<div class="flex items-center justify-center mt-50 mb-20">
|
<div
|
class="text-20 text-subTitle login-tab cursor-pointer mr-80"
|
:class="{ 'is-active': loginType === 'password' }"
|
@click="loginType = 'password'"
|
>
|
密码登录
|
</div>
|
<div
|
class="text-20 text-subTitle login-tab cursor-pointer"
|
:class="{ 'is-active': loginType === 'sms' }"
|
@click="loginType = 'sms'"
|
>
|
短信登录
|
</div>
|
</div>
|
<el-form
|
v-if="loginType === 'password'"
|
key="password"
|
ref="form"
|
size="medium"
|
:model="form"
|
:rules="rules"
|
>
|
<el-form-item prop="username">
|
<div class="input-wrapper">
|
<el-input
|
v-model="form.username"
|
placeholder="请输入用户名/手机号"
|
></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item prop="password">
|
<div class="input-wrapper">
|
<el-input
|
v-model="form.password"
|
placeholder="请输入密码"
|
type="password"
|
show-password
|
></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item prop="code">
|
<div class="input-wrapper">
|
<el-input v-model="form.code" placeholder="请输入图形验证码">
|
</el-input>
|
<img
|
v-if="captchaCodeImageSrc"
|
:src="captchaCodeImageSrc"
|
alt="图形验证码"
|
class="cursor-pointer w-auto h-45 object-contain"
|
@click="getCapacha"
|
/>
|
</div>
|
</el-form-item>
|
<el-button
|
type="primary"
|
:loading="loading"
|
class="rounded-26 w-full h-50 mt-40"
|
@click="login"
|
>登录</el-button
|
>
|
</el-form>
|
<el-form
|
v-if="loginType === 'sms'"
|
key="sms"
|
ref="smsForm"
|
size="medium"
|
:model="smsForm"
|
:rules="smsRules"
|
>
|
<el-form-item prop="username">
|
<div class="input-wrapper">
|
<el-input
|
v-model="smsForm.username"
|
placeholder="请输入手机号"
|
></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item prop="smsCode">
|
<div class="input-wrapper">
|
<el-input v-model="smsForm.smsCode" placeholder="请输入短信验证码">
|
</el-input>
|
<el-bus-countdown-button
|
send-type="login"
|
:extra-body="{ userType: 'admin' }"
|
:number="smsForm.username"
|
type="text"
|
class="sms-button"
|
></el-bus-countdown-button>
|
</div>
|
</el-form-item>
|
<el-form-item prop="code">
|
<div class="input-wrapper">
|
<el-input v-model="smsForm.code" placeholder="请输入图形验证码">
|
</el-input>
|
<img
|
v-if="smsCaptchaCodeImageSrc"
|
:src="smsCaptchaCodeImageSrc"
|
alt="图形验证码"
|
class="cursor-pointer w-auto h-45 object-contain"
|
@click="getSmsCapacha"
|
/>
|
</div>
|
</el-form-item>
|
<el-button
|
type="primary"
|
:loading="loading"
|
class="rounded-26 w-full h-50 mt-40"
|
@click="smsLogin"
|
>登录</el-button
|
>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
layout: 'empty',
|
data() {
|
return {
|
platformName: this.$config.platformName,
|
loginType: 'password',
|
form: {},
|
smsForm: {},
|
loading: false,
|
captchaCodeImageSrc: null,
|
smsCaptchaCodeImageSrc: null,
|
rules: {
|
username: {
|
required: true,
|
message: '请输入用户名/手机号',
|
trigger: 'blur',
|
},
|
password: { required: true, message: '请输入密码', trigger: 'blur' },
|
code: { required: true, message: '请输入图形验证码', trigger: 'blur' },
|
},
|
smsRules: {
|
username: { required: true, message: '请输入手机号', trigger: 'blur' },
|
smsCode: {
|
required: true,
|
message: '请输入短信验证码',
|
trigger: 'blur',
|
},
|
code: { required: true, message: '请输入图形验证码', trigger: 'blur' },
|
},
|
}
|
},
|
watch: {
|
loginType(val) {
|
if (val === 'sms' && !this.smsCaptchaCodeImageSrc) {
|
this.getSmsCapacha()
|
}
|
},
|
},
|
async mounted() {
|
// 获取验证码图形
|
await this.getCapacha()
|
},
|
methods: {
|
async getCapacha() {
|
const { captchaCodeId, imageSrc } =
|
await this.$services.base.createCaptcha()
|
this.form.codeId = captchaCodeId
|
this.captchaCodeImageSrc = imageSrc
|
},
|
async getSmsCapacha() {
|
const { captchaCodeId, imageSrc } =
|
await this.$services.base.createCaptcha()
|
this.smsForm.codeId = captchaCodeId
|
this.smsCaptchaCodeImageSrc = imageSrc
|
},
|
login() {
|
this.$refs.form.validate(async (res) => {
|
if (res) {
|
this.loading = true
|
const { code } = await this.$store.dispatch('auth/login', this.form)
|
if (code === 0) {
|
this.onLoginSuccess()
|
} else {
|
this.loading = false
|
this.getCapacha()
|
}
|
}
|
})
|
},
|
smsLogin() {
|
this.$refs.smsForm.validate(async (res) => {
|
if (res) {
|
this.loading = true
|
const { code } = await this.$store.dispatch(
|
'auth/smsLogin',
|
this.smsForm
|
)
|
if (code === 0) {
|
this.onLoginSuccess()
|
} else {
|
this.loading = false
|
this.getSmsCapacha()
|
}
|
}
|
})
|
},
|
onLoginSuccess() {
|
const redirectUri = this.$elBusUtil.getQueryString('redirect_uri')
|
if (redirectUri) {
|
this.$router.replace(redirectUri).catch(() => {})
|
} else {
|
this.$router.replace('/').catch(() => {})
|
}
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.login-page {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
background: url('~static/images/login_bg.jpg') no-repeat center/cover;
|
display: flex;
|
align-items: center;
|
.form-content {
|
background-color: #fff;
|
width: 484px;
|
padding: 60px 48px;
|
margin-left: 20%;
|
.input-wrapper {
|
display: flex;
|
align-items: center;
|
border-bottom: 1px solid #cecece;
|
&:hover {
|
border-color: $primary-color;
|
}
|
}
|
::v-deep {
|
.el-input {
|
flex: 1;
|
&__inner {
|
border: none;
|
border-radius: 0;
|
height: 50px;
|
line-height: 50px;
|
}
|
}
|
.el-form-item.is-error {
|
.input-wrapper {
|
border-color: $danger-color;
|
}
|
}
|
}
|
}
|
.login-tab {
|
position: relative;
|
&.is-active {
|
color: $primary-color;
|
font-weight: bold;
|
&::after {
|
content: '';
|
display: block;
|
width: 46px;
|
height: 5px;
|
border-radius: 3px;
|
background-color: $primary-color;
|
position: absolute;
|
left: 50%;
|
bottom: -6px;
|
transform: translateX(-50%);
|
}
|
}
|
}
|
}
|
</style>
|
