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

# 步骤功能测试指南

## 🧪 测试第一步截图功能

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

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

#### 电话沟通截图功能：
- [ ] 点击 "+" 按钮是否能打开图片选择
- [ ] 选择图片后是否能正常上传
- [ ] 上传后是否显示图片缩略图
- [ ] 点击图片是否能预览
- [ ] 长按或点击图片是否能弹出"预览/删除"选项
- [ ] 删除功能是否正常
- [ ] 最多只能上传6张图片

### 可能的问题和解决方案：

#### 1. 点击 "+" 没反应
**可能原因：**
- `canEdit` 为 false（已提交状态）
- `chooseAndUploadImages` 函数有问题

**检查方法：**
```javascript
// 在浏览器控制台检查
console.log('canEdit:', canEdit);
console.log('smsShots.length:', smsShots.length);
```

#### 2. 图片选择失败
**可能原因：**
- 没有相机/相册权限
- Taro.chooseImage 配置问题

**解决方案：**
```javascript
// 检查权限
try {
  await Taro.authorize({ scope: 'scope.camera' });
  await Taro.authorize({ scope: 'scope.writePhotosAlbum' });
} catch (e) {
  console.error('权限获取失败:', e);
}
```

#### 3. 图片上传失败
**可能原因：**
- `uploadFileByPath` 函数问题
- 网络问题
- 文件路径问题

**检查方法：**
```javascript
// 检查上传函数
console.log('uploadFileByPath:', uploadFileByPath);
```

## 🧪 测试第二步跳转功能

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

### 可能的问题和解决方案：

#### 1. 第二步无法提交
**可能原因：**
- 第一步未提交
- 表单验证失败
- 网络问题

**检查方法：**
```javascript
// 检查第一步状态
console.log('step1Done:', step1Done);
console.log('wechatId:', wechatId);
console.log('screenshot:', screenshot);
console.log('remark:', remark);
```

#### 2. 提交后不跳转
**可能原因：**
- 提交失败
- 跳转URL错误
- Taro.redirectTo 问题

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

## 🔧 调试技巧

### 1. 启用详细日志
在代码中添加更多 console.log：
```javascript
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. 检查网络请求
```javascript
// 在上传函数中添加
console.log('Uploading file:', p);
const record = await uploadFileByPath(p);
console.log('Upload result:', record);
```

### 3. 检查状态更新
```javascript
// 在状态更新后
console.log('Updated smsShots:', smsShots);
console.log('Updated callShots:', callShots);
```

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

### 1. 权限问题
微信小程序需要特殊权限：
- `scope.camera` - 相机
- `scope.writePhotosAlbum` - 相册

### 2. 文件路径问题
微信小程序的临时文件路径可能不同，需要兼容处理：
```javascript
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. 检查函数是否有错误