封版手机一键登录

docs/wxLogin-usage.md

@@ -0,0 +1,163 @@
+# 微信登录函数封装使用说明
+
+## 概述
+
+我们已经将微信小程序手机号登录功能封装成了可复用的函数，提供了更好的错误处理、配置选项和代码复用性。
+
+## 封装的函数
+
+### 1. `wxPhoneLogin` - 核心登录函数
+
+位置：`src/api/passport/login/index.ts`
+
+```typescript
+export async function wxPhoneLogin(
+  phoneDetail: { code: string; encryptedData: string; iv: string },
+  options?: {
+    onSuccess?: (user: any) => void;
+    onError?: (error: string) => void;
+    showToast?: boolean;
+    navigateBack?: boolean;
+    tenantId?: number;
+  }
+)
+```
+
+### 2. `WxLoginUtil` - 工具类
+
+位置：`src/utils/wxLogin.ts`
+
+提供了多种便捷的登录方法：
+- `handleGetPhoneNumber` - 完整的登录处理
+- `quickLogin` - 快速登录（使用默认配置）
+- `loginWithCallback` - 带自定义回调的登录
+
+### 3. `createWxLoginHandler` - 工厂函数
+
+创建可直接用于 `onGetPhoneNumber` 的处理函数。
+
+## 使用方式
+
+### 方式一：使用工厂函数（推荐）
+
+```typescript
+import { createWxLoginHandler } from '@/utils/wxLogin';
+
+const MyComponent = () => {
+  // 创建登录处理函数
+  const handleGetPhoneNumber = createWxLoginHandler({
+    onSuccess: (user) => {
+      console.log('登录成功:', user);
+      // 自定义成功处理逻辑
+    },
+    onError: (error) => {
+      console.error('登录失败:', error);
+      // 自定义错误处理逻辑
+    },
+    showToast: true,
+    navigateBack: true,
+    tenantId: 10519
+  });
+
+  return (
+    <Button 
+      open-type="getPhoneNumber" 
+      onGetPhoneNumber={handleGetPhoneNumber}
+    >
+      微信登录
+    </Button>
+  );
+};
+```
+
+### 方式二：使用工具类
+
+```typescript
+import { WxLoginUtil } from '@/utils/wxLogin';
+
+const MyComponent = () => {
+  const handleGetPhoneNumber = ({ detail }) => {
+    // 快速登录
+    WxLoginUtil.quickLogin(detail);
+    
+    // 或者带自定义回调
+    WxLoginUtil.loginWithCallback(detail, (user) => {
+      console.log('登录成功:', user);
+      // 自定义处理逻辑
+    });
+  };
+
+  return (
+    <Button 
+      open-type="getPhoneNumber" 
+      onGetPhoneNumber={handleGetPhoneNumber}
+    >
+      微信登录
+    </Button>
+  );
+};
+```
+
+### 方式三：直接使用核心函数
+
+```typescript
+import { wxPhoneLogin } from '@/api/passport/login';
+
+const MyComponent = () => {
+  const handleGetPhoneNumber = async ({ detail }) => {
+    const { code, encryptedData, iv } = detail;
+    
+    try {
+      const user = await wxPhoneLogin(
+        { code, encryptedData, iv },
+        {
+          onSuccess: (user) => {
+            console.log('登录成功:', user);
+          },
+          showToast: true,
+          navigateBack: true
+        }
+      );
+      
+      // 处理登录成功后的逻辑
+      console.log('用户信息:', user);
+    } catch (error) {
+      console.error('登录失败:', error);
+    }
+  };
+
+  return (
+    <Button 
+      open-type="getPhoneNumber" 
+      onGetPhoneNumber={handleGetPhoneNumber}
+    >
+      微信登录
+    </Button>
+  );
+};
+```
+
+## 配置选项
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `onSuccess` | `(user: any) => void` | - | 登录成功回调 |
+| `onError` | `(error: string) => void` | - | 登录失败回调 |
+| `showToast` | `boolean` | `true` | 是否显示提示信息 |
+| `navigateBack` | `boolean` | `true` | 登录成功后是否返回上一页 |
+| `tenantId` | `number` | `config.TenantId` | 租户ID |
+
+## 优势
+
+1. **统一的错误处理**：封装了网络请求失败、微信登录失败等各种错误情况
+2. **灵活的配置**：可以根据不同场景配置不同的行为
+3. **代码复用**：避免在多个组件中重复写相同的登录逻辑
+4. **类型安全**：提供了完整的 TypeScript 类型定义
+5. **易于维护**：登录逻辑集中管理，便于后续修改和维护
+
+## 已更新的文件
+
+以下文件已经使用了新的封装函数：
+- `src/passport/wxLogin.tsx` - 微信登录页面
+
+其他需要登录功能的组件可以参考上述使用方式进行更新。

src/utils/wxLogin.ts

@@ -0,0 +1,94 @@
+import { wxPhoneLogin } from '@/api/passport/login';
+import Taro from '@tarojs/taro';
+
+/**
+ * 微信登录工具类
+ * 提供便捷的微信登录方法
+ */
+export class WxLoginUtil {
+  /**
+   * 处理微信授权手机号登录
+   * @param detail 微信授权返回的详细信息
+   * @param options 登录选项
+   */
+  static async handleGetPhoneNumber(
+    detail: any,
+    options?: {
+      onSuccess?: (user: any) => void;
+      onError?: (error: string) => void;
+      showToast?: boolean;
+      navigateBack?: boolean;
+      tenantId?: number;
+    }
+  ) {
+    const { code, encryptedData, iv } = detail;
+    
+    if (!code) {
+      const errorMsg = '用户取消授权';
+      if (options?.onError) {
+        options.onError(errorMsg);
+      }
+      if (options?.showToast !== false) {
+        Taro.showToast({
+          title: errorMsg,
+          icon: 'none'
+        });
+      }
+      return Promise.reject(new Error(errorMsg));
+    }
+
+    try {
+      return await wxPhoneLogin(
+        { code, encryptedData, iv },
+        options
+      );
+    } catch (error: any) {
+      console.error('微信登录失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 简化版登录方法 - 只需要传入detail，使用默认配置
+   * @param detail 微信授权返回的详细信息
+   */
+  static async quickLogin(detail: any) {
+    return this.handleGetPhoneNumber(detail, {
+      showToast: true,
+      navigateBack: true
+    });
+  }
+
+  /**
+   * 自定义成功回调的登录方法
+   * @param detail 微信授权返回的详细信息
+   * @param onSuccess 成功回调
+   */
+  static async loginWithCallback(
+    detail: any,
+    onSuccess: (user: any) => void
+  ) {
+    return this.handleGetPhoneNumber(detail, {
+      onSuccess,
+      showToast: true,
+      navigateBack: false
+    });
+  }
+}
+
+/**
+ * 创建微信登录处理函数的工厂方法
+ * @param options 登录选项
+ * @returns 返回一个可以直接用于 onGetPhoneNumber 的处理函数
+ */
+export function createWxLoginHandler(options?: {
+  onSuccess?: (user: any) => void;
+  onError?: (error: string) => void;
+  showToast?: boolean;
+  navigateBack?: boolean;
+  tenantId?: number;
+}) {
+  return ({ detail }: { detail: any }) => {
+    return WxLoginUtil.handleGetPhoneNumber(detail, options);
+  };
+}