视频目录

components/course/courseChapterMulu.vue

@@ -0,0 +1,663 @@
+<template>
+<!-- style="margin: 20rpx 0" -->
+  <cover-view>
+    <cover-view class="title" @click="openChapter(menuItem)">
+      <cover-image src="/static/icon/up1.png" class="icon_up" v-if="down"></cover-image>
+      <cover-image src="/static/icon/down1.png" class="icon_up" v-if="!down"></cover-image>
+      <!-- <u-icon name="arrow-down" color="#999" size="24" v-if="!down"></u-icon>
+      <u-icon name="arrow-right" color="#999" size="24" v-if="down"></u-icon> -->
+      <cover-view class="menu_name">{{ menuItem.name }}</cover-view>
+    </cover-view>
+    <cover-view v-show="!down">
+      <cover-view v-for="(itemM, indexM) in list" :key="indexM">
+        <cover-view v-if="itemM.type != 2">
+          <course-section-mulu
+						:isLive="isLive"
+						:orderGoodsId="orderGoodsId"
+            :sectionMaxNum="sectionMaxNum"
+            :preItem="list[indexM - 1] || preItem"
+            :learningOrder="learningOrder"
+            :courseId="courseId"
+            @playEnd="refreshList($event)"
+            :goodsId="goodsId"
+            :isBuy="isBuy"
+            :nextMenuItem="findNextSection(indexM)"
+            :isRebuild="isRebuild"
+            :gradeId="gradeId"
+            :menuItem="itemM"
+            :levelId="levelId + '-' + itemM.sectionId"
+          ></course-section-mulu>
+          <!-- <u-line v-if="indexM < list.length - 1"></u-line> -->
+        </cover-view>
+        <cover-view v-if="itemM.type == 2">
+          <!-- <u-line></u-line> -->
+          <cover-view
+            class="examBox"
+            @click="
+              toDo(
+                itemM.typeId,
+                goodsId,
+                itemM.moduleId,
+                itemM.chapterId,
+                itemM,
+                indexM
+              )
+            "
+          >
+            <cover-view class="exam">
+              <cover-view class="eTag">{{
+                itemM.doType == 1 ? "练习" : "考试"
+              }}</cover-view>
+              <cover-view style="margin-left: 15rpx;flex:1;">{{ itemM.name }}</cover-view>
+            </cover-view>
+            <cover-view v-if="isRebuild || itemM.rebuild > 0" class="tagRe"
+              >待重修</cover-view
+            >
+            <cover-view v-else>
+              <cover-view
+                :class="{
+                  tagGreen: itemM.learning == 1,
+                  tagRe: itemM.learning == 0 || itemM.rebuild > 0,
+                }"
+              >
+                <cover-view v-if="itemM.rebuild > 0">待重测</cover-view>
+                <cover-view v-else-if="itemM.learning == 1">合格</cover-view>
+                <cover-view v-else-if="itemM.learning == 0">不合格</cover-view>
+              </cover-view>
+            </cover-view>
+          </cover-view>
+        </cover-view>
+      </cover-view>
+    </cover-view>
+  </cover-view>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+// import courseSection from "@/components/course/courseSection.vue";
+import courseSectionMulu from "@/components/course/courseSectionMulu.vue"
+export default {
+  name: "courseChapter",
+  props: {
+		isLive:false,
+		orderGoodsId:{
+			default:0
+		},
+    preItem: {
+      default: undefined,
+    },
+    learningOrder: {
+      //是否设置学习顺序 1 章节顺序 0不设置 2从头学到尾顺序
+      type: Number,
+      default: 0,
+    },
+    needOpen: {
+      //是否默认展开
+      type: Boolean,
+      default: false,
+    },
+    menuItem: {
+      type: Object,
+      default: {},
+    },
+    isBuy: {
+      type: Boolean,
+      default: false,
+    },
+    levelId: {
+      type: String,
+      default: "",
+    },
+    goodsId: {
+      type: Number,
+      default: 0,
+    },
+    courseId: {
+      type: Number,
+      default: 0,
+    },
+    isRebuild: {
+      type: Boolean,
+      default: false,
+    },
+    gradeId: {
+      type: Number,
+      default: 0,
+    },
+    sectionMaxNum: {
+      default: undefined,
+    },
+  },
+  components: {
+    courseSectionMulu,
+  },
+  data() {
+    return {
+      down: true,
+      list: [],
+      examList: {},
+      canLearn: false, //是否全部视频看完才可以练习、测试
+    };
+  },
+  onLoad() {},
+  created() {},
+  mounted() {
+    if (this.needOpen && this.chapterOpen) {
+      this.updateChapterOpen(false);
+      this.openChapter(this.menuItem);
+    }
+  },
+  onPageShow() {
+    if (this.isBuy) {
+      this.refreshList({ isRebuild: this.isRebuild });
+    }
+  },
+  methods: {
+    ...mapMutations(["updateChapterOpen"]),
+    goodsTodayStudySectionNum() {
+      return new Promise((resolve) => {
+        this.$api
+          .goodsTodayStudySectionNum({
+            goodsId: this.goodsId,
+            gradeId: this.gradeId,
+          })
+          .then((res) => {
+            if (res.data.code == 200) {
+              resolve(res.data.data);
+            }
+          });
+      });
+    },
+    refreshList(isRebuild) {
+      console.log(9999);
+      let moduleId = this.menuItem.moduleId ? this.menuItem.moduleId : 0;
+      if (this.isRebuild) {
+        this.getReSectionList(
+          this.menuItem.id,
+          this.menuItem.courseId,
+          moduleId
+        );
+      } else {
+        this.getBuySectionList(
+          this.menuItem.id,
+          this.menuItem.courseId,
+          moduleId
+        );
+        //				this.getMenuExamList(item.id,item.courseId,moduleId)
+      }
+
+      this.$emit("playEnd", { isRebuild: isRebuild.isRebuild });
+      console.log(10000);
+      // let moduleId = this.menuItem.moduleId?this.menuItem.moduleId:0
+      // this.getBuySectionList(this.menuItem.id,this.menuItem.courseId,moduleId)
+    },
+    findNextSection(index) {
+      for (let i = index + 1; i < this.list.length; i++) {
+        return this.list[i];
+      }
+      return {};
+    },
+    studyRecordMenuAllList() {
+      return new Promise((resolve) => {
+        this.$api
+          .studyRecordMenuAllList({
+            courseId: this.courseId,
+            gradeId: this.gradeId,
+            goodsId: this.goodsId,
+          })
+          .then((res) => {
+            if (res.data.code == 200) {
+              resolve(res.data.data);
+            }
+          });
+      });
+    },
+		gradeCheckGoodsStudy(id) {
+			let moduleId = this.menuItem.moduleId || 0;
+			let chapterId = this.menuItem.chapterId || 0;
+			let sectionId = this.menuItem.sectionId || this.menuItem.menuId;
+			return new Promise(resolve => {
+				this.$api.gradeCheckGoodsStudy({
+					goodsId:this.goodsId,
+					gradeId:this.gradeId,
+					moduleId:this.menuItem.moduleId || 0,
+					chapterId:this.menuItem.chapterId || 0,
+					examId:id,
+				}).then( res => {
+					resolve(res.data.data)
+				})
+			})
+		},
+    /**
+     * 去做题
+     */
+    async toDo(id, goodsId = 0, moduleId = 0, chapterId = 0, item, index) {
+      let learnNum = await this.goodsTodayStudySectionNum()
+			let hasLearn = await this.gradeCheckGoodsStudy(id);
+
+      if(this.sectionMaxNum > 0) {
+      	if(learnNum >= this.sectionMaxNum && !hasLearn) {
+      		uni.showToast({
+      			icon:'none',
+      			title:`每天最多学习${this.sectionMaxNum}节`
+      		})
+      		return;
+      	}
+      }
+      console.log(this.learningOrder, "this.learningOrder");
+      if (this.learningOrder == 1) {
+        if (this.canLearn) {
+          let num = await this.bankRecordDoNum(item.typeId);
+          //有次数限制
+          if (item.answerNum - num > 0 && item.answerNum > 0) {
+            // this.$set(this.list[index],'doNum',(item.doNum+1))
+            console.log(this.list[index]);
+            uni.navigateTo({
+              url:
+                "/pages2/class/questionBank?courseId=" +
+                this.courseId +
+                "&gradeId=" +
+                this.gradeId +
+                "&isFromVideo=1&id=" +
+                id +
+                "&goodsid=" +
+                goodsId +
+                "&moduleId=" +
+                moduleId +
+                "&chapterId=" +
+                chapterId +
+                "&orderGoodsId=" + this.orderGoodsId,
+            });
+            //没有答题次数限制
+          } else if (item.answerNum == 0) {
+            uni.navigateTo({
+              url:
+                "/pages2/class/questionBank?courseId=" +
+                this.courseId +
+                "&gradeId=" +
+                this.gradeId +
+                "&isFromVideo=1&id=" +
+                id +
+                "&goodsid=" +
+                goodsId +
+                "&moduleId=" +
+                moduleId +
+                "&chapterId=" +
+                chapterId +
+                "&orderGoodsId=" + this.orderGoodsId,
+            });
+          } else {
+            uni.showToast({
+              icon: "none",
+              title: "该试卷只能答题" + item.answerNum + "次",
+            });
+
+            return;
+          }
+        } else {
+          uni.showToast({
+            icon: "none",
+            title: "请按顺序学完视频课程再进行练习和测试",
+          });
+        }
+      } else if (this.learningOrder == 2 && !item.rebuild) {
+        let canLearn = this.list[index - 1].learning == 1;
+        let rows = await this.studyRecordMenuAllList();
+        let isStop = false;
+        let newRows = [];
+        for (let i = 0; i < rows.length; i++) {
+          let moduleTrue = rows[i].moduleId == moduleId;
+          let chapterTrue = rows[i].chapterId == chapterId;
+          if (moduleTrue && chapterTrue) {
+            isStop = true;
+            if (rows[i].sectionType != 2) {
+              //忽略直播
+              newRows.push(rows[i]);
+            }
+          } else {
+            if (!isStop) {
+              if (rows[i].sectionType != 2) {
+                //忽略直播
+                newRows.push(rows[i]);
+              }
+            } else {
+              break;
+            }
+          }
+        }
+        console.log(newRows);
+        let isAllLearn = newRows.every((item) => {
+          return item.studyStatus == 1;
+        });
+
+        if (isAllLearn) {
+          //之前的都学完了
+
+          // if(canLearn) { //视频的上一节学完
+
+          let num = await this.bankRecordDoNum(item.typeId);
+          //有次数限制
+          if (item.answerNum - num > 0 && item.answerNum > 0) {
+            // this.$set(this.list[index],'doNum',(item.doNum+1))
+            console.log(this.list[index]);
+            uni.navigateTo({
+              url:
+                "/pages2/class/questionBank?courseId=" +
+                this.courseId +
+                "&gradeId=" +
+                this.gradeId +
+                "&isFromVideo=1&id=" +
+                id +
+                "&goodsid=" +
+                goodsId +
+                "&moduleId=" +
+                moduleId +
+                "&chapterId=" +
+                chapterId +
+                "&orderGoodsId=" + this.orderGoodsId,
+            });
+            //没有答题次数限制
+          } else if (item.answerNum == 0) {
+            uni.navigateTo({
+              url:
+                "/pages2/class/questionBank?courseId=" +
+                this.courseId +
+                "&gradeId=" +
+                this.gradeId +
+                "&isFromVideo=1&id=" +
+                id +
+                "&goodsid=" +
+                goodsId +
+                "&moduleId=" +
+                moduleId +
+                "&chapterId=" +
+                chapterId +
+                "&orderGoodsId=" + this.orderGoodsId,
+            });
+          } else {
+            uni.showToast({
+              icon: "none",
+              title: "该试卷只能答题" + item.answerNum + "次",
+            });
+
+            return;
+          }
+        } else {
+          uni.showToast({
+            icon: "none",
+            title: "请学完视频课程再进行练习和测试",
+          });
+        }
+      } else {
+        let num = await this.bankRecordDoNum(item.typeId);
+        //有次数限制
+        if (item.answerNum - item.doNum > 0 && item.answerNum > 0) {
+          // this.$set(this.list[index],'doNum',(item.doNum+1))
+          console.log(this.list[index]);
+          uni.navigateTo({
+            url:
+              "/pages2/class/questionBank?courseId=" +
+              this.courseId +
+              "&gradeId=" +
+              this.gradeId +
+              "&isFromVideo=1&id=" +
+              id +
+              "&goodsid=" +
+              goodsId +
+              "&moduleId=" +
+              moduleId +
+              "&chapterId=" +
+              chapterId +
+              "&orderGoodsId=" + this.orderGoodsId,
+          });
+          //没有答题次数限制
+        } else if (item.answerNum == 0) {
+          uni.navigateTo({
+            url:
+              "/pages2/class/questionBank?courseId=" +
+              this.courseId +
+              "&gradeId=" +
+              this.gradeId +
+              "&isFromVideo=1&id=" +
+              id +
+              "&goodsid=" +
+              goodsId +
+              "&moduleId=" +
+              moduleId +
+              "&chapterId=" +
+              chapterId +
+              "&orderGoodsId=" + this.orderGoodsId,
+          });
+        } else {
+          uni.showToast({
+            icon: "none",
+            title: "该试卷只能答题" + item.answerNum + "次",
+          });
+
+          return;
+        }
+      }
+    },
+    bankRecordDoNum(examId) {
+      return new Promise((resolve) => {
+        this.$api
+          .bankRecordDoNum({
+            goodsId: this.goodsId,
+            gradeId: this.gradeId,
+            chapterId: this.menuItem.id,
+            courseId: this.courseId,
+            moduleId: 0,
+            examId: examId,
+          })
+          .then((res) => {
+            resolve(res.data.data);
+          });
+      });
+    },
+    openChapter(item) {
+      console.log('展开章：',this.menuItem);
+      this.down = !this.down;
+      if (!this.down && this.list.length == 0) {
+        console.log(item.id, 69);
+        if (this.isBuy) {
+          let moduleId = item.moduleId ? item.moduleId : 0;
+          if (this.isRebuild) {
+            this.getReSectionList(item.id, item.courseId, moduleId);
+          } else {
+            this.getBuySectionList(item.id, item.courseId, moduleId);
+            //				this.getMenuExamList(item.id,item.courseId,moduleId)
+          }
+        } else {
+          this.getSectionList(item.id);
+        }
+      }
+    },
+    getMenuExamList(chapterId, courseId, moduleId) {
+      let self = this;
+      this.$api
+        .menuExamList({
+          chapterId: chapterId,
+          courseId: courseId,
+          moduleId: moduleId,
+        })
+        .then((res) => {
+          if (res.data.code == 200) {
+            self.examList = res.data.rows;
+          }
+        });
+    },
+    getSectionList(chapterId) {
+      let self = this;
+    //   url: '/app/common/course/sectionList/'+data,查询章与节关系列表+章卷同级展示(不带用户信息)
+      this.$api.sectionList(chapterId).then((res) => {
+        if (res.data.code == 200) {
+          for (let i = 0; i < res.data.data.length; i++) {
+            let item = res.data.data[i];
+            item.id = item.sectionId;
+            item.menuType = 3;
+            //判断是否试听
+            item.tryListen = false;
+            if (self.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
+              item.tryListen = true;
+            }
+          }
+
+          let newArr = res.data.data.filter((item) => {
+            console.log(item);
+            return item.type != 2;
+          });
+          this.canLearn = newArr.every((item) => {
+            console.log(item);
+            if (item.learning == 1) {
+              return true;
+            } else {
+              return false;
+            }
+          });
+          self.list = res.data.data;
+        }
+      });
+    },
+    getReSectionList(chapterId, courseId, moduleId) {
+      let self = this;
+      // /course/sectionList,查询章与节关系列表+章卷同级展示
+      this.$api
+        .reSectionList({
+          chapterId: chapterId,
+          gradeId: this.gradeId,
+          courseId: courseId,
+          rebuild: 1,
+          moduleId: moduleId,
+        })
+        .then((res) => {
+          if (res.data.code == 200) {
+            for (let i = 0; i < res.data.data.length; i++) {
+              let item = res.data.data[i];
+              item.id = item.sectionId;
+              item.menuType = 3;
+              //判断是否试听
+              item.tryListen = false;
+              if (self.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
+                item.tryListen = true;
+              }
+            }
+            let newArr = res.data.data.filter((item) => {
+              console.log(item);
+              return item.type != 2;
+            });
+            this.canLearn = newArr.every((item) => {
+              console.log(item);
+              if (item.learning == 1) {
+                return true;
+              } else {
+                return false;
+              }
+            });
+            self.list = res.data.data;
+          }
+        });
+    },
+    getBuySectionList(chapterId, courseId, moduleId) {
+      let self = this;
+      // /course/sectionList,查询章与节关系列表+章卷同级展示
+      this.$api
+        .reSectionList({
+          chapterId: chapterId,
+          gradeId: this.gradeId,
+          courseId: courseId,
+          moduleId: moduleId,
+        })
+        .then((res) => {
+          if (res.data.code == 200) {
+            for (let i = 0; i < res.data.data.length; i++) {
+              let item = res.data.data[i];
+              item.id = item.sectionId;
+              item.menuType = 3;
+              //判断是否试听
+              item.tryListen = false;
+              if (self.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
+                item.tryListen = true;
+              }
+            }
+            let newArr = res.data.data.filter((item) => {
+              return item.type != 2;
+            });
+            this.canLearn = newArr.every((item) => {
+              console.log(item);
+              if (item.learning == 1) {
+                return true;
+              } else {
+                return false;
+              }
+            });
+            self.list = res.data.data;
+          }
+        });
+    },
+  },
+  computed: { ...mapGetters(["goodsAuditionConfigIdList", "chapterOpen"]) },
+};
+</script>
+
+<style lang="scss" scoped>
+.tagRe {
+  width: 80rpx;
+  height: 28rpx;
+  background: #ff3b30;
+  border-radius: 8rpx;
+  font-size: 20rpx;
+  color: #ffffff;
+  text-align: center;
+}
+.tagGreen {
+  width: 80rpx;
+  height: 28rpx;
+  background: #34c759;
+  border-radius: 8rpx;
+  font-size: 20rpx;
+  color: #ffffff;
+  text-align: center;
+}
+.eTag {
+	width:56rpx;
+	height:42rpx;
+	text-align: center;
+	line-height: 42rpx;
+	font-size: 20rpx;
+  background: #007aff;
+  border-radius: 8rpx;
+  color: #ffffff;
+}
+.examBox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.exam {
+  font-size: 30rpx;
+  display: flex;
+  align-items: center;
+  margin: 20rpx 0;
+}
+.icon_up {
+  width: 24rpx;
+  height: 24rpx;
+}
+.title {
+  // margin-bottom: 30rpx;
+  height: 78rpx;
+  display: flex;
+  align-items: center;
+  border-bottom: 1rpx solid #EEEEEE;
+  .menu_name {
+    font-size: 24rpx;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #333;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left: 8rpx;
+  }
+}
+</style>

