|
@@ -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>
|