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

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

const commonStore = useCommonStore()
const { loginedAccountList, loginType } = storeToRefs(commonStore)

const { emailStep, isEmailGoogle } = useLogin()
const { isLoginModalOpen, closeLoginModal } = useLoginModal()

const route = useRoute()

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

watch(() => route.path, () => {
  if (isLoginModalOpen.value)
    closeLoginModal({ status: false, error: '用户取消登录' })
})
onUnmounted(() => {
  console.log('onUnmounted------>>登陆弹窗销毁')
})
</script>

<template>
  <el-dialog
    v-model="isLoginModalOpen"
    :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="isLoginModalOpen = 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">
        <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>
    </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>