575 lines
12 KiB
Vue
575 lines
12 KiB
Vue
<template>
|
||
<view class="message-card" :class="cardTypeClass">
|
||
<view class="card-header">
|
||
<text class="card-title">{{ title }}</text>
|
||
<view v-if="showDetail" class="detail-btn" @click.stop="handleDetail">
|
||
<text class="detail-text">详情</text>
|
||
<uni-icons type="right" size="14" color="#fff"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="card-content">
|
||
<!-- 病情描述类型 -->
|
||
<fill-description-card v-if="payload.description === 'PATIENT_FILL_CONSULTATION'" :payload="payload" />
|
||
<medicines-card v-else-if="payload.description === 'DOCTOR_WRITE_PRESCRIPTION'" :payload="payload" />
|
||
<refill-medicine-card v-else-if="payload.description === 'USER_REFILL_PRESCRIPTION'" :payload="payload" />
|
||
<reject-refill-medicine-card v-else-if="payload.description === 'REJECT_REFILL_PRESCRIPTION'"
|
||
:payload="payload" />
|
||
|
||
<!-- 续方申请类型 -->
|
||
<template v-if="messageData.messageType === 'refill'">
|
||
<view class="refill-detail">
|
||
<!-- 诊断信息 -->
|
||
<view class="refill-diagnosis">
|
||
<text class="label-text">诊断：</text>
|
||
<text class="content-text">{{ messageData.diagnosis }}</text>
|
||
</view>
|
||
|
||
<!-- 药品信息 -->
|
||
<view class="refill-medicines">
|
||
<text class="section-title">药品：</text>
|
||
|
||
<!-- 中药处方 -->
|
||
<view v-if="messageData.prescriptionType === '中药处方'" class="chinese-medicine-refill">
|
||
<text class="medicine-type-title">{{
|
||
messageData.prescriptionType
|
||
}}</text>
|
||
<text class="medicine-description">{{
|
||
messageData.prescriptionDesc
|
||
}}</text>
|
||
</view>
|
||
|
||
<!-- 西药处方 -->
|
||
<view v-else class="western-medicine-refill">
|
||
<view v-for="(medicine, index) in messageData.medicines" :key="index" class="medicine-item-refill">
|
||
<view class="medicine-info-refill">
|
||
<text class="medicine-name-refill">{{ medicine.name }} {{ medicine.spec }}</text>
|
||
<text class="medicine-count-refill">{{
|
||
medicine.count
|
||
}}</text>
|
||
</view>
|
||
<text class="medicine-usage-refill">{{ medicine.usage }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 问卷调查类型 -->
|
||
<template v-if="messageData.messageType === 'survey'">
|
||
<view class="survey-detail">
|
||
<!-- 问卷标题和描述 -->
|
||
<view class="survey-header">
|
||
<view class="survey-info">
|
||
<text class="survey-title">{{ messageData.surveyTitle }}</text>
|
||
<text class="survey-subtitle">{{
|
||
messageData.surveyDescription
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 问卷详情 -->
|
||
<view class="survey-content">
|
||
<view class="survey-item">
|
||
<text class="survey-label">问卷名称：</text>
|
||
<text class="survey-value">{{ messageData.surveyName }}</text>
|
||
</view>
|
||
<view class="survey-item">
|
||
<text class="survey-label">预计用时：</text>
|
||
<text class="survey-value">{{ messageData.estimatedTime }}</text>
|
||
</view>
|
||
<view class="survey-item" v-if="messageData.reward">
|
||
<text class="survey-label">完成奖励：</text>
|
||
<text class="survey-value reward-text">{{
|
||
messageData.reward
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 问卷说明 -->
|
||
<view class="survey-note" v-if="messageData.note">
|
||
<text class="note-text">{{ messageData.note }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 立即购买按钮 -->
|
||
<view class="card-footer" @click="handlePurchase" v-if="messageData.messageType === 'prescription'">
|
||
<text class="view-all-text">立即购药</text>
|
||
</view>
|
||
|
||
<!-- 续方申请按钮 -->
|
||
<view class="card-footer" @click="handleBuy" v-if="messageData.messageType === 'refill'">
|
||
<text class="view-all-text">申请再次购买</text>
|
||
</view>
|
||
|
||
<!-- 问卷调查按钮 -->
|
||
<view class="card-footer" @click="handleBuy" v-if="messageData.messageType === 'survey'">
|
||
<text class="view-all-text">去填写</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from "vue";
|
||
import { sendSystemMessage } from "@/api/corp/im.js";
|
||
|
||
import fillDescriptionCard from "./fill-description-card.vue";
|
||
import medicinesCard from "./medicines-card.vue";
|
||
import refillMedicineCard from "./refill-medicine-card.vue";
|
||
import rejectRefillMedicineCard from "./reject-refill-medicine-card.vue";
|
||
|
||
const props = defineProps({
|
||
payload: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
messageData: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
flow: {
|
||
type: String,
|
||
default: 'out'
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits(["viewDetail"]);
|
||
const CardTitle = {
|
||
PATIENT_FILL_CONSULTATION: "患者病情描述",
|
||
USER_REFILL_PRESCRIPTION: '续方申请',
|
||
DOCTOR_WRITE_PRESCRIPTION: "医嘱",
|
||
REJECT_REFILL_PRESCRIPTION: '续方失败',
|
||
symptom: "病情描述",
|
||
prescription: "处方单",
|
||
refill: "续方申请",
|
||
survey: "问卷调查",
|
||
};
|
||
|
||
// const showDetailBtn = computed(() => {
|
||
// return ['DOCTOR_WRITE_PRESCRIPTION'].includes(props.payload.description)
|
||
// });
|
||
|
||
// 计算卡片标题
|
||
const title = computed(() => {
|
||
return CardTitle[props.payload.description] || CardTitle[props.messageData.messageType] || "消息卡片";
|
||
});
|
||
|
||
const extension = computed(() => {
|
||
try {
|
||
return JSON.parse(props.payload.extension);
|
||
} catch (e) { }
|
||
return {}
|
||
})
|
||
|
||
const showDetail = computed(() => {
|
||
if (props.payload.description === 'DOCTOR_WRITE_PRESCRIPTION' && extension.value.id) {
|
||
return true
|
||
}
|
||
return false
|
||
})
|
||
|
||
function handleDetail() {
|
||
if (props.payload.description === 'DOCTOR_WRITE_PRESCRIPTION' && extension.value.id) {
|
||
uni.navigateTo({
|
||
url: `/pages-home/prescription/detail?id=${extension.value.id}`
|
||
})
|
||
}
|
||
}
|
||
|
||
// 是否有附件
|
||
const hasAttachment = computed(() => {
|
||
return props.messageData.images && props.messageData.images.length > 0;
|
||
});
|
||
|
||
// 附件数量
|
||
const number = computed(() => {
|
||
return `${props.messageData.images.length}张`;
|
||
});
|
||
|
||
// 计算卡片样式类
|
||
const cardTypeClass = computed(() => {
|
||
return `card-${props.messageData.messageType}`;
|
||
});
|
||
|
||
// 处理查看详情点击
|
||
const handleBuy = () => {
|
||
emit("viewDetail", props.messageData);
|
||
};
|
||
|
||
// 处理立即购买点击
|
||
const handlePurchase = () => {
|
||
console.log('购买成功', props.messageData);
|
||
const groupID = props.messageData.conversationID.replace('GROUP', '');
|
||
sendSystemMessage(groupID, 'purchased');
|
||
};
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.message-card {
|
||
border-radius: 4rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-symptom,
|
||
.card-prescription,
|
||
.card-refill,
|
||
.card-survey {
|
||
background-color: $primary-color;
|
||
}
|
||
|
||
|
||
.card-header {
|
||
padding: 12rpx 12rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-title {
|
||
color: white;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.detail-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
padding: 4rpx 8rpx;
|
||
border-radius: 4rpx;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.detail-text {
|
||
color: white;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.detail-arrow {
|
||
color: white;
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.card-content {
|
||
margin: 10rpx;
|
||
padding: 12rpx 16rpx 16rpx;
|
||
background-color: white;
|
||
border-radius: 4rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.patient-info {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.label-text {
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.content-text {
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
line-height: 1.5;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 医院就诊信息样式 */
|
||
.hospital-visit-info {
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.visit-text {
|
||
color: #666;
|
||
font-size: 13rpx;
|
||
}
|
||
|
||
/* 处方单样式 */
|
||
.prescription-detail {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.prescription-section {
|
||
width: 420rpx;
|
||
margin-bottom: 8rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.section-title {
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.medicine-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6rpx;
|
||
}
|
||
|
||
.medicine-item-wrapper {
|
||
background-color: #f8f9fa;
|
||
border-radius: 6rpx;
|
||
padding: 8rpx 12rpx;
|
||
}
|
||
|
||
.medicine-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.medicine-usage {
|
||
margin-top: 4rpx;
|
||
padding-top: 4rpx;
|
||
border-top: 1px solid #e9ecef;
|
||
}
|
||
|
||
.medicine-name {
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.medicine-spec {
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.medicine-count {
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
min-width: 30rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
.usage-text {
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 中药处方样式 */
|
||
.tcm-prescription {
|
||
background-color: #f8f9fa;
|
||
border-radius: 6rpx;
|
||
padding: 12rpx;
|
||
}
|
||
|
||
.tcm-label {
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.card-footer {
|
||
background-color: $primary-color;
|
||
border-radius: 4rpx;
|
||
padding: 8rpx 16rpx;
|
||
text-align: center;
|
||
margin: 0 -4rpx;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.card-footer:active {
|
||
background-color: $primary-color;
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.view-all-text {
|
||
color: white;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 续方申请样式 */
|
||
.refill-detail {
|
||
margin-bottom: 12rpx;
|
||
width: 420rpx;
|
||
max-width: 95vw;
|
||
}
|
||
|
||
.refill-patient-info {
|
||
margin-bottom: 12rpx;
|
||
padding-bottom: 8rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.refill-diagnosis {
|
||
margin-bottom: 12rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.refill-diagnosis .label-text {
|
||
min-width: 50rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.refill-medicines {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.refill-medicines .section-title {
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
/* 中药续方样式 */
|
||
.chinese-medicine-refill {
|
||
background-color: #f8f9fa;
|
||
border-radius: 6rpx;
|
||
padding: 12rpx;
|
||
}
|
||
|
||
.medicine-type-title {
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.medicine-description {
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 西药续方样式 */
|
||
.western-medicine-refill {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.medicine-item-refill {
|
||
background-color: #f8f9fa;
|
||
border-radius: 6rpx;
|
||
padding: 10rpx 12rpx;
|
||
}
|
||
|
||
.medicine-info-refill {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.medicine-name-refill {
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.medicine-count-refill {
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
min-width: 30rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
.medicine-usage-refill {
|
||
color: #666;
|
||
font-size: 22rpx;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
/* 问卷调查样式 */
|
||
.survey-detail {
|
||
margin-bottom: 12rpx;
|
||
width: 420rpx;
|
||
max-width: 90vw;
|
||
}
|
||
|
||
.survey-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 16rpx;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.survey-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.survey-title {
|
||
color: #333;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.survey-subtitle {
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.survey-content {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.survey-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.survey-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.survey-label {
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
min-width: 80rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.survey-value {
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.reward-text {
|
||
color: #ff6b35;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.survey-note {
|
||
background-color: #f8f9fa;
|
||
border-radius: 6rpx;
|
||
padding: 10rpx 12rpx;
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.note-text {
|
||
color: #666;
|
||
font-size: 23rpx;
|
||
line-height: 1.4;
|
||
}
|
||
</style>
|