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: 450rpx"
        ></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: 450rpx">
        <!-- #ifdef MP-WEIXIN -->
        <polyv-player
          id="playerVideo"
          playerId="playerVideo"
          height="450rpx"
          :vid="vid"
          :showSettingBtn="true"
          :enablePlayGesture="true"
          :playbackRate="playbackRate"
          :isAllowSeek="isAllowSeek"
          :autoplay="autoplay"
          :startTime="startTime"
          @statechange="onStateChange"
        ></polyv-player>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view v-show="vid" id="player"></view>
        <!-- #endif -->
      </view>

      <view class="cou_title">
        <view class="title_name">
          <!-- <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="prices">
            <!-- <text v-if="detail.standPrice" class="price_word">¥ {{ detail.standPrice }}</text>
						<text v-else class="price_word free">免费</text> -->
            <view
              class="price_word"
              v-if="
                !detail.specTemplateId || (!detail.maxPrice && !detail.minPrice)
              "
            >
              {{ detail.standPrice === 0 ? "免费" : `￥${detail.standPrice}` }}
            </view>
            <!-- 范围价格 -->
            <view v-else class="price_word">
              <view>{{ detail.minPrice }}</view>
              <template v-if="detail.minPrice != detail.maxPrice">
                <text>-</text>
                <view>{{ detail.maxPrice }}</view>
              </template>
            </view>

            <text v-if="detail.linePrice" class="sale"> ¥ </text>
            <text v-if="detail.linePrice" class="price_line">
              {{ detail.linePrice }}</text
            >
          </view>
          <view class="noteTag">
            共
            <text class="blackFont"
              >{{ courseList.length }} 课程 {{ detail.classHours || "-" }}</text
            >
            学时
          </view>
        </view>
      </view>
      <!-- </view> -->
    </view>
    <view class="contents">
      <!-- <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 class="tabs">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="tab_item"
          :class="[
            list.length == 2 ? 'twoBtn' : list.length == 3 ? 'threeBtn' : '',
            { nactive: current == index },
          ]"
          @click="change(index)"
          >{{ item.name }}</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 v-for="(item, index) in courseItem.courseList" :key="index" > -->
        <!-- 视频课 -->
        <template v-if="goodsType == 1">
          <view v-for="(courseItem, gTindex) in goodsTeacher" :key="gTindex">
            <view v-for="(item, index) in courseItem.courseList" :key="index">
              <view class="courseItemBox" v-if="item.show && item.show == 1">
                <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-if="courseItem.teaList && courseItem.teaList.length > 0"
                  class="teacher_names"
                >
                  <view
                    v-for="(tea, tindex) in courseItem.teaList"
                    :key="tindex"
                    class="names"
                    :class="[States[gTindex] == tindex ? 'nactive' : '']"
                    @click.stop="switchTeacher(tea, tindex, gTindex)"
                  >
                    <view>{{ tea.aliasName }}</view>
                  </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>
        </template>
        <!-- 直播课 -->
        <template v-else>
          <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>
        </template>
      </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>

    <view class="bottomBox" v-if="!hideBuyState">
      <template v-if="!isAct">
        <view class="icons">
          <view class="icon_item ones">
            <image src="/static/index/share.png" class="share"></image>
            <button type="default" open-type="share" class="bt_share"></button>
            <view class="share_w">分享</view>
          </view>
          <view class="icon_item">
            <image
              src="/static/index/shopcar.png"
              class="shopcar"
              @click="toShopcar()"
            ></image>
            <view class="share_w">购物车</view>
          </view>
        </view>
        <view style="display: flex; color: #ffffff; align-items: center">
          <view class="btn1" @click="addCart()">加购物车</view>
          <view class="btn2" @click="buy()">立即购买 </view>
        </view>
      </template>
      <template v-else>
        <view
          class="btn2"
          style="color: #ffffff; position: absolute; right: 24rpx"
          @click="drawBuy()"
          >立即领取
        </view>
      </template>
    </view>

    <!-- 已购买过课程的弹窗 -->
    <u-popup v-model="bugCourseModel" mode="center" border-radius="40">
      <view class="had_bugCourse">
        <image src="/pages3/static/imgs/hadBug.png" class="share"></image>
        <view class="tips">
          <view class="warns">温馨提示</view>
          <view class="words">您<text>已购买过</text>该商品课程</view>
          <view class="words">可立即前往学习</view>
        </view>
        <view class="tip_botton">
          <view class="cancel_btn" @click="changeKown()">知道了</view>
          <view class="confirm_btn" @click="toStudy()">去学习</view>
        </view>
      </view>
    </u-popup>

    <!-- 选择规格弹窗 -->
    <u-popup v-model="toggleSkuShow" mode="bottom" border-radius="40">
      <view class="popup_box">
        <view class="check_head">
          <view class="headers">
            <view class="grade">选择规格</view>
            <u-icon
              name="close"
              color="#9C9C9C"
              size="40"
              @click="closePop()"
            ></u-icon>
          </view>
        </view>
        <view class="check_con">
          <scroll-view scroll-y="true" style="height: 600rpx">
            <view
              v-for="(item, index) in specList"
              :key="index"
              class="check_items"
            >
              <view class="grades">{{ item.name }}</view>
              <view
                class="grade_names"
                v-if="index == 0 && specList.length > 1"
              >
                <view
                  class="course_items"
                  v-for="(child, c_index) in item.specAttrList"
                  :key="c_index"
                  :class="{ nactive: selectGoodIndex == c_index }"
                  @click="selectGoodType(c_index)"
                >
                  {{ child.name }}
                </view>
              </view>
              <view v-if="index == 1 || specList.length == 1" class="check_box">
                <u-checkbox-group>
                  <view
                    v-for="spec in item.specAttrList"
                    :key="spec.specAttributeId"
                  >
                    <view
                      class="check_box_item"
                      v-if="spec.goodsId"
                      :class="spec.check ? 'selected' : ''"
                    >
                      <u-checkbox
                        @change="checkboxChange"
                        v-model="spec.check"
                        :name="spec.specAttributeId"
                      >
                        <view class="price_box">
                          <view class="check_box_item_titme">{{
                            spec.name
                          }}</view>
                          <view class="price">￥{{ spec.standPrice }}</view>
                        </view>
                      </u-checkbox>
                    </view>
                  </view>
                </u-checkbox-group>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="confirm_btns">
          <view class="allprice">
            <view>
              总价：<text>￥</text><text>{{ allPrice }}</text>
            </view>
            <text>已选择{{ goodsIds.length }}个商品</text>
          </view>
          <view class="btns">
            <view v-if="!goodsIds.length" class="right_now r_disable">{{
              isCarOrBuy == 2 ? "立即购买" : "加入购物车"
            }}</view>
            <view v-else class="right_now" @click="rightNowBuy()"
              >{{ isCarOrBuy == 2 ? "立即购买" : "加入购物车" }}
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </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,
      bugCourseModel: false, // 弹窗
      hadBuyCourse: {}, // 已购买课程信息
      goodsTeacher: [],
      teaIndex: 0,
      States: { 0: 0 },
      goodsType: 1, // 1视频2题库 3补考 4前培 6直播
      toggleSkuShow: false,
      skuItem: {},
      isCarOrBuy: 1, // 1加入购物车 2立即购买
      specList: [], // 规格列表
      checkedAttrs: [],
      selectGoodIndex: 0,
      specAttrPriceList: [],
      isAct: undefined, //活动 区分是否隐藏身份证注册
    };
  },
  computed: {
    ...mapGetters([
      "userInfo",
      "goodsAuditionConfigIdList",
      "playSectionId",
      "hideBuyState",
    ]),
    allPrice() {
      if (!this.specList.length) return 0;
      let allPrice = this.specList.slice(-1)[0].specAttrList.reduce((a, b) => {
        if (b.check) {
          return a + b.standPrice;
        }
        return a;
      }, 0);
      return this.toFixed(allPrice);
    },
    goodsIds() {
      if (!this.specList.length) return [];
      return this.specList
        .slice(-1)[0]
        .specAttrList.filter((e) => e.check)
        .map((e) => e.goodsId);
    },
    isSingleChoice() {
      if (!this.specAttrPriceList.length) {
        return false;
      }
      return this.specAttrPriceList[0].specialGoods;
    },
  },
  onLoad(option) {
    if (option.scene) {
      // scene 生成二维码扫码进来的
      let optObj = {};
      let arrs = decodeURIComponent(option.scene).split("&");
      for (let i = 0; i < arrs.length; i++) {
        optObj[arrs[i].split("=")[0]] = arrs[i].split("=")[1];
      }
      this.id = optObj.id;
      this.goodsType = optObj.goodsType || optObj.gt;
      console.log("optObj.sc:", optObj);
      uni.setStorageSync("newUser_sc", optObj.sc);
      uni.setStorageSync("shareActivityCode", optObj.sac);
      if (optObj.sac && this.$method.isLogin()) {
        this.editShareActivityCode();
      }
    } else {
      // 小程序正常跳转的
      // this.id => goodsId
      this.id = option.id;
      this.goodsType = option.goodsType || option.gt;
      this.isAct = option.isAct;
      if (option.sac) {
        uni.setStorageSync("shareActivityCode", option.sac);
        if (this.$method.isLogin()) {
          //已登录
          this.editShareActivityCode();
          this.getIsBuy(); // 判断是否已经购买过该课程
        }
      }
    }
    this.getDetail();
    this.goodsCourseList();
    this.appCommonGoodsCourseModuleFreeExamList();
    // #ifdef MP-WEIXIN
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    // #endif
  },
  onUnload(option) {
    this.$store.commit("setPlaySectionId", { playSectionId: 0 });
    //移除所有的事件监听器
    uni.$off();
  },
  // 分享到朋友圈
  onShareTimeline() {
    return {
      title: this.detail.goodsName,
      query: "id=" + this.id,
      imageUrl: this.$method.splitImgHost(this.detail.coverUrl),
    };
  },
  // 分享给朋友
  onShareAppMessage() {
    return {
      title: this.detail.goodsName,
      path:
        `/pages3/course/detail?id=` + this.id + "&goodsType=" + this.goodsType,
      imageUrl: this.$method.splitImgHost(this.detail.coverUrl),
    };
  },

  mounted() {
    let self = this;
    uni.$on("getSection", (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 (item.recordingUrl) {
          self.vid = item.recordingUrl;
          if (this.player) {
            this.player.changeVid(this.vid);
            return;
          }
          //切换视频
          // #ifdef H5
          this.loadPlayerScript(this.loadPlayer);
          // #endif
          // #ifdef MP-WEIXIN
          this.player = self.selectComponent("#player");
          // #endif
        } else {
          self.$u.toast("地址错误，无法播放");
        }

        self.startStatus = true;
        self.startTime = 0;
      } else {
        self.$u.toast("试听配置错误");
      }
    });
    this.updateChapterOpen(true);
  },
  methods: {
    ...mapMutations(["updateChapterOpen"]),
    itemWidth() {
      return 100 / this.list.length + "%";
    },
    // 修改用户活动邀请码
    editShareActivityCode() {
      goodsIds;
      console.log("修改用户活动邀请码");
      this.$http({
        url: "/app/user/edit/shareActivityCode",
        method: "post",
        data: {
          shareActivityCode: uni.getStorageSync("shareActivityCode"),
        },
      }).then((res) => {
        if (res.data.code == 200) {
        }
      });
    },
    appCommonGoodsCourseModuleFreeExamList() {
      // url: '/app/common/goods/course/moduleFreeExamList/'+data,
      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);
      });
    },
    selectGoodType(index) {
      if (index == this.selectGoodIndex) {
        return;
      }
      this.selectGoodIndex = index;
      this.changeData();
    },
    select(val) {
      val.check = !val.check;
      console.log(val, 6666);
    },
    checkboxChange(val) {
      if (!this.isSingleChoice) return;
      this.specList.slice(-1)[0].specAttrList.forEach((ele) => {
        if (val.name != ele.specAttributeId) {
          ele.check = false;
        }
      });
    },
    courseBusiness() {
      // url: '/app/common/course/business/'+data,
      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(goodsIds) {
      if (!Array.isArray(goodsIds)) {
        goodsIds = [goodsIds];
      }
      this.$api.addCart({ goodsIds: goodsIds }).then((res) => {
        if (res.data.code == 200) {
          uni.setStorageSync("updateCart", 1); //提醒刷新购物车
          uni.showToast({
            title: "添加成功",
          });
        } else {
          this.$u.toast(res.data.msg);
        }
      });
    },
    goodsCourseList() {
      // url: '/app/common/goods/course/list/'+ data,
      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 = [];
          }
          this.courseList = res.data.rows;
          this.getFirstCourse();
          // 不同
          if (this.goodsType == 1) {
            this.getCourseTeacher(res.data.rows);
          }
        }
      });
    },
    /**
     * 获取第一个有模块或者章的课程
     */
    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) => {
        // url: '/app/common/course/menuList',
        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;
              }
            }
          }
        });
      });
    },
    getCourseTeacher(rows) {
      //获取商品双师资模板
      this.$api
        .getGoodsCourseTeacher({
          goodsId: this.id,
        })
        .then((res1) => {
          //   console.log(res1,'res1');
          if (res1.data.data && res1.data.data.length > 0) {
            //课程老师模板
            let teacherTel = res1.data.data;
            //商品课程
            let courses = rows;
            teacherTel.forEach((tea) => {
              let dataList = [];
              let teacherList = [];
              courses.forEach((item) => {
                let data = tea.courseList.filter(
                  (x) => x.courseId == item.courseId
                );
                if (data && data.length > 0) {
                  dataList.push(item);
                  teacherList = tea.courseList;
                }
              });
              let result = {
                teaList: teacherList,
                courseList: dataList,
              };
              this.goodsTeacher.push(result);
            });
            if (this.goodsTeacher && this.goodsTeacher.length > 0) {
              let courseIds = [];
              this.goodsTeacher.forEach((item) => {
                item.courseList.forEach((course) => {
                  courseIds.push(course.courseId);
                });
              });
              if (courseIds.length > 0) {
                courses.forEach((item) => {
                  if (!courseIds.includes(item.courseId)) {
                    let data = {
                      teaList: [],
                      courseList: [],
                    };
                    data.courseList.push(item);
                    this.goodsTeacher.push(data);
                  }
                });
              }
              this.goodsTeacher.forEach((item) => {
                if (item.courseList && item.courseList.length > 0) {
                  item.courseList[0].show = 1;
                }
              });
            }
          } else {
            //没有双师资模板
            rows.forEach((item) => {
              item.show = 1;
              let data = {
                teaList: [],
                courseList: [],
              };
              data.courseList.push(item);
              this.goodsTeacher.push(data);
            });
          }
        });
      console.log(this.goodsTeacher, "this.goodsTeacher");
    },
    //切换老师
    switchTeacher(data, tindex, gTindex) {
      // console.log(data,'data');
      this.States[gTindex] = tindex;
      this.teaIndex = tindex;
      this.goodsTeacher.forEach((item, index) => {
        if (item.teaList && item.teaList.length > 0) {
          let list = item.teaList.filter((x) => x.courseId == data.courseId);
          if (list && list.length > 0) {
            item.courseList.forEach((course, courseIndex) => {
              if (course.courseId == data.courseId) {
                this.$set(
                  this.goodsTeacher[index].courseList[courseIndex],
                  "show",
                  1
                );
              } else {
                this.$set(
                  this.goodsTeacher[index].courseList[courseIndex],
                  "show",
                  0
                );
              }
            });
          }
        }
      });
      console.log("切换后的this.goodsTeacher, ", this.goodsTeacher);
    },
    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 = [];
      // /app/common/goods/+data
      this.$api.commonGoodsDetail(this.id).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data) {
            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;
      }
      // 判断有没有规格选择
      if (this.detail.specTemplateId) {
        this.isCarOrBuy = 2;
        this.getSpecDetail();
        return;
      }
      this.$navTo.togo("/pages2/order/confirm_list?id=" + this.id);
    },
    drawBuy() {
      if (!this.$method.isLogin()) {
        uni.navigateTo({
          url: "/pages4/login/login?isBack=" + true + "&isAct=" + this.isAct,
        });
        return;
      }
      this.$api
        .drowActGoods({
          url: location.href,
          goodsList: [this.detail],
        })
        .then((res) => {
          if (res.data.code == 200) {
            // this.$u.toast("领取成功");
            uni.showModal({
              title: "提示",
              content: "领取成功,是否现在去做题？",
              cancelText: "取消",
              confirmText: "确定",
              success: (res) => {
                if (res.confirm) {
                  uni.switchTab({
                    url: "/pages/questionBank/index",
                  });
                }
              },
            });
          } else {
            this.$u.toast(res.data.msg);
          }
        });
    },
    addCart() {
      if (this.$method.isGoLogin()) {
        return;
      }
      // 判断有没有规格选择
      if (this.detail.specTemplateId) {
        this.isCarOrBuy = 1;
        this.getSpecDetail();
        return;
      }
      this.addShopCart(this.id);
    },
    getSpecDetail() {
      // || 35
      this.checkedAttrs = [];
      this.$http({
        url: `/app/common/spec/${this.detail.specTemplateId}`,
        method: "get",
        noToken: true,
      }).then((res) => {
        let data = res.data.data;
        console.log(data, "data");
        if (data) {
          this.toggleSkuShow = true;
          this.specAttrPriceList = data.specAttrPriceList;
          this.specList = this.changeData(data.specList || []);
        } else {
          if (this.isCarOrBuy == 1) {
            // 加入购物车
            this.addShopCart(this.id);
          } else {
            this.$navTo.togo("/pages2/order/confirm_list?id=" + this.id);
          }
          this.closePop();
        }
      });
    },
    changeData(data = this.specList) {
      let len = data.length;
      if (!len) return [];
      data[len - 1].specAttrList.forEach((e, i) => {
        e.check = e.check || false;
        let id = e.specAttributeId;
        if (len > 1) {
          id =
            data[0].specAttrList[this.selectGoodIndex].specAttributeId +
            "," +
            id;
        }
        let item = this.specAttrPriceList.find((e) => e.specAttrIds == id);
        if (item) {
          e.standPrice = item.standPrice;
          e.goodsId = item.goodsId;
        } else {
          e.goodsId = null;
        }
      });
      // data.forEach((item, index) => {
      // 	if (index == len - 1) {
      // 		item.specAttrList.forEach((e, i) => {
      // 			 e.check = false

      // 		})
      // 	}
      // })
      return data;
    },
    change(index) {
      this.current = index;
    },
    toShopcar() {
      uni.navigateTo({
        url: "/pages4/shopping/shoppingCart",
      });
    },
    getIsBuy() {
      this.$http({
        url: "/order/buyGoodsNotExpired",
        method: "get",
        data: { goodsId: this.id },
      }).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data) {
            // 有data返回是已经购买过的课程
            this.hadBuyCourse = res.data.data;
            this.bugCourseModel = true;
          }
        }
      });
    },
    changeKown() {
      this.bugCourseModel = false;
    },
    async toStudy() {
      let item = this.hadBuyCourse;
      if (item.goodsType == 6) {
        // 进入直播课
        this.toLive(item);
        return;
      }
      // /course/goodsRebuildStatus查询用户商品重修状态
      let rebuildStatus = await this.courseGoodsRebuildStatus(
        item.goodsId,
        item.gradeId
      );

      if (rebuildStatus == 0) {
        this.$navTo.togo("/pages2/learn/details", {
          gradeId: item.gradeId,
          goodsId: item.goodsId,
          orderGoodsId: item.orderGoodsId,
        });
        return;
      }

      // /lock/lockStatus
      this.$api
        .lockLockStatus({
          action: "jxjy",
          uuid: this.$method.getUuid(),
        })
        .then((res) => {
          if (res.data.code == 200) {
            //有其他端在操作，不能学习
            uni.showToast({
              icon: "none",
              title: res.data.msg,
              mask: true,
              duration: 3000,
            });
          } else if (res.data.code == 500) {
            //可以学习
            this.$http({
              url: "/course/courseList",
              method: "get",
              data: {
                pageNum: 1,
                pageSize: 1,
                goodsId: item.goodsId,
                gradeId: item.gradeId,
                orderGoodsId: item.orderGoodsId,
              },
            }).then((res) => {
              if (res.data.code == 200) {
                if (res.data.total > 1) {
                  // this.$navTo.togo(`/pages2/wd/course?id=${item.goodsId}&gid=${item.gradeId}&orderGoodsId=${item.orderGoodsId}`);
                  uni.navigateTo({
                    url: `/pages3/polyv/detail?id=''&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&gradeId=${item.gradeId}`,
                  });
                } else if (res.data.total == 1) {
                  uni.navigateTo({
                    url: `/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&gradeId=${item.gradeId}`,
                  });
                } else {
                  uni.showToast({
                    icon: "none",
                    title: "暂无可观看的视频课程",
                  });
                }
              }
            });
          }
        });
    },
    toLive(item) {
      this.$api
        .courseCourseList({
          pageNum: 1,
          pageSize: 1,
          goodsId: item.goodsId,
          gradeId: 0,
          orderGoodsId: item.orderGoodsId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            if (res.data.total > 1) {
              // uni.navigateTo({
              // 	url:'/pages5/liveDetail/course?orderGoodsId='+item.orderGoodsId+'&goodsId='+item.goodsId+'&gradeId=0'
              // })
              uni.navigateTo({
                url:
                  "/pages3/live/detail?orderGoodsId=" +
                  item.orderGoodsId +
                  "&goodsId=" +
                  item.goodsId +
                  '&gradeId=0&courseId=""',
              });
            } else if (res.data.total == 1) {
              uni.navigateTo({
                url:
                  "/pages3/live/detail?orderGoodsId=" +
                  item.orderGoodsId +
                  "&goodsId=" +
                  item.goodsId +
                  "&gradeId=0&courseId=" +
                  res.data.rows[0].courseId,
              });
            } else {
              uni.showToast({
                icon: "none",
                title: "暂无可观看的直播课程",
              });
            }
          }
        });
    },
    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise((resolve) => {
        this.$http({
          url: "/course/goodsRebuildStatus",
          method: "get",
          data: {
            goodsId: goodsId,
            gradeId: gradeId,
          },
          // noLoading: true,
          // compleLoading: true, // 请求成功是否还要继续显示加载中
        }).then((res) => {
          resolve(res.data.data);
        });
      });
    },
    closePop() {
      this.toggleSkuShow = false;
      this.skuItem = {};
    },
    // 获取规格属性值对应的商品信息
    getGoodsInfos(specAttrIds) {
      this.$http({
        url: "/app/common/attr/goods",
        method: "get",
        data: {
          specTemplateId: this.detail.specTemplateId,
          specAttrIds: specAttrIds.join(","),
        },
        noToken: true,
      }).then((res) => {
        if (res.data.code == 200) {
          this.skuItem = res.data.data || {};
        } else {
          this.skuItem = {};
          this.$u.toast("商品已下架, 请重新选择");
        }
      });
    },
    rightNowBuy() {
      let goodsIds = [...new Set(this.goodsIds)];
      this.$api.checkGoodsStatus({ goodsIds }).then((res) => {
        if (res.data.code == 500) {
          return this.$u.toast(res.data.msg);
        }
        if (this.isCarOrBuy == 1) {
          // 加入购物车
          this.addShopCart(goodsIds);
        } else {
          if (this.isSingleChoice) {
            this.$navTo.togo("/pages2/order/confirm_list?id=" + goodsIds);
          } else {
            let data = [];
            goodsIds.forEach((id) => {
              data.push(this.specAttrPriceList.find((e) => e.goodsId == id));
            });
            this.$store.commit("setShoppingCartList", {
              shoppingCartList: data,
            });
            this.$navTo.togo("/pages2/order/confirm_pay");
          }
        }
        this.closePop();
      });
    },
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute(
          "src",
          "https://player.polyv.net/script/player.js"
        );
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
    // 播放视频
    loadPlayer() {
      const polyvPlayer = window.polyvPlayer;
      this.$api.polyvVideoSign(this.vid).then(async (res) => {
        console.log("播放凭证res", res);
        this.player = await polyvPlayer({
          wrap: "#player",
          width: "100%",
          showLine: "off",
          height: 218,
          ban_history_time: "on",
          vid: this.vid,
          forceH5: true,
          autoplay: this.autoplay,
          speed: this.playbackRate,
          teaser_show: 1,
          tail_show: 1,
          hideSwitchPlayer: true,
          ts: res.data.data.ts,
          sign: res.data.data.sign,
        });
        this.polyvPlayerContext = this.player;
      });
    },
  },
};
</script>
<style>
page {
  background-color: #f2f2f2;
}
</style>
<style lang="scss" scope>
@import "./index.scss";

