院校风采

src/api/webApi/career-course.js

@@ -95,6 +95,16 @@ export function enrollBrochure(params) {
     params: params
   })
 }
+// 院校风采
+export function universitiesStyle(params) {
+  return request({
+    url: '/front/university/getUniversitiesStyle',
+    method: 'get',
+    params: params
+  })
+}
+
+
 // 保存招生简章热度/点击
 export function saveEnrollBrochureHits(params) {
   return request({

src/views/career/plan/UniversitiesDetail.vue

@@ -8,7 +8,7 @@
         <div>
           <span class="f28 ">{{ baseInfo.name }}</span>
           <div class="mt5 mb5">
-            <el-tag class="mr5" size="mini" v-for="item in baseInfo.features.split(',')">{{ item }}</el-tag>
+            <el-tag class="mr5" size="mini" v-for="item in baseInfo.features ? baseInfo.features.split(',') : []">{{ item }}</el-tag>
           </div>
           <span class="f14 f-666 ">{{`${baseInfo.location} ${baseInfo.cityName} ${baseInfo.type} / ${baseInfo.natureTypeCN} / ${baseInfo.managerType} `}}</span>
         </div>
@@ -123,7 +123,7 @@
         <!--  招生简章-->
         <enroll-list :code="code" v-if="tabActive == 1"></enroll-list>
         <!--  院校风采-->
-        <university-style v-if="tabActive == 2"></university-style>
+        <university-style  :code="code" v-if="tabActive == 2"></university-style>
     </div>
     <el-dialog
       :visible.sync="dialogVisible"

src/views/career/plan/compoents/UniversityStyle.vue

@@ -1,55 +1,78 @@
 <template>
-  <div>
+  <div class="univerty" v-loading="loading">
     <!-- VR -->
-    <div class="image-item">
-      <div class="cover-image vr" >
-          <div class="colleges-imgs-mask">
-            <i class="iconfont icon-vr" style="font-size: 28px"></i>
-          </div>
-      </div>
-      <p class="mt15 text-overflow-ellipsis f14 lh20">VR校园</p>
-    </div>
-    <!-- 视频 -->
-    <div class="image-item">
-      <div class="cover-image video" >
-        <div class="colleges-imgs-mask">
-          <i class="iconfont icon-bofang" style="font-size: 28px"></i>
-        </div>
-      </div>
-      <p class="mt15 text-overflow-ellipsis f14 lh20">清华大学</p>
-    </div>
+<!--    <div class="image-item">-->
+<!--      <div class="cover-image vr" >-->
+<!--          <div class="colleges-imgs-mask">-->
+<!--            <i class="iconfont icon-vr" style="font-size: 28px"></i>-->
+<!--          </div>-->
+<!--      </div>-->
+<!--      <p class="mt15 text-overflow-ellipsis f14 lh20">VR校园</p>-->
+<!--    </div>-->
+<!--    &lt;!&ndash; 视频 &ndash;&gt;-->
+<!--    <div class="image-item">-->
+<!--      <div class="cover-image video" >-->
+<!--        <div class="colleges-imgs-mask">-->
+<!--          <i class="iconfont icon-bofang" style="font-size: 28px"></i>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <p class="mt15 text-overflow-ellipsis f14 lh20">清华大学</p>-->
+<!--    </div>-->
 <!--     图片列表-->
-    <div class="image-item">
-        <el-image class="cover-image"  fit="fill" src="https://img1.youzy.cn/content/media/thumbs/p00066675.jpeg" :preview-src-list="srcList"></el-image>
-      <p class="mt15 text-overflow-ellipsis f14 lh20">校门</p>
-    </div>
-    <div class="image-item">
-      <el-image class="cover-image"  fit="fill" src="https://img1.youzy.cn/content/media/thumbs/p00065517.jpeg" :preview-src-list="srcList"></el-image>
-      <p class="mt15 text-overflow-ellipsis f14 lh20">中央主楼</p>
-    </div>
-    <div class="image-item">
-      <el-image class="cover-image"  fit="fill" src="https://img1.youzy.cn/content/media/thumbs/p00065520.jpeg" :preview-src-list="srcList"></el-image>
-      <p class="mt15 text-overflow-ellipsis f14 lh20">伟伦楼</p>
+    <div class="image-item" v-for="item in senceList">
+        <el-image class="cover-image"  fit="fill" :src="item.url" :preview-src-list="srcList"></el-image>
+      <p class="mt15 text-overflow-ellipsis f14 lh20">{{ item.description }}</p>
     </div>
   </div>
 </template>
 
 <script>
 
+import { universitiesStyle } from '@/api/webApi/career-course'
+
 export default {
+  props:{
+    code:{
+      type:String || Number,
+      default:'',
+    }
+  },
+  created() {
+    this.getUniversitiesStyle()
+  },
   data() {
     return {
-      srcList: [
-        'https://img1.youzy.cn/content/media/thumbs/p00066675.jpeg',
-        'https://img1.youzy.cn/content/media/thumbs/p00065517.jpeg',
-        'https://img1.youzy.cn/content/media/thumbs/p00065520.jpeg'
-      ]
+      senceList: [],
+      loading:false
+    }
+  },
+  computed:{
+    srcList() {
+      if(!this.senceList.length) return []
+      return this.senceList.map(item => {
+        return item.url
+      })
+    }
+  },
+  methods:{
+    getUniversitiesStyle(){
+      this.loading = true
+      universitiesStyle({code:this.code}).then(res =>{
+        this.senceList = res.data
+        console.log(res)
+      })
+        .finally(_=>{
+        this.loading = false
+      })
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.univerty{
+  overflow: hidden;
+}
 .image-item:nth-of-type(5n) {
   margin-right: 0;
 }