You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
3.8 KiB
141 lines
3.8 KiB
<template> |
|
<el-row v-show="getShow" class="login-form" style="margin-right: -10px; margin-left: -10px"> |
|
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> |
|
<img class="topImg" src="@/assets/imgs/screen/login-top.png" alt="logo" /> |
|
</el-col> |
|
<el-col |
|
:span="24" |
|
style="padding-right: 10px; padding-left: 10px; margin-bottom: 20px; text-align: center" |
|
> |
|
<img width="320px" height="320px" :src="imageUrl" alt="Converted Image" v-if="imageUrl" /> |
|
</el-col> |
|
<el-col |
|
v-if="!refreshQR" |
|
:span="24" |
|
style="padding-right: 10px; padding-left: 10px; text-align: center" |
|
> |
|
<img class="bottomImg" src="@/assets/imgs/screen/login-bottom.png" alt="logo" /> |
|
</el-col> |
|
<el-col |
|
v-if="refreshQR" |
|
:span="24" |
|
style="padding-right: 10px; padding-left: 10px; text-align: center" |
|
> |
|
<img |
|
class="bottomImg" |
|
src="@/assets/imgs/screen/qrsx.png" |
|
alt="logo" |
|
@click="handleRefresh" |
|
/> |
|
</el-col> |
|
</el-row> |
|
</template> |
|
<script lang="ts" setup> |
|
import logoImg from '@/assets/imgs/logo.png' |
|
import * as LoginApi from '@/api/login' |
|
import * as authUtil from '@/utils/auth' |
|
import LoginFormTitle from './LoginFormTitle.vue' |
|
import { LoginStateEnum, useLoginState } from './useLogin' |
|
import router from '@/router' |
|
defineOptions({ name: 'QrCodeForm' }) |
|
|
|
const imageUrl = ref('') |
|
const uuuid = ref('') |
|
const refreshQR = ref(false) |
|
|
|
const { t } = useI18n() |
|
const { handleBackLogin, getLoginState } = useLoginState() |
|
const getShow = computed(() => true) |
|
// 存储定时器 ID，用于后续清除定时器 |
|
let intervalId = ref() |
|
|
|
const handleRefresh = () => { |
|
window.location.reload() |
|
} |
|
const getimg = async () => { |
|
const array = new Uint32Array(4) |
|
crypto.getRandomValues(array) |
|
let result = '' |
|
array.forEach((value) => { |
|
result += value.toString(16).padStart(8, '0') |
|
}) |
|
uuuid.value = result |
|
|
|
var mockBinaryData = await LoginApi.getCodeWebPic({ |
|
scene: uuuid.value, |
|
path: 'sub/common/waiting', |
|
checkPath: false |
|
}) |
|
// 对 Base64 编码的字符串进行解码 |
|
const binaryString = atob(mockBinaryData) |
|
const len = binaryString.length |
|
const bytes = new Uint8Array(len) |
|
for (let i = 0; i < len; i++) { |
|
bytes[i] = binaryString.charCodeAt(i) |
|
} |
|
|
|
// 将二进制数据转换为Blob对象 |
|
const blob = new Blob([bytes], { type: 'image/png' }) |
|
// 创建临时的URL |
|
imageUrl.value = URL.createObjectURL(blob) |
|
|
|
//开始刷新扫码信息 |
|
refaulst() |
|
} |
|
// 记录定时器开始的时间 |
|
const startTime = Date.now() |
|
// 10 分钟的毫秒数 |
|
const tenMinutes = 10 * 60 * 10000 |
|
//定时刷新 判断是否扫码允许 |
|
const refaulst = () => { |
|
refreshQR.value = false |
|
// 先清除之前的定时器，避免重复调用 |
|
if (intervalId) { |
|
clearInterval(intervalId.value) |
|
} |
|
// 设置定时器，每 5 秒（可根据实际需求调整）调用一次接口 |
|
intervalId.value = setInterval(async () => { |
|
try { |
|
// 检查是否已经过去了 10 分钟 |
|
if (Date.now() - startTime >= tenMinutes) { |
|
clearInterval(intervalId.value) |
|
console.log('定时器已停止，已过去 10 分钟。') |
|
refreshQR.value = true |
|
|
|
return |
|
} |
|
|
|
const res = await LoginApi.qrLoginCode({ code: uuuid.value }) |
|
|
|
if (res) { |
|
clearInterval(intervalId.value) |
|
authUtil.setToken(res) |
|
router.push({ path: '/' }) |
|
} |
|
} catch (error) { |
|
console.error('获取扫码状态失败:', error) |
|
} |
|
}, 5000) |
|
} |
|
onMounted(() => { |
|
// getCookie() |
|
getimg() |
|
}) |
|
onUnmounted(() => { |
|
// 组件销毁时清除定时器 |
|
clearInterval(intervalId.value) |
|
}) |
|
</script> |
|
<style lang="scss" scoped> |
|
.expired-text { |
|
color: #ff0000; |
|
margin-top: 40px; |
|
margin-right: 10px; |
|
} |
|
.bottomImg { |
|
width: 320px; |
|
} |
|
.topImg { |
|
height: 200px; |
|
} |
|
</style>
|
|
|