tenant-Platform/src/views/insurancePolicy/modules/quotation.vue

<template>
  <div class="quotation">

    <el-dialog v-model="dialogFormVisible" :close-on-click-modal="false" :show-close="false" width="1200" top="40px">
      <template #header="{ titleId, titleClass }">
      </template>
      <div class="max-h-[calc(100vh-140px)] min-h-500px overflow-y-auto" v-loading="dialogFormLoading">
        <div class="content font-size-16px color-[#000] line-height-[1] p-24px" v-if="!dialogFormLoading">
          <div class="flex justify-center flex-col items-center">
            <img class="w-[48px] h-[48px]" :src="quotationObj.logo" />
            <div class="font-size-[24px]">{{ quotationObj.nameSimple }}</div>
          </div>
          <div class="m-t-22px">尊敬的客户，您于{{ dayjs(new Date()).format("YYYY年MM月DD日") }}投保方案如下：</div>
          <div class="b-t-(1px solid #DDDDDD) b-l-(1px solid #DDDDDD) m-t-[14px]">
            <div class=" flex" v-for="(row, index) in descriptionsData" :key="index">
              <div v-for="item in row" :key="item.title" class="flex w-full">
                <div
                  class="w-[180px] min-h-[38px] p-[8px_0] h-full flex justify-center items-center b-r-(1px solid #DDDDDD) b-b-(1px solid #DDDDDD)">
                  {{ item.title }}</div>
                <div v-html="item.value"
                  class="w-[calc(100%-180px)] h-full min-h-[38px] p-[8px] flex items-center b-r-(1px solid #DDDDDD) b-b-(1px solid #DDDDDD) line-height-[1.2]">
                </div>
              </div>
            </div>
          </div>
          <div class="m-t-[14px]">
            <div class="bg-[#EDEEF0] flex ">
              <div class="p-[8px] w-[calc(50%-0px)]">险别名称</div>
              <div class="p-[8px] w-[calc(50%-160px)]">保额(元)</div>
              <div class="p-[8px] w-[160px] text-center">保费(元)</div>
            </div>
            <div class="b-t-(1px solid #DDDDDD) b-l-(1px solid #DDDDDD)">
              <div class="w-full flex" v-for="(row, index) in tableData" :key="index">
                <template v-if="!row.total">
                  <div
                    class="w-[calc(50%-0px)] h-full min-h-[38px] p-[8px] flex items-center b-r-(1px solid #DDDDDD) b-b-(1px solid #DDDDDD)">
                    {{ row.title }}
                    <div class="color-[#666] m-l-20px" v-if="row.jyxBlames">
                      <div v-for="blame in row.jyxBlames" :key="blame.id">{{ blame.blame }}*{{ blame.blamePremium }}</div>
                    </div>
                  </div>
                  <div
                    class="w-[calc(50%-160px)] min-h-[38px] p-[8px] flex items-center b-r-(1px solid #DDDDDD) b-b-(1px solid #DDDDDD)">
                    {{ row.amount }}</div>
                  <div
                    class="w-[160px] min-h-[38px] p-[8px_0] flex justify-center items-center b-r-(1px solid #DDDDDD) b-b-(1px solid #DDDDDD)">
                    {{ row.premium }}</div>
                </template>
                <template v-if="row.total">
                  <div
                    class="w-[calc(100%-160px)] color-[#FF4545] h-full min-h-[38px] p-[8px] flex items-center justify-center b-r-(1px solid #DDDDDD) b-b-(1px solid #DDDDDD)">
                    {{ row.title }}</div>
                  <div
                    class="w-[160px] color-[#FF4545] min-h-[38px] p-[8px_0] h-full flex justify-center items-center b-r-(1px solid #DDDDDD) b-b-(1px solid #DDDDDD)">
                    {{ row.premium }}</div>
                </template>
              </div>
            </div>
          </div>
          <div class="flex justify-between m-t-14px">
            <div class="w-[calc(100%-200px)]">注意：以上保费为试算保费，仅供参考，右下角扫码查看权益订单，并将您的要求通知我们，我们会尽快与您联系，谢谢！</div>
            <div class="flex-col items-center">
              <img :src="shareImageUrl" class="" />
              <div class="font-size-14px color-[#333] m-t-4px text-center">微信扫码看权益单</div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="savePoster()">下载报价单</el-button>
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import api from '@/api';
import html2canvas from 'html2canvas';
import QRCode from 'qrcode'
import dayjs from "dayjs";

const props = defineProps<{
  quotationObj: object,
  insurancePolicyForm: object
}>();

const quotationObj=ref({})
const insurancePolicyForm=ref({})

const descriptionsData = computed(() => {
  let arr= [
    [
      { title: '投保人姓名/名称', value: insurancePolicyForm.value.name2, },
      { title: '车主姓名/名称', value: insurancePolicyForm.value.name1, },
    ], [
      { title: '被保人姓名/名称', value: insurancePolicyForm.value.name3 },
      { title: '车牌号', value: insurancePolicyForm.value.licenseNo },
    ], [
      { title: '车型名称', value: insurancePolicyForm.value.brandName },
    ], [
      { title: '新车购置价(元)', value: insurancePolicyForm.value.purchasePrice },
      { title: '座位数', value: insurancePolicyForm.value.seatCount },
    ], [
      { title: '发动机号、VIN码', value: insurancePolicyForm.value.engineNo + '、' + insurancePolicyForm.value.vinNo },
      { title: '初登日期', value: insurancePolicyForm.value.registerDate },
    ], [
      { title: '使用性质', value: insurancePolicyForm.value.vehicleUseName },
      {
        title: '承保年数、出险次数', value: `商业险:期间内共出险${quotationObj.value.quoteResult?.scoreVo?.biClaims || 0}次<br>
        交强险:期间内共出险${quotationObj.value.quoteResult?.scoreVo?.ciClaims || 0}次`
      },
    ],
  ]
  let list=[]
  if(insurancePolicyForm.value.SYStartDate){
    list.push({ title: '商业险保险期限', value: insurancePolicyForm.value.SYStartDate + '至' + insurancePolicyForm.value.SYEndDate })
  }
  if(insurancePolicyForm.value.JQStartDate){
    list.push({ title: '交强险保险期限', value: insurancePolicyForm.value.JQStartDate + '至' + insurancePolicyForm.value.JQEndDate })
  }
  arr.push(list)
  return arr
})

