fix(index): 修复小程序加载中问题

- 完善 reload函数逻辑，添加用户登录流程- 引入加载状态管理，优化异步操作流程
-增加网络诊断工具，帮助排查加载问题
- 改进错误处理，提升用户体验
-详细文档记录解决方案，便于后续支持

docs/LOADING_ISSUE_SOLUTION.md

@@ -0,0 +1,204 @@
+# 🔧 小程序"加载中..."问题解决方案
+
+## 🚨 **问题描述**
+
+用户点击分享链接打开小程序时，页面一直显示"加载中..."，无法正常进入应用。
+
+## 🔍 **问题根本原因**
+
+通过代码分析发现主要问题：
+
+### 1. **空的reload函数**
+```typescript
+const reload = () => {
+  // 函数体为空！这是主要问题
+};
+```
+
+### 2. **缺少加载状态管理**
+- 没有明确的加载完成标识
+- 多个异步操作没有统一管理
+- 错误处理不完善
+
+### 3. **网络请求失败处理不当**
+- API请求失败时没有合适的降级处理
+- 用户无法知道具体哪个环节出了问题
+
+## ✅ **完整解决方案**
+
+### 方案1: 修复核心逻辑
+
+#### 1.1 完善reload函数
+```typescript
+const reload = () => {
+  console.log('开始执行登录流程...');
+  Taro.login({
+    success: (res) => {
+      loginByOpenId({
+        code: res.code,
+        tenantId: TenantId
+      }).then(async data => {
+        if (data) {
+          saveStorageByLoginUser(data.access_token, data.user);
+          checkInitComplete({ userLogin: true });
+          console.log('✅ 用户登录完成');
+        }
+      }).catch(error => {
+        checkInitComplete({ userLogin: true }); // 即使失败也标记完成
+        console.error('登录失败:', error);
+      });
+    }
+  });
+};
+```
+
+#### 1.2 添加加载状态管理
+```typescript
+const [pageLoading, setPageLoading] = useState<boolean>(true);
+const [initStatus, setInitStatus] = useState({
+  shopInfo: false,
+  userAuth: false,
+  userLogin: false
+});
+
+const checkInitComplete = (newStatus) => {
+  const updatedStatus = { ...initStatus, ...newStatus };
+  setInitStatus(updatedStatus);
+  
+  const allComplete = Object.values(updatedStatus).every(status => status === true);
+  if (allComplete && pageLoading) {
+    setPageLoading(false);
+    Taro.hideLoading();
+  }
+};
+```
+
+### 方案2: 网络诊断工具
+
+#### 2.1 创建网络检测工具
+```typescript
+// src/utils/networkCheck.ts
+export class NetworkChecker {
+  static async checkNetworkStatus() { /* 检查网络状态 */ }
+  static async testAPIConnection() { /* 测试API连接 */ }
+  static async diagnoseNetwork() { /* 综合诊断 */ }
+}
+```
+
+#### 2.2 集成到加载页面
+```typescript
+if (pageLoading) {
+  return (
+    <div className="loading-container">
+      <div>加载中...</div>
+      <div>
+        站点信息: {initStatus.shopInfo ? '✅' : '⏳'} |
+        用户授权: {initStatus.userAuth ? '✅' : '⏳'} |
+        用户登录: {initStatus.userLogin ? '✅' : '⏳'}
+      </div>
+      <button onClick={() => showNetworkDiagnosis(BaseUrl)}>
+        网络诊断
+      </button>
+    </div>
+  );
+}
+```
+
+### 方案3: 错误处理优化
+
+#### 3.1 统一错误处理
+```typescript
+// 每个异步操作都有完善的错误处理
+getShopInfo().then((data) => {
+  checkInitComplete({ shopInfo: true });
+}).catch((error) => {
+  checkInitComplete({ shopInfo: true }); // 即使失败也标记完成
+  console.error('获取站点信息失败:', error);
+});
+```
+
+#### 3.2 用户友好的错误提示
+```typescript
+Taro.showToast({
+  title: '获取站点信息失败',
+  icon: 'error',
+  duration: 3000
+});
+```
+
+## 🎯 **修复后的效果**
+
+### ✅ **解决的问题**
+1. **不再无限加载** - 所有异步操作都有明确的完成标识
+2. **清晰的进度显示** - 用户可以看到具体哪个环节在处理
+3. **网络问题诊断** - 提供网络诊断工具帮助排查问题
+4. **优雅的错误处理** - 即使某个环节失败，也不会卡住整个流程
+
+### 📊 **加载流程**
+```
+1. 显示加载页面 ⏳
+2. 获取站点信息 → ✅ shopInfo: true
+3. 检查用户授权 → ✅ userAuth: true  
+4. 执行用户登录 → ✅ userLogin: true
+5. 所有完成 → 隐藏加载页面，显示主界面
+```
+
+## 🛠️ **使用方法**
+
+### 开发者调试
+1. 打开微信开发者工具控制台
+2. 查看详细的日志输出：
+   ```
+   === 首页初始化开始 ===
+   开始获取站点信息...
+   站点信息获取成功: {...}
+   开始检查用户授权状态...
+   ✅ 用户已经授权过，开始登录流程
+   ✅ 用户登录完成
+   ✅ 所有初始化完成，隐藏加载状态
+   ```
+
+### 用户使用
+1. 如果加载时间过长，点击"网络诊断"按钮
+2. 查看诊断结果，按建议操作
+3. 如仍有问题，联系技术支持并提供诊断结果
+
+## 🔧 **技术细节**
+
+### 文件修改清单
+- ✅ `src/pages/index/index.tsx` - 主要修复
+- ✅ `src/utils/networkCheck.ts` - 新增网络诊断工具
+- ✅ `docs/LOADING_ISSUE_SOLUTION.md` - 解决方案文档
+
+### 关键改进点
+1. **状态管理** - 使用React状态管理加载进度
+2. **错误恢复** - 即使某个步骤失败，也不会阻塞整个流程
+3. **用户体验** - 提供清晰的进度反馈和问题诊断工具
+4. **调试友好** - 详细的控制台日志输出
+
+## 🚀 **部署建议**
+
+1. **测试验证**
+   ```bash
+   npm run build:weapp
+   ```
+
+2. **真机测试**
+   - 在不同网络环境下测试
+   - 模拟网络异常情况
+   - 验证分享链接功能
+
+3. **监控部署**
+   - 关注用户反馈
+   - 监控错误日志
+   - 持续优化用户体验
+
+## 📞 **后续支持**
+
+如果问题仍然存在，请提供：
+1. 微信开发者工具的控制台日志
+2. 网络诊断结果截图
+3. 具体的复现步骤
+4. 设备和网络环境信息
+
+这样可以进一步定位和解决问题。

