1

src/views/home/components/courseItem.vue

@@ -0,0 +1,127 @@
+<template>
+  <div @click="goTo(c.courseId)">
+    <div class="cDetail">
+      <div class="courseImg">
+        <img :src="c.cover ? JSON.parse(c.cover)[0].url : require('../../../assets/images/home/wheel.png')" alt="" />
+      </div>
+      <div class="cRight">
+        <div>{{ c.title }}</div>
+        <div>创建者：{{ c.uname }}</div>
+        <div class="jdBox">
+          <div class="jdImg"><img src="../../../assets/images/home/jd.png" alt="" /></div>
+          <div>{{ JSON.parse(c.chapters).length }}阶段</div>
+        </div>
+        <div>{{ c.typename ? c.typename : '暂无分类' }}</div>
+      </div>
+    </div>
+    <div class="cButtonBox" v-show="false">
+      <div class="cButton">
+        <div class="bImg"><img src="../../../assets/images/home/courseEvaIcon.png" alt="" /></div>
+        <div>评课</div>
+      </div>
+      <div class="cButton">
+        <div class="bImg"><img src="../../../assets/images/home/evaIcon.png" alt="" /></div>
+        <div>评价</div>
+      </div>
+      <div class="cButton">
+        <div class="bImg"><img src="../../../assets/images/home/analysisIcon.png" alt="" /></div>
+        <div>分析</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    c: {
+      type: Array
+    }
+  },
+  methods: {
+    goTo(cid) {
+      // eslint-disable-next-line prettier/prettier
+      this.$router.push({ path: '/courseDetail', query: { courseid: cid } })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cDetail {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  .courseImg {
+    width: 110px;
+    height: 80px;
+    > img {
+      width: 100%;
+      height: 100%;
+      border-radius: 5px;
+      object-fit: cover;
+    }
+  }
+  .cRight {
+    margin-left: 20px;
+    > div {
+      margin: 2px 0;
+    }
+    > div:nth-child(1) {
+      font-size: 18px;
+      font-weight: bold;
+      max-width: 225px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-word;
+    }
+    .jdBox {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: flex-start;
+      .jdImg {
+        width: 15px;
+        margin-top: 1px;
+        height: 15px;
+        > img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.cButtonBox {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 10px 0 0 0;
+  .cButton {
+    width: 100px;
+    height: 30px;
+    margin: 0 10px 0 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    border: 1px solid #587ff3;
+    color: #587ff3;
+    border-radius: 5px;
+    justify-content: center;
+    .bImg {
+      width: 20px;
+      height: 20px;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -18,39 +18,7 @@
         <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="vheight">
           <!-- <course-all :courseList="zoneClass"></course-all> -->
           <van-empty description="暂无课程" v-if="!zoneClass.length" />
-          <div v-for="(c, cIndex) in zoneClass" :key="cIndex" class="courseItem" @click="goTo(c.courseId)">
-            <div class="cDetail">
-              <div class="courseImg">
-                <img
-                  :src="c.cover ? JSON.parse(c.cover)[0].url : require('../../assets/images/home/wheel.png')"
-                  alt=""
-                />
-              </div>
-              <div class="cRight">
-                <div>{{ c.title }}</div>
-                <div>创建者：{{ c.uname }}</div>
-                <div class="jdBox">
-                  <div class="jdImg"><img src="../../assets/images/home/jd.png" alt="" /></div>
-                  <div>{{ JSON.parse(c.chapters).length }}阶段</div>
-                </div>
-                <div>{{ c.typename ? c.typename : '暂无分类' }}</div>
-              </div>
-            </div>
-            <div class="cButtonBox" v-show="false">
-              <div class="cButton">
-                <div class="bImg"><img src="../../assets/images/home/courseEvaIcon.png" alt="" /></div>
-                <div>评课</div>
-              </div>
-              <div class="cButton">
-                <div class="bImg"><img src="../../assets/images/home/evaIcon.png" alt="" /></div>
-                <div>评价</div>
-              </div>
-              <div class="cButton">
-                <div class="bImg"><img src="../../assets/images/home/analysisIcon.png" alt="" /></div>
-                <div>分析</div>
-              </div>
-            </div>
-          </div>
+          <course-item v-for="(c, cIndex) in zoneClass" :key="cIndex" class="courseItem" :c="c"></course-item>
         </van-list>
       </van-pull-refresh>
     </div>
@@ -62,11 +30,13 @@ import { selectTypeCourse2 } from '@/api/home'
 import { mapGetters } from 'vuex'
 import headBar from '@/components/headBar.vue'
 import classFilter from './components/classFilter.vue'
+import courseItem from './components/courseItem.vue'
 // import courseAll from './components/courseAll.vue'
 export default {
   components: {
     headBar,
-    classFilter
+    classFilter,
+    courseItem
   },
   data() {
     return {
@@ -85,10 +55,6 @@ export default {
     ...mapGetters(['userinfo'])
   },
   methods: {
-    goTo(cid) {
-      // eslint-disable-next-line prettier/prettier
-      this.$router.push({ path: '/courseDetail', query: { courseid: cid }})
-    },
     search(tList) {
       this.page = 1
       if (tList !== undefined) {
@@ -181,81 +147,6 @@ export default {
     border-radius: 10px;
     box-shadow: 0 0 10px 1px #dcdfe6;
     padding: 10px;
-    .cDetail {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      align-items: flex-start;
-      .courseImg {
-        width: 110px;
-        height: 80px;
-        > img {
-          width: 100%;
-          height: 100%;
-          border-radius: 5px;
-        }
-      }
-      .cRight {
-        margin-left: 20px;
-        > div {
-          margin: 2px 0;
-        }
-        > div:nth-child(1) {
-          font-size: 18px;
-          font-weight: bold;
-          max-width: 225px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          word-break: break-word;
-        }
-        .jdBox {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: nowrap;
-          align-items: center;
-          justify-content: flex-start;
-          .jdImg {
-            width: 15px;
-            margin-top: 1px;
-            height: 15px;
-            > img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-        }
-      }
-    }
-    .cButtonBox {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      align-items: center;
-      padding: 10px 0 0 0;
-      .cButton {
-        width: 100px;
-        height: 30px;
-        margin: 0 10px 0 0;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        align-items: center;
-        border: 1px solid #587ff3;
-        color: #587ff3;
-        border-radius: 5px;
-        justify-content: center;
-        .bImg {
-          width: 20px;
-          height: 20px;
-          > img {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   // }
 }