网络连接提醒

ghsApp/src/admin/home/workbench.vue

@@ -32,6 +32,8 @@
 
   <block v-if="loginStyle == 0">
     <view class="guest-page">
+      <!-- 无网络提示条 -->
+      <no-network-bar></no-network-bar>
       <view class="guest-hero">
         <view class="guest-brand">
           <view class="guest-logo-wrap">
@@ -303,11 +305,13 @@ import { renewShop,noRemind,needRemind } from "@/api/renew"
 import { getListB,orderFh} from "@/api/order";
 import wexinPay from "@/utils/pay/wxPay";
 import keyboardModule from '@/components/keyboard'
+import NoNetworkBar from "@/components/no-network-bar.vue";
 import { iconSrc, iconBg } from "@/utils/iconSrc";
 export default {
 	name: "workbench",
 	components: { 
-		keyboardModule
+		keyboardModule,
+		NoNetworkBar
 	 },
 	mixins: [productMins,autoUpdateMixins],
 	data() {

ghsApp/src/components/no-network-bar.vue

@@ -0,0 +1,124 @@
+<!-- 
+  文件用途：无网络提示条组件
+  谁用：在首页未登录或其他需要提示网络状态的页面顶部展示
+  解决什么问题：当用户手机断开网络连接时，提供醒目的提示条，并支持点击跳转到系统设置或弹出提示
+-->
+<template>
+  <view v-if="!isConnected" class="no-network-bar" @tap="toSetting">
+    <view class="bar-left">
+      <!-- 警告图标：使用 Unicode 字符，确保跨端兼容性 -->
+      <text class="warning-icon">⚠️</text>
+      <text class="bar-text">当前无法连接网络，可检查网络设置是否正常</text>
+    </view>
+    <!-- 右侧箭头：使用 Unicode 字符 -->
+    <text class="arrow-icon">❯</text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'NoNetworkBar',
+  data() {
+    return {
+      // 默认网络是连接的，避免闪烁
+      isConnected: true
+    };
+  },
+  created() {
+    // 初始化网络状态
+    this.initNetworkStatus();
+  },
+  destroyed() {
+    // 移除网络状态监听，防止内存泄漏
+    uni.offNetworkStatusChange(this.onNetworkChange);
+  },
+  methods: {
+    /**
+     * 初始化网络状态并开始监听
+     * 职责：获取当前网络类型，并注册网络状态变化监听器
+     */
+    initNetworkStatus() {
+      const that = this;
+      uni.getNetworkType({
+        success(res) {
+          // none 表示无网络
+          that.isConnected = res.networkType !== 'none';
+          // 同步给全局变量，供请求拦截器等其他地方使用
+          uni.$isConnected = that.isConnected;
+        }
+      });
+      
+      // 注册监听器
+      uni.onNetworkStatusChange(this.onNetworkChange);
+    },
+    
+    /**
+     * 网络状态变化回调函数
+     * @param {Object} res - 网络状态变化结果，res.isConnected 为布尔值
+     */
+    onNetworkChange(res) {
+      this.isConnected = res.isConnected;
+      uni.$isConnected = res.isConnected;
+    },
+    
+    /**
+     * 点击提示条跳转到网络设置
+     * 职责：App端引导用户跳转到系统设置页，小程序/H5端弹窗提示
+     */
+    toSetting() {
+      // #ifdef APP-PLUS
+      // App端：调用系统API打开应用设置
+      plus.runtime.openURL("app-settings:");
+      // #endif
+      
+      // #ifndef APP-PLUS
+      // 非App端（微信小程序/H5）：弹出模态框提示用户检查系统设置
+      uni.showModal({
+        title: '提示',
+        content: '请在手机系统的“设置”中开启网络连接，或检查Wi-Fi/移动数据是否正常。',
+        showCancel: false,
+        confirmText: '我知道了'
+      });
+      // #endif
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.no-network-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff2f0;
+  border-bottom: 1upx solid #ffccc7;
+  padding: 20upx 30upx;
+  width: 100%;
+  box-sizing: border-box;
+  
+  .bar-left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+    
+    .warning-icon {
+      font-size: 32upx;
+    }
+    
+    .bar-text {
+      font-size: 26upx;
+      color: #ff4d4f;
+      /* 遵循 style-compatibility 规范，使用 margin 代替 gap */
+      margin-left: 16upx;
+    }
+  }
+  
+  .arrow-icon {
+    font-size: 24upx;
+    color: #bfbfbf;
+    margin-left: 16upx;
+  }
+}
+</style>

hdApp/src/admin/home/workbench.vue

@@ -16,6 +16,8 @@
           </view>
         </view>
         <view class="login-body">
+          <!-- 无网络提示条 -->
+          <no-network-bar style="margin-bottom: 24upx; border-radius: 24upx; border: 1upx solid #ffccc7;"></no-network-bar>
           <!-- #ifdef MP-WEIXIN -->
           <view class="login-card">
             <view class="login-card-top">
@@ -65,13 +67,14 @@ import { mapGetters } from "vuex";
 import { getWeixinId } from "@/api/invite";
 import autoUpdateMixins from "@/mixins/autoUpdate";
 import NotLogin from "@/components/not-login";
+import NoNetworkBar from "@/components/no-network-bar.vue";
 import PurchaseGhsPanel from "./components/purchase-ghs-panel.vue";
 import MallHomePanel from "./components/mall-home-panel.vue";
 import { iconSrc } from "@/utils/iconSrc";
 
 export default {
   name: "workbench",
-  components: { NotLogin, PurchaseGhsPanel, MallHomePanel },
+  components: { NotLogin, PurchaseGhsPanel, MallHomePanel, NoNetworkBar },
   mixins: [autoUpdateMixins],
   data() {
     return {

hdApp/src/components/no-network-bar.vue

@@ -0,0 +1,124 @@
+<!-- 
+  文件用途：无网络提示条组件
+  谁用：在首页未登录或其他需要提示网络状态的页面顶部展示
+  解决什么问题：当用户手机断开网络连接时，提供醒目的提示条，并支持点击跳转到系统设置或弹出提示
+-->
+<template>
+  <view v-if="!isConnected" class="no-network-bar" @tap="toSetting">
+    <view class="bar-left">
+      <!-- 警告图标：使用 Unicode 字符，确保跨端兼容性 -->
+      <text class="warning-icon">⚠️</text>
+      <text class="bar-text">当前无法连接网络，可检查网络设置是否正常</text>
+    </view>
+    <!-- 右侧箭头：使用 Unicode 字符 -->
+    <text class="arrow-icon">❯</text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'NoNetworkBar',
+  data() {
+    return {
+      // 默认网络是连接的，避免闪烁
+      isConnected: true
+    };
+  },
+  created() {
+    // 初始化网络状态
+    this.initNetworkStatus();
+  },
+  destroyed() {
+    // 移除网络状态监听，防止内存泄漏
+    uni.offNetworkStatusChange(this.onNetworkChange);
+  },
+  methods: {
+    /**
+     * 初始化网络状态并开始监听
+     * 职责：获取当前网络类型，并注册网络状态变化监听器
+     */
+    initNetworkStatus() {
+      const that = this;
+      uni.getNetworkType({
+        success(res) {
+          // none 表示无网络
+          that.isConnected = res.networkType !== 'none';
+          // 同步给全局变量，供请求拦截器等其他地方使用
+          uni.$isConnected = that.isConnected;
+        }
+      });
+      
+      // 注册监听器
+      uni.onNetworkStatusChange(this.onNetworkChange);
+    },
+    
+    /**
+     * 网络状态变化回调函数
+     * @param {Object} res - 网络状态变化结果，res.isConnected 为布尔值
+     */
+    onNetworkChange(res) {
+      this.isConnected = res.isConnected;
+      uni.$isConnected = res.isConnected;
+    },
+    
+    /**
+     * 点击提示条跳转到网络设置
+     * 职责：App端引导用户跳转到系统设置页，小程序/H5端弹窗提示
+     */
+    toSetting() {
+      // #ifdef APP-PLUS
+      // App端：调用系统API打开应用设置
+      plus.runtime.openURL("app-settings:");
+      // #endif
+      
+      // #ifndef APP-PLUS
+      // 非App端（微信小程序/H5）：弹出模态框提示用户检查系统设置
+      uni.showModal({
+        title: '提示',
+        content: '请在手机系统的“设置”中开启网络连接，或检查Wi-Fi/移动数据是否正常。',
+        showCancel: false,
+        confirmText: '我知道了'
+      });
+      // #endif
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.no-network-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff2f0;
+  border-bottom: 1upx solid #ffccc7;
+  padding: 20upx 30upx;
+  width: 100%;
+  box-sizing: border-box;
+  
+  .bar-left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+    
+    .warning-icon {
+      font-size: 32upx;
+    }
+    
+    .bar-text {
+      font-size: 26upx;
+      color: #ff4d4f;
+      /* 遵循 style-compatibility 规范，使用 margin 代替 gap */
+      margin-left: 16upx;
+    }
+  }
+  
+  .arrow-icon {
+    font-size: 24upx;
+    color: #bfbfbf;
+    margin-left: 16upx;
+  }
+}
+</style>

mallApp/src/components/no-network-bar.vue

@@ -0,0 +1,124 @@
+<!-- 
+  文件用途：无网络提示条组件
+  谁用：在首页未登录或其他需要提示网络状态的页面顶部展示
+  解决什么问题：当用户手机断开网络连接时，提供醒目的提示条，并支持点击跳转到系统设置或弹出提示
+-->
+<template>
+  <view v-if="!isConnected" class="no-network-bar" @tap="toSetting">
+    <view class="bar-left">
+      <!-- 警告图标：使用 Unicode 字符，确保跨端兼容性 -->
+      <text class="warning-icon">⚠️</text>
+      <text class="bar-text">当前无法连接网络，可检查网络设置是否正常</text>
+    </view>
+    <!-- 右侧箭头：使用 Unicode 字符 -->
+    <text class="arrow-icon">❯</text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'NoNetworkBar',
+  data() {
+    return {
+      // 默认网络是连接的，避免闪烁
+      isConnected: true
+    };
+  },
+  created() {
+    // 初始化网络状态
+    this.initNetworkStatus();
+  },
+  destroyed() {
+    // 移除网络状态监听，防止内存泄漏
+    uni.offNetworkStatusChange(this.onNetworkChange);
+  },
+  methods: {
+    /**
+     * 初始化网络状态并开始监听
+     * 职责：获取当前网络类型，并注册网络状态变化监听器
+     */
+    initNetworkStatus() {
+      const that = this;
+      uni.getNetworkType({
+        success(res) {
+          // none 表示无网络
+          that.isConnected = res.networkType !== 'none';
+          // 同步给全局变量，供请求拦截器等其他地方使用
+          uni.$isConnected = that.isConnected;
+        }
+      });
+      
+      // 注册监听器
+      uni.onNetworkStatusChange(this.onNetworkChange);
+    },
+    
+    /**
+     * 网络状态变化回调函数
+     * @param {Object} res - 网络状态变化结果，res.isConnected 为布尔值
+     */
+    onNetworkChange(res) {
+      this.isConnected = res.isConnected;
+      uni.$isConnected = res.isConnected;
+    },
+    
+    /**
+     * 点击提示条跳转到网络设置
+     * 职责：App端引导用户跳转到系统设置页，小程序/H5端弹窗提示
+     */
+    toSetting() {
+      // #ifdef APP-PLUS
+      // App端：调用系统API打开应用设置
+      plus.runtime.openURL("app-settings:");
+      // #endif
+      
+      // #ifndef APP-PLUS
+      // 非App端（微信小程序/H5）：弹出模态框提示用户检查系统设置
+      uni.showModal({
+        title: '提示',
+        content: '请在手机系统的“设置”中开启网络连接，或检查Wi-Fi/移动数据是否正常。',
+        showCancel: false,
+        confirmText: '我知道了'
+      });
+      // #endif
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.no-network-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff2f0;
+  border-bottom: 1upx solid #ffccc7;
+  padding: 20upx 30upx;
+  width: 100%;
+  box-sizing: border-box;
+  
+  .bar-left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+    
+    .warning-icon {
+      font-size: 32upx;
+    }
+    
+    .bar-text {
+      font-size: 26upx;
+      color: #ff4d4f;
+      /* 遵循 style-compatibility 规范，使用 margin 代替 gap */
+      margin-left: 16upx;
+    }
+  }
+  
+  .arrow-icon {
+    font-size: 24upx;
+    color: #bfbfbf;
+    margin-left: 16upx;
+  }
+}
+</style>

mallApp/src/pages/home/recent.vue

@@ -2,6 +2,8 @@
   <view class="page-container">
     <!-- 未登录状态 -->
     <block v-if="loginStyle == 0">
+      <!-- 无网络提示条 -->
+      <no-network-bar></no-network-bar>
       <view class="login-container">
         <view class="login-content">
           <text class="login-title">欢迎使用</text>
@@ -70,6 +72,9 @@
           </view>
         </view>
 
+	      <!-- 无网络提示条 -->
+	      <no-network-bar></no-network-bar>
+
         <!-- 花店列表 -->
         <view class="shop-list" v-if="!$util.isEmpty(list.data)">
           <view
@@ -195,6 +200,7 @@ import AppActivilyCoupon from "@/components/module/app-activily-coupon";
 import { getList, delHd } from "@/api/hd";
 import { share } from "@/mixins";
 import AppAvatarModule from "@/components/module/app-avatar";
+import NoNetworkBar from "@/components/no-network-bar.vue";
 import { mapGetters } from "vuex";
 import { currentInfo } from "@/api/user";
 import { list } from "@/mixins";
@@ -209,6 +215,7 @@ export default {
     TuiListView,
     TuiListCell,
     AppActivilyCoupon,
+    NoNetworkBar,
   },
   mixins: [share, list],
   data() {