components/course/courseModuleMulu.vue

@@ -0,0 +1,186 @@
+<template>
+<!-- style="margin: 20rpx 0;" -->
+	<cover-view>
+		<cover-view class="title" @click="openModule(menuItem)">
+		<!-- <image src="/static/icon/up1.png" class="icon_up" v-if="down"></image>
+		<image src="/static/icon/down1.png" class="icon_up" v-if="!down"></image> -->
+			<cover-view class="title_name" style="margin-left: 10rpx;">{{menuItem.name}}</cover-view>
+			<cover-view>
+				<cover-image src="/static/icon/up.png" class="icon_up" v-if="down"></cover-image>
+				<cover-image src="/static/icon/down.png" class="icon_up" v-if="!down"></cover-image>
+			</cover-view>
+		</cover-view>
+		<cover-view v-show="!down">
+			<cover-view v-for="(itemM,indexM) in list" :key="indexM">
+				<courseChapterMulu :orderGoodsId="orderGoodsId"
+						:isLive="isLive" :preItem="list[indexM - 1] || preItem" :sectionMaxNum="sectionMaxNum" :needOpen="needOpen" @playEnd="playEnd($event)" @toDo="toDo($event)" :courseId="courseId" :learningOrder="learningOrder" :goodsId="goodsId" :isBuy="isBuy" :gradeId="gradeId" :isRebuild="isRebuild"  :menuItem="itemM" :levelId="levelId+'-'+itemM.chapterId"></courseChapterMulu>
+				<!-- <u-line v-if="indexM<list.length-1"></u-line> -->
+			</cover-view>
+		</cover-view>
+	</cover-view>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+// import courseChapter from '@/components/course/courseChapter.vue';
+import courseChapterMulu from '@/components/course/courseChapterMulu.vue'
+export default {
+	name: 'courseModule',
+	props: {
+		isLive:false,
+		orderGoodsId:{
+			default:0
+		},
+		preItem:{
+			default:undefined
+		},
+		learningOrder:{ //是否设置学习顺序 1 章节顺序 0不设置 2从头学到尾顺序
+			type:Number,
+			defaule:0
+		},
+		needOpen:{ //是否默认展开
+			type:Boolean,
+			default:false,
+		},
+		menuItem: {
+			type: Object,
+			default: {}
+		},
+		goodsId: {
+			type: Number,
+			default: 0
+		},
+		courseId: {
+			type: Number,
+			default: 0
+		},
+		isBuy: { //是否是已购买商品
+			type: Boolean,
+			default: false
+		},
+		levelId: {
+			type: String,
+			default: ""
+		},
+		isRebuild: {  //是否重修目录
+			type: Boolean,
+			default: false
+		},
+		gradeId: {  //重修需要班级ID
+			type: Number,
+			default: 0
+		},
+		sectionMaxNum:{
+			default:undefined
+		}
+	},
+	components: {
+		// courseChapter, 
+		courseChapterMulu,
+	},
+	data() {
+		return {
+			 down:true,
+			 list:[],
+		};
+	},
+	onLoad() {},
+	created() {
+		
+	},
+	mounted() {
+		if(this.needOpen && this.chapterOpen) {
+			this.openModule(this.menuItem)
+		}
+	},
+	methods: {
+		playEnd(isRebuild) {
+			this.$emit('playEnd',{isRebuild:isRebuild.isRebuild})
+		},
+		toDo(item) {
+			this.$emit('toDo',item)
+		},
+		openModule(item){
+			this.down = !this.down
+			if(!this.down&&this.list.length==0){
+				if(this.isBuy){
+					if(this.isRebuild){
+						this.getReChapterList(item.id,item.courseId)
+					}else{
+						this.getBuyChapterList(item.id,item.courseId) //已购买目录
+					}
+				}else{
+					this.getChapterList(item.id) //未购买目录
+				}
+				
+			}
+		},
+			getChapterList(moduleId) {
+					let self = this
+                    // url: '/app/common/course/chapterList/'+data,查询模块与章关系列表
+					this.$api.chapterList(moduleId).then(res => {
+						if(res.data.code==200){
+							for(let i=0;i<res.data.data.length;i++){
+								let item = res.data.data[i]
+								item.id = item.chapterId
+								item.menuType = 2;
+							}
+							self.list = res.data.data
+						}
+					});
+				},
+		getReChapterList(moduleId,courseId) {
+			let self = this
+			// /course/chapterList 查询模块与章关系列表
+			this.$api.reChapterList({moduleId:moduleId,gradeId:this.gradeId,courseId:courseId,rebuild:1}).then(res => {
+				if(res.data.code==200){
+					for(let i=0;i<res.data.data.length;i++){
+						let item = res.data.data[i]
+						item.id = item.chapterId
+						
+					}
+					self.list = res.data.data
+				}
+			});
+		},
+		getBuyChapterList(moduleId,courseId) {
+			let self = this
+			this.$api.reChapterList({moduleId:moduleId,gradeId:this.gradeId,courseId:courseId}).then(res => {
+				if(res.data.code==200){
+					for(let i=0;i<res.data.data.length;i++){
+						let item = res.data.data[i]
+						item.id = item.chapterId
+						item.menuType = 2;
+					}
+					self.list = res.data.data
+				}
+			});
+		},
+	},computed: { ...mapGetters(['chapterOpen']) },
+};
+</script>
+
+<style lang="scss" scoped>
+	
+.title{
+	height: 70rpx;
+	font-family: PingFang SC;
+	// margin-bottom:30rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-bottom: 1rpx solid #EEEEEE;
+	.title_name {
+		font-size: 24rpx;
+		font-weight: 500;
+		color: #333333;
+		white-space:nowrap;
+		overflow:hidden;
+		text-overflow:ellipsis; 
+	}
+	.icon_up{
+		width: 24rpx;
+		height: 24rpx;
+	}
+}
+</style>

