ykt-wxapp/pages/message/components/message-card/message-card.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>