页面广告飘窗

<template>
  <div class="Dialog box" v-if="show" @mouseover="mouseover" @mouseout="mouseout" :style="{ top: top + 'px', left: left + 'px' }">
    <div class="dialog-title">{{dialogTitle}}
      <img src="@/assets/img/close.png" alt="" @click="closeHandle">
    </div>
    <div class="contents">
      您有<span>XX</span>条{{typeName}}待填报，截止<span>9月15日</span>未填，{{typeName}}状态将列为超时未报。
    </div>
    <div class="contents">您有<span>{{listNum}}</span>条异常{{typeName}}，请及时处理。</div>
    <div class="btmBtns"><el-button type="primary" @click="closeHandle" size="small">不再提醒</el-button></div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import http from "@/service/interface.js";
export default {
  components: {},
  data () {
    return {
      roleId: localStorage.roleId,
      dialogTitle: '填报提醒',
      dialogVisible: false,
      listNum: 0,
      contents: '',
      typeName: '任务',

      show: true, // 是否展现飘窗
      stepX: 1, // 水平方向的步长
      stepY: 1, // 垂直方向的步长
      timer: "", // 定时器
      maxTop: 0, // 最大的 top 值
      maxLeft: 0, // 最大的 left 值
      top: 0,
      left: 0
    }
  },
  computed: {
    ...mapState(
      'user', {
      taskWarn: (state) => {
        return state.taskWarn
      },
      leaderWarn: (state) => {
        return state.leaderWarn
      }
    }
    )
  },
  created () {
    const routeName = this.$route.name
    if (routeName == 'taskListLeader') {
      this.show = this.leaderWarn
      this.typeName = '批示'
      this.getNotFillNumLeader()
    } else {
      this.show = this.taskWarn
      this.typeName = '任务'
      this.getNotFillNumTask()
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 飘窗
    init () {
      // 设置最大的top和left值：根元素可视区域宽高 - 飘窗的宽高 - 边距
      this.maxTop = document.documentElement.clientHeight - 220;
      this.maxLeft = document.documentElement.clientWidth - 390;
      // 设置 top 和 left 的初始值
      this.top = 0;
      this.left = 0;
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.move();
      }, 20);
      this.onresize();
    },
    move () {
      if (this.top >= this.maxTop || this.top < 0) {
        this.stepY = -this.stepY;
      }
      if (this.left >= this.maxLeft || this.left < 0) {
        this.stepX = -this.stepX;
      }
      this.top += this.stepY;
      this.left += this.stepX;
    },
    mouseover () {
      clearInterval(this.timer);
    },
    mouseout () {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.move();
      }, 20);
    },
    // 关闭飘窗
    closeHandle () {
      const routeName = this.$route.name
      if (routeName == 'taskListLeader') {
        this.setLeaderWarn(false)
      } else {
        this.setTaskWarn(false)
      }
      clearInterval(this.timer);
      this.show = false;
    },
    // 窗口大小调整时重置飘窗规则
    onresize () {
      window.addEventListener('resize', this.init);
    },
    ...mapActions('user', {
      setTaskWarn: 'setTaskWarn',
      setLeaderWarn: 'setLeaderWarn'
    }),
  },
  beforeDestroy () {
    clearInterval(this.timer);
    window.removeEventListener('resize', this.init);
  },
}
</script>

<style lang='less' scoped>
* {
  box-sizing: border-box;
}
.Dialog {
  width: 390px;
  height: 220px;
  border-radius: 5px;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  .dialog-title {
    height: 48px;
    line-height: 48px;
    font-size: 24px;
    font-weight: normal;
    color: #2985e6;
    text-indent: 1.5em;
    font-family: PangMenZhengDao-3, PangMenZhengDao;
    background-image: url('~@/assets/img/dialogtitle.png');
    background-size: auto;
    img {
      float: right;
      margin: 15px 10px 0 0;
      cursor: pointer;
    }
  }
  .contents {
    line-height: 30px;
    font-size: 16px;
    padding: 10px;
    span {
      color: red;
    }
  }
  .btmBtns {
    text-align: center;
  }
}
</style>