417 lines
8.6 KiB
Vue
417 lines
8.6 KiB
Vue
<template>
|
|
<uni-popup ref="symptomPopup" type="bottom" :mask-click="false">
|
|
<view class="symptom-popup">
|
|
<view class="popup-header">
|
|
<text class="popup-title">请描述您的病情</text>
|
|
</view>
|
|
|
|
<view class="popup-content">
|
|
<textarea class="symptom-textarea" v-model="symptomDescription" placeholder="请描述您的病情..." :maxlength="200"
|
|
show-confirm-bar="false"></textarea>
|
|
|
|
<view class="section">
|
|
<view class="checkbox-row">
|
|
<text class="section-title">是否到线下医院就诊过</text>
|
|
<uni-data-checkbox class="checkbox-group" mode="tag" v-model="hasVisitedHospital" :localdata="yesNoOptions"
|
|
:multiple="false"></uni-data-checkbox>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 诊断选择 - 只有选择"是"才显示 -->
|
|
<view class="section" v-if="hasVisitedHospital === 'yes'">
|
|
<text class="section-title">诊断*</text>
|
|
<view class="diagnosis-container">
|
|
<!-- 已选择的疾病标签 -->
|
|
<view class="selected-diseases" v-if="selectedDiseases.length > 0">
|
|
<view v-for="(disease, index) in selectedDiseases" :key="`${index}-common`" class="tag-item tag-item-active"
|
|
@click="removeDiseaseTag(index)">
|
|
{{ disease }}
|
|
</view>
|
|
<!-- <uni-tag v-for="(disease, index) in selectedDiseases" :key="index" :text="disease" type="primary"
|
|
size="small" :circle="true" @click="removeDiseaseTag(index)"></uni-tag> -->
|
|
</view>
|
|
<!-- 添加疾病按钮 -->
|
|
<view class="add-disease-btn" @click="goToSelectDisease">
|
|
<view class="tag-item">+ 添加</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section">
|
|
<view class="upload-header">
|
|
<text class="section-title">上传资料</text>
|
|
<text class="upload-subtitle">病历、处方、检查检验报告等图片</text>
|
|
</view>
|
|
|
|
<view class="upload-actions">
|
|
<view class="upload-btn" @click="add()">
|
|
<uni-icons type="camera" size="24" color="#666"></uni-icons>
|
|
<text class="upload-text">添加照片</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 已选择的图片预览 -->
|
|
<view class="image-preview" v-if="images.length > 0">
|
|
<view v-for="(image, index) in images" :key="image" class="preview-item">
|
|
<image :src="image" class="preview-image" mode="aspectFill"></image>
|
|
<view class="remove-btn" @click="remove(index)">
|
|
<uni-icons type="close" size="16" color="white"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="popup-footer">
|
|
<button class="popup-btn cancel-btn" @click="closeSymptomPopup">取消</button>
|
|
<button class="popup-btn submit-btn" @click="submitSymptomDescription">提交</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import { submitOrderDescription } from '@/api/consult-order';
|
|
import { registerOnceEvent } from '@/hooks/useOnceEvent'
|
|
import useImageUpload from '@/hooks/useImageUpload'
|
|
import { set } from '@/utils/cache'
|
|
import { toast } from '@/utils/widget'
|
|
|
|
const emits = defineEmits(['close', 'submit'])
|
|
// 定义组件的props
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
orderId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
accountId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
isIMMode: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
// 定义组件的emit事件
|
|
|
|
// 响应式数据
|
|
const symptomPopup = ref(null)
|
|
const symptomDescription = ref('')
|
|
const loading = ref(false)
|
|
const { images, add, remove, uploadImages } = useImageUpload('order')
|
|
|
|
// 是否到线下医院就诊过
|
|
const hasVisitedHospital = ref('')
|
|
const yesNoOptions = ref([
|
|
{ value: 'yes', text: '是' },
|
|
{ value: 'no', text: '否' }
|
|
])
|
|
// 诊断选择
|
|
const selectedDiseases = ref([])
|
|
|
|
|
|
// 关闭病情描述弹窗
|
|
const closeSymptomPopup = () => {
|
|
emits('close')
|
|
}
|
|
|
|
|
|
// 跳转到疾病选择页面
|
|
const goToSelectDisease = () => {
|
|
const eventName = registerOnceEvent(changeDisease)
|
|
set('diseaseSelected', selectedDiseases.value)
|
|
// 将当前已选择的疾病数据传递到选择页面
|
|
uni.navigateTo({
|
|
url: `/pages-home/consultation/disease?eventName=${eventName}`
|
|
})
|
|
}
|
|
|
|
// 删除疾病标签
|
|
const removeDiseaseTag = (index) => {
|
|
selectedDiseases.value.splice(index, 1)
|
|
}
|
|
|
|
// 提交病情描述
|
|
const submitSymptomDescription = async () => {
|
|
if (loading.value) return;
|
|
loading.value = true;
|
|
if (!symptomDescription.value.trim() && images.value.length === 0) {
|
|
toast('请输入病情描述或上传图片')
|
|
loading.value = false;
|
|
return
|
|
}
|
|
if (images.value.length) {
|
|
const res = await uploadImages()
|
|
if (!res) {
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 构造要提交的数据
|
|
const descriptionData = {
|
|
description: symptomDescription.value.trim(),
|
|
hasVisitedHospital: hasVisitedHospital.value === 'yes',
|
|
diseases: selectedDiseases.value,
|
|
images: images.value
|
|
}
|
|
const res = await submitOrderDescription({
|
|
accountId: props.accountId,
|
|
orderId: props.orderId,
|
|
...descriptionData
|
|
})
|
|
if (res && res.success) {
|
|
toast(res.message);
|
|
closeSymptomPopup()
|
|
emits('submit', res.data)
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
function changeDisease(diseases) {
|
|
selectedDiseases.value = diseases
|
|
}
|
|
|
|
watch(() => props.visible, (n) => {
|
|
if (n) {
|
|
symptomPopup.value && symptomPopup.value.open()
|
|
} else {
|
|
symptomPopup.value && symptomPopup.value.close()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
/* 病情描述弹窗样式 */
|
|
.symptom-popup {
|
|
background-color: white;
|
|
border-top-left-radius: 16rpx;
|
|
border-top-right-radius: 16rpx;
|
|
max-height: 75vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 999; // 确保弹窗在最上层，避免被 ConsultationBar 遮挡
|
|
}
|
|
|
|
.popup-header {
|
|
padding: 20rpx 20rpx 0;
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: $font-size-text;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.popup-content {
|
|
flex: 1;
|
|
padding: 10rpx 20rpx 20rpx 20rpx;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.symptom-textarea {
|
|
width: 100%;
|
|
min-height: 120rpx;
|
|
background-color: #f8f9fa;
|
|
border: 1rpx solid #e9ecef;
|
|
border-radius: 16rpx;
|
|
padding: 12rpx;
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
box-sizing: border-box;
|
|
resize: none;
|
|
}
|
|
|
|
.section {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: $font-size-text;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.upload-subtitle {
|
|
font-size: $font-size-tip;
|
|
color: #666;
|
|
display: block;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.upload-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.upload-header .section-title {
|
|
margin-bottom: 0;
|
|
flex: none;
|
|
}
|
|
|
|
.upload-header .upload-subtitle {
|
|
margin-bottom: 0;
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.upload-actions {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.upload-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
background-color: #f8f9fa;
|
|
border: 1rpx solid #e9ecef;
|
|
border-radius: 16rpx;
|
|
gap: 8rpx;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.upload-btn:active {
|
|
background-color: #e9ecef;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: $font-size-tip;
|
|
color: #666;
|
|
}
|
|
|
|
.image-preview {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12rpx;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.preview-item {
|
|
position: relative;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.preview-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.remove-btn {
|
|
position: absolute;
|
|
top: -8rpx;
|
|
right: -8rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background-color: #ff4757;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.popup-footer {
|
|
display: flex;
|
|
padding: 20rpx;
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
border-top: 1rpx solid #f0f0f0;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.popup-btn {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
border-radius: 12rpx;
|
|
font-size: $font-size-text;
|
|
font-weight: 500;
|
|
border: none;
|
|
transition: all 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.cancel-btn {
|
|
background-color: #f8f9fa;
|
|
color: #666;
|
|
}
|
|
|
|
.cancel-btn:active {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.submit-btn {
|
|
background-color: $primary-color;
|
|
color: white;
|
|
}
|
|
|
|
.popup-btn::after {
|
|
border: none;
|
|
}
|
|
|
|
.checkbox-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.checkbox-row .uni-data-checklist {
|
|
flex: none;
|
|
}
|
|
|
|
.checkbox-group {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 诊断容器样式 */
|
|
.diagnosis-container {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.selected-diseases {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.add-disease-btn {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tag-item {
|
|
border: 1px solid #eee;
|
|
padding: 8rpx 30rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.tag-item-active {
|
|
background-color: #0074ff;
|
|
border-color: #0074ff;
|
|
color: #fff;
|
|
}
|
|
|
|
</style> |