feat(首页): 添加背景图和logo的版本控制及离线状态自动刷新

添加版本号参数到背景图和logo的URL，实现缓存刷新优化离线状态切换逻辑，当网络恢复时自动刷新页面移除CSS中硬编码的背景图URL，改为动态计算

feat(首页): 添加背景图和logo的版本控制及离线状态自动刷新
添加版本号参数到背景图和logo的URL，实现缓存刷新优化离线状态切换逻辑，当网络恢复时自动刷新页面移除CSS中硬编码的背景图URL，改为动态计算
hookehuyr
Commit 6d0b7bcca8245824dcbeb54a8efb3ab8f6533efe 6d0b7bcc 1 parent 2c136e92
Showing 1 changed file with 75 additions and 15 deletions
src/pages/index/index.vue
--- a/src/pages/index/index.vue
View file @6d0b7bc
+++ b/src/pages/index/index.vue
View file @6d0b7bc
 <!--
  * @Date: 2023-06-21 10:23:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-16 00:29:52
+ * @LastEditTime: 2026-01-16 01:02:45
  * @FilePath: /xyxBooking-weapp/src/pages/index/index.vue
  * @Description: 预约页首页
 -->
 <template>
-  <view class="index-page" :class="{ 'is-offline': is_offline }">
+  <view class="index-page" :class="{ 'is-offline': is_offline }" :style="page_style">
     <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="14" />
@@ -18,7 +18,7 @@
       <view style="height: 28vh;">
         <swiper class="my-swipe" :autoplay="true" :interval="3000" indicator-dots indicator-color="white" :circular="true">
           <swiper-item>
-            <image style="height: 28vh; width: 100vw;" src="https://cdn.ipadbiz.cn/xys/booking/banner01.png?imageMogr2/thumbnail/500x/strip/quality/100" />
+            <image style="height: 28vh; width: 100vw;" :src="banner_url" />
           </swiper-item>
         </swiper>
       </view>
@@ -31,7 +31,7 @@
           </view>
         </view>
       </view>
-      <view class="logo"></view>
+      <view class="logo" :style="logo_style"></view>
     </view>
     <view class="index-nav">
       <view class="nav-logo">
@@ -52,9 +52,9 @@
 </template>
 <script setup>
-import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro'
+import Taro, { getCurrentInstance, useDidShow, useShareAppMessage } from '@tarojs/taro'
 import { IconFont } from '@nutui/icons-vue-taro'
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { useGo } from '@/hooks/useGo'
 import { get_network_type, is_usable_network } from '@/utils/network'
 import { weak_network_text } from '@/utils/uiText'
@@ -67,16 +67,78 @@ import icon_5 from '@/assets/images/我的01@2x.png'
 const go = useGo();
 const is_offline = ref(false)
 const weak_network_banner_desc = weak_network_text.banner_desc
+// 背景图版本号, 用于刷新背景图
+const initial_t = Number(getCurrentInstance()?.router?.params?._t)
+const bg_version = ref(Number.isFinite(initial_t) ? initial_t : 0)
+let is_reloading = false
+
+const reload_page = () => {
+  if (is_reloading) return
+  is_reloading = true
+  Taro.reLaunch({
+    url: `/pages/index/index?_t=${Date.now()}`,
+  })
+}
+
+const banner_url = computed(() => {
+  return `https://cdn.ipadbiz.cn/xys/booking/banner01.png?imageMogr2/thumbnail/500x/strip/quality/100&v=${bg_version.value}`
+})
+const normal_bg_url = computed(() => {
+  return `https://cdn.ipadbiz.cn/xys/booking/bg.jpg?imageMogr2/thumbnail/200x/strip/quality/50&v=${bg_version.value}`
+})
+const logo_url = computed(() => {
+  return `https://cdn.ipadbiz.cn/xys/booking/logo.png?imageMogr2/thumbnail/50x/strip/quality/50&v=${bg_version.value}`
+})
+
+/**
+ * 页面样式
+ * - 离线状态: 背景颜色 + 背景图片 (包含渐变)
+ * - 在线状态: 背景颜色 + 背景图片
+ */
+
+const page_style = computed(() => {
+  if (is_offline.value) {
+    return {
+      backgroundColor: '#F3EEE3',
+      backgroundImage: `linear-gradient(180deg, rgba(166, 121, 57, 0.10) 0%, rgba(255, 255, 255, 0.90) 60%, rgba(243, 238, 227, 1) 100%), url('${normal_bg_url.value}')`,
+    }
+  }
+  return {
+    backgroundColor: '#F3EEE3',
+    backgroundImage: `url('${normal_bg_url.value}')`,
+  }
+})
+
+const logo_style = computed(() => {
+  return {
+    backgroundImage: `url('${logo_url.value}')`,
+  }
+})
+
+/**
+ * 应用离线状态
+ * - 检查当前状态是否需要刷新
+ * - 更新 is_offline 状态
+ */
+
+const apply_offline_state = (next_offline) => {
+  if (is_offline.value === true && next_offline === false) {
+    reload_page()
+    return true
+  }
+  is_offline.value = next_offline
+  return false
+}
 /**
  * 刷新离线状态
  * - 检查当前网络类型是否可用
- * - 更新 is_offline 状态
  */
 const refresh_offline_state = async () => {
   try {
     const network_type = await get_network_type()
-    is_offline.value = !is_usable_network(network_type)
+    const next_offline = !is_usable_network(network_type)
+    apply_offline_state(next_offline)
   } catch (e) {
     console.error('refresh_offline_state failed:', e)
   }
@@ -99,8 +161,11 @@ const setup_network_listener = () => {
       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
+        const next_offline = !(is_connected && is_usable_network(network_type))
+        // 检查是否需要刷新
+        const is_handled = apply_offline_state(next_offline)
+        if (is_handled) return
       }
       // 还没有网, 再次刷新
       refresh_offline_state()
@@ -176,16 +241,12 @@ useShareAppMessage(() => {
 .index-page {
   position: relative;
   min-height: 100vh;
-  background-image: url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg?imageMogr2/thumbnail/200x/strip/quality/50');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover; /* 确保背景覆盖 */
   &.is-offline {
     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');
   }
   .offline-banner {
@@ -277,7 +338,6 @@ useShareAppMessage(() => {
       bottom: 200rpx;
       height: 400rpx;
       width: 150rpx;
-      background-image: url('https://cdn.ipadbiz.cn/xys/booking/logo.png?imageMogr2/thumbnail/50x/strip/quality/50');
       background-repeat: no-repeat;
       background-size: contain;
       background-position: center;