zyt/测试医生资质图片功能.md

测试医生资质图片功能

测试步骤

1. 数据库准备

首先执行SQL文件添加字段：

# 如果使用 la_ 前缀
mysql -u root -p your_database < server/sql/add_doctor_qualification_images.sql

# 如果使用 zyt_ 前缀，先修改SQL文件中的表名
# 将 la_admin 替换为 zyt_admin

验证字段是否添加成功：

DESC la_admin;
-- 或
DESC zyt_admin;

-- 应该能看到 qualification_images 字段

2. 管理后台测试

2.1 添加医生并上传资质图片

1. 登录管理后台
2. 进入"医生管理"页面
3. 点击"新增医生"按钮
4. 填写基本信息：
   • 账号：test_doctor
   • 姓名：测试医生
   • 密码：123456
   • 其他必填字段...
5. 在"专业信息"部分找到"资质图片"字段
6. 点击上传按钮，选择1-3张测试图片
7. 点击"确定"保存

2.2 编辑医生资质图片

1. 在医生列表中找到刚创建的医生
2. 点击"编辑"按钮
3. 在"资质图片"字段中：
   • 可以删除已有图片
   • 可以添加新图片
   • 可以调整图片顺序
4. 点击"确定"保存

2.3 查看医生详情

1. 点击医生列表中的"详情"按钮
2. 确认能看到 qualification_images 字段
3. 确认图片URL格式正确

3. API接口测试

3.1 测试添加医生接口

curl -X POST "http://your-domain/adminapi/auth.admin/add" \
  -H "Content-Type: application/json" \
  -H "token: your_admin_token" \
  -d '{
    "account": "test_doctor2",
    "name": "测试医生2",
    "password": "123456",
    "password_confirm": "123456",
    "gender": 1,
    "role_id": [1],
    "dept_id": [1],
    "qualification_images": "[\"https://example.com/cert1.jpg\",\"https://example.com/cert2.jpg\"]",
    "disable": 0,
    "multipoint_login": 1
  }'

3.2 测试编辑医生接口

curl -X POST "http://your-domain/adminapi/auth.admin/edit" \
  -H "Content-Type: application/json" \
  -H "token: your_admin_token" \
  -d '{
    "id": 1,
    "account": "test_doctor",
    "name": "测试医生",
    "qualification_images": "[\"https://example.com/cert1.jpg\",\"https://example.com/cert2.jpg\",\"https://example.com/cert3.jpg\"]",
    "disable": 0,
    "multipoint_login": 1
  }'

3.3 测试医生详情接口

curl -X GET "http://your-domain/adminapi/auth.admin/detail?id=1" \
  -H "token: your_admin_token"

预期返回：

{
  "code": 1,
  "msg": "success",
  "data": {
    "id": 1,
    "name": "测试医生",
    "qualification_images": "[\"https://example.com/cert1.jpg\",\"https://example.com/cert2.jpg\"]",
    ...
  }
}

3.4 测试小程序端医生详情接口

curl -X GET "http://your-domain/api/doctor/detail?id=1"

预期返回：

{
  "code": 1,
  "msg": "success",
  "data": {
    "id": 1,
    "name": "测试医生",
    "qualification_images": "[\"https://example.com/cert1.jpg\",\"https://example.com/cert2.jpg\"]",
    ...
  }
}

4. 小程序端测试

4.1 查看医生详情页

1. 打开小程序
2. 进入医生列表页面
3. 点击任意医生进入详情页
4. 滚动到"擅长领域"下方
5. 应该能看到"医生资质"区域（如果该医生有资质图片）
6. 资质图片以3列网格布局展示

4.2 测试图片预览

1. 点击任意资质图片
2. 应该弹出图片预览界面
3. 可以左右滑动查看所有资质图片
4. 可以双指缩放查看图片细节
5. 点击关闭按钮或返回键退出预览

5. 边界情况测试

5.1 无资质图片

• 医生没有上传资质图片时，小程序端不显示"医生资质"区域
• 管理后台显示空的上传区域

5.2 单张图片

• 上传1张图片，正常显示
• 预览时只有1张图片

5.3 多张图片

• 上传9张图片（最大限制）
• 所有图片都能正常显示
• 预览时可以滑动查看所有图片

5.4 图片格式

• 测试 JPG 格式 ✓
• 测试 PNG 格式 ✓
• 测试 JPEG 格式 ✓

5.5 错误数据处理

• 空字符串：不显示资质区域
• null：不显示资质区域
• 无效JSON：不显示资质区域（有容错处理）
• 非数组JSON：不显示资质区域

6. 性能测试

6.1 图片加载速度

• 测试3张图片的加载时间
• 测试9张图片的加载时间
• 确认图片懒加载是否生效

6.2 预览性能

• 测试预览大图的加载速度
• 测试滑动切换的流畅度

测试检查清单

• 数据库字段添加成功
• 管理后台可以上传资质图片
• 管理后台可以编辑资质图片
• 管理后台可以删除资质图片
• 添加医生接口正常工作
• 编辑医生接口正常工作
• 医生详情接口返回资质图片
• 小程序端正常显示资质图片
• 小程序端图片预览功能正常
• 无资质图片时不显示该区域
• 支持多种图片格式
• 错误数据有容错处理
• 图片加载性能良好

常见问题排查

问题1：管理后台上传图片后不显示

排查步骤：

1. 检查浏览器控制台是否有错误
2. 检查图片上传接口是否成功
3. 检查 material-picker 组件是否正常工作
4. 检查 formData.qualification_images 是否有值

问题2：小程序端不显示资质图片

排查步骤：

1. 检查医生详情接口返回的数据
2. 检查 qualification_images 字段是否有值
3. 检查 qualificationImages computed 是否正确解析
4. 检查图片URL是否可访问
5. 检查小程序域名白名单配置

问题3：图片预览失败

排查步骤：

1. 检查 uni.previewImage 是否正常调用
2. 检查图片URL格式是否正确
3. 检查小程序权限配置
4. 查看小程序控制台错误信息

问题4：数据库字段不存在

排查步骤：

1. 确认是否执行了SQL文件
2. 确认表名前缀是否正确（la_ 或 zyt_）
3. 手动执行 DESC 命令检查字段
4. 检查数据库连接是否正确

测试数据示例

示例1：单张图片

["https://example.com/doctor-cert-1.jpg"]

示例2：多张图片

[
  "https://example.com/doctor-cert-1.jpg",
  "https://example.com/doctor-cert-2.jpg",
  "https://example.com/doctor-cert-3.jpg"
]

示例3：完整医生数据

{
  "id": 1,
  "name": "李医生",
  "title": "主任医师",
  "license_no": "110101199001011234",
  "qualification_images": "[\"https://example.com/cert1.jpg\",\"https://example.com/cert2.jpg\"]",
  "enable_image_consult": 1,
  "enable_video_consult": 1
}