components/course/courseSectionMulu.vue

@@ -0,0 +1,651 @@
+<template>
+	<cover-view style="display: flex;justify-content: space-between;align-items: center;" @click="getVideo">
+		<cover-view style="display: flex;justify-content: space-between;margin: 20rpx 0;width: 100%;">
+			<cover-view style="display: flex;align-items: center;flex:1;">
+				<cover-view class="tag tagColor1" v-if="menuItem.sectionType==1">录播</cover-view>
+				<cover-view class="tag tagColor2" v-if="menuItem.sectionType==2">直播</cover-view>
+				<cover-view class="tag tagColor3" v-if="menuItem.sectionType==3">回放</cover-view>
+				<cover-view class="t_content">
+					<cover-view v-if="menuItem.sectionType==1" :class="playSectionId==newId && playNextId==playId?'color1':''">{{menuItem.name || ''}}</cover-view>
+					<cover-view v-if="menuItem.sectionType==2" :class="playSectionId==newId && playNextId==playId?'color2':''">{{menuItem.name || ''}}</cover-view>
+					<cover-view v-if="menuItem.sectionType==3" :class="playSectionId==newId && playNextId==playId?'color3':''">{{menuItem.name || ''}}</cover-view>
+					<cover-view style="font-size: 20rpx;color: #FF3B30;" v-if="menuItem.sectionType==2 && menuItem.liveStartTime">
+						<cover-view v-if="menuItem.liveStartTime>nowTime || !isBuy">
+							<cover-view>{{$method.timestampToTime(menuItem.liveStartTime, isDay =false)}}</cover-view>-
+							<cover-view>{{$method.timestampToTime(menuItem.liveEndTime, isDay =false)}}</cover-view>
+						</cover-view>
+						<template v-if="isLast()">
+							<cover-view v-if="liveLast.watchStatus == 'live'">
+								<cover-view>直播中</cover-view>
+							</cover-view>
+							<cover-view v-if="liveLast.watchStatus == 'end'">
+								<cover-view>当前直播回放视频请稍后再查看</cover-view>
+							</cover-view>
+						</template>
+						<!-- <view v-if="menuItem.liveStartTime<=nowTime&&menuItem.liveEndTime>nowTime">
+							<text>直播中</text>
+						</view>
+						<view v-if="menuItem.liveEndTime<nowTime">
+							<text>回放</text>
+						</view> -->
+					</cover-view>
+					<cover-view style="font-size: 20rpx;color: #FF3B30;" v-if="menuItem.sectionType == 3">
+						<cover-view v-if="!menuItem.recordingUrl">
+							<cover-view>当前直播回放视频请稍后再查看</cover-view>
+						</cover-view>
+						<cover-view v-else>
+							回放中
+						</cover-view>
+					</cover-view>
+				</cover-view>
+				<cover-view v-if="menuItem.sectionType==null">{{menuItem.name || ''}}</cover-view>
+			</cover-view>
+			<cover-view style="font-size: 20rpx;color: #FF3B30;"  v-if="menuItem.liveStartTime && menuItem.sectionType != 3 && isBuy">
+				
+				<template v-if="!isLast() && !isLive">
+					<cover-view class="tagWillPlay" v-if="menuItem.liveStartTime>nowTime">
+						<cover-view>待开播</cover-view>
+					</cover-view>
+					<cover-view class="tagPlaying" v-if="menuItem.liveStartTime<=nowTime&&menuItem.liveEndTime>nowTime">
+						<cover-view>直播中</cover-view>
+					</cover-view>
+					<cover-view class="tagPlayed" v-if="menuItem.liveEndTime<nowTime">
+						<cover-view>已结束</cover-view>
+					</cover-view>
+				</template>
+				
+			</cover-view>
+			<!-- 直播课程没有学习状态 -->
+			<template v-if="!isLive">
+				<cover-view v-if="(isRebuild||menuItem.rebuild>0)" class="tagRe">待重修</cover-view>
+				<cover-view v-else>
+					<cover-view v-if="menuItem.learning==1" class="tagGreen">已看完</cover-view>
+				</cover-view>
+			</template>
+			
+			
+		</cover-view>
+		<cover-view v-if="menuItem.tryListen&&!isBuy" class="tryBox">
+			试看
+		</cover-view>
+	</cover-view>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import eventHub from '@/common/eventHub.js'
+import {WEBVIEW_URL} from '@/common/request.js'
+export default {
+	name: 'courseSection',
+	props: {
+		isLive:false, //是否是直播课
+		orderGoodsId:{
+			default:0
+		},
+		preItem:{
+			default:undefined,
+		},
+		learningOrder:{ //是否设置学习顺序 1 章节顺序 0不设置 2从头学到尾顺序
+			type:Number,
+			default:0
+		},
+		courseId: {
+			type: Number,
+			default: 0
+		},
+		goodsId: {
+			type: Number,
+			default: 0
+		},
+		menuItem: {
+			type: Object,
+			default: {}
+		},
+		isBuy: {
+			type: Boolean,
+			default: false
+		},
+		levelId: {
+			type: String,
+			default: ""
+		},
+		isRebuild: {
+			type: Boolean,
+			default: false
+		},
+		gradeId: {
+			type: Number,
+			default: 0
+		},
+		nextMenuItem: {
+			type: Object,
+			default: {}
+		},
+		sectionMaxNum:{
+			default:undefined,
+		},
+	},
+	watch:{
+		menuItem(val) {
+			console.log(val,'val')
+		}
+	},
+	data() {
+		return {
+			nowTime:0,
+			newId:0,
+			playId:'',
+			clickLock:false, //点击锁，防止连续点击多次
+		};
+	},
+	onLoad() {
+	},
+	created() {
+		
+	},
+	mounted() {
+		this.nowTime = Number(new  Date().getTime()/1000).toFixed(0)
+		this.newId= this.menuItem.sectionId>0?this.menuItem.sectionId:this.menuItem.menuId
+		console.log(this.newId,'this.newId')
+		console.log(this.playSectionId,'this.playSectionId')
+		console.log(this.isRebuild)
+		console.log(this.nextMenuItem,'nextMenuItem')
+		console.log(this.menuItem,'this.menuItem')
+		let moduleId = this.menuItem.moduleId || 0;
+		let chapterId = this.menuItem.chapterId || 0;
+		let sectionId = this.menuItem.sectionId || this.menuItem.menuId;
+		let playNextId = `moduleId${moduleId}chapterId${chapterId}sectionId${sectionId}${this.isRebuild?'isRebuild':''}`;
+		this.playId = playNextId;
+		uni.$off('playNext'+playNextId) //绑定前先移除之前的事件
+		uni.$once('playNext'+playNextId, (data) => {
+			//到时会触发每个节的监听事件，只允许当前节的接收
+			let self = this
+			
+			if(this.nextMenuItem.recordingUrl&&this.isRebuild&&(this.newId==this.playSectionId) && data.fromRebuild){  // fromRebuild 来自重修目录的点击才弹出播放下一节
+				//重修存在下一节
+				uni.showModal({
+				    title: '提示',
+				    content: '是否播放下一节',
+				    success: function (res) {
+				        if (res.confirm) {
+				            console.log('用户点击确定');
+							let nextId= self.nextMenuItem.sectionId>0?self.nextMenuItem.sectionId:self.nextMenuItem.menuId
+							//设置播放的节ID
+							self.$store.commit('setPlaySectionId', {playSectionId  :nextId});
+							self.$store.commit('setPlayVID', {playVID  :self.nextMenuItem.recordingUrl});
+							let ids = self.levelId.split('-');
+							ids[2] = nextId 
+							uni.$emit('levelId', ids.join('-'))
+							uni.$emit('getSection', self.nextMenuItem)
+							self.$emit('playEnd',{isRebuild:self.isRebuild})
+							// uni.$off('playend')
+							// uni.$on('playend',res => {
+							// 	console.log('playend2')
+							// 	this.$emit('playEnd',{isRebuild:this.isRebuild})
+							// })
+							
+				        } else {
+							let nextId= self.nextMenuItem.sectionId>0?self.nextMenuItem.sectionId:self.nextMenuItem.menuId
+							//设置播放的节ID
+							self.$store.commit('setPlaySectionId', {playSectionId  :nextId});
+							self.$store.commit('setPlayVID', {playVID  :self.nextMenuItem.recordingUrl});
+							let ids = self.levelId.split('-');
+							ids[2] = nextId 
+							self.$emit('playEnd',{isRebuild:self.isRebuild})
+						}
+				    }
+				});
+			} else {
+				this.$emit('playEnd',{isRebuild:this.isRebuild})
+			}
+		});
+	},
+	methods: {
+		isLast() {
+			console.log(this.liveLast,'this.liveLast')
+			if(this.liveLast) {
+				let sectionASame = this.liveLast.sectionId == (this.menuItem.sectionId || this.menuItem.menuId)
+				let chapterSame = this.liveLast.chapterId == (this.menuItem.chapterId || 0)
+				let moduleSame = this.liveLast.moduleId == (this.menuItem.moduleId || 0);
+				console.log(sectionASame && chapterSame && moduleSame,'sectionASame && chapterSame && moduleSame')
+				return sectionASame && chapterSame && moduleSame
+			} else {
+				return false;
+			}
+			
+		},
+		studyRecordMenuAllList() {
+			return new Promise(resolve => {
+				
+				this.$api.studyRecordMenuAllList({
+					courseId:this.courseId,
+					gradeId:this.gradeId,
+					goodsId:this.goodsId
+				}).then(res => {
+					if(res.data.code == 200) {
+						resolve(res.data.data)
+					}
+				})
+			})
+		},
+		gradeCheckGoodsStudy() {
+			let moduleId = this.menuItem.moduleId || 0;
+			let chapterId = this.menuItem.chapterId || 0;
+			let sectionId = this.menuItem.sectionId || this.menuItem.menuId;
+			return new Promise(resolve => {
+				this.$api.gradeCheckGoodsStudy({
+					goodsId:this.goodsId,
+					gradeId:this.gradeId,
+					moduleId:this.menuItem.moduleId || 0,
+					chapterId:this.menuItem.chapterId || 0,
+					sectionId:this.menuItem.sectionId || this.menuItem.menuId
+				}).then( res => {
+					resolve(res.data.data)
+				})
+			})
+		},
+		goodsTodayStudySectionNum() {
+			return new Promise(resolve => {
+				this.$api.goodsTodayStudySectionNum({goodsId:this.goodsId,gradeId:this.gradeId}).then(res => {
+					if(res.data.code == 200) {
+						resolve(res.data.data)
+					}
+				})
+			})
+		},
+		async getVideo(){
+			if(this.clickLock) {
+				return;
+			}
+
+			this.clickLock = true;
+			
+			if(this.learningOrder == 2 && !this.menuItem.isRebuild && !this.isLive) { //要按从头到尾顺序学习, 且不是重修课程
+				if(this.preItem) {
+					let rows = await this.studyRecordMenuAllList();
+					let newRows = [];
+					for(let i = 0; i < rows.length; i++ ) {
+						let moduleTrue = rows[i].moduleId == this.menuItem.moduleId || rows[i].moduleId == 0
+						let chapterTrue = rows[i].chapterId == this.menuItem.chapterId || rows[i].chapterId == 0;
+						let sectionTrue = (rows[i].sectionId == this.menuItem.sectionId) || (rows[i].sectionId ==  this.menuItem.menuId);
+						if(moduleTrue && chapterTrue && sectionTrue) {
+							break;
+						} else {
+							if(rows[i].sectionType != 2) {
+								newRows.push(rows[i])
+							}
+							
+						}
+					}
+					console.log(newRows)
+					let isAllLearn = newRows.every(item => {
+						return item.studyStatus == 1;
+					})
+					
+					if(isAllLearn) {
+						this.playVideo();
+					} else {
+						uni.showToast({
+							icon:'none',
+							title:'请按顺序学习视频课程'
+						})
+					}
+					
+					// if(this.preItem.menuType == 3) { //上一个是节
+					// 	if(this.preItem.learning == 1) { //上一节学完
+					// 		this.playVideo();
+					// 	} else {
+					// 		uni.showToast({
+					// 			icon:'none',
+					// 			title:'请按顺序学习视频课程'
+					// 		})
+					// 	}
+					// } else if(this.preItem.menuType == 2) { //上一个是章
+					// 	this.$api.reSectionList({chapterId: this.preItem.menuId || this.preItem.chapterId,gradeId:this.gradeId,courseId:this.courseId,moduleId:this.preItem.moduleId || 0}).then(res => {
+					// 		if(res.data.code==200){
+					// 			let lastItem = res.data.data[res.data.data.length -1];
+					// 			if(lastItem.learning == 1) {
+					// 				this.playVideo();
+					// 			} else {
+					// 				uni.showToast({
+					// 					icon:'none',
+					// 					title:'请按顺序学习视频课程'
+					// 				})
+					// 			}
+					// 		}
+					// 	});
+					// } else if(this.preItem.menuType == 1) { //上一个是模块
+					// 	this.$api.reChapterList({moduleId:this.preItem.menuId,gradeId:this.gradeId,courseId:this.courseId}).then(res => {
+					// 		if(res.data.code==200){
+					// 			let lastChapterItem = res.data.data[res.data.data.length -1];
+								
+					// 			this.$api.reSectionList({chapterId:lastChapterItem.chapterId,gradeId:this.gradeId,courseId:this.courseId,moduleId:this.menuItem.menuId || this.menuItem.moduleId}).then(res => {
+					// 				if(res.data.code==200){
+					// 					let lastSectionItem = res.data.data[res.data.data.length -1];
+					// 					if(lastSectionItem.learning == 1) {
+					// 						this.playVideo();
+					// 					} else {
+					// 						uni.showToast({
+					// 							icon:'none',
+					// 							title:'请按顺序学习视频课程'
+					// 						})
+					// 					}
+					// 				}
+					// 			});
+					// 		}
+					// 	});
+					// } 
+				} else { //第一章第一节
+					this.playVideo();
+				}
+			} else { 
+				this.playVideo();
+			}
+			
+			
+			setTimeout(() => {
+				this.clickLock = false;
+			},3000)
+			
+		},
+		studyRecordGetChannelBasicInfo(channelId) {
+			return new Promise((resolve) => {
+				this.$api
+					.studyRecordGetChannelBasicInfo({
+						channelId,
+					})
+					.then((res) => {
+						resolve(res.data.data);
+					});
+			});
+		},
+		async playVideo() {
+			if(this.menuItem.sectionType==1||this.menuItem.sectionType==3){
+				//录播
+				if(!this.isBuy){
+					//非购买
+					if(!this.menuItem.tryListen){
+						//不允许试听
+						this.clickLock = false;
+						return
+					} else {
+						this.$store.commit('setPlaySectionId', {playSectionId  :this.newId});
+						this.$store.commit('setPlayVID', {playVID  :this.menuItem.recordingUrl});
+						this.menuItem.courseId = this.courseId;
+						uni.$emit('getSection', this.menuItem)
+						return;
+					}
+					
+				}
+				
+				let learnNum = await this.goodsTodayStudySectionNum()
+				let hasLearn = await this.gradeCheckGoodsStudy();
+				
+				console.log(this.sectionMaxNum,'this.sectionMaxNum')
+				console.log(learnNum,'learnNum')
+				if(this.sectionMaxNum > 0) {
+					if(learnNum >= this.sectionMaxNum && !hasLearn) {
+						uni.showToast({
+							icon:'none',
+							title:`每天最多学习${this.sectionMaxNum}节`
+						})
+						this.clickLock = false;
+						return;
+					}
+				}
+				if(!this.menuItem.recordingUrl){
+					uni.showToast({
+						title: '暂无播放地址数据',
+						icon: 'none'
+					});
+					this.clickLock = false;
+					return;
+				}
+				/* if(this.playSectionId==this.newId){
+					//切换为同一节
+					return
+				} */
+				
+				if(this.playSectionId>0){
+					//切换视频
+					let oldSectionId = this.playSectionId
+					uni.$emit('changeSection', oldSectionId)
+				}
+				//设置播放的节ID
+				this.$store.commit('setPlaySectionId', {playSectionId  :this.newId});
+				this.$store.commit('setPlayVID', {playVID  :this.menuItem.recordingUrl});
+				this.$store.commit('updatePlayNextId',this.playId)
+				uni.$emit('levelId', this.levelId)
+				uni.$emit('getSection', this.menuItem)
+				uni.$emit('isRebuild',this.isRebuild)
+				console.log(this.menuItem,'menuItem')
+				// uni.$off('playend')
+				// uni.$on('playend',res => {
+				// 	console.log('playend2')
+				// 	this.$emit('playEnd',{isRebuild:this.isRebuild})
+				// })
+				console.log(999)
+			}
+			if(this.menuItem.sectionType==2){
+				//直播
+				if(!this.isBuy){
+					//非购买
+					this.clickLock = false;
+					return
+				}
+				
+				let learnNum = await this.goodsTodayStudySectionNum()
+				let hasLearn = await this.gradeCheckGoodsStudy();
+				
+				console.log(this.sectionMaxNum,'this.sectionMaxNum')
+				console.log(learnNum,'learnNum')
+				if(this.sectionMaxNum > 0 && !this.isLive) {
+					if(learnNum >= this.sectionMaxNum && !hasLearn) {
+						uni.showToast({
+							icon:'none',
+							title:`每天最多学习${this.sectionMaxNum}节`
+						})
+						this.clickLock = false;
+						return;
+					}
+				}
+				if(!this.menuItem.liveUrl){
+					uni.showToast({
+						title: '暂无直播地址数据',
+						icon: 'error'
+					});
+					return;
+				}
+				
+				let data = await this.studyRecordGetChannelBasicInfo(this.menuItem.liveUrl);
+				let nowTime = +this.$method.timest();
+				
+				if (this.menuItem.liveStartTime > nowTime) {
+					if (data.watchStatus == "end" || data.watchStatus == "playback") {
+						this.clickLock = false;
+						uni.showToast({
+							title: '直播未开始',
+							icon: 'none'
+						});
+						return;
+					}
+				} else if (
+					this.menuItem.liveStartTime < nowTime &&
+					this.menuItem.liveEndTime > nowTime
+				) {
+					if (data.watchStatus == "end" || data.watchStatus == "playback") {
+						this.clickLock = false;
+						uni.showToast({
+							title: '暂无直播',
+							icon: 'none'
+						});
+						return;
+					}
+				} else if (this.menuItem.liveEndTime < nowTime) {
+					if (data.watchStatus == "end" || data.watchStatus == "playback") {
+						this.clickLock = false;
+						uni.showToast({
+							title: '直播已结束',
+							icon: 'none'
+						});
+						return;
+					}
+				}
+				// if (data.watchStatus == "end" || data.watchStatus == "playback") {
+				// 	this.clickLock = false;
+				// 	uni.showToast({
+				// 		title: '直播已结束',
+				// 		icon: 'none'
+				// 	});
+				// 	return;
+				// }
+
+				// if (data.watchStatus == "waiting") {
+				// 	this.clickLock = false;
+				// 	uni.showToast({
+				// 		title: '直播未开始',
+				// 		icon: 'none'
+				// 	});
+				// 	return;
+				// }
+	
+				// if(this.playSectionId==this.newId){
+				// 	//切换为同一频道
+				// 	this.clickLock = false;
+				// 	return
+				// }
+				let moduleId = this.menuItem.moduleId || 0;
+				let chapterId = this.menuItem.chapterId || 0;
+				let sectionId = this.menuItem.sectionId || this.menuItem.menuId;
+				let encode = encodeURIComponent(WEBVIEW_URL+'pages/live/index?token='+uni.getStorageSync('token')+'&userInfo='+JSON.stringify(this.userInfo)+'&channelId='+this.menuItem.liveUrl+'&gradeId='+this.gradeId+'&courseId='+this.courseId+'&goodsId='+this.goodsId+'&orderGoodsId='+this.orderGoodsId+'&sectionId='+sectionId+'&chapterId='+chapterId+'&moduleId='+moduleId)
+				uni.navigateTo({
+					url:`../../pages/webview/index?url=`+encode
+				})
+				
+				return;
+				//设置播放的节ID
+				// this.$store.commit('setPlaySectionId', {playSectionId  :this.newId});
+				// this.$store.commit('setPlayChannelId', {playChannelId  :this.menuItem.liveUrl});
+				// this.$store.commit('updatePlayNextId',this.playId)
+				// uni.$emit('levelId', this.levelId)
+				// uni.$emit('getChannel', this.menuItem)
+				// uni.$emit('isRebuild',this.isRebuild)
+				// console.log(this.menuItem,'menuItem')
+				// uni.$off('playend')
+				// uni.$on('playend',res => {
+				// 	console.log('playend1')
+				// 	this.$emit('playEnd',{isRebuild:this.isRebuild})
+				// })
+				console.log(888)
+			
+			}
+		}
+	},
+	computed: { ...mapGetters(['playSectionId','playChannelId','playVID','playNextId','userInfo','liveLast']) }
+	
+};
+</script>
+
+<style scoped lang="scss">
+	.tagGreen{
+		width: 80rpx;
+		height: 28rpx;
+		background: #34C759;
+		border-radius: 8rpx;
+		font-size: 20rpx;
+		color: #FFFFFF;
+		text-align: center;
+	}
+	.tagWillPlay{
+		width: 80rpx;
+		height: 28rpx;
+		background: #EBF4FF;
+		border-radius: 8rpx;
+		font-size: 20rpx;
+		color: #007AFF;
+		text-align: center;
+	}
+	.tagPlaying{
+		width: 80rpx;
+		height: 28rpx;
+		background: #FFF7EB;
+		border-radius: 8rpx;
+		font-size: 20rpx;
+		color: #FF9500;
+		text-align: center;
+	}
+	.tagPlayed{
+		width: 80rpx;
+		height: 28rpx;
+		background: #EEEEEE;
+		border-radius: 8rpx;
+		font-size: 20rpx;
+		color: #666666;
+		text-align: center;
+	}
+	.tagRe{
+		width: 80rpx;
+		height: 28rpx;
+		background: #FF3B30;
+		border-radius: 8rpx;
+		font-size: 20rpx;
+		color: #FFFFFF;
+		text-align: center;
+	}
+	.tryBox{
+		width: 96rpx;
+		height: 48rpx;
+		background: #007AFF;
+		border-radius: 24rpx;
+		color: #FFFFFF;
+		font-size: 30rpx;
+		line-height: 48rpx;
+		text-align: center;
+	}
+	.icon_up{
+		width: 24rpx;
+		height: 24rpx;
+	}
+	.t_content3{
+		color: #007AFF;
+	}
+	.t_content2{
+		color: #007AFF;
+	}
+	.t_content1{
+		color: #007AFF;
+	}
+	.t_content{
+		font-size: 30rpx;
+		margin-left: 10rpx;
+		color: #666666;
+		flex:1;
+	}
+	.tagColor3{
+		border: 2rpx solid #FF9500;
+		color: #FF9500;
+	}
+	.tagColor2{
+		border: 2rpx solid #FF3B30;
+		color: #FF3B30;
+	}
+	.tagColor1{
+		border: 2rpx solid #007AFF;
+		color: #007AFF;
+		// border-top: 2rpx soloid #007AFF;
+	}
+	.color3{
+		color: #FF9500;
+	}
+	.color2{
+		color: #FF3B30;
+	}
+	.color1{
+		color: #007AFF;
+	}
+	.tag{
+		border-radius: 8rpx;
+		font-size: 20rpx;
+		padding: 5rpx;
+	}
+</style>

