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

<template>
  <div class="info-container">
    <el-container>
      <el-main>
        <div class="info-tabs">
          <el-radio-group 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>
        <info-list
          class="mt10"
          :type="type"
          v-show="!detailMode"
          @click="detailList"
        ></info-list>
        <info-detail
          class="mt10"
          v-if="detailMode"
          :type="type"
          :title="detailTitle"
          :id="detailId"
          @close="detailClose"
        />
      </el-main>
      <el-aside width="400px" style="background-color: #ffffff">
        <el-card class="mt20" v-for="opt in typeOptions" :key="opt.value">
          <info-sample
            :type="opt.label"
            :title="opt.label"
            @click="detailSample"
          />
        </el-card>
      </el-aside>
    </el-container>
  </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 {
  mixins: [transferMixin],
  components: { infoList, InfoSample, InfoDetail },
  data() {
    return {
      detailMode: false,
      detailTitle: '',
      detailId: 0,
      type: '',
      typeOptions: []
    }
  },
  watch: {
    // $route: function() {
    //   this.getTypes()
    // }
  },
  created() {
    this.getTypes()
  },
  methods: {
    detailList(item) {
      this.detailTitle = item.title
      this.detailId = item.id
      this.detailMode = true
    },
    detailSample(item) {
      this.detailTitle = item.title
      this.detailId = item.id
      this.detailMode = true
    },
    detailClose() {
      this.detailMode = false
    },
    getTypes() {
      career.types().then((res) => {
        console.log('career news res', res)
        if (res.code == 200 || res.code == 0) {
          this.typeOptions = res.rows
          let query = this.$route.query?.name || this.prevData.type
          let news = this.prevData?.news
          if(news){
            this.detailList(news)
          }
          this.type = query || this.typeOptions.first()?.label
        } else {
          this.msgError(res.msg || 'career news types 请求异常')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>