449 lines
16 KiB
Vue
449 lines
16 KiB
Vue
|
<template>
|
|||
|
|
<div class="login flex col-center">
|
|||
|
|
<div class="login-container flex col-stretch">
|
|||
|
|
<div class="login-banner">
|
|||
|
|
<!-- <el-image-->
|
|||
|
|
<!-- fit="cover"-->
|
|||
|
|
<!-- style="width: 100%; height: 100%"-->
|
|||
|
|
<!-- :src="config.pc_login_logo"-->
|
|||
|
|
<!-- ></el-image>-->
|
|||
|
|
<img :src="config.pc_login_logo" height="100%" />
|
|||
|
|
</div>
|
|||
|
|
<div class="login-float-form-wrap">
|
|||
|
|
<div class="login-box">
|
|||
|
|
<div class="login-header-box">
|
|||
|
|
<div class="header-tabs flex row-center">
|
|||
|
|
<div
|
|||
|
|
class="header-tab xxl"
|
|||
|
|
:class="{ 'active-tab': loginStatus == 0 }"
|
|||
|
|
@click="changeLoginType(0)"
|
|||
|
|
>验证码登录</div>
|
|||
|
|
<div
|
|||
|
|
class="header-tab xxl"
|
|||
|
|
:class="{ 'active-tab': loginStatus == 1 }"
|
|||
|
|
@click="changeLoginType(1)"
|
|||
|
|
>账号密码登录</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-show="loginStatus == 0" @keyup.enter="smsLogin">
|
|||
|
|
<div class="login-form-box">
|
|||
|
|
<div class="login-form-item">
|
|||
|
|
<el-input
|
|||
|
|
placeholder="请输入手机号码"
|
|||
|
|
v-model="telephone"
|
|||
|
|
class="input-phone-num"
|
|||
|
|
>
|
|||
|
|
<el-select
|
|||
|
|
style="width: 100px"
|
|||
|
|
v-model="selectNumberType"
|
|||
|
|
slot="prepend"
|
|||
|
|
placeholder="请选择"
|
|||
|
|
>
|
|||
|
|
<el-option label="中国+86" value="1"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
<div class="login-form-item flex">
|
|||
|
|
<el-input
|
|||
|
|
v-model="smsCode"
|
|||
|
|
placeholder="短信验证码"
|
|||
|
|
style="width: 210px"
|
|||
|
|
/>
|
|||
|
|
<el-button class="sms-btn" @click="sendSMSCode">
|
|||
|
|
<div v-if="canSend">获取验证码</div>
|
|||
|
|
<count-down
|
|||
|
|
v-else
|
|||
|
|
:time="60"
|
|||
|
|
format="ss秒"
|
|||
|
|
:autoStart="true"
|
|||
|
|
@finish="canSend = true"
|
|||
|
|
/>
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="option-box flex-col">
|
|||
|
|
<el-checkbox v-model="isRemember" class="muted">记住账号</el-checkbox>
|
|||
|
|
<div class="m-t-20 flex-col">
|
|||
|
|
<el-button type="primary" @click="smsLogin">立即登录</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-show="loginStatus == 1" @keyup.enter="accountLogin">
|
|||
|
|
<div class="login-form-box">
|
|||
|
|
<div class="login-form-item">
|
|||
|
|
<el-input
|
|||
|
|
placeholder="请输入账号/手机号码"
|
|||
|
|
v-model="account"
|
|||
|
|
class="input-phone-num"
|
|||
|
|
>
|
|||
|
|
<i
|
|||
|
|
class="el-icon-user"
|
|||
|
|
style="font-size: 18px"
|
|||
|
|
slot="prepend"
|
|||
|
|
></i>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
<div class="login-form-item flex">
|
|||
|
|
<el-input v-model="password" placeholder="请输入密码" show-password>
|
|||
|
|
<i
|
|||
|
|
class="el-icon-more-outline"
|
|||
|
|
style="font-size: 18px"
|
|||
|
|
slot="prepend"
|
|||
|
|
/>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="option-box flex-col">
|
|||
|
|
<div class="flex row-between">
|
|||
|
|
<el-checkbox v-model="isRemember" class="muted">记住账号</el-checkbox>
|
|||
|
|
<nuxt-link class="muted" to="/account/forget_pwd">忘记密码？</nuxt-link>
|
|||
|
|
</div>
|
|||
|
|
<div class="m-t-20 flex-col">
|
|||
|
|
<el-button type="primary" @click="accountLogin">立即登录</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="login-footer-box flex row-between">
|
|||
|
|
<!-- <div class="flex">
|
|||
|
|
<div class="flex login__other-item" @click="goWechatLogin">
|
|||
|
|
<i class="iconfont icon-weixin1 login__weixin-icon"></i>
|
|||
|
|
<div class="m-l-4 muted">微信</div>
|
|||
|
|
</div>
|
|||
|
|
</div> -->
|
|||
|
|
<div></div>
|
|||
|
|
<nuxt-link class="primary" to="/account/register">注册账号</nuxt-link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { loginType, client, SMSType } from '@/utils/type'
|
|||
|
|
import Cookies from 'js-cookie'
|
|||
|
|
import { mapMutations, mapActions, mapState } from 'vuex'
|
|||
|
|
import CountDown from '@/components/count-down'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
head() {
|
|||
|
|
return {
|
|||
|
|
title: this.$store.getters.headTitle,
|
|||
|
|
link: [
|
|||
|
|
{
|
|||
|
|
rel: 'icon',
|
|||
|
|
type: 'image/x-icon',
|
|||
|
|
href: this.$store.getters.favicon,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
layout: 'main',
|
|||
|
|
|
|||
|
|
components: {
|
|||
|
|
CountDown,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 选择电话类型
|
|||
|
|
selectNumberType: '中国+86',
|
|||
|
|
// 账号
|
|||
|
|
account: '',
|
|||
|
|
// 密码
|
|||
|
|
password: '',
|
|||
|
|
// 电话号码
|
|||
|
|
telephone: '',
|
|||
|
|
// 图形验证码
|
|||
|
|
verifyCode: '',
|
|||
|
|
// 短信验证码
|
|||
|
|
smsCode: '',
|
|||
|
|
isRemember: true,
|
|||
|
|
// 短信登陆或账号登陆 0 ==》 短信 1 ==》账号
|
|||
|
|
loginStatus: loginType.SMS,
|
|||
|
|
canSend: true,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState(['config']),
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
...mapMutations(['setToken']),
|
|||
|
|
...mapActions(['getPublicData']),
|
|||
|
|
|
|||
|
|
changeLoginType(type) {
|
|||
|
|
this.loginStatus = type
|
|||
|
|
this.telephone = ''
|
|||
|
|
this.verifyCode = ''
|
|||
|
|
this.smsCode = ''
|
|||
|
|
let jsonPaser = JSON.parse(localStorage.getItem('ACCOUNT'))
|
|||
|
|
let telJson = JSON.parse(localStorage.getItem('TEL'))
|
|||
|
|
if (jsonPaser && jsonPaser.account) {
|
|||
|
|
this.account = jsonPaser.account
|
|||
|
|
}
|
|||
|
|
if (telJson && telJson.telephone) {
|
|||
|
|
this.telephone = telJson.telephone
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 前往微信登录
|
|||
|
|
goWechatLogin() {
|
|||
|
|
this.$get('account/scanCode')
|
|||
|
|
.then(({ code, msg, data }) => {
|
|||
|
|
if (code !== 1) throw new Error(msg)
|
|||
|
|
window.open(data.url, '_self')
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
this.$message.error(err.message)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 微信授权登录处理
|
|||
|
|
handleWechatLogin(params) {
|
|||
|
|
this.$post('account/scanLogin', params)
|
|||
|
|
.then(({ code, msg, data }) => {
|
|||
|
|
if (code !== 1) throw new Error(msg)
|
|||
|
|
|
|||
|
|
Cookies.set('token', data.token, { expires: 60 })
|
|||
|
|
this.setToken(data.token)
|
|||
|
|
this.$router.replace({
|
|||
|
|
path: Cookies.get('back_url') || '/',
|
|||
|
|
})
|
|||
|
|
Cookies.remove('back_url')
|
|||
|
|
this.getPublicData()
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
this.$message.error(err.message)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async sendSMSCode() {
|
|||
|
|
if (!this.canSend) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
let res = await this.$post('sms/send', {
|
|||
|
|
mobile: this.telephone,
|
|||
|
|
key: SMSType.LOGIN,
|
|||
|
|
client,
|
|||
|
|
})
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
this.$message({
|
|||
|
|
message: res.msg,
|
|||
|
|
type: 'success',
|
|||
|
|
})
|
|||
|
|
this.canSend = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async smsLogin() {
|
|||
|
|
let res = await this.$post('account/smsLogin', {
|
|||
|
|
mobile: this.telephone,
|
|||
|
|
code: this.smsCode,
|
|||
|
|
client,
|
|||
|
|
})
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
const token = res.data.token
|
|||
|
|
Cookies.set('token', token, { expires: 60 })
|
|||
|
|
this.setToken(token)
|
|||
|
|
this.$router.replace({
|
|||
|
|
path: Cookies.get('back_url') || '/',
|
|||
|
|
})
|
|||
|
|
Cookies.remove('back_url')
|
|||
|
|
this.getPublicData()
|
|||
|
|
if (this.isRemember) {
|
|||
|
|
localStorage.setItem(
|
|||
|
|
'TEL',
|
|||
|
|
JSON.stringify({
|
|||
|
|
telephone: this.telephone,
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
} else {
|
|||
|
|
localStorage.setItem(
|
|||
|
|
'TEL',
|
|||
|
|
JSON.stringify({
|
|||
|
|
telephone: '',
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async accountLogin() {
|
|||
|
|
let res = await this.$post('account/login', {
|
|||
|
|
mobile: this.account,
|
|||
|
|
password: this.password,
|
|||
|
|
client,
|
|||
|
|
})
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
const token = res.data.token
|
|||
|
|
Cookies.set('token', token, { expires: 60 })
|
|||
|
|
this.setToken(token)
|
|||
|
|
this.$router.replace({
|
|||
|
|
path: Cookies.get('back_url') || '/',
|
|||
|
|
})
|
|||
|
|
Cookies.remove('back_url')
|
|||
|
|
this.getPublicData()
|
|||
|
|
if (this.isRemember) {
|
|||
|
|
localStorage.setItem(
|
|||
|
|
'ACCOUNT',
|
|||
|
|
JSON.stringify({
|
|||
|
|
account: this.account,
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
} else {
|
|||
|
|
localStorage.setItem(
|
|||
|
|
'ACCOUNT',
|
|||
|
|
JSON.stringify({
|
|||
|
|
account: '',
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
created() {
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 获取URL Query参数
|
|||
|
|
const query = this.$route.query
|
|||
|
|
|
|||
|
|
// 如果存在code和state值，即为微信扫码授权后重定向至此
|
|||
|
|
query.code &&
|
|||
|
|
query.state &&
|
|||
|
|
this.handleWechatLogin({ code: query.code, state: query.state })
|
|||
|
|
|
|||
|
|
// 获取缓存数据
|
|||
|
|
const jsonPaser = JSON.parse(localStorage.getItem('ACCOUNT')) ?? {}
|
|||
|
|
const telJson = JSON.parse(localStorage.getItem('TEL')) ?? {}
|
|||
|
|
// 利用缓存数据初始化表单值
|
|||
|
|
this.account = jsonPaser?.account ?? ''
|
|||
|
|
this.telephone = telJson?.telephone ?? ''
|
|||
|
|
} catch (error) {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.login {
|
|||
|
|
flex: 1;
|
|||
|
|
background-size: cover;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-position: 50%;
|
|||
|
|
min-width: 1180px;
|
|||
|
|
.login-container {
|
|||
|
|
margin: 0 auto;
|
|||
|
|
width: 1180px;
|
|||
|
|
height: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
.login-banner {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 750px;
|
|||
|
|
margin-right: 30px;
|
|||
|
|
height: 440px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
animation: loadimg 2s infinite;
|
|||
|
|
transition: background-color 2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes loadimg {
|
|||
|
|
0% {
|
|||
|
|
background-color: #e4e4e4;
|
|||
|
|
}
|
|||
|
|
50% {
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
background-color: #e4e4e4;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-float-form-wrap {
|
|||
|
|
width: 400px;
|
|||
|
|
height: 440px;
|
|||
|
|
.login-box {
|
|||
|
|
background-color: white;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.login-header-box {
|
|||
|
|
padding-top: 20px;
|
|||
|
|
.header-tabs {
|
|||
|
|
.header-tab {
|
|||
|
|
width: 160px;
|
|||
|
|
height: 35px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.active-tab {
|
|||
|
|
color: $--color-primary;
|
|||
|
|
text-align: center;
|
|||
|
|
&::after {
|
|||
|
|
content: "";
|
|||
|
|
height: 2px;
|
|||
|
|
width: 72px;
|
|||
|
|
margin-top: 8px;
|
|||
|
|
background-color: $--color-primary;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.login-form-box {
|
|||
|
|
padding: 0 30px;
|
|||
|
|
.login-form-item {
|
|||
|
|
margin-top: 24px;
|
|||
|
|
.input-phone-num {
|
|||
|
|
width: 340px;
|
|||
|
|
}
|
|||
|
|
.verify-code-img {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 40px;
|
|||
|
|
margin-left: 20px;
|
|||
|
|
background-color: red;
|
|||
|
|
}
|
|||
|
|
.sms-btn {
|
|||
|
|
margin-left: 20px;
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.option-box {
|
|||
|
|
padding: 0 30px;
|
|||
|
|
margin-top: 60px;
|
|||
|
|
::v-deep .el-checkbox {
|
|||
|
|
color: #888;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.login-footer-box {
|
|||
|
|
height: 50px;
|
|||
|
|
padding: 15px;
|
|||
|
|
|
|||
|
|
.login__other-item {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login__weixin-icon {
|
|||
|
|
width: 1.5em;
|
|||
|
|
height: 1.5em;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 1.5em;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #0abd5d;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|