zc_saas_h5/pages3/course/detail.vue

<template>
  <view>
    <nav-bar title="课程详情"></nav-bar>
    <view class="videoBox">
      <view>
        <view class="video_box" v-if="!startStatus">
          <image
            :src="$method.splitImgHost(detail.coverUrl)"
            style="width: 100%; height: 421rpx"
          ></image>
          <image
            v-if="false"
            class="video_play"
            src="/static/play.png"
            @click="startVideo"
          ></image>
        </view>
        <view v-else class="video_box" style="width: 100%; height: 421rpx">
          <polyv-player
            id="playerVideo"
            playerId="playerVideo"
            height="421rpx"
            :vid="vid"
            :showSettingBtn="true"
            :enablePlayGesture="true"
            :playbackRate="playbackRate"
            :isAllowSeek="isAllowSeek"
            :autoplay="autoplay"
            :startTime="startTime"
            @statechange="onStateChange"
          ></polyv-player>
        </view>
        <view style="padding: 20rpx">
          <view style="display: flex">
            <view class="yearTag" v-if="detail.year">{{ detail.year }}</view>
            <view class="titleTag">{{ detail.goodsName }}</view>
          </view>
          <view
            style="
              display: flex;
              justify-content: space-between;
              margin-top: 13rpx;
            "
          >
            <view class="noteTag"
              ><image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
              共
              <text class="blackFont"
                >{{ courseList.length }} 课程
                {{ detail.classHours || "-" }}</text
              >
              学时</view
            >
          </view>
        </view>
      </view>
      <u-line color="#D6D6DB" />
      <view style="height: 80rpx">
        <view
          ><u-tabs
            :list="list"
            :item-width="itemWidth()"
            font-size="30"
            bar-width="24"
            :current="current"
            @change="change"
            active-color="#007AFF"
          ></u-tabs
        ></view>
      </view>
    </view>
    <view
      style="padding: 20rpx; padding-bottom: 100rpx; position: relative"
      v-show="current == 0"
    >
      <view class="content">
        <view
          v-html="detail.mobileDetailHtml"
          style="width: 100%; overflow: hidden"
        ></view>
      </view>
    </view>
    <view
      style="padding: 20rpx; padding-bottom: 100rpx; position: relative"
      v-show="current == 1"
    >
      <view>
        <view v-for="(item, index) in courseList" :key="index">
          <view class="courseItemBox">
            <view class="courseItem" @click="openCourse(item)">
              <view class="courseName">{{ item.courseName }}</view>
              <view>
                <image
                  src="/static/icon/up.png"
                  class="icon_up"
                  v-if="item.down"
                ></image>
                <image
                  src="/static/icon/down.png"
                  class="icon_up"
                  v-if="!item.down"
                ></image>
              </view>
            </view>
            <view v-show="!item.down">
              <view v-for="(itemM, indexM) in item.menuList" :key="indexM">
                <courseModule
                  :courseId="itemM.courseId"
                  :needOpen="
                    isFirstEnter &&
                    menuIndex[0] === index &&
                    menuIndex[1] === indexM
                      ? true
                      : false
                  "
                  v-if="itemM.type == 1"
                  :menuItem="itemM"
                ></courseModule>
                <courseChapter
                  :courseId="itemM.courseId"
                  :needOpen="
                    isFirstEnter &&
                    menuIndex[0] === index &&
                    menuIndex[1] === indexM
                      ? true
                      : false
                  "
                  v-if="itemM.type == 2"
                  :isBuy="false"
                  :menuItem="itemM"
                ></courseChapter>
                <courseSection
                  :courseId="itemM.courseId"
                  v-if="itemM.type == 3"
                  :isBuy="false"
                  :menuItem="itemM"
                ></courseSection>
                <u-line></u-line>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      style="padding: 20rpx; padding-bottom: 100rpx; position: relative"
      v-show="current == 2"
    >
      <view>
        <view v-for="(item, index) in freeMenuList" :key="index">
          <view class="courseItemBox">
            <view class="courseItem">
              <view class="courseName">{{ item.freeExamName }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottomBox" v-if="!hideBuyState">
      <view class="priceTag">¥ {{ toFixed(detail.standPrice) }}</view>
      <view style="display: flex; color: #ffffff; align-items: center">
        <view class="btn1" @click="addCart">加购物车</view>
        <view class="btn2" @click="buy">立即购买 </view>
      </view>
    </view>
  </view>
</template>

<script>
import courseModule from "@/components/course/courseModule.vue";
import courseChapter from "@/components/course/courseChapter.vue";
import courseSection from "@/components/course/courseSection.vue";
import { mapGetters, mapMutations } from "vuex";
export default {
  components: {
    courseModule,
    courseChapter,
    courseSection,
  },
  data() {
    return {
      id: 0,
      list: [],
      menuIndex: [],
      current: 0,
      detail: {},
      courseList: [],
      menuList: [],
      freeMenuList: [],
      startStatus: false,
      playbackRate: [1.0],
      isAllowSeek: "no",
      vid: "",
      autoplay: true,
      listenConfigList: [],
      listenSecond: 0,
      isFirstEnter: true, //是否首次进入
      timer: null,
      businessData: {},
      startTime: 0,
    };
  },
  computed: {
    ...mapGetters([
      "userInfo",
      "goodsAuditionConfigIdList",
      "playSectionId",
      "hideBuyState",
    ]),
  },
  onLoad(option) {
    this.id = option.id;
    this.getDetail();
    this.goodsCourseList();
    this.appCommonGoodsCourseModuleFreeExamList();
  },
  onUnload(option) {
    this.$store.commit("setPlaySectionId", { playSectionId: 0 });
    //移除所有的事件监听器
    uni.$off();
  },
  mounted() {
    let self = this;
    uni.$on("getSection", (item) => {
      console.log(item);
      //播放试听
      self.listenSecond = 0;
      for (var itemChild of self.listenConfigList) {
        if (
          self.playSectionId == (itemChild.sectionId || itemChild.menuId) &&
          item.courseId == itemChild.courseId
        ) {
          if (itemChild.auditionMinute > 0) {
            //		self.listenSecond = itemChild.auditionMinute *60 //试听秒数
            self.listenSecond = itemChild.auditionMinute; //试听秒数 auditionMinute调整为秒单位
          }
        }
      }
      if (self.listenSecond > 0) {
        if (self.timer) {
          clearInterval(self.timer);
        }
        if (self.vid) {
          //切换视频
          var polyvPlayerContext = self.selectComponent("#playerVideo");
          polyvPlayerContext.changeVid(item.recordingUrl);
        } else {
          self.vid = item.recordingUrl;
        }

        self.startStatus = true;
        self.startTime = 0;
      } else {
        self.$u.toast("试听配置错误");
      }
    });
    this.updateChapterOpen(true);
  },
  methods: {
    ...mapMutations(["updateChapterOpen"]),
    itemWidth() {
      return 100 / this.list.length + "%";
    },
    appCommonGoodsCourseModuleFreeExamList() {
      this.$api.appCommonGoodsCourseModuleFreeExamList(this.id).then((res) => {
        if (res.data.data.length) {
          this.freeMenuList = res.data.data;
          this.list = [
            {
              name: "详情",
            },
            {
              name: "大纲",
            },
            {
              name: "赠送",
            },
          ];
        } else {
          this.list = [
            {
              name: "详情",
            },
            {
              name: "大纲",
            },
          ];
        }

        console.log(this.list);
      });
    },
    courseBusiness() {
      this.$api.courseBusiness(this.detail.businessId).then((res) => {
        this.businessData = res.data.data;
      });
    },
    toFixed(number) {
      if (number > 0) {
        return number.toFixed(2);
      } else {
        return "0.00";
      }
    },
    onStateChange(newstate, oldstate) {
      if (newstate.detail.newstate == "playing") {
        //开始播放
        if (this.timer) {
          clearInterval(this.timer);
        }
        this.timer = setInterval(this.timeEvent, 1500); //定时器
      }
    },
    closePlay() {
      this.$store.commit("setPlaySectionId", { playSectionId: 0 });
      this.vid = "";
      this.startStatus = false;
    },
    timeEvent() {
      let self = this;
      var polyvPlayerContext = this.selectComponent("#playerVideo");
      if (polyvPlayerContext != null) {
        let PlayCurrentTime = polyvPlayerContext.getCurrentTime();
        if (PlayCurrentTime >= this.listenSecond) {
          polyvPlayerContext.stop();
          polyvPlayerContext.exitFullScreen();
          clearInterval(this.timer);
          this.timer = null;
          uni.showModal({
            title: "提示",
            content: "试听结束，购买课程可学习全部",
            showCancel: false,
            success: function (resst) {
              self.closePlay();
            },
          });
        }
      }
    },
    openCourse(item) {
      item.down = !item.down;
      if (!item.down && item.menuList.length == 0) {
        this.getMenuList(item);
      }
    },
    addShopCart() {
      let self = this;
      this.$api.addCart({ goodsId: this.id }).then((res) => {
        if (res.data.code == 200) {
          uni.setStorageSync("updateCart", 1); //提醒刷新购物车
          uni.showToast({
            title: "添加成功",
          });
        } else {
          this.$u.toast(res.data.msg);
        }
      });
    },
    goodsCourseList() {
      let self = this;
      this.$api.goodsCourseList(this.id).then((res) => {
        if (res.data.code == 200) {
          for (let i = 0; i < res.data.rows.length; i++) {
            let item = res.data.rows[i];
            item.down = true;
            item.menuList = [];
          }
          self.courseList = res.data.rows;
          this.getFirstCourse();
        }
      });
    },
    /**
     * 获取第一个有模块或者章的课程
     */
    async getFirstCourse() {
      for (let i = 0; i < this.courseList.length; i++) {
        let menuIndexOrFalse = await this.getCourseMenus(this.courseList[i]);

        if (menuIndexOrFalse !== false) {
          this.menuIndex = [i, menuIndexOrFalse];
          this.openCourse(this.courseList[i]);
          break;
        }
      }
    },
    getCourseMenus(item) {
      return new Promise((resolve) => {
        this.$api.menuList({ courseId: item.courseId }).then((res) => {
          if (res.data.code == 200) {
            for (let i = 0; i < res.data.rows.length; i++) {
              if (res.data.rows[i].type == 1 || res.data.rows[i].type == 2) {
                resolve(i);
                break;
              }
            }
          }
        });
      });
    },
    getMenuList(item) {
      let self = this;
      this.$api.menuList({ courseId: item.courseId }).then((res) => {
        if (res.data.code == 200) {
          for (let i = 0; i < res.data.rows.length; i++) {
            let item = res.data.rows[i];
            item.down = true;
            item.id = item.menuId;
            item.name = item.menuName;

            if (item.type == 3) {
              //判断是否试听
              item.tryListen = false;
              if (self.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
                item.tryListen = true;
              }
            }
          }
          item.menuList = res.data.rows;
        }
      });
    },
    getDetail() {
      let self = this;
      let sectionIdList = [];
      this.$api.commonGoodsDetail(this.id).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data.mobileDetailHtml) {
            res.data.data.mobileDetailHtml =
              res.data.data.mobileDetailHtml.replace(
                /<img/gi,
                '<img style="max-width:100%;"'
              );
          }

          self.detail = res.data.data;
          this.courseBusiness();
          if (self.detail.goodsAuditionConfig) {
            self.listenConfigList = JSON.parse(self.detail.goodsAuditionConfig);
            for (var itemChild of self.listenConfigList) {
              sectionIdList.push(itemChild.sectionId); //存储试听节ID
            }
            self.$store.commit("setGoodsAuditionConfigIdList", {
              goodsAuditionConfigIdList: sectionIdList,
            });
          }
        }
      });
    },
    buy() {
      if (this.$method.isGoLogin()) {
        return;
      }
      this.$navTo.togo("/pages2/order/confirm_list?id=" + this.id);
    },
    addCart() {
      if (this.$method.isGoLogin()) {
        return;
      }
      this.addShopCart();
    },
    open(item) {
      item.showChildren = !item.showChildren;
    },
    change(index) {
      this.current = index;
    },
  },
};
</script>
<style >
page {
  background-color: #eaeef1;
}
</style>
<style scope>
.video_t2 {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
.video_t1 {
  height: 80rpx;
  color: #333333;
  line-height: 80rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video_t1_t {
  display: flex;
  flex-direction: column;
  height: 80rpx;
  color: #333333;
  text-align: center;
  align-items: center;
  border-left: solid 1px #d6d6db;
}
.video_play {
  position: absolute;
  width: 95rpx;
  height: 95rpx;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.video_box {
  position: relative;
}
.courseName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.videoBox {
  background-color: #ffffff;
  width: 100%;
  /* height: 680rpx; */
  z-index: 999;
}
.icon_up {
  width: 32rpx;
  height: 32rpx;
}
.contentBox {
}
.courseItemBox {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 0 10rpx;
  margin-bottom: 20rpx;
}
.courseItem {
  height: 80rpx;
  color: #333333;
  font-size: 32rpx;
  line-height: 80rpx;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
.content {
  background-color: #ffffff;
  width: 100%;
}
.btn2 {
  width: 200rpx;
  height: 64rpx;
  background: linear-gradient(0deg, #ffb102, #fd644f);
  box-shadow: 0rpx 10rpx 16rpx 4rpx rgba(1, 99, 235, 0.04);
  border-radius: 32rpx;
  line-height: 64rpx;
  text-align: center;
}
.btn1 {
  width: 200rpx;
  height: 64rpx;
  background: linear-gradient(0deg, #015eea, #00c0fa);
  border-radius: 32rpx;
  line-height: 64rpx;
  text-align: center;
  margin-right: 20rpx;
}
.bottomBox {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 98rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
}
.blackFont {
  color: #333333;
  margin: 0 4rpx;
}
.wk_icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 12rpx;
}
.noteTag {
  ont-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  align-items: center;
}
.priceTag {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ff2d55;
}
.titleTag {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-left: 8rpx;
}
.yearTag {
  width: 80rpx;
  height: 32rpx;
  background: #ebf5ff;
  border: 2rpx solid #007aff;
  border-radius: 16rpx;
  font-size: 24rpx;
  color: #007aff;
  text-align: center;
  line-height: 32rpx;
}
.itemBox {
  background: #ffffff;
  box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
  border-radius: 24rpx;
  width: 100%;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
</style>