1621 lines
47 KiB
Vue
1621 lines
47 KiB
Vue
<template>
|
||
<div class="medical-form-page">
|
||
<div class="center-container">
|
||
<form class="medical-form" @submit.prevent="handleSubmit">
|
||
<!-- 标题区域 -->
|
||
<div class="form-header">
|
||
<h1 class="form-title">病案申请</h1>
|
||
<p class="form-desc">请填写以下信息，我们将尽快为您处理</p>
|
||
</div>
|
||
|
||
<!-- 步骤条 -->
|
||
<div class="steps-container">
|
||
<div class="step-line"></div>
|
||
<div v-for="(step, index) in steps" :key="index" class="step-item" :class="{
|
||
'active': currentStep === index,
|
||
'completed': currentStep > index
|
||
}">
|
||
<div class="step-number">{{ completedStepNumbers[index] }}</div>
|
||
<div class="step-name">{{ step.name }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤内容区域 -->
|
||
<div class="step-content">
|
||
<!-- 步骤1：选择办理类型及领取方式 -->
|
||
<div v-if="currentStep === 0" class="step-panel">
|
||
<div class="form-section handling-type-section">
|
||
<h2 class="section-title">办理类型</h2>
|
||
<div class="handling-type-selector">
|
||
<label class="handling-option">
|
||
<input type="radio" name="handlingType" value="1" v-model="handlingType" class="handling-radio">
|
||
<span class="handling-text">本人办理</span>
|
||
</label>
|
||
<label class="handling-option">
|
||
<input type="radio" name="handlingType" value="2" v-model="handlingType" class="handling-radio">
|
||
<span class="handling-text">他人代办</span>
|
||
</label>
|
||
</div>
|
||
<span class="error-text" v-if="errors.handlingType">{{ errors.handlingType }}</span>
|
||
</div>
|
||
|
||
<div class="form-section delivery-type-section">
|
||
<h2 class="section-title">领取方式</h2>
|
||
<div class="delivery-type-selector">
|
||
<label class="delivery-option">
|
||
<input type="radio" name="deliveryType" value="1" v-model="deliveryType" class="delivery-radio">
|
||
<span class="delivery-text">到场自取</span>
|
||
</label>
|
||
<label class="delivery-option">
|
||
<input type="radio" name="deliveryType" value="2" v-model="deliveryType" class="delivery-radio">
|
||
<span class="delivery-text">快递邮寄</span>
|
||
</label>
|
||
</div>
|
||
<span class="error-text" v-if="errors.deliveryType">{{ errors.deliveryType }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤2：患者信息 -->
|
||
<div v-if="currentStep === 1" class="step-panel">
|
||
<div class="form-section">
|
||
<h2 class="section-title">患者信息</h2>
|
||
|
||
<div class="form-fields">
|
||
<div class="form-group">
|
||
<label for="patientName">病人姓名 <span class="required">*</span></label>
|
||
<input type="text" id="patientName" v-model="formData.patientName" placeholder="请输入病人姓名"
|
||
class="form-input" autocomplete="name" @input="syncRecipientName">
|
||
<span class="error-text" v-if="errors.patientName">{{ errors.patientName }}</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="patientId">就诊人卡号 <span class="required">*</span></label>
|
||
<input type="text" id="patientId" v-model="formData.patientId" placeholder="请输入就诊人卡号"
|
||
class="form-input">
|
||
<span class="error-text" v-if="errors.patientId">{{ errors.patientId }}</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>就诊医院</label>
|
||
<div class="fixed-value">武警宁夏总队医院</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="phoneNumber">手机号码 <span class="required">*</span></label>
|
||
<input type="tel" id="phoneNumber" v-model="formData.phone" placeholder="请输入手机号码" maxlength="11"
|
||
class="form-input" autocomplete="tel">
|
||
<span class="error-text" v-if="errors.phone">{{ errors.phone }}</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="idNumber">身份证号 <span class="required">*</span></label>
|
||
<input type="text" id="idNumber" v-model="formData.idNumber" placeholder="请输入身份证号码" maxlength="18"
|
||
class="form-input">
|
||
<span class="error-text" v-if="errors.idNumber">{{ errors.idNumber }}</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="hospitalNumber">住院号 <span class="required">*</span></label>
|
||
<input type="text" id="hospitalNumber" v-model="formData.hospitalNumber" placeholder="请输入住院号"
|
||
class="form-input">
|
||
<span class="error-text" v-if="errors.hospitalNumber">{{ errors.hospitalNumber }}</span>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group date-group">
|
||
<label>入院日期 <span class="required">*</span></label>
|
||
<div class="date-picker-wrapper">
|
||
<input type="text" v-model="formData.admissionDate" placeholder="选择入院日期"
|
||
class="form-input date-display" readonly @click="showAdmissionPicker = true">
|
||
<van-popup v-model="showAdmissionPicker" position="bottom">
|
||
<van-datetime-picker :value="admissionDate" type="date" title="选择入院日期" :min-date="minDate"
|
||
:max-date="new Date()" @confirm="handleAdmissionConfirm"
|
||
@cancel="showAdmissionPicker = false" />
|
||
</van-popup>
|
||
</div>
|
||
<span class="error-text" v-if="errors.admissionDate">{{ errors.admissionDate }}</span>
|
||
</div>
|
||
|
||
<div class="form-group date-group">
|
||
<label>出院日期 <span class="required">*</span></label>
|
||
<div class="date-picker-wrapper">
|
||
<input type="text" v-model="formData.dischargeDate" placeholder="选择出院日期"
|
||
class="form-input date-display" readonly
|
||
@click="formData.admissionDate && (showDischargePicker = true)"
|
||
:disabled="!formData.admissionDate">
|
||
<van-popup v-model="showDischargePicker" position="bottom">
|
||
<van-datetime-picker :value="dischargeDate" type="date" title="选择出院日期"
|
||
:min-date="getMinDischargeDate()" :max-date="new Date()" @confirm="handleDischargeConfirm"
|
||
@cancel="showDischargePicker = false" />
|
||
</van-popup>
|
||
</div>
|
||
<span class="error-text" v-if="errors.dischargeDate">{{ errors.dischargeDate }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤3：代办人信息 -->
|
||
<div v-if="currentStep === 2" class="step-panel">
|
||
<div class="form-section" v-if="handlingType === '2'">
|
||
<h2 class="section-title">代办人信息</h2>
|
||
|
||
<div class="form-fields">
|
||
<div class="form-group">
|
||
<label for="recipientName">代办人姓名 <span class="required">*</span></label>
|
||
<input type="text" id="recipientName" v-model="formData.recipientName" placeholder="请输入代办人姓名"
|
||
class="form-input" autocomplete="name">
|
||
<span class="error-text" v-if="errors.recipientName">{{ errors.recipientName }}</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="recipientPhone">代办人联系电话 <span class="required">*</span></label>
|
||
<input type="tel" id="recipientPhone" v-model="formData.recipientPhone" placeholder="请输入代办人联系电话"
|
||
maxlength="11" class="form-input" autocomplete="tel">
|
||
<span class="error-text" v-if="errors.recipientPhone">{{ errors.recipientPhone }}</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="recipientIdNumber">代办人身份证号 <span class="required">*</span></label>
|
||
<input type="text" id="recipientIdNumber" v-model="formData.recipientIdNumber"
|
||
placeholder="请输入代办人身份证号码" maxlength="18" class="form-input">
|
||
<span class="error-text" v-if="errors.recipientIdNumber">{{ errors.recipientIdNumber }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="self-handling-step3">
|
||
<p>您选择的是本人办理，无需填写代办人信息</p>
|
||
<p>点击下一步继续上传证件</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤4：证件上传及确认 -->
|
||
<div v-if="currentStep === 3" class="step-panel">
|
||
<div class="form-section">
|
||
<h2 class="section-title">证件上传</h2>
|
||
|
||
<div class="upload-section">
|
||
<p class="upload-desc">
|
||
{{ handlingType === '1' ? '请上传患者本人证件照片' : '请上传患者及代办人证件照片' }}
|
||
</p>
|
||
|
||
<div class="upload-row">
|
||
<div class="upload-item">
|
||
<div class="upload-preview" :class="{ 'uploaded': formData.idFrontUrl }">
|
||
<img v-if="formData.idFrontUrl" :src="formData.idFrontUrl" alt="身份证正面" class="id-img">
|
||
<img v-else src="../assets/正面.png" alt="身份证正面示例" class="id-img">
|
||
</div>
|
||
<button type="button" class="upload-btn" @click="selectFile('idFront')">
|
||
上传患者身份证正面
|
||
</button>
|
||
<input type="file" ref="idFrontInput" accept="image/*" class="file-input"
|
||
@change="handleFileUpload('idFront', $event)">
|
||
</div>
|
||
|
||
<div class="upload-item">
|
||
<div class="upload-preview" :class="{ 'uploaded': formData.idBackUrl }">
|
||
<img v-if="formData.idBackUrl" :src="formData.idBackUrl" alt="身份证反面" class="id-img">
|
||
<img v-else src="../assets/反面.png" alt="身份证反面示例" class="id-img">
|
||
</div>
|
||
<button type="button" class="upload-btn" @click="selectFile('idBack')">
|
||
上传患者身份证反面
|
||
</button>
|
||
<input type="file" ref="idBackInput" accept="image/*" class="file-input"
|
||
@change="handleFileUpload('idBack', $event)">
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="handlingType === '2'" class="upload-row">
|
||
<div class="upload-item">
|
||
<div class="upload-preview" :class="{ 'uploaded': formData.recipientIdFrontUrl }">
|
||
<img v-if="formData.recipientIdFrontUrl" :src="formData.recipientIdFrontUrl" alt="代办人身份证正面"
|
||
class="id-img">
|
||
<img v-else src="../assets/正面.png" alt="代办人身份证正面示例" class="id-img">
|
||
</div>
|
||
<button type="button" class="upload-btn" @click="selectFile('recipientIdFront')">
|
||
上传代办人身份证正面
|
||
</button>
|
||
<input type="file" ref="recipientIdFrontInput" accept="image/*" class="file-input"
|
||
@change="handleFileUpload('recipientIdFront', $event)">
|
||
</div>
|
||
|
||
<div class="upload-item">
|
||
<div class="upload-preview" :class="{ 'uploaded': formData.recipientIdBackUrl }">
|
||
<img v-if="formData.recipientIdBackUrl" :src="formData.recipientIdBackUrl" alt="代办人身份证反面"
|
||
class="id-img">
|
||
<img v-else src="../assets/反面.png" alt="代办人身份证反面示例" class="id-img">
|
||
</div>
|
||
<button type="button" class="upload-btn" @click="selectFile('recipientIdBack')">
|
||
上传代办人身份证反面
|
||
</button>
|
||
<input type="file" ref="recipientIdBackInput" accept="image/*" class="file-input"
|
||
@change="handleFileUpload('recipientIdBack', $event)">
|
||
</div>
|
||
<div class="upload-item">
|
||
<div class="upload-preview" :class="{ 'uploaded': formData.powerOfAttorneyUrl }">
|
||
<img v-if="formData.powerOfAttorneyUrl" :src="formData.powerOfAttorneyUrl" alt="授权委托书"
|
||
class="id-img">
|
||
<img v-else src="../assets/示例书.png" alt="授权委托书示例" class="id-img">
|
||
</div>
|
||
<button type="button" class="upload-btn" @click="selectFile('powerOfAttorney')">
|
||
上传病案复印授权委托书
|
||
</button>
|
||
<input type="file" ref="powerOfAttorneyInput" accept="image/*" class="file-input"
|
||
@change="handleFileUpload('powerOfAttorney', $event)">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="upload-notes">
|
||
<p>1、支持上传身份证、护照、军官证、户口本等有效证件。</p>
|
||
<p>2、请上传清晰可见的证件，并确保证件内信息完整。</p>
|
||
<p v-if="handlingType === '2'">3、他人代办时需同时上传患者及代办人双方证件。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="agreement-section">
|
||
<div class="agreement-check">
|
||
<div class="checkbox" :class="{ checked: hasAgreed }" @click="if (!hasAgreed) showAgreement = true">
|
||
<span v-if="hasAgreed">✓</span>
|
||
</div>
|
||
<p>我已阅读并同意<a href="javascript:;" @click="showAgreement = true">《病案申请须知》</a></p>
|
||
</div>
|
||
<span class="error-text" v-if="errors.agreement">{{ errors.agreement }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤导航按钮 -->
|
||
<div class="step-navigation">
|
||
<button type="button" class="nav-btn prev-btn" @click="prevStep" :disabled="currentStep === 0">
|
||
上一步
|
||
</button>
|
||
|
||
<button type="button" class="nav-btn next-btn" @click="nextStep" :disabled="currentStep === totalSteps - 1">
|
||
下一步
|
||
</button>
|
||
|
||
<button type="submit" class="submit-btn" v-if="currentStep === totalSteps - 1" :disabled="!hasAgreed">
|
||
确认提交
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 信息确认弹窗 -->
|
||
<div class="modal-backdrop" v-if="showConfirmModal">
|
||
<div class="confirm-modal">
|
||
<h3 class="modal-title">确认申请信息</h3>
|
||
<div class="confirm-details">
|
||
<div class="detail-item">
|
||
<span class="detail-label">办理类型：</span>
|
||
<span class="detail-value">{{ handlingType === '1' ? '本人办理' : '他人代办' }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">领取方式：</span>
|
||
<span class="detail-value">{{ deliveryType === '1' ? '到场自取' : '快递邮寄' }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">打印份数：</span>
|
||
<span class="detail-value">{{ formData.copies }}份</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">病人姓名：</span>
|
||
<span class="detail-value">{{ formData.patientName }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">就诊人卡号：</span>
|
||
<span class="detail-value">{{ formData.patientId }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">就诊医院：</span>
|
||
<span class="detail-value">武警宁夏总队医院</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">手机号码：</span>
|
||
<span class="detail-value">{{ formData.phone }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">身份证号：</span>
|
||
<span class="detail-value">{{ formData.idNumber }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">住院号：</span>
|
||
<span class="detail-value">{{ formData.hospitalNumber }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">入院日期：</span>
|
||
<span class="detail-value">{{ formData.admissionDate }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">出院日期：</span>
|
||
<span class="detail-value">{{ formData.dischargeDate }}</span>
|
||
</div>
|
||
|
||
<template v-if="handlingType === '2'">
|
||
<div class="detail-item">
|
||
<span class="detail-label">代办人姓名：</span>
|
||
<span class="detail-value">{{ formData.recipientName }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">代办人电话：</span>
|
||
<span class="detail-value">{{ formData.recipientPhone }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">代办人身份证号：</span>
|
||
<span class="detail-value">{{ formData.recipientIdNumber }}</span>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="confirm-buttons">
|
||
<button class="cancel-btn" @click="showConfirmModal = false">取消</button>
|
||
<button class="confirm-btn" @click="submitConfirmed" :disabled="isSubmitting">确认提交</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 病案申请须知弹窗 -->
|
||
<div class="modal-backdrop" v-if="showAgreement">
|
||
<div class="agreement-modal">
|
||
<h3 class="modal-title">病案申请须知</h3>
|
||
<div class="agreement-content">
|
||
<div class="notice-content">
|
||
<p>根据卫健委颁发的《医疗机构病历管理规定》，在申请病案复印前您需注意以下事项：</p>
|
||
<ol>
|
||
<li>1、申请人必须为患者本人或被委托代理人；</li>
|
||
<li>2、申请人为患者本人的需要提供患者身份证明材料；申请人为被委托代理人的需要提供患者身份证明材料、申请人身份证明材料及委托代理书；</li>
|
||
<li>3、公安、司法、保险等机构需到医院现场申请。</li>
|
||
<li>4、死亡患者只支持现场申请。</li>
|
||
</ol>
|
||
<p><strong>委托代理书示例：</strong></p>
|
||
<img src="../assets/示例书.png" alt="病案复印授权委托书示例"
|
||
style="max-width: 100%; border: 1px solid #ddd; border-radius: 0.05rem; margin: 0.2rem 0;">
|
||
</div>
|
||
</div>
|
||
<div class="agreement-footer">
|
||
<button class="agree-btn" @click="agreeAgreement">我已阅读并同意</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { apiBayj } from "@/request/api.js";
|
||
import { Toast, DatetimePicker, Popup } from "vant";
|
||
|
||
export default {
|
||
components: {
|
||
[DatetimePicker.name]: DatetimePicker,
|
||
[Popup.name]: Popup
|
||
},
|
||
mounted() {
|
||
let card = JSON.parse(sessionStorage.getItem("card"))
|
||
console.log("card:",card)
|
||
// 将card对象的值赋给表单字段作为默认值，允许用户自行修改
|
||
if (card) {
|
||
this.formData.patientName = card.name || '';
|
||
this.formData.patientId = card.patientId || '';
|
||
this.formData.idNumber = card.idNo || '';
|
||
this.formData.phone = card.phone || '';
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
steps: [
|
||
{ name: '选择办理类型及领取方式' },
|
||
{ name: '填写患者信息' },
|
||
{ name: '填写代办人信息' },
|
||
{ name: '上传证件及确认' }
|
||
],
|
||
currentStep: 0,
|
||
card: {},
|
||
handlingType: '',
|
||
deliveryType: '',
|
||
formData: {
|
||
patientName: '',
|
||
patientId: '', // 新增就诊人卡号字段
|
||
phone: '',
|
||
idNumber: '',
|
||
hospitalNumber: '',
|
||
admissionDate: '',
|
||
dischargeDate: '',
|
||
recipientName: '',
|
||
recipientPhone: '',
|
||
recipientIdNumber: '',
|
||
copies: 1, // 打印份数，默认1份
|
||
idFrontUrl: '',
|
||
idBackUrl: '',
|
||
recipientIdFrontUrl: '',
|
||
recipientIdBackUrl: '',
|
||
powerOfAttorneyUrl: '',
|
||
idFrontFile: null,
|
||
idBackFile: null,
|
||
recipientIdFrontFile: null,
|
||
recipientIdBackFile: null,
|
||
powerOfAttorneyFile: null,
|
||
},
|
||
errors: {},
|
||
showConfirmModal: false,
|
||
showAgreement: false,
|
||
hasAgreed: false,
|
||
isSubmitting: false, // 提交状态标记
|
||
// 日期选择器相关
|
||
showAdmissionPicker: false,
|
||
showDischargePicker: false,
|
||
admissionDate: new Date(),
|
||
dischargeDate: new Date(),
|
||
minDate: new Date(1999, 0, 1) // 最小日期设为1900年1月1日
|
||
};
|
||
},
|
||
computed: {
|
||
totalSteps() {
|
||
return this.steps.length;
|
||
},
|
||
completedStepNumbers() {
|
||
return this.steps.map((_, index) => {
|
||
if (this.currentStep > index) {
|
||
return '✓';
|
||
} else {
|
||
return index + 1;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取出院日期的最小值
|
||
getMinDischargeDate() {
|
||
if (this.formData.admissionDate) {
|
||
return new Date(this.formData.admissionDate);
|
||
}
|
||
return this.minDate;
|
||
},
|
||
syncRecipientName() {
|
||
if (this.handlingType === '1') {
|
||
this.formData.recipientName = this.formData.patientName;
|
||
}
|
||
},
|
||
|
||
// 处理入院日期确认
|
||
handleAdmissionConfirm(date) {
|
||
this.showAdmissionPicker = false;
|
||
// 确保 date 是有效日期对象
|
||
if (date instanceof Date && !isNaN(date.getTime())) {
|
||
this.admissionDate = date;
|
||
this.formData.admissionDate = this.formatDate(date);
|
||
|
||
// 如果出院日期早于入院日期，清空出院日期
|
||
if (this.formData.dischargeDate) {
|
||
const discharge = new Date(this.formData.dischargeDate);
|
||
if (discharge < date) {
|
||
this.formData.dischargeDate = '';
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
// 处理出院日期确认
|
||
handleDischargeConfirm(date) {
|
||
this.showDischargePicker = false;
|
||
// 确保 date 是有效日期对象
|
||
if (date instanceof Date && !isNaN(date.getTime())) {
|
||
this.dischargeDate = date;
|
||
this.formData.dischargeDate = this.formatDate(date);
|
||
}
|
||
},
|
||
|
||
// 格式化日期为YYYY-MM-DD
|
||
formatDate(date) {
|
||
if (!(date instanceof Date) || isNaN(date.getTime())) {
|
||
return '';
|
||
}
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
,
|
||
|
||
selectFile(type) {
|
||
if (type === 'idFront') {
|
||
this.$refs.idFrontInput.click();
|
||
} else if (type === 'idBack') {
|
||
this.$refs.idBackInput.click();
|
||
} else if (type === 'recipientIdFront') {
|
||
this.$refs.recipientIdFrontInput.click();
|
||
} else if (type === 'recipientIdBack') {
|
||
this.$refs.recipientIdBackInput.click();
|
||
} else if (type === 'powerOfAttorney') {
|
||
this.$refs.powerOfAttorneyInput.click();
|
||
}
|
||
},
|
||
|
||
handleFileUpload(type, e) {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
|
||
if (!file.type.startsWith('image/')) {
|
||
Toast.fail('请上传图片文件');
|
||
return;
|
||
}
|
||
|
||
this.compressImage(file).then(compressedFile => {
|
||
if (compressedFile.size > 10 * 1024 * 1024) {
|
||
Toast.fail('图片大小不能超过10MB');
|
||
return;
|
||
}
|
||
|
||
if (type === 'idFront') {
|
||
this.formData.idFrontFile = compressedFile;
|
||
} else if (type === 'idBack') {
|
||
this.formData.idBackFile = compressedFile;
|
||
} else if (type === 'recipientIdFront') {
|
||
this.formData.recipientIdFrontFile = compressedFile;
|
||
} else if (type === 'recipientIdBack') {
|
||
this.formData.recipientIdBackFile = compressedFile;
|
||
} else if (type === 'powerOfAttorney') {
|
||
this.formData.powerOfAttorneyFile = compressedFile;
|
||
}
|
||
|
||
const reader = new FileReader();
|
||
reader.onload = (event) => {
|
||
if (type === 'idFront') {
|
||
this.formData.idFrontUrl = event.target.result;
|
||
} else if (type === 'idBack') {
|
||
this.formData.idBackUrl = event.target.result;
|
||
} else if (type === 'recipientIdFront') {
|
||
this.formData.recipientIdFrontUrl = event.target.result;
|
||
} else if (type === 'recipientIdBack') {
|
||
this.formData.recipientIdBackUrl = event.target.result;
|
||
} else if (type === 'powerOfAttorney') {
|
||
this.formData.powerOfAttorneyUrl = event.target.result;
|
||
}
|
||
};
|
||
reader.readAsDataURL(compressedFile);
|
||
});
|
||
},
|
||
|
||
compressImage(file) {
|
||
return new Promise((resolve) => {
|
||
if (file.size < 2 * 1024 * 1024) {
|
||
resolve(file);
|
||
return;
|
||
}
|
||
|
||
const canvas = document.createElement('canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
const img = new Image();
|
||
|
||
img.onload = function () {
|
||
const maxSize = 1200;
|
||
let width = img.width;
|
||
let height = img.height;
|
||
|
||
if (width > height) {
|
||
if (width > maxSize) {
|
||
height = (height * maxSize) / width;
|
||
width = maxSize;
|
||
}
|
||
} else {
|
||
if (height > maxSize) {
|
||
width = (width * maxSize) / height;
|
||
height = maxSize;
|
||
}
|
||
}
|
||
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
|
||
ctx.drawImage(img, 0, 0, width, height);
|
||
|
||
canvas.toBlob((blob) => {
|
||
const compressedFile = new File([blob], file.name, {
|
||
type: 'image/jpeg',
|
||
lastModified: Date.now()
|
||
});
|
||
resolve(compressedFile);
|
||
}, 'image/jpeg', 0.7);
|
||
};
|
||
|
||
img.src = URL.createObjectURL(file);
|
||
});
|
||
},
|
||
|
||
validateStep(step) {
|
||
const errors = {};
|
||
|
||
switch (step) {
|
||
case 0:
|
||
if (!this.handlingType) {
|
||
errors.handlingType = '请选择办理类型';
|
||
}
|
||
if (!this.deliveryType) {
|
||
errors.deliveryType = '请选择领取方式';
|
||
}
|
||
if (!this.formData.copies) {
|
||
errors.copies = '请选择打印份数';
|
||
}
|
||
break;
|
||
|
||
case 1:
|
||
if (!this.formData.patientName.trim()) {
|
||
errors.patientName = '请输入病人姓名';
|
||
}
|
||
|
||
// 新增就诊人卡号验证
|
||
if (!this.formData.patientId.trim()) {
|
||
errors.patientId = '请输入就诊人卡号';
|
||
}
|
||
|
||
if (!this.formData.phone.trim()) {
|
||
errors.phone = '请输入联系电话';
|
||
} else if (!/^1[3-9]\d{9}$/.test(this.formData.phone.trim())) {
|
||
errors.phone = '请输入有效的11位手机号码（支持13-19开头）';
|
||
}
|
||
|
||
if (!this.formData.idNumber.trim()) {
|
||
errors.idNumber = '请输入身份证号';
|
||
} else if (!this.validateIdCard(this.formData.idNumber.trim())) {
|
||
errors.idNumber = '请输入有效的18位身份证号码';
|
||
}
|
||
|
||
if (!this.formData.hospitalNumber.trim()) {
|
||
errors.hospitalNumber = '请输入住院号';
|
||
}
|
||
|
||
if (!this.formData.admissionDate) {
|
||
errors.admissionDate = '请选择入院日期';
|
||
}
|
||
|
||
if (!this.formData.dischargeDate) {
|
||
errors.dischargeDate = '请选择出院日期';
|
||
} else if (this.formData.admissionDate && new Date(this.formData.dischargeDate) < new Date(this.formData.admissionDate)) {
|
||
errors.dischargeDate = '出院日期不能早于入院日期';
|
||
}
|
||
break;
|
||
|
||
case 2:
|
||
if (this.handlingType === '2') {
|
||
if (!this.formData.recipientName.trim()) {
|
||
errors.recipientName = '请输入代办人姓名';
|
||
}
|
||
|
||
if (!this.formData.recipientPhone.trim()) {
|
||
errors.recipientPhone = '请输入代办人联系电话';
|
||
} else if (!/^1[3-9]\d{9}$/.test(this.formData.recipientPhone.trim())) {
|
||
errors.recipientPhone = '请输入有效的11位手机号码（支持13-19开头）';
|
||
}
|
||
|
||
if (!this.formData.recipientIdNumber.trim()) {
|
||
errors.recipientIdNumber = '请输入代办人身份证号';
|
||
} else if (!this.validateIdCard(this.formData.recipientIdNumber.trim())) {
|
||
errors.recipientIdNumber = '请输入有效的18位身份证号码';
|
||
}
|
||
}
|
||
break;
|
||
|
||
case 3:
|
||
if (!this.formData.idFrontFile) {
|
||
errors.idFront = '请上传患者身份证正面照片';
|
||
}
|
||
if (!this.formData.idBackFile) {
|
||
errors.idBack = '请上传患者身份证反面照片';
|
||
}
|
||
if (this.handlingType === '2' && !this.formData.powerOfAttorneyFile) {
|
||
errors.powerOfAttorney = '请上传病案复印授权委托书';
|
||
}
|
||
if (!this.hasAgreed) {
|
||
errors.agreement = '请阅读并同意病案申请须知';
|
||
}
|
||
break;
|
||
}
|
||
|
||
this.errors = errors;
|
||
return Object.keys(errors).length === 0;
|
||
},
|
||
|
||
validateIdCard(idCard) {
|
||
// 使用更严格的正则表达式验证身份证号码格式
|
||
const idCardRegex = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
|
||
if (!idCardRegex.test(idCard)) {
|
||
return false;
|
||
}
|
||
|
||
// 校验码验证
|
||
const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
|
||
const parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
|
||
let sum = 0;
|
||
let code = idCard.substring(17);
|
||
for (let i = 0; i < 17; i++) {
|
||
sum += parseInt(idCard[i], 10) * factor[i];
|
||
}
|
||
return parity[sum % 11].toUpperCase() === code.toUpperCase();
|
||
},
|
||
|
||
nextStep() {
|
||
if (this.validateStep(this.currentStep)) {
|
||
if (this.currentStep === 1 && this.handlingType === '1') {
|
||
this.syncRecipientName();
|
||
}
|
||
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
this.currentStep++;
|
||
} else {
|
||
if (this.currentStep === 3 && (this.errors.idFront || this.errors.idBack || this.errors.recipientIdFront || this.errors.recipientIdBack)) {
|
||
Toast.fail(this.handlingType === '2' ? '请上传完整的患者及代办人证件照片' : '请上传完整的身份证照片');
|
||
}
|
||
|
||
const firstError = Object.keys(this.errors)[0];
|
||
if (firstError) {
|
||
const elementIdMap = {
|
||
patientName: 'patientName',
|
||
patientId: 'patientId', // 新增就诊人卡号的元素ID映射
|
||
phone: 'phoneNumber',
|
||
idNumber: 'idNumber',
|
||
hospitalNumber: 'hospitalNumber',
|
||
admissionDate: 'admissionDate',
|
||
dischargeDate: 'dischargeDate',
|
||
recipientName: 'recipientName',
|
||
recipientPhone: 'recipientPhone',
|
||
recipientIdNumber: 'recipientIdNumber'
|
||
};
|
||
|
||
const elementId = elementIdMap[firstError];
|
||
if (elementId) {
|
||
document.getElementById(elementId)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
prevStep() {
|
||
this.errors = {};
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
this.currentStep--;
|
||
},
|
||
|
||
handleSubmit() {
|
||
if (this.validateStep(this.currentStep)) {
|
||
this.showConfirmModal = true;
|
||
}
|
||
},
|
||
|
||
submitConfirmed() {
|
||
// 防止重复点击（如果用户快速点击）
|
||
if (this.isSubmitting) return;
|
||
|
||
this.isSubmitting = true; // 标记为提交中，禁用按钮
|
||
this.showConfirmModal = false;
|
||
|
||
const formData = new FormData();
|
||
|
||
formData.append('patientName', this.formData.patientName);
|
||
formData.append('patientId', this.formData.patientId); // 新增就诊人卡号字段
|
||
formData.append('idNumber', this.formData.idNumber);
|
||
formData.append('phone', this.formData.phone);
|
||
formData.append('hosNumber', this.formData.hospitalNumber);
|
||
formData.append('inhosDate', this.formData.admissionDate);
|
||
formData.append('outhosDate', this.formData.dischargeDate);
|
||
formData.append('handleType', this.handlingType);
|
||
formData.append('deliveryType', this.deliveryType);
|
||
formData.append('reName', this.formData.recipientName || '');
|
||
formData.append('reId', this.formData.recipientIdNumber || '');
|
||
formData.append('rePhone', this.formData.recipientPhone || '');
|
||
formData.append('copies', this.formData.copies);
|
||
|
||
const userId = localStorage.getItem("userid");
|
||
const token = localStorage.getItem("token");
|
||
|
||
if (userId && userId !== 'null') {
|
||
formData.append("userId", String(userId));
|
||
}
|
||
if (token && token !== 'null') {
|
||
formData.append("token", token);
|
||
}
|
||
|
||
if (this.formData.idFrontFile) {
|
||
formData.append('cardFrontFile', this.formData.idFrontFile);
|
||
}
|
||
if (this.formData.idBackFile) {
|
||
formData.append('cardBackFile', this.formData.idBackFile);
|
||
}
|
||
if (this.formData.recipientIdFrontFile) {
|
||
formData.append('recordFrontFile', this.formData.recipientIdFrontFile);
|
||
}
|
||
if (this.formData.recipientIdBackFile) {
|
||
formData.append('recordBackFile', this.formData.recipientIdBackFile);
|
||
}
|
||
if (this.formData.powerOfAttorneyFile) {
|
||
formData.append('powerOfAttorneyFile', this.formData.powerOfAttorneyFile);
|
||
}
|
||
const loading = Toast.loading({
|
||
message: '提交中...', // 加载提示文字
|
||
duration: 0, // 0 表示不会自动关闭，需要手动清除
|
||
forbidClick: true, // 禁止背景点击（防止重复提交）
|
||
loadingType: 'spinner' // 加载图标样式（可选，默认是 circular）
|
||
});
|
||
apiBayj(formData).then(res => {
|
||
console.log('后台返回:', res);
|
||
// 关闭加载提示
|
||
loading.clear();
|
||
this.isSubmitting = false; // 恢复提交状态
|
||
if (res.code === 200) {
|
||
|
||
Toast.success('提交成功');
|
||
setTimeout(() => {
|
||
this.$router.push('/Bayj_wdsq');
|
||
}, 500);
|
||
this.resetForm();
|
||
} else {
|
||
Toast.fail(res.message || '提交失败，请重试');
|
||
}
|
||
}).catch(err => {
|
||
this.isSubmitting = false; // 恢复提交状态
|
||
// 关闭加载提示（错误情况也要关闭）
|
||
loading.clear();
|
||
console.error('申请提交失败：', err);
|
||
Toast.fail('网络异常，请检查网络后重试');
|
||
});
|
||
},
|
||
|
||
resetForm() {
|
||
this.currentStep = 0;
|
||
this.handlingType = '';
|
||
this.deliveryType = '';
|
||
this.hasAgreed = false;
|
||
this.formData = {
|
||
patientName: '',
|
||
patientId: '', // 新增就诊人卡号字段
|
||
phone: '',
|
||
idNumber: '',
|
||
hospitalNumber: '',
|
||
admissionDate: '',
|
||
dischargeDate: '',
|
||
recipientName: '',
|
||
recipientPhone: '',
|
||
recipientIdNumber: '',
|
||
copies: 1, // 打印份数，默认1份
|
||
idFrontFile: null,
|
||
idBackFile: null,
|
||
recipientIdFrontFile: null,
|
||
recipientIdBackFile: null,
|
||
powerOfAttorneyFile: null,
|
||
idFrontUrl: '',
|
||
idBackUrl: '',
|
||
recipientIdFrontUrl: '',
|
||
recipientIdBackUrl: '',
|
||
powerOfAttorneyUrl: '',
|
||
};
|
||
// 重置日期选择器
|
||
this.admissionDate = new Date();
|
||
this.dischargeDate = new Date();
|
||
this.showAdmissionPicker = false;
|
||
this.showDischargePicker = false;
|
||
},
|
||
|
||
agreeAgreement() {
|
||
this.showAgreement = false;
|
||
this.hasAgreed = true;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
|
||
}
|
||
|
||
.medical-form-page {
|
||
min-height: 100vh;
|
||
background-color: #f9f9f9;
|
||
color: #333;
|
||
padding: 0.4rem;
|
||
}
|
||
|
||
.center-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.medical-form {
|
||
width: 100%;
|
||
max-width: 950px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
padding: 0.6rem;
|
||
background-color: white;
|
||
border-radius: 0.1rem;
|
||
box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.form-header {
|
||
text-align: center;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
.form-title {
|
||
color: #333;
|
||
font-size: 0.42rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
.form-desc {
|
||
color: #666;
|
||
font-size: 0.36rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.steps-container {
|
||
display: flex;
|
||
position: relative;
|
||
margin: 0.5rem 0;
|
||
padding: 0 0.2rem;
|
||
}
|
||
|
||
.step-line {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
right: 0;
|
||
height: 0.02rem;
|
||
background-color: #e5e7eb;
|
||
transform: translateY(-50%);
|
||
z-index: 1;
|
||
}
|
||
|
||
.step-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.step-number {
|
||
width: 0.6rem;
|
||
height: 0.6rem;
|
||
border-radius: 50%;
|
||
background-color: #e5e7eb;
|
||
color: #9ca3af;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.36rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.15rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.step-name {
|
||
font-size: 0.34rem;
|
||
color: #9ca3af;
|
||
transition: all 0.3s ease;
|
||
text-align: center;
|
||
}
|
||
|
||
.step-item.active .step-number {
|
||
background-color: #4299e1;
|
||
color: white;
|
||
}
|
||
|
||
.step-item.active .step-name {
|
||
color: #4299e1;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.step-item.completed .step-number {
|
||
background-color: #4ade80;
|
||
color: white;
|
||
}
|
||
|
||
.step-item.completed .step-name {
|
||
color: #4ade80;
|
||
}
|
||
|
||
.step-content {
|
||
min-height: 3rem;
|
||
margin: 0.3rem 0;
|
||
}
|
||
|
||
.step-panel {
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(0.2rem);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.self-handling-step3 {
|
||
text-align: center;
|
||
padding: 1rem 0.5rem;
|
||
color: #666;
|
||
font-size: 0.38rem;
|
||
line-height: 1.8;
|
||
background-color: #f9f9f9;
|
||
border-radius: 0.05rem;
|
||
}
|
||
|
||
.step-navigation {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 0.5rem;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
.nav-btn {
|
||
padding: 0.25rem 0;
|
||
font-size: 0.38rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
border-radius: 0.05rem;
|
||
flex: 1;
|
||
}
|
||
|
||
.prev-btn {
|
||
background-color: #f5f5f5;
|
||
color: #555;
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
.prev-btn:disabled {
|
||
background-color: #f9f9f9;
|
||
color: #ccc;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.next-btn {
|
||
background-color: #4299e1;
|
||
color: white;
|
||
border: 1px solid #4299e1;
|
||
}
|
||
|
||
.next-btn:disabled {
|
||
background-color: #b3d4fc;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.form-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.3rem;
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
|
||
.section-title {
|
||
color: #333;
|
||
font-size: 0.4rem;
|
||
font-weight: 600;
|
||
padding-bottom: 0.2rem;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.form-fields {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
gap: 0.3rem;
|
||
width: 100%;
|
||
}
|
||
|
||
.date-group {
|
||
flex: 1;
|
||
}
|
||
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.15rem;
|
||
}
|
||
|
||
.form-group label {
|
||
color: #555;
|
||
font-size: 0.38rem;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.required {
|
||
color: #DC2626;
|
||
margin-left: 0.05rem;
|
||
font-size: 0.38rem;
|
||
}
|
||
|
||
.form-input {
|
||
padding: 0.25rem 0.3rem;
|
||
border: 1px solid #ddd;
|
||
border-radius: 0.05rem;
|
||
font-size: 0.38rem;
|
||
transition: border-color 0.2s;
|
||
width: 100%;
|
||
}
|
||
|
||
.form-input:focus {
|
||
outline: none;
|
||
border-color: #4299e1;
|
||
}
|
||
|
||
.error-text {
|
||
color: #EF4444;
|
||
font-size: 0.36rem;
|
||
min-height: 0.4rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.handling-type-section {
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
.handling-type-selector {
|
||
display: flex;
|
||
gap: 0.3rem;
|
||
margin-top: 0.2rem;
|
||
width: 100%;
|
||
}
|
||
|
||
.handling-option {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.15rem;
|
||
cursor: pointer;
|
||
flex: 1;
|
||
padding: 0.25rem 0.3rem;
|
||
border-radius: 0.05rem;
|
||
transition: all 0.2s;
|
||
border: 1px solid #ddd;
|
||
background-color: white;
|
||
}
|
||
|
||
.handling-option:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.handling-radio {
|
||
width: 0.32rem;
|
||
height: 0.32rem;
|
||
}
|
||
|
||
.handling-text {
|
||
font-size: 0.38rem;
|
||
color: #555;
|
||
}
|
||
|
||
.delivery-type-section {
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
.delivery-type-selector {
|
||
display: flex;
|
||
gap: 0.3rem;
|
||
margin-top: 0.2rem;
|
||
width: 100%;
|
||
}
|
||
|
||
.delivery-option {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.15rem;
|
||
cursor: pointer;
|
||
flex: 1;
|
||
padding: 0.25rem 0.3rem;
|
||
border-radius: 0.05rem;
|
||
transition: all 0.2s;
|
||
border: 1px solid #ddd;
|
||
background-color: white;
|
||
}
|
||
|
||
.delivery-option:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.delivery-radio {
|
||
width: 0.32rem;
|
||
height: 0.32rem;
|
||
}
|
||
|
||
.delivery-text {
|
||
font-size: 0.38rem;
|
||
color: #555;
|
||
}
|
||
|
||
.copies-options {
|
||
display: flex;
|
||
gap: 0.3rem;
|
||
margin-top: 0.2rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.copy-option {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.15rem;
|
||
cursor: pointer;
|
||
padding: 0.25rem 0.3rem;
|
||
border-radius: 0.05rem;
|
||
transition: all 0.2s;
|
||
border: 1px solid #ddd;
|
||
background-color: white;
|
||
}
|
||
|
||
.copy-option:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.copy-radio {
|
||
width: 0.32rem;
|
||
height: 0.32rem;
|
||
}
|
||
|
||
.copy-text {
|
||
font-size: 0.38rem;
|
||
color: #555;
|
||
}
|
||
|
||
.copy-option:has(.copy-radio:checked) {
|
||
border-color: #4299e1;
|
||
background-color: #f0f7ff;
|
||
}
|
||
|
||
.handling-option:has(.handling-radio:checked),
|
||
.delivery-option:has(.delivery-radio:checked) {
|
||
border-color: #4299e1;
|
||
background-color: #f0f7ff;
|
||
}
|
||
|
||
.fixed-value {
|
||
padding: 0.25rem 0.3rem;
|
||
border: 1px solid #ddd;
|
||
border-radius: 0.05rem;
|
||
font-size: 0.38rem;
|
||
background-color: #f9f9f9;
|
||
color: #333;
|
||
}
|
||
|
||
.upload-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
.upload-row {
|
||
display: flex;
|
||
gap: 0.3rem;
|
||
width: 100%;
|
||
margin: 0.3rem 0;
|
||
}
|
||
|
||
.upload-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
.upload-preview {
|
||
width: 100%;
|
||
height: 2.8rem;
|
||
border: 1px dashed #ddd;
|
||
border-radius: 0.05rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #f9f9f9;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.id-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
padding: 0.2rem;
|
||
}
|
||
|
||
.upload-preview.uploaded {
|
||
border-style: solid;
|
||
border-color: #ccc;
|
||
}
|
||
|
||
.upload-btn {
|
||
background-color: white;
|
||
color: #4299e1;
|
||
border: 1px solid #4299e1;
|
||
border-radius: 0.05rem;
|
||
padding: 0.15rem 0.25rem;
|
||
font-size: 0.32rem;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
width: 100%;
|
||
}
|
||
|
||
.upload-btn:hover {
|
||
background-color: #4299e1;
|
||
color: white;
|
||
}
|
||
|
||
.file-input {
|
||
display: none;
|
||
}
|
||
|
||
.upload-desc {
|
||
color: #555;
|
||
font-size: 0.38rem;
|
||
font-weight: 500;
|
||
margin-top: 0.2rem;
|
||
}
|
||
|
||
.upload-notes {
|
||
color: #666;
|
||
font-size: 0.36rem;
|
||
line-height: 1.6;
|
||
padding: 0.2rem;
|
||
background-color: #f9f9f9;
|
||
border-radius: 0.05rem;
|
||
border: 1px solid #eee;
|
||
margin-top: 0.2rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.upload-row {
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
.upload-preview {
|
||
height: 2.2rem;
|
||
}
|
||
}
|
||
|
||
.agreement-section {
|
||
margin: 0.3rem 0;
|
||
}
|
||
|
||
.agreement-check {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.15rem;
|
||
color: #555;
|
||
font-size: 0.36rem;
|
||
}
|
||
|
||
.checkbox {
|
||
width: 0.36rem;
|
||
height: 0.36rem;
|
||
border: 1px solid #ddd;
|
||
border-radius: 0.05rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.checkbox.checked {
|
||
background-color: #4299e1;
|
||
border-color: #4299e1;
|
||
color: white;
|
||
}
|
||
|
||
.agreement-check a {
|
||
color: #4299e1;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.agreement-check a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.submit-btn {
|
||
background-color: #4299e1;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 0.05rem;
|
||
padding: 0.25rem 0.4rem;
|
||
font-size: 0.4rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
width: 100%;
|
||
flex: 1;
|
||
}
|
||
|
||
.submit-btn:disabled {
|
||
background-color: #b3d4fc;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.submit-btn:not(:disabled):hover {
|
||
background-color: #3182ce;
|
||
}
|
||
|
||
.modal-backdrop {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
padding: 0.4rem;
|
||
}
|
||
|
||
.confirm-modal,
|
||
.agreement-modal {
|
||
background-color: white;
|
||
border-radius: 0.1rem;
|
||
width: 100%;
|
||
box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.agreement-modal {
|
||
max-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.modal-title {
|
||
color: #333;
|
||
font-size: 0.4rem;
|
||
font-weight: 600;
|
||
padding: 0.3rem 0.4rem;
|
||
border-bottom: 1px solid #eee;
|
||
text-align: center;
|
||
}
|
||
|
||
.confirm-details {
|
||
padding: 0.4rem;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.detail-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0.2rem 0;
|
||
border-bottom: 1px solid #eee;
|
||
font-size: 0.36rem;
|
||
}
|
||
|
||
.detail-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.detail-label {
|
||
color: #666;
|
||
flex: 0 0 35%;
|
||
text-align: left;
|
||
}
|
||
|
||
.detail-value {
|
||
color: #333;
|
||
flex: 0 0 65%;
|
||
text-align: right;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.confirm-buttons {
|
||
display: flex;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
.cancel-btn,
|
||
.confirm-btn {
|
||
padding: 0.25rem 0.4rem;
|
||
font-size: 0.38rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
border: none;
|
||
flex: 1;
|
||
}
|
||
|
||
.cancel-btn {
|
||
background-color: #f5f5f5;
|
||
color: #555;
|
||
border-right: 1px solid #eee;
|
||
}
|
||
|
||
.confirm-btn {
|
||
background-color: #4299e1;
|
||
color: white;
|
||
}
|
||
|
||
.agreement-content {
|
||
flex: 1;
|
||
padding: 0.4rem;
|
||
overflow-y: auto;
|
||
line-height: 1.6;
|
||
font-size: 0.38rem;
|
||
color: #555;
|
||
}
|
||
|
||
.agreement-footer {
|
||
padding: 0.3rem 0.4rem;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
.agree-btn {
|
||
background-color: #4299e1;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 0.05rem;
|
||
padding: 0.25rem 0.4rem;
|
||
font-size: 0.38rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
width: 100%;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.medical-form {
|
||
padding: 0.4rem;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.form-row {
|
||
flex-direction: column;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
.handling-type-selector,
|
||
.delivery-type-selector {
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
.detail-item {
|
||
flex-direction: column;
|
||
gap: 0.1rem;
|
||
}
|
||
|
||
.detail-label,
|
||
.detail-value {
|
||
flex: none;
|
||
width: 100%;
|
||
text-align: left;
|
||
}
|
||
|
||
.step-name {
|
||
font-size: 0.3rem;
|
||
}
|
||
}
|
||
|
||
.date-display {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.date-display:disabled {
|
||
background-color: #f9f9f9;
|
||
cursor: not-allowed;
|
||
color: #999;
|
||
}
|
||
|
||
</style>
|