xk-client-wx/subPackages/chat/components/TransferMessageBubble.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>