front/src/views/index/components/index-card-college.vue

<template>
  <index-card simple title="院校排名" more-text="查看全部" @more="handleMore">
    <el-row :gutter="12">
      <el-col :span="8">
        <div class="width100 college-rank-a rd8">
          <div class="f-red f18 bold" style="letter-spacing: 3px">校友会排行榜</div>
          <index-card-content :list="listA" :gutter="0" :line-size="1">
            <template #default="{item, index}">
              <index-college-item :rank="index+1" :university="item" />
            </template>
          </index-card-content>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="width100 college-rank-b rd8">
          <div class="f-red f18 bold" style="letter-spacing: 3px">软科排行榜</div>
          <index-card-content :list="listB" :gutter="0" :line-size="1">
            <template #default="{item, index}">
              <index-college-item :rank="index+1" :university="item" />
            </template>
          </index-card-content>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="width100 college-rank-c rd8">
          <div class="f-red f18 bold" style="letter-spacing: 3px">QS排行榜</div>
          <index-card-content :list="listC" :gutter="0" :line-size="1">
            <template #default="{item, index}">
              <index-college-item :rank="index+1" :university="item" />
            </template>
          </index-card-content>
        </div>
      </el-col>
    </el-row>
  </index-card>
</template>

<script>
import IndexCard from '@/views/index/components/index-card'
import IndexCardContent from '@/views/index/components/index-card-content'
import IndexImageItem from '@/views/index/components/index-image-item'
import transferMixin from '@/components/mx-transfer-mixin'
import loginCheckMixin from '@/views/index/blocks/index-login-interceptor-mixin'
import {universitiesRankingNoToken} from '@/api/webApi/career-course'
import MxConst from "@/common/MxConst";
import IndexCollegeItem from "@/views/index/components/index-college-item.vue";

export default {
  mixins: [transferMixin, loginCheckMixin],
  name: 'index-card-college',
  components: {IndexCollegeItem, IndexImageItem, IndexCardContent, IndexCard},
  data() {
    return {
      morePath: '/new-gaokao/three/UniversitiesColleges',
      listA: [],
      listB: [],
      listC: [],
      lineSize: 1,
      queryParams: {
        year: MxConst.currentYear,
        pageNum: 1,
        pageSize: 5,
      }
    }
  },
  mounted() {
    this.getList({type: '校友会'}, 'listA')
    this.getList({type: '软科'}, 'listB')
    this.getList({type: 'QS'}, 'listC')
  },
  methods: {
    getList(param, target) {
      universitiesRankingNoToken({
        ...this.queryParams,
        ...param
      }).then(res => {
        this[target] = res.rows.map((item, idx) => {
          const path = '/career/plan/UniversityDetail'
          const u = item["universities"] || {}
          const nextParams = {
            code: u.code,
          }
          return {
            title: u.name,
            src: u.logo,
            hits: u.hits,
            desc: u.location + ' ' + u.type,
            path: path,
            nextData: nextParams,
            rowClass: 'mt12'
          }
        })
      })
    },
    async handleMore() {
      await this.loginCheck()
      this.transferTo(this.morePath)
    }
  }
}
</script>

<style scoped>
.college-rank-a {
  background: url('~@/assets/images/index/login/college-rank-a.png') no-repeat;
  background-size: cover;
  padding: 12px 20px;
}

.college-rank-b {
  background: url('~@/assets/images/index/login/college-rank-b.png') no-repeat;
  background-size: cover;
  padding: 12px 20px;
}

.college-rank-c {
  background: url('~@/assets/images/index/login/college-rank-c.png') no-repeat;
  background-size: cover;
  padding: 12px 20px;
}
</style>