微信绑定流程

微信登录与绑定功能设计文档

1. 需求概述

1.1 需求要点

1. 不影响现有登录功能：保留原有账号密码登录方式
2. 微信登录成功：返回数据与账号密码登录一致
3. 微信登录失败：提示"当前微信未绑定商户账号，请使用账号密码登录后在设置页面绑定微信"
4. 设置页面增加入口：在设置页面增加微信绑定入口
5. 绑定状态判断：绑定页面访问接口判断是否已绑定，显示不同状态

---

2. 流程图

2.1 微信登录流程

flowchart TD
    A[用户点击微信登录] --> B[调用 wx.login 获取 code]
    B --> C{获取 code 是否成功}
    C -->|失败| D[提示登录失败]
    C -->|成功| E[发送 code 到后端]
    E --> F[后端查询 openid 是否已绑定]
    F --> G{是否已绑定}
    G -->|已绑定| H[返回登录成功数据]
    H --> I[存储 token 和用户信息]
    I --> J[跳转到首页]
    G -->|未绑定| K[返回未绑定状态]
    K --> L[提示: 当前微信未绑定商户账号]
    L --> M[提示: 请使用账号密码登录后在设置页面绑定微信]
    M --> N[停留在登录页面]
    
    style A fill:#4CAF50,color:white
    style J fill:#4CAF50,color:white
    style D fill:#f44336,color:white
    style L fill:#FF9800,color:white
    style M fill:#FF9800,color:white
    style N fill:#9E9E9E,color:white

2.2 微信绑定流程

flowchart TD
    A[用户进入绑定页面] --> B[调用 checkBindStatus 接口]
    B --> C{查询绑定状态}
    C -->|已绑定| D[显示已绑定状态]
    D --> E[显示解绑按钮]
    C -->|未绑定| F[显示绑定表单]
    F --> G[用户输入账号密码]
    G --> H[调用 wxBind 接口]
    H --> I{绑定结果}
    I -->|成功| J[提示绑定成功]
    J --> K[显示已绑定状态]
    I -->|失败| L[提示绑定失败原因]
    L --> G
    
    E --> M[用户点击解绑]
    M --> N[调用 unbindWechat 接口]
    N --> O[显示未绑定状态]
    
    style A fill:#2196F3,color:white
    style D fill:#4CAF50,color:white
    style K fill:#4CAF50,color:white
    style L fill:#f44336,color:white

2.3 页面交互流程

flowchart LR
    A[登录页面] --> B{选择登录方式}
    B --> C[账号密码登录]
    B --> D[微信登录]
    
    C --> E[输入账号密码]
    E --> F[调用 loginByPwd]
    F --> G[跳转首页]
    
    D --> H[调用 wx.login]
    H --> I[调用 wxLogin 接口]
    I --> J{登录结果}
    J -->|成功| G
    J -->|未绑定| K[提示使用账号密码登录]
    K --> L[停留在登录页面]
    
    style A fill:#9C27B0,color:white
    style G fill:#4CAF50,color:white
    style K fill:#FF9800,color:white
    style L fill:#9E9E9E,color:white

---

3. 接口设计

3.1 微信登录接口

接口地址：POST /merchant/auth/wxLogin

请求参数：

{
  "code": "wx_login_code"
}

响应参数：

// 登录成功
{
  "code": "SUCCESS",
  "message": "登录成功",
  "data": {
    "token": "xxx",
    "refreshToken": "xxx"
  }
}

// 未绑定
{
  "code": "WECHAT_NOT_BIND",
  "message": "当前微信未绑定商户账号"
}

3.2 微信绑定接口

接口地址：POST /merchant/auth/bindWechat

请求参数：

{
  "code": "wx_login_code"
}

响应参数：

{
  "code": "SUCCESS",
  "message": "绑定成功",
  "data": {
    "merchantId": 456,
    "bindTime": "2026-06-05 14:30:00"
  }
}

3.3 查询绑定状态接口

接口地址：GET /merchant/auth/checkBindStatus

响应参数：

{
  "code": "SUCCESS",
  "data": {
    "isBind": true,
    "wechatNickname": "微信昵称",
    "bindTime": "2026-06-05 14:30:00"
  }
}

3.4 解绑微信接口

接口地址：POST /merchant/auth/unbindWechat

响应参数：

{
  "code": "SUCCESS",
  "message": "解绑成功"
}

---

4. 页面设计

4.1 登录页面改造

在现有登录页面底部增加微信登录按钮：

