front/src/views/career/information/index.vue

<template>
  <div class="bg-page fx-column fx-cen-cen">
    <div class="bg-white index-block fx-row jc-bet">
      <div class="fx-1 width0">
        <div class="info-tabs ml20 mt20">
          <el-radio-group v-if="showTabHead" v-model="type" @change="detailMode = false">
            <el-radio-button v-for="opt in typeOptions" :key="opt.value" :label="opt.label">{{ opt.label }}</el-radio-button>
          </el-radio-group>
          <div v-if="showSingleHead" class="news-single-head">
            <span class="pl60">{{ type }}</span>
          </div>
        </div>
        <info-list
          v-show="!detailMode"
          class="mt10"
          :type="type"
          @click="detailList"
        />
        <info-detail
          v-if="detailMode"
          :id="detailId"
          class="mt10"
          :type="type"
          :title="detailTitle"
          @close="detailClose"
        />
      </div>
      <div v-if="showHot" v-show="!detailMode" style="width: 400px; padding: 20px; margin-top: 38px">
        <info-sample
          :type="type"
          :title="type"
          @click="detailSample"
        />
      </div>
    </div>
  </div>
</template>
<script>
import transferMixin from '@/components/mx-transfer-mixin'
import InfoDetail from '../components/infoDetail.vue'
import infoList from '../components/infoList.vue'
import InfoSample from '../components/infoSample.vue'
import * as career from '@/api/webApi/career-news'

export default {
  components: { infoList, InfoSample, InfoDetail },
  mixins: [transferMixin],
  data() {
    return {
      detailMode: false,
      detailTitle: '',
      detailId: 0,
      type: '',
      typeOptions: [],
      showHot: true
    }
  },
  computed: {
    showTabHead() {
      // return false
      // eslint-disable-next-line no-unreachable
      return this.typeOptions?.length &&
        this.typeOptions.some(t => t.label === this.type)
    },
    showSingleHead() {
      // return true
      // eslint-disable-next-line no-unreachable
      return this.typeOptions?.length && !this.showTabHead
    }
  },
  created() {
    this.getTypes()
  },
  methods: {
    detailList(item) {
      if (item.url) return window.open(item.url)
      this.detailTitle = item.title
      this.detailId = item.id
      this.detailMode = true
    },
    detailSample(item) {
      if (item.url) return window.open(item.url)
      this.detailTitle = item.title
      this.detailId = item.id
      this.detailMode = true
    },
    detailClose() {
      this.detailMode = false
    },
    async getTypes() {
      const res = await career.types()
      this.typeOptions = res.rows
      this.type = this.$route.meta.type || this.typeOptions.first()?.label
      // this.showHot = this.$route.meta.hot || false
      const news = this.prevData?.news
      if (news) this.detailList(news)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/common.scss";

.news-single-head {
  @extend .pf;
  @extend .f-fff;
  @extend .relative;
  width: 450px;
  height: 40px;
  display: flex;
  align-items: center;
  border-radius: 0 40px 0 0;
  background: linear-gradient(to right, $--color-primary-active, rgba($--color-primary-active, 0.2));

  &:before {
    content: '\00A0';
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: -3px;
    background: linear-gradient(to right, $--color-primary-active, rgba($--color-primary-active, 0.2));
  }
}
</style>