FE_occupationlab_client/src/layouts/home/index.vue

<template>
    <div class="main">
        <v-head></v-head>
        <div class="layout">
            <div class="content">
                <transition name="move" mode="out-in">
                    <router-view class="view"></router-view>
                </transition>
                <el-backtop target=".content"></el-backtop>
                <v-footer ref="footer"></v-footer>
            </div>
            <div class="log-mask" v-if="logVisible"></div>
            <div class="log-dia" v-if="logVisible">
              <img class="bg1" src="@/assets/img/log-bg.png" alt="">
              <img class="bg2" src="@/assets/img/log-bg1.png" alt="">
              <p class="log-title">更新日志</p>
              <div class="log-wrap">
                <div class="logs">
                  <div class="item" v-for="(item, i) in list" :key="i" v-show="!i || (i && logAll)">
                    <h6>{{ item.versionName }}</h6>
                    <img v-if="item.coverUrl" :src="item.coverUrl" alt="" class="cover">
                    <ul class="detail">
                      <li v-for="(item, i) in item.logContents" :key="i">
                        <p class="name"><img :src="require('@/assets/img/' + funcList.find(e => e.id === item.type).icon + '.png')" alt=""> {{ funcList.find(e => e.id === item.type).name }}</p>
                        <div class="val">
                          <p v-for="(item, i) in item.content" :key="i">{{ i + 1 }}、{{ item }}</p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="more-wrap">
                  <el-button class="know" type="primary" size="small" @click="closeLog">知道了</el-button>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import util from "@/libs/util";
import Setting from "@/setting";
import vHead from "../header";
import vFooter from "../footer";

export default {
    data() {
        return {
            logVisible: false,
            list: [],
            logAll: false,
            funcList: [
                {
                    id: 0,
                    name: '新功能',
                    icon: 'func'
                },
                {
                    id: 1,
                    name: '修复',
                    icon: 'bug'
                },
                {
                    id: 2,
                    name: '优化',
                    icon: 'optimize'
                }
            ]
        };
    },
    components: {
        vHead,
        vFooter
    },
    computed: {
        ...mapState("user", [
            'logView'
        ]),
        ...mapState("match", [
            'noticed'
        ])
    },
    mounted() {
        this.autoLogout()
        this.noticed || this.getMatchStatus() // 0才要调用
        this.logView || this.getLogStatus() // logView为false才需要查询接口
    },
    methods: {
        ...mapMutations("user", [
            'SET_LOG'
        ]),
        ...mapMutations("match", [
            'SET_NOTICE'
        ]),
        ...mapActions("user", [
            "logout"
        ]),
        // 提示赛事状态(登录后调用一次)
        getMatchStatus() {
          util.local.get(Setting.tokenKey) && this.$post(this.api.promptRemoval).then(({ prompt }) => {
            this.SET_NOTICE()
            prompt && util.errorMsg(prompt)
          }).catch(res => {})
        },
        // 获取日志列表
        getLog() {
          this.$get(`${this.api.platformLogList}?platformId=${Setting.platformId}&port=1&versionName=`).then(({ logList }) => {
            logList.map((e, i) => {
              e.logContents.map(n => {
                n.content = n.content.split('\n')
              })
            })
            this.list = logList
          }).catch(res => {})
        },
        // 获取日志状态
        getLogStatus() {
            util.local.get(Setting.tokenKey) && this.$get(this.api.logNotification, {
              platformId: Setting.platformId
            }).then(({ notification }) => {
              if (notification) {
                this.logVisible = true // 返回true，则显示日志弹框
                this.getLog()
              } else {
                this.SET_LOG() // 把查看日志状态设置为true
              }
            }).catch(res => {})
        },
        // 关闭日志弹框
        closeLog() {
          this.logVisible = false
          this.SET_LOG() // 把查看日志状态设置为true
        },
        // 长时间未操作,自动退出登录
        autoLogout() {
            let lastTime = new Date().getTime();
            document.onmousedown = () => {
                lastTime = new Date().getTime();
            };

            setInterval(() => {
                if (util.local.get(Setting.tokenKey) && (new Date().getTime() - lastTime) > Setting.autoLogoutTime) {
                    util.errorMsg("用户登录过期，请重新登录");
                    setTimeout(this.logout, 1500);
                }
            }, 1000);
        }
    }
};
</script>
<style lang="scss" scoped>
.main{
    min-height: calc(100% - 64px);
    .layout{
        padding-top: 64px;
    }
    .index{
        padding: 0;
    }
}
.log-mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .4);
}
/deep/.log-dia {
  z-index: 11;
  position: absolute;
  top: 250px;
  left: 50%;
  width: 550px;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 6px;
  .bg1 {
    width: 100%;
    height: 140px;
  }
  .bg2 {
    position: absolute;
    top: -130px;
    left: 48px;
    max-width: 100%;
    height: 250px;
  }
  .log-title {
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 22px;
    color: #fff;
    font-weight: 600;
  }
  .log-wrap {
    padding-bottom: 30px;
  }
  .logs {
    max-height: 250px;
    padding: 0 100px;
    margin: 30px 0;
    overflow: auto;
  }
  h6 {
    margin-bottom: 15px;
    font-size: 16px;
    color: #333;
    line-height: 1;
  }
  .more-wrap {
    padding: 0 60px;
    font-size: 14px;
    color: #333;
    text-align: center;
  }
  .know {
    margin-top: 15px;
  }
  .cover {
      max-width: 250px;
      max-height: 160px;
      margin: 10px 0 20px;
  }
  .detail {
    li {
        margin-bottom: 20px;
    }
    .name {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        font-size: 14px;
        img {
            width: 20px;
            margin-right: 8px;
        }
    }
    .val {
        font-size: 15px;
        line-height: 1.8;
        white-space: pre-wrap;
        p {
          position: relative;
          font-size: 13px;
          color: #727272;
        }
    }
  }
}
</style>