classroom/src/viewsframe/login/login.vue

<!--
* @FileDescription: 登录
* @Author: 黄琪勇
* @Date:2024-03-19 17:13:28
-->
<template>
   <div class="login">
      <div class="loginCon">
         <div class="decoration">
            <img class="star" src="@/img/loginErr/star.png" />
            <img class="bStar" src="@/img/loginErr/bStar.png" />
            <img class="music" src="@/img/loginErr/music.png" />
         </div>
         <div class="loginBox">
            <img v-show="qrcodeStatus === 2" class="scanned" src="@/img/loginErr/scanned.png" />
            <div v-show="qrcodeStatus !== 2" v-loading="!uuid" class="qrcodeBox">
               <div class="qrCodeCon" :class="{ refresh: qrcodeStatus === 3 }">
                  <qrcode-vue class="qrCode" v-if="uuid" :value="qrcode" :size="164" />
                  <img @click="handleRefresh" src="@/img/loginErr/refresh.png" />
               </div>
            </div>
            <div class="dsc">
               <img src="@/img/loginErr/jiantou1.png" />
               <div>{{ qrcodeStatus === 2 ? "扫码完成，请在手机上操作" : "使用客户端扫描二维码登录乐教通" }}</div>
               <img src="@/img/loginErr/jiantou2.png" />
            </div>
            <div class="refreshBtn" @click="handleRefresh">{{ qrcodeStatus === 2 ? "重新扫码" : "刷新二维码" }}</div>
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
import { createQrcodeApi, queryQrcodeStatusApi } from "@/api/user.api"
import { httpAjax } from "@/plugin/httpAjax"
import QrcodeVue from "qrcode.vue"
import { ref, computed } from "vue"
import userStore from "@/store/modules/user"
import { useRouter } from "vue-router"

const userStoreHook = userStore()
const router = useRouter()

const uuid = ref<string>("")
const qrcode = computed(() => {
   return JSON.stringify({ action: "login", uuid: uuid.value })
})
const qrcodeStatus = ref<1 | 2 | 3>(1) // 1 未扫码  2 扫码完成  3 二维码过期
let _time: number

handleCreateQrcode()
function handleCreateQrcode() {
   httpAjax(createQrcodeApi).then(res => {
      if (res.code === 200) {
         uuid.value = res.data.uuid
         handleQrcodeStatus()
      }
   })
}
function handleQrcodeStatus() {
   httpAjax(queryQrcodeStatusApi, uuid.value as string).then(res => {
      if (res.code === 200) {
         const { status } = res.data
         if (status === "FINISH") {
            // 登录成功
            userStoreHook.login(res.data).then(() => {
               router.push({ path: "/" })
            })
            return
         }
         if (status === "SCANNED") {
            // 扫码完成
            qrcodeStatus.value = 2
         } else if (status === "VERIFIED") {
            // 已验证
            qrcodeStatus.value = 2
         } else if (status === "EXPIRED") {
            // 二维码过期
            qrcodeStatus.value = 3
            return
         } else if (status === "NOT_SCAN") {
            // 未扫码
            qrcodeStatus.value = 1
         }
         _time = setTimeout(() => {
            clearTimeout(_time)
            handleQrcodeStatus()
         }, 3000)
      } else if (res.code === 5440) {
         // 二维码过期
         qrcodeStatus.value = 3
      }
   })
}
function handleRefresh() {
   _time && clearTimeout(_time)
   handleCreateQrcode()
}
</script>

<style lang="scss" scoped>
.login {
   width: 100%;
   min-height: 100%;
   background: url("@/img/loginErr/bg.png") no-repeat;
   background-size: cover;
   display: flex;
   justify-content: center;
   align-items: center;
   min-width: 1280px;
   .loginCon {
      display: flex;
      justify-content: space-between;
      width: 80%;
   }
   .loginBox {
      width: 440px;
      height: 498px;
      background: url("@/img/loginErr/loginBox.png") no-repeat;
      background-size: cover;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      .scanned {
         margin-top: 132px;
      }
      .qrcodeBox {
         margin-top: 154px;
         width: 188px;
         height: 188px;
         display: flex;
         justify-content: center;
         align-items: center;
         background: url("@/img/loginErr/border.png") no-repeat;
         background-size: cover;
         .qrCodeCon {
            position: relative;
            &.refresh {
               background-color: rgba(255, 255, 255, 0.8);
               > .qrCode {
                  opacity: 0.3;
               }
               > img {
                  cursor: pointer;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                  display: block;
               }
            }
            > img {
               display: none;
            }
         }
      }
      .dsc {
         margin-top: 28px;
         display: flex;
         justify-content: center;
         align-items: center;
         > div {
            width: 240px;
            text-align: center;
            font-size: 16px;
            color: #777;
            margin: 0 14px;
         }
      }
      .refreshBtn {
         margin-top: 14px;
         line-height: 22px;
         font-size: 16px;
         color: #f67146;
         display: inline;
         font-weight: bold;
         cursor: pointer;
         &:hover {
            opacity: $opacity-hover;
         }
      }
   }
   .decoration {
      position: relative;
      width: 522px;
      height: 626px;
      background: url("@/img/loginErr/xiaoren.png") no-repeat;
      background-size: cover;
      z-index: 1;
      .star {
         position: absolute;
         right: 0;
         top: 0;
         width: 26px;
         height: 38px;
      }
      .bStar {
         position: absolute;
         left: -20px;
         top: 178px;
         width: 60px;
         height: 58px;
      }
      .music {
         position: absolute;
         right: -26px;
         top: 24px;
         width: 28px;
         height: 56px;
      }
   }
}
</style>