hn-hlw-app/components/custom-message/rx-pass-card.vue

<template>
  <template v-if="ext && ext.id">
    <view class="rounded bg-white shadow-lg border overflow-hidden mb-15px" :style="elderVarStyle" @click="handleViewDetail">
      <view class="head-green-bg p-15 flex items-center justify-between">
        <view class="flex items-center">
          <image class="icon-rx-icon" :class="elderClass" src="/static/icons/icon-rx-icon.svg" />
          <view class="text-lg font-semibold text-dark">电子处方</view>
        </view>
        <view class="flex items-center">
          <view class="text-base text-gray">原始处方</view>
          <image class="icon-more" :class="elderClass" src="/static/icons/icon-more.svg" />
        </view>
      </view>
      <view class="px-15">
        <view class="flex items-center border-dashed-b">
          <view class="w-0 flex-grow mr-10">
            <view class="flex mb-8">
              <view class="flex-shrink-0 text-base text-dark mr-10">患者: </view>
              <view class="text-dark">
                <text class="text-base">{{ ext.name }}</text>
                <text v-if="ext.sex || ext.age" class="text-base">
                  ({{ ext.sex || '' }} {{ ext.age > 0 ? `${ext.age}岁` : '' }})
                </text>
              </view>
            </view>
            <view class="flex text-base mb-8">
              <view class="flex-shrink-0 text-base text-dark mr-10">诊断: </view>
              <view class="text-base text-dark">{{ ext.disease || '' }}</view>
            </view>
            <view class="flex text-base pb-10">
              <view class="flex-shrink-0 text-base text-dark mr-10">时间: </view>
              <view class="text-base text-dark">{{ ext.time }}</view>
            </view>
          </view>
          <img class="stamp-pic" src="/static/icons/yikaifang.svg" />
        </view>
        <view class="py-14">
          <view v-for="(med, idx) in drugs" :key="idx" :class="idx > 0 ? 'mt-19' : ''">
            <view class="flex justify-between mb-5">
              <view class="w-0 flex-grow">
                <text class="mr-10 text-base font-semibold text-black">{{ med.drugName }}</text>
                <text class="text-base text-black">{{ med.spec || '' }}</text>
              </view>
              <view class="min-w-40px text-right text-lg text-black">
                x{{ med.quantity }}
              </view>
            </view>
            <view class="mt-4 text-gray text-base">{{ med.memo }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="ext.prescriptionType === 'onlineMedicinePurchase'" class="mt-15 other-message-item">
      【系统提示】处方开具成功，请点击下方结算按钮购买
    </view>
    <view v-else class="mt-15 other-message-item">
      【系统提示】处方审核通过，请联系店员
    </view>
  </template>
  <view v-else class="other-message-item">
    【系统提示】处方审核通过，请联系店员
  </view>
</template>
<script setup>
import { computed, onMounted } from "vue";
import { storeToRefs } from "pinia";
import useElder from "@/hooks/useElder";

const { elderClass, elderVarStyle } = storeToRefs(useElder());

const props = defineProps({
  extension: {
    type: [Object, String],
    default: () => ({}),
  },
});

const ext = computed(() => {
  try {
    const rx = JSON.parse(props.extension);
    return rx
  } catch (e) { }
  return typeof props.extension === 'string' ? props.extension : '';
});
const drugs = computed(() => {
  if (ext.value && Array.isArray(ext.value.drugs)) {
    return ext.value.drugs.map(i => {
      const memo = [i.usageName, i.frequencyName, i.dosage ? `每次${i.dosage}${i.dosage_unit || ''}` : ''].filter(Boolean).join('，')
      return {
        ...i,
        memo,
      }
    })
  }
  return
})

function handleViewDetail() {
  uni.navigateTo({
    url: `/pages/record/rx-paper?id=${ext.value.id}`,
  })
}

onMounted(() => {
  if (ext.value && ext.value.prescriptionType === 'onlineMedicinePurchase') {
    uni.$emit('rxHasAuditPassed', JSON.parse(JSON.stringify(ext.value)));
  }
})

// const extension
</script>
<style scoped>
.head-green-bg {
  background: linear-gradient(181deg, #FFF9F2 1.12%, #FFF 19.12%);
}

.mt-4 {
  margin-top: 8rpx;
}

.mt-19 {
  margin-top: 38rpx;
}

.py-14 {
  padding-top: 28rpx;
  padding-bottom: 28rpx;
}

.mb-8 {
  margin-bottom: 16rpx;
}

.icon-rx-icon {
  margin-right: 8rpx;
  width: 48rpx;
  height: 48rpx;
}

.stamp-pic {
  width: 140rpx;
  height: 140rpx;
  flex-shrink: 0;
  transform: translateY(-10rpx) rotate(10deg);
}

.min-w-40px {
  min-width: 40px;
}

.border-dashed-b {
  border-bottom: 1px dashed #A5A5A5;
}

.icon-more {
  transform: translateY(-2rpx);
  width: 24rpx;
  height: 24rpx;
}

.icon-more.caring-mode-active {
  width: 36rpx;
  height: 36rpx;
  transform: translateY(2rpx);
}

.other-message-item{
  font-size: 14px;
  color: #666;
  padding: 10px;
}
</style>