363 lines
10 KiB
Markdown
363 lines
10 KiB
Markdown
# 医生资质图片功能说明
|
||
|
||
## 功能概述
|
||
为医生档案添加资质图片上传功能，支持上传多张资质证书、荣誉证书等图片，并在医生详情页面展示。
|
||
|
||
## 实现内容
|
||
|
||
### 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. **分类管理**: 可以将资质图片分类（如执业证书、荣誉证书等）
|