src/pages/index/index.tsx

@@ -3,11 +3,15 @@ import BestSellers from './BestSellers';
 import Taro from '@tarojs/taro';
 import {useShareAppMessage} from "@tarojs/taro"
 import {useEffect, useState} from "react";
-import {getShopInfo} from "@/api/layout";
+import {getShopInfo, loginByOpenId} from "@/api/layout";
+import {TenantId} from "@/config/app";
+import {saveStorageByLoginUser} from "@/utils/server";
 import {Sticky} from '@nutui/nutui-react-taro'
 import Menu from "./Menu";
 import Banner from "./Banner";
 import {checkAndHandleInviteRelation, hasPendingInvite} from "@/utils/invite";
+import {showNetworkDiagnosis} from "@/utils/networkCheck";
+import {BaseUrl} from "@/config/app";
 import './index.scss'
 
 // import GoodsList from "./GoodsList";
@@ -15,6 +19,31 @@ import './index.scss'
 function Home() {
   // 吸顶状态
   const [stickyStatus, setStickyStatus] = useState<boolean>(false)
+  // 页面加载状态
+  const [pageLoading, setPageLoading] = useState<boolean>(true)
+  // 初始化状态
+  const [initStatus, setInitStatus] = useState<{
+    shopInfo: boolean;
+    userAuth: boolean;
+    userLogin: boolean;
+  }>({
+    shopInfo: false,
+    userAuth: false,
+    userLogin: false
+  })
+
+  // 检查是否所有初始化都完成
+  const checkInitComplete = (newStatus: Partial<typeof initStatus>) => {
+    const updatedStatus = { ...initStatus, ...newStatus };
+    setInitStatus(updatedStatus);
+
+    const allComplete = Object.values(updatedStatus).every(status => status === true);
+    if (allComplete && pageLoading) {
+      console.log('✅ 所有初始化完成，隐藏加载状态');
+      setPageLoading(false);
+      Taro.hideLoading();
+    }
+  }
 
   useShareAppMessage(() => {
     return {
@@ -54,14 +83,21 @@ function Home() {
       success: (res) => {
         if (res.authSetting['scope.userInfo']) {
           // 用户授权成功，可以获取用户信息
+          console.log('用户重新授权成功');
           reload();
         } else {
           // 用户拒绝授权，提示授权失败
+          console.log('用户拒绝授权');
+          checkInitComplete({ userLogin: true });
           Taro.showToast({
             title: '授权失败',
             icon: 'none'
           });
         }
+      },
+      fail: (error) => {
+        console.error('打开设置页面失败:', error);
+        checkInitComplete({ userLogin: true });
       }
     });
   };
@@ -73,14 +109,80 @@ function Home() {
   }
 
   const reload = () => {
+    console.log('开始执行登录流程...');
+    Taro.login({
+      success: (res) => {
+        console.log('微信登录成功，code:', res.code);
 
+        // 调用后端登录接口
+        loginByOpenId({
+          code: res.code,
+          tenantId: TenantId
+        }).then(async data => {
+          console.log('后端登录成功:', data);
+          if (data) {
+            // 保存用户信息到本地存储
+            saveStorageByLoginUser(data.access_token, data.user);
+
+            // 标记登录完成
+            checkInitComplete({ userLogin: true });
+
+            Taro.showToast({
+              title: '登录成功',
+              icon: 'success',
+              duration: 2000
+            });
+            console.log('✅ 用户登录完成');
+          } else {
+            throw new Error('登录返回数据为空');
+          }
+        }).catch(error => {
+          console.error('后端登录失败:', error);
+          // 即使登录失败也标记为完成，避免一直加载
+          checkInitComplete({ userLogin: true });
+          Taro.showToast({
+            title: '登录失败，请重试',
+            icon: 'error',
+            duration: 3000
+          });
+        });
+      },
+      fail: (error) => {
+        console.error('微信登录失败:', error);
+        Taro.showToast({
+          title: '微信登录失败',
+          icon: 'error',
+          duration: 3000
+        });
+      }
+    });
   };
 
   useEffect(() => {
-    // 获取站点信息
+    console.log('=== 首页初始化开始 ===');
-    getShopInfo().then(() => {
 
-    })
+    // 显示加载提示
+    Taro.showLoading({
+      title: '加载中...',
+      mask: true
+    });
+
+    // 获取站点信息
+    console.log('开始获取站点信息...');
+    getShopInfo().then((data) => {
+      console.log('站点信息获取成功:', data);
+      checkInitComplete({ shopInfo: true });
+    }).catch((error) => {
+      console.error('站点信息获取失败:', error);
+      // 即使失败也标记为完成，避免一直加载
+      checkInitComplete({ shopInfo: true });
+      // 显示错误提示
+      Taro.showToast({
+        title: '获取站点信息失败',
+        icon: 'error',
+        duration: 3000
+      });
+    });
 
     // 检查是否有待处理的邀请关系
     if (hasPendingInvite()) {
@@ -99,17 +201,33 @@ function Home() {
     }
 
     // Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
+    console.log('开始检查用户授权状态...');
     Taro.getSetting({
       success: (res) => {
+        console.log('授权状态检查结果:', res.authSetting);
+        checkInitComplete({ userAuth: true });
+
         if (res.authSetting['scope.userInfo']) {
           // 用户已经授权过，可以直接获取用户信息
-          console.log('用户已经授权过，可以直接获取用户信息')
+          console.log('✅ 用户已经授权过，开始登录流程');
           reload();
         } else {
           // 用户未授权，需要弹出授权窗口
-          console.log('用户未授权，需要弹出授权窗口')
+          console.log('❌ 用户未授权，显示授权弹窗');
           showAuthModal();
+          // 即使未授权也标记登录为完成，避免一直加载
+          checkInitComplete({ userLogin: true });
         }
+      },
+      fail: (error) => {
+        console.error('获取授权状态失败:', error);
+        // 标记为完成，避免一直加载
+        checkInitComplete({ userAuth: true, userLogin: true });
+        Taro.showToast({
+          title: '获取授权状态失败',
+          icon: 'error',
+          duration: 3000
+        });
       }
     });
     // 获取用户信息
@@ -121,6 +239,38 @@ function Home() {
     });
   }, []);
 
+  // 如果还在加载中，显示加载页面
+  if (pageLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 p-4">
+        <div className="text-center">
+          <div className="mb-6">
+            <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-500 mx-auto"></div>
+          </div>
+          <div className="text-lg text-gray-700 mb-4">加载中...</div>
+          <div className="text-sm text-gray-500 mb-6 space-y-1">
+            <div>站点信息: {initStatus.shopInfo ? '✅ 完成' : '⏳ 加载中'}</div>
+            <div>用户授权: {initStatus.userAuth ? '✅ 完成' : '⏳ 检查中'}</div>
+            <div>用户登录: {initStatus.userLogin ? '✅ 完成' : '⏳ 登录中'}</div>
+          </div>
+
+          {/* 如果加载时间过长，显示帮助按钮 */}
+          <div className="space-y-3">
+            <button
+              className="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm"
+              onClick={() => showNetworkDiagnosis(BaseUrl)}
+            >
+              网络诊断
+            </button>
+            <div className="text-xs text-gray-400">
+              如果长时间无响应，请点击网络诊断
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       <Sticky threshold={0} onChange={() => onSticky(arguments)}>

src/utils/networkCheck.ts

@@ -0,0 +1,155 @@
+import Taro from '@tarojs/taro';
+
+/**
+ * 网络连接检测工具
+ */
+export class NetworkChecker {
+  /**
+   * 检查网络连接状态
+   */
+  static async checkNetworkStatus(): Promise<{
+    isConnected: boolean;
+    networkType: string;
+    message: string;
+  }> {
+    try {
+      const networkInfo = await Taro.getNetworkType();
+      const isConnected = networkInfo.networkType !== 'none';
+      
+      return {
+        isConnected,
+        networkType: networkInfo.networkType,
+        message: isConnected 
+          ? `网络连接正常 (${networkInfo.networkType})` 
+          : '网络连接异常'
+      };
+    } catch (error) {
+      console.error('检查网络状态失败:', error);
+      return {
+        isConnected: false,
+        networkType: 'unknown',
+        message: '无法检测网络状态'
+      };
+    }
+  }
+
+  /**
+   * 测试API连接
+   */
+  static async testAPIConnection(baseUrl: string): Promise<{
+    success: boolean;
+    responseTime: number;
+    message: string;
+  }> {
+    const startTime = Date.now();
+    
+    try {
+      const response = await Taro.request({
+        url: `${baseUrl}/health`,
+        method: 'GET',
+        timeout: 5000
+      });
+      
+      const responseTime = Date.now() - startTime;
+      
+      return {
+        success: response.statusCode === 200,
+        responseTime,
+        message: `API连接${response.statusCode === 200 ? '正常' : '异常'} (${responseTime}ms)`
+      };
+    } catch (error) {
+      const responseTime = Date.now() - startTime;
+      console.error('API连接测试失败:', error);
+      
+      return {
+        success: false,
+        responseTime,
+        message: `API连接失败 (${responseTime}ms): ${error}`
+      };
+    }
+  }
+
+  /**
+   * 综合网络诊断
+   */
+  static async diagnoseNetwork(baseUrl: string): Promise<{
+    network: any;
+    api: any;
+    suggestions: string[];
+  }> {
+    console.log('🔍 开始网络诊断...');
+    
+    const network = await this.checkNetworkStatus();
+    const api = await this.testAPIConnection(baseUrl);
+    
+    const suggestions: string[] = [];
+    
+    if (!network.isConnected) {
+      suggestions.push('请检查网络连接');
+      suggestions.push('尝试切换网络环境（WiFi/移动数据）');
+    }
+    
+    if (!api.success) {
+      suggestions.push('服务器可能暂时不可用');
+      suggestions.push('请稍后重试');
+      if (api.responseTime > 10000) {
+        suggestions.push('网络响应较慢，建议检查网络质量');
+      }
+    }
+    
+    if (network.networkType === 'wifi') {
+      suggestions.push('WiFi连接正常，如仍有问题请检查路由器');
+    } else if (network.networkType === '4g' || network.networkType === '5g') {
+      suggestions.push('移动网络连接，请确保有足够的流量');
+    }
+    
+    console.log('📊 网络诊断结果:', { network, api, suggestions });
+    
+    return { network, api, suggestions };
+  }
+
+  /**
+   * 显示网络诊断结果
+   */
+  static async showNetworkDiagnosis(baseUrl: string) {
+    Taro.showLoading({ title: '诊断网络中...', mask: true });
+    
+    try {
+      const diagnosis = await this.diagnoseNetwork(baseUrl);
+      Taro.hideLoading();
+      
+      const content = [
+        `网络状态: ${diagnosis.network.message}`,
+        `API连接: ${diagnosis.api.message}`,
+        '',
+        '建议:',
+        ...diagnosis.suggestions.map(s => `• ${s}`)
+      ].join('\n');
+      
+      Taro.showModal({
+        title: '网络诊断结果',
+        content,
+        showCancel: false,
+        confirmText: '知道了'
+      });
+    } catch (error) {
+      Taro.hideLoading();
+      console.error('网络诊断失败:', error);
+      
+      Taro.showModal({
+        title: '诊断失败',
+        content: '无法完成网络诊断，请检查网络连接后重试',
+        showCancel: false,
+        confirmText: '知道了'
+      });
+    }
+  }
+}
+
+/**
+ * 便捷方法
+ */
+export const checkNetwork = () => NetworkChecker.checkNetworkStatus();
+export const testAPI = (baseUrl: string) => NetworkChecker.testAPIConnection(baseUrl);
+export const diagnoseNetwork = (baseUrl: string) => NetworkChecker.diagnoseNetwork(baseUrl);
+export const showNetworkDiagnosis = (baseUrl: string) => NetworkChecker.showNetworkDiagnosis(baseUrl);