feat(首页): 添加离线模式提示和网络状态检测

检测网络状态并在离线时显示提示横幅
修改背景样式增强视觉效果
离线状态下阻止预约跳转

 <!--
 <!--
  * @Date: 2023-06-21 10:23:09
  * @Date: 2023-06-21 10:23:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-13 15:35:17
+ * @LastEditTime: 2026-01-13 15:47:00
  * @FilePath: /xyxBooking-weapp/src/pages/index/index.vue
  * @FilePath: /xyxBooking-weapp/src/pages/index/index.vue
  * @Description: 预约页首页
  * @Description: 预约页首页
 -->
 -->
 <template>
 <template>
   <view class="index-page">
   <view class="index-page">
+    <view v-if="is_offline" class="offline-banner mx-6 mt-4 rounded-xl px-4 py-3">
+      <view class="flex items-center">
+        <IconFont name="tips" size="18" />
+        <text class="ml-2 font-medium">离线模式</text>
+      </view>
+      <view class="mt-1 text-sm opacity-80">网络不佳，已启用本地显示</view>
+    </view>
     <view class="index-content">
     <view class="index-content">
       <view style="height: 28vh;">
       <view style="height: 28vh;">
         <swiper class="my-swipe" :autoplay="true" :interval="3000" indicator-dots indicator-color="white" :circular="true">
         <swiper class="my-swipe" :autoplay="true" :interval="3000" indicator-dots indicator-color="white" :circular="true">
@@ -45,17 +52,38 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import Taro, { useShareAppMessage } from '@tarojs/taro'
+import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro'
+import { IconFont } from '@nutui/icons-vue-taro'
 // import { showSuccessToast, showFailToast } from 'vant'; // NutUI 或 Taro API
 // import { showSuccessToast, showFailToast } from 'vant'; // NutUI 或 Taro API
+import { ref } from 'vue'
 import { useGo } from '@/hooks/useGo'
 import { useGo } from '@/hooks/useGo'
+import { get_network_type, is_usable_network } from '@/utils/network'
 import icon_1 from '@/assets/images/立即预约@2x.png'
 import icon_1 from '@/assets/images/立即预约@2x.png'
 import icon_3 from '@/assets/images/首页02@2x.png'
 import icon_3 from '@/assets/images/首页02@2x.png'
 import icon_4 from '@/assets/images/二维码icon.png'
 import icon_4 from '@/assets/images/二维码icon.png'
 import icon_5 from '@/assets/images/我的01@2x.png'
 import icon_5 from '@/assets/images/我的01@2x.png'
 
 
 const go = useGo();
 const go = useGo();
+const is_offline = ref(false)
+
+const refresh_offline_state = async () => {
+  const network_type = await get_network_type()
+  is_offline.value = !is_usable_network(network_type)
+}
+
+useDidShow(() => {
+  refresh_offline_state()
+})
 
 
 const toBooking = () => { // 跳转到预约须知
 const toBooking = () => { // 跳转到预约须知
+  // 如果是离线模式，不跳转
+  if (is_offline.value) {
+    Taro.showToast({
+      title: '当前为离线模式，无法预约',
+      icon: 'none'
+    })
+    return
+  }
   go('/notice');
   go('/notice');
 }
 }
 const toCode = () => { // 跳转到预约码
 const toCode = () => { // 跳转到预约码
@@ -82,10 +110,26 @@ useShareAppMessage(() => {
 .index-page {
 .index-page {
   position: relative;
   position: relative;
   min-height: 100vh;
   min-height: 100vh;
-  background-image: url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg?imageMogr2/thumbnail/200x/strip/quality/50');
+  background-color: #F3EEE3;
+  background-image:
+    linear-gradient(180deg, rgba(166, 121, 57, 0.10) 0%, rgba(255, 255, 255, 0.90) 60%, rgba(243, 238, 227, 1) 100%),
+    url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg?imageMogr2/thumbnail/200x/strip/quality/50');
   background-repeat: no-repeat;
   background-repeat: no-repeat;
   background-position: center;
   background-position: center;
   background-size: cover; /* 确保背景覆盖 */
   background-size: cover; /* 确保背景覆盖 */
+
+  .offline-banner {
+    position: absolute;
+    top: 24rpx;
+    left: 24rpx;
+    right: 24rpx;
+    z-index: 10;
+    background: rgba(255, 255, 255, 0.88);
+    color: #A67939;
+    border: 2rpx solid rgba(166, 121, 57, 0.25);
+    box-shadow: 0 12rpx 30rpx rgba(166, 121, 57, 0.12);
+    backdrop-filter: blur(6px);
+  }
   .index-content {
   .index-content {
     height: calc(100vh - 134rpx);
     height: calc(100vh - 134rpx);
     .index-control {
     .index-control {