517 lines
11 KiB
Vue
517 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<full-page :animation="true" ref="pageRef" mainStyle="background:#f0f0f0" @reachBottom="onReachBottom()">
|
|||
|
|
<view class="container" :class="{ 'elder-mode-active': elderMode }">
|
|||
|
|
<view class="user-header shadow-lg">
|
|||
|
|
就诊人：{{ form.name }} {{ form.sex }} {{ form.age ? `${form.age}岁` : '' }}
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="relative mt-12 px-15 py-12 bg-white shadow-lg" @click="toAddDisease()">
|
|||
|
|
<view class="section-title is-required">已在实体医疗机构确诊的疾病</view>
|
|||
|
|
<view class="disease-tags">
|
|||
|
|
<view v-for="(i, idx) in form.diseases" class="disease-tag" @click.stop="() => { }">
|
|||
|
|
<text>{{ i }}</text>
|
|||
|
|
<text class="disease-remove" @click.stop="removeDisease(idx)"> <uni-icons type="closeempty" color="#b8956a"
|
|||
|
|
size="14"></uni-icons> </text>
|
|||
|
|
</view>
|
|||
|
|
<view class="disease-tag add-tag">+ 添加</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="description-section relative mt-12 px-15 py-12 bg-white shadow-lg">
|
|||
|
|
<view class="section-title is-required">请描述您的病情</view>
|
|||
|
|
<textarea v-model="form.description" :show-confirm-bar="false" auto-height="true" class="mt-10 description"
|
|||
|
|
placeholder-class="placeholderClass" maxlength="300" placeholder="为了更好地获得医生帮助，请尽可能地详细描述病情"
|
|||
|
|
@focus="showDescriptionGuess" @input="handleDescriptionInput" @blur="hideDescriptionGuess"></textarea>
|
|||
|
|
<view v-if="guessVisible" class="guess-popup">
|
|||
|
|
<view class="guess-title">猜你想输入：</view>
|
|||
|
|
<view v-for="item in guessList" :key="item" class="guess-option" @click="selectDescriptionGuess(item)">
|
|||
|
|
{{ item }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="relative mt-12 px-15 py-12 bg-white shadow-lg">
|
|||
|
|
<view class="section-title">上传本院或者外院的病历资料</view>
|
|||
|
|
<view class="mt-10 section-sub-title">
|
|||
|
|
请上传诊断、处方、出院小结、医嘱单、浙里办医保结算明细等其中一种。
|
|||
|
|
</view>
|
|||
|
|
<view class="image-uploader">
|
|||
|
|
<view v-for="(image, index) in form.images" :key="index" class="image-preview">
|
|||
|
|
<image :src="image" class="image" @click="previewImage(index)" />
|
|||
|
|
<view class="close-icon" @click="removeImage(index)">
|
|||
|
|
<uni-icons color="red" size="24" type="close" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="form.images.length < 9" class="upload-button" @click="uploadImage">
|
|||
|
|
<uni-icons type="camera" size="40" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="relative mt-12 px-15 py-12 bg-white shadow-lg">
|
|||
|
|
<view v-for="history in histories" :key="history.label" class="history-item">
|
|||
|
|
<text class="history-label">{{ history.label }}</text>
|
|||
|
|
<radio-group class="radio-group">
|
|||
|
|
<label v-for="i in history.options" :key="i" class="radio-label">
|
|||
|
|
<radio :value="i" :checked="form[history.prop] === i" @change="changeHistory(history.prop, i)"
|
|||
|
|
class="custom-radio" color="#b8956a" />
|
|||
|
|
<text>{{ i }}</text>
|
|||
|
|
</label>
|
|||
|
|
</radio-group>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<template #footer>
|
|||
|
|
<footer-button text="下一步" theme="brown" @onClick="nextStep" />
|
|||
|
|
</template>
|
|||
|
|
</full-page>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from "vue";
|
|||
|
|
import { storeToRefs } from "pinia";
|
|||
|
|
import { onLoad, onUnload } from '@dcloudio/uni-app';
|
|||
|
|
import orderStore from '@/store/order';
|
|||
|
|
|
|||
|
|
import { uploadUrl, getFullPath } from '@/utils/http';
|
|||
|
|
import { toast, loading, hideLoading } from '@/utils/widget';
|
|||
|
|
|
|||
|
|
import footerButton from '@/components/footer-button.vue';
|
|||
|
|
import fullPage from '@/components/full-page.vue';
|
|||
|
|
|
|||
|
|
const guessList = [
|
|||
|
|
'药已用完，需要再次开药',
|
|||
|
|
'病情稳定，要求开具处方买药',
|
|||
|
|
'没有药了，要求开放续药',
|
|||
|
|
'家里药已用完，需要开具新的处方',
|
|||
|
|
'药用完了，需要再开一些', '病情稳定，要求开方配药',
|
|||
|
|
'上次开的药已经用完，需要续药',
|
|||
|
|
'储备的药品已用完，要求开方配药'
|
|||
|
|
]
|
|||
|
|
const { order: form, histories, ybVisitRecord } = storeToRefs(orderStore());
|
|||
|
|
const { init: initOrder } = orderStore();
|
|||
|
|
const visible = ref(false);
|
|||
|
|
const guessVisible = ref(false);
|
|||
|
|
const reachBottom = ref(false);
|
|||
|
|
const pageRef = ref(null);
|
|||
|
|
let guessCloseTimer = null;
|
|||
|
|
// 长辈模式状态
|
|||
|
|
const elderMode = ref(false);
|
|||
|
|
const titleMap = {
|
|||
|
|
YB: "医保处方",
|
|||
|
|
ZF: "自费处方",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function changeHistory(prop, value) {
|
|||
|
|
form.value[prop] = value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showDescriptionGuess() {
|
|||
|
|
if (guessCloseTimer) clearTimeout(guessCloseTimer);
|
|||
|
|
guessCloseTimer = null;
|
|||
|
|
guessVisible.value = !form.value.description.trim();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleDescriptionInput(event) {
|
|||
|
|
const description = event && event.detail && typeof event.detail.value === 'string'
|
|||
|
|
? event.detail.value
|
|||
|
|
: form.value.description;
|
|||
|
|
if (description.trim()) {
|
|||
|
|
guessVisible.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hideDescriptionGuess() {
|
|||
|
|
if (guessCloseTimer) clearTimeout(guessCloseTimer);
|
|||
|
|
guessCloseTimer = setTimeout(() => {
|
|||
|
|
guessVisible.value = false;
|
|||
|
|
guessCloseTimer = null;
|
|||
|
|
}, 200);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function selectDescriptionGuess(description) {
|
|||
|
|
if (guessCloseTimer) clearTimeout(guessCloseTimer);
|
|||
|
|
guessCloseTimer = null;
|
|||
|
|
form.value.description = description;
|
|||
|
|
guessVisible.value = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function nextStep() {
|
|||
|
|
if (form.value.description.trim() === '') {
|
|||
|
|
toast('请填写病情描述');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!reachBottom.value) {
|
|||
|
|
pageRef.value?.scrollToBottom();
|
|||
|
|
reachBottom.value = true;
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
for (let item of histories.value) {
|
|||
|
|
if (!item.options.includes(form.value[item.prop])) {
|
|||
|
|
toast(`请选择${item.label}`);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (form.value.hasVisitedInLastSixMonths === 'N') {
|
|||
|
|
confirmVisible.value = true;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
uni.navigateTo({ url: '/pages/consult/info' })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onDiseaseSelected(disease) {
|
|||
|
|
if (form.value.diseases.length < 5) {
|
|||
|
|
form.value.diseases.push(disease);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function removeImage(index) {
|
|||
|
|
form.value.images.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function uploadImage() {
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: 9 - form.value.images.length,
|
|||
|
|
sizeType: ['compressed'],
|
|||
|
|
success: async (res) => {
|
|||
|
|
loading('上传中...');
|
|||
|
|
const arr = await Promise.all(res.tempFilePaths.map(upload));
|
|||
|
|
const urls = arr.filter(Boolean);
|
|||
|
|
form.value.images = [...form.value.images, ...urls];
|
|||
|
|
hideLoading();
|
|||
|
|
toast(`成功上传${urls.length}张图片`);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function previewImage(index) {
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls: form.value.images,
|
|||
|
|
current: index
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function upload(path) {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
uni.uploadFile({
|
|||
|
|
url: uploadUrl, // 替换为你的上传接口地址
|
|||
|
|
filePath: path,
|
|||
|
|
name: 'file',
|
|||
|
|
fileType: 'image',
|
|||
|
|
success: (res) => {
|
|||
|
|
try {
|
|||
|
|
const url = JSON.parse(res.data).filePath;
|
|||
|
|
resolve(url ? getFullPath(url) : '')
|
|||
|
|
} catch (e) {
|
|||
|
|
resolve()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: res => {
|
|||
|
|
resolve()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onReachBottom() {
|
|||
|
|
reachBottom.value = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onLoad((options) => {
|
|||
|
|
initOrder({ feeType: options.feeType, socialno: options.socialno });
|
|||
|
|
uni.setNavigationBarTitle({
|
|||
|
|
title: titleMap[options.feeType] || ''
|
|||
|
|
})
|
|||
|
|
uni.$on('on-disease-selected', onDiseaseSelected);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onUnload(() => {
|
|||
|
|
uni.$off('on-disease-selected')
|
|||
|
|
if (guessCloseTimer) clearTimeout(guessCloseTimer);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.section-title {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
|
|||
|
|
&.is-required:before {
|
|||
|
|
display: inline-block;
|
|||
|
|
content: "*";
|
|||
|
|
color: red;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-font {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-sub-title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #555;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.disease-tags {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-right: -20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.disease-tag {
|
|||
|
|
padding: 10rpx 20rpx;
|
|||
|
|
background-color: #f5ede0;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #8b6f47;
|
|||
|
|
border: 1px solid #d4c4a8;
|
|||
|
|
|
|||
|
|
@at-root &.add-tag {
|
|||
|
|
border-color: #b8956a;
|
|||
|
|
background-color: white;
|
|||
|
|
color: #b8956a;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.disease-remove {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 0 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.image-uploader {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-guess {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-preview,
|
|||
|
|
.upload-button {
|
|||
|
|
position: relative;
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
margin: 10rpx 10rpx 0 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-button {
|
|||
|
|
border: 1px solid #e5e5e5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -20rpx;
|
|||
|
|
right: -20rpx;
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image {
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.next-button {
|
|||
|
|
background-color: $theme-brown-primary;
|
|||
|
|
color: white;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 20rpx;
|
|||
|
|
/* width: 100%; */
|
|||
|
|
left: 40rpx;
|
|||
|
|
right: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.history-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 10px 0;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.history-item-none {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.history-item:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.history-label {
|
|||
|
|
width: 280rpx;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.radio-group {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
width: 320rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.radio-group-auto {
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.radio-label {
|
|||
|
|
width: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-left: 15px;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-radio {
|
|||
|
|
transform: scale(0.8);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.description {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 84rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.description-section {
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guess-popup {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 30rpx;
|
|||
|
|
right: 30rpx;
|
|||
|
|
top: 100%;
|
|||
|
|
z-index: 20;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1rpx solid #d9d9d9;
|
|||
|
|
box-shadow: 6rpx 6rpx 12rpx rgba(0, 0, 0, 0.25);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guess-title,
|
|||
|
|
.guess-option {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
min-height: 64rpx;
|
|||
|
|
padding: 16rpx 20rpx;
|
|||
|
|
border-bottom: 1rpx solid #eee;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
line-height: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guess-title {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guess-option:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guess-option:active {
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.placeholderClass {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-header {
|
|||
|
|
padding: 24rpx 30rpx;
|
|||
|
|
background: white;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 长辈模式特定样式 */
|
|||
|
|
.elder-mode-active {
|
|||
|
|
.user-header {
|
|||
|
|
font-size: 42rpx !important;
|
|||
|
|
padding: 40rpx 30rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 42rpx !important;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-font {
|
|||
|
|
font-size: 42rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.section-sub-title {
|
|||
|
|
font-size: 36rpx !important;
|
|||
|
|
line-height: 1.6 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.disease-tag {
|
|||
|
|
font-size: 36rpx !important;
|
|||
|
|
padding: 15rpx 25rpx !important;
|
|||
|
|
margin-right: 25rpx !important;
|
|||
|
|
margin-bottom: 25rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.description {
|
|||
|
|
font-size: 36rpx !important;
|
|||
|
|
min-height: 200rpx !important;
|
|||
|
|
padding: 20rpx !important;
|
|||
|
|
line-height: 1.6 !important;
|
|||
|
|
box-sizing: border-box !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guess-title,
|
|||
|
|
.guess-option {
|
|||
|
|
min-height: 84rpx;
|
|||
|
|
padding: 20rpx 24rpx;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.placeholderClass {
|
|||
|
|
font-size: 36rpx !important;
|
|||
|
|
line-height: 1.6 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.history-label {
|
|||
|
|
font-size: 36rpx !important;
|
|||
|
|
width: 320rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.radio-label {
|
|||
|
|
font-size: 36rpx !important;
|
|||
|
|
margin-left: 20rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-preview,
|
|||
|
|
.upload-button {
|
|||
|
|
width: 200rpx !important;
|
|||
|
|
height: 200rpx !important;
|
|||
|
|
margin: 10rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image {
|
|||
|
|
width: 200rpx !important;
|
|||
|
|
height: 200rpx !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|