Dear Ma
4 years ago
3 changed files with 529 additions and 4 deletions
@ -0,0 +1,521 @@ |
|||||
|
<template> |
||||
|
<div class="login-container" style=" border-top: 0 solid #205bb5;"> |
||||
|
<el-row class="login-body"> |
||||
|
<el-col :span="5" :offset="4"> |
||||
|
<img class="login-img" src="@/assets/images/5b968a75b5e42.png"> |
||||
|
</el-col> |
||||
|
<el-col :offset="3" :span="12"> |
||||
|
<el-tabs v-if="formType=='login'" v-model="loginType" class="login-form-tab" style="width: 320px;" |
||||
|
@tab-click="loginTypeHandleClick" |
||||
|
> |
||||
|
<el-tab-pane label="微信扫码登录2" name="wx"> |
||||
|
<div class="wx-login"> |
||||
|
<div style="text-align: center;"> |
||||
|
<el-image |
||||
|
v-loading="wxQrCodeLoading" |
||||
|
class="wx-login-qrcode" |
||||
|
:src="wxLoginQrCode" |
||||
|
fit="fill" |
||||
|
@load="(e)=>{ |
||||
|
this.wxQrCodeLoading=false |
||||
|
}" |
||||
|
/> |
||||
|
</div> |
||||
|
<div style="text-align: center;"> |
||||
|
<el-link icon="el-icon-refresh-left" |
||||
|
:underline="false" |
||||
|
@click="getLoginWxQrCode" |
||||
|
> |
||||
|
刷新二维码 |
||||
|
</el-link> |
||||
|
</div> |
||||
|
<el-divider style="width: 100px;" /> |
||||
|
<el-row> |
||||
|
<el-col :span="6"> |
||||
|
<el-link class="login-tip" @click="toForgetPwdHandle">忘记密码</el-link> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<el-link class="login-tip"> |
||||
|
<el-link class="login-tip" @click="()=>{this.formType='reg'}">立即注册</el-link> |
||||
|
</el-link> |
||||
|
</el-col> |
||||
|
<el-col :span="9" :offset="3"> |
||||
|
<div class="other-login"> |
||||
|
<span @click="redirectUrl(qqLoginAuthorizeUrl)"> |
||||
|
<svg-icon name="loginQQ" class="other-login-icon" /> |
||||
|
</span> |
||||
|
<!-- <svg-icon name="loginWx" class="other-login-icon" />--> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-divider style="width: 100px;" /> |
||||
|
<p class="login-tip">关于TDuckApp登录</p> |
||||
|
<p class="login-tip"> |
||||
|
若微信扫码失败，请打开 微信授权页面 登录 |
||||
|
若QQ登录填鸭云异常，可查阅 帮助文档 |
||||
|
若因微信、QQ、公众号冻结或账号密码找回失败等无法登录，可 自助申请 登录账号 |
||||
|
</p> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="账号密码登录" name="account"> |
||||
|
<el-form ref="accountLoginForm" label-position="top" size="small" :model="accountForm" |
||||
|
:rules="accountLoginRules" |
||||
|
status-icon |
||||
|
hide-required-asterisk |
||||
|
class="account-login-form" |
||||
|
@keyup.enter="loginHandle" |
||||
|
> |
||||
|
<el-form-item label="手机号/邮箱登录" prop="account"> |
||||
|
<el-input v-model="accountForm.account" placeholder="请输入手机号/邮箱" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="密码" prop="password"> |
||||
|
<el-input v-model="accountForm.password" placeholder="请输入密码" autocomplete="off" |
||||
|
show-password |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label=""> |
||||
|
<el-row type="flex" align="middle"> |
||||
|
<el-col :span="3"> |
||||
|
<el-radio v-model="agreeProtocol" label="" /> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<span class="protocol-tip">我已同意</span> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<el-link :underline="false" type="primary" class="protocol-tip"> |
||||
|
《TDuck用户服务协议》 |
||||
|
</el-link> |
||||
|
</el-col> |
||||
|
<el-col :span="6" :offset="1"> |
||||
|
<el-link :underline="false" type="primary" class="protocol-tip" |
||||
|
@click="toForgetPwdHandle" |
||||
|
> |
||||
|
忘记密码？ |
||||
|
</el-link> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button style="width: 100%;" type="primary" @click="loginHandle">登录</el-button> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-row type="flex" align="middle"> |
||||
|
<el-col :span="8" :offset="6"> |
||||
|
<span class="protocol-tip">使用第三方登录 或 </span> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<el-link :underline="false" type="primary" class="protocol-tip" |
||||
|
@click="()=>{this.formType='reg'}" |
||||
|
> |
||||
|
立即注册 |
||||
|
</el-link> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :offset="8"> |
||||
|
<div class="other-login"> |
||||
|
<span @click="redirectUrl(qqLoginAuthorizeUrl)"> |
||||
|
<svg-icon name="loginQQ" class="other-login-icon" /> |
||||
|
</span> |
||||
|
<svg-icon name="loginWx" |
||||
|
class="other-login-icon" |
||||
|
@click="()=>{ |
||||
|
this.formType='login', |
||||
|
this.loginType='wx' |
||||
|
}" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
<el-tabs |
||||
|
v-if="formType==='reg'" v-model="regType" class="login-form" style="width: 300px;" |
||||
|
@tab-click="registerHandleClick" |
||||
|
> |
||||
|
<el-tab-pane label="手机号注册" name="regPhone"> |
||||
|
<el-form ref="phoneRegForm" :model="accountForm" :rules="phoneRegRules" label-width="0px"> |
||||
|
<el-form-item label="" prop="phoneNumber"> |
||||
|
<el-input v-model="accountForm.phoneNumber" placeholder="请输入手机号" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="" prop="password"> |
||||
|
<el-input v-model="accountForm.password" show-password placeholder="请输入密码" |
||||
|
autocomplete="off" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="" prop="code"> |
||||
|
<el-input v-model="accountForm.code" style="width: 150px;" placeholder="请输入验证码" |
||||
|
autocomplete="off" |
||||
|
/> |
||||
|
<el-button style="margin-left: 20px;" :disabled="phoneValidateCodeBtn" type="primary" |
||||
|
@click="sendPhoneCodeHandle" |
||||
|
> |
||||
|
{{ phoneValidateCodeBtnText }} |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" style="width: 100%;" @click="phoneRegHandle">确定</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="邮箱注册" name="regEmail"> |
||||
|
<el-form ref="emailRegForm" status-icon :rules="emailRegRules" :model="accountForm" |
||||
|
label-width="0px" |
||||
|
> |
||||
|
<el-form-item label="" prop="email"> |
||||
|
<el-input v-model="accountForm.email" placeholder="请输入邮箱" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="" prop="password"> |
||||
|
<el-input v-model="accountForm.password" show-password placeholder="请输入密码" |
||||
|
autocomplete="off" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="" prop="code"> |
||||
|
<el-input v-model="accountForm.code" oninput="value=value.replace(/[^\d]/g,'')" |
||||
|
style="width: 150px;" maxlength="4" placeholder="请输入验证码" |
||||
|
autocomplete="off" |
||||
|
/> |
||||
|
<el-button style="margin-left: 20px;" :disabled="emailValidateCodeBtn" type="primary" |
||||
|
@click="sendEmailCodeHandle" |
||||
|
> |
||||
|
{{ emailValidateCodeBtnText }} |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" style="width: 100%;" @click="emailRegHandle">确定</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-tab-pane> |
||||
|
<div style="display: flex; flex-direction: row;"> |
||||
|
<el-link style="margin-left: 20px;" @click="toForgetPwdHandle">忘记密码</el-link> |
||||
|
<el-link style="margin-left: 20px;" @click="registerHandleClick">立即注册</el-link> |
||||
|
<div class="other-login"> |
||||
|
<span @click="redirectUrl(qqLoginAuthorizeUrl)"> |
||||
|
<svg-icon name="loginQQ" class="other-login-icon" /> |
||||
|
</span> |
||||
|
<svg-icon name="loginWx" |
||||
|
class="other-login-icon" |
||||
|
@click="()=>{ |
||||
|
this.formType='login', |
||||
|
this.loginType='wx' |
||||
|
}" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-tabs> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<Verify |
||||
|
ref="verify" |
||||
|
:mode="'pop'" |
||||
|
:captcha-type="'blockPuzzle'" |
||||
|
:img-size="{ width: '330px', height: '155px' }" |
||||
|
@success="verifySuccessHandle" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
|
||||
|
import {getCurrentDomain} from '@/utils' |
||||
|
// 引入组件 |
||||
|
import Verify from '@/components/verifition/Verify' |
||||
|
import constants from '@/utils/constants' |
||||
|
|
||||
|
export default { |
||||
|
name: 'Login', |
||||
|
components: { |
||||
|
Verify |
||||
|
}, |
||||
|
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: 'wx', |
||||
|
emailValidateCodeBtn: false, |
||||
|
emailValidateCodeBtnText: '发送验证码', |
||||
|
phoneValidateCodeBtn: false, |
||||
|
phoneValidateCodeBtnText: '发送验证码', |
||||
|
formType: 'login', |
||||
|
regType: 'regPhone', |
||||
|
agreeProtocol: '', |
||||
|
phoneRegRules: { |
||||
|
phoneNumber: [ |
||||
|
{required: true, trigger: 'blur', message: '请输入手机号'}, |
||||
|
{ |
||||
|
pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/, |
||||
|
message: '请输入正确的手机号' |
||||
|
} |
||||
|
], |
||||
|
password: [ |
||||
|
{required: true, trigger: 'blur', message: '请输入新密码'}, |
||||
|
{ |
||||
|
pattern: constants.passwordReg, |
||||
|
message: constants.passwordRegDesc |
||||
|
} |
||||
|
], |
||||
|
code: {required: true, trigger: 'blur', message: '请输入验证码'} |
||||
|
}, |
||||
|
emailRegRules: { |
||||
|
email: [ |
||||
|
{required: true, trigger: 'blur', message: '请输入邮箱'}, |
||||
|
{ |
||||
|
pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, |
||||
|
message: '请输入正确的邮箱' |
||||
|
} |
||||
|
], |
||||
|
password: [ |
||||
|
{required: true, trigger: 'blur', message: '请输入新密码'}, |
||||
|
{ |
||||
|
pattern: constants.passwordReg, |
||||
|
message: constants.passwordRegDesc |
||||
|
} |
||||
|
], |
||||
|
code: {required: true, trigger: 'blur', message: '请输入验证码'} |
||||
|
}, |
||||
|
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: '' |
||||
|
} |
||||
|
}, |
||||
|
watch: {}, |
||||
|
created() { |
||||
|
this.getLoginWxQrCode() |
||||
|
this.refreshWxQrcodeTimer = setInterval(() => { |
||||
|
this.getLoginWxQrCode() |
||||
|
}, 5 * 60 * 1000) |
||||
|
this.wxQrcodeResultTimer = setInterval(() => { |
||||
|
this.getLoginWxQrCodeResult() |
||||
|
}, 5 * 1000) |
||||
|
this.getQQLoginAuthorizeUrl() |
||||
|
}, |
||||
|
destroyed() { |
||||
|
clearInterval(this.refreshWxQrcodeTimer) |
||||
|
clearInterval(this.wxQrcodeResultTimer) |
||||
|
}, |
||||
|
methods: { |
||||
|
loginTypeHandleClick() { |
||||
|
}, |
||||
|
registerHandleClick() { |
||||
|
}, |
||||
|
verifySuccessHandle(params) { |
||||
|
let slideCode = params.captchaVerification |
||||
|
this.$api.request({ |
||||
|
url: '/login/account', |
||||
|
method: 'post', |
||||
|
params: {slideCode}, |
||||
|
data: this.accountForm |
||||
|
}).then(res => { |
||||
|
this.loginSuccessHandle(res.data) |
||||
|
}) |
||||
|
}, |
||||
|
// 获取微信登录二维码 |
||||
|
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) { |
||||
|
console.log(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) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
sendEmailCodeHandle() { |
||||
|
this.$refs['emailRegForm'].validateField('email', err => { |
||||
|
if (!err) { |
||||
|
this.emailValidateCodeBtn = true |
||||
|
this.$api.get(`/register/email/code?email=${this.accountForm.email}`).then(() => { |
||||
|
this.msgSuccess('验证码发送成功，5分钟内有效') |
||||
|
this.emailValidateCodeBtn = true |
||||
|
let count = 60 |
||||
|
let timer = setInterval(() => { |
||||
|
count-- |
||||
|
this.emailValidateCodeBtnText = count + 's后重新发送' |
||||
|
if (count == 0) { |
||||
|
this.emailValidateCodeBtnText = '发送验证码' |
||||
|
this.emailValidateCodeBtn = false |
||||
|
clearInterval(timer) |
||||
|
} |
||||
|
}, 1000) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
sendPhoneCodeHandle() { |
||||
|
this.$refs['phoneRegForm'].validateField('phoneNumber', err => { |
||||
|
if (!err) { |
||||
|
this.phoneValidateCodeBtn = true |
||||
|
this.$api.get(`/register/phone/code?phoneNumber=${this.accountForm.phoneNumber}`).then(() => { |
||||
|
this.msgSuccess('验证码发送成功，5分钟内有效') |
||||
|
this.phoneValidateCodeBtn = true |
||||
|
let count = 60 |
||||
|
let timer = setInterval(() => { |
||||
|
count-- |
||||
|
this.phoneValidateCodeBtnText = count + 's后重新发送' |
||||
|
if (count == 0) { |
||||
|
this.phoneValidateCodeBtnText = '发送验证码' |
||||
|
this.phoneValidateCodeBtn = false |
||||
|
clearInterval(timer) |
||||
|
} |
||||
|
}, 1000) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
phoneRegHandle() { |
||||
|
this.$refs['phoneRegForm'].validate(valid => { |
||||
|
if (valid) { |
||||
|
this.$api.post('/register/phone', this.accountForm).then(() => { |
||||
|
this.registerSuccessHandle() |
||||
|
}) |
||||
|
} else { |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
emailRegHandle() { |
||||
|
this.$refs['emailRegForm'].validate(valid => { |
||||
|
if (valid) { |
||||
|
this.$api.post('/register/email', this.accountForm).then(() => { |
||||
|
this.registerSuccessHandle() |
||||
|
}) |
||||
|
} else { |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
registerSuccessHandle() { |
||||
|
this.msgSuccess('注册成功，快去登录吧') |
||||
|
setTimeout(() => { |
||||
|
this.formType = 'login' |
||||
|
this.loginType = 'account' |
||||
|
}, 1000) |
||||
|
}, |
||||
|
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.$refs['accountLoginForm'].validate(valid => { |
||||
|
if (valid) { |
||||
|
this.$refs.verify.show() |
||||
|
} else { |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
.login-body { |
||||
|
font-familyly: "Helvetica Neue", helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", arial, sans-serif; |
||||
|
margin: 90px 0 0 0; |
||||
|
} |
||||
|
.login-img { |
||||
|
position: relative; |
||||
|
left: 100px; |
||||
|
width: 559px; |
||||
|
height: 447px; |
||||
|
} |
||||
|
.login-form-tab { |
||||
|
margin-left: 100px; |
||||
|
height: 500px; |
||||
|
width: 520px; |
||||
|
} |
||||
|
.wx-login-qrcode { |
||||
|
width: 194px; |
||||
|
height: 194px; |
||||
|
} |
||||
|
.other-login .other-login-icon { |
||||
|
margin-left: 10px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.login-tip { |
||||
|
color: rgba(16, 16, 16, 1); |
||||
|
font-size: 13px; |
||||
|
font-weight: 400; |
||||
|
text-align: left; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
.account-login-form .el-form-item--small.el-form-item { |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
.account-login-form .el-radio { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
.wx-login .el-divider--horizontal { |
||||
|
margin: 10px 0; |
||||
|
} |
||||
|
.account-login-form .protocol-tip { |
||||
|
font-size: 12px; |
||||
|
line-height: 40px; |
||||
|
} |
||||
|
.el-form-item--small .el-form-item__content, |
||||
|
.el-form-item--small .el-form-item__label { |
||||
|
line-height: 40px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue