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)] overflow-y-auto">
        <div class="content font-size-16px color-[#000] line-height-[1] p-24px">
          <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>
                  <div
                    class="w-[calc(50%-160px)] h-full 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] h-full 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 html2canvas from 'html2canvas';
import QRCode from 'qrcode'
import dayjs from "dayjs";

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

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

const tableData = computed(() => {
  let arr = []
  const quoteResult = props.quotationObj.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 + '*' + (props.insurancePolicyForm.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 })
  let product = props.quotationObj.projectList?.find((v, i) => props.quotationObj.productIndex === i)
  const drivings = product?.drivings ?? props.quotationObj.insurancePlanInfo?.drivings ?? []
  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,
      }
      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 shareImageUrl = ref('')
const show = async (obj) => {
  dialogFormVisible.value = true
  shareImageUrl.value = await QRCode.toDataURL(`https://tennat.baoxianzhanggui.com/test_h5/#/pages/quote/quoteRecordDetail?ordersNo=${obj.quoteResult?.ordersNo}&from=share`, {
    width: 160,
    margin: 2
  });
}
const savePoster = () => {
  html2canvas(document.querySelector(".content"), { useCORS: true }).then((canvas) => {
    downloadBase64(canvas.toDataURL(), props.insurancePolicyForm.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>