pages3/polyv/detail.vue

@@ -4,6 +4,7 @@
       :title="detail.courseName || '课程详情'"
       v-show="navShow"
     ></nav-bar>
+    
     <view id="top">
       <view class="video_box" v-if="!startStatus">
         <image
@@ -45,6 +46,7 @@
             :startTime="startTime"
             :enableAutoRotation="enableAutoRotation"
 						@loadedmetadata="loadedmetadata"
+            @controlstoggle="controlstoggle"
           ></polyv-player>
           <cover-view
             class="video-toast__close"
@@ -61,10 +63,6 @@
             >
           </cover-view>
           <!-- 全屏时的目录 -->
-          <!-- v-if="showMulu" -->
-          <cover-view class="full_mulu">
-            <image src="/pages3/static/imgs/mulu.png" style="width: 45rpx;height: 32rpx;" @click="clickMulu()"></image>
-          </cover-view>
           
         </view>
         <view
@@ -516,64 +514,7 @@
 		
 		</u-modal>
 		 
-     <view class="full_mulu">
-        <scroll-view :class="muluStyle ? 'mulu_box_in' : 'mulu_box_out'" scroll-y="true">
-            <view class="menuBox" v-for="(item, index) in menuList" :key="index">
-                <!--模块 -->
-                <view v-if="item.type == 1"
-                ><courseModule
-                    :orderGoodsId="orderGoodsId"
-                    :sectionMaxNum="goodsData.sectionMaxNum"
-                    :needOpen="menuIndex[0] === index ? true : false"
-                    :courseId="courseId"
-                    :preItem="menuList[index - 1]"
-                    :learningOrder="businessData.goodsLearningOrder"
-                    :goodsId="goodsId"
-                    :gradeId="gradeId"
-                    :isBuy="true"
-                    :menuItem="item"
-                    :levelId="item.menuId"
-                ></courseModule
-                ></view>
-                <!--章 -->
-                <view v-if="item.type == 2"
-                ><courseChapter
-                                    :orderGoodsId="orderGoodsId"
-                    :sectionMaxNum="goodsData.sectionMaxNum"
-                    :needOpen="menuIndex[0] === index ? true : false"
-                    :courseId="courseId"
-                    :preItem="menuList[index - 1]"
-                    @playEnd="sectionPlayEnd($event, index)"
-                    :learningOrder="businessData.goodsLearningOrder"
-                    :goodsId="goodsId"
-                    :gradeId="gradeId"
-                    :isBuy="true"
-                    :menuItem="item"
-                    :levelId="'0-' + item.menuId"
-                ></courseChapter
-                ></view>
-                <!--节 -->
-                <view v-if="item.type == 3"
-                ><courseSection
-                                    :orderGoodsId="orderGoodsId"
-                    :sectionMaxNum="goodsData.sectionMaxNum"
-                    @playEnd="sectionPlayEnd($event, index)"
-                    :courseId="courseId"
-                    :preItem="menuList[index - 1]"
-                    :learningOrder="businessData.goodsLearningOrder"
-                    :goodsId="goodsId"
-                    :gradeId="gradeId"
-                    :isBuy="true"
-                    :menuItem="item"
-                    :levelId="'0-0-' + item.menuId"
-                ></courseSection
-                ></view>
-            </view>
-        </scroll-view>
-        <view class="mulu_img">
-          <image src="/pages3/static/imgs/mulu.png" style="width: 45rpx;height: 32rpx;" @click="clickMulu()"></image>
-        </view>
-      </view>
+      <!--  -->
   </view>
 </template>
 
