zc_saas_h5/components/course/courseSection.vue

<template>
  <view
    style="display: flex; justify-content: space-between; align-items: center"
    @click="getVideo"
  >
    <view
      style="
        display: flex;
        justify-content: space-between;
        margin: 20rpx 0;
        width: 100%;
      "
    >
      <view style="display: flex; align-items: center; flex: 1">
        <view class="tag tagColor1" v-if="menuItem.sectionType == 1">录播</view>
        <view class="tag tagColor2" v-if="menuItem.sectionType == 2">直播</view>
        <view class="tag tagColor3" v-if="menuItem.sectionType == 3">回放</view>
        <view class="t_content">
          <view
            v-if="menuItem.sectionType == 1"
            :class="
              playSectionId == newId && playNextId == playId ? 'color1' : ''
            "
            >{{ menuItem.name || "" }}</view
          >
          <view
            v-if="menuItem.sectionType == 2"
            :class="
              playSectionId == newId && playNextId == playId ? 'color2' : ''
            "
            >{{ menuItem.name || "" }}</view
          >
          <view
            v-if="menuItem.sectionType == 3"
            :class="
              playSectionId == newId && playNextId == playId ? 'color3' : ''
            "
            >{{ menuItem.name || "" }}</view
          >
          <view
            style="font-size: 20rpx; color: #ff3b30"
            v-if="menuItem.sectionType == 2 && menuItem.liveStartTime"
          >
            <view v-if="menuItem.liveStartTime > nowTime || !isBuy">
              <text>{{
                $method.timestampToTime(menuItem.liveStartTime, (isDay = false))
              }}</text
              >-
              <text>{{
                $method.timestampToTime(menuItem.liveEndTime, (isDay = false))
              }}</text>
            </view>
            <template v-if="isLast()">
              <view v-if="liveLast.watchStatus == 'live'">
                <text>直播中</text>
              </view>
              <view v-if="liveLast.watchStatus == 'end'">
                <text>当前直播回放视频请稍后再查看</text>
              </view>
            </template>
            <!-- <view v-if="menuItem.liveStartTime<=nowTime&&menuItem.liveEndTime>nowTime">
							<text>直播中</text>
						</view>
						<view v-if="menuItem.liveEndTime<nowTime">
							<text>回放</text>
						</view> -->
          </view>
          <view
            style="font-size: 20rpx; color: #ff3b30"
            v-if="menuItem.sectionType == 3"
          >
            <view v-if="!menuItem.recordingUrl">
              <text>当前直播回放视频请稍后再查看</text>
            </view>
            <view v-else> 回放中 </view>
          </view>
        </view>
        <view v-if="menuItem.sectionType == null">{{
          menuItem.name || ""
        }}</view>
      </view>
      <view
        style="font-size: 20rpx; color: #ff3b30"
        v-if="menuItem.liveStartTime && menuItem.sectionType != 3 && isBuy"
      >
        <template v-if="!isLast() && !isLive">
          <view class="tagWillPlay" v-if="menuItem.liveStartTime > nowTime">
            <text>待开播</text>
          </view>
          <view
            class="tagPlaying"
            v-if="
              menuItem.liveStartTime <= nowTime &&
              menuItem.liveEndTime > nowTime
            "
          >
            <text>直播中</text>
          </view>
          <view class="tagPlayed" v-if="menuItem.liveEndTime < nowTime">
            <text>已结束</text>
          </view>
        </template>
      </view>
      <!-- 直播课程没有学习状态 -->
      <template v-if="!isLive">
        <view v-if="isRebuild || menuItem.rebuild > 0" class="tagRe"
          >待重修</view
        >
        <view v-else>
          <view v-if="menuItem.learning == 1" class="tagGreen">已看完</view>
        </view>
      </template>
    </view>
    <view v-if="menuItem.tryListen && !isBuy" class="tryBox"> 试看 </view>
  </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;
}
.color3 {
  color: #ff9500;
}
.color2 {
  color: #ff3b30;
}
.color1 {
  color: #007aff;
}
.tag {
  border-radius: 8rpx;
  font-size: 20rpx;
  padding: 5rpx;
}
</style>