ZYT/zyt

Fork 0

Files

T

Your Name d765517b74 更新

2026-03-20 13:56:40 +08:00

10 KiB

Raw Blame History

医生资质图片功能说明

功能概述

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

实现内容

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:

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):

// 处理资质图片：如果是数组则转为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):

// 处理资质图片：如果是数组则转为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):

$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());
    }
}

数据流转说明：

前端提交 → 数组格式 ["url1", "url2"]
后端接收 → 转换为JSON字符串存储到数据库
后端返回 → 将JSON字符串转换回数组格式
前端接收 → 数组格式，material-picker 组件可直接使用

2.2 医生详情接口

文件: server/app/api/logic/DoctorLogic.php

修改 getDoctorDetail 方法：

在查询字段中添加 qualification_images
在返回数据中包含 qualification_images 字段

$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

新增内容：

在"执业证书编号"字段后添加"资质图片"上传组件
使用 material-picker 组件，支持最多上传9张图片
在 formData 中添加 qualification_images 字段

代码示例：

<!-- 医生资质图片 -->
<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

新增内容：

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

代码示例：

<!-- 医生资质 -->
<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逻辑：

// 医生资质图片
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
  })
}

样式：

.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;
}

使用流程

管理员操作流程

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

用户查看流程

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

数据格式

前端提交格式（管理后台）

前端 material-picker 组件提交的数据格式：

// 单张图片
["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字符串存储在数据库中：

["https://www.d.com/uploads/images/20260317/20260317111180ffc63266.png"]

转换代码：

if (is_array($params['qualification_images'])) {
    $qualificationImages = json_encode($params['qualification_images'], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
}

API返回格式

管理后台详情接口返回

{
  "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 组件直接使用

小程序端详情接口返回

{
  "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字符串解析为数组：

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 []
  }
})

注意事项

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

扩展建议

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

10 KiB

Raw Blame History

医生资质图片功能说明

功能概述

实现内容

1. 数据库修改

2. 后端修改

2.1 管理员逻辑层

2.2 医生详情接口

3. 前端修改

3.1 管理后台 - 医生编辑页面

3.2 小程序端 - 医生详情页面

相关接口

管理后台接口

1. 添加医生

2. 编辑医生

3. 医生详情

小程序端接口

医生详情

使用流程

管理员操作流程

用户查看流程

数据格式

前端提交格式（管理后台）

后端存储格式

API返回格式

管理后台详情接口返回

小程序端详情接口返回

小程序端解析

注意事项

扩展建议

10 KiB Raw Blame History Unescape Escape

医生资质图片功能说明

功能概述

实现内容

1. 数据库修改

2. 后端修改

2.1 管理员逻辑层

2.2 医生详情接口

3. 前端修改

3.1 管理后台 - 医生编辑页面

3.2 小程序端 - 医生详情页面

相关接口

管理后台接口

1. 添加医生

2. 编辑医生

3. 医生详情

小程序端接口

医生详情

使用流程

管理员操作流程

用户查看流程

数据格式

前端提交格式（管理后台）

后端存储格式

API返回格式

管理后台详情接口返回

小程序端详情接口返回

小程序端解析

注意事项

扩展建议

10 KiB

Raw Blame History