activitys.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <div id="activitys">
  3. <template v-if="view === 'lab'">
  4. <div class="view">
  5. 当前处于:
  6. <el-tooltip class="item" effect="dark" placement="bottom">
  7. <template #content> {{ getProp('start_time') }} 至 {{ getProp('end_time') }} </template>
  8. <el-link>{{ getProp('year') }}年度-{{ getProp('name') }}</el-link>
  9. </el-tooltip>
  10. 时间内
  11. </div>
  12. </template>
  13. <template v-else-if="view === 'admin'">
  14. <el-row class="rows">
  15. <el-col :span="24">当前处于:</el-col>
  16. <el-col :span="24" v-if="preparing._id">
  17. 筹建期:
  18. <el-tooltip class="item" effect="dark" placement="bottom">
  19. <template #content> {{ getProp('start_time', preparing) }} 至 {{ getProp('end_time', preparing) }} </template>
  20. <el-link>{{ getProp('year', preparing) }}年度-{{ getProp('name', preparing) }}</el-link>
  21. </el-tooltip>
  22. 时间内
  23. <el-divider direction="vertical"></el-divider>
  24. </el-col>
  25. <el-col :span="24" v-if="working._id">
  26. 正常运营期:
  27. <el-tooltip class="item" effect="dark" placement="bottom">
  28. <template #content> {{ getProp('start_time', working) }} 至 {{ getProp('end_time', working) }} </template>
  29. <el-link>{{ getProp('year', working) }}年度-{{ getProp('name', working) }}</el-link>
  30. </el-tooltip>
  31. 时间内
  32. </el-col>
  33. </el-row>
  34. </template>
  35. </div>
  36. </template>
  37. <script>
  38. const _ = require('lodash');
  39. const moment = require('moment');
  40. import { mapState, createNamespacedHelpers } from 'vuex';
  41. const { mapActions } = createNamespacedHelpers('activitys');
  42. export default {
  43. name: 'activitys',
  44. props: {},
  45. components: {},
  46. data: function() {
  47. return {
  48. view: '',
  49. preparing: {},
  50. working: {},
  51. };
  52. },
  53. computed: {
  54. ...mapState(['user', 'isInAct']),
  55. },
  56. created() {
  57. if (this.user.role_id === 'admin' || this.user.role_type === '1') {
  58. // 管理员/超级管理员: 显示当前正处于哪个活动时间段,显示标题;
  59. this.view = 'admin';
  60. this.getActingTime();
  61. } else {
  62. // 显示自己处于哪个时间段即可
  63. this.view = 'lab';
  64. }
  65. },
  66. methods: {
  67. ...mapActions(['query']),
  68. getProp(prop, data = {}) {
  69. if (this.view === 'lab') data = this.isInAct;
  70. return _.get(data, prop);
  71. },
  72. async getActingTime() {
  73. const res = await this.query({ is_use: '0' });
  74. if (this.$checkRes(res)) {
  75. const data = res.data;
  76. const working = data.find(f => f.type === '1');
  77. if (working) {
  78. const { start_time, end_time } = working;
  79. const is_in = moment().isBetween(start_time, end_time, null, '[]');
  80. console.log(is_in);
  81. if (is_in) this.$set(this, `working`, working);
  82. }
  83. const preparing = data.find(f => f.type === '-1');
  84. if (preparing) {
  85. const { start_time, end_time } = preparing;
  86. const is_in = moment().isBetween(start_time, end_time, null, '[]');
  87. console.log(is_in);
  88. if (is_in) this.$set(this, `preparing`, preparing);
  89. }
  90. }
  91. },
  92. },
  93. };
  94. </script>
  95. <style lang="less" scoped>
  96. .view {
  97. color: white;
  98. font-weight: 700;
  99. padding: 15px 0;
  100. font-size: 14px;
  101. .el-link {
  102. font-size: 16px;
  103. color: red;
  104. }
  105. }
  106. .rows {
  107. color: white;
  108. font-size: 14px;
  109. .el-link {
  110. font-size: 16px;
  111. color: red;
  112. }
  113. }
  114. </style>