hookehuyr

feat(网络状态): 添加网络状态变化监听和错误处理

添加网络状态变化监听器以实时更新离线状态
引入错误处理机制增强网络状态检查的健壮性
在组件挂载和卸载时自动设置和移除监听器
<!--
* @Date: 2023-06-21 10:23:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-13 23:26:08
* @LastEditTime: 2026-01-16 00:29:52
* @FilePath: /xyxBooking-weapp/src/pages/index/index.vue
* @Description: 预约页首页
-->
......@@ -54,7 +54,7 @@
<script setup>
import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { ref } from 'vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { useGo } from '@/hooks/useGo'
import { get_network_type, is_usable_network } from '@/utils/network'
import { weak_network_text } from '@/utils/uiText'
......@@ -68,15 +68,79 @@ const go = useGo();
const is_offline = ref(false)
const weak_network_banner_desc = weak_network_text.banner_desc
/**
* 刷新离线状态
* - 检查当前网络类型是否可用
* - 更新 is_offline 状态
*/
const refresh_offline_state = async () => {
const network_type = await get_network_type()
is_offline.value = !is_usable_network(network_type)
try {
const network_type = await get_network_type()
is_offline.value = !is_usable_network(network_type)
} catch (e) {
console.error('refresh_offline_state failed:', e)
}
}
let has_network_listener = false
let network_listener = null
/**
* 设置网络状态变更监听器
* - 监听网络状态变化
* - 更新 is_offline 状态
*/
const setup_network_listener = () => {
if (has_network_listener) return
has_network_listener = true
network_listener = (res) => {
try {
const is_connected = res?.isConnected !== false
const network_type = res?.networkType
if (typeof network_type === 'string' && network_type) {
is_offline.value = !(is_connected && is_usable_network(network_type))
return
}
// 还没有网, 再次刷新
refresh_offline_state()
} catch (e) {
console.error('network_listener failed:', e)
}
}
Taro.onNetworkStatusChange(network_listener)
}
/**
* 移除网络状态变更监听器
* - 移除网络状态变化监听
*/
const teardown_network_listener = () => {
if (!has_network_listener) return
has_network_listener = false
if (network_listener && typeof Taro.offNetworkStatusChange === 'function') {
try {
Taro.offNetworkStatusChange(network_listener)
} catch (e) {
console.error('offNetworkStatusChange failed:', e)
}
}
network_listener = null
}
useDidShow(() => {
refresh_offline_state()
})
onMounted(() => {
setup_network_listener()
})
onUnmounted(() => {
teardown_network_listener()
})
const toBooking = () => { // 跳转到预约须知
// 如果是离线模式,不跳转
if (is_offline.value) {
......