vava_buy_official/src/views/Home/modules/WrapFour/index.vue

<template>
  <section class="wrap__four">
    <img src="@/public/images/banner02.png" class="banner-bg" />
    <div class="mask-bg"></div>
    <div class="wrap__four-body">
      <div class="wrap__four-total trans-300">
        <!-- <span>10,117,195</span> -->
        <!-- <a-statistic title="" :value="statisticNumber" /> -->
        <a-statistic title="" :value="computeStatisticValue(Date.now())" />
      </div>
      <div class="wrap__four-desc trans-300">
        <span>{{ $t('system["包裹运送到全球，而且还在不断增加..."]') }}</span>
      </div>
      <div class="wrap__four-tips">
        <span>{{ $t('system["自 Vava buy.com 成立以来"]') }}</span>
      </div>
    </div>
  </section>
</template>



<script setup lang="ts">
import { ref, onBeforeUnmount, onMounted } from 'vue'

const statisticNumber = ref<number>(0)
const statisticTimer = ref<number>(-1)
const computeDelay = ref<number>(1000 * 60 * 60 * 1)
const statisticStorageKey: string = 'statistic_time'

// 获取统计值
function initForStatistic() {
  statisticNumber.value = getStatisticValue()
  const nowTime = Date.now()
  const oldTime = !!localStorage.getItem(statisticStorageKey)
    ? Number(localStorage.getItem(statisticStorageKey))
    : nowTime
  let step_temp = Math.floor((nowTime - oldTime) / computeDelay.value)
  console.log('(nowTime - oldTime)', nowTime - oldTime)
  console.log('step_temp', step_temp)
  if (step_temp > 0) {
    statisticNumber.value = computeStatisticValue(oldTime + computeDelay.value * step_temp)
    localStorage.setItem(statisticStorageKey, `${oldTime + computeDelay.value * step_temp}`)
  } else {
    !localStorage.getItem(statisticStorageKey) &&
      localStorage.setItem(statisticStorageKey, `${nowTime}`)
  }
}

function getStatisticValue(): number {
  let oldVal: string | null = localStorage.getItem(statisticStorageKey)
  const nowTime: number = Date.now()
  let result: number = computeStatisticValue(!!oldVal ? Number(oldVal) : nowTime)
  return result
}

// 计算统计值
function computeStatisticValue(value: number): number {
  return Number((value / (1000 * 60 * 60)).toFixed(0))
}

// 添加计时器
function addInterval(delay = 1000 * 30) {
  statisticTimer.value = setInterval(() => {
    initForStatistic()
  }, delay)
}

// 移除计时器
function removeInterval() {
  clearInterval(statisticTimer.value)
  statisticTimer.value = -1
}

/* ------------------------------ 生命周期钩子 ------------------------------ */

onMounted(() => {
  initForStatistic()
  addInterval()
})

onBeforeUnmount(() => {
  removeInterval()
})
</script>



<style lang="less" scoped>
.wrap__four {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  height: auto;

  .banner-bg {
    width: 100%;
    max-width: 1200px;
    max-width: 75rem;
    height: auto;
    min-height: 260px;
    object-fit: cover;
  }

  .mask-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
  }

  .wrap__four-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    .wrap__four-total {
      margin-bottom: 30px;
      margin-bottom: 1.875rem;

      :deep(.ant-statistic-content-value-int) {
        font-family: Poppins;
        font-size: 120px;
        font-size: 7.5rem;
        font-weight: 600;
        color: #ffffff;
      }
    }

    .wrap__four-desc {
      font-family: Source Han Sans;
      font-size: 26px;
      font-size: 1.625rem;
      font-weight: bold;
      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #ffffff;
    }

    .wrap__four-tips {
      margin-top: 80px;
      margin-top: 5rem;
      font-family: Source Han Sans;
      font-weight: 500;
      font-size: 15px;
      font-size: 0.9375rem;
      color: rgba(255, 255, 255, 0.75);
    }
  }
}
</style>


<style lang="less" scoped>
@import url(./css/styles@1200.less);
@import url(./css/styles@1024.less);
@import url(./css/styles@768.less);
</style>