更新

2026-03-20 13:56:40 +08:00
parent 7147c8e148
commit d765517b74
258 changed files with 2481 additions and 364 deletions
@@ -0,0 +1,362 @@
+# 医生资质图片功能说明
+
+## 功能概述
+为医生档案添加资质图片上传功能，支持上传多张资质证书、荣誉证书等图片，并在医生详情页面展示。
+
+## 实现内容
+
+### 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. **分类管理**: 可以将资质图片分类（如执业证书、荣誉证书等）