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'

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

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

watchEffect(() => {
  if (isLogin.value && isCompletedInfo.value)
    setEmailStep(4)
  else
    console.log('watchEffect-------1', isLogin.value, isCompletedInfo.value)
})

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.img})` }">
        <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.description }}
          </div>
          <!-- <div
            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="/">
              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 && accountList.length && loginType === 'account'" />
          <Choice v-if="emailStep === 0 && loginType === 'choice'" />
          <Mail v-if="emailStep === 1 && !selectedAccount" />
          <Mail v-if="emailStep === 1 && selectedAccount" />
          <Code v-if="emailStep === 2 && !isEmailGoogle " />
          <Google v-if="emailStep === 2 && isEmailGoogle === 'google'" />
          <!-- 填写信息 -->
          <Info v-if="emailStep === 3 && !isCompletedInfo" />
          <SubmitRequest v-if="emailStep === 3 && !!isCompletedInfo && downloadCatalog.type === 'request'" />
          <Finish v-if="emailStep === 4 && downloadCatalog.type === 'download'" />
          <Request v-if="emailStep === 4 && downloadCatalog.type === 'request'" />
        </div>
      </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>