wangqing
4 years ago
4 changed files with 282 additions and 1 deletions
|
After Width: | Height: | Size: 894 KiB |
@ -0,0 +1,3 @@ |
|||||
|
export default [ |
||||
|
|
||||
|
] |
||||
@ -0,0 +1,278 @@ |
|||||
|
<template> |
||||
|
<div class="login-container"> |
||||
|
<div class="logo-banner"> |
||||
|
<img src="@/assets/images/logo_banner.png"> |
||||
|
</div> |
||||
|
<div class="logo-content"> |
||||
|
<span class="hello">Hello ，</span> |
||||
|
<span class="tips">欢迎使用Tduck！</span> |
||||
|
<el-tabs v-model="loginType" class="login-form-tab"> |
||||
|
<el-tab-pane v-if="enableWx" label="微信扫码登录" name="wx"> |
||||
|
<div class="wx-login"> |
||||
|
<div class="flex-center"> |
||||
|
<el-image |
||||
|
v-loading="wxQrCodeLoading" |
||||
|
:src="wxLoginQrCode" |
||||
|
class="wx-login-qrcode" |
||||
|
fit="fill" |
||||
|
@load="(e)=>{ |
||||
|
this.wxQrCodeLoading=false |
||||
|
}" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="text-center"> |
||||
|
<el-link :underline="false" |
||||
|
icon="el-icon-refresh-left" |
||||
|
@click="getLoginWxQrCode" |
||||
|
> |
||||
|
刷新二维码 |
||||
|
</el-link> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="账号密码登录" name="account"> |
||||
|
<el-form ref="accountLoginForm" :model="accountForm" :rules="accountLoginRules" |
||||
|
class="account-login-form" |
||||
|
hide-required-asterisk |
||||
|
label-position="top" |
||||
|
size="small" |
||||
|
status-icon |
||||
|
@keyup.enter.native="loginHandle" |
||||
|
> |
||||
|
<el-form-item prop="account"> |
||||
|
<el-input v-model="accountForm.account" autocomplete="off" placeholder="请输入手机号/邮箱" |
||||
|
prefix-icon="el-icon-user-solid" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input v-model="accountForm.password" autocomplete="off" placeholder="请输入密码" prefix-icon="el-icon-lock" |
||||
|
show-password |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="loginHandle">登录</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
<p class="desc"> |
||||
|
关于TDuckApp登录 |
||||
|
</p> |
||||
|
<p class="desc"> |
||||
|
若微信扫码失败，请打开 微信授权页面 登录 若QQ登录填鸭云异常， |
||||
|
可查阅 帮助文档 若因微信、QQ、公众号冻结或账号密码找回失败等 |
||||
|
无法登录，可 自助申请 登录账号 |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {getCurrentDomain} from '@/utils' |
||||
|
// 引入组件 |
||||
|
import constants from '@/utils/constants' |
||||
|
|
||||
|
export default { |
||||
|
name: 'Login', |
||||
|
data() { |
||||
|
const validateAccount = (rule, value, callback) => { |
||||
|
const reg1 = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/ |
||||
|
const reg2 = /^(?:0|86|\+86)?1[3456789]\d{9}$/ |
||||
|
if (reg1.test(value) || reg2.test(value)) { |
||||
|
callback() |
||||
|
} else { |
||||
|
callback(new Error('请输入正确的账号')) |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
loginType: 'account', |
||||
|
agreeProtocol: '', |
||||
|
accountLoginRules: { |
||||
|
account: [ |
||||
|
{required: true, trigger: 'blur', message: '请输入账号'}, {trigger: 'blur', validator: validateAccount}], |
||||
|
password: [ |
||||
|
{required: true, trigger: 'blur', message: '请输入新密码'}, |
||||
|
{ |
||||
|
pattern: constants.passwordReg, |
||||
|
message: constants.passwordRegDesc |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
accountForm: { |
||||
|
email: '', |
||||
|
phoneNumber: '', |
||||
|
password: '' |
||||
|
}, |
||||
|
wxQrCodeLoading: true, |
||||
|
wxLoginQrCode: '', |
||||
|
wxLoginId: '', |
||||
|
refreshWxQrcodeTimer: null, |
||||
|
wxQrcodeResultTimer: null, |
||||
|
qqLoginAuthorizeUrl: '' |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
enableWx() { |
||||
|
return constants.enableWx |
||||
|
} |
||||
|
}, |
||||
|
watch: {}, |
||||
|
created() { |
||||
|
if (constants.enableWx) { |
||||
|
this.getLoginWxQrCode() |
||||
|
this.refreshWxQrcodeTimer = setInterval(() => { |
||||
|
this.getLoginWxQrCode() |
||||
|
}, 5 * 60 * 1000) |
||||
|
this.wxQrcodeResultTimer = setInterval(() => { |
||||
|
this.getLoginWxQrCodeResult() |
||||
|
}, 5 * 1000) |
||||
|
this.getQQLoginAuthorizeUrl() |
||||
|
} else { |
||||
|
this.loginType = 'account' |
||||
|
} |
||||
|
}, |
||||
|
destroyed() { |
||||
|
clearInterval(this.refreshWxQrcodeTimer) |
||||
|
clearInterval(this.wxQrcodeResultTimer) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取微信登录二维码 |
||||
|
getLoginWxQrCode() { |
||||
|
this.wxQrCodeLoading = true |
||||
|
this.$api.get('/login/wx/qrcode').then(res => { |
||||
|
this.wxLoginQrCode = res.data.qrCodeUrl |
||||
|
this.wxLoginId = res.data.loginId |
||||
|
}) |
||||
|
}, |
||||
|
// 忘记密码 |
||||
|
toForgetPwdHandle() { |
||||
|
this.$router.push({path: '/forget/password'}) |
||||
|
}, |
||||
|
// qq登录授权地址 |
||||
|
getQQLoginAuthorizeUrl() { |
||||
|
let reUrl = getCurrentDomain() + '/redirect/qqlogin' |
||||
|
this.$api.get('/login/qq/authorize/url', {params: {redirectUri: reUrl}}).then(res => { |
||||
|
this.qqLoginAuthorizeUrl = res.data |
||||
|
}) |
||||
|
}, |
||||
|
redirectUrl(url) { |
||||
|
location.href = url |
||||
|
}, |
||||
|
getLoginWxQrCodeResult() { |
||||
|
this.$api.get('/login/wx/qrcode/result', {params: {loginId: this.wxLoginId}}).then(res => { |
||||
|
if (res.data) { |
||||
|
this.loginSuccessHandle(res.data) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
loginSuccessHandle(data) { |
||||
|
this.msgSuccess('登录成功') |
||||
|
this.$store.dispatch('user/login', data).then(() => { |
||||
|
// 重置状态 |
||||
|
this.$store.dispatch('global/loginExpired', false).then(() => { |
||||
|
}) |
||||
|
// 登录成功后路由跳回 |
||||
|
if (this.$route.query.redirect) { |
||||
|
this.$router.replace({ |
||||
|
path: this.$route.query.redirect |
||||
|
}) |
||||
|
} else { |
||||
|
if (window.history.length <= 1) { |
||||
|
this.$router.push({path: '/home'}) |
||||
|
} else { |
||||
|
this.$router.push({path: '/home'}) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
loginHandle() { |
||||
|
this.$api.request({ |
||||
|
url: '/login/account', |
||||
|
method: 'post', |
||||
|
data: this.accountForm |
||||
|
}).then(res => { |
||||
|
this.loginSuccessHandle(res.data) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.login-container { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.logo-banner { |
||||
|
width: 50%; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.logo-content { |
||||
|
width: 400px; |
||||
|
margin-left: 100px; |
||||
|
|
||||
|
.hello { |
||||
|
font-size: 40px; |
||||
|
font-weight: bold; |
||||
|
color: #10141C; |
||||
|
line-height: 134px; |
||||
|
} |
||||
|
|
||||
|
.wx-login-qrcode { |
||||
|
width: 192px; |
||||
|
height: 192px; |
||||
|
border-radius: 50px; |
||||
|
} |
||||
|
|
||||
|
.tips { |
||||
|
font-size: 21px; |
||||
|
font-weight: bold; |
||||
|
color: #10141C; |
||||
|
line-height: 134px; |
||||
|
} |
||||
|
|
||||
|
.desc { |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #C0C4CC; |
||||
|
line-height: 18px; |
||||
|
} |
||||
|
|
||||
|
.login-form-tab { |
||||
|
width: 300px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.logo-content ::v-deep.el-tabs__nav-wrap::after { |
||||
|
position: static !important; |
||||
|
} |
||||
|
|
||||
|
.logo-content ::v-deep.el-tabs__active-bar { |
||||
|
width: 59px !important; |
||||
|
height: 7px !important; |
||||
|
border-radius: 4px !important; |
||||
|
left: 5% !important; |
||||
|
background-color: #D8D8D8 !important; |
||||
|
} |
||||
|
|
||||
|
.logo-tabs ::v-deep.el-tabs__item.is-active { |
||||
|
color: #10141C !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-input { |
||||
|
height: 39px !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-input__inner { |
||||
|
height: 39px !important; |
||||
|
background: transparent; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue