fashion-ssr-vue3/components/common/loginAndDownload/comp/info/finish.vue

<script lang='ts' setup>
import { useCommonStore } from '@/stores/modules/common'
import { downloadFileByA } from '@/utils/common/download'

const commonStore = useCommonStore()
const { downloadCatalog } = storeToRefs(commonStore)
const isDownloading = ref(false)

async function startDownload() {
  if (downloadCatalog.value) {
    isDownloading.value = true
    await downloadFileByA(downloadCatalog.value.pdf, `${downloadCatalog.value.title || ''}.pdf`)
    const timer = setTimeout(() => {
      isDownloading.value = false
      clearTimeout(timer)
    }, 5000)
  }
  else { console.error('No download catalog available') }
}
startDownload()
</script>

<template>
  <div>
    <div class="custom-title-font text-24px fw-800 text-#333 mb-10px flex items-center">
      {{ isDownloading ? 'Downloading...' : 'Download Successfully!👏' }}
    </div>
    <div class="text-14px text-#1A1A1A lh-22px mb-20px">
      Please feel free to contact us to customize your exclusive product solution.
    </div>
    <div class="b-rd-200px bg-#fff text-#333 py-14px px-46px b-1px b-solid b-#D8D8D8 hover:b-#9B6CFF flex  !bg-#fff items-center mb-24px">
      <div class="p-14px b-rd-50% bg-#F2E5F2 mr-26px">
        <img src="@/assets/images/email.png" alt="" class="w-24px h-24px ">
      </div>
      <div>
        <div class="text-18px fw-bold custom-title-font">
          Email
        </div>
        <div class="text-#9B6CFF lh-24px">
          spark@ejet.com
        </div>
      </div>
    </div>
    <div class="b-rd-200px bg-#fff b-1px py-14px px-46px text-#333 b-solid b-#D8D8D8   hover:b-#9B6CFF flex  items-center">
      <div class="p-14px b-rd-50% bg-#F2E5F2 mr-26px">
        <img src="@/assets/images/wechat.png" class="w-24px h-24px" alt="">
      </div>
      <div>
        <div class="text-18px fw-bold custom-title-font">
          WhatsApp
        </div>
        <div class="text-#9B6CFF lh-24px">
          +1 (234) 567-890
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
::v-deep(.login-input) {
  &.error-txt{
    .el-input__wrapper{
      border: 1px solid red!important;
   }
  }
   .el-input__wrapper{
    border-radius: 10px;
   }
}
</style>