微信小程序登录修改

urbanLifelineWeb/packages/workcase_wechat/手机号授权说明.md

@@ -0,0 +1,165 @@
+# 手机号授权登录方案说明
+
+## 方案概述
+
+已实现**方案B：首次登录时请求手机号授权**。用户首次打开小程序时，会显示一个精美的授权弹窗，引导用户授权手机号。
+
+## 实现流程
+
+### 1. 用户首次登录
+1. 用户打开小程序
+2. 调用 `wx.login` 获取微信登录 code
+3. 显示手机号授权弹窗，提供两个选项：
+   - **授权手机号登录**：获取用户手机号，完成正式注册
+   - **暂不授权，以游客身份使用**：跳过手机号授权，以游客身份登录
+4. 用户选择授权：
+   - 点击"授权手机号登录" → 获取手机号加密数据（phoneCode）
+   - 点击"暂不授权" → 以游客身份登录，无需手机号
+5. 将相关数据发送到后端
+6. 后端完成注册/登录（正式用户或游客）
+7. 保存用户信息到本地缓存
+
+### 2. 后续登录
+- 直接从本地缓存读取用户信息
+- 无需重复授权
+
+## 关键代码位置
+
+### 模板部分 (index.uvue)
+- **手机号授权弹窗**: 第 176-202 行
+- **授权按钮**: 第 190-196 行，使用 `open-type="getPhoneNumber"` 触发授权
+- **暂不授权按钮**: 第 197-199 行，点击后以游客身份登录
+
+### 脚本部分 (index.uvue)
+- **showPhoneAuthModal**: 第 244 行 - 控制授权弹窗显示
+- **tempWechatCode**: 第 246 行 - 保存微信登录 code
+- **autoLogin()**: 第 296-327 行 - 修改后的自动登录逻辑
+- **onGetPhoneNumber()**: 第 370-466 行 - 处理手机号授权回调
+- **handleSkipAuth()**: 第 468-526 行 - 处理跳过授权，游客登录
+
+### 样式部分 (index.scss)
+- **phone-auth-modal**: 第 817-905 行 - 授权弹窗样式
+- **skip-auth-btn**: 第 888-905 行 - 暂不授权按钮样式
+
+## 后端接口要求
+
+### identify 接口需要支持以下功能：
+
+```typescript
+// 请求参数
+interface IdentifyRequest {
+  wechatId: string;  // 微信ID（从code中提取的临时ID）
+  phone: string;     // 手机号加密code（phoneCode）或明文手机号
+}
+
+// 后端需要：
+// 1. 判断 phone 是否为加密code
+// 2. 如果是加密code，使用微信API解密获取真实手机号
+// 3. 根据 wechatId 和 phone 查询或创建用户
+// 4. 返回用户信息和 token
+```
+
+### 微信手机号解密接口
+
+后端需要调用微信的 `getPhoneNumber` 接口：
+
+```
+POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN
+
+{
+  "code": "手机号加密code"
+}
+```
+
+参考文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-info/phone-number/getPhoneNumber.html
+
+## 小程序配置要求
+
+### 1. 开通手机号快速验证权限
+
+在微信公众平台（mp.weixin.qq.com）：
+1. 登录小程序后台
+2. 进入"开发" → "开发管理" → "接口设置"
+3. 找到"手机号快速验证组件"
+4. 点击"开通"
+
+### 2. 服务器域名配置
+
+确保后端 API 域名已添加到小程序的合法域名列表中。
+
+## 错误处理
+
+### errno 102 错误
+如果用户授权时出现 errno 102 错误，说明小程序未开通"手机号快速验证"功能。代码中已添加友好提示：
+
+```typescript
+if (e.detail.errno === 102) {
+  uni.showModal({
+    title: '提示',
+    content: '该小程序暂未开通手机号快速验证功能，请联系管理员开通后再试。',
+    showCancel: false
+  })
+}
+```
+
+### 授权失败重试
+如果授权失败，会重新显示授权弹窗，用户可以再次尝试。
+
+## 用户体验优化
+
+### 1. 精美的授权弹窗
+- 渐变色背景
+- 大图标设计
+- 清晰的授权说明
+- 突出的授权按钮
+
+### 2. 非侵入式设计
+- 用户可以选择"暂不授权"继续使用（如果实现了游客模式）
+- 已授权用户不会重复看到授权弹窗
+
+### 3. 本地缓存
+- 授权成功后保存用户信息到本地
+- 下次打开直接使用缓存，无需重复授权
+
+## 测试要点
+
+### 1. 首次登录测试
+- 清空小程序缓存
+- 打开小程序
+- 验证是否显示授权弹窗
+- 点击授权按钮
+- 验证是否成功登录
+
+### 2. 已登录用户测试
+- 授权成功后关闭小程序
+- 重新打开小程序
+- 验证是否自动登录（不显示授权弹窗）
+
+### 3. 授权失败测试
+- 点击授权按钮后取消
+- 验证错误提示是否友好
+- 验证是否可以再次尝试
+
+### 4. 未开通权限测试
+- 在未开通手机号快速验证的小程序中测试
+- 验证 errno 102 错误提示
+
+## 相关文件
+
+- `urbanLifelineWeb/packages/workcase_wechat/pages/index/index.uvue` - 主要逻辑
+- `urbanLifelineWeb/packages/workcase_wechat/pages/index/index.scss` - 样式文件
+- `urbanLifelineWeb/packages/workcase_wechat/api/guest/index.ts` - guest API（identify接口）
+
+## 注意事项
+
+1. **隐私政策**：使用手机号授权前，需要在小程序中添加隐私政策说明
+2. **用户同意**：确保用户知道手机号的用途（身份识别、工单通知等）
+3. **数据安全**：后端需要安全存储用户手机号，遵守相关法律法规
+4. **降级方案**：如果手机号授权失败，可以考虑提供其他登录方式（如手动输入手机号+验证码）
+
+## 后续优化建议
+
+1. **添加"暂不授权"功能**：允许用户跳过授权，以游客身份使用部分功能
+2. **添加重新授权入口**：在个人中心添加"绑定手机号"功能，让跳过授权的用户可以后续绑定
+3. **优化错误提示**：针对不同的授权失败原因，提供更详细的解决方案
+4. **添加授权动画**：让授权过程更加流畅和友好