|
|
@@ -0,0 +1,1606 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view style="position: fixed;width: 100%;z-index: 999;background: #FFFFFF;top: 0;" id="top">
|
|
|
+ <view class="video_box" v-if="!startStatus">
|
|
|
+ <image :src="$method.splitImgHost(detail.coverUrl)" style="width: 100%;height: 460rpx;"></image>
|
|
|
+ <image v-if="false" class="video_play" src="/static/play.png" @click="startVideo"></image>
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ <view class="video_box" style="width: 100%;height: 460rpx;" v-if="playVID">
|
|
|
+ <polyv-player
|
|
|
+ id="playerVideo"
|
|
|
+ playerId="playerVideo"
|
|
|
+ height="460rpx"
|
|
|
+ :vid="vid"
|
|
|
+ :showSettingBtn="true"
|
|
|
+ :enablePlayGesture="true"
|
|
|
+ @statechange="onStateChange"
|
|
|
+ :autoplay="autoplay"
|
|
|
+ :isAllowSeek="isAllowSeek"
|
|
|
+ :playbackRate="playbackRate"
|
|
|
+ :startTime="startTime"
|
|
|
+ ></polyv-player>
|
|
|
+ </view>
|
|
|
+ <view class="video_box" style="width: 100%;height: 460rpx;" v-if="playChannelId>0">
|
|
|
+ <player
|
|
|
+ class="plv-mp-demo-player"
|
|
|
+ :videoOption="videoOption"
|
|
|
+ @onLiveStatusChange="playerLiveStatusChange"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view>
|
|
|
+ <u-row>
|
|
|
+ <u-col span="10">
|
|
|
+ <view class="video_t1">{{ detail.courseName }}</view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="2" v-if="false">
|
|
|
+ <view class="video_t1_t" @click="openJY">
|
|
|
+ <image src="/static/icon/jy_icon.png" style="width: 40rpx;height: 40rpx;"></image>
|
|
|
+ 讲义
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ </view>
|
|
|
+ <u-line color="#D6D6DB" />
|
|
|
+ <view style="display: flex;justify-content: center;">
|
|
|
+ <view><u-tabs :list="list" font-size="24" bar-width="80" :current="current" @change="change" active-color="#007AFF"></u-tabs></view>
|
|
|
+ </view>
|
|
|
+ <u-line color="#D6D6DB" />
|
|
|
+ </view>
|
|
|
+ <view class="box">
|
|
|
+
|
|
|
+ <!--目录 -->
|
|
|
+ <view v-show="current == 0">
|
|
|
+ <view class="menuBox" v-for="(item, index) in menuList" :key="index">
|
|
|
+ <!--模块 -->
|
|
|
+ <view v-if="item.type == 1"><courseModule :courseId="courseId" :goodsId="goodsId" :gradeId="gradeId" :isBuy="true" :menuItem="item" :levelId="item.menuId"></courseModule></view>
|
|
|
+ <!--章 -->
|
|
|
+ <view v-if="item.type == 2"><courseChapter :courseId="courseId" :goodsId="goodsId" :gradeId="gradeId" :isBuy="true" :menuItem="item" :levelId="'0-' + item.menuId"></courseChapter></view>
|
|
|
+ <!--节 -->
|
|
|
+ <view v-if="item.type == 3"><courseSection :courseId="courseId" :goodsId="goodsId" :gradeId="gradeId" :isBuy="true" :menuItem="item" :levelId="'0-0-' + item.menuId"></courseSection></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--笔记 -->
|
|
|
+ <view v-show="current == 1">
|
|
|
+ <view v-if="noteList.length == 0" style="text-align: center;">暂无笔记</view>
|
|
|
+ <view class="inputBottom">
|
|
|
+ <view style="width: 10%;"><image src="/static/icon/note3.png" style="width: 39rpx;height: 39rpx;margin:0 29rpx;"></image></view>
|
|
|
+ <view style="width: 73%;height: 100%;padding: 10rpx 0;">
|
|
|
+ <u-input class="input" height="60" fixed="true" placeholder="您可以在这里输入笔记内容" type="textarea" :custom-style="inputStyle" v-model="noteValue" />
|
|
|
+ </view>
|
|
|
+ <view style="color: #007AFF;font-size: 30rpx;font-weight: bold;width: 15%;text-align: center;" @click="postNote">提交</view>
|
|
|
+ </view>
|
|
|
+ <view v-for="(item, index) in noteList" :key="index">
|
|
|
+ <view class="dateBox">{{ $method.timestampToTime(item.dateNote) }}</view>
|
|
|
+ <view class="noteBox">
|
|
|
+ <view v-for="(item1, index1) in item.userNotes" :key="index1" style="margin-top: 30rpx;" @click="jumpNote(item1)">
|
|
|
+ <view style="display: flex;">
|
|
|
+ <view>
|
|
|
+ <view>
|
|
|
+ <image src="/static/icon/note2.png" v-if="noteId != item1.noteId" style="width: 39rpx;height: 39rpx;margin:0 29rpx;"></image>
|
|
|
+ <image src="/static/icon/note1.png" v-if="noteId == item1.noteId" style="width: 39rpx;height: 39rpx;margin:0 29rpx;"></image>
|
|
|
+ </view>
|
|
|
+ <view class="title" style="width: 39rpx;height: 39rpx;margin:0 29rpx;">{{ $method.secondToDate(item1.noteSecond) }}</view>
|
|
|
+ </view>
|
|
|
+ <view style="margin-left: 10rpx;">
|
|
|
+ <view class="t2Content leftPadding">{{ item1.sectionName }}</view>
|
|
|
+ <view class="tBox2">{{ item1.noteText }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--答疑 -->
|
|
|
+ <view v-show="current == 2">
|
|
|
+ <view class="inputBottom">
|
|
|
+ <view class="flex_auto">
|
|
|
+ <u-input height="60" fixed="true" :placeholder="placeholder" type="textarea" :custom-style="inputStyle" v-model="ctxValue" />
|
|
|
+ </view>
|
|
|
+ <view class="btn" @click="postContent">提交</view>
|
|
|
+ </view>
|
|
|
+ <view v-for="(item, index) in answerList" :key="index" style="background-color: #FFFFFF;margin-bottom: 20rpx;">
|
|
|
+ <view class="chat_box" @click.stop="clearCtx">
|
|
|
+ <view style="display: flex;">
|
|
|
+ <view><image :src="$method.splitImgHost(item.avatar)" style="width: 64rpx;height: 64rpx;"></image></view>
|
|
|
+ <view style="margin-left: 15rpx;">
|
|
|
+ <view class="chat1">{{ item.realname }}</view>
|
|
|
+ <view class="chat2">{{ $method.timestampToTime(item.createTime) }}</view>
|
|
|
+ <view class="chat3">
|
|
|
+ <text v-if="item.assignUserId > 0">回复</text>
|
|
|
+ <text v-if="item.assignUserId > 0" style="color: #007AFF;">@{{ item.assignRealname }}</text>
|
|
|
+ {{ item.answerText }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btnReply" @click.stop="replyContent(item)" v-if="item.userId != userInfo.userId">回复</view>
|
|
|
+ <view v-else class="btnDel" @click.stop="delContent(item)">删除</view>
|
|
|
+ </view>
|
|
|
+ <u-line color="#D6D6DB" />
|
|
|
+ </view>
|
|
|
+ <view v-if="answerList.length == 0" style="text-align: center;">暂无记录</view>
|
|
|
+ </view>
|
|
|
+ <!--目录 -->
|
|
|
+ <view v-show="current == 3" >
|
|
|
+ <view class="menuBox" v-for="(item, index) in reMenuList" :key="index">
|
|
|
+ <!--模块 -->
|
|
|
+ <view v-if="item.type == 1"><courseModule :courseId="courseId" :goodsId="goodsId" :gradeId="gradeId" :isRebuild="true" :isBuy="true" :menuItem="item" :levelId="item.menuId"></courseModule></view>
|
|
|
+ <!--章 -->
|
|
|
+ <view v-if="item.type == 2">
|
|
|
+ <courseChapter :courseId="courseId" :gradeId="gradeId" :goodsId="goodsId" :isRebuild="true" :isBuy="true" :menuItem="item" :levelId="'0-' + item.menuId"></courseChapter>
|
|
|
+ </view>
|
|
|
+ <!--节 -->
|
|
|
+ <view v-if="item.type == 3">
|
|
|
+ <courseSection :courseId="courseId" :gradeId="gradeId" :goodsId="goodsId" :isRebuild="true" :isBuy="true" :menuItem="item" :levelId="'0-0-' + item.menuId"></courseSection>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 播放前拍照end -->
|
|
|
+ <u-popup v-model="showSet" :mask-close-able="false" mode="center" border-radius="24">
|
|
|
+ <view style="align-items:center;padding: 0 40rpx;display: flex;flex-direction: column;justify-content:center;">
|
|
|
+ <view style="font-weight: bold;color: #333333;font-size: 30rpx;margin-top: 30rpx;">温馨提示</view>
|
|
|
+ <view style="width: 457rpx;color: #666666;font-size: 30rpx;margin-top: 30rpx;">学习过程中需要拍照验证学员身份，
|
|
|
+拍照功能需要使用您的相机。
|
|
|
+是否授权使用？</view>
|
|
|
+ <view style="margin: 40rpx 0;">
|
|
|
+ <button open-type="openSetting" @bindopensetting="openSetting" class="btnSet">去授权</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <u-mask :show="photoPopup" >
|
|
|
+ <!-- 播放前拍照start -->
|
|
|
+ <view v-if="photoPopup" :mask-close-able="false" style="bottom: 0;position: fixed;width: 100%;z-index: 999;">
|
|
|
+ <view class="photoBox">
|
|
|
+ <view class="photoTop">
|
|
|
+ <view class="sqzz" v-if="false"><u-icon name="close" color="#333333" size="30" @click="closePhoto"></u-icon></view>
|
|
|
+ <view class="centersq">请正视手机屏幕</view>
|
|
|
+ <view class="sqzz"></view>
|
|
|
+ </view>
|
|
|
+ <view class="photoCenter">
|
|
|
+ <view style="width: 100%; height: 979rpx;position: fixed;" v-if="photoPopup">
|
|
|
+ <camera device-position="front" flash="off" @error="error" style="width: 100%; height: 100%;" ></camera>
|
|
|
+ </view>
|
|
|
+ <view class="custom"><image src="/static/zhezhao.png" mode=""></image></view>
|
|
|
+ </view>
|
|
|
+ <view class="btnResult" @click="takePhoto">拍照</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </u-mask>
|
|
|
+ </view>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+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 { mapGetters } from 'vuex';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ courseModule,
|
|
|
+ courseChapter,
|
|
|
+ courseSection
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ initLiveOk:false,
|
|
|
+ livePlay:false, //是否正在播放直播，不含暂停
|
|
|
+ liveDuration:0, //直播观看时长
|
|
|
+ videoOption:{
|
|
|
+ mode: 'live',
|
|
|
+ uid: '',
|
|
|
+ cid: '',
|
|
|
+ openId: '',
|
|
|
+ isAutoChange: false,
|
|
|
+ forceVideo: false,
|
|
|
+ },
|
|
|
+ liveDetail:{},
|
|
|
+ showSet:false,
|
|
|
+ startStatus: false,
|
|
|
+ detail: {},
|
|
|
+ courseId: 0,
|
|
|
+ placeholder: '您可以在这里输入笔记内容\n还可以点击左侧图标为笔记加上时间标记',
|
|
|
+ inputStyle: {
|
|
|
+ background: 'rgba(244, 244, 244, 0.98)',
|
|
|
+ borderRadius: '24rpx',
|
|
|
+ padding: '8rpx',
|
|
|
+ marginBottom: '10rpx'
|
|
|
+ },
|
|
|
+ list: [],
|
|
|
+ menuList: [],
|
|
|
+ current: 0,
|
|
|
+ vid: '',
|
|
|
+ goodsId: 0,
|
|
|
+ goodsData: {},
|
|
|
+ photoPopup: false,
|
|
|
+ goodsPlayConfig: null,
|
|
|
+ autoplay: false,
|
|
|
+ isAllowSeek: 'no',
|
|
|
+ playbackRate: [1.0],
|
|
|
+ timer: null,
|
|
|
+ goodsPhotographConfig: null,
|
|
|
+ intervalTimeList: [], // 间隔拍照时长
|
|
|
+ intervalTimeIndex: 0, //当前处于哪个时间段拍照
|
|
|
+ playTime: 0, //页面播放时长，不含暂停
|
|
|
+ currentTime: 0,
|
|
|
+ avatarUrl: '',
|
|
|
+ ossAvatarUrl: '',
|
|
|
+ studyDuration: 0, // 当前视频时长
|
|
|
+ gradeId: 0,
|
|
|
+ chapterId: 0,
|
|
|
+ moduleId: 0,
|
|
|
+ reMenuList: [],
|
|
|
+ answerList: [],
|
|
|
+ assignUserId: 0,
|
|
|
+ placeholder: '您可以在这里输入答疑内容',
|
|
|
+ ctxValue: '',
|
|
|
+ noteList: [],
|
|
|
+ noteValue: '',
|
|
|
+ noteId: 0,
|
|
|
+ recordObj: 0,
|
|
|
+ gradeDetail:{},
|
|
|
+ needSeek: false, //第一次播放是否需要跳转
|
|
|
+ needProfileModal:false, //是否需要资料审核弹框
|
|
|
+ liveObj:{}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: { ...mapGetters(['userInfo', 'playSectionId','playChannelId','playVID']) },
|
|
|
+ onLoad(option) {
|
|
|
+ console.log(this.userInfo,789)
|
|
|
+ this.courseId = Number(option.id);
|
|
|
+ this.goodsId = Number(option.goodsId);
|
|
|
+ this.courseDetail();
|
|
|
+ this.getGoodsDetail();
|
|
|
+ this.getAnswerList();
|
|
|
+ let noteSecond = Number(option.noteSecond);
|
|
|
+ if(noteSecond>0){
|
|
|
+ //我的消息跳过来,播放节
|
|
|
+ let item = {
|
|
|
+ sectionId:Number(option.sectionId),
|
|
|
+ recordingUrl:option.recordingUrl,
|
|
|
+ noteSecond:noteSecond
|
|
|
+ }
|
|
|
+ this.$store.commit('setPlaySectionId', {playSectionId :item.sectionId});
|
|
|
+ this.playNoteVideo(item);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ var self = this;
|
|
|
+ //相机授权
|
|
|
+ this.getCameraSetting()
|
|
|
+ this.$api.getbaseprofiletplists({ goodsId: self.goodsId }).then(res => {
|
|
|
+ if (res.data.code === 200 && res.data.rows.length) {
|
|
|
+ if (res.data.rows[0].keyValue) {
|
|
|
+ self.$api.getbaseprofiletpgetInfo({ goodsId: self.goodsId }).then(result => {
|
|
|
+ if (result.data.code === 200) {
|
|
|
+ if (!result.data.data || (result.data.data.status === 3 && result.data.data.changeStatus === 1)) {
|
|
|
+ if (!result.data.data) {
|
|
|
+ self.needProfileModal = true
|
|
|
+ uni.showModal({
|
|
|
+ content: '请前往填写资料',
|
|
|
+ cancelText: '返回',
|
|
|
+ success: function(resultst) {
|
|
|
+ if (resultst.confirm) {
|
|
|
+ self.$navTo.togo('/pages2/verify/input', {
|
|
|
+ id: self.goodsId
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (resultst.cancel) {
|
|
|
+ uni.navigateBack();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ self.needProfileModal = true
|
|
|
+ uni.showModal({
|
|
|
+ content: '资料审核不通过，请前往重新填写',
|
|
|
+ cancelText: '返回',
|
|
|
+ success: function(resultst) {
|
|
|
+ if (resultst.confirm) {
|
|
|
+ self.$navTo.togo('/pages2/verify/input', {
|
|
|
+ id: self.goodsId
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (resultst.cancel) {
|
|
|
+ uni.navigateBack();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else if (result.data.data.status === 1 && res.data.rows[0].keyValue2) {
|
|
|
+ self.$api.getbaseprofileStampgetInfo({ goodsId: self.goodsId }).then(k => {
|
|
|
+ if (k.data.code === 200) {
|
|
|
+ if (!k.data.data || (k.data.data.status === 3 && k.data.data.changeStatus === 1)) {
|
|
|
+ if (!k.data.data) {
|
|
|
+ self.needProfileModal = true
|
|
|
+ uni.showModal({
|
|
|
+ cancelText: '返回',
|
|
|
+ content: '请前往填写盖章资料',
|
|
|
+ success: function(resultst) {
|
|
|
+ if (resultst.confirm) {
|
|
|
+ self.$navTo.togo('/pages2/verify/input2', {
|
|
|
+ id: self.goodsId
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (resultst.cancel) {
|
|
|
+ uni.navigateBack();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ self.needProfileModal = true
|
|
|
+ uni.showModal({
|
|
|
+ cancelText: '返回',
|
|
|
+ content: '资料盖章审核不通过，请前往重新填写',
|
|
|
+ success: function(resultst) {
|
|
|
+ if (resultst.confirm) {
|
|
|
+ self.$navTo.togo('/pages2/verify/input2', {
|
|
|
+ id: self.goodsId
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (resultst.cancel) {
|
|
|
+ uni.navigateBack();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(this.gradeId,7512)
|
|
|
+ if(this.gradeId>0){
|
|
|
+ //提交完资料返回判断是否已开班
|
|
|
+
|
|
|
+ this.getGradeInfo()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ if (this.playSectionId > 0) {
|
|
|
+ //退出提交记录
|
|
|
+ this.postStudyRecord();
|
|
|
+ }
|
|
|
+ //清除正在播放的节ID
|
|
|
+ this.$store.commit('setPlaySectionId', { playSectionId: 0 });
|
|
|
+ this.$store.commit('setPlayChannelId', { playChannelId: 0 });
|
|
|
+ this.$store.commit('setPlayVID', { playVID: null });
|
|
|
+ this.closePlv()
|
|
|
+ //移除所有的事件监听器
|
|
|
+ uni.$off();
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ uni.$on('changeSection', oldSectionId => {
|
|
|
+ console.log(this.playVID)
|
|
|
+ //清除直播
|
|
|
+ this.$store.commit('setPlayChannelId', { playChannelId: 0 });
|
|
|
+ this.postStudyRecord(0, oldSectionId);
|
|
|
+ });
|
|
|
+ uni.$on('getSection', item => {
|
|
|
+ //清除直播
|
|
|
+ this.$store.commit('setPlayChannelId', { playChannelId: 0 });
|
|
|
+ this.playVideo(item);
|
|
|
+ });
|
|
|
+ uni.$on('levelId', item => {
|
|
|
+ let arr = item.split('-');
|
|
|
+ //点击节获取的各层级ID
|
|
|
+ this.moduleId = arr[0];
|
|
|
+ this.chapterId = arr[1];
|
|
|
+ });
|
|
|
+ uni.$on('getChannel', item => {
|
|
|
+ //清除录播
|
|
|
+ this.$store.commit('setPlayVID', {playVID :null});
|
|
|
+ this.playChannel(item);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getLiveUid(channelId) {
|
|
|
+ let self = this;
|
|
|
+ return new Promise(resolve => {
|
|
|
+ let data = {
|
|
|
+ channelId: channelId
|
|
|
+ };
|
|
|
+ self.$api.polyvSign(data).then(res => {
|
|
|
+ resolve(res.data.data);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ timeEventLiving() {
|
|
|
+ if (plv != null) {
|
|
|
+ if(this.livePlay){
|
|
|
+ this.liveDuration = this.liveDuration +1.5 //每隔1.5秒
|
|
|
+ if(this.liveDuration==6){
|
|
|
+ this.openPhoto();
|
|
|
+ console.log(this.playSectionId,"实体")
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ playerLiveStatusChange(e) {
|
|
|
+ const status = e.detail.status;
|
|
|
+ console.log('直播状态',status);
|
|
|
+ if (status === 'live') {
|
|
|
+ console.log('开始直播');
|
|
|
+ //开始播放
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ this.livePlay = true
|
|
|
+ this.timer = setInterval(this.timeEventLiving, 1500); //定时器
|
|
|
+ }
|
|
|
+ if (status === 'end') {
|
|
|
+ this.livePlay = false
|
|
|
+ // 未开始
|
|
|
+ console.log('结束直播');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closePlv(){
|
|
|
+ if(plv){
|
|
|
+ plv.destroy();
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ playChannel(item){
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ this.startStatus = true
|
|
|
+ this.initLive()
|
|
|
+ },
|
|
|
+ setLiveOption(status) {
|
|
|
+ const { userId, channelId, recordFileSimpleModel, playbackEnabled } = this.detail;
|
|
|
+ const playRecordFile = playbackEnabled && recordFileSimpleModel && status === 'end';
|
|
|
+
|
|
|
+ this.videoOption = {
|
|
|
+ mode: 'live',
|
|
|
+ uid: this.liveObj.uid, //this.playChannelId egsxlptzdq
|
|
|
+ cid: this.playChannelId,
|
|
|
+ openId: this.userInfo.userAccount,
|
|
|
+ isAutoChange: false,
|
|
|
+ forceVideo: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async initLive(){
|
|
|
+ this.liveObj = await this.getLiveUid(this.playChannelId);
|
|
|
+ this.initLiveOk = true
|
|
|
+ let optionsData = {}
|
|
|
+ optionsData.mode = 'live';
|
|
|
+ optionsData.forceVideo = false;
|
|
|
+ optionsData.channelId = this.playChannelId; // 频道ID '2553128'
|
|
|
+ optionsData.openId = this.userInfo.userAccount; // 用户openId this.userInfo.userAccount 'oQ5eX5BCtSjkE1ct8CzvxGWgh0hQ'
|
|
|
+ optionsData.userId = this.liveObj.uid // 2.0.0及以上版本的demo需要使用 userId 设置学员唯一id 'egsxlptzdq'
|
|
|
+ let self = this
|
|
|
+
|
|
|
+ plv.init(optionsData)
|
|
|
+ .then(({ detail, chat }) => {
|
|
|
+ self.liveDetail = detail
|
|
|
+
|
|
|
+ // 设置mode为live的videoOption
|
|
|
+ this.setLiveOption();
|
|
|
+ if (detail.isPPT) {
|
|
|
+ chat.on(chat.events.SLICESTART, () => {
|
|
|
+ // 开始直播
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ plv.api.getOrdinaryLiveStatus(detail.stream);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openSetting(res){
|
|
|
+ console.log(res,98)
|
|
|
+ },
|
|
|
+ getCameraSetting () {
|
|
|
+ const self = this
|
|
|
+ wx.getSetting({
|
|
|
+ success: res => {
|
|
|
+ if (res.authSetting['scope.camera']) {
|
|
|
+ // 用户已经授权
|
|
|
+ self.showSet = false
|
|
|
+ } else {
|
|
|
+ // 用户还没有授权，向用户发起授权请求
|
|
|
+ wx.authorize({
|
|
|
+ scope: 'scope.camera',
|
|
|
+ success() { // 用户同意授权
|
|
|
+ self.showSet = false
|
|
|
+ },
|
|
|
+ fail() { // 用户不同意授权
|
|
|
+ self.showSet = true
|
|
|
+ /* wx.showToast({
|
|
|
+ title: '摄像头授权失败',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ }) */
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: res => {
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openJY(){
|
|
|
+ this.$u.toast('此功能正在开发中');
|
|
|
+ },
|
|
|
+ //播放笔记视频
|
|
|
+ async playNoteVideo(item) {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ if (this.vid) {
|
|
|
+ //切换视频
|
|
|
+ var polyvPlayerContext = this.selectComponent('#playerVideo');
|
|
|
+ polyvPlayerContext.changeVid(item.recordingUrl);
|
|
|
+ } else {
|
|
|
+ this.vid = item.recordingUrl;
|
|
|
+ }
|
|
|
+ this.recordObj = {studyDuration:item.noteSecond}
|
|
|
+ if (this.recordObj.studyDuration) {
|
|
|
+ this.needSeek = true; //需要跳转到播放记录
|
|
|
+ }
|
|
|
+ this.startStatus = true;
|
|
|
+
|
|
|
+ //获取节笔记
|
|
|
+ this.getNoteList();
|
|
|
+ },
|
|
|
+ //正常播放视频
|
|
|
+ async playVideo(item) {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ if (this.vid) {
|
|
|
+ //切换视频
|
|
|
+ var polyvPlayerContext = this.selectComponent('#playerVideo');
|
|
|
+ polyvPlayerContext.changeVid(item.recordingUrl);
|
|
|
+ } else {
|
|
|
+ this.vid = item.recordingUrl;
|
|
|
+ }
|
|
|
+ this.recordObj = await this.getRecordLast();
|
|
|
+ if (this.recordObj.studyDuration) {
|
|
|
+ this.needSeek = true; //需要跳转到播放记录
|
|
|
+ }
|
|
|
+ this.startStatus = true;
|
|
|
+ console.log(this.vid,78559)
|
|
|
+ console.log(this.startStatus,78559)
|
|
|
+ //获取节笔记
|
|
|
+ this.getNoteList();
|
|
|
+ },
|
|
|
+ getRecordLast() {
|
|
|
+ let self = this;
|
|
|
+ return new Promise(resolve => {
|
|
|
+ let data = {
|
|
|
+ gradeId: Number(self.gradeId),
|
|
|
+ goodsId: Number(self.goodsId),
|
|
|
+ sectionId: Number(self.playSectionId),
|
|
|
+ courseId: Number(self.courseId)
|
|
|
+ };
|
|
|
+ self.$api.recordLast(data).then(res => {
|
|
|
+ resolve(res.data.data);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ jumpNote(item) {
|
|
|
+ this.noteId = item.noteId;
|
|
|
+ //没视频播放
|
|
|
+ if(this.playSectionId==0){
|
|
|
+ this.$u.toast('即将跳到笔记位置');
|
|
|
+ this.$store.commit('setPlaySectionId', {playSectionId :item.sectionId});
|
|
|
+ this.playNoteVideo(item);
|
|
|
+ }else{
|
|
|
+ //正在看当前笔记视频
|
|
|
+ this.$u.toast('即将跳到笔记位置');
|
|
|
+ //跳到笔记时刻
|
|
|
+ var polyvPlayerContext = this.selectComponent('#playerVideo');
|
|
|
+ polyvPlayerContext.seek(item.noteSecond);
|
|
|
+ polyvPlayerContext.play();
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ postNote() {
|
|
|
+ let self = this;
|
|
|
+ if (!(this.playSectionId > 0)) {
|
|
|
+ this.$u.toast('目前无播放视频');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.noteValue) {
|
|
|
+ this.$u.toast('请输入内容');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(!this.gradeId){
|
|
|
+ this.$u.toast('暂无班级数据');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var polyvPlayerContext = this.selectComponent('#playerVideo');
|
|
|
+ let noteDate = this.$method.getZeroTime();
|
|
|
+ let noteSecond = polyvPlayerContext.getCurrentTime();
|
|
|
+ console.log(noteSecond,698)
|
|
|
+ if (!noteSecond) {
|
|
|
+ if(noteSecond==0){
|
|
|
+ //播放结束
|
|
|
+ noteSecond = polyvPlayerContext.getDuration();
|
|
|
+ console.log(noteSecond,63398)
|
|
|
+ }
|
|
|
+ if(!noteSecond){
|
|
|
+ this.$u.toast('视频暂未开始');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ gradeId: this.gradeId,
|
|
|
+ goodsId: this.goodsId,
|
|
|
+ sectionId: this.playSectionId,
|
|
|
+ courseId: this.courseId,
|
|
|
+ noteText: this.noteValue,
|
|
|
+ noteDate: noteDate,
|
|
|
+ noteSecond: noteSecond
|
|
|
+ };
|
|
|
+ this.$api.postNote(data).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.$u.toast('发布成功');
|
|
|
+ self.getNoteList();
|
|
|
+ this.noteValue = '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getGradeInfo() {
|
|
|
+ let self = this;
|
|
|
+ this.$store.state.allowLoading = false;
|
|
|
+ this.$api.goodsGradeInfo(this.gradeId).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ self.gradeDetail = res.data.data;
|
|
|
+ if(self.gradeDetail.learningStatus==2){
|
|
|
+ uni.showModal({
|
|
|
+ showCancel:false,
|
|
|
+ cancelText: '返回',
|
|
|
+ content: '当前课程正在申请中，请耐心等待',
|
|
|
+ success: function(resultst) {
|
|
|
+ uni.navigateBack();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if(self.gradeDetail.learningStatus==3&&(Number(self.gradeDetail.learningTimeStart)>Number((new Date())/1000))){
|
|
|
+ uni.showModal({
|
|
|
+ showCancel:false,
|
|
|
+ cancelText: '返回',
|
|
|
+ content: '当前课程正在申请中，请耐心等待',
|
|
|
+ success: function(resultst) {
|
|
|
+ uni.navigateBack();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.$store.state.allowLoading = true;
|
|
|
+ },
|
|
|
+ getNoteList() {
|
|
|
+ let self = this;
|
|
|
+ self.noteList = [];
|
|
|
+ let data = { courseId: this.courseId, gradeId: this.gradeId, goodsId: this.goodsId }
|
|
|
+ if(this.playSectionId>0){
|
|
|
+ data.sectionId = this.playSectionId
|
|
|
+ }
|
|
|
+ this.$api.noteList(data).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ self.noteList = res.data.rows;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ delAnswer(answerId) {
|
|
|
+ let self = this;
|
|
|
+ let data = { answerId: answerId, status: -1 };
|
|
|
+ this.$api.delAnswer(data).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ self.getAnswerList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearCtx() {
|
|
|
+ console.log(4234);
|
|
|
+ this.placeholder = '您可以在这里输入答疑内容';
|
|
|
+ this.ctxValue = '';
|
|
|
+ this.assignUserId = 0;
|
|
|
+ },
|
|
|
+ replyContent(item) {
|
|
|
+ this.assignUserId = item.userId;
|
|
|
+ this.placeholder = '@' + item.realname;
|
|
|
+ },
|
|
|
+ delContent(item) {
|
|
|
+ this.delAnswer(item.answerId);
|
|
|
+ },
|
|
|
+ postAnswer() {
|
|
|
+ let self = this;
|
|
|
+ let data = { courseId: this.courseId, answerText: this.ctxValue };
|
|
|
+ if (this.assignUserId > 0) {
|
|
|
+ data.assignUserId = this.assignUserId;
|
|
|
+ }
|
|
|
+ this.$api.postAnswer(data).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.$u.toast('发布成功');
|
|
|
+ self.getAnswerList();
|
|
|
+ this.placeholder = '您可以在这里输入答疑内容';
|
|
|
+ this.ctxValue = '';
|
|
|
+ this.assignUserId = 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ postContent() {
|
|
|
+ if (!this.ctxValue||this.ctxValue=='') {
|
|
|
+ this.$u.toast('请输入内容');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.postAnswer();
|
|
|
+ },
|
|
|
+ postStudyRecord(status = 0, sectionId = this.playSectionId) {
|
|
|
+ let currentTime = 0;
|
|
|
+ var polyvPlayerContext = this.selectComponent('#playerVideo');
|
|
|
+ if (polyvPlayerContext) {
|
|
|
+ currentTime = polyvPlayerContext.getCurrentTime();
|
|
|
+ }
|
|
|
+ let self = this;
|
|
|
+ console.log(self.ossAvatarUrl,"准备提交，照片地址")
|
|
|
+ let data = {
|
|
|
+ photo: self.ossAvatarUrl,
|
|
|
+ sectionId: parseInt(sectionId),
|
|
|
+ goodsId: parseInt(self.goodsId),
|
|
|
+ courseId: parseInt(self.courseId),
|
|
|
+ studyDuration: parseInt(currentTime > 0 ? currentTime : self.studyDuration),
|
|
|
+ gradeId: parseInt(self.gradeId),
|
|
|
+ chapterId: parseInt(self.chapterId),
|
|
|
+ moduleId: parseInt(self.moduleId)
|
|
|
+ };
|
|
|
+ if (data.studyDuration <= 5) {
|
|
|
+ //5秒内不上传记录
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (status > 0) {
|
|
|
+ data.status = status;
|
|
|
+ }
|
|
|
+ console.log('提交接口', data);
|
|
|
+ this.$api.studyRecord(data).then(res => {
|
|
|
+ self.ossAvatarUrl = ''
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ uploadFile(options, int) {
|
|
|
+ var self = this;
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ var data = {
|
|
|
+ imageStatus: int
|
|
|
+ };
|
|
|
+ self.$api.aliyunpolicy(data).then(res => {
|
|
|
+ if (res.data.code != 200) {
|
|
|
+ self.$method.showToast('签名错误' + JSON.stringify(res.data));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var ossToken = res.data.data.resultContent;
|
|
|
+ if (ossToken.host == null || ossToken.host == undefined) {
|
|
|
+ self.$method.showToast('上传路径报错' + JSON.stringify(res.data));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ uni.uploadFile({
|
|
|
+ url: ossToken.host,
|
|
|
+ name: 'file',
|
|
|
+ filePath: options,
|
|
|
+ fileType: 'image',
|
|
|
+ header: {
|
|
|
+ AuthorizationToken: 'WX ' + uni.getStorageSync('token')
|
|
|
+ },
|
|
|
+ formData: {
|
|
|
+ key: ossToken.dir,
|
|
|
+ OSSAccessKeyId: ossToken.accessid,
|
|
|
+ policy: ossToken.policy,
|
|
|
+ Signature: ossToken.signature,
|
|
|
+ callback: ossToken.callback,
|
|
|
+ success_action_status: 200
|
|
|
+ },
|
|
|
+ success: result => {
|
|
|
+ if (result.statusCode === 200) {
|
|
|
+ self.ossAvatarUrl = ossToken.dir;
|
|
|
+ resolve();
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '上传失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '上传接口报错' + error,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ imageInfos() {
|
|
|
+ var self = this;
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: self.avatarUrl,
|
|
|
+ success: async res => {
|
|
|
+ let canvasWidth = res.width; //图片原始长宽
|
|
|
+ let canvasHeight = res.height;
|
|
|
+ if (canvasWidth > 1000 || canvasHeight > 1000) {
|
|
|
+ uni.compressImage({
|
|
|
+ src: self.avatarUrl,
|
|
|
+ quality: 75,
|
|
|
+ width: '50%',
|
|
|
+ height: '50%',
|
|
|
+ success: async rest => {
|
|
|
+ const waitUpload = await self.uploadFile(rest.tempFilePath, 0);
|
|
|
+ resolve();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log('无需压缩');
|
|
|
+ const waitUpload = await self.uploadFile(self.avatarUrl, 0);
|
|
|
+ resolve();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ timeEvent() {
|
|
|
+ let self = this;
|
|
|
+ var polyvPlayerContext = this.selectComponent('#playerVideo');
|
|
|
+ if (polyvPlayerContext != null) {
|
|
|
+ let PlayCurrentTime = polyvPlayerContext.getVideoPlayDuration();
|
|
|
+ this.studyDuration = PlayCurrentTime;
|
|
|
+ if (this.currentTime < PlayCurrentTime) {
|
|
|
+ this.playTime += PlayCurrentTime - this.currentTime;
|
|
|
+ this.currentTime = PlayCurrentTime;
|
|
|
+ } else {
|
|
|
+ this.currentTime = PlayCurrentTime;
|
|
|
+ }
|
|
|
+ //判断是否需要拍照
|
|
|
+ if (this.intervalTimeList.length > this.intervalTimeIndex) {
|
|
|
+ let photoTime = Number(this.intervalTimeList[this.intervalTimeIndex]) * 60; //获取拍照秒数
|
|
|
+ if (photoTime < this.playTime) {
|
|
|
+ //启动拍照
|
|
|
+ //暂停
|
|
|
+ polyvPlayerContext.exitFullScreen();
|
|
|
+ polyvPlayerContext.pause();
|
|
|
+ this.openPhoto();
|
|
|
+ this.intervalTimeIndex++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onStateChange(newstate, oldstate) {
|
|
|
+ if (newstate.detail.newstate == 'playing') {
|
|
|
+ if (this.needSeek) {
|
|
|
+ var polyvPlayerContext = this.selectComponent('#playerVideo');
|
|
|
+ polyvPlayerContext.seek(this.recordObj.studyDuration);
|
|
|
+ polyvPlayerContext.play();
|
|
|
+ this.needSeek = false;
|
|
|
+ }
|
|
|
+ //开始播放
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ this.timer = setInterval(this.timeEvent, 1500); //定时器
|
|
|
+ }
|
|
|
+ if (newstate.detail.newstate == 'pause') {
|
|
|
+ //暂停提交记录
|
|
|
+ /* this.ossAvatarUrl = ""
|
|
|
+ this.postStudyRecord() */
|
|
|
+ }
|
|
|
+ if (newstate.detail.newstate == 'ended') {
|
|
|
+ this.postStudyRecord(1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //拍照
|
|
|
+ openPhoto() {
|
|
|
+ this.photoPopup = true;
|
|
|
+ uni.authorize({
|
|
|
+ scope: 'scope.camera',
|
|
|
+ success() {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async submit() {
|
|
|
+ const waitYS = await this.imageInfos();
|
|
|
+ this.postStudyRecord(); //提交记录
|
|
|
+ //恢复播放
|
|
|
+ var polyvPlayerContext = this.selectComponent('#playerVideo');
|
|
|
+ if (polyvPlayerContext != null) {
|
|
|
+ polyvPlayerContext.play();
|
|
|
+ }
|
|
|
+ console.log(this.ossAvatarUrl, '拍照完成456');
|
|
|
+ },
|
|
|
+ //确认拍照
|
|
|
+ takePhoto() {
|
|
|
+ var self = this;
|
|
|
+ const ctx = uni.createCameraContext();
|
|
|
+ ctx.takePhoto({
|
|
|
+ quality: 'high',
|
|
|
+ success: res => {
|
|
|
+ console.log(res.tempImagePath);
|
|
|
+ self.avatarUrl = res.tempImagePath;
|
|
|
+ self.submit();
|
|
|
+
|
|
|
+ self.photoPopup = false;
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //拍照报错
|
|
|
+ error(e) {
|
|
|
+ console.log(e.detail);
|
|
|
+ },
|
|
|
+ //关闭相机
|
|
|
+ closePhoto() {
|
|
|
+ this.photoPopup = false;
|
|
|
+ },
|
|
|
+ getGoodsDetail() {
|
|
|
+ let self = this;
|
|
|
+ this.$api.goodsDetail(this.goodsId).then(res => {
|
|
|
+ self.goodsData = res.data.data;
|
|
|
+ self.gradeId = self.goodsData.gradeId;
|
|
|
+ console.log(self.gradeId, "班级ID");
|
|
|
+ self.getMenuList();
|
|
|
+ self.getReMenuList(); //获取重修目录
|
|
|
+ setTimeout(function(){
|
|
|
+ if(!self.needProfileModal){
|
|
|
+ self.getGradeInfo()
|
|
|
+ }
|
|
|
+ },500)
|
|
|
+
|
|
|
+ //获取节笔记
|
|
|
+ this.getNoteList();
|
|
|
+ if (self.goodsData.goodsPlayConfig) {
|
|
|
+ self.goodsPlayConfig = JSON.parse(self.goodsData.goodsPlayConfig);
|
|
|
+ if (self.goodsPlayConfig.autoPlay > 0) {
|
|
|
+ self.autoplay = true;
|
|
|
+ }
|
|
|
+ if (self.goodsPlayConfig.drag > 0) {
|
|
|
+ self.isAllowSeek = 'yes';
|
|
|
+ }
|
|
|
+ if (self.goodsPlayConfig.speed > 0) {
|
|
|
+ self.playbackRate = [0.5, 0.8, 1.0, 1.25, 1.5, 2.0];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (self.goodsData.goodsPhotographConfig) {
|
|
|
+ self.goodsPhotographConfig = JSON.parse(self.goodsData.goodsPhotographConfig);
|
|
|
+ if (self.goodsPhotographConfig.intervalTime) {
|
|
|
+ self.intervalTimeList = self.goodsPhotographConfig.intervalTime.split(',');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ startVideo() {
|
|
|
+ this.startStatus = true;
|
|
|
+ },
|
|
|
+ getAnswerList() {
|
|
|
+ let self = this;
|
|
|
+ this.$api.answerList({ courseId: this.courseId }).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ self.answerList = res.data.rows;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getReMenuList() {
|
|
|
+ let self = this;
|
|
|
+ this.$api.reMenuList({ courseId: this.courseId, rebuild: 1, gradeId: this.gradeId }).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;
|
|
|
+ }
|
|
|
+ self.reMenuList = res.data.rows;
|
|
|
+ if(self.reMenuList.length>0){
|
|
|
+ self.list = [
|
|
|
+
|
|
|
+ {
|
|
|
+ name: '目录'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '笔记'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '答疑'
|
|
|
+ },{name:'重修目录'}
|
|
|
+ ];
|
|
|
+ this.current = 0;
|
|
|
+ } else {
|
|
|
+ self.list = [
|
|
|
+
|
|
|
+ {
|
|
|
+ name: '目录'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '笔记'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '答疑'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ this.current = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getMenuList() {
|
|
|
+ let self = this;
|
|
|
+ this.$api.reMenuList({ courseId: this.courseId, gradeId: this.gradeId }).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;
|
|
|
+ }
|
|
|
+ self.menuList = res.data.rows;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ courseDetail() {
|
|
|
+ let self = this;
|
|
|
+ this.$api.courseDetail(this.courseId).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ self.detail = res.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ open(item) {
|
|
|
+ item.showChildren = !item.showChildren;
|
|
|
+ },
|
|
|
+ change(index) {
|
|
|
+ this.current = index;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scope>
|
|
|
+ .btnSet{
|
|
|
+ width: 440rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #007AFF;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+.btnReply {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #e3f0ff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #007aff;
|
|
|
+}
|
|
|
+.btnDel {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #ffedf0;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ff2d55;
|
|
|
+}
|
|
|
+.btnReply {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #e3f0ff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+.photoBox {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 32px 32px 0px 0px;
|
|
|
+ .photoTop {
|
|
|
+ height: 74upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0upx 38upx;
|
|
|
+ .sqzz {
|
|
|
+ width: 28upx;
|
|
|
+ height: 28upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .centersq {
|
|
|
+ color: #333;
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .photoCenter {
|
|
|
+ width: 750upx;
|
|
|
+ height: 979upx;
|
|
|
+ position: relative;
|
|
|
+ .custom {
|
|
|
+ width: 750upx;
|
|
|
+ height: 979upx;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1000;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btnResult {
|
|
|
+ height: 100rpx;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #07c160;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 100upx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+.chat_box {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.chat3 {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+.chat2 {
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+.chat1 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+.leftPadding {
|
|
|
+ margin-left: 8rpx;
|
|
|
+}
|
|
|
+.t2Content {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 48rpx;
|
|
|
+}
|
|
|
+.tBox2 {
|
|
|
+ display: flex;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
+.tBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 10rpx;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+
|
|
|
+page {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-top: constant(safe-area-inset-top);
|
|
|
+ padding-top: env(safe-area-inset-top);
|
|
|
+}
|
|
|
+.inputBottom {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ height: 98rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .flex_auto {
|
|
|
+ flex:1;
|
|
|
+ margin-left: 10% ;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ height:60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ color: #007AFF;font-size: 30rpx;font-weight: bold;width: 15%;text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+.noteBox {
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 10rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+}
|
|
|
+.dateBox {
|
|
|
+ width: 216rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48rpx;
|
|
|
+ margin: 20rpx 0;
|
|
|
+}
|
|
|
+.t_content1 {
|
|
|
+ color: #007aff;
|
|
|
+ margin-left: 10rpx;
|
|
|
+}
|
|
|
+.tag1 {
|
|
|
+ border: 2rpx solid #007aff;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #007aff;
|
|
|
+ padding: 5rpx;
|
|
|
+}
|
|
|
+.b_title {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+page {
|
|
|
+ background: #eaeef1;
|
|
|
+}
|
|
|
+.menuBox {
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.btnspric {
|
|
|
+ border-top: 1rpx solid #eee;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 108rpx;
|
|
|
+ padding-left: 43rpx;
|
|
|
+ padding-right: 32rpx;
|
|
|
+}
|
|
|
+.btnspric > .lefprL {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #0c141f;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.btnspric > .lefprR {
|
|
|
+ padding: 0rpx 24rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: #32467b;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
|
|
|
+}
|
|
|
+.yhj,
|
|
|
+.hdyhj {
|
|
|
+ padding: 24rpx 29rpx 24rpx 34rpx;
|
|
|
+}
|
|
|
+.yhj {
|
|
|
+ border-bottom: 16rpx solid #f9f9f9;
|
|
|
+}
|
|
|
+.yhjtit {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #0c141f;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 14rpx;
|
|
|
+}
|
|
|
+.yhjList {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 14rpx;
|
|
|
+}
|
|
|
+.yhjList > .yhjLefts {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.yhjLefts > .yhl {
|
|
|
+ color: #32467b;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-right: 31rpx;
|
|
|
+}
|
|
|
+.yhjLefts > .yhbq {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ff9500;
|
|
|
+ border-radius: 18rpx;
|
|
|
+ background-color: rgba(255, 149, 0, 0.2);
|
|
|
+ border: 2rpx solid #ff9500;
|
|
|
+ height: 38rpx;
|
|
|
+ line-height: 38rpx;
|
|
|
+ padding: 0rpx 16rpx;
|
|
|
+}
|
|
|
+.ts {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin: 14rpx 0rpx;
|
|
|
+ padding-right: 29rpx;
|
|
|
+ padding-left: 34rpx;
|
|
|
+}
|
|
|
+.yh {
|
|
|
+ padding-top: 20rpx;
|
|
|
+}
|
|
|
+.yh > .yhtitle {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-right: 29rpx;
|
|
|
+ padding-left: 34rpx;
|
|
|
+}
|
|
|
+.priceBxs {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.priceBxs > .pricleft {
|
|
|
+ border-radius: 24rpx;
|
|
|
+ border: 1rpx solid #e91313;
|
|
|
+ background-color: rgba(233, 19, 19, 0.1);
|
|
|
+ padding: 0rpx 18rpx;
|
|
|
+ height: 49rpx;
|
|
|
+ line-height: 49rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #e91313;
|
|
|
+ margin-right: 13rpx;
|
|
|
+}
|
|
|
+.topBox {
|
|
|
+ padding: 32rpx 32rpx 24rpx;
|
|
|
+ border-bottom: 1rpx solid #eeeeee;
|
|
|
+}
|
|
|
+.topBox > .boldFonstType {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin: 16rpx 0rpx 23rpx;
|
|
|
+}
|
|
|
+.topBox > .firstTopL {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.topBox > .firstTopL > .imageBs {
|
|
|
+ width: 331rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(47, 67, 121, 0.08);
|
|
|
+}
|
|
|
+.topBox > .firstTopL > .imageBs > image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.topBox > .firstTopL > .textBs {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0c141f;
|
|
|
+}
|
|
|
+.content {
|
|
|
+ padding: 24rpx;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.catalogBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding-left: 38rpx;
|
|
|
+ max-height: 305rpx;
|
|
|
+ overflow-y: auto;
|
|
|
+ transition: all 0.4s;
|
|
|
+}
|
|
|
+.catalogBox > .catalogA {
|
|
|
+ min-width: 200rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ // text-align: center;
|
|
|
+ border: 2rpx solid transparent;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background: rgba(22, 119, 255, 0.05);
|
|
|
+ padding-left: 19rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 15rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ margin-top: 15rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+.catalogBox > .activesq {
|
|
|
+ border-color: #1677ff;
|
|
|
+}
|
|
|
+.changeCatalogBox {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.catalogBox::-webkit-scrollbar {
|
|
|
+ display: none; /* Chrome Safari */
|
|
|
+}
|
|
|
+.box {
|
|
|
+ position: relative;
|
|
|
+ top: 650rpx;
|
|
|
+ padding-bottom: 88rpx;
|
|
|
+ margin: 20rpx;
|
|
|
+}
|
|
|
+.price_t2 {
|
|
|
+ font-size: 18rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+.price_t1 {
|
|
|
+ font-size: 33rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #e91313;
|
|
|
+}
|
|
|
+.sc_t {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.sc {
|
|
|
+ width: 29rpx;
|
|
|
+ height: 29rpx;
|
|
|
+}
|
|
|
+.buy {
|
|
|
+ width: 138rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ background: #32467b;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+}
|
|
|
+.video_body {
|
|
|
+ padding-bottom: 96rpx;
|
|
|
+}
|
|
|
+.footer_tab {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ height: 96rpx;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.tj_box {
|
|
|
+ width: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ margin: 10rpx 0;
|
|
|
+}
|
|
|
+.teacher_t {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 36rpx;
|
|
|
+ margin-left: 15rpx;
|
|
|
+}
|
|
|
+.teacher_img {
|
|
|
+ width: 87rpx;
|
|
|
+ height: 129rpx;
|
|
|
+}
|
|
|
+.t2 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 36rpx;
|
|
|
+ margin: 15rpx;
|
|
|
+}
|
|
|
+.r_t2 {
|
|
|
+ width: 201rpx;
|
|
|
+ height: 49rpx;
|
|
|
+ background: rgba(22, 119, 255, 0.05);
|
|
|
+ border: 1rpx solid #32467b;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 23rpx;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5rpx;
|
|
|
+}
|
|
|
+.scroll_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 60rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 15rpx 0;
|
|
|
+}
|
|
|
+.r_sliper {
|
|
|
+ padding: 0 20rpx;
|
|
|
+}
|
|
|
+.top_line {
|
|
|
+ width: 6rpx;
|
|
|
+ height: 22rpx;
|
|
|
+ background: #32467b;
|
|
|
+ margin-right: 10rpx;
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+.rotoct {
|
|
|
+ transform: rotate(90deg);
|
|
|
+}
|
|
|
+</style>
|
he2802
