SaaS-DataScreen/src/views/total-sum/index.vue

<!--
 * @Author: wangjiacheng
 * @Date: 2021-10-14 11:57:19
 * @LastEditors: wjc
 * @LastEditTime: 2024-05-31 14:11:52
 * @Description:
-->
<template>
  <div class="total-sum">
    <canvas id="canvas" :style="{ visibility: showFire ? 'visible' : 'hidden' }"></canvas>
    <div class="content">
      <div class="title">
        线上缴费累计金额
      </div>
      <div :class="{ sum: true, 'sum-billion': isBillion }">
        <digit-roll
          v-model="moneny"
          :duration="1000"
          :delay="0"
        >
        </digit-roll>
      </div>
    </div>
    <div class="footer">
      <img :src="wcLogoUrl" class="footer-logo" style="height: 64px" />
      <el-divider direction="vertical"></el-divider>
      <img :src="huiguanjiaLogoUrl" class="footer-logo" @click="playFire" />
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
// import { totalSum } from '@/api'
import mixin from './mixin.js'
import wcLogo from '@/assets/images/wc2.png'
import huiguanjiaLogo from '@/assets/images/huiguanjia.png'
import digitRoll from '@/components/digit-roll'

dayjs.extend(isSameOrAfter)

export default {
  name: 'TotalSum',
  mixins: [mixin],
  components: {
    digitRoll
  },
  data () {
    return {
      targetMoney: 5e8,
      moneny: 499571013.49,
      timer: null,
      showFire: false,
      isBillion: false,
      targetDate: '2024-05-31 17:10:00'
    }
  },
  computed: {
    wcLogoUrl () {
      return wcLogo
    },
    huiguanjiaLogoUrl () {
      return huiguanjiaLogo
    }
  },
  watch: {
    moneny (nVal) {
      if (nVal >= this.targetMoney && !this.showFire) {
        setTimeout(() => {
          this.showFire = true
        }, 500)
      }
      if (nVal >= this.targetMoney && !this.showFire) {
        setTimeout(() => {
          this.isBillion = true
        }, 500)
      }
    }
  },
  methods: {
    playFire () {
      setTimeout(() => {
        this.showFire = !this.showFire
        this.isBillion = !this.isBillion
      }, 500)
    },
    getTotalSum () {
      this.timer = setInterval(() => {
        const date = dayjs()
        const add = Math.floor(Math.random() * 2000)
        this.moneny = this.moneny + add
        if (date.isSameOrAfter(dayjs(this.targetDate)) && this.moneny <= this.targetMoney) {
          this.moneny = this.targetMoney + add
        }
      }, 10000)
    }
  },
  created () {
    // totalSum.getTotalSum().then(res => {
    //   if (res && res.data) {
    //     const data = Number(res.data.data)
    //     this.moneny = data
    //   }
    // })
    this.getTotalSum()
  },
  mounted () {
    this.fireworkss()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss">
  @import './fr.scss';

  @font-face {
    font-family: AIdrich-Regular;
    src: url('../../assets/css/Aldrich-Regular.ttf');
  }

  #canvas {
    top: 105px;
    position: relative;
    z-index: 100;
    background: transparent;
  }

  .total-sum {
    position: relative;
    text-align: center;
    height: 100%;
    background: url('../../assets/images/total-sum-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    .content {
      position: absolute;
      z-index: 1001;
      left: 0;
      top: 0;
      right: 0;
      bottom: 100px;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: calc(100% - 258px);
    }
    .title {
      font-size: 58px;
      color: rgb(255, 210, 132);
      margin-bottom: 80px;
      font-family: 'Source Han Sans CN';
    }
    .sum {
      z-index: 1001;
      font-size: 11.25em;
      font-family: 'AIdrich-Regular';
      -webkit-box-reflect: below -30px linear-gradient(transparent,rgba(255, 255, 255, 0.4));
      span {
        background: linear-gradient(180deg, #e1bc7e 10%, #8a5510 70%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }
    }
    .footer {
      z-index: 101;
      position: fixed;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #bb9148;
      height: 98px;
      .el-divider {
        margin: 0 16px;
        height: 2em;
      }
      .footer-logo {
        height: 56px;
        cursor: pointer;
      }
    }
    .sum-billion {
      animation: billion 4s;
    }
    @keyframes billion {
      0% {
        transform: scale(1);
      }
      30% {
        transform: scale(1.23);
      }
      60% {
        transform: scale(1.23);
      }
      90% {
        transform: scale(1);
      }
    }
  }
</style>