个人主页接口对接

src/components/HomePage/courseList.vue

@@ -1,12 +1,15 @@
 <template>
     <div class="">
-      <ul class="data-info-ul" v-if="courseList.length > 0">
-        <li class="data-info">
-            <!-- <course-image height="144px" :course="cinfo"></course-image> -->
-            <img style="width:254px;height:144px" src="/images/list-img.png" alt="">
+      <ul class="data-info-ul" v-if="list.length > 0">
+        <li class="data-info" v-for="item in list" :key="item.id">
+            <div style="width:254px">
+                <course-image width="254px" height="144px" :course="item.info"></course-image>
+            </div>
+            
+            <!-- <img style="width:254px;height:144px" src="/images/list-img.png" alt=""> -->
             <div class="data-cen">
-                <h6 class="course-tit portal-title-tow">京东方商业洞察BIP模型 <span class="score-info">5.0分</span> </h6>
-                <p class="title-info">通俗易懂的入门课程</p>
+                <h6 class="course-tit portal-title-tow">{{item.info.name || item.contentInfo}} <span class="score-info">{{item.info.score}}分</span> </h6>
+                <p class="title-info">{{item.info.summary}}</p>
                 <div class="pro-line"> <div>当前进度：</div> <div style="width:200px"><el-progress :percentage="50"></el-progress></div></div>
                 <p class="portal-time">最新一次学习时间：2022-5-28 22:30:28</p>
             </div> 
@@ -15,7 +18,7 @@
                     <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
                 </div>
                 <div class="btn-right">
-                    <el-button class="btn" type="primary">确定</el-button>
+                    <el-button class="btn" type="primary" @click="jumpDetail(item.info)">继续学习</el-button>
                 </div>
             </div>
         </li>
@@ -28,15 +31,30 @@
   </template>
   
   <script>
+    import courseImage from "@/components/Course/courseImage.vue";
       export default{
           data(){
               return{
                 courseList:[]
               }
           },
-      methods:{
-       
-       }
+          components: {
+            courseImage,
+        },
+          props:{
+            list:{
+                type:Array,
+                default:()=>[]
+            }
+          },
+          methods:{
+            jumpDetail(data) {
+                if(!data.id){
+                return;
+                }
+                this.$router.push({ path: '/course/detail?id=', query: { id: data.id } });
+            }
+          }
       }
   </script>