38 病情描述表单_!form.value.illnessdesc || form.value.consultflag -CSDN博客

本文详细介绍了如何在医疗咨询应用中构建病情描述表单，包括路由配置、表单结构、图片上传组件的使用、双向数据绑定、图片上传逻辑、保存数据功能及回显用户数据的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

病情描述表单

1 病情描述表单

在这里插入图片描述

实现：路由配置，了解组件以及页面的基础布局（医生提示，描述，症状时间，是否已问诊）

1）路由

    {
   
      path: '/consult/illness',
      component: () => import('@/views/consult/ConsultIllness.vue'),
      meta: {
    title: '病情描述' }
    },

2）准备病情描述类型和表单数据

consult.d.ts

// 病情描述全部必填
export type ConsultIllness = Pick<
  PartialConsult,
  'illnessDesc' | 'illnessTime' | 'consultFlag' | 'pictures'
>

Consult/ConsultIllness.vue

import type {
    ConsultIllness } from '@/types/consult'
import {
    ref } from 'vue'

// 表单变量
const form = ref<ConsultIllness>({
   
  illnessDesc: '',
  illnessTime: undefined,
  consultFlag: undefined,
  pictures: []
})

    <!-- 表单 -->
    <div class="illness-form">
      <van-field
        type="textarea"
        rows="3"
        placeholder="请详细描述您的病情，病情描述不能为空"
+       v-model="form.illnessDesc"
      ></van-field>
      <div class="item">
        <p>本次患病多久了？</p>
        <cp-radio-btn :options="timeOptions"
+        v-model="form.illnessTime" />
      </div>
      <div class="item">
        <p>此次病情是否去医院问诊过？</p>
        <cp-radio-btn :options="flagOptions"
+        v-model="form.consultFlag" />
      </div>
    </div>

2 病情描述-图片上传-组件{#illness-img}

实现：使用 van-upload 组件，进行样式和功能配置

步骤：

配置文字和图标
配置最多数量和最大体积
支持双向数据绑定，支持选择图片后触发函数，支持点击删除事件函数

代码：

1）配置文字和图标

        <van-uploader
+          upload-icon="photo-o"
+          upload-te