top10.vue

<template>
  <div class="list-of-top10">
    <div class="list-of-top10-title common-title">
      <div class="icon-and-title">
        <img class="icon-title" src="@/assets/overview/board.png" alt="" />
        <span class="title">{{ title }}</span>
      </div>
      <img class="bg" src="@/assets/overview/bg_title.png" alt="" />
    </div>
    <div class="list-of-body">
      <ul class="body-title">
        <li class="f1">排名</li>
        <li class="f7">展板名称</li>
        <li class="f2">播放量</li>
      </ul>
      <div class="body-content" id="bodyContent">
        <div id="con1">
          <ul class="body-item" v-for="(item, index) in list" :key="index">
            <li class="f1">{{ (index % 10) + 1 }}</li>
            <li class="f7">
              <div class="title" :title="item.boardName">
                {{ item.boardName }}
              </div>
            </li>
            <li class="f2">{{ item.playNumber }}</li>
          </ul>
        </div>
        <div id="con2"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCurDate } from '@/utils/util.time.js'
export default {
  name: "top10",
  data() {
    return {
      title: "",
      timer: null,
      speed: 50,
      box: null,
      con1: null,
      list: [],
    };
  },
  components: {},
  mounted() {
    this.title = this.getTitle();
    this.getList()
    setTimeout(() => {
      this.initScroll();
    }, 1000);
  },
  methods: {
    getTitle(){
      let curTime = getCurDate()
      return `全国${curTime.year}年${curTime.month}月展板点播TOP10`
    },
    initScroll() {
      let _this = this;
      this.box = document.getElementById("bodyContent");
      this.con1 = document.getElementById("con1");
      let con2 = document.getElementById("con2");
      con2.innerHTML = this.con1.innerHTML;
      this.timer = setInterval(_this.scrollUp, _this.speed);
    },
    scrollUp() {
      if (this.box.scrollTop >= this.con1.scrollHeight) {
        this.box.scrollTop = 0;
      } else {
        this.box.scrollTop++;
      }
    },
    Ups() {
      let _this = this;
      this.timer = setInterval(_this.scrollUp, _this.speed);
    },
    Stops() {
      clearInterval(this.timer);
    },
    getList() {
      let requestparams = {};
      requestparams._index = 1;
      requestparams._size = 10;
      this.$https(
        {
          method: "post",
          url: "tBoardStatistic/getBoardRankPageList",
          authType: this.backToken,
        },
        requestparams
      )
        .then((res) => {
          if (res.status == 200) {
            if (res.data.resultCode == 200) {
              this.list = res.data.data.records;
            } else {
              this.list = [];
            }
          } else {
            this.list = [];
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
  },
};
</script>

<style lang="less">
</style>