@@ -582,6 +523,9 @@ import plv from "../static/polyv-sdk/index";
 import courseModule from "@/components/course/courseModule.vue";
 import courseChapter from "@/components/course/courseChapter.vue";
 import courseSection from "@/components/course/courseSection.vue";
+import courseModuleMulu from "@/components/course/courseModuleMulu.vue"
+import courseChapterMulu from "@/components/course/courseChapterMulu.vue";
+import courseSectionMulu from "@/components/course/courseSectionMulu.vue";
 import {WEBVIEW_URL} from '@/common/request.js'
 // import { websocket } from "@/common/socket.js";
 import { mapGetters, mapMutations } from "vuex";
@@ -590,6 +534,9 @@ export default {
     courseModule,
     courseChapter,
     courseSection,
+    courseModuleMulu,
+    courseChapterMulu,
+    courseSectionMulu,
   },
   data() {
     return {
@@ -2300,6 +2247,10 @@ export default {
       }
       console.log('quanping::', this.showMulu)
     },
+    controlstoggle(event) {
+      console.log('控制台切换', event)
+      this.showMulu = event.detail.show
+    },
     getGoodsDetail() {
       let self = this;
       this.$api.goodsDetail(this.goodsId).then((res) => {
@@ -3165,7 +3116,10 @@ page {
 }
 .video_box {
   position: relative;
-
+  #playerVideo {
+    position: relative;
+    z-index: 99;
+  }
   .video-toast {
     position: absolute;
     width: 686rpx;
@@ -3235,19 +3189,23 @@ page {
 }
 .full_mulu {
     position: absolute;
-    bottom: 100rpx;
-    right: 200rpx;
-    width: 485rpx;
+    top: 100rpx;
+    right: 20rpx;
+    width: 700rpx;
     height: 515rpx;
-    // background: rgba(0, 0, 0, 0.6);
     color: #333;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    z-index: 9999;
+    z-index: 99999;
+    .mulus {
+      width: 623rpx;
+      // height: 515rpx;
+      height: 400rpx;
+      overflow-y: scroll;
+      // overflow: scroll;
+    }
     .mulu_box_in {
-        width: 406rpx;
-        height: 515rpx;
         background-color: #b7b7b7;
         border-radius: 16rpx;
         // transition: all 0.5s;
@@ -3257,7 +3215,7 @@ page {
           height: 0;    
           position: absolute;    
           top: 235rpx;
-          right: 24px;
+          right: 27px;
           border-top: 16rpx solid transparent;
           border-right: 16rpx solid transparent;
           border-left: 16rpx solid #b7b7b7;
@@ -3265,9 +3223,25 @@ page {
         }
     }
     .mulu_box_out {
-      visibility: hidden;
-      // width: 0rpx;
-      // transition: all 0.5s;
+      // visibility: hidden;
+      display: none;
+    }
+    .menuBox_mulu {
+      // width: 100%;
+      background: #ffffff;
+      border-radius: 16rpx;
+      padding: 0rpx 20rpx;
+      margin-bottom: 20rpx;
+    }
+    .ml_img {
+      position: absolute;
+      right: 0;
+      top: 100rpx;
+    }
+    .items {
+      width: 620rpx;
+      height: 100rpx;
+      border: 1rpx solid red;
     }
   }