front/src/views/career/plan/components/UniversityDetail/UniversityIcons.vue

<template>
  <div class="f14 f-666 text-center fx-row fx-bet-cen">
    <div v-for="(item, index) in iconList" :key="index" class="fx-1">
      <div v-if="item.tooltips">
        <img width="50px" :src="item.img" :alt="item.desc">
        <el-popover placement="bottom" trigger="hover">
          <div v-html="item.tooltips" />
          <p slot="reference" class="mt10">
            {{ item.value }}
            <i class="el-icon-question" />
          </p>
        </el-popover>
      </div>
      <div v-else>
        <img width="50px" :src="item.img" :alt="item.desc">
        <p class="mt10">{{ item.value }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UniversityIcons',
  props: {
    baseInfo: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    iconList() {
      const baseInfo = this.baseInfo || {}
      // fixed elements
      const results = [
        {
          value: baseInfo.natureTypeCN,
          desc: '办学类型',
          img: require('@/assets/images/career/xingzhi.png')
        },
        {
          value: `${baseInfo.location} ${baseInfo.cityName}`,
          desc: '所处地',
          img: require('@/assets/images/career/location.png')
        },
        {
          value: baseInfo.managerType,
          desc: '所属部门',
          img: require('@/assets/images/career/bumen.png')
        },
        {
          value: baseInfo.level,
          desc: '学历层次',
          img: require('@/assets/images/career/xueli.png')
        },
        {
          value: baseInfo.type,
          desc: '院校类型',
          img: require('@/assets/images/career/type.png')
        }
      ]
      //
      if (baseInfo.pointsOfShuo?.length) {
        results.push({
          value: baseInfo.pointsOfShuo.map(p => p.number).join(' / '),
          desc: 'shuoshi',
          img: require('@/assets/images/career/shuoshi.png'),
          tooltips: baseInfo.pointsOfShuo.map(p => `<p>${p.type} <span class="bold">${p.number}个</span></p>`).join('')
        })
      }
      if (baseInfo.pointsOfBo?.length) {
        results.push({
          value: baseInfo.pointsOfBo.map(p => p.number).join(' / '),
          desc: 'boshi',
          img: require('@/assets/images/career/boshi.png'),
          tooltips: baseInfo.pointsOfBo.map(p => `<p>${p.type} <span class="bold">${p.number}个</span></p>`).join('')
        })
      }
      if (baseInfo.rateOfBaoYanView && baseInfo.rateOfBaoYanView != '-') {
        results.push({
          value: '保研率:' + baseInfo.rateOfBaoYanView,
          desc: 'baoyanlv',
          img: require('@/assets/images/career/baoyanlv.png'),
          tooltips: `<div class="bold mb5">保研率说明</div>` + baseInfo.remarkOfBaoYan
        })
      }
      if (results.length < 8) {
        results.splice(0, 0, {
          value: `${baseInfo.createdYear}年`,
          desc: '创办时间',
          img: require('@/assets/images/career/year.png')
        })
      }

      return results.filter(r => r.value)
    }
  }
}
</script>

<style scoped>

</style>