landing-page/ylqdh_onesstore_2/src/views/IndexView.vue

<script setup>
import 'swiper/css'
import 'swiper/css/pagination'

import { useElementVisibility } from '@vueuse/core'
import { nextTick, onMounted, ref, onUnmounted } from 'vue'
import WOW from 'wow.js'
import { v4 as uuidv4 } from 'uuid'
import { clickEventApi } from '@/api'
import { getUrlParams, getCommonSign } from '@/utitls'


const appStoreBtnClick = () => {
  reportEvent('APP_STORE_CLICK', () => {
    fbq('track', 'FB')
    fbq('track', 'Metaclick')
    reportApiEvent()
  })

  // window.open('https://apps.apple.com/tw/app/id6504406401')
}

const fbBtnClick = () => {
  reportEvent('ONEPRE_FB_CLICK', () => {
    fbq('track', 'FbPage')
    reportApiEvent()
  })
  console.log('FbPage')

  window.open('https://www.facebook.com/profile.php?id=61580192046090')
}

const apkBtnClick = () => {
  reportEvent('ONEPRE_CLICK', () => {
    fbq('track', 'Onepre')
    reportApiEvent()
  })
  console.log('Onepre')

  window.open('http://onesto.re/0001003604')
}

const topBannerRef = ref(null)
const topBannerIsVisible = useElementVisibility(topBannerRef)
const isIOS = ref(false)
const isAndroid = ref(false)





// 设备去重上报相关
const DEVICE_UUID_KEY = 'device_uuid'
const REPORTED_EVENTS_KEY = 'reported_events'

// 生成或获取设备UUID
const getDeviceUUID = () => {
  let deviceUUID = localStorage.getItem(DEVICE_UUID_KEY)
  if (!deviceUUID) {
    deviceUUID = uuidv4()
    localStorage.setItem(DEVICE_UUID_KEY, deviceUUID)
  }
  return deviceUUID
}

// 检查事件是否已上报
const isEventReported = (eventType) => {
  const reportedEvents = JSON.parse(localStorage.getItem(REPORTED_EVENTS_KEY) || '[]')
  return reportedEvents.includes(eventType)
}

// 标记事件为已上报
const markEventAsReported = (eventType) => {
  const reportedEvents = JSON.parse(localStorage.getItem(REPORTED_EVENTS_KEY) || '[]')
  if (!reportedEvents.includes(eventType)) {
    reportedEvents.push(eventType)
    localStorage.setItem(REPORTED_EVENTS_KEY, JSON.stringify(reportedEvents))
  }
}

// 设备去重上报函数
const reportEvent = (eventType, callback) => {
  if (!isEventReported(eventType)) {
    // 首次上报，执行回调
    callback()
    // 标记为已上报
    markEventAsReported(eventType)
    console.log(`事件 ${eventType} 首次上报成功`)
  } else {
    console.log(`事件 ${eventType} 已上报过，跳过`)
  }
}

const checkPlatform = () => {
  if (navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('iPad') > -1) {
    isIOS.value = true
  } else if (navigator.userAgent.indexOf('Android') > -1) {
    isAndroid.value = true
  } else {
    isIOS.value = false
    isAndroid.value = true
  }
}

// 回传API
const reportApiEvent = () => {
  const urlParams = getUrlParams(window.location.href)
  if (!urlParams) {
  } else {
    const params = {
      event_name: 'click',
      media_source: urlParams.pid,
      game_id: urlParams.gid,
      device_uuid: getDeviceUUID(),
      url_params: urlParams
    }
    const data = getCommonSign(params)
    clickEventApi(data)
  }
}

onMounted(() => {
  checkPlatform()

  // 初始化设备UUID
  getDeviceUUID()

  nextTick().then(() => {
    new WOW({
      animateClass: 'animate__animated',
      offset: 150
    }).init()
  })
})

onUnmounted(() => {
})
</script>

<template>
  <div id="content-wrapper" style="width: 100%; height: auto">
   <section ref="topBannerRef" id="top-banner" class="flex items-center justify-end">
      <div
        class="flex items-center justify-evenly "
        style="width: 2.2rem"
      >
      <a
        class="block btn btn-download-banner-btn"
        href="javascript:;"
        @click.prevent.stop="apkBtnClick"
      ></a>
      <!-- <a class="block btn btn-fb" href="javascript:;" @click.prevent.stop="fbBtnClick"></a> -->
      </div>
      
    </section>
    <div class="container" style="width: 100%; height: auto">
      <img src="@/assets/imgs/bg.jpg" class="block btn" alt="">
      <a
        class="block btn download_btn"
        href="javascript:;"
        @click.prevent.stop="apkBtnClick"
      ></a>
      <div class="gift_warp">
        <img src="@/assets/imgs/gift_1.png" alt="">
        <img src="@/assets/imgs/gift_2.png" alt="">
        <img src="@/assets/imgs/gift_3.png" alt="">
        <img src="@/assets/imgs/gift_4.png" alt="">
      </div>
    </div>
   <transition>
      <section
        v-show="!topBannerIsVisible"
        id="bottom-banner"
        class="flex items-center justify-end"
      >
        <div
          class="flex items-center justify-evenly"
          style="width: 2.2rem"
        >
          <a
            class="block btn btn-download-banner-btn"
            href="javascript:;"
            @click.prevent.stop="apkBtnClick"
          ></a>
           <!-- <a class="block btn btn-fb" href="javascript:;" @click.prevent.stop="fbBtnClick"></a> -->
         
        </div>
      </section>
    </transition>
  </div>
