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 } = 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(() => {
  console.log('watchEffect-------1000', isLogin.value, isCompletedInfo.value)
  if (isLogin.value) {
    if (isCompletedInfo.value) {
      if (downloadCatalog.value.downloadCondition === Condition.DOWNLOAD)
        setEmailStep(4)
      else
        setEmailStep(3)
    }

    else { setEmailStep(3) }
  }
})

onUnmounted(() => {
  console.log('组件卸载了', isCompletedInfo.value)
  // setEmailStep(3)
})
</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="pt-110px pb-52px px-45px flex flex-col justify-between pos-relative w-375px bg-cover bg-no-repeat" :style="{ backgroundImage: `url(${downloadCatalog.coverImg})` }">
        <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"
          >
            <NuxtLink :to="`/blog/${downloadCatalog.blogSlug}`">
              Learn More
            </NuxtLink>
          </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;
        }
      }
    }
  }
}
</style>