feat: 课程列表增加进度显示

src/pages/course/learn/courseChapter.vue

@@ -6,11 +6,10 @@
         <van-icon name="arrow-down" />
       </template>
       <ul>
-        <li
-          v-for="subItem in item.children"
-          :key="subItem.id"
-          @click="onClick(subItem)"
-        >{{subItem.name}}</li>
+        <li v-for="subItem in item.children" :key="subItem.id" @click="onClick(subItem)">
+          <div class="name">{{subItem.name}}</div>
+          <div class="progress">{{subItem.video_progress | progressText}}</div>
+        </li>
       </ul>
     </van-collapse-item>
   </van-collapse>
@@ -35,6 +34,12 @@ export default {
       return this.$store.state.isWeapp
     }
   },
+  filters: {
+    progressText(value) {
+      value = parseInt(value)
+      return value === 100 ? '已学完' : `${value}%`
+    }
+  },
   methods: {
     onClick(data) {
       if (this.isWeapp) {
@@ -65,13 +70,21 @@ export default {
   display: none;
 }
 li {
+  display: flex;
   padding: 10px 0;
-  font-size: 13px;
   &:first-child {
     padding-top: 0;
   }
   &:last-child {
     padding-bottom: 20px;
   }
+  .name {
+    flex: 1;
+    font-size: 13px;
+    overflow: hidden;
+  }
+  .progress {
+    font-size: 12px;
+  }
 }
 </style>