┌─────────────────────────────────────┐
│           蔚来校园数据支撑            │
│                                     │
│  ┌─────────────────────────────────┐│
│  │  账号: [请输入账号]              ││
│  └─────────────────────────────────┘│
│  ┌─────────────────────────────────┐│
│  │  密码: [请输入密码]              ││
│  └─────────────────────────────────┘│
│                                     │
│  ┌─────────────────────────────────┐│
│  │           登  录                ││
│  └─────────────────────────────────┘│
│                                     │
│  ─────────── 其他登录方式 ─────────── │
│                                     │
│         ┌───────────────┐           │
│         │   微信登录     │           │
│         └───────────────┘           │
└─────────────────────────────────────┘

4.2 绑定页面设计

┌─────────────────────────────────────┐
│           微信绑定                   │
├─────────────────────────────────────┤
│                                     │
│         ┌───────────────┐           │
│         │   微信图标     │           │
│         └───────────────┘           │
│                                     │
│      绑定微信后可快速登录            │
│                                     │
│  ┌─────────────────────────────────┐│
│  │  绑定状态: [未绑定/已绑定]       ││
│  └─────────────────────────────────┘│
│                                     │
│  ┌─────────────────────────────────┐│
│  │  账号: [请输入商户账号]          ││
│  └─────────────────────────────────┘│
│  ┌─────────────────────────────────┐│
│  │  密码: [请输入商户密码]          ││
│  └─────────────────────────────────┘│
│                                     │
│  ┌─────────────────────────────────┐│
│  │           绑  定                ││
│  └─────────────────────────────────┘│
│                                     │
└─────────────────────────────────────┘

4.3 设置页面改造

在设置页面增加微信绑定入口：

┌─────────────────────────────────────┐
│              设置                    │
├─────────────────────────────────────┤
│                                     │
│  ┌─────────────────────────────────┐│
│  │  微信绑定           已绑定 >    ││
│  └─────────────────────────────────┘│
│                                     │
│  ┌─────────────────────────────────┐│
│  │           退出登录              ││
│  └─────────────────────────────────┘│
│                                     │
└─────────────────────────────────────┘

---

5. 实现步骤

5.1 创建 API 接口文件

创建 api/wechat.js 文件：

import { post, get } from '@/network/ajax.js'

export function wxLogin(data) {
  return post({
    url: '/merchant/auth/wxLogin',
    data
  })
}

export function bindWechat(data) {
  return post({
    url: '/merchant/auth/bindWechat',
    data
  })
}

export function checkBindStatus() {
  return get({
    url: '/merchant/auth/checkBindStatus'
  })
}

export function unbindWechat() {
  return post({
    url: '/merchant/auth/unbindWechat'
  })
}

5.2 创建绑定页面

创建 pages/wechatBind/wechatBind.vue 页面，包含：

• 绑定状态显示
• 绑定表单（未绑定时显示）
• 解绑按钮（已绑定时显示）

5.3 修改登录页面

修改 pages/login/login.vue，增加：

• 微信登录按钮
• 微信登录处理逻辑
• 未绑定时跳转绑定页面

5.4 修改设置页面

修改 pages/setUp/setUp.vue，增加：

• 微信绑定入口
• 绑定状态显示
• 跳转绑定页面功能

5.5 配置页面路由

修改 pages.json，添加绑定页面路由

---

6. 注意事项

6.1 兼容性处理

// 检查是否在微信环境
function isWeixin() {
  return typeof wx !== 'undefined' && wx.login
}

6.2 错误处理

错误码	说明	处理方式
WECHAT_NOT_BIND	微信未绑定	提示"当前微信未绑定商户账号，请使用账号密码登录后在设置页面绑定微信"
AUTH_FAILED	账号密码错误	提示重新输入
WECHAT_ALREADY_BIND	微信已绑定其他账号	提示联系客服
CODE_EXPIRED	code 已过期	重新调用 wx.login

6.3 用户体验优化

1. 加载状态：登录/绑定过程中显示 loading
2. 防重复提交：按钮点击后禁用
3. 友好提示：错误提示清晰明确

---

7. 测试用例

7.1 微信登录测试

测试场景	测试步骤	预期结果
已绑定用户登录	点击微信登录	登录成功，跳转首页
未绑定用户登录	点击微信登录	提示"当前微信未绑定商户账号，请使用账号密码登录后在设置页面绑定微信"，停留在登录页面
网络异常	断开网络点击登录	提示网络错误

7.2 微信绑定测试

测试场景	测试步骤	预期结果
正常绑定	输入正确账号密码点击绑定	绑定成功
账号密码错误	输入错误密码点击绑定	提示错误
解绑操作	点击解绑确认	解绑成功

---

8. 变更记录

版本	日期	说明
v1.0	2026-06-05	初始版本