yudao-web/src/views/Login/components/QrCodeForm.vue

<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">
      <LoginFormTitle style="width: 100%" />
    </el-col>
    <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
      <el-card class="mb-10px text-center" shadow="hover">
        <!-- <Qrcode :logo="logoImg" /> -->
        <!-- 显示图片 -->
        <img :src="imageUrl" alt="Converted Image" v-if="imageUrl" />
        <XButton title="显示登陆二维码" class="w-[100%]" @click="getimg()" />
      </el-card>
    </el-col>
    <el-divider class="enter-x">{{ t('login.qrcode') }}</el-divider>
    <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
      <div class="mt-15px w-[100%]">
        <XButton :title="t('login.backLogin')" class="w-[100%]" @click="handleBackLogin()" />
      </div>
    </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 { t } = useI18n()
const { handleBackLogin, getLoginState } = useLoginState()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
// 存储定时器 ID，用于后续清除定时器
let intervalId = ref();


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 refaulst  = ()=>{
   // 先清除之前的定时器，避免重复调用
   if (intervalId) {
    clearInterval(intervalId.value);
  }
  // 设置定时器，每 5 秒（可根据实际需求调整）调用一次接口
  intervalId.value = setInterval(async () => {
    try {
      const res = await LoginApi.qrLoginCode({code:uuuid.value})
     
      if(res){
        debugger
        
				 authUtil.setToken(res)
          router.push({ path: '/' })
        clearInterval(intervalId.value);
      }
      
    } catch (error) {
      console.error('获取扫码状态失败:', error);
    }
  }, 5000);
}
onMounted(() => {
  // getCookie()
  getimg()
})
</script>