|  | @@ -1,275 +1,277 @@
 | 
	
		
			
				|  |  |  <template>
 | 
	
		
			
				|  |  | -  <view class="details">
 | 
	
		
			
				|  |  | -    <u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
 | 
	
		
			
				|  |  | -    <!-- 视频 -->
 | 
	
		
			
				|  |  | -    <video-box ref="videoBox" v-if="isPlay" :videoUrl="videoInfo.videoUrl" @recordDuration="recordDuration"></video-box>
 | 
	
		
			
				|  |  | -    <!-- 介绍 -->
 | 
	
		
			
				|  |  | -    <view class="details-content">
 | 
	
		
			
				|  |  | -      <view class="details-content-title">{{ videoInfo.chapterName || '-' }}</view>
 | 
	
		
			
				|  |  | -      <view class="details-content-progress"
 | 
	
		
			
				|  |  | -        >本课程 共{{ info.amount || 0 }}课,已学完{{ info.finishCount || 0 }}课,共进度{{ info.finishPercent || 0 }}%</view
 | 
	
		
			
				|  |  | -      >
 | 
	
		
			
				|  |  | -      <view class="details-content-teacher">主讲老师:{{ info.presenter || '-' }}</view>
 | 
	
		
			
				|  |  | -      <view class="details-content-info">{{ videoInfo.chapterInfo || '-' }}</view>
 | 
	
		
			
				|  |  | -    </view>
 | 
	
		
			
				|  |  | +	<view class="details">
 | 
	
		
			
				|  |  | +		<u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }"
 | 
	
		
			
				|  |  | +			:border-bottom="false"></u-navbar>
 | 
	
		
			
				|  |  | +		<!-- 视频 -->
 | 
	
		
			
				|  |  | +		<video-box ref="videoBox" v-if="isPlay" :videoUrl="videoInfo.videoUrl" @recordDuration="recordDuration">
 | 
	
		
			
				|  |  | +		</video-box>
 | 
	
		
			
				|  |  | +		<!-- 介绍 -->
 | 
	
		
			
				|  |  | +		<view class="details-content">
 | 
	
		
			
				|  |  | +			<view class="details-content-title">{{ videoInfo.chapterName || '-' }}</view>
 | 
	
		
			
				|  |  | +			<view class="details-content-progress">本课程
 | 
	
		
			
				|  |  | +				共{{ info.amount || 0 }}课,已学完{{ info.finishCount || 0 }}课,共进度{{ info.finishPercent || 0 }}%</view>
 | 
	
		
			
				|  |  | +			<view class="details-content-teacher">主讲老师:{{ info.presenter || '-' }}</view>
 | 
	
		
			
				|  |  | +			<view class="details-content-info">{{ videoInfo.chapterInfo || '-' }}</view>
 | 
	
		
			
				|  |  | +		</view>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    <!-- 课程章节 -->
 | 
	
		
			
				|  |  | -    <view class="details-classes">
 | 
	
		
			
				|  |  | -      <view class="details-classes-header">
 | 
	
		
			
				|  |  | -        <view>精选课程</view>
 | 
	
		
			
				|  |  | -        <view>
 | 
	
		
			
				|  |  | -          更多
 | 
	
		
			
				|  |  | -          <u-icon name="arrow-right" size="22" color="#A3A3A3" />
 | 
	
		
			
				|  |  | -        </view>
 | 
	
		
			
				|  |  | -      </view>
 | 
	
		
			
				|  |  | -      <view class="details-classes-list">
 | 
	
		
			
				|  |  | -        <view
 | 
	
		
			
				|  |  | -          class="details-classes-list-item"
 | 
	
		
			
				|  |  | -          v-for="(item, index) in info.chapterList"
 | 
	
		
			
				|  |  | -          :key="index"
 | 
	
		
			
				|  |  | -          :class="{ active: index === videoIndex }"
 | 
	
		
			
				|  |  | -          @click="classesClick(index)"
 | 
	
		
			
				|  |  | -        >
 | 
	
		
			
				|  |  | -          <view>{{ index + 1 }}</view>
 | 
	
		
			
				|  |  | -          <view>{{ item.flag === 2 ? '已学' : item.finishPercent + '%' }}</view>
 | 
	
		
			
				|  |  | -        </view>
 | 
	
		
			
				|  |  | -      </view>
 | 
	
		
			
				|  |  | -    </view>
 | 
	
		
			
				|  |  | -    <view class="details-line">
 | 
	
		
			
				|  |  | -      <view></view>
 | 
	
		
			
				|  |  | -    </view>
 | 
	
		
			
				|  |  | -    <!-- 评论 -->
 | 
	
		
			
				|  |  | -    <view class="details-comment">
 | 
	
		
			
				|  |  | -      <view class="details-comment-header">
 | 
	
		
			
				|  |  | -        <view>课程评论</view>
 | 
	
		
			
				|  |  | -        <view>共{{ total || 0 }}条评论</view>
 | 
	
		
			
				|  |  | -      </view>
 | 
	
		
			
				|  |  | -      <view class="details-comment-list">
 | 
	
		
			
				|  |  | -        <view class="details-comment-list-item" v-for="(item, index) in commentList" :key="index">
 | 
	
		
			
				|  |  | -          <view class="left">
 | 
	
		
			
				|  |  | -            <u-avatar :src="item.createByAvatar" size="96" mode="square"></u-avatar>
 | 
	
		
			
				|  |  | -          </view>
 | 
	
		
			
				|  |  | -          <view class="right">
 | 
	
		
			
				|  |  | -            <view>{{ item.createBy }}</view>
 | 
	
		
			
				|  |  | -            <view>
 | 
	
		
			
				|  |  | -              <u-rate :count="5" size="28" disabled="" active-color="#FFBC00" v-model="item.starLevel"> </u-rate>
 | 
	
		
			
				|  |  | -              <text>{{ item.createTime }}</text>
 | 
	
		
			
				|  |  | -            </view>
 | 
	
		
			
				|  |  | -            <view>{{ item.content }}</view>
 | 
	
		
			
				|  |  | -          </view>
 | 
	
		
			
				|  |  | -        </view>
 | 
	
		
			
				|  |  | -      </view>
 | 
	
		
			
				|  |  | -      <view class="details-comment-page" v-if="total">
 | 
	
		
			
				|  |  | -        <wyb-pagination :padding="0" :totalItems="total" :current="query.pageNum" @change="pageChange" />
 | 
	
		
			
				|  |  | -      </view>
 | 
	
		
			
				|  |  | -      <view class="details-comment-mine"><text>我的评论</text></view>
 | 
	
		
			
				|  |  | -      <view class="details-comment-conent">
 | 
	
		
			
				|  |  | -        <view class="details-comment-conent-star">
 | 
	
		
			
				|  |  | -          <u-rate :count="5" size="40" active-color="#FFBC00" v-model="form.starLevel"></u-rate>
 | 
	
		
			
				|  |  | -        </view>
 | 
	
		
			
				|  |  | -        <view class="details-comment-content-textarea">
 | 
	
		
			
				|  |  | -          <u-input
 | 
	
		
			
				|  |  | -            v-model="form.content"
 | 
	
		
			
				|  |  | -            placeholder="请输入您的评价"
 | 
	
		
			
				|  |  | -            type="textarea"
 | 
	
		
			
				|  |  | -            :custom-style="{ backgroundColor: '#F5F5F5', padding: '30rpx', borderRadius: '10rpx', minHeight: '280rpx' }"
 | 
	
		
			
				|  |  | -          >
 | 
	
		
			
				|  |  | -          </u-input>
 | 
	
		
			
				|  |  | -        </view>
 | 
	
		
			
				|  |  | -        <view class="details-comment-conent-button" @click="submitCommet">提交</view>
 | 
	
		
			
				|  |  | -      </view>
 | 
	
		
			
				|  |  | -    </view>
 | 
	
		
			
				|  |  | -    <u-toast ref="uToast" />
 | 
	
		
			
				|  |  | -  </view>
 | 
	
		
			
				|  |  | +		<!-- 课程章节 -->
 | 
	
		
			
				|  |  | +		<view class="details-classes">
 | 
	
		
			
				|  |  | +			<view class="details-classes-header">
 | 
	
		
			
				|  |  | +				<view>精选课程</view>
 | 
	
		
			
				|  |  | +				<view>
 | 
	
		
			
				|  |  | +					更多
 | 
	
		
			
				|  |  | +					<u-icon name="arrow-right" size="22" color="#A3A3A3" />
 | 
	
		
			
				|  |  | +				</view>
 | 
	
		
			
				|  |  | +			</view>
 | 
	
		
			
				|  |  | +			<view class="details-classes-list">
 | 
	
		
			
				|  |  | +				<view class="details-classes-list-item" v-for="(item, index) in info.chapterList" :key="index"
 | 
	
		
			
				|  |  | +					:class="{ active: index === videoIndex }" @click="classesClick(index)">
 | 
	
		
			
				|  |  | +					<view>{{ index + 1 }}</view>
 | 
	
		
			
				|  |  | +					<view>{{ item.flag === 2 ? '已学' : item.finishPercent + '%' }}</view>
 | 
	
		
			
				|  |  | +				</view>
 | 
	
		
			
				|  |  | +			</view>
 | 
	
		
			
				|  |  | +		</view>
 | 
	
		
			
				|  |  | +		<view class="details-line" v-if="info.isComments && Number(info.isComments) === 1">
 | 
	
		
			
				|  |  | +			<view></view>
 | 
	
		
			
				|  |  | +		</view>
 | 
	
		
			
				|  |  | +		<!-- 评论 -->
 | 
	
		
			
				|  |  | +		<view class="details-comment" v-if="info.isComments && Number(info.isComments) === 1">
 | 
	
		
			
				|  |  | +			<view class="details-comment-header">
 | 
	
		
			
				|  |  | +				<view>课程评论</view>
 | 
	
		
			
				|  |  | +				<view>共{{ total || 0 }}条评论</view>
 | 
	
		
			
				|  |  | +			</view>
 | 
	
		
			
				|  |  | +			<view class="details-comment-list">
 | 
	
		
			
				|  |  | +				<view class="details-comment-list-item" v-for="(item, index) in commentList" :key="index">
 | 
	
		
			
				|  |  | +					<view class="left">
 | 
	
		
			
				|  |  | +						<u-avatar :src="item.createByAvatar" size="96" mode="square"></u-avatar>
 | 
	
		
			
				|  |  | +					</view>
 | 
	
		
			
				|  |  | +					<view class="right">
 | 
	
		
			
				|  |  | +						<view>{{ item.createBy }}</view>
 | 
	
		
			
				|  |  | +						<view>
 | 
	
		
			
				|  |  | +							<u-rate :count="5" size="28" disabled="" active-color="#FFBC00" v-model="item.starLevel">
 | 
	
		
			
				|  |  | +							</u-rate>
 | 
	
		
			
				|  |  | +							<text>{{ item.createTime }}</text>
 | 
	
		
			
				|  |  | +						</view>
 | 
	
		
			
				|  |  | +						<view>{{ item.content }}</view>
 | 
	
		
			
				|  |  | +					</view>
 | 
	
		
			
				|  |  | +				</view>
 | 
	
		
			
				|  |  | +			</view>
 | 
	
		
			
				|  |  | +			<view class="details-comment-page" v-if="total">
 | 
	
		
			
				|  |  | +				<wyb-pagination :padding="0" :totalItems="total" :current="query.pageNum" @change="pageChange" />
 | 
	
		
			
				|  |  | +			</view>
 | 
	
		
			
				|  |  | +			<view class="details-comment-mine"><text>我的评论</text></view>
 | 
	
		
			
				|  |  | +			<view class="details-comment-conent">
 | 
	
		
			
				|  |  | +				<view class="details-comment-conent-star">
 | 
	
		
			
				|  |  | +					<u-rate :count="5" size="40" active-color="#FFBC00" v-model="form.starLevel"></u-rate>
 | 
	
		
			
				|  |  | +				</view>
 | 
	
		
			
				|  |  | +				<view class="details-comment-content-textarea">
 | 
	
		
			
				|  |  | +					<u-input v-model="form.content" placeholder="请输入您的评价" type="textarea"
 | 
	
		
			
				|  |  | +						:custom-style="{ backgroundColor: '#F5F5F5', padding: '30rpx', borderRadius: '10rpx', minHeight: '280rpx' }">
 | 
	
		
			
				|  |  | +					</u-input>
 | 
	
		
			
				|  |  | +				</view>
 | 
	
		
			
				|  |  | +				<view class="details-comment-conent-button" @click="submitCommet">提交</view>
 | 
	
		
			
				|  |  | +			</view>
 | 
	
		
			
				|  |  | +		</view>
 | 
	
		
			
				|  |  | +		<u-toast ref="uToast" />
 | 
	
		
			
				|  |  | +	</view>
 | 
	
		
			
				|  |  |  </template>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  <script>
 | 
	
		
			
				|  |  | -export default {
 | 
	
		
			
				|  |  | -  data() {
 | 
	
		
			
				|  |  | -    return {
 | 
	
		
			
				|  |  | -      info: {},
 | 
	
		
			
				|  |  | -      videoInfo: {},
 | 
	
		
			
				|  |  | -      videoIndex: 0,
 | 
	
		
			
				|  |  | -      classesId: '',
 | 
	
		
			
				|  |  | -      isPlay: true,
 | 
	
		
			
				|  |  | -      query: {
 | 
	
		
			
				|  |  | -        pageNum: 1,
 | 
	
		
			
				|  |  | -        pageSize: 5,
 | 
	
		
			
				|  |  | -        tabId: ''
 | 
	
		
			
				|  |  | -      },
 | 
	
		
			
				|  |  | -      total: 0,
 | 
	
		
			
				|  |  | -      commentList: [],
 | 
	
		
			
				|  |  | -      form: {
 | 
	
		
			
				|  |  | -        tabId: '',
 | 
	
		
			
				|  |  | -        starLevel: 0,
 | 
	
		
			
				|  |  | -        content: ''
 | 
	
		
			
				|  |  | -      },
 | 
	
		
			
				|  |  | -      isApply: 1
 | 
	
		
			
				|  |  | -    };
 | 
	
		
			
				|  |  | -  },
 | 
	
		
			
				|  |  | -  onLoad(page) {
 | 
	
		
			
				|  |  | -    if (page.id) {
 | 
	
		
			
				|  |  | -      this.getClassesDetails(page.id);
 | 
	
		
			
				|  |  | -      this.classesId = page.id;
 | 
	
		
			
				|  |  | -      this.query.tabId = this.classesId;
 | 
	
		
			
				|  |  | -      this.form.tabId = this.classesId;
 | 
	
		
			
				|  |  | -      this.isApply = page.isApply || 1;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -  },
 | 
	
		
			
				|  |  | -  beforeDestroy() {
 | 
	
		
			
				|  |  | -    this.$refs['videoBox'].recordDuration(this.videoIndex, false);
 | 
	
		
			
				|  |  | -  },
 | 
	
		
			
				|  |  | -  methods: {
 | 
	
		
			
				|  |  | -    /**
 | 
	
		
			
				|  |  | -     * 获取课程详情
 | 
	
		
			
				|  |  | -     * @param {Object} id
 | 
	
		
			
				|  |  | -     */
 | 
	
		
			
				|  |  | -    getClassesDetails(id) {
 | 
	
		
			
				|  |  | -      this.videoInfo.videoUrl = null;
 | 
	
		
			
				|  |  | -      this.$u.api.school
 | 
	
		
			
				|  |  | -        .getPackageCourseDetail({
 | 
	
		
			
				|  |  | -          id
 | 
	
		
			
				|  |  | -        })
 | 
	
		
			
				|  |  | -        .then((res) => {
 | 
	
		
			
				|  |  | -          if (res.code === 200) {
 | 
	
		
			
				|  |  | -            this.info = res.data;
 | 
	
		
			
				|  |  | -            this.videoInfo = res.data.chapterList[this.videoIndex];
 | 
	
		
			
				|  |  | -            this.query.pageNum = 1;
 | 
	
		
			
				|  |  | -            this.isPlay = true;
 | 
	
		
			
				|  |  | -            this.$nextTick(() => {
 | 
	
		
			
				|  |  | -              this.$refs['videoBox'].loadVideo(this.videoInfo);
 | 
	
		
			
				|  |  | -            });
 | 
	
		
			
				|  |  | -            this.getCommentList();
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    /**
 | 
	
		
			
				|  |  | -     * 课程章节点击
 | 
	
		
			
				|  |  | -     * @param {Object} index
 | 
	
		
			
				|  |  | -     */
 | 
	
		
			
				|  |  | -    classesClick(index) {
 | 
	
		
			
				|  |  | -      this.$refs['videoBox'].recordDuration(index, true);
 | 
	
		
			
				|  |  | -      this.videoIndex = index;
 | 
	
		
			
				|  |  | -      this.isPlay = false;
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    /**
 | 
	
		
			
				|  |  | -     * 描述
 | 
	
		
			
				|  |  | -     * @date 2022-10-19
 | 
	
		
			
				|  |  | -     * @param {any} obj
 | 
	
		
			
				|  |  | -     * @param {any} index
 | 
	
		
			
				|  |  | -     * @returns {any}
 | 
	
		
			
				|  |  | -     */
 | 
	
		
			
				|  |  | -    recordDuration(obj, index, refresh = true) {
 | 
	
		
			
				|  |  | -      if (Number(this.isApply) === 1) {
 | 
	
		
			
				|  |  | -        this.submitTimeLong(
 | 
	
		
			
				|  |  | -          { tabId: this.videoInfo.id, playDuration: obj.playDuration, currentDuration: obj.currentDuration, duration: obj.duration },
 | 
	
		
			
				|  |  | -          index || this.videoIndex,
 | 
	
		
			
				|  |  | -          refresh
 | 
	
		
			
				|  |  | -        );
 | 
	
		
			
				|  |  | -      } else {
 | 
	
		
			
				|  |  | -        if (refresh) {
 | 
	
		
			
				|  |  | -          this.videoInfo = this.info.chapterList[index];
 | 
	
		
			
				|  |  | -          this.getClassesDetails(this.classesId);
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    /**
 | 
	
		
			
				|  |  | -     * 提交课程时长
 | 
	
		
			
				|  |  | -     */
 | 
	
		
			
				|  |  | -    submitTimeLong({ tabId, playDuration, currentDuration, duration }, index, refresh) {
 | 
	
		
			
				|  |  | -      if (tabId) {
 | 
	
		
			
				|  |  | -        this.$u.api.training
 | 
	
		
			
				|  |  | -          .videoTimeLongApi({
 | 
	
		
			
				|  |  | -            tabId,
 | 
	
		
			
				|  |  | -            playDuration,
 | 
	
		
			
				|  |  | -            currentDuration,
 | 
	
		
			
				|  |  | -            duration
 | 
	
		
			
				|  |  | -          })
 | 
	
		
			
				|  |  | -          .then((res) => {
 | 
	
		
			
				|  |  | -            if (res.code === 200) {
 | 
	
		
			
				|  |  | -              this.videoInfo = this.info.chapterList[index];
 | 
	
		
			
				|  |  | -              if (refresh) {
 | 
	
		
			
				|  |  | -                this.$refs.uToast.show({
 | 
	
		
			
				|  |  | -                  title: '已记录章节时长!',
 | 
	
		
			
				|  |  | -                  type: 'success'
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -                this.getClassesDetails(this.classesId);
 | 
	
		
			
				|  |  | -              }
 | 
	
		
			
				|  |  | -            } else {
 | 
	
		
			
				|  |  | -              this.$refs.uToast.show({
 | 
	
		
			
				|  |  | -                title: res.msg,
 | 
	
		
			
				|  |  | -                type: 'error'
 | 
	
		
			
				|  |  | -              });
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -          });
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    /**
 | 
	
		
			
				|  |  | -     * 获取评论列表
 | 
	
		
			
				|  |  | -     */
 | 
	
		
			
				|  |  | -    getCommentList() {
 | 
	
		
			
				|  |  | -      if (this.query.tabId) {
 | 
	
		
			
				|  |  | -        this.$u.api.training.getClassesCommentApi(this.query).then((res) => {
 | 
	
		
			
				|  |  | -          if (res.code === 200) {
 | 
	
		
			
				|  |  | -            this.total = Number(res.total);
 | 
	
		
			
				|  |  | -            this.commentList = res.rows;
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    /**
 | 
	
		
			
				|  |  | -     * @param {Object} e 分页触发
 | 
	
		
			
				|  |  | -     */
 | 
	
		
			
				|  |  | -    pageChange(e) {
 | 
	
		
			
				|  |  | -      this.query.pageNum = e.current;
 | 
	
		
			
				|  |  | -      this.getCommentList();
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    /**
 | 
	
		
			
				|  |  | -     * 提交评论
 | 
	
		
			
				|  |  | -     */
 | 
	
		
			
				|  |  | -    submitCommet() {
 | 
	
		
			
				|  |  | -      if (this.form.tabId) {
 | 
	
		
			
				|  |  | -        if (this.form.starLevel && this.form.content) {
 | 
	
		
			
				|  |  | -          this.$u.api.training.addClassesCommentApi(this.form).then((res) => {
 | 
	
		
			
				|  |  | -            if (res.code === 200) {
 | 
	
		
			
				|  |  | -              this.$refs.uToast.show({
 | 
	
		
			
				|  |  | -                title: '评论成功!',
 | 
	
		
			
				|  |  | -                type: 'success'
 | 
	
		
			
				|  |  | -              });
 | 
	
		
			
				|  |  | -              this.form.content = '';
 | 
	
		
			
				|  |  | -              this.form.starLevel = 0;
 | 
	
		
			
				|  |  | -              this.getCommentList();
 | 
	
		
			
				|  |  | -            } else {
 | 
	
		
			
				|  |  | -              this.$refs.uToast.show({
 | 
	
		
			
				|  |  | -                title: res.msg,
 | 
	
		
			
				|  |  | -                type: 'error'
 | 
	
		
			
				|  |  | -              });
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -          });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        if (!this.form.starLevel) {
 | 
	
		
			
				|  |  | -          this.$refs.uToast.show({
 | 
	
		
			
				|  |  | -            title: '请选择星级',
 | 
	
		
			
				|  |  | -            type: 'warning'
 | 
	
		
			
				|  |  | -          });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        if (!this.form.content) {
 | 
	
		
			
				|  |  | -          this.$refs.uToast.show({
 | 
	
		
			
				|  |  | -            title: '请输入评论内容',
 | 
	
		
			
				|  |  | -            type: 'warning'
 | 
	
		
			
				|  |  | -          });
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -      } else {
 | 
	
		
			
				|  |  | -        this.$refs.uToast.show({
 | 
	
		
			
				|  |  | -          title: '未找到课程章节,无法提交评论!',
 | 
	
		
			
				|  |  | -          type: 'warning'
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -};
 | 
	
		
			
				|  |  | +	export default {
 | 
	
		
			
				|  |  | +		data() {
 | 
	
		
			
				|  |  | +			return {
 | 
	
		
			
				|  |  | +				info: {},
 | 
	
		
			
				|  |  | +				videoInfo: {},
 | 
	
		
			
				|  |  | +				videoIndex: 0,
 | 
	
		
			
				|  |  | +				classesId: '',
 | 
	
		
			
				|  |  | +				isPlay: true,
 | 
	
		
			
				|  |  | +				query: {
 | 
	
		
			
				|  |  | +					pageNum: 1,
 | 
	
		
			
				|  |  | +					pageSize: 5,
 | 
	
		
			
				|  |  | +					tabId: ''
 | 
	
		
			
				|  |  | +				},
 | 
	
		
			
				|  |  | +				total: 0,
 | 
	
		
			
				|  |  | +				commentList: [],
 | 
	
		
			
				|  |  | +				form: {
 | 
	
		
			
				|  |  | +					tabId: '',
 | 
	
		
			
				|  |  | +					starLevel: 0,
 | 
	
		
			
				|  |  | +					content: ''
 | 
	
		
			
				|  |  | +				},
 | 
	
		
			
				|  |  | +				isApply: 1
 | 
	
		
			
				|  |  | +			};
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		onLoad(page) {
 | 
	
		
			
				|  |  | +			if (page.id) {
 | 
	
		
			
				|  |  | +				this.getClassesDetails(page.id);
 | 
	
		
			
				|  |  | +				this.classesId = page.id;
 | 
	
		
			
				|  |  | +				this.query.tabId = this.classesId;
 | 
	
		
			
				|  |  | +				this.form.tabId = this.classesId;
 | 
	
		
			
				|  |  | +				this.isApply = page.isApply || 1;
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		beforeDestroy() {
 | 
	
		
			
				|  |  | +			this.$refs['videoBox'].recordDuration(this.videoIndex, false);
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		methods: {
 | 
	
		
			
				|  |  | +			/**
 | 
	
		
			
				|  |  | +			 * 获取课程详情
 | 
	
		
			
				|  |  | +			 * @param {Object} id
 | 
	
		
			
				|  |  | +			 */
 | 
	
		
			
				|  |  | +			getClassesDetails(id) {
 | 
	
		
			
				|  |  | +				this.videoInfo.videoUrl = null;
 | 
	
		
			
				|  |  | +				this.$u.api.school
 | 
	
		
			
				|  |  | +					.getPackageCourseDetail({
 | 
	
		
			
				|  |  | +						id
 | 
	
		
			
				|  |  | +					})
 | 
	
		
			
				|  |  | +					.then((res) => {
 | 
	
		
			
				|  |  | +						if (res.code === 200) {
 | 
	
		
			
				|  |  | +							this.info = res.data;
 | 
	
		
			
				|  |  | +							this.videoInfo = res.data.chapterList[this.videoIndex];
 | 
	
		
			
				|  |  | +							this.query.pageNum = 1;
 | 
	
		
			
				|  |  | +							this.isPlay = true;
 | 
	
		
			
				|  |  | +							this.$nextTick(() => {
 | 
	
		
			
				|  |  | +								this.$refs['videoBox'].loadVideo(this.videoInfo);
 | 
	
		
			
				|  |  | +							});
 | 
	
		
			
				|  |  | +							if (res.data.isComments && Number(res.data.isComments) === 1) this.getCommentList();
 | 
	
		
			
				|  |  | +						}
 | 
	
		
			
				|  |  | +					});
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			/**
 | 
	
		
			
				|  |  | +			 * 课程章节点击
 | 
	
		
			
				|  |  | +			 * @param {Object} index
 | 
	
		
			
				|  |  | +			 */
 | 
	
		
			
				|  |  | +			classesClick(index) {
 | 
	
		
			
				|  |  | +				this.$refs['videoBox'].recordDuration(index, true);
 | 
	
		
			
				|  |  | +				this.videoIndex = index;
 | 
	
		
			
				|  |  | +				this.isPlay = false;
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			/**
 | 
	
		
			
				|  |  | +			 * 描述
 | 
	
		
			
				|  |  | +			 * @date 2022-10-19
 | 
	
		
			
				|  |  | +			 * @param {any} obj
 | 
	
		
			
				|  |  | +			 * @param {any} index
 | 
	
		
			
				|  |  | +			 * @returns {any}
 | 
	
		
			
				|  |  | +			 */
 | 
	
		
			
				|  |  | +			recordDuration(obj, index, refresh = true) {
 | 
	
		
			
				|  |  | +				if (Number(this.isApply) === 1) {
 | 
	
		
			
				|  |  | +					this.submitTimeLong({
 | 
	
		
			
				|  |  | +							tabId: this.videoInfo.id,
 | 
	
		
			
				|  |  | +							playDuration: obj.playDuration,
 | 
	
		
			
				|  |  | +							currentDuration: obj.currentDuration,
 | 
	
		
			
				|  |  | +							duration: obj.duration
 | 
	
		
			
				|  |  | +						},
 | 
	
		
			
				|  |  | +						index || this.videoIndex,
 | 
	
		
			
				|  |  | +						refresh
 | 
	
		
			
				|  |  | +					);
 | 
	
		
			
				|  |  | +				} else {
 | 
	
		
			
				|  |  | +					if (refresh) {
 | 
	
		
			
				|  |  | +						this.videoInfo = this.info.chapterList[index];
 | 
	
		
			
				|  |  | +						this.getClassesDetails(this.classesId);
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			/**
 | 
	
		
			
				|  |  | +			 * 提交课程时长
 | 
	
		
			
				|  |  | +			 */
 | 
	
		
			
				|  |  | +			submitTimeLong({
 | 
	
		
			
				|  |  | +				tabId,
 | 
	
		
			
				|  |  | +				playDuration,
 | 
	
		
			
				|  |  | +				currentDuration,
 | 
	
		
			
				|  |  | +				duration
 | 
	
		
			
				|  |  | +			}, index, refresh) {
 | 
	
		
			
				|  |  | +				if (tabId) {
 | 
	
		
			
				|  |  | +					this.$u.api.training
 | 
	
		
			
				|  |  | +						.videoTimeLongApi({
 | 
	
		
			
				|  |  | +							tabId,
 | 
	
		
			
				|  |  | +							playDuration,
 | 
	
		
			
				|  |  | +							currentDuration,
 | 
	
		
			
				|  |  | +							duration
 | 
	
		
			
				|  |  | +						})
 | 
	
		
			
				|  |  | +						.then((res) => {
 | 
	
		
			
				|  |  | +							if (res.code === 200) {
 | 
	
		
			
				|  |  | +								this.videoInfo = this.info.chapterList[index];
 | 
	
		
			
				|  |  | +								if (refresh) {
 | 
	
		
			
				|  |  | +									this.$refs.uToast.show({
 | 
	
		
			
				|  |  | +										title: '已记录章节时长!',
 | 
	
		
			
				|  |  | +										type: 'success'
 | 
	
		
			
				|  |  | +									});
 | 
	
		
			
				|  |  | +									this.getClassesDetails(this.classesId);
 | 
	
		
			
				|  |  | +								}
 | 
	
		
			
				|  |  | +							} else {
 | 
	
		
			
				|  |  | +								this.$refs.uToast.show({
 | 
	
		
			
				|  |  | +									title: res.msg,
 | 
	
		
			
				|  |  | +									type: 'error'
 | 
	
		
			
				|  |  | +								});
 | 
	
		
			
				|  |  | +							}
 | 
	
		
			
				|  |  | +						});
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			/**
 | 
	
		
			
				|  |  | +			 * 获取评论列表
 | 
	
		
			
				|  |  | +			 */
 | 
	
		
			
				|  |  | +			getCommentList() {
 | 
	
		
			
				|  |  | +				if (this.query.tabId) {
 | 
	
		
			
				|  |  | +					this.$u.api.training.getClassesCommentApi(this.query).then((res) => {
 | 
	
		
			
				|  |  | +						if (res.code === 200) {
 | 
	
		
			
				|  |  | +							this.total = Number(res.total);
 | 
	
		
			
				|  |  | +							this.commentList = res.rows;
 | 
	
		
			
				|  |  | +						}
 | 
	
		
			
				|  |  | +					});
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			/**
 | 
	
		
			
				|  |  | +			 * @param {Object} e 分页触发
 | 
	
		
			
				|  |  | +			 */
 | 
	
		
			
				|  |  | +			pageChange(e) {
 | 
	
		
			
				|  |  | +				this.query.pageNum = e.current;
 | 
	
		
			
				|  |  | +				this.getCommentList();
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			/**
 | 
	
		
			
				|  |  | +			 * 提交评论
 | 
	
		
			
				|  |  | +			 */
 | 
	
		
			
				|  |  | +			submitCommet() {
 | 
	
		
			
				|  |  | +				if (this.form.tabId) {
 | 
	
		
			
				|  |  | +					if (this.form.starLevel && this.form.content) {
 | 
	
		
			
				|  |  | +						this.$u.api.training.addClassesCommentApi(this.form).then((res) => {
 | 
	
		
			
				|  |  | +							if (res.code === 200) {
 | 
	
		
			
				|  |  | +								this.$refs.uToast.show({
 | 
	
		
			
				|  |  | +									title: '评论成功!',
 | 
	
		
			
				|  |  | +									type: 'success'
 | 
	
		
			
				|  |  | +								});
 | 
	
		
			
				|  |  | +								this.form.content = '';
 | 
	
		
			
				|  |  | +								this.form.starLevel = 0;
 | 
	
		
			
				|  |  | +								this.getCommentList();
 | 
	
		
			
				|  |  | +							} else {
 | 
	
		
			
				|  |  | +								this.$refs.uToast.show({
 | 
	
		
			
				|  |  | +									title: res.msg,
 | 
	
		
			
				|  |  | +									type: 'error'
 | 
	
		
			
				|  |  | +								});
 | 
	
		
			
				|  |  | +							}
 | 
	
		
			
				|  |  | +						});
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +					if (!this.form.starLevel) {
 | 
	
		
			
				|  |  | +						this.$refs.uToast.show({
 | 
	
		
			
				|  |  | +							title: '请选择星级',
 | 
	
		
			
				|  |  | +							type: 'warning'
 | 
	
		
			
				|  |  | +						});
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +					if (!this.form.content) {
 | 
	
		
			
				|  |  | +						this.$refs.uToast.show({
 | 
	
		
			
				|  |  | +							title: '请输入评论内容',
 | 
	
		
			
				|  |  | +							type: 'warning'
 | 
	
		
			
				|  |  | +						});
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +				} else {
 | 
	
		
			
				|  |  | +					this.$refs.uToast.show({
 | 
	
		
			
				|  |  | +						title: '未找到课程章节,无法提交评论!',
 | 
	
		
			
				|  |  | +						type: 'warning'
 | 
	
		
			
				|  |  | +					});
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +	};
 | 
	
		
			
				|  |  |  </script>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  <style lang="scss" scoped>
 | 
	
		
			
				|  |  | -@import './courseDetailed.scss';
 | 
	
		
			
				|  |  | +	@import './courseDetailed.scss';
 | 
	
		
			
				|  |  |  </style>
 |