template-10579/测试步骤功能.md

步骤功能测试指南

🧪 测试第一步截图功能

测试步骤：

1. 进入第一步页面（加微信前沟通）
2. 检查以下功能是否正常：

短信截图功能：

• 点击 "+" 按钮是否能打开图片选择
• 选择图片后是否能正常上传
• 上传后是否显示图片缩略图
• 点击图片是否能预览
• 长按或点击图片是否能弹出"预览/删除"选项
• 删除功能是否正常
• 最多只能上传6张图片

电话沟通截图功能：

• 点击 "+" 按钮是否能打开图片选择
• 选择图片后是否能正常上传
• 上传后是否显示图片缩略图
• 点击图片是否能预览
• 长按或点击图片是否能弹出"预览/删除"选项
• 删除功能是否正常
• 最多只能上传6张图片

可能的问题和解决方案：

1. 点击 "+" 没反应

可能原因：

• canEdit 为 false（已提交状态）
• chooseAndUploadImages 函数有问题

检查方法：

// 在浏览器控制台检查
console.log('canEdit:', canEdit);
console.log('smsShots.length:', smsShots.length);

2. 图片选择失败

可能原因：

• 没有相机/相册权限
• Taro.chooseImage 配置问题

解决方案：

// 检查权限
try {
  await Taro.authorize({ scope: 'scope.camera' });
  await Taro.authorize({ scope: 'scope.writePhotosAlbum' });
} catch (e) {
  console.error('权限获取失败:', e);
}

3. 图片上传失败

可能原因：

• uploadFileByPath 函数问题
• 网络问题
• 文件路径问题

检查方法：

// 检查上传函数
console.log('uploadFileByPath:', uploadFileByPath);

🧪 测试第二步跳转功能

测试步骤：

1. 完成第一步提交
2. 进入第二步页面
3. 填写所有必填项：
   • 微信号
   • 添加微信截图
   • 沟通情况
4. 点击提交按钮
5. 检查是否跳转到第三步

可能的问题和解决方案：

1. 第二步无法提交

可能原因：

• 第一步未提交
• 表单验证失败
• 网络问题

检查方法：

// 检查第一步状态
console.log('step1Done:', step1Done);
console.log('wechatId:', wechatId);
console.log('screenshot:', screenshot);
console.log('remark:', remark);

2. 提交后不跳转

可能原因：

• 提交失败
• 跳转URL错误
• Taro.redirectTo 问题

检查方法：

// 检查提交结果
console.log('提交结果:', res);
// 检查跳转URL
console.log('跳转URL:', `/credit/mp-customer/follow-step3?id=${customerId}`);

🔧 调试技巧

1. 启用详细日志

在代码中添加更多 console.log：

const chooseAndUploadImages = useCallback(async (kind: 'sms' | 'call') => {
  console.log('chooseAndUploadImages called:', kind);
  console.log('canEdit:', canEdit);
  console.log('current length:', kind === 'sms' ? smsShots.length : callShots.length);
  
  if (!canEdit) {
    console.log('Cannot edit: submitted');
    return;
  }
  
  // ... 其他代码
}, [callShots, canEdit, smsShots]);

2. 检查网络请求

// 在上传函数中添加
console.log('Uploading file:', p);
const record = await uploadFileByPath(p);
console.log('Upload result:', record);

3. 检查状态更新

// 在状态更新后
console.log('Updated smsShots:', smsShots);
console.log('Updated callShots:', callShots);

📱 微信小程序特殊注意事项

1. 权限问题

微信小程序需要特殊权限：

• scope.camera - 相机
• scope.writePhotosAlbum - 相册

2. 文件路径问题

微信小程序的临时文件路径可能不同，需要兼容处理：

const pathsFromChooseImageResult = (res: any): string[] => {
  const a = res?.tempFilePaths;
  if (Array.isArray(a) && a.length) {
    return a.map((p: any) => String(p || '').trim()).filter(Boolean);
  }
  const files = res?.tempFiles;
  if (Array.isArray(files) && files.length) {
    return files.map((f: any) => String(f?.path || '').trim()).filter(Boolean);
  }
  return [];
};

3. 调试工具

使用微信开发者工具的调试功能：

• Console 面板查看日志
• Network 面板查看网络请求
• Sources 面板断点调试

🚀 常见问题解决

问题1：截图上传后不显示

解决方案：

1. 检查图片URL是否有效
2. 检查缩略图生成
3. 检查状态更新

问题2：提交后不跳转

解决方案：

1. 检查提交是否成功
2. 检查跳转URL是否正确
3. 检查页面是否存在

问题3：按钮点击没反应

解决方案：

1. 检查按钮是否被禁用
2. 检查点击事件绑定
3. 检查函数是否有错误