|
|
@@ -1,4 +1,14 @@
|
|
|
<template>
|
|
|
+ <!-- 断网提示（固定在顶部） -->
|
|
|
+ <div v-if="!isOnline" class="network-alert offline">
|
|
|
+ ⚠️ 网络已断开，请检查您的网络连接!
|
|
|
+ </div>
|
|
|
+ <!-- 网络恢复提示 -->
|
|
|
+ <Transition name="fade">
|
|
|
+ <div v-if="showReconnected" class="network-alert online">
|
|
|
+ ✅ 网络已恢复
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
<van-row class="container">
|
|
|
<van-col style="background-color: #dbdcdc" span="6">
|
|
|
<van-row justify="center" :gutter="[0, 23]" style="margin-top: 23px">
|
|
|
@@ -92,7 +102,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
+import { onMounted, onUnmounted, ref, watch } from 'vue'
|
|
|
import { closeListener, openListener, scanInit } from '@/utils/keydownListener'
|
|
|
import { scanSuccess, scanError } from '@/utils/android'
|
|
|
import { getVersionName, checkUpdate, saveUserId, getUserId, scanRepeat, saveMacAddress,
|
|
|
@@ -119,11 +129,46 @@ const list = ref([])
|
|
|
const loading = ref(false)
|
|
|
const finished = ref(false)
|
|
|
|
|
|
+
|
|
|
+const isOnline = ref(navigator.onLine)
|
|
|
+// 更新网络状态
|
|
|
+const updateNetworkStatus = () => {
|
|
|
+ isOnline.value = navigator.onLine
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 网络提示
|
|
|
+const showReconnected = ref(false)
|
|
|
+let reconnectTimer = null
|
|
|
+watch(isOnline, (newVal, oldVal) => {
|
|
|
+ // 当网络从离线变为在线时
|
|
|
+ if (newVal && !oldVal) {
|
|
|
+ scanSuccess()
|
|
|
+ showReconnected.value = true
|
|
|
+
|
|
|
+ // 3秒后自动隐藏恢复提示
|
|
|
+ reconnectTimer = setTimeout(() => {
|
|
|
+ showReconnected.value = false
|
|
|
+ }, 3000)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 当网络从在线变为离线时，隐藏恢复提示
|
|
|
+ if (!newVal && oldVal) {
|
|
|
+ scanError()
|
|
|
+ showReconnected.value = false
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
onUnmounted(() => {
|
|
|
+ window.removeEventListener('online', updateNetworkStatus)
|
|
|
+ window.removeEventListener('offline', updateNetworkStatus)
|
|
|
closeListener()
|
|
|
})
|
|
|
|
|
|
onMounted(() => {
|
|
|
+ window.addEventListener('online', updateNetworkStatus)
|
|
|
+ window.addEventListener('offline', updateNetworkStatus)
|
|
|
+
|
|
|
mac.value = readMacAddress()
|
|
|
const userId = getUserId()
|
|
|
if (userId) {
|
|
|
@@ -524,5 +569,38 @@ span
|
|
|
:deep(.custom-notify)
|
|
|
font-size: 100px
|
|
|
|
|
|
+.network-alert
|
|
|
+ position: fixed
|
|
|
+ top: 0
|
|
|
+ left: 0
|
|
|
+ right: 0
|
|
|
+ padding: 15px
|
|
|
+ text-align: center
|
|
|
+ font-weight: bold
|
|
|
+ z-index: 9999
|
|
|
+ animation: slideIn 0.3s ease-out
|
|
|
+
|
|
|
+
|
|
|
+@keyframes slideIn
|
|
|
+ from
|
|
|
+ opacity: 0
|
|
|
+ transform: translateY(-100%)
|
|
|
+ to
|
|
|
+ opacity: 1
|
|
|
+ transform: translateY(0)
|
|
|
+
|
|
|
+.network-alert.offline
|
|
|
+ background-color: #ff4757
|
|
|
+ color: white
|
|
|
+
|
|
|
+.network-alert.online
|
|
|
+ background-color: #2ed573
|
|
|
+ color: white
|
|
|
+ top: 0px
|
|
|
+
|
|
|
+.fade-leave-active
|
|
|
+ transition: opacity 0.5s ease
|
|
|
|
|
|
+.fade-leave-to
|
|
|
+ opacity: 0
|
|
|
</style>
|
zh