const tableData = computed(() => {
  let arr = []
  const quoteResult = quotationObj.value.quoteResult
  if (quoteResult.kindInfoVo) {
    const kindArr = quoteResult.kindInfoVo.filter(v => v.kindCode !== "J1")
    for (let i = 0; i < kindArr.length; i++) {
      const element = kindArr[i];
      const obj = {
        title: element.kindName,
        amount: element.kindCode === 'D4' ? element.amount + '*' + (insurancePolicyForm.value.seatCount - 1) : element.amount,
        premium: element.premium,
      }
      arr.push(obj)
    }
  }
  if (quoteResult?.costs?.biPremium) arr.push({ total: true, title: '商业险合计保费', premium: quoteResult.costs.biPremium })
  if (quoteResult?.costs?.ciPremium) arr.push({ total: true, title: '机动车交通事故责任强制保险', premium: quoteResult.costs.ciPremium })
  if (quoteResult?.costs?.vvTax) arr.push({ total: true, title: '车船税', premium: quoteResult.costs.vvTax })
  const drivings = quotationObj.value.quoteResult?.accidentalDrivings ?? []
  if (drivings.length > 0) {
    for (let i = 0; i < drivings.length; i++) {
      const element = drivings[i];
      const obj = {
        title: element.productName,
        amount: element.quantity + '份',
        premium: element.premium,
        jyxBlames: element.jyxBlames,
      }
      arr.push(obj)
    }
  }
  arr.push({ total: true, title: '保费合计（不含车船税）', premium: quoteResult.costs.totalAmount })
  arr.push({ total: true, title: '保费合计（含车船税）', premium: quoteResult.costs.sumPremium })
  return arr
})

const dialogFormVisible = ref(false)
const dialogFormLoading = ref(false)

let optionObj = ref({
  vehicle_use_code: [], // 车辆用途
})
const initOption = () => {
  api.additionalApi.dictDetails('vehicle_use_code').then((res: any) => {
    if (res.code == 200) {
      if (res.data) {
        optionObj.value['vehicle_use_code'] = res.data
      }
    }
  })
}
initOption()

const shareImageUrl = ref('')
const show = async (orderNo) => {
  dialogFormLoading.value = true
  dialogFormVisible.value = true

  const { data } = await api.insurancePolicyApi.getOrderDetail(orderNo)
  dialogFormLoading.value = false

  quotationObj.value = {
    ...data,
    logo: data.insCompanyVo[0]?.logo,
    nameSimple: data.insCompanyVo[0]?.nameSimple,
    insurancePlanInfo: { drivings: data.accidentalDrivings },
    quoteResult: data
  }
  const { carInfoVo, ownersInfo, policyHolderInfo, insuredPersonInfo, biRiskInfoVo, ciRiskInfoVo } = data
  insurancePolicyForm.value = {
    ...data,
    name1: ownersInfo?.name,
    name2: policyHolderInfo?.name,
    name3: insuredPersonInfo?.name,
    ...carInfoVo,
    SYStartDate: biRiskInfoVo?.startDate,
    SYEndDate: biRiskInfoVo?.endDate,
    JQStartDate: ciRiskInfoVo?.startDate,
    JQEndDate: ciRiskInfoVo?.endDate,
  }
  insurancePolicyForm.value.vehicleUseName = optionObj.value.vehicle_use_code.find(a => a.value === insurancePolicyForm.value.vehicleUseCode)?.label

  shareImageUrl.value = await QRCode.toDataURL(`https://tennat.baoxianzhanggui.com/test_h5/#/pages/quote/quoteRecordDetail?ordersNo=${orderNo}&from=share`, {
    width: 160,
    margin: 2
  });
}
const savePoster = () => {
  html2canvas(document.querySelector(".content"), { useCORS: true }).then((canvas) => {
    downloadBase64(canvas.toDataURL(), insurancePolicyForm.value.licenseNo + "报价单");
  });
};

const downloadBase64 = (dataUrl, fileName = 'download', fileExtension = "png") => {
  const byteCharacters = atob(dataUrl.split(',')[1]);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += 10240) {
    const slice = byteCharacters.slice(offset, offset + 10240);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  const blob = new Blob(byteArrays, { type: 'application/octet-stream' });
  const blobUrl = URL.createObjectURL(blob);
  const creatDom = document.createElement('a');
  document.body.appendChild(creatDom);
  creatDom.href = blobUrl;
  creatDom.download = `${fileName}.${fileExtension}`;
  creatDom.click();
  document.body.removeChild(creatDom);
  URL.revokeObjectURL(blobUrl);
};

defineExpose({
  show,
})
</script>
<style scoped lang="scss">
:deep(.el-dialog__header) {
  padding: unset;
  border-bottom: unset;
}

:deep(.el-dialog__body) {
  padding: unset;
  max-height: unset !important;
}
</style>