|
@@ -5,9 +5,25 @@
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="login">
|
|
|
- <ElButton @click="handleCreateQrcode">点击</ElButton>
|
|
|
- <div v-loading="loading" class="qrcodeBox">
|
|
|
- <qrcode-vue v-if="!loading" :value="qrcode" :size="220" />
|
|
|
+ <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>
|
|
|
</template>
|
|
@@ -17,55 +33,178 @@ 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 uuid = ref<string>("")
|
|
|
const qrcode = computed(() => {
|
|
|
+ console.log(JSON.stringify({ action: "login", uuid: uuid.value }))
|
|
|
return JSON.stringify({ action: "login", uuid: uuid.value })
|
|
|
})
|
|
|
-const loading = ref(true)
|
|
|
+const qrcodeStatus = ref<1 | 2 | 3>(1) // 1 未扫码 2 扫码完成 3 二维码过期
|
|
|
+let _time: number
|
|
|
|
|
|
+handleCreateQrcode()
|
|
|
function handleCreateQrcode() {
|
|
|
httpAjax(createQrcodeApi).then(res => {
|
|
|
if (res.code === 200) {
|
|
|
- loading.value = false
|
|
|
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") {
|
|
|
// 扫码完成
|
|
|
- console.log("扫码完成")
|
|
|
+ qrcodeStatus.value = 2
|
|
|
} else if (status === "VERIFIED") {
|
|
|
// 已验证
|
|
|
- console.log("已验证")
|
|
|
+ qrcodeStatus.value = 2
|
|
|
} else if (status === "EXPIRED") {
|
|
|
- // 已经失效
|
|
|
- console.log("已经失效")
|
|
|
+ // 二维码过期
|
|
|
+ qrcodeStatus.value = 3
|
|
|
+ return
|
|
|
+ } else if (status === "NOT_SCAN") {
|
|
|
+ // 未扫码
|
|
|
+ qrcodeStatus.value = 1
|
|
|
}
|
|
|
- const _time = setTimeout(() => {
|
|
|
+ _time = setTimeout(() => {
|
|
|
clearTimeout(_time)
|
|
|
handleQrcodeStatus()
|
|
|
}, 1000)
|
|
|
} else if (res.code === 5440) {
|
|
|
- console.log("已过期")
|
|
|
+ // 二维码过期
|
|
|
+ qrcodeStatus.value = 3
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+function handleRefresh() {
|
|
|
+ _time && clearTimeout(_time)
|
|
|
+ handleCreateQrcode()
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.qrcodeBox {
|
|
|
- width: 250px;
|
|
|
- height: 250px;
|
|
|
+.login {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 100%;
|
|
|
+ background: url("@/img/loginErr/bg.png") no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ position: relative;
|
|
|
+ .loginBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 166px;
|
|
|
+ right: 280px;
|
|
|
+ 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: absolute;
|
|
|
+ top: 158px;
|
|
|
+ left: 346px;
|
|
|
+ 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>
|