fashion-ssr-vue3/components/common/loginAndDownload/index.vue

<!-- @format -->

<script setup lang="ts">
import Choice from './comp/choice.vue'
import Mail from './comp/email/index.vue'
import Code from './comp/email/code.vue'
import Google from './comp/email/google.vue'
import AccountList from './comp/account/list.vue'
import Info from './comp/info/index.vue'
import Finish from './comp/info/finish.vue'
import SubmitRequest from './comp/info/submitRequest.vue'
import Request from './comp/info/request.vue'
import useLoginAndDownload from './useLoginAndDownload'
import { useUserStore } from '@/stores/modules/user'
import { useCommonStore } from '@/stores/modules/common'
import { Condition } from '@/enums/const-enums'

const commonStore = useCommonStore()
const { downloadCatalog, loginedAccountList, loginType } = storeToRefs(commonStore)
const { emailStep, isEmailGoogle, setEmailStep, loginForm } = useLoginAndDownload()
const userStore = useUserStore()
const { isLogin, isCompletedInfo } = storeToRefs(userStore)
const { isLoginAndDownloadOpen } = useLoginAndDownLoadModal()

watch(() => loginedAccountList.value, (newVal: any) => {
  if (newVal.length > 0)
    commonStore.setLoginType('account')
  else
    commonStore.setLoginType('choice')
}, { immediate: true })

watchEffect(() => {
  if (isLogin.value) {
    if (isCompletedInfo.value) {
      if (downloadCatalog.value.downloadCondition === Condition.DOWNLOAD)
        setEmailStep(4)
      else
        setEmailStep(3)
    }

    else { setEmailStep(3) }
  }
})

onUnmounted(() => {
  console.log('组件卸载了', loginForm.value)
  loginForm.value.captcha = ''
})
</script>

<template>
  <el-dialog
    v-model="isLoginAndDownloadOpen"
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="880"
  >
    <img
      src="@/assets/images/login_close_icon.png"
      alt=""
      class="w-32px h-32px bg-#F4F4F4 cursor-pointer p-8px b-rd-50% pos-absolute top-24px right-24px"
      @click="isLoginAndDownloadOpen = false"
    >
    <div class="flex min-h-550px">
      <div class="bg-login pos-relative w-375px bg-cover bg-no-repeat" :style="{ backgroundImage: `url(${downloadCatalog.coverImg})` }">
        <div class="pt-110px  pb-52px px-45px flex flex-col justify-between pos-absolute top-0 left-0 w-100% h-100%">
          <svgo-spark-logo
            class="!w-100px !h-24px  text-#fff"
          />
          <div>
            <div class="custom-title-font text-24px fw-800 text-#fff mb-24px">
              Download The Catalog
            </div>
            <div class="mb-10px custom-title-font text-18px fw-800 text-#fff">
              {{ downloadCatalog.title }}
            </div>
            <div class="text-14px text-#fff lh-22px mb-36px">
              {{ downloadCatalog.subhead }}
            </div>
            <div
              v-if="downloadCatalog.blogSlug && (emailStep === 0 || emailStep === 4)"
              class="w-110px h-32px lh-32px text-center b-rd-6px text-14px text-#9B6CFF fw-bold b-solid b-1px b-#9B6CFF cursor-pointer hover:bg-#9B6CFF hover:text-#fff"
              @click="isLoginAndDownloadOpen = false"
            >
              <NuxtLink :to="`/blog/${downloadCatalog.blogSlug}`">
                Learn More
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 b-rd-10px bg-#fff px-70px pt-100px">
        <div v-if="!isLogin">
          <!-- 登陆部分 -->
          <AccountList v-if="emailStep === 0 && loginedAccountList.length && loginType === 'account'" />
          <Choice v-if="emailStep === 0 && loginType === 'choice'" />
          <Mail v-if="emailStep === 1" />
          <Code v-if="emailStep === 2 && !isEmailGoogle" />
          <Google v-if="emailStep === 2 && isEmailGoogle" />
        </div>
        <!-- 填写信息 -->
        <Info v-if="emailStep === 3 && !isCompletedInfo" />
        <SubmitRequest v-if="emailStep === 3 && !!isCompletedInfo && downloadCatalog.downloadCondition === Condition.REQUEST" />
        <Finish v-if="emailStep === 4 && downloadCatalog.downloadCondition === Condition.DOWNLOAD" />
        <Request v-if="emailStep === 4 && downloadCatalog.downloadCondition === Condition.REQUEST" />
      </div>
    </div>
  </el-dialog>
</template>

<style lang="less">
.el-dialog {
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  .el-dialog__header {
    display: none;
    &.show-close {
      .el-dialog__headerbtn {
        width: 60px;
        height: 60px;
        .el-dialog__close {
          font-size: 30px;
          color: #000;
        }
      }
    }
  }
}
.bg-login{
  &::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px);
  }
}
</style>