health.admin/src/service/ServiceDetail.vue

<script setup lang="ts">
import type { SystemItemModel } from '@/model/care.model';
import { getConditioningSchemeDetailMethod } from '@/request/api/care.api';

const props = defineProps<{
  data: SystemItemModel;
}>();
onMounted(async () => {
  try {
    const res = await getConditioningSchemeDetailMethod(props.data);
    Object.assign(props.data, res);
  } catch (error) {
    console.log(error, 'getCpDetailMethod-error');
  }
})
</script>

<template>
  <div class="service-detail">
    <div class="detail-item">
      <div class="label">项目名称：</div>
      <div class="content">{{ data.name }}</div>
    </div>
    <div class="detail-item">
      <div class="label">方案类型：</div>
      <div class="content">{{ data.conditioningProgramType }}</div>
    </div>
    <div class="detail-item">
      <div class="label">计价规则：</div>
      <div class="content">{{ data.pricingType==='0'?'一口价':'按穴位/脉络/部位计价' }}</div>
    </div>

    <div class="flex" v-if="data?.pricingType==='0'">
      <div class="detail-item mr-10">
        <div class="label">单价：</div>
        <div class="content">{{ data?.cpFixedPricingRule?.unitPrice }}</div>
      </div>
      <div class="detail-item">
        <div class="label">计价单位：</div>
        <div class="flex">
          <div class="content mr-10">{{ data?.cpFixedPricingRule?.pricingUnit }}</div>
          <div class="content">相当于{{ data?.cpFixedPricingRule?.convertDose }}（使用单位）</div>
        </div>
      </div>
    </div>
    <div class="flex" v-if="data?.pricingType==='1'">
        <div class="detail-item">
          <div class="label">计价说明：</div>
          <div class="content font-extrabold">{{ data?.pricingType==='1'?`当"穴位/经络/部位 ≤${data?.cpDynamicPricingRule? data?.cpDynamicPricingRule[1]?.max || 0:0}个时，
          单价为${data?.cpDynamicPricingRule? data?.cpDynamicPricingRule[0]?.price || 0:0}元，
          当"穴位/经络/部位 ＞${data?.cpDynamicPricingRule? data?.cpDynamicPricingRule[1]?.max || 0:0}个时，
          单价为${data?.cpDynamicPricingRule? data?.cpDynamicPricingRule[1]?.price || 0:0}元`:'' }}</div>
        </div>
    </div>
      <div class="detail-item" v-if="data?.cpMedicines?.length>0 && data?.cpMedicines[0]?.name">
        <div class="label">中药组成：</div>
      <div class="content" v-for="item in data?.cpMedicines" :key="item.id">{{ item.name }} ; </div>
    </div>
    <div class="detail-item" v-if="data?.effect">
      <div class="label">功效：</div>
      <div class="content font-extrabold">{{ data?.effect }}</div>
    </div>
    <div class="detail-item" v-if="data?.institutionName">
      <div class="label">机构名称：</div>
      <div class="content">{{ data?.institutionName }}</div>
    </div>
    <div class="detail-item" v-if="data?.conditioningProgramSupplierName">
      <div class="label">供应商：</div>
      <div class="content">{{ data?.conditioningProgramSupplierName }}</div>
    </div>
    <div class="detail-item" v-if="data?.photo">
      <div class="label">图片：</div>
      <div class="content">
        <a-image :width="100" :height="100" :src="data?.photo" class="service-image" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.service-detail {
  padding: 20px;
  color: black;
  .detail-item {
    display: flex;
    margin-bottom: 20px;

    .label {
      //   width: 80px;
      margin-right: 10px;
    }

    .content {
      //   flex: 1;

      .service-image {
        max-width: 200px;
        height: auto;
      }
    }
  }
}
</style>