ykt-wxapp/pages/message/components/message-card/medicines-card.vue

<template>
  <view v-if="data" class="card-detail">
    <view class="card-row">
      <text class="label-text">患者：</text>
      <text class="content-text">{{ data.patient }}</text>
    </view>
    <view class="card-row">
      <text class="label-text">诊断：</text>
      <text class="content-text">{{ data.diseases }}</text>
    </view>
    <view v-if="data.medicines.length && data.type === 'western'" class="card-row card-row--flex">
      <view class="row-label label-text">RP：</view>
      <view class="row-content">
        <view v-for="(i, idx) in data.medicines" :key="idx">
          <view class="content-text"> {{ i.info }}</view>
          <view class="label-text"> {{ i.useInfo }}</view>
        </view>
      </view>
    </view>
    <view v-else-if="data.type === 'chinese'" class="card-row card-row--flex">
      <view class="row-label label-text">RP： </view>
      <view class="row-content">
        <view class="content-text">中药处方</view>
        <view class="label-text">
          共{{ data.doseNum }}剂, 每日{{ data.dailyDoseNum }}剂,1剂分{{ data.timesPerDosage }}次服用, {{ data.administrationTime
          }},
          {{ data.instructions || '' }}
        </view>
      </view>
    </view>
    <view class="buy-btn" @click="toBuy()">立即购买</view>

  </view>
</template>
<script setup>
import { computed } from 'vue';
import { getPrescriptionDetail } from '@/api/medicine';
import { toast } from '@/utils/widget';
const props = defineProps({
  payload: {
    type: Object,
    default: () => ({})
  }
});

const data = computed(() => {
  try {
    const extension = JSON.parse(props.payload.extension);
    return {
      ...extension,
      id: extension.id,
      patient: typeof extension.patient === 'string' ? extension.patient : '',
      diseases: typeof extension.diseases === 'string' ? extension.diseases : '',
      medicines: Array.isArray(extension.medicines) ? formatWesternMedicine(extension.medicines) : [],
      type: typeof extension.type === 'string' ? extension.type : '',
    }
  } catch (e) { }
  return null
})

function formatWesternMedicine(medicines) {
  return medicines.map(med => {
    const info = `${med.name} ${med.specification || ''} x${med.quantity || ''}${med.unit || ''}`;
    const useInfo = `${med.administrationTime || ''} ${med.usageName || ''}, ${med.frequencyName}, 每次${med.dosage || ''} ${med.dosageUnit || ''} ${med.medicationCycle ? `用药${med.medicationCycle}`:''} `
    return { info, useInfo }
  });
}

async function toBuy() {
  const res = await getPrescriptionDetail(data.value.id);
  if (res.data && res.data.status === 'init') {
    uni.navigateTo({
      url: `/pages-cart/payment?ids=${data.value.id}`
    })
  } else if (res.data && res.data.status == 'abolished') {
    toast('处方已作废')
  } else if (res.data) {
    toast('处方已失效')
  } else {
    toast('查询处方信息失败')
  }
};


</script>
<style scpoed>
/* 病情描述样式 */
.card-detail {
  min-width: 360rpx;
  max-width: 600rpx;
}

.card-row {
  padding: 4rpx 0;
  line-height: 42rpx;
}

.card-row--flex {
  display: flex;
}

.card-row--flex .row-label {
  flex-shrink: 0;
}

.card-row--flex .row-content {
  width: 0;
  flex-grow: 1;
}

.label-text {
  color: #999;
  font-size: 28rpx;
}

.content-text {
  color: #333;
  font-size: 28rpx;
}

.preview-btn {
  display: inline-block;
  border: 1px solid;
  color: #0074ff;
  line-height: 36rpx;
  font-size: 24rpx;
  padding: 0 12rpx;
  border-radius: 22rpx;
}

.buy-btn {
  background-color: #0074ff;
  color: #fff;
  text-align: center;
  line-height: 60rpx;
  font-size: 28rpx;
  border-radius: 30rpx;
  margin-top: 20rpx;
}
</style>