hookehuyr

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

添加网络状态变化监听器以实时更新离线状态
引入错误处理机制增强网络状态检查的健壮性
在组件挂载和卸载时自动设置和移除监听器
1 <!-- 1 <!--
2 * @Date: 2023-06-21 10:23:09 2 * @Date: 2023-06-21 10:23:09
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-01-13 23:26:08 4 + * @LastEditTime: 2026-01-16 00:29:52
5 * @FilePath: /xyxBooking-weapp/src/pages/index/index.vue 5 * @FilePath: /xyxBooking-weapp/src/pages/index/index.vue
6 * @Description: 预约页首页 6 * @Description: 预约页首页
7 --> 7 -->
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
54 <script setup> 54 <script setup>
55 import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro' 55 import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro'
56 import { IconFont } from '@nutui/icons-vue-taro' 56 import { IconFont } from '@nutui/icons-vue-taro'
57 -import { ref } from 'vue' 57 +import { ref, onMounted, onUnmounted } from 'vue'
58 import { useGo } from '@/hooks/useGo' 58 import { useGo } from '@/hooks/useGo'
59 import { get_network_type, is_usable_network } from '@/utils/network' 59 import { get_network_type, is_usable_network } from '@/utils/network'
60 import { weak_network_text } from '@/utils/uiText' 60 import { weak_network_text } from '@/utils/uiText'
...@@ -68,15 +68,79 @@ const go = useGo(); ...@@ -68,15 +68,79 @@ const go = useGo();
68 const is_offline = ref(false) 68 const is_offline = ref(false)
69 const weak_network_banner_desc = weak_network_text.banner_desc 69 const weak_network_banner_desc = weak_network_text.banner_desc
70 70
71 +/**
72 + * 刷新离线状态
73 + * - 检查当前网络类型是否可用
74 + * - 更新 is_offline 状态
75 + */
71 const refresh_offline_state = async () => { 76 const refresh_offline_state = async () => {
77 + try {
72 const network_type = await get_network_type() 78 const network_type = await get_network_type()
73 is_offline.value = !is_usable_network(network_type) 79 is_offline.value = !is_usable_network(network_type)
80 + } catch (e) {
81 + console.error('refresh_offline_state failed:', e)
82 + }
83 +}
84 +
85 +let has_network_listener = false
86 +let network_listener = null
87 +
88 +/**
89 + * 设置网络状态变更监听器
90 + * - 监听网络状态变化
91 + * - 更新 is_offline 状态
92 + */
93 +
94 +const setup_network_listener = () => {
95 + if (has_network_listener) return
96 + has_network_listener = true
97 + network_listener = (res) => {
98 + try {
99 + const is_connected = res?.isConnected !== false
100 + const network_type = res?.networkType
101 + if (typeof network_type === 'string' && network_type) {
102 + is_offline.value = !(is_connected && is_usable_network(network_type))
103 + return
104 + }
105 + // 还没有网, 再次刷新
106 + refresh_offline_state()
107 + } catch (e) {
108 + console.error('network_listener failed:', e)
109 + }
110 + }
111 + Taro.onNetworkStatusChange(network_listener)
112 +}
113 +
114 +/**
115 + * 移除网络状态变更监听器
116 + * - 移除网络状态变化监听
117 + */
118 +
119 +const teardown_network_listener = () => {
120 + if (!has_network_listener) return
121 + has_network_listener = false
122 + if (network_listener && typeof Taro.offNetworkStatusChange === 'function') {
123 + try {
124 + Taro.offNetworkStatusChange(network_listener)
125 + } catch (e) {
126 + console.error('offNetworkStatusChange failed:', e)
127 + }
128 + }
129 + network_listener = null
74 } 130 }
75 131
76 useDidShow(() => { 132 useDidShow(() => {
77 refresh_offline_state() 133 refresh_offline_state()
78 }) 134 })
79 135
136 +onMounted(() => {
137 + setup_network_listener()
138 +})
139 +
140 +onUnmounted(() => {
141 + teardown_network_listener()
142 +})
143 +
80 const toBooking = () => { // 跳转到预约须知 144 const toBooking = () => { // 跳转到预约须知
81 // 如果是离线模式,不跳转 145 // 如果是离线模式,不跳转
82 if (is_offline.value) { 146 if (is_offline.value) {
......