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 useLoginAndDownload from './useLoginAndDownload'
import { useUserStore } from '@/stores/modules/user'
import { useCommonStore } from '@/stores/modules/common'

const commonStore = useCommonStore()
const { downloadCatalog, accountList, loginType } = storeToRefs(commonStore)
const { emailStep, isEmailGoogle, selectedAccount } = 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 })
</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">
      <div class="pt-110px pb-45px px-45px pos-relative bg-#D7C4FF w-375px">
        <img
          src="@/assets/images/login_icon01.png"
          alt=""
          class="w-110px h-110px pos-absolute top-0 left-0"
        >
        <div class="custom-title-font text-24px fw-800 text-#333">
          Welcome to EJET Spark!
        </div>
        <img
          src="@/assets/images/login_img01.png"
          alt=""
          class="my-20px w-276px h-225px mx-auto"
        >
        <div class="mb-10px custom-title-font text-18px fw-800 text-#333">
          EJET Spark Intro
        </div>
        <div class="text-14px text-#333 lh-22px">
          EJET Spark catalog description, spark the trend, ignate sales. EJET
          Spark catalog description, spark the trend, ignate sales.
        </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'" />
        </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>