college detail - icon tags

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

@@ -1,16 +1,12 @@
 <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="Array.isArray(item.value)">
+      <div v-if="item.tooltips">
         <img width="50px" :src="item.img" :alt="item.desc">
         <el-popover placement="bottom" trigger="hover">
-          <div>
-            <p v-for="(i, idx) in item.value" :key="idx">
-              {{ i.type }} {{ i.number }}个
-            </p>
-          </div>
+          <div v-html="item.tooltips" />
           <p slot="reference" class="mt10">
-            {{ formatStatNumber(item) }}
+            {{ item.value }}
             <i class="el-icon-question" />
           </p>
         </el-popover>
@@ -33,61 +29,70 @@ export default {
     }
   },
   computed: {
-    iconFormat() {
+    iconList() {
       const baseInfo = this.baseInfo || {}
-      return [
-        {
-          img: require('@/assets/images/career/year.png'),
-          value: `${baseInfo.createdYear}年`,
-          desc: '创办时间'
-        },
+      // fixed elements
+      const results = [
         {
-          img: require('@/assets/images/career/type.png'),
           value: baseInfo.natureTypeCN,
-          desc: '办学类型'
+          desc: '办学类型',
+          img: require('@/assets/images/career/xingzhi.png')
         },
         {
-          img: require('@/assets/images/career/xingzhi.png'),
-          value: baseInfo.type,
-          desc: '院校类型'
+          value: `${baseInfo.location} ${baseInfo.cityName}`,
+          desc: '所处地',
+          img: require('@/assets/images/career/location.png')
         },
         {
-          img: require('@/assets/images/career/bumen.png'),
           value: baseInfo.managerType,
-          desc: '所属部门'
+          desc: '所属部门',
+          img: require('@/assets/images/career/bumen.png')
         },
         {
-          img: require('@/assets/images/career/xueli.png'),
           value: baseInfo.level,
-          desc: '学历层次'
+          desc: '学历层次',
+          img: require('@/assets/images/career/xueli.png')
         },
         {
-          img: require('@/assets/images/career/location.png'),
-          value: `${baseInfo.location} ${baseInfo.cityName}`,
-          desc: '所处地'
-        },
-        {
-          img: require('@/assets/images/career/shuoshi.png'),
-          value: baseInfo.pointsOfShuo,
-          desc: '硕士点',
-          type: 'arr'
-        },
-        {
-          img: require('@/assets/images/career/boshi.png'),
-          value: baseInfo.pointsOfBo,
-          desc: '博士点',
-          type: 'arr'
+          value: baseInfo.type,
+          desc: '院校类型',
+          img: require('@/assets/images/career/type.png')
         }
       ]
-    },
-    iconList() {
-      // 过滤无效数据的标签
-      return this.iconFormat.filter(item => Array.isArray(item.value) ? item.value.length : item.value)
-    }
-  },
-  methods: {
-    formatStatNumber(item) {
-      return `${item.value[0]?.number || ''} / ${item.value[1]?.number || ''} `
+      //
+      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)
     }
   }
 }