310 lines
6.5 KiB
Vue
310 lines
6.5 KiB
Vue
<template>
|
||
<view class="transfer-message-bubble">
|
||
<view class="bubble-header">
|
||
<view class="header-icon">
|
||
<text class="iconfont icon-mendian"></text>
|
||
</view>
|
||
<view class="header-title">转诊消息</view>
|
||
</view>
|
||
|
||
<view class="bubble-body">
|
||
<view class="info-item" v-if="messageData.transfer_store">
|
||
<text class="label">转诊诊所：</text>
|
||
<text class="value">{{ messageData.transfer_store.name || '未知诊所' }}</text>
|
||
</view>
|
||
|
||
<view class="info-item" v-if="messageData.delegate_store">
|
||
<text class="label">委托诊所：</text>
|
||
<text class="value">{{ messageData.delegate_store.name || '未知诊所' }}</text>
|
||
</view>
|
||
|
||
<view class="info-item" v-if="messageData.prescription_no">
|
||
<text class="label">处方编号：</text>
|
||
<text class="value">{{ messageData.prescription_no }}</text>
|
||
</view>
|
||
|
||
<view class="info-item" v-if="messageData.transfer_reason">
|
||
<text class="label">转诊原因：</text>
|
||
<text class="value">{{ messageData.transfer_reason }}</text>
|
||
</view>
|
||
|
||
<!-- 咨询问题和答案 -->
|
||
<view class="questions-section" v-if="messageData.questions && messageData.questions.length > 0">
|
||
<view class="section-title">
|
||
<text class="section-icon">❓</text>
|
||
<text class="section-text">咨询问题</text>
|
||
</view>
|
||
<view class="question-item" v-for="(qa, index) in messageData.questions" :key="index">
|
||
<view class="question-text">
|
||
<text class="question-number">{{ index + 1 }}.</text>
|
||
<text class="question-content">{{ qa.question }}</text>
|
||
</view>
|
||
<view class="answer-text" :class="qa.answer === '是' ? 'answer-yes' : (qa.answer === '否' ? 'answer-no' : 'answer-other')">
|
||
<text class="answer-icon">{{ qa.answer === '是' ? '✓' : (qa.answer === '否' ? '✗' : '?') }}</text>
|
||
<text>{{ qa.answer }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bubble-footer" v-if="messageData.status === 0">
|
||
<button class="action-btn agree" @click="handleAgree">同意转诊</button>
|
||
<button class="action-btn reject" @click="handleReject">拒绝转诊</button>
|
||
</view>
|
||
|
||
<view class="bubble-footer" v-else-if="messageData.status === 1">
|
||
<text class="status-text confirmed">已同意转诊</text>
|
||
</view>
|
||
|
||
<view class="bubble-footer" v-else-if="messageData.status === 3">
|
||
<text class="status-text cancelled">已拒绝转诊</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'TransferMessageBubble',
|
||
props: {
|
||
messageData: {
|
||
type: Object,
|
||
required: true,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
methods: {
|
||
handleAgree() {
|
||
this.$emit('agree', this.messageData);
|
||
},
|
||
handleReject() {
|
||
this.$emit('reject', this.messageData);
|
||
},
|
||
// 获取答案的样式类：是=绿色，否=红色，其他=黄色
|
||
getAnswerClass(answer) {
|
||
if (answer === '是') {
|
||
return 'answer-yes';
|
||
} else if (answer === '否') {
|
||
return 'answer-no';
|
||
} else {
|
||
return 'answer-other';
|
||
}
|
||
},
|
||
// 获取答案的图标
|
||
getAnswerIcon(answer) {
|
||
if (answer === '是') {
|
||
return '✓';
|
||
} else if (answer === '否') {
|
||
return '✗';
|
||
} else {
|
||
return '?';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.transfer-message-bubble {
|
||
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #fed7aa;
|
||
padding: 24rpx;
|
||
margin: 20rpx 0;
|
||
max-width: 600rpx;
|
||
}
|
||
|
||
.bubble-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
padding-bottom: 16rpx;
|
||
border-bottom: 2rpx solid #fed7aa;
|
||
}
|
||
|
||
.header-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.bubble-body {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.info-item {
|
||
margin-bottom: 16rpx;
|
||
font-size: 26rpx;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.info-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.label {
|
||
color: #64748b;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.value {
|
||
color: #1e293b;
|
||
}
|
||
|
||
.bubble-footer {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
justify-content: flex-end;
|
||
padding-top: 16rpx;
|
||
border-top: 2rpx solid #fed7aa;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 12rpx 32rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
border: none;
|
||
}
|
||
|
||
.action-btn.agree {
|
||
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
|
||
color: white;
|
||
}
|
||
|
||
.action-btn.reject {
|
||
background: white;
|
||
color: #64748b;
|
||
border: 2rpx solid #cbd5e1;
|
||
}
|
||
|
||
.status-text {
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
padding: 12rpx 32rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.status-text.confirmed {
|
||
background: rgba(34, 197, 94, 0.1);
|
||
color: #16a34a;
|
||
}
|
||
|
||
.status-text.cancelled {
|
||
background: rgba(239, 68, 68, 0.1);
|
||
color: #dc2626;
|
||
}
|
||
|
||
/* 咨询问题区域 */
|
||
.questions-section {
|
||
margin-top: 20rpx;
|
||
padding: 20rpx;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #fed7aa;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
margin-bottom: 16rpx;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 2rpx solid #fed7aa;
|
||
}
|
||
|
||
.section-icon {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.section-text {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.question-item {
|
||
margin-bottom: 16rpx;
|
||
padding: 16rpx;
|
||
background: white;
|
||
border-radius: 8rpx;
|
||
border: 1rpx solid #e2e8f0;
|
||
}
|
||
|
||
.question-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.question-text {
|
||
font-size: 26rpx;
|
||
color: #334155;
|
||
line-height: 1.6;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.question-number {
|
||
font-weight: 600;
|
||
color: #0A84FF;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.question-content {
|
||
color: #1e293b;
|
||
}
|
||
|
||
.answer-text {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 6rpx;
|
||
width: fit-content;
|
||
}
|
||
|
||
.answer-yes {
|
||
background: #dcfce7;
|
||
color: #16a34a;
|
||
}
|
||
|
||
.answer-yes .answer-icon {
|
||
color: #16a34a;
|
||
}
|
||
|
||
.answer-no {
|
||
background: #fee2e2;
|
||
color: #dc2626;
|
||
}
|
||
|
||
.answer-no .answer-icon {
|
||
color: #dc2626;
|
||
}
|
||
|
||
.answer-other {
|
||
background: #fef3c7;
|
||
color: #d97706;
|
||
}
|
||
|
||
.answer-other .answer-icon {
|
||
color: #d97706;
|
||
}
|
||
|
||
.answer-icon {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|