web-admin/src/layout/header/activitys.vue

<template>
  <div id="activitys">
    <template v-if="view === 'lab'">
      <div class="view">
        当前处于:
        <el-tooltip class="item" effect="dark" placement="bottom">
          <template #content> {{ getProp('start_time') }} 至 {{ getProp('end_time') }} </template>
          <el-link>{{ getProp('year') }}年度-{{ getProp('name') }}</el-link>
        </el-tooltip>
        时间内
      </div>
    </template>
    <template v-else-if="view === 'admin'">
      <el-row class="rows">
        <el-col :span="24">当前处于:</el-col>
        <el-col :span="24" v-if="preparing._id">
          筹建期:
          <el-tooltip class="item" effect="dark" placement="bottom">
            <template #content> {{ getProp('start_time', preparing) }} 至 {{ getProp('end_time', preparing) }} </template>
            <el-link>{{ getProp('year', preparing) }}年度-{{ getProp('name', preparing) }}</el-link>
          </el-tooltip>
          时间内
          <el-divider direction="vertical"></el-divider>
        </el-col>
        <el-col :span="24" v-if="working._id">
          正常运营期:
          <el-tooltip class="item" effect="dark" placement="bottom">
            <template #content> {{ getProp('start_time', working) }} 至 {{ getProp('end_time', working) }} </template>
            <el-link>{{ getProp('year', working) }}年度-{{ getProp('name', working) }}</el-link>
          </el-tooltip>
          时间内
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
const _ = require('lodash');
const moment = require('moment');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('activitys');
export default {
  name: 'activitys',
  props: {},
  components: {},
  data: function() {
    return {
      view: '',
      preparing: {},
      working: {},
    };
  },
  computed: {
    ...mapState(['user', 'isInAct']),
  },
  created() {
    if (this.user.role_id === 'admin' || this.user.role_type === '1') {
      // 管理员/超级管理员: 显示当前正处于哪个活动时间段,显示标题;
      this.view = 'admin';
      this.getActingTime();
    } else {
      // 显示自己处于哪个时间段即可
      this.view = 'lab';
    }
  },
  methods: {
    ...mapActions(['query']),
    getProp(prop, data = {}) {
      if (this.view === 'lab') data = this.isInAct;
      return _.get(data, prop);
    },
    async getActingTime() {
      const res = await this.query({ is_use: '0' });
      if (this.$checkRes(res)) {
        const data = res.data;
        const working = data.find(f => f.type === '1');
        if (working) {
          const { start_time, end_time } = working;
          const is_in = moment().isBetween(start_time, end_time, null, '[]');
          console.log(is_in);
          if (is_in) this.$set(this, `working`, working);
        }
        const preparing = data.find(f => f.type === '-1');
        if (preparing) {
          const { start_time, end_time } = preparing;
          const is_in = moment().isBetween(start_time, end_time, null, '[]');
          console.log(is_in);
          if (is_in) this.$set(this, `preparing`, preparing);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.view {
  color: white;
  font-weight: 700;
  padding: 15px 0;
  font-size: 14px;
  .el-link {
    font-size: 16px;
    color: red;
  }
}
.rows {
  color: white;
  font-size: 14px;
  .el-link {
    font-size: 16px;
    color: red;
  }
}
</style>