微信绑定流程

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

1. 需求概述

1.1 需求要点

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

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

请求参数：

json 复制代码

{
  "code": "wx_login_code"
}

响应参数：

json 复制代码

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

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

3.2 微信绑定接口

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

请求参数：

json 复制代码

{
  "code": "wx_login_code"
}

响应参数：

json 复制代码

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

3.3 查询绑定状态接口

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

响应参数：

json 复制代码

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

3.4 解绑微信接口

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

响应参数：

json 复制代码

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

4. 页面设计

4.1 登录页面改造

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

ini 复制代码

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

4.2 绑定页面设计

ini 复制代码

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

4.3 设置页面改造

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

复制代码

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

5. 实现步骤

5.1 创建 API 接口文件

创建 api/wechat.js 文件：

javascript 复制代码

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 兼容性处理

javascript 复制代码

// 检查是否在微信环境
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 用户体验优化

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

7. 测试用例

7.1 微信登录测试

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

7.2 微信绑定测试

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

8. 变更记录

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