# 医生资质图片功能说明

## 功能概述
为医生档案添加资质图片上传功能，支持上传多张资质证书、荣誉证书等图片，并在医生详情页面展示。

## 实现内容

### 1. 数据库修改
**文件**: `server/sql/add_doctor_qualification_images.sql`

添加了 `qualification_images` 字段到医生表（la_admin/zyt_admin）：
- 字段类型：text
- 存储格式：JSON数组
- 示例数据：`["https://example.com/image1.jpg", "https://example.com/image2.jpg"]`

**执行SQL**:
```sql
ALTER TABLE `la_admin` ADD COLUMN `qualification_images` text NULL COMMENT '医生资质图片（JSON数组格式）' AFTER `license_no`;
```

如果使用 `zyt_` 前缀，请将 `la_admin` 替换为 `zyt_admin`。

### 2. 后端修改

#### 2.1 管理员逻辑层
**文件**: `server/app/adminapi/logic/auth/AdminLogic.php`

在 `add`、`edit` 和 `detail` 方法中添加 `qualification_images` 字段处理：

**添加方法 (add)**:
```php
// 处理资质图片：如果是数组则转为JSON字符串
$qualificationImages = '';
if (isset($params['qualification_images'])) {
    if (is_array($params['qualification_images'])) {
        $qualificationImages = json_encode($params['qualification_images'], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    } else {
        $qualificationImages = $params['qualification_images'];
    }
}

$admin = Admin::create([
    // ... 其他字段
    'qualification_images' => $qualificationImages,
    // ... 其他字段
]);
```

**编辑方法 (edit)**:
```php
// 处理资质图片：如果是数组则转为JSON字符串
$qualificationImages = '';
if (isset($params['qualification_images'])) {
    if (is_array($params['qualification_images'])) {
        $qualificationImages = json_encode($params['qualification_images'], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    } else {
        $qualificationImages = $params['qualification_images'];
    }
}

$data = [
    // ... 其他字段
    'qualification_images' => $qualificationImages,
    // ... 其他字段
];
```

**数据处理说明**：
- 前端提交的数据格式：`["https://example.com/image1.jpg", "https://example.com/image2.jpg"]`（数组）
- 后端存储格式：`["https://example.com/image1.jpg","https://example.com/image2.jpg"]`（JSON字符串）
- 使用 `JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES` 确保中文和URL正确编码

**详情方法 (detail)**:
```php
$admin = Admin::field([
    // ... 其他字段
    'qualification_images',
    // ... 其他字段
])->findOrEmpty($params['id'])->toArray();

// 将资质图片JSON字符串转换为数组，供前端组件使用
if (!empty($admin['qualification_images'])) {
    try {
        $images = json_decode($admin['qualification_images'], true);
        if (is_array($images)) {
            $admin['qualification_images'] = $images;
        }
    } catch (\Exception $e) {
        // 解析失败时保持原值
        Log::error('解析资质图片失败: ' . $e->getMessage());
    }
}
```

**数据流转说明**：
1. **前端提交** → 数组格式 `["url1", "url2"]`
2. **后端接收** → 转换为JSON字符串存储到数据库
3. **后端返回** → 将JSON字符串转换回数组格式
4. **前端接收** → 数组格式，`material-picker` 组件可直接使用

#### 2.2 医生详情接口
**文件**: `server/app/api/logic/DoctorLogic.php`

修改 `getDoctorDetail` 方法：
- 在查询字段中添加 `qualification_images`
- 在返回数据中包含 `qualification_images` 字段

```php
$doctor = Admin::where('id', $doctorId)
    ->where('disable', 0)
    ->field(['id', 'name', 'account', 'avatar','specialty','license_no','qualification_images','enable_image_consult','enable_video_consult','enable_charge'])
    ->find();

return [
    // ... 其他字段
    'qualification_images' => $doctorData['qualification_images'] ?? '',
    // ... 其他字段
];
```

### 3. 前端修改

#### 3.1 管理后台 - 医生编辑页面
**文件**: `admin/src/views/consumer/doctor/edit.vue`

**新增内容**：
1. 在"执业证书编号"字段后添加"资质图片"上传组件
2. 使用 `material-picker` 组件，支持最多上传9张图片
3. 在 `formData` 中添加 `qualification_images` 字段

**代码示例**：
```vue
<!-- 医生资质图片 -->
<el-form-item label="资质图片">
    <div>
        <div>
            <material-picker v-model="formData.qualification_images" :limit="9" />
        </div>
        <div class="form-tips">上传医生资质证书、荣誉证书等图片，最多9张，建议尺寸：800*600px</div>
    </div>
</el-form-item>
```

#### 3.2 小程序端 - 医生详情页面
**文件**: `TUICallKit-Vue3/doctor/pages/doctor/doctor.vue`

**新增内容**：
1. 在"擅长领域"和"专业领域"之间添加"医生资质"展示区域
2. 使用3列网格布局展示资质图片
3. 点击图片可预览大图
4. 使用 computed 属性解析 JSON 格式的图片数据

**代码示例**：
```vue
<!-- 医生资质 -->
<section class="qualification-section" v-if="qualificationImages.length > 0">
  <text class="section-title-plain">医生资质</text>
  <view class="qualification-grid">
    <image 
      v-for="(img, idx) in qualificationImages" 
      :key="idx"
      :src="img" 
      class="qualification-image"
      mode="aspectFill"
      @click="previewImage(img)"
    />
  </view>
</section>
```

