front/src/views/career/LibraryCollege/UniversitiesDetail.vue

<template>
  <div id="universityDetail" v-loading="loading" class="bg-page fx-column fx-cen-cen app-container">
    <index-card v-if="baseInfo" class="width100">
      <div slot="title" class="fx-row fx-sta-cen">
        <img class="pointer icon72" :src="baseInfo.logo" alt="" @click="toWindow(baseInfo.url)">
        <div class="fx-column ml30">
          <span class="f24 bold pf">{{ baseInfo.name }}</span>
          <div class="mt5 mb5">
            <el-tag v-for="item in formatFeatures" :key="item" class="mr5" size="mini">{{ item }}</el-tag>
          </div>
          <span class="f14 f-666">{{ formatLongInfo }}</span>
        </div>
      </div>
      <el-button slot="more" v-has-history size="small" round @click="$router.back()">返回</el-button>
      <!--Body-->
      <div class="tabs-wrap mb20">
        <span
          v-for="(tab, index) in tabs"
          :key="tab"
          class="tabs-item"
          :class="{'bg-primary':tabActive == index}"
          @click="tabActive = index"
        >{{ tab }}</span>
      </div>
      <!-- 院校概况 -->
      <keep-alive>
        <college-profile v-if="tabActive == 0" :code="code" :detail-data="detailData" />
      </keep-alive>
      <!-- 招生简章 -->
      <keep-alive>
        <enroll-list v-if="tabActive == 1" :code="code" />
      </keep-alive>
      <!-- 院校风采 -->
      <keep-alive>
        <university-style v-if="tabActive == 2" :code="code" />
      </keep-alive>
      <!-- 院校投档线 -->
      <keep-alive>
        <universities-line v-if="tabActive==3" :university-code="code" disabled-name-link disabled-level />
      </keep-alive>
      <!-- 专业投档线 -->
      <keep-alive>
        <colleges-line v-if="tabActive==4" :university-code="code" disabled-name-link />
      </keep-alive>
      <!-- 招生计划 -->
      <keep-alive>
        <enroll-plan-content v-if="tabActive == 5" :form="enrollForm" disabled-name-link />
      </keep-alive>
      <!--   提前批 招生计划   -->
      <keep-alive>
        <prev-enroll-plan v-if="tabActive==6&&!isPreEnrollFormatted" :category="prevCategory" :university-code="code" />
        <prev-enroll-plan-v2 v-if="tabActive==6&&isPreEnrollFormatted" :category="prevCategory" :university-code="code" />
      </keep-alive>
      <!--   提前批 投档线   -->
      <keep-alive>
        <prev-shift-line v-if="tabActive==7&&isPreEnrollSupport" :category="prevCategory" :university-code="code" />
        <prev-shift-line-v2 v-if="tabActive==7&&!isPreEnrollSupport" :category="prevCategory" :university-code="code" />
      </keep-alive>
    </index-card>
    <scroll-top />
  </div>
</template>

<script>
import EnrollList from '../plan/components/EnrollList'
import UniversityStyle from '../plan/components/UniversityDetail/UniversityStyle'
import { selectUniversityDetail } from '@/api/webApi/career-course'
import transferMixin from '@/components/mx-transfer-mixin'
import IndexCard from '@/views/login/components/modules/shared/IndexCard'
import ScrollTop from '@/components/ScrollTop/index'
import CollegeProfile from '@/views/career/LibraryCollege/Tabs/CollegeProfile'
import UniversityDetailData from '@/views/career/LibraryCollege/UniversityDetailData'
import EnrollPlanContent from '@/views/career/plan/components/EnrollPlanContent'
import CollegesLine from '@/views/career/components/CollegesLine'
import UniversitiesLine from '@/views/career/components/UniversitiesLine'
import { mapGetters } from 'vuex'
import PrevEnrollPlan from '@/views/career/PrevBatch/PrevEnrollPlan.vue'
import PrevEnrollPlanV2 from '@/views/career/PrevBatch/PrevEnrollPlanV2.vue'
import PrevShiftLine from '@/views/career/PrevBatch/PrevShiftLine.vue'
import PrevShiftLineV2 from '@/views/career/PrevBatch/PrevShiftLineV2.vue'
import MxConst from '@/common/MxConst'

export default {
  name: 'UniversityDetail',
  components: {
    PrevShiftLineV2,
    PrevShiftLine,
    PrevEnrollPlanV2,
    PrevEnrollPlan,
    UniversitiesLine,
    CollegesLine,
    EnrollPlanContent,
    CollegeProfile,
    ScrollTop,
    IndexCard,
    EnrollList,
    UniversityStyle
  },
  mixins: [transferMixin, UniversityDetailData],
  data() {
    return {
      code: '',
      tabs: ['院校概况', '招生简章', '院校风采', '院校投档线', '专业投档线', '招生计划', '特殊批招生计划', '特殊批投档线'],
      tabActive: 0,
      loading: false,
      detailData: null,
      enrollForm: {
        universityCode: '',
        year: '',
        type: '',
        level: '',
        universityNameText: ''
      }
    }
  },
  computed: {
    ...mapGetters(['isPreEnrollSupport', 'isPreEnrollFormatted']),
    prevCategory() {
      return '' // this.isPreEnrollSupport ? MxConst.enum.recruitPlanCategory.common : ''
    }
  },
  mounted() {
    this.code = this.prevData.code
    this.tabActive = (this.prevData.tab || 0) * 1
    this.enrollForm.universityCode = this.code
    this.loadUniversityDetail()
  },
  methods: {
    loadUniversityDetail() {
      selectUniversityDetail({ code: this.code }).then(res => this.detailData = res.data)
    }
  }
}
</script>

<style lang="scss">
#universityDetail {
  .tabs-wrap {
    border-bottom: 1px solid var(--themeColor);
    height: 40px;

    .tabs-item {
      cursor: pointer;
      padding: 0 24px;
      border-radius: 4px 4px 0 0;
      display: inline-block;
      line-height: 40px;

      &:hover {
        color: var(--themeColor);
      }

      &.bg-primary {
        background: var(--themeColor);
        color: white;
      }
    }
  }

  .format-tit {
    border-left: 4px solid var(--themeColor);
    padding-left: 10px;
    margin-bottom: 20px;
    font-size: 20px;
  }

  .info-tips {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
  }

  .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px;
    padding-bottom: 10px;

    .url:hover {
      color: var(--themeColor);
    }
  }

  .major-wrap {
    text-align: left;

    span {
      display: inline-block;
      margin-right: 20px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    a {
      display: inline-block;
      margin-right: 20px;
      margin-top: 10px;
      margin-bottom: 10px;

      &:hover {
        color: var(--themeColor);
      }
    }
  }
}
</style>