FE_sandTable/src/views/product/insurance/Info.vue

<template>
  <div class="info mt-2">
    <h2 class="text-center text-lg">{{info.insuranceName}}</h2>
    <p class="text">险种分类：{{ info.insuranceType }}</p>
    <p v-if="info.minimumAge && info.maximumAge"
       class="text">承保年龄：{{ info.minimumAge + '-' + info.maximumAge + '周岁' }}</p>
    <p v-if="info.insuranceDeadline"
       class="text">保险期限：{{ info.insuranceDeadline }}</p>
    <div class="text">
      <div class="flex">
        <p class="w-[130px] mr-32">保险责任</p>
        <p class="">保额（元）</p>
      </div>
      <div v-for="(item, i) in info.insuranceCoverageConfigList"
           :key="item"
           class="flex">
        <p class="w-[130px] mr-32">{{ item.insuranceCoverage }}</p>
        <p>{{ item.sumInsured * (item.insuredLiabilityId === 764 || item.insuredLiabilityId === 765 ? 1 : 10000) }}</p>
      </div>
    </div>
    <p v-if="info.premiumAmount"
       class="text">保费金额：{{ info.premiumAmount }}元</p>
    <p v-if="info.formOfPayment"
       class="text">缴纳形式：{{ info.formOfPayment }}</p>
    <div v-if="info.applicationMaterialList?.length"
         class="text">
      申请材料：
      <p v-for="(item, i) in info.applicationMaterialList"
         :key="item">{{ i + 1 }}、{{item}}</p>
    </div>
    <div v-if="info.exemptionFromLiabilityList?.length"
         class="text">
      责任免除：
      <p v-for="(item, i) in info.exemptionFromLiabilityList"
         :key="item">{{ i + 1 }}、{{item}}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import { insuranceProductDetails } from '@/api/insurance';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const id = computed(() => +route.query.id);
const info = ref<Record<string, any>>({});

// 详情
const getDetail = async () => {
  if (id.value) {
    try {
      const { data } = await insuranceProductDetails(id.value);
      info.value = data;
    } finally {
    }
  }
};
watch(
  () => route.query,
  () => {
    getDetail();
  },
  {
    immediate: true,
  },
);
</script>

<style lang="scss" scoped>
.info {
  .step-name {
    @apply mb-3 text-sm font-semibold text-[#006bff];
  }
  .line {
    @apply flex mb-2;
  }
  .label {
    @apply mr-1 text-sm font-semibold text-[#333] leading-[32px];
  }
  .text {
    @apply text-sm text-[#333] leading-[32px];
  }
}
</style>