</template>

<style scoped>
.container{
  background-image: url('@/assets/imgs/bg.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  position:relative;
  padding-bottom: 1.1rem;
}

#top-banner {
  position: relative;
  z-index: 1;
  background-image: url('@/assets/imgs/top-banner.png');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 1.11rem;
}

#bottom-banner {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 11;
  background-image: url('@/assets/imgs/top-banner.png');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 7.5rem;
  height: 1.1rem;
  margin-left: -3.75rem;
}


.btn {
  position: relative;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      120deg,
      transparent,
      transparent,
      rgba(255, 244, 227, 0.4),
      transparent,
      transparent
    );
    transition: all 650ms;
    animation: btn-shiny 2s linear infinite;
  }
}

.download_btn {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -94%);
  width: 3.58rem;
  height: 1.07rem;
  background-image: url('@/assets/imgs/top-btn.png');
  animation: pulse-btn 1.5s infinite ease-in-out;
}

@keyframes pulse-btn {
  0% {
    transform: translate(-50%, -94%) scale(1);
  }
  50% {
    transform: translate(-50%, -94%) scale(1.08);
  }
  100% {
    transform: translate(-50%, -94%) scale(1);
  }
}


.character-border {
  position: relative;
  z-index: 0;
  width:3.58rem;
  height: 1.07rem;
  /* border-radius: 0.13rem; */
  overflow: hidden;
  margin-top: -.1rem;
  margin-left: -.1rem;
  margin-bottom: .03rem;
  padding-bottom: .2rem;
  margin-bottom:.2rem;
  @apply flex justify-center items-center;

  &::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #7395b8;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
    animation: border-rotate 0.5s linear infinite;
    padding-top:.2rem;
  }
}


.gift_warp{
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, 50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 98%;
}

.gift_warp img {
  width: 3.55rem;
  height: 2.78rem;
  animation: gift-glow 2s infinite ease-in-out;

  &:nth-child(1) {
    animation-delay: 0s;
  }

  &:nth-child(2){
    left: -8%;
    display: block;
    position: relative;
    animation-delay: 0.5s;
  }

  &:nth-child(3){
    left: 8%;
    display: block;
    position: relative;
    margin-top: .3rem;
    animation-delay: 1.0s;
  }

  &:nth-child(4){
    display: block;
    position: relative;
    margin-top: .3rem;
    animation-delay: 1.5s;
  }
}

@keyframes gift-glow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255, 235, 133, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1));
  }
}


.btn-fb {
  width: 1.5rem;
  height: 0.62rem;
  border-radius: 0.1rem;
  background-image: url('@/assets/imgs/fb.png');
}

.btn-download-banner-btn{
  width: 2.04rem;
  height: 0.62rem;
  border-radius: 0.1rem;
  background-image: url('@/assets/imgs/top-btn.png')
}


.character-wrapper {
  /* padding: 1.2rem 0 1.2rem 0; */
  padding: .04rem 0 0.45rem 0;
}

.character {
  width: 2.23rem;
  height: 3.29rem;
  margin-left: -.1rem;
}

.character-border {
  position: relative;
  z-index: 0;
  width: 2.23rem;
  height: 3.3rem;
  border-radius: 0.13rem;
  overflow: hidden;
  margin-top: -.1rem;
  margin-left: -.1rem;
  margin-bottom: .03rem;
  padding-bottom: .2rem;
  margin-bottom:.2rem;
  @apply flex justify-center items-center;

  &::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #7395b8;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
    animation: border-rotate 0.5s linear infinite;
    padding-top:.2rem;
  }
}
@keyframes border-rotate {
  100% {
    transform: rotate(1turn);
  }
}

@keyframes btn-shiny {
  from {
    left: -50%;
  }
  to {
    left: 90%;
  }
}

.v-enter-active {
  transition: opacity 0.5s ease;
}

.v-enter-from {
  opacity: 0;
}

</style>
<style>
.swiper-pagination {
  bottom: .3rem !important;
}

.banner-container .swiper-pagination {
  bottom: 0rem !important;
}

.swiper-wrapper {
  /* padding-bottom: 0.7rem; */
}

.swiper-pagination-bullet {
  border-radius: 0.1rem;
  width: 0.3rem;
  opacity: 1;
  background-color: #8e8d8e;
}

.swiper-pagination-bullet-active {
  background-color: #b6dafc;
}


.banner-container {
  width: 90%;
  margin: 0 auto;
  margin-top: .2rem;
  height: 5.8rem;
}
</style>