.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;
}

.contents {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  margin-top: 16rpx;
  overflow: hidden;
}

.cou_title {
  padding: 24rpx 32rpx 40rpx 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.prices {
  .price_word {
    display: flex;
    font-size: 44rpx;
    font-weight: 800;
    color: #fc3f3f;
    margin-bottom: 8rpx;
    view::before {
      content: "￥";
      font-size: 26rpx;
      font-weight: bold;
    }
  }

  .sale {
    color: #999999;
    font-size: 28rpx;
    margin-left: 8rpx;
  }

  .price_line {
    color: #999999;
    font-size: 28rpx;
    text-decoration: line-through;
    font-weight: 400;
  }

  .free {
    font-size: 32rpx;
  }
}

// tab
.tabs {
  // width: 100%;
  height: 78rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f2f7ff;
  border-radius: 38rpx;
  margin: 24rpx;
  padding: 0rpx 5rpx;

  .tab_item {
    width: 345rpx;
    height: 65rpx;
    line-height: 65rpx;
    font-size: 28rpx;
    font-weight: bold;
    border-radius: 32rpx;
    text-align: center;
    color: #333;

    &.nactive {
      color: #fff;
      background-color: #3577e8;
    }

    &.twoBtn {
      width: 50%;
    }

    &.threeBtn {
      width: 33%;
    }
  }

  // /deep/  .u-tabs {
  // 	background:none!important;
  // }
}

.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;
}

.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: 187rpx;
  height: 79rpx;
  line-height: 79rpx;
  background: #fc3f3f;
  border-radius: 40rpx;
  text-align: center;
  font-size: 24rpx;
}

.btn1 {
  width: 187rpx;
  height: 79rpx;
  line-height: 79rpx;
  background: #ffb102;
  border-radius: 40rpx;
  text-align: center;
  margin-right: 11rpx;
  font-size: 24rpx;
}

.wk_icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 12rpx;
}

.noteTag,
.blackFont {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
  align-items: center;
  margin: 0 4rpx;
  line-height: 60rpx;
}

.priceTag {
  /* font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF2D55; */
  width: 60rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  border: 1rpx solid #333;
}

.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;
}

// 老师名字样式
.teacher_names {
  display: flex;
  padding-bottom: 15rpx;
  border-bottom: 2rpx solid #f0f0f0;

  .names {
    padding: 6rpx 12rpx;
    font-size: 26rpx;
    color: #969696;
    background: #f8f8f8;
    border-radius: 8rpx;
    margin-right: 10rpx;

    &.nactive {
      color: #3f8dfd;
      background: #f2f7ff;
    }
  }
}
</style>