**JavaScript逻辑**：
```javascript
// 医生资质图片
const qualificationImages = computed(() => {
  if (!doctor.value?.qualification_images) return []
  try {
    const images = typeof doctor.value.qualification_images === 'string' 
      ? JSON.parse(doctor.value.qualification_images) 
      : doctor.value.qualification_images
    return Array.isArray(images) ? images : []
  } catch (e) {
    console.error('解析资质图片失败:', e)
    return []
  }
})

// 预览资质图片
const previewImage = (current) => {
  uni.previewImage({
    current: current,
    urls: qualificationImages.value
  })
}
```

**样式**：
```scss
.qualification-section {
  margin-bottom: 96rpx;
}

.qualification-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
}

.qualification-image {
  width: 100%;
  height: 200rpx;
  border-radius: 16rpx;
  background: $surface-high;
  object-fit: cover;
}
```

## 相关接口

### 管理后台接口

#### 1. 添加医生
- **接口**: `POST /adminapi/auth.admin/add`
- **参数**: 
  - `qualification_images`: 资质图片（字符串，多个图片URL用逗号分隔或JSON数组格式）
  - 其他医生信息字段...

#### 2. 编辑医生
- **接口**: `POST /adminapi/auth.admin/edit`
- **参数**: 
  - `id`: 医生ID
  - `qualification_images`: 资质图片
  - 其他医生信息字段...

#### 3. 医生详情
- **接口**: `GET /adminapi/auth.admin/detail`
- **参数**: 
  - `id`: 医生ID
- **返回**: 包含 `qualification_images` 字段

### 小程序端接口

#### 医生详情
- **接口**: `GET /api/doctor/detail`
- **参数**: 
  - `id`: 医生ID
- **返回**: 包含 `qualification_images` 字段

## 使用流程

### 管理员操作流程
1. 登录管理后台
2. 进入"医生管理"页面
3. 点击"编辑"或"新增"医生
4. 在"专业信息"部分找到"资质图片"字段
5. 点击上传按钮，选择资质证书图片（最多9张）
6. 保存医生信息

### 用户查看流程
1. 打开小程序
2. 进入医生详情页面
3. 在"擅长领域"下方查看"医生资质"部分
4. 点击任意资质图片可放大预览
5. 左右滑动可查看所有资质图片

## 数据格式

### 前端提交格式（管理后台）
前端 `material-picker` 组件提交的数据格式：
```javascript
// 单张图片
["https://www.d.com/uploads/images/20260317/20260317111180ffc63266.png"]

// 多张图片
[
  "https://www.d.com/uploads/images/20260317/image1.png",
  "https://www.d.com/uploads/images/20260317/image2.png",
  "https://www.d.com/uploads/images/20260317/image3.png"
]
```

### 后端存储格式
后端将数组转换为JSON字符串存储在数据库中：
```json
["https://www.d.com/uploads/images/20260317/20260317111180ffc63266.png"]
```

**转换代码**：
```php
if (is_array($params['qualification_images'])) {
    $qualificationImages = json_encode($params['qualification_images'], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
}
```

### API返回格式

#### 管理后台详情接口返回
```json
{
  "code": 1,
  "msg": "success",
  "data": {
    "id": 1,
    "name": "李医生",
    "qualification_images": [
      "https://www.d.com/uploads/images/20260317/image1.png",
      "https://www.d.com/uploads/images/20260317/image2.png"
    ],
    // ... 其他字段
  }
}
```
注意：管理后台返回的是数组格式，方便 `material-picker` 组件直接使用

#### 小程序端详情接口返回
```json
{
  "code": 1,
  "msg": "success",
  "data": {
    "id": 1,
    "name": "李医生",
    "qualification_images": "[\"https://www.d.com/uploads/images/20260317/image1.png\",\"https://www.d.com/uploads/images/20260317/image2.png\"]",
    // ... 其他字段
  }
}
```
注意：小程序端返回的是JSON字符串格式，需要前端解析

### 小程序端解析
小程序端需要将JSON字符串解析为数组：
```javascript
const qualificationImages = computed(() => {
  if (!doctor.value?.qualification_images) return []
  try {
    const images = typeof doctor.value.qualification_images === 'string' 
      ? JSON.parse(doctor.value.qualification_images) 
      : doctor.value.qualification_images
    return Array.isArray(images) ? images : []
  } catch (e) {
    console.error('解析资质图片失败:', e)
    return []
  }
})
```

## 注意事项

1. **图片数量限制**: 最多支持上传9张资质图片
2. **图片格式**: 建议使用 jpg、jpeg、png 格式
3. **图片尺寸**: 建议尺寸为 800*600px，以保证清晰度
4. **存储格式**: 后端以JSON数组格式存储，前端需要解析
5. **容错处理**: 前端已添加JSON解析失败的容错处理
6. **显示条件**: 只有当医生有资质图片时才显示"医生资质"区域
7. **预览功能**: 使用uni.previewImage实现图片预览和滑动查看

## 扩展建议

1. **图片压缩**: 可以在上传时对图片进行压缩，减少存储空间
2. **水印添加**: 可以为资质图片添加水印，防止盗用
3. **审核机制**: 可以添加资质图片审核功能，确保真实性
4. **过期提醒**: 可以为资质证书添加有效期，到期前提醒更新
5. **分类管理**: 可以将资质图片分类（如执业证书、荣誉证书等）