{"version":3,"file":"LoginView-B6QiQPxW.js","sources":["../../src/components/login/background/DefaultAnimate.vue","../../src/components/login/background/MarketingBg.vue","../../src/components/login/ThirdPartSMSVerification.vue","../../src/composables/useKv.ts","../../src/views/LoginView.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { LocalStorageKeys } from '@/constants/enums/LocalStorageEnum';\nimport type { StorageSexValue, StorageUserStore } from '@/models/interface/storageValue';\nimport { useAppStore } from '@/stores/app';\nimport { useUserStore } from '@/stores/user';\nimport { UtilCommon } from '@/utils/utilCommon';\nimport 'swiper/css';\nimport { Autoplay, Pagination } from 'swiper/modules';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { computed, onMounted, onUnmounted, ref, type Ref } from 'vue';\n\nconst modules = [Autoplay, Pagination]; // swiper 模塊\n\ntype Area = 'listening' | 'speaking' | 'reading' | 'writing';\ntype ElementDataType = { bgSrc: string; modelSrc: string; textSrc: string; loaded: boolean };\n\nconst formChoose = defineModel('formChoose');\nconst { userData } = useUserStore();\nconst appStore = useAppStore();\n\nconst textGifEle = ref<HTMLImageElement | null>(null);\nconst listeningEle = ref<HTMLElement | null>(null);\nconst readingEle = ref<HTMLElement | null>(null);\nconst speakingEle = ref<HTMLElement | null>(null);\nconst writingEle = ref<HTMLElement | null>(null);\n\nlet flag = false;\nlet eachColumnTotalLoadedCount = 2; // (桌機版)每個區塊必須讀取完成圖片數量\nconst haveToClickCount = 4;\nconst isPlayVideo: Ref<boolean> = ref(false);\nconst isOpenAnimate: Ref<boolean> = ref(false);\nconst currentIndex: Ref<number> = ref(0); // 當前圖片index(桌機版)\nconst swiperOpen = ref(false);\nconst sex = ref(0); //預設女生\n\nconst gifDataList: { [key: string]: string } = {\n  listeningEle: '/images/login/Text_Listening.gif',\n  readingEle: '/images/login/Text_Reading.gif',\n  speakingEle: '/images/login/Text_Speaking.gif',\n  writingEle: '/images/login/Text_Writing.gif'\n};\n\n// 聽力(桌機版)\nconst listeningDataM: ElementDataType = {\n  bgSrc: '/images/login/ListeningBG_male.jpg',\n  modelSrc: '/images/login/ListeningMD_male.png',\n  textSrc: '/images/login/Text_Listening.gif',\n  loaded: false\n};\nconst listeningDataF: ElementDataType = {\n  bgSrc: '/images/login/ListeningBG.jpg',\n  modelSrc: '/images/login/ListeningMD.png',\n  textSrc: '/images/login/Text_Listening.gif',\n  loaded: false\n};\n// 閱讀(桌機版)\nconst readingDataM: ElementDataType = {\n  bgSrc: '/images/login/ReadingBG_male.jpg',\n  modelSrc: '/images/login/ReadingMD_male.png',\n  textSrc: '/images/login/Text_Reading.gif',\n  loaded: false\n};\nconst readingDataF: ElementDataType = {\n  bgSrc: '/images/login/ReadingBG.jpg',\n  modelSrc: '/images/login/ReadingMD.png',\n  textSrc: '/images/login/Text_Reading.gif',\n  loaded: false\n};\n// 口說(桌機版)\nconst speakingDataM: ElementDataType = {\n  bgSrc: '/images/login/SpeakingBG_male.jpg',\n  modelSrc: '/images/login/SpeakingMD_male.png',\n  textSrc: '/images/login/Text_Speaking.gif',\n  loaded: false\n};\nconst speakingDataF: ElementDataType = {\n  bgSrc: '/images/login/SpeakingBG.jpg',\n  modelSrc: '/images/login/SpeakingMD.png',\n  textSrc: '/images/login/Text_Speaking.gif',\n  loaded: false\n};\n// 寫作(桌機版)\nconst writingDataM: ElementDataType = {\n  bgSrc: '/images/login/WritingBG_male.jpg',\n  modelSrc: '/images/login/WritingMD_male.png',\n  textSrc: '/images/login/Text_Writing.gif',\n  loaded: false\n};\nconst writingDataF: ElementDataType = {\n  bgSrc: '/images/login/WritingBG.jpg',\n  modelSrc: '/images/login/WritingMD.png',\n  textSrc: '/images/login/Text_Writing.gif',\n  loaded: false\n};\n\nconst listeningData = computed(() => (sex.value ? listeningDataM : listeningDataF));\nconst readingData = computed(() => (sex.value ? readingDataM : readingDataF));\nconst speakingData = computed(() => (sex.value ? speakingDataM : speakingDataF));\nconst writingData = computed(() => (sex.value ? writingDataM : writingDataF));\n\n// 每個區塊讀取圖片數量(桌機版)\nconst loadedCount = ref({\n  listening: 0,\n  speaking: 0,\n  reading: 0,\n  writing: 0\n});\n\n// 圖片是否全部載入(桌機版)\nconst isDesktopImgAllLoaded = computed(\n  () =>\n    listeningData.value.loaded &&\n    readingData.value.loaded &&\n    speakingData.value.loaded &&\n    writingData.value.loaded\n);\n\nconst handleImgLoad = (data: ElementDataType, area: Area, type: string) => {\n  console.log('[handleImgLoad]');\n  console.log(`${area} Img loaded: ${type} `);\n  loadedCount.value[area]++;\n  if (loadedCount.value[area] === eachColumnTotalLoadedCount) {\n    data.loaded = true;\n  }\n};\n\n/** 延遲動畫確保前一個動畫結束 */\nconst delayAnimation = (element: HTMLElement, delayTime: number) => {\n  return new Promise((resolve) => {\n    window.setTimeout(() => {\n      animate(element);\n      resolve(true);\n    }, delayTime);\n  });\n};\n\nconst animationStart = async () => {\n  console.log('[animationStart]');\n  // TODO\n  // 1. Landing Text Animation Fade In\n\n  await delayAnimation(listeningEle.value as HTMLElement, 5000);\n  await delayAnimation(readingEle.value as HTMLElement, 6500);\n  await delayAnimation(speakingEle.value as HTMLElement, 6500);\n  await delayAnimation(writingEle.value as HTMLElement, 6500);\n\n  isPlayVideo.value = false;\n  console.log('[animationStart] ended');\n};\n\nconst animate = (target: HTMLElement) => {\n  console.log('[animate]');\n\n  const columns = document.querySelectorAll('.animation .column');\n\n  columns.forEach((col) => {\n    if (col !== target) {\n      (col as HTMLElement).style.flexBasis = '0';\n    } else {\n      col.classList.add('open');\n\n      window.setTimeout(() => {\n        textGifEle.value?.classList.add('show');\n      }, 500);\n    }\n  });\n  if (target?.style) {\n    target.style.flexBasis = '100%';\n  }\n  if (!textGifEle.value) {\n    return;\n  }\n  switch (target) {\n    case listeningEle.value:\n      (textGifEle.value as HTMLImageElement).src = gifDataList.listeningEle;\n      break;\n    case readingEle.value:\n      (textGifEle.value as HTMLImageElement).src = gifDataList.readingEle;\n      break;\n    case speakingEle.value:\n      (textGifEle.value as HTMLImageElement).src = gifDataList.speakingEle;\n      break;\n    case writingEle.value:\n      (textGifEle.value as HTMLImageElement).src = gifDataList.writingEle;\n      break;\n  }\n\n  if (isPlayVideo.value) {\n    window.setTimeout(() => {\n      columns.forEach((col) => {\n        (col as HTMLElement).style.flexBasis = '25%';\n        col.classList.remove('open');\n        textGifEle.value?.classList.remove('show');\n      });\n    }, 5000);\n  }\n};\n\nlet currentClickCount = 0;\nconst openHandler = (index: number) => {\n  if (isPlayVideo.value) return;\n\n  currentIndex.value = index;\n  isOpenAnimate.value = true;\n\n  if (index === 0) {\n    animate(listeningEle.value as HTMLElement);\n  } else if (index === 1) {\n    animate(readingEle.value as HTMLElement);\n  } else if (index === 2) {\n    animate(speakingEle.value as HTMLElement);\n  } else if (index === 3) {\n    animate(writingEle.value as HTMLElement);\n  }\n};\n\nconst closeHandler = () => {\n  currentIndex.value = 0;\n  isOpenAnimate.value = false;\n\n  const columns = document.querySelectorAll('.animation .column');\n\n  columns.forEach((col) => {\n    (col as HTMLElement).style.flexBasis = '25%';\n    (col as HTMLElement).classList.remove('open');\n    textGifEle.value?.classList.remove('show');\n  });\n};\n\nconst openNextHandler = (index: number) => {\n  if (flag) return;\n\n  textGifEle.value?.classList.remove('show');\n\n  currentIndex.value = index;\n  currentClickCount++;\n\n  if (currentClickCount < haveToClickCount) {\n    // 點擊次數少於4次 => 還有照片沒點擊\n\n    currentIndex.value++;\n    if (currentIndex.value === 4) {\n      currentIndex.value = 0;\n    }\n\n    openHandler(currentIndex.value);\n  } else {\n    // 全部照片都點擊過了\n    closeHandler();\n    currentClickCount = 0;\n  }\n\n  // 設定 flag 為 true，防止在一定時間內連續觸發\n  flag = true;\n  window.setTimeout(() => {\n    flag = false; // 在延遲後將 flag 設為 false，允許下一次觸發\n  }, 5000);\n};\n\nconst handleResize = () => {\n  swiperOpen.value = window.innerWidth <= 1200;\n};\n\nconst initialLoading = async () => {\n  if (isDesktopImgAllLoaded) {\n    // 全部桌機圖片載入完成\n    console.log('All Desktop Img are loaded!');\n    isPlayVideo.value = true;\n    // 開始播放動畫\n    await animationStart();\n    return;\n  }\n  initialLoading();\n};\n\nonMounted(() => {\n  if (appStore.isMobile) {\n    swiperOpen.value = appStore.isMobile;\n  }\n\n  //抓男生版還是女生版\n  const storageUser = UtilCommon.getLocalStorage<StorageUserStore>(LocalStorageKeys.UserStore);\n  const storage = UtilCommon.getLocalStorage<StorageSexValue[]>(LocalStorageKeys.Gender);\n\n  const storageValue = storage?.find(\n    (item) => item.userAccount === (storageUser?.userAccount ?? '')\n  );\n\n  if (storageValue) {\n    // sex.value = storageValue.value; 關閉男版\n  }\n\n  window.addEventListener('resize', handleResize);\n  initialLoading();\n});\n\nonUnmounted(() => {\n  window.removeEventListener('resize', handleResize);\n});\n</script>\n\n<template>\n  <div class=\"default-animate\">\n    <div v-if=\"!swiperOpen\" class=\"animation\">\n      <div ref=\"listeningEle\" class=\"column\" @click=\"openHandler(0)\">\n        <img\n          class=\"bg\"\n          :src=\"listeningData.bgSrc\"\n          alt=\"backgroundOfListening\"\n          @load=\"handleImgLoad(listeningData, 'listening', 'bg')\"\n        />\n        <img\n          class=\"model\"\n          :src=\"listeningData.modelSrc\"\n          alt=\"modelOfListening\"\n          @load=\"handleImgLoad(listeningData, 'listening', 'model')\"\n        />\n      </div>\n      <div ref=\"readingEle\" class=\"column\" @click=\"openHandler(1)\">\n        <img\n          class=\"bg\"\n          :src=\"readingData.bgSrc\"\n          alt=\"backgroundOfReading\"\n          @load=\"handleImgLoad(readingData, 'reading', 'bg')\"\n        />\n        <img\n          class=\"model\"\n          :src=\"readingData.modelSrc\"\n          alt=\"modelOfReading\"\n          @load=\"handleImgLoad(readingData, 'reading', 'model')\"\n        />\n      </div>\n      <div ref=\"speakingEle\" class=\"column\" @click=\"openHandler(2)\">\n        <img\n          class=\"bg\"\n          :src=\"speakingData.bgSrc\"\n          alt=\"backgroundOfSpeaking\"\n          @load=\"handleImgLoad(speakingData, 'speaking', 'bg')\"\n        />\n        <img\n          class=\"model\"\n          :src=\"speakingData.modelSrc\"\n          alt=\"modelOfSpeaking\"\n          @load=\"handleImgLoad(speakingData, 'speaking', 'model')\"\n        />\n      </div>\n      <div ref=\"writingEle\" class=\"column\" @click=\"openHandler(3)\">\n        <img\n          class=\"bg\"\n          :src=\"writingData.bgSrc\"\n          alt=\"backgroundOfWriting\"\n          @load=\"handleImgLoad(writingData, 'writing', 'bg')\"\n        />\n        <img\n          class=\"model\"\n          :src=\"writingData.modelSrc\"\n          alt=\"modelOfWriting\"\n          @load=\"handleImgLoad(writingData, 'writing', 'model')\"\n        />\n      </div>\n\n      <div class=\"text-wrapper\">\n        <p class=\"text-landing\">學習 隨手可得</p>\n      </div>\n\n      <div\n        v-if=\"!isPlayVideo && isOpenAnimate\"\n        class=\"goNextAnimate\"\n        @click=\"openNextHandler(currentIndex)\"\n      >\n        Next\n      </div>\n\n      <img ref=\"textGifEle\" class=\"text-gif\" src=\"\" />\n    </div>\n\n    <swiper\n      v-else\n      class=\"fullPage\"\n      :spaceBetween=\"30\"\n      :autoplay=\"{\n        delay: 3500,\n        disableOnInteraction: false\n      }\"\n      :pagination=\"{\n        clickable: true\n      }\"\n      :modules=\"modules\"\n    >\n      <swiper-slide>\n        <div class=\"swiper-image-wrapper\">\n          <img\n            :src=\"`/images/login/${sex ? 'listening_mobile_male.png' : 'listening_mobile.jpg'}`\"\n            alt=\"backgroundOfListening\"\n          />\n        </div>\n      </swiper-slide>\n\n      <swiper-slide>\n        <div class=\"swiper-image-wrapper\">\n          <img\n            :src=\"`/images/login/${sex ? 'reading_mobile_male.png' : 'reading_mobile.jpg'}`\"\n            alt=\"backgroundOfReading\"\n          />\n        </div>\n      </swiper-slide>\n\n      <swiper-slide>\n        <div class=\"swiper-image-wrapper\">\n          <img\n            :src=\"`/images/login/${sex ? 'speaking_mobile_male.png' : 'speaking_mobile.jpg'}`\"\n            alt=\"backgroundOfSpeaking\"\n          />\n        </div>\n      </swiper-slide>\n\n      <swiper-slide>\n        <div class=\"swiper-image-wrapper\">\n          <img\n            :src=\"`/images/login/${sex ? 'writing_mobile_male.png' : 'writing_mobile.jpg'}`\"\n            alt=\"backgroundOfWriting\"\n          />\n        </div>\n      </swiper-slide>\n    </swiper>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n$column_open_duration: 1.5s;\n\n.default-animate {\n  @include wh;\n}\n\n.animation {\n  position: relative;\n  display: flex;\n  @include wh;\n\n  &:after {\n    content: '';\n    @include absolute($T: 0, $L: 0);\n    @include wh;\n    background: linear-gradient(to bottom, rgba(25, 25, 25, 0) 80%, #191919 100%);\n    pointer-events: none;\n  }\n}\n\n.column {\n  position: relative;\n  width: 100%;\n  flex: 1 1 25%;\n  transition: flex-basis 1.5s ease;\n  overflow: hidden;\n  height: 100vh;\n\n  // &:hover {\n  //     img {\n  //         filter: grayscale(00%);\n  //     }\n  // }\n\n  img {\n    position: absolute;\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    // filter: grayscale(100%);\n\n    transition:\n      all $column_open_duration ease,\n      filter 0.3s ease-in;\n\n    &.bg {\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      width: 100%;\n    }\n\n    &.model {\n      // left: 50%;\n    }\n  }\n\n  /** Listening */\n  &:nth-child(1) {\n    img.model {\n      top: 100px;\n      left: 5%;\n      transform: scale(1.2);\n\n      @media (min-width: calc(1700px - 0.02px)) and (max-width: 1800px) {\n        left: 0%;\n      }\n\n      @media (min-width: calc(1600px - 0.02px)) and (max-width: 1700px) {\n        left: 0%;\n      }\n\n      @media (min-width: calc(1500px - 0.02px)) and (max-width: 1600px) {\n        left: -2%;\n      }\n\n      @media (min-width: calc(1400px - 0.02px)) and (max-width: 1500px) {\n        left: -5%;\n      }\n\n      @media (min-width: calc(1300px - 0.02px)) and (max-width: 1400px) {\n        left: -10%;\n      }\n\n      @media (min-width: 1200px) and (max-width: 1300px) {\n        left: -15%;\n      }\n    }\n\n    &.open {\n      // img {\n      //     filter: grayscale(0%);\n      // }\n\n      img.model {\n        top: 200px;\n\n        transform: scale(1.5);\n\n        @media (min-width: calc(1500px - 0.02px)) and (max-width: 1800px) {\n          left: 10%;\n        }\n\n        @media (min-width: calc(1300px - 0.02px)) and (max-width: 1500px) {\n          left: 10%;\n        }\n\n        @media (min-width: 1200px) and (max-width: 1300px) {\n          left: 0%;\n        }\n      }\n    }\n  }\n\n  /** Reading */\n  &:nth-child(2) {\n    img.model {\n      top: 0;\n      right: -50%;\n      transform: scale(1.3);\n\n      @media (min-width: calc(1700px - 0.02px)) and (max-width: 1800px) {\n        right: -60%;\n      }\n\n      @media (min-width: calc(1600px - 0.02px)) and (max-width: 1700px) {\n        right: -65%;\n      }\n\n      @media (min-width: calc(1500px - 0.02px)) and (max-width: 1600px) {\n        right: -75%;\n      }\n\n      @media (min-width: calc(1400px - 0.02px)) and (max-width: 1500px) {\n        right: -85%;\n      }\n\n      @media (min-width: calc(1350px - 0.02px)) and (max-width: 1400px) {\n        right: -90%;\n      }\n\n      @media (min-width: calc(1300px - 0.02px)) and (max-width: 1350px) {\n        right: -100%;\n      }\n\n      @media (min-width: 1200px) and (max-width: 1300px) {\n        right: -105%;\n      }\n    }\n\n    &.open {\n      // img {\n      //     filter: grayscale(0%);\n      // }\n\n      img.model {\n        top: 200px;\n        right: 10%;\n        transform: scale(1.8);\n      }\n    }\n  }\n\n  /** Listening */\n  &:nth-child(3) {\n    img.model {\n      top: 30px;\n      left: -20%;\n      transform: scale(1.2);\n\n      @media (min-width: calc(1700px - 0.02px)) and (max-width: 1800px) {\n        left: -25%;\n      }\n\n      @media (min-width: calc(1600px - 0.02px)) and (max-width: 1700px) {\n        left: -30%;\n      }\n\n      @media (min-width: calc(1500px - 0.02px)) and (max-width: 1600px) {\n        left: -40%;\n      }\n\n      @media (min-width: calc(1400px - 0.02px)) and (max-width: 1500px) {\n        left: -45%;\n      }\n\n      @media (min-width: calc(1300px - 0.02px)) and (max-width: 1400px) {\n        left: -55%;\n      }\n\n      @media (min-width: calc(1200px - 0.02px)) and (max-width: 1300px) {\n        left: -60%;\n      }\n    }\n\n    &.open {\n      // img {\n      //     filter: grayscale(0%);\n      // }\n\n      img.model {\n        top: 150px;\n        left: 10%;\n\n        transform: scale(1.5);\n      }\n    }\n  }\n\n  /** Writing */\n  &:nth-child(4) {\n    img.model {\n      top: 120px;\n      right: -25%;\n      transform: scale(1.2);\n\n      @media (min-width: calc(1700px - 0.02px)) and (max-width: 1800px) {\n        right: -30%;\n      }\n\n      @media (min-width: calc(1600px - 0.02px)) and (max-width: 1700px) {\n        right: -35%;\n      }\n\n      @media (min-width: calc(1500px - 0.02px)) and (max-width: 1600px) {\n        right: -40%;\n      }\n\n      @media (min-width: calc(1400px - 0.02px)) and (max-width: 1500px) {\n        right: -50%;\n      }\n\n      @media (min-width: calc(1300px - 0.02px)) and (max-width: 1400px) {\n        right: -55%;\n      }\n\n      @media (min-width: 1200px) and (max-width: 1300px) {\n        right: -60%;\n      }\n    }\n\n    &.open {\n      // img {\n      //     filter: grayscale(0%);\n      // }\n\n      img.model {\n        top: 230px;\n        right: 10%;\n        transform: scale(1.4);\n      }\n    }\n  }\n}\n\n.text-wrapper {\n  position: absolute;\n  @include wh;\n  pointer-events: none;\n\n  transition: opacity 1.5s ease;\n\n  .text {\n    &-landing {\n      @include absolute($T: 50%, $L: 50%);\n      @apply text-32 line-150 color-white;\n      letter-spacing: 24px;\n      transform: translate(-50%, 0);\n\n      opacity: 0;\n    }\n  }\n}\n\n.text-gif {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 80%;\n\n  opacity: 0;\n  pointer-events: none;\n  mix-blend-mode: screen;\n\n  &.show {\n    // opacity: 1;\n    animation: fadeInAnimate 0.5s ease 1 forwards;\n    animation-play-state: running;\n    animation-delay: 300ms;\n  }\n}\n\n@keyframes fadeInAnimate {\n  0% {\n    transform: translate(-50%, -50%) scale(0);\n    opacity: 0;\n  }\n\n  100% {\n    transform: translate(-50%, -50%) scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutAnimate {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    opacity: 1;\n  }\n\n  100% {\n    transform: translate(-50%, -50%) scale(0);\n    opacity: 0;\n  }\n}\n\n.goNextAnimate {\n  position: absolute;\n  bottom: 32px;\n  right: 5%;\n  font-size: 32px;\n  line-height: 150%;\n  color: $txt-color-white-40;\n  letter-spacing: 4px;\n  width: 260px;\n  transition: all 0.5s ease;\n  cursor: pointer;\n  z-index: 1;\n\n  &:before {\n    position: absolute;\n    bottom: 22px;\n    right: -8px;\n    content: '';\n    height: 1px;\n    width: 60px;\n    background: $txt-color-white-40;\n    transform: rotate(45deg);\n  }\n\n  &:after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 1px;\n    width: 100%;\n    background: $txt-color-white-40;\n  }\n\n  &:hover {\n    color: $txt-color-white-80;\n\n    &:before {\n      background: $txt-color-white-60;\n    }\n\n    &:after {\n      background: $txt-color-white-60;\n    }\n  }\n}\n\n.swiper-image-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100dvh;\n  background: #191919;\n\n  img {\n    width: 100%;\n    height: 100%;\n    @include absolute;\n    left: 50%;\n    transform: translateX(-50%);\n    object-fit: cover;\n  }\n}\n\n.join-btn--mobile {\n  @include absolute;\n  z-index: 2;\n  left: 50%;\n  bottom: 180px;\n  transform: translateX(-50%);\n  width: 50%;\n}\n\n.swiper {\n  .swiper-pagination {\n    bottom: 180px !important;\n  }\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { useAppStore } from '@/stores/app';\n\nconst appStore = useAppStore();\nconst imageData = computed(() => {\n    return {\n        desktop: sessionStorage.getItem('adImagePcUrl') || '',\n        mobile: sessionStorage.getItem('adImageSrcPhoneUrl') || ''\n    };\n});\n</script>\n<template>\n    <div class=\"marketing-bg\">\n        <img class=\"bg-desktop\" v-if=\"!appStore.isMobile\" :src=\"imageData.desktop\" alt=\"\" />\n        <img class=\"bg-mobile\" v-else :src=\"imageData.mobile\" alt=\"\" />\n    </div>\n</template>\n<style lang=\"scss\" scoped>\n.marketing-bg {\n    @include wh;\n\n    // .bg {\n    //     &-desktop {\n    //         @include wh;\n    //         object-fit: cover;\n    //     }\n    // }\n\n    img {\n        @include wh;\n        object-fit: cover;\n    }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { CookiesKeys } from '@/constants/enums/CookiesEnum';\nimport { LocalStorageKeys } from '@/constants/enums/LocalStorageEnum';\nimport { RuleEnum } from '@/constants/enums/RuleEnum';\nimport type { SignupData } from '@/models/interface/register';\nimport { api } from '@/services';\nimport { isApiSuccess, resolveApiData } from '@/utils/api/functions';\nimport { UtilCommon } from '@/utils/utilCommon';\nimport WrongAlert from './errorAlert/WrongAlert.vue';\nimport WrongMessage from './errorAlert/WrongMessage.vue';\nimport WrongSignupPhone from './errorAlert/WrongSignupPhone.vue';\nimport WrongVerificationCode from './errorAlert/WrongVerificationCode.vue';\nimport FormCard from './formElement/FormCard.vue';\nimport FormInput from './formElement/FormInput.vue';\n\nconst router = useRouter();\nconst user = useUserStore();\n\nconst formChoose = defineModel('formChoose');\nconst showPopup = defineModel('showPopup');\nconst showAlert = defineModel('showAlert');\nconst information = defineModel<SignupData>('information', { required: true });\nconst inputRefVerificationCode = ref<InstanceType<typeof FormInput>>();\n\nconst { timeLeft, isCounting, startCountdown, resetTime } = useCountdown();\nconst verifyCodeText = ref<string>('重發');\nconst isSubmit = ref<boolean>(false);\n\nconst { fetchData } = useRegister();\n\nconst sendVerifyCode = async () => {\n  resetTime();\n  startCountdown();\n  information.value.verificationCode = '';\n\n  const type = window.localStorage.getItem('from-third-party-type');\n\n  const res = await api.auth.thirdPartySMSVerification({\n    phone: information.value.phone,\n    email: window.localStorage.getItem('from-third-party-email') ?? '',\n    fullName: information.value.fullName,\n    thirdPartyId: window.localStorage.getItem('from-third-party-id') ?? '',\n    type: type ? parseInt(type) : 5\n  });\n\n  if (isApiSuccess(res)) return;\n\n  resetTime();\n\n  if (res.data.errorCode === -4020 || res.data.errorCode === -4038) {\n    showPopup.value = true;\n    showAlert.value = WrongSignupPhone;\n    return;\n  }\n\n  showPopup.value = true;\n  showAlert.value = WrongMessage;\n};\n\nconst handleSubmit = async () => {\n  isSubmit.value = true;\n  const checked = inputRefVerificationCode.value?.handleBlur() ?? false;\n\n  if (!checked) {\n    isSubmit.value = false;\n    return;\n  }\n\n  const mgm = UtilCommon.getLocalStorage<string>(LocalStorageKeys.MGMCode);\n  const adId = UtilCommon.getCookie(CookiesKeys.AdId);\n  const type = window.localStorage.getItem('from-third-party-type');\n\n  const res = await api.auth.thirdPartyRegister({\n    ...information.value,\n    email: window.localStorage.getItem('from-third-party-email') ?? '',\n    thirdPartyId: window.localStorage.getItem('from-third-party-id') ?? '',\n    type: type ? parseInt(type) : 5,\n    sex: parseInt(information.value.sex),\n    roleType: 0,\n    ad_Id: adId ? parseInt(adId) : 0,\n    refMGMCode: mgm ?? ''\n  });\n\n  if (isApiSuccess(res)) {\n    user.token = resolveApiData(res);\n    window.localStorage.removeItem('from-third-party-email');\n    window.localStorage.removeItem('from-third-party-id');\n    window.localStorage.removeItem('from-third-party-type');\n\n    router.push({ name: 'thankYou' });\n    return\n  }\n\n  isSubmit.value = false;\n  if (res.data.errorCode === -4038 || res.data.errorCode === -4061) {\n    showPopup.value = true;\n    showAlert.value = WrongSignupPhone;\n    return;\n  }\n  if (res.data.errorCode === -4035 || res.data.errorCode === -4047) {\n    showPopup.value = true;\n    showAlert.value = WrongVerificationCode;\n    return;\n  }\n  showPopup.value = true;\n  showAlert.value = WrongMessage;\n};\n\nconst handleClick = async () => {\n  fetchData({ tel: information.value.phone });\n\n  showPopup.value = true;\n  showAlert.value = WrongAlert;\n};\n\nonMounted(() => {\n  startCountdown();\n});\n</script>\n\n<template>\n  <FormCard>\n    <div class=\"title-container\">\n      <p>簡訊驗證碼</p>\n      <div class=\"cross-btn\" @click=\"formChoose = ''\">\n        <SvgIcon color=\"grey\" name=\"cross\" />\n      </div>\n    </div>\n\n    <div class=\"verify-container\">\n      <FormInput\n        ref=\"inputRefVerificationCode\"\n        inputPlaceHolder=\"請輸入簡訊驗證碼\"\n        inputTitle=\"\"\n        inputType=\"text\"\n        :verifyRule=\"RuleEnum.VerificationCode\"\n        v-model:inputValue=\"information.verificationCode\"\n        style=\"margin: 0\"\n        canDeleteAll\n      >\n        <p class=\"verify-hint\">超過30分鐘，驗證碼即失效</p>\n      </FormInput>\n\n      <button\n        v-if=\"information.verificationCode.trim() === '' || !isCounting\"\n        class=\"send-verify-code\"\n        :class=\"{ isCounting: isCounting }\"\n        @click=\"sendVerifyCode\"\n        :disabled=\"isSubmit\"\n      >\n        {{ isCounting ? `${timeLeft}s` : verifyCodeText }}\n      </button>\n    </div>\n\n    <div class=\"submit\" :class=\"{ isSubmit: isSubmit }\" @click=\"handleSubmit\">\n      <p>免費加入</p>\n      <svg\n        v-if=\"isSubmit\"\n        width=\"21\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"animate-spin ml-1.5\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M9.75 1C9.75 0.585786 10.0858 0.25 10.5 0.25C15.8848 0.25 20.25 4.61522 20.25 10C20.25 15.3848 15.8848 19.75 10.5 19.75C5.11522 19.75 0.75 15.3848 0.75 10C0.75 9.58579 1.08579 9.25 1.5 9.25C1.91421 9.25 2.25 9.58579 2.25 10C2.25 14.5564 5.94365 18.25 10.5 18.25C15.0564 18.25 18.75 14.5564 18.75 10C18.75 5.44365 15.0564 1.75 10.5 1.75C10.0858 1.75 9.75 1.41421 9.75 1Z\"\n          fill=\"white\"\n        />\n      </svg>\n    </div>\n\n    <p class=\"no-verify\" @click=\"handleClick\">一直未收到驗證碼?</p>\n  </FormCard>\n</template>\n\n<style lang=\"scss\" scoped>\n/** style */\n.title-container {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  position: relative;\n  margin-bottom: 16px;\n  p {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #000000cc;\n    font-size: 18px;\n    font-weight: 600;\n  }\n  .cross-btn {\n    cursor: pointer;\n  }\n}\n.verify-container {\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: self-start;\n  gap: 8px;\n\n  .send-verify-code {\n    border-radius: 4px;\n    margin-top: 4px;\n    width: 102px;\n    flex-shrink: 0;\n    white-space: nowrap;\n    height: 48px;\n    color: $txt-color-grey-80;\n    font-size: 18px;\n    background-color: #f4f4f4;\n    border: none;\n    cursor: pointer;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n  .isCounting {\n    user-select: none;\n    pointer-events: none;\n  }\n  .verify-hint {\n    color: $txt-color-grey-24;\n    font-size: 12px;\n    width: 100%;\n    padding: 8px;\n  }\n}\n.submit {\n  margin: 16px 0;\n  background-color: #f74768;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  color: #ffffff;\n  height: 40px;\n  width: 100%;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.8;\n  }\n\n  &.isSubmit {\n    user-select: none;\n    pointer-events: none;\n  }\n}\n.no-verify {\n  color: #f74768;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  text-align: center;\n  width: 100%;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.8;\n  }\n}\n\n.junior-landing-page > .main-content > .card > .submit {\n  background-color: $color-brownish-100;\n}\n\n.junior-landing-page > .main-content > .card > .no-verify {\n  color: $color-brownish-100;\n}\n</style>\n","import type { KV, KVContent } from '@/models/interface/kv';\nimport type { HookState } from '@/models/interface/response';\nimport { api } from '@/services';\nimport { reactive } from 'vue';\n\nconst basicDomain = 'https://dsn.funday.asia/funday/';\n\nfunction dto (p: KVContent): KV | undefined {\n  p.list.map((v: any) => {\n    if (v.imageDesktop) {\n      v.imageDesktop = basicDomain + v.imageDesktop\n    }\n\n    if (v.imagePad) {\n      v.imagePad = basicDomain + v.imagePad\n    }\n\n    if (v.imageMobile) {\n      v.imageMobile = basicDomain + v.imageMobile\n    }\n  })\n  // console.log('===', p)\n  return p.list.length > 0 ? p.list[0] : undefined;\n}\n\nexport function useKv() {\n  const state = reactive<HookState<KV | undefined>>({\n    data: undefined,\n    isLoading: false,\n    isSuccessful: false,\n    error: undefined,\n  });\n\n  // 列表查看\n  const fetchAll = async () => {\n    state.isLoading = true;\n    state.error = null;\n    try {\n      const res = await api.kv.fetchAll();\n\n      state.data = dto(res.data.content);\n    } catch (error: any) {\n      state.error = error.message;\n    } finally {\n      state.isLoading = false;\n    }\n  };\n\n  return {\n    state,\n    fetchAll,\n  };\n}\n","<script setup lang=\"ts\">\nimport MarketingBg from '@/components/login/background/MarketingBg.vue';\nimport WrongLogin from '@/components/login/errorAlert/WrongLogin.vue';\nimport ForgetPassword from '@/components/login/ForgetPassword.vue';\nimport LoginBackground from '@/components/login/LoginBackground.vue';\nimport LoginFooter from '@/components/login/LoginFooter.vue';\nimport LoginForm from '@/components/login/LoginForm.vue';\nimport LoginHeader from '@/components/login/LoginHeader.vue';\nimport SignupForm from '@/components/login/SignupForm.vue';\nimport SMSVerification from '@/components/login/SMSVerification.vue';\nimport ThirdPartSignupForm from '@/components/login/ThirdPartSignupForm.vue';\nimport ThirdPartSMSVerification from '@/components/login/ThirdPartSMSVerification.vue';\nimport { RouteEnum } from '@/constants/enums/RouteEnum';\nimport type { SignupData } from '@/models/interface/register';\n\nconst router = useRouter();\nconst user = useUserStore();\nconst { state: KvState, fetchAll } = useKv();\n\nconst showForm = shallowRef<{ [key: string]: Component }>({\n  LoginForm,\n  SignupForm,\n  ThirdPartSignupForm,\n  ForgetPassword,\n  SMSVerification,\n  ThirdPartSMSVerification\n});\nconst formChoose = ref('');\nconst showPopup = ref(false);\nconst showAlert = shallowRef<{ [key: string]: Component }>({\n  WrongLogin\n});\nconst rememberAccountAndPassword = ref(false);\nconst information = ref<SignupData>({\n  fullName: '',\n  email: '',\n  phone: '',\n  sex: '-1',\n  verificationCode: '',\n  mechType: useIsMobile() ? 'Mobile' : 'PC'\n});\nconst isMobile = ref(window.innerWidth <= 768);\n\nconst isFromAd = computed(() => {\n  return sessionStorage.getItem('isFromAd') === 'true';\n});\nconst adImagePcUrl = computed(() => {\n  return sessionStorage.getItem('adImagePcUrl') ? sessionStorage.getItem('adImagePcUrl') : '';\n});\nconst adImageMobileUrl = computed(() => {\n  return sessionStorage.getItem('adImageSrcPhoneUrl')\n    ? sessionStorage.getItem('adImageSrcPhoneUrl')\n    : '';\n});\n\nconst getMemberDataAndLogin = async (token: string) => {\n  user.token = token;\n  user.isLogin = true;\n  user.isFirstLogin = true;\n\n  router.push({ name: RouteEnum.Index });\n};\nconst handleUpdateSize = () => {\n  isMobile.value = window.innerWidth <= 768;\n};\n\nonMounted(async () => {\n  const thirdPartySigUp = sessionStorage.getItem('thirdPartySigUp');\n\n  if (thirdPartySigUp) {\n    formChoose.value = 'ThirdPartSignupForm';\n  }\n  fetchAll();\n  window.addEventListener('resize', handleUpdateSize);\n});\n\nonUnmounted(() => {\n  window.removeEventListener('resize', handleUpdateSize);\n});\n</script>\n\n<template>\n  <div class=\"landing-page\">\n    <LoginHeader v-model:formChoose=\"formChoose\" />\n\n    <div class=\"main-content\">\n      <LoginBackground v-model:formChoose=\"formChoose\" :kv-img-error=\"KvState.error\">\n        <!-- <img\n          v-if=\"!isFromAd || !adImagePcUrl || !adImageMobileUrl\"\n          :src=\"isMobile ? KvState.data?.imageMobile : KvState.data?.imageDesktop\"\n          :alt=\"isMobile ? KvState.data?.imageMobile : KvState.data?.imageDesktop\"\n          class=\"w-full h-full\"\n        /> -->\n        <DefaultAnimate v-if=\"!isFromAd || !adImagePcUrl || !adImageMobileUrl\" />\n        <MarketingBg v-else />\n      </LoginBackground>\n\n      <component\n        v-model:formChoose=\"formChoose\"\n        v-model:showPopup=\"showPopup\"\n        v-model:showAlert=\"showAlert\"\n        v-model:rememberAccountAndPassword=\"rememberAccountAndPassword\"\n        v-model:information=\"information\"\n        @getMemberDataAndLogin=\"getMemberDataAndLogin\"\n        :is=\"showForm[formChoose]\"\n      ></component>\n\n      <PopupOverlay v-model:showPopup=\"showPopup\" :zIndex=\"9999\">\n        <component\n          v-model:showPopup=\"showPopup\"\n          v-model:formChoose=\"formChoose\"\n          :is=\"showAlert\"\n        ></component>\n      </PopupOverlay>\n    </div>\n\n    <LoginFooter />\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.landing-page {\n  max-width: 1920px;\n  margin: 0 auto;\n}\n.main-content {\n  position: relative;\n  width: 100%;\n}\n</style>\n"],"names":["haveToClickCount","modules","Autoplay","Pagination","_useModel","__props","userData","useUserStore","appStore","useAppStore","textGifEle","ref","listeningEle","readingEle","speakingEle","writingEle","flag","eachColumnTotalLoadedCount","isPlayVideo","isOpenAnimate","currentIndex","swiperOpen","sex","gifDataList","listeningDataM","listeningDataF","readingDataM","readingDataF","speakingDataM","speakingDataF","writingDataM","writingDataF","listeningData","computed","readingData","speakingData","writingData","loadedCount","isDesktopImgAllLoaded","handleImgLoad","data","area","type","delayAnimation","element","delayTime","resolve","animate","animationStart","target","columns","col","_a","currentClickCount","openHandler","index","closeHandler","openNextHandler","handleResize","initialLoading","onMounted","storageUser","UtilCommon","LocalStorageKeys","storage","item","onUnmounted","imageData","router","useRouter","user","formChoose","showPopup","showAlert","information","inputRefVerificationCode","timeLeft","isCounting","startCountdown","resetTime","useCountdown","verifyCodeText","isSubmit","fetchData","useRegister","sendVerifyCode","res","api","_b","isApiSuccess","WrongSignupPhone","WrongMessage","handleSubmit","mgm","adId","CookiesKeys","_c","_d","resolveApiData","WrongVerificationCode","handleClick","WrongAlert","basicDomain","dto","p","v","useKv","state","reactive","error","KvState","fetchAll","showForm","shallowRef","LoginForm","SignupForm","ThirdPartSignupForm","ForgetPassword","SMSVerification","ThirdPartSMSVerification","WrongLogin","rememberAccountAndPassword","useIsMobile","isMobile","isFromAd","adImagePcUrl","adImageMobileUrl","getMemberDataAndLogin","token","RouteEnum","handleUpdateSize"],"mappings":"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"}