多课程点击课程标题收起和展开

pages3/polyv/detail.vue

@@ -131,8 +131,14 @@
           <view class="all_items" v-for="(courseItem, c_index) in goodsTeacher" :key="c_index">
             <view v-for="(cour, cou_index) in courseItem.courseList" :key="cou_index">
               <view v-if="cour.show && cour.show == 1">
-                <view v-if="courseTotal > 1" class="cou_title">{{ cour.courseName }}</view>
-                <!-- <view v-show="courseItem.courseShow"> -->
+                <view v-if="courseTotal > 1" class="cou_title" @click="changeCourseMeun(courseItem, c_index)">
+                  <view class="cou_name">{{ cour.courseName }}</view>
+                  <view class="course_icon">
+                    <u-icon name="arrow-up" color="#333" size="30" v-if="!courseItem.courseShow"></u-icon>
+							      <u-icon name="arrow-down" color="#333" size="30" v-if="courseItem.courseShow"></u-icon> 
+                  </view>
+                </view>
+                <view v-show="courseItem.courseShow">
                   <!-- 双师制 -->
                   <view v-if="courseItem.teaList && courseItem.teaList.length > 0" class='teacher_names'>
                     <view v-for="(tea, tindex) in courseItem.teaList" :key="tindex" class="names"
@@ -205,7 +211,7 @@
                     ></view>
                   <!-- @togoBack="togoBack($event)" -->
                   </view>
-                <!-- </view> -->
+                </view>
               </view>
             </view>
           </view>
@@ -769,7 +775,6 @@ export default {
 			option:null,
 			isOther:'',
       downLoading: false, //下载讲义加载
-      muluStyle: false, //显示和隐藏目录样式
       bottomHeight: 0,
       toggleCourseShow: false, // 切换课程弹窗
       informId: '', //消息id,从公众号消息模板进来的才有
@@ -1010,18 +1015,7 @@ export default {
         //     this.teacherList = item.teaList
         //   }
         // })
-        this.goodsTeacher.forEach(async (item) => {
-          let courseItem = await this.getMenuList(item.courseList[0].courseId)
-          // console.log('==courseItem', courseItem);
-          item['courseMeun'] = courseItem
-          if (item.courseList[0].courseId == this.courseId ) {
-            item['courseShow'] = true
-          } else {
-            item['courseShow'] = false
-          }
-        })
-        console.log('===,== this.goodsTeacher', this.goodsTeacher, 'this.courseId:', this.courseId);
-        console.log('==11', this.goodsTeacher[1].courseList[0].courseId);
+        this.getMoreCourseList()
       }) 
     },
     // 原来onshow里面的内容
@@ -1062,7 +1056,7 @@ export default {
     // 原来的mouted内容
     originMounted() {
       uni.$on("changeSection", (oldSectionId) => {
-        console.log('切换课程-originMounted->playVID:', this.playVID, oldSectionId);
+        // console.log('切换课程-originMounted->playVID:', this.playVID, oldSectionId);
         this.studyTimer && clearInterval(this.studyTimer) // 清除定时器
         this.hasStart = false;
         this.photoConfig = false;
@@ -1078,7 +1072,7 @@ export default {
         this.postStudyRecord(0, oldSectionId);
       });
       uni.$on("getSection", (item, courseId) => {
-        console.log('item:', item, 'courseId:',courseId, 'this.courseId:', this.courseId);
+        // console.log('item:', item, 'courseId:',courseId, 'this.courseId:', this.courseId);
         //清除直播
         this.studyTimer && clearInterval(this.studyTimer)
         this.hasStart = false;
@@ -1102,7 +1096,6 @@ export default {
         this.playVideo(item);
       });
       uni.$on("levelId", (item) => {
-        console.log('点击节获取的各层级ID', item);
         let arr = item.split("-");
         //点击节获取的各层级ID
         this.moduleId = arr[0];
@@ -2735,6 +2728,11 @@ export default {
             this.allLearnShow()
           } else {
             // 多课程-学习下一个课程
+            let changeObj = {
+              ...nextCourse,
+              courseShow: !nextCourse.courseShow
+            }
+            this.$set(this.goodsTeacher, goodsIndex + 1, changeObj)
             this.courseId = this.goodsTeacher[goodsIndex + 1].courseList[0].courseId
             await this.studyRecordMenuAllList()
             this.learnNextSec(this.menuAllList[0])
@@ -2789,11 +2787,24 @@ export default {
               this.$store.commit("updatePlayNextId", playNextId);
               this.updateChapterOpen(true)
               this.reStart = false
-              this.getMenuList()
+              // this.getMenuList()
+              this.getMoreCourseList()
             }
           }
         })
     },
+    getMoreCourseList() {
+      this.goodsTeacher.forEach(async (item) => {
+        let courseItem = await this.getMenuList(item.courseList[0].courseId)
+        item['courseMeun'] = courseItem
+        if (item.courseList[0].courseId == this.courseId ) {
+          item['courseShow'] = true
+        } else {
+          item['courseShow'] = false
+        }
+      })
+      console.log('===,,,= this.goodsTeacher', this.goodsTeacher, 'this.courseId:', this.courseId);
+    },
     //拍照
     openPhoto() {
       var polyvPlayerContext = this.selectComponent("#playerVideo");
@@ -3218,9 +3229,13 @@ export default {
         },
       });
     },
-    clickMulu() {
-      this.muluStyle = !this.muluStyle
-    }
+    changeCourseMeun(item, index) {
+      let changeObj = {
+        ...item,
+        courseShow: !item.courseShow
+      }
+      this.$set(this.goodsTeacher, index, changeObj)
+    },
   },
 };
 </script>
@@ -3292,9 +3307,17 @@ export default {
     // 课程列表
     .all_items {
       .cou_title {
-        color: #222;
-        font-size: 36rpx;
-        margin-bottom: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .cou_name {
+          color: #222;
+          font-size: 30rpx;
+          margin-bottom: 16rpx;
+        }
+        .course_icon {
+          margin-right: 10rpx;
+        }
       }
     }
   }