<template>
|
<div class="aui-content">
|
<div class="aui-container">
|
<div class="aui-form">
|
<div class="aui-image">
|
<div class="aui-image-text">
|
<img :src="adTextImg" alt="" />
|
</div>
|
</div>
|
<div class="aui-formBox aui-formEwm">
|
<div class="aui-formWell">
|
<form>
|
<div class="aui-flex aui-form-nav investment_title" style="padding-bottom: 19px">
|
<div class="aui-flex-box activeNav">{{t('sys.login.qrSignInFormTitle')}}</div>
|
</div>
|
<div class="aui-form-box">
|
<div class="aui-account" style="padding: 30px 0">
|
<div class="aui-ewm">
|
<QrCode :value="qrCodeUrl" class="enter-x flex justify-center xl:justify-start" :width="280" />
|
</div>
|
</div>
|
</div>
|
<div class="aui-formButton">
|
<a class="aui-linek-code aui-link-register" @click="goBackHandleClick">{{t('sys.login.backSignIn')}}</a>
|
</div>
|
</form>
|
</div>
|
<div class="aui-flex aui-third-text">
|
<div class="aui-flex-box aui-third-border">
|
<span>{{ t('sys.login.otherSignIn') }}</span>
|
</div>
|
</div>
|
<div class="aui-flex" :class="`${prefixCls}-sign-in-way`">
|
<div class="aui-flex-box">
|
<div class="aui-third-login">
|
<a href="" title="github" @click="onThirdLogin('github')"><GithubFilled /></a>
|
</div>
|
</div>
|
<div class="aui-flex-box">
|
<div class="aui-third-login">
|
<a href="" title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>
|
</div>
|
</div>
|
<div class="aui-flex-box">
|
<div class="aui-third-login">
|
<a href="" title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a>
|
</div>
|
</div>
|
<div class="aui-flex-box">
|
<div class="aui-third-login">
|
<a href="" title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 第三方登录相关弹框 -->
|
<ThirdModal ref="thirdModalRef"></ThirdModal>
|
</template>
|
|
<script lang="ts" setup name="mini-code-login">
|
import { ref, onUnmounted } from 'vue';
|
import { getLoginQrcode, getQrcodeToken } from '/@/api/sys/user';
|
import { useUserStore } from '/@/store/modules/user';
|
import { QrCode } from '/@/components/Qrcode/index';
|
import ThirdModal from '/@/views/sys/login/ThirdModal.vue';
|
import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
|
import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
|
import { useI18n } from '/@/hooks/web/useI18n';
|
import { useDesign } from "/@/hooks/web/useDesign";
|
import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';
|
|
const IconFont = createFromIconfontCN({
|
scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
|
});
|
const { prefixCls } = useDesign('minilogin');
|
const { t } = useI18n();
|
const qrCodeUrl = ref<string>('');
|
let timer: IntervalHandle;
|
const state = ref('0');
|
const thirdModalRef = ref();
|
const userStore = useUserStore();
|
const emit = defineEmits(['go-back', 'success', 'register']);
|
|
//加载二维码信息
|
function loadQrCode() {
|
state.value = '0';
|
getLoginQrcode().then((res) => {
|
qrCodeUrl.value = res.qrcodeId;
|
if (res.qrcodeId) {
|
openTimer(res.qrcodeId);
|
}
|
});
|
}
|
//监控扫码状态
|
function watchQrcodeToken(qrcodeId) {
|
getQrcodeToken({ qrcodeId: qrcodeId }).then((res) => {
|
let token = res.token;
|
if (token == '-2') {
|
//二维码过期重新获取
|
loadQrCode();
|
clearInterval(timer);
|
}
|
//扫码成功
|
if (res.success) {
|
state.value = '2';
|
clearInterval(timer);
|
setTimeout(() => {
|
userStore.qrCodeLogin(token);
|
}, 500);
|
}
|
});
|
}
|
|
/** 开启定时器 */
|
function openTimer(qrcodeId) {
|
watchQrcodeToken(qrcodeId);
|
closeTimer();
|
timer = setInterval(() => {
|
watchQrcodeToken(qrcodeId);
|
}, 1500);
|
}
|
|
/** 关闭定时器 */
|
function closeTimer() {
|
if (timer) clearInterval(timer);
|
}
|
|
/**
|
* 第三方登录
|
* @param type
|
*/
|
function onThirdLogin(type) {
|
thirdModalRef.value.onThirdLogin(type);
|
}
|
|
/**
|
* 初始化表单
|
*/
|
function initFrom() {
|
loadQrCode();
|
}
|
|
/**
|
* 返回
|
*/
|
function goBackHandleClick() {
|
emit('go-back');
|
closeTimer();
|
}
|
|
onUnmounted(() => {
|
closeTimer();
|
});
|
|
defineExpose({
|
initFrom,
|
});
|
</script>
|
<style lang="less" scoped>
|
@import '/@/assets/loginmini/style/home.less';
|
@import '/@/assets/loginmini/style/base.less';
|
</style>
|
