hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-11 03:46:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
joshen
2025-04-21 15:08:00 +08:00
parent 236e9521be
commit 28438f9ec0
1 changed files with 324 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

648
src/views/study/coursenew.vue
View File

@@ -28,9 +28,9 @@
</div> </div>
<div v-if="resType == 10" style="position: relative;"> <div v-if="resType == 10" style="position: relative;">
<videoPlayer ref="myVideoPlayer" id="myVideoPlayer" @progress="progress" :src="blobUrl" :blobId="blobId" @onPlayerPlaying="onPlayerPlaying" <videoPlayer ref="myVideoPlayer" id="myVideoPlayer" @progress="progress" :src="blobUrl" :blobId="blobId" @onPlayerPlaying="onPlayerPlaying"
:initTime="contentData.lastStudyTime" :notePlay="notePlay" @onPlayerPlay="onPlayerPlay" :initTime="contentData.lastStudyTime" :notePlay="notePlay" @onPlayerPlay="onPlayerPlay"
:isDrag="curriculumData.isDrag" @onFullscreen="onFullscreen" @onPlayerPause="onPlayerPause" :isDrag="curriculumData.isDrag" @onFullscreen="onFullscreen" @onPlayerPause="onPlayerPause"
@onPlayerEnded="onPlayerEnded" :isCrowd="isCrowd" @onTimeUpdate="handleAudioTimeUpdate"></videoPlayer> @onPlayerEnded="onPlayerEnded" :isCrowd="isCrowd" @onTimeUpdate="handleAudioTimeUpdate"></videoPlayer>
<div class="player-box" v-if="playerBoxShow"> <div class="player-box" v-if="playerBoxShow">
<div class="player-praise" style="cursor: pointer;"> <div class="player-praise" style="cursor: pointer;">
<div @click="praiseContent"> <div @click="praiseContent">
@@ -41,7 +41,7 @@
</div> </div>
<div style="margin-left: 15px;cursor: pointer;" @click="treadContent"> <div style="margin-left: 15px;cursor: pointer;" @click="treadContent">
<img class="icon-small" v-if="isTrample" <img class="icon-small" v-if="isTrample"
:src="require('@/assets/images/icon/trample-active.png')" /> :src="require('@/assets/images/icon/trample-active.png')" />
<img class="icon-small" v-else :src="require('@/assets/images/icon/cai.png')" /> <img class="icon-small" v-else :src="require('@/assets/images/icon/cai.png')" />
<!-- {{ courseInfo.trampleCount }} --> <!-- {{ courseInfo.trampleCount }} -->
<div style="color:#fff;cursor: pointer;">踩</div> <div style="color:#fff;cursor: pointer;">踩</div>
@@ -68,7 +68,7 @@
<div class="con-audio-title">{{ contentData.contentName }}</div> <div class="con-audio-title">{{ contentData.contentName }}</div>
<div class="con-audio-player"> <div class="con-audio-player">
<audioPlayer v-if="resType == 20" :url="blobUrl" :name="contentData.contentName" @onPlaying="audioPlaying" :isDrag="curriculumData.isDrag" <audioPlayer v-if="resType == 20" :url="blobUrl" :name="contentData.contentName" @onPlaying="audioPlaying" :isDrag="curriculumData.isDrag"
@onPlay="audioPlay" @onPause="audioPause" @onPlayEnd="audioEnd"></audioPlayer> @onPlay="audioPlay" @onPause="audioPause" @onPlayEnd="audioEnd"></audioPlayer>
</div> </div>
</div> </div>
</div> </div>
@@ -95,7 +95,7 @@
<div class="hyper-link-row">{{ conLink.url }}</div> <div class="hyper-link-row">{{ conLink.url }}</div>
</div> </div>
<div v-if="conLink.openType == 1"><iframe :src="conLink.url" <div v-if="conLink.openType == 1"><iframe :src="conLink.url"
style="width: 100%;border:0px;min-height: 473px;" frameborder="0"></iframe></div> style="width: 100%;border:0px;min-height: 473px;" frameborder="0"></iframe></div>
</div> </div>
</div> </div>
<div v-if="resType == 60"> <div v-if="resType == 60">
@@ -115,21 +115,21 @@
<div class="score" style="display: flex;"> <div class="score" style="display: flex;">
<div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;padding-top:18px"> <div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;padding-top:18px">
<!-- <el-popover placement="top" width="300" trigger="hover"> --> <!-- <el-popover placement="top" width="300" trigger="hover"> -->
<!-- <div style="text-align:center;line-height:50px;padding:20px 0px"> <!-- <div style="text-align:center;line-height:50px;padding:20px 0px">
<div style="padding-top:30px"><el-button @click="addScore">提交评分</el-button></div> <div style="padding-top:30px"><el-button @click="addScore">提交评分</el-button></div>
</div> --> </div> -->
<el-rate v-model="scoreInfo.score" @change="addScore"></el-rate> <el-rate v-model="scoreInfo.score" @change="addScore"></el-rate>
<!-- <el-tag class="ref-score" slot="reference">去评分</el-tag> --> <!-- <el-tag class="ref-score" slot="reference">去评分</el-tag> -->
<!-- </el-popover> --> <!-- </el-popover> -->
</div> </div>
<div v-if="scoreInfo.has" style="padding-top: 5px;display: flex;"> <div v-if="scoreInfo.has" style="padding-top: 5px;display: flex;">
<div style="padding-top: 16px;"> <div style="padding-top: 16px;">
<el-rate disabled v-model="courseInfo.score" :allow-half="true" ></el-rate> <el-rate disabled v-model="courseInfo.score" :allow-half="true" ></el-rate>
</div> </div>
<div> <div>
<span class="score-text">{{ toScore(courseInfo.score) }}</span> <span class="score-text">{{ toScore(courseInfo.score) }}</span>
<span style="font-size: 18px;">分</span> <span style="font-size: 18px;">分</span>
</div> </div>
</div> </div>
</div> </div>
@@ -142,14 +142,14 @@
{{ courseInfo.praises }} {{ courseInfo.praises }}
</div> </div>
<div style="margin-left: 20px;" @click="treadContent"> <div style="margin-left: 20px;" @click="treadContent">
<el-tooltip class="item" effect="light" :content="isTrample?'取消踩':'踩'" placement="top-start" :visible-arrow="false" popper-class="text-tooltip"> <el-tooltip class="item" effect="light" :content="isTrample?'取消踩':'踩'" placement="top-start" :visible-arrow="false" popper-class="text-tooltip">
<img class="icon-small" v-if="isTrample" :src="require('@/assets/images/icon/trample-active.png')" /> <img class="icon-small" v-if="isTrample" :src="require('@/assets/images/icon/trample-active.png')" />
<img class="icon-small" v-else :src="require('@/assets/images/icon/trample.png')" /> <img class="icon-small" v-else :src="require('@/assets/images/icon/trample.png')" />
</el-tooltip> </el-tooltip>
{{ courseInfo.trampleCount }} {{ courseInfo.trampleCount }}
</div> </div>
<div style="margin-left: 6px;"> <div style="margin-left: 6px;">
<interactBar :size="16" :type="1" :aid="courseInfo.sysCreateAid" :data="courseInfo" :praises="false" :favorites="true" :shares="true" :comments="false" :views="false"></interactBar> <interactBar :size="16" :type="1" :aid="courseInfo.sysCreateAid" :data="courseInfo" :praises="false" :favorites="true" :shares="true" :comments="false" :views="false"></interactBar>
</div> </div>
</div> </div>
</div> </div>
@@ -157,128 +157,128 @@
</div> </div>
</div> </div>
<div class="course-control"> <div class="course-control">
<div class="control-tab" v-if="contentList.length>0" > <div class="control-tab" v-if="contentList.length>0" >
<div v-if="contentList.length>1" @click="heartabone" :class="tab == 1 ? 'control-tab-active' : ' '"> <div v-if="contentList.length>1" @click="heartabone" :class="tab == 1 ? 'control-tab-active' : ' '">
<i class="el-icon-reading" style="margin-right:9px;margin-left:9px"></i>课程单元 <i class="el-icon-reading" style="margin-right:9px;margin-left:9px"></i>课程单元
</div>
<div @click="heartabtwo" :class="tab == 2 ? 'control-tab-active' : ' '">
<i class="el-icon-edit" style="margin-right:9px;margin-left:9px"></i>我的笔记
</div>
</div> </div>
<!-- 课程单元 --> <div @click="heartabtwo" :class="tab == 2 ? 'control-tab-active' : ' '">
<div class="course-units" v-if="tab == 1"> <i class="el-icon-edit" style="margin-right:9px;margin-left:9px"></i>我的笔记
<div :style="`height: ${controlHeight}px;overflow-y: auto;`"> </div>
<div class="catalog" v-if="courseInfo.type == 20"> </div>
<div v-for="(item, index) in catalogTree" :key="index" :name="index"> <!-- 课程单元 -->
<el-menu <div class="course-units" v-if="tab == 1">
ref="menu" <div :style="`height: ${controlHeight}px;overflow-y: auto;`">
:default-openeds="defaultOpeneds" <div class="catalog" v-if="courseInfo.type == 20">
:default-active="activeId" <div v-for="(item, index) in catalogTree" :key="index" :name="index">
:unique-opened="true" <el-menu
class="el-menu-vertical-demo" ref="menu"
@open="handleOpen" :default-openeds="defaultOpeneds"
@close="handleClose"> :default-active="activeId"
<el-submenu :index="item.section.id"> :unique-opened="true"
<template slot="title"> class="el-menu-vertical-demo"
<div style="display: flex;justify-content: space-between;"> @open="handleOpen"
<div style="width: 240px;font-weight: 700;font-size: 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="item.section.name">{{item.section.name}}</div> @close="handleClose">
<div style="margin-right: 23px;font-weight: 700;font-size: 16px;">({{ item.children.filter(item=>item.status == 9).length }}/{{ item.children.length }})</div> <el-submenu :index="item.section.id">
</div> <template slot="title">
</template> <div style="display: flex;justify-content: space-between;">
<el-menu-item-group v-for="(ele, i) in item.children" :key="i"> <div style="width: 240px;font-weight: 700;font-size: 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="item.section.name">{{item.section.name}}</div>
<div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index,item)"> <div style="margin-right: 23px;font-weight: 700;font-size: 16px;">({{ item.children.filter(item=>item.status == 9).length }}/{{ item.children.length }})</div>
<el-menu-item :index="ele.id" style="padding: 0;padding-left: 10px;"> </div>
<div style="display: flex;justify-content: space-between;"> </template>
<div style="width: 200px;font-size: 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="ele.contentName">{{i+1}}. {{ ele.contentName }}</div> <el-menu-item-group v-for="(ele, i) in item.children" :key="i">
<div> <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index,item)">
<span v-if="contentData.id == ele.id" style="color: #387DF7;font-size: 14px;margin-right: 4px;">学习中</span> <el-menu-item :index="ele.id" style="padding: 0;padding-left: 10px;">
<!-- <img v-if="contentData.id == ele.id" :src="`${webBaseUrl}/images/playicon.png`" alt=""> --> <div style="display: flex;justify-content: space-between;">
<img v-if="contentData.id == ele.id && ele.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/over.png" alt=""> <div style="width: 200px;font-size: 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="ele.contentName">{{i+1}}. {{ ele.contentName }}</div>
<img v-if="contentData.id == ele.id && ele.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/nowNot.png" alt=""> <div>
<img v-if="contentData.id == ele.id && (ele.status != 9&&ele.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/ban1.png" alt=""> <span v-if="contentData.id == ele.id" style="color: #387DF7;font-size: 14px;margin-right: 4px;">学习中</span>
<img v-if="contentData.id != ele.id && ele.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/notNew.png" alt=""> <!-- <img v-if="contentData.id == ele.id" :src="`${webBaseUrl}/images/playicon.png`" alt=""> -->
<img v-if="contentData.id != ele.id && ele.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/not.png" alt=""> <img v-if="contentData.id == ele.id && ele.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/over.png" alt="">
<img v-if="contentData.id != ele.id && (ele.status != 9&&ele.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/newBan.png" alt=""> <img v-if="contentData.id == ele.id && ele.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/nowNot.png" alt="">
</div> <img v-if="contentData.id == ele.id && (ele.status != 9&&ele.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/ban1.png" alt="">
<img v-if="contentData.id != ele.id && ele.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/notNew.png" alt="">
<img v-if="contentData.id != ele.id && ele.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/not.png" alt="">
<img v-if="contentData.id != ele.id && (ele.status != 9&&ele.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/newBan.png" alt="">
</div> </div>
</div>
</el-menu-item> </el-menu-item>
</div> </div>
</el-menu-item-group> </el-menu-item-group>
</el-submenu> </el-submenu>
</el-menu> </el-menu>
</div>
<!-- <div v-for="(item, index) in catalogTree" :key="index" :name="index">
<div style="margin: 10px 0px;font-weight: 700;">{{item.section.name}}</div>
<div class="units-info" :class="{'units-active':contentData.id == ele.id}" v-for="(ele, i) in item.children" :key="i" @click="showRes(ele,i,index)">
<img v-if="contentData.id == ele.id" :src="`${webBaseUrl}/images/playicon.png`" alt=""> {{i+1}}.
<span>{{ ele.contentName }}</span>
</div>
</div> -->
</div> </div>
<div v-else class="catalog"> <!-- <div v-for="(item, index) in catalogTree" :key="index" :name="index">
<!-- contentList --> <div style="margin: 10px 0px;font-weight: 700;">{{item.section.name}}</div>
<div class="units-info" style="display: flex;justify-content: space-between" v-for="(list, index) in contentList" :key="index" :name="index" @click="showRes(list,-1,index)" :class="{'units-active':contentData.id == list.id}"> <div class="units-info" :class="{'units-active':contentData.id == ele.id}" v-for="(ele, i) in item.children" :key="i" @click="showRes(ele,i,index)">
<!-- <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i"> --> <img v-if="contentData.id == ele.id" :src="`${webBaseUrl}/images/playicon.png`" alt=""> {{i+1}}.
<!-- <img v-if="contentData.id == list.id" :src="`${webBaseUrl}/images/playicon.png`" alt=""> --> <span>{{ ele.contentName }}</span>
<div style="max-width: 193px;;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
{{index+1}}.{{ list.contentName }}
</div>
<div style="margin-left: 5px">
<span v-if="contentData.id == list.id" style="color: #387DF7;font-size: 14px;margin-right: 4px;">学习中</span>
<img v-if="contentData.id == list.id && list.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/over.png" alt="">
<img v-if="contentData.id == list.id && list.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/nowNot.png" alt="">
<img v-if="contentData.id == list.id && (list.status != 9&&list.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/ban1.png" alt="">
<img v-if="contentData.id != list.id && list.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/notNew.png" alt="">
<img v-if="contentData.id != list.id && list.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/not.png" alt="">
<img v-if="contentData.id != list.id && (list.status != 9&&list.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/newBan.png" alt="">
</div>
<!-- </div> -->
</div> </div>
</div> -->
</div>
<div v-else class="catalog">
<!-- contentList -->
<div class="units-info" style="display: flex;justify-content: space-between" v-for="(list, index) in contentList" :key="index" :name="index" @click="showRes(list,-1,index)" :class="{'units-active':contentData.id == list.id}">
<!-- <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i"> -->
<!-- <img v-if="contentData.id == list.id" :src="`${webBaseUrl}/images/playicon.png`" alt=""> -->
<div style="max-width: 193px;;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
{{index+1}}.{{ list.contentName }}
</div>
<div style="margin-left: 5px">
<span v-if="contentData.id == list.id" style="color: #387DF7;font-size: 14px;margin-right: 4px;">学习中</span>
<img v-if="contentData.id == list.id && list.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/over.png" alt="">
<img v-if="contentData.id == list.id && list.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/nowNot.png" alt="">
<img v-if="contentData.id == list.id && (list.status != 9&&list.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/ban1.png" alt="">
<img v-if="contentData.id != list.id && list.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/notNew.png" alt="">
<img v-if="contentData.id != list.id && list.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/not.png" alt="">
<img v-if="contentData.id != list.id && (list.status != 9&&list.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/newBan.png" alt="">
</div>
<!-- </div> -->
</div> </div>
</div> </div>
</div> </div>
<!-- 我的笔记 --> </div>
<div class="mynote" v-show="tab == 2"> <!-- 我的笔记 -->
<my-note ref="mynote" :height="controlHeight" @change="noteChange" :data="courseInfo" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo" <div class="mynote" v-show="tab == 2">
:score="courseInfo.score"></my-note> <my-note ref="mynote" :height="controlHeight" @change="noteChange" :data="courseInfo" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo"
</div> :score="courseInfo.score"></my-note>
</div>
</div> </div>
</div> </div>
<div class="course-infobox"> <div class="course-infobox">
<div class="course-info"> <div class="course-info">
<div style="background-color: #fff;"> <div style="background-color: #fff;">
<div class="course-info-tab"> <div class="course-info-tab">
<div @click="coutab(1)" :class="courestab == 1? 'course-info-tab-active' : ''">内容简介<span class=""></span> </div> <div @click="coutab(1)" :class="courestab == 1? 'course-info-tab-active' : ''">内容简介<span class=""></span> </div>
<div @click="coutab(2)" :class="courestab == 2? 'course-info-tab-active' : ''">课程评论<span class=""></span> </div> <div @click="coutab(2)" :class="courestab == 2? 'course-info-tab-active' : ''">课程评论<span class=""></span> </div>
<div @click="coutab(3)" :class="courestab == 3? 'course-info-tab-active' : ''">课程笔记<span class=""></span> </div> <div @click="coutab(3)" :class="courestab == 3? 'course-info-tab-active' : ''">课程笔记<span class=""></span> </div>
</div> </div>
<div v-show="courestab==1" style="margin-left:17px;padding-top: 20px;"> <div v-show="courestab==1" style="margin-left:17px;padding-top: 20px;">
<div style="padding: 30px;"> <div style="padding: 30px;">
<div class="course-info-row"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 目标人群：<div class="course-info-text">{{courseInfo.forUsers}}</div></div> <div class="course-info-row"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 目标人群：<div class="course-info-text">{{courseInfo.forUsers}}</div></div>
<div class="course-info-row"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 课程价值：<div class="course-info-text">{{courseInfo.value}}</div></div> <div class="course-info-row"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 课程价值：<div class="course-info-text">{{courseInfo.value}}</div></div>
<div class="course-info-row"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 详细介绍：<div class="course-info-text" v-html="courseInfo.summary"></div></div> <div class="course-info-row"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 详细介绍：<div class="course-info-text" v-html="courseInfo.summary"></div></div>
</div> </div>
</div> </div>
<div v-show="courestab==2" class="coures-comments" style="margin-left:17px"> <div v-show="courestab==2" class="coures-comments" style="margin-left:17px">
<comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id" :toUsers="toUsers"></comments> <comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id" :toUsers="toUsers"></comments>
</div> </div>
<div v-show="courestab==3" class="coures-note"> <div v-show="courestab==3" class="coures-note">
<note-comments :key="timer" v-if="courseInfo.id && courseInfo.id != ''" :obj-type="6" :obj-id="courseInfo.id" :name="courseInfo.name"></note-comments> <note-comments :key="timer" v-if="courseInfo.id && courseInfo.id != ''" :obj-type="6" :obj-id="courseInfo.id" :name="courseInfo.name"></note-comments>
</div> </div>
</div> </div>
</div> </div>
<div class="course-teacher"> <div class="course-teacher">
<div class="cteacher-top"> <div class="cteacher-top">
<div class="cteacher-top"><img width="100%" style="vertical-align: top;" height="10px" src="../../../public/images/tearch-top.png" alt=""></div> <div class="cteacher-top"><img width="100%" style="vertical-align: top;" height="10px" src="../../../public/images/tearch-top.png" alt=""></div>
<div class="cteacher-top-title">课程讲师</div> <div class="cteacher-top-title">课程讲师</div>
</div> </div>
<div class="cteacher-list"> <div class="cteacher-list">
<div class="teacher" v-for="(item, idx) in teachers" :key="idx"> <div class="teacher" v-for="(item, idx) in teachers" :key="idx">
<div class="teacher-avator" @click="toUserHome(item)" title="点击进入他的主页"> <div class="teacher-avator" @click="toUserHome(item)" title="点击进入他的主页">
<!-- <div class="teacher-text" v-if="item.authorInfo.avatar == ''">{{userAvatarText(item.teacherName)}}</div> --> <!-- <div class="teacher-text" v-if="item.authorInfo.avatar == ''">{{userAvatarText(item.teacherName)}}</div> -->
<div v-if="item.authorInfo.avatar !== ''"> <div v-if="item.authorInfo.avatar !== ''">
<el-avatar :src="fileBaseUrl + item.authorInfo.avatar" shape="circle" :size="50"></el-avatar> <el-avatar :src="fileBaseUrl + item.authorInfo.avatar" shape="circle" :size="50"></el-avatar>
</div> </div>
<div v-else class="teacher-text"> <div v-else class="teacher-text">
<div v-if="item.authorInfo.sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div> <div v-if="item.authorInfo.sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
@@ -287,8 +287,8 @@
</div> </div>
<div class="teacher-info"> <div class="teacher-info">
<div class="teacher-name"> <div class="teacher-name">
<span> {{ item.teacherName }}</span> <span> {{ item.teacherName }}</span>
<!-- <span style="font-size: 12px; color:#666666 ;">( {{cutOrgNamePath(item.authorInfo.orgInfo)}} )</span> --> <!-- <span style="font-size: 12px; color:#666666 ;">( {{cutOrgNamePath(item.authorInfo.orgInfo)}} )</span> -->
</div> </div>
<!-- <div class="teacher-remark" v-html="item.authorInfo.sign"></div> --> <!-- <div class="teacher-remark" v-html="item.authorInfo.sign"></div> -->
<div v-if="item.teacherType === 1 " class="teacher-remark">{{cutOrgNamePath(item.authorInfo.orgInfo)}}</div> <div v-if="item.teacherType === 1 " class="teacher-remark">{{cutOrgNamePath(item.authorInfo.orgInfo)}}</div>
@@ -522,13 +522,13 @@
}, },
noteChange(){ noteChange(){
//视频点定位，直接到播放的视频位置 //视频点定位，直接到播放的视频位置
this.timer = new Date().getTime() this.timer = new Date().getTime()
}, },
//清空追加学习时长事件 //清空追加学习时长事件
cleanAppendTime(){ cleanAppendTime(){
if(this.appendStudyOtherHandle){ if(this.appendStudyOtherHandle){
window.clearTimeout(this.appendStudyOtherHandle); window.clearTimeout(this.appendStudyOtherHandle);
} }
}, },
//非音视频课学习时长的增加,每一分钟保存一次 //非音视频课学习时长的增加,每一分钟保存一次
appendStudyOtherTime() { appendStudyOtherTime() {
@@ -539,46 +539,46 @@
if (!this.contentData.id) { if (!this.contentData.id) {
return; return;
} }
//每一分钟保存一次 //每一分钟保存一次
// 取消阅读的每分钟六十秒的计时，最多是设置的时间或默认时间 // 取消阅读的每分钟六十秒的计时，最多是设置的时间或默认时间
let $this=this; let $this=this;
let startTime = new Date().getTime(); let startTime = new Date().getTime();
this.appendStudyOtherHandle = setTimeout(function() { this.appendStudyOtherHandle = setTimeout(function() {
let endTime = new Date().getTime(); let endTime = new Date().getTime();
let totalTime = Math.round((endTime - startTime) / 1000); let totalTime = Math.round((endTime - startTime) / 1000);
$this.cumulativeDuration += totalTime; $this.cumulativeDuration += totalTime;
if($this.cumulativeDuration <= $this.maxDuration){ if($this.cumulativeDuration <= $this.maxDuration){
//发送时长 //发送时长
$this.sendStudyOtherTime(totalTime); $this.sendStudyOtherTime(totalTime);
//递归调用 //递归调用
$this.appendStudyOtherTime(); $this.appendStudyOtherTime();
}else{ }else{
clearTimeout(this.appendStudyOtherHandle); clearTimeout(this.appendStudyOtherHandle);
$this.cumulativeDuration = 0; $this.cumulativeDuration = 0;
$this.maxDuration = 0; $this.maxDuration = 0;
} }
}, 1000*60); }, 1000*60);
}, },
sendStudyOtherTime(totalTime){ sendStudyOtherTime(totalTime){
//静默处理 //静默处理
apiStat.sendEvent({ apiStat.sendEvent({
"key": "StudyCourseOther",//课程学习的key "key": "StudyCourseOther",//课程学习的key
"title": "非音视频课内容",//事件的标题 "title": "非音视频课内容",//事件的标题
"parameters":"second:" + totalTime,//second:value 本次的学习时长 "parameters":"second:" + totalTime,//second:value 本次的学习时长
"content": "学习课程",//事件的内容 "content": "学习课程",//事件的内容
"objId": this.courseInfo.id,//课程的id "objId": this.courseInfo.id,//课程的id
"objType": "1",//类型 "objType": "1",//类型
"source":"page", "source":"page",
"objInfo": ""+this.courseInfo.name, "objInfo": ""+this.courseInfo.name,
"aid":this.userInfo.aid, //当前登录人的id "aid":this.userInfo.aid, //当前登录人的id
"aname":this.userInfo.name,//当前人的姓名 "aname":this.userInfo.name,//当前人的姓名
"status": 1 //状态 "status": 1 //状态
}).then(rs=>{ }).then(rs=>{
if(rs.status != 200) { if(rs.status != 200) {
console.log(rs.message); console.log(rs.message);
} }
}); });
}, },
//笔记组件触发，播放指定时间 //笔记组件触发，播放指定时间
onPlayVideo(contentId,time){ onPlayVideo(contentId,time){
@@ -587,32 +587,32 @@
console.log(contentId,this.contentData.id,'两个内容id'); console.log(contentId,this.contentData.id,'两个内容id');
let $this=this; let $this=this;
if(this.contentData.id==contentId){ if(this.contentData.id==contentId){
this.onPlayerPause() this.onPlayerPause()
this.contentData.lastStudyTime=time; this.contentData.lastStudyTime=time;
setTimeout(() => { setTimeout(() => {
$this.$refs.myVideoPlayer.startPlay(time); $this.$refs.myVideoPlayer.startPlay(time);
}, 10) }, 10)
console.log('开始播放1'); console.log('开始播放1');
}else{ }else{
//通过contentId //通过contentId
let toResContent=null; let toResContent=null;
this.contentList.forEach(c => { this.contentList.forEach(c => {
if(c.id==contentId){ if(c.id==contentId){
c.lastStudyTime=time; c.lastStudyTime=time;
toResContent=c; toResContent=c;
}
});
if(toResContent){
this.changePlayRes(toResContent);
setTimeout(() => {
$this.$refs.myVideoPlayer.startPlay(time);
}, 10)
console.log('开始播放2');
}else{
this.$message.error('资源已不存在或更换过，已无法定位');
} }
});
if(toResContent){
this.changePlayRes(toResContent);
setTimeout(() => {
$this.$refs.myVideoPlayer.startPlay(time);
}, 10)
console.log('开始播放2');
}else{
this.$message.error('资源已不存在或更换过，已无法定位');
}
} }
this.playerBoxShow = false; this.playerBoxShow = false;
}, },
@@ -690,23 +690,23 @@
}else if(r.contentType==50){ //scorm }else if(r.contentType==50){ //scorm
this.scormUrl=''; this.scormUrl='';
apiCourseFile.detail(r.contentRefId).then(cfrs => { apiCourseFile.detail(r.contentRefId).then(cfrs => {
if(cfrs.status==200){ if(cfrs.status==200){
this.curCFile = cfrs.result; this.curCFile = cfrs.result;
//this.scormUrl=cfrs //this.scormUrl=cfrs
let pars='?mode=normal&r='+Math.random(); let pars='?mode=normal&r='+Math.random();
pars+='&scormId='+this.curCFile.id; pars+='&scormId='+this.curCFile.id;
pars+='&courseId='+this.courseId; pars+='&courseId='+this.courseId;
pars+='&contentId='+r.id; pars+='&contentId='+r.id;
pars+='&studentId='+this.userInfo.aid; pars+='&studentId='+this.userInfo.aid;
pars+='&studentName='+encodeURIComponent(this.userInfo.name); pars+='&studentName='+encodeURIComponent(this.userInfo.name);
pars+='&lmsId='+this.studyId; pars+='&lmsId='+this.studyId;
pars+='&scoId=';//不指定，scorm模块自动根据学习记录定位 pars+='&scoId=';//不指定，scorm模块自动根据学习记录定位
let urlPre=window.location.protocol; let urlPre=window.location.protocol;
let configUrl=process.env.VUE_APP_SCORM_URL; let configUrl=process.env.VUE_APP_SCORM_URL;
configUrl=urlPre+configUrl.substring(configUrl.indexOf(':')+1); configUrl=urlPre+configUrl.substring(configUrl.indexOf(':')+1);
this.scormUrl=configUrl+pars;//播放的首页 this.scormUrl=configUrl+pars;//播放的首页
} }
}); });
}else if (r.contentType == 52) { }else if (r.contentType == 52) {
@@ -737,12 +737,12 @@
setTimeout(() => { setTimeout(() => {
this.isContentTypeTwo = r.contentType this.isContentTypeTwo = r.contentType
$this.isShowTime() $this.isShowTime()
}, 2000); }, 2000);
} }
} }
//以下是学习记录,50是scorm项目 //以下是学习记录,50是scorm项目
if (this.contentData.contentType > 20 && this.contentData.contentType !== 50) { //非视频类的 if (this.contentData.contentType > 20 && this.contentData.contentType !== 50) { //非视频类的
//用户的学习时长，非音视频课程学习,单独的处理 //用户的学习时长，非音视频课程学习,单独的处理
this.isAppendTime = false; this.isAppendTime = false;
this.appendStudyOtherHandle = setTimeout(function() { this.appendStudyOtherHandle = setTimeout(function() {
@@ -752,18 +752,18 @@
// 没有设置默认时长三十分钟， // 没有设置默认时长三十分钟，
$this.maxDuration = r.duration !== 0 ? r.duration * 2 : $this.defaultMaxTime; $this.maxDuration = r.duration !== 0 ? r.duration * 2 : $this.defaultMaxTime;
$this.$store.dispatch("userTrigger", { $this.$store.dispatch("userTrigger", {
"key": "StudyCourseOther",//课程学习的key "key": "StudyCourseOther",//课程学习的key
"title": "非音视频课内容",//事件的标题 "title": "非音视频课内容",//事件的标题
"parameters":"second:15",//second:value 本次的学习时长 "parameters":"second:15",//second:value 本次的学习时长
"content": "学习课程",//事件的内容 "content": "学习课程",//事件的内容
"objId": $this.courseInfo.id,//课程的id "objId": $this.courseInfo.id,//课程的id
"objType": "1",//类型 "objType": "1",//类型
"source":"page", "source":"page",
"objInfo": ""+$this.courseInfo.name, "objInfo": ""+$this.courseInfo.name,
"aid":$this.userInfo.aid, //当前登录人的id "aid":$this.userInfo.aid, //当前登录人的id
"aname":$this.userInfo.name,//当前人的姓名 "aname":$this.userInfo.name,//当前人的姓名
"status": 1 //状态 "status": 1 //状态
}); });
$this.appendStudyOtherTime(); $this.appendStudyOtherTime();
}, 15000); //非音视频课程学习,十五秒后记录 }, 15000); //非音视频课程学习,十五秒后记录
this.isContentType = this.contentData.contentType this.isContentType = this.contentData.contentType
@@ -780,20 +780,20 @@
this.$nextTick(function(){ this.$nextTick(function(){
if (r.contentType == 10) { if (r.contentType == 10) {
console.log('视频处理lastStudyTime',this.contentData.lastStudyTime) console.log('视频处理lastStudyTime',this.contentData.lastStudyTime)
console.log('视频处理progressVideo',this.contentData.progressVideo) console.log('视频处理progressVideo',this.contentData.progressVideo)
this.$refs.myVideoPlayer.updateProgressByClickBar2(this.contentData.lastStudyTime,this.contentData.progressVideo); this.$refs.myVideoPlayer.updateProgressByClickBar2(this.contentData.lastStudyTime,this.contentData.progressVideo);
} }
let h=$this.$refs.coursePlayer.offsetHeight; let h=$this.$refs.coursePlayer.offsetHeight;
//解决获取高度不正的问题 //解决获取高度不正的问题
if(h>400 && h<500){ if(h>400 && h<500){
h=h+40; h=h+40;
}else if(h>500){ }else if(h>500){
h=h+60; h=h+60;
} }
$this.controlHeight=h-95; $this.controlHeight=h-95;
}) })
@@ -935,9 +935,9 @@
this.interactRuning = true; this.interactRuning = true;
let teacherId=''; let teacherId='';
if(this.teachers.length>0){ if(this.teachers.length>0){
teacherId=this.teachers[0].teacherId; teacherId=this.teachers[0].teacherId;
}else{ }else{
teacherId=this.courseInfo.sysCreateAid teacherId=this.courseInfo.sysCreateAid
} }
let postData = { let postData = {
objType: 1, objType: 1,
@@ -1078,7 +1078,7 @@
class: 'catalog-cell-state1' class: 'catalog-cell-state1'
}; };
} }
break; break;
} }
return data; return data;
}, },
@@ -1139,8 +1139,8 @@
var markDiv = div.querySelector("#" + divId); var markDiv = div.querySelector("#" + divId);
console.log("去除水印 ---- gx markDiv ----",markDiv); console.log("去除水印 ---- gx markDiv ----",markDiv);
if (markDiv) { if (markDiv) {
console.log("执行去除水印 ---- gx markDiv ----",markDiv); console.log("执行去除水印 ---- gx markDiv ----",markDiv);
div.removeChild(markDiv); div.removeChild(markDiv);
} }
} }
}, },
@@ -1199,9 +1199,9 @@
var time = localStorage.getItem('videoProgressData') var time = localStorage.getItem('videoProgressData')
var arr = time&&JSON.parse(time) || {} var arr = time&&JSON.parse(time) || {}
if(arr[this.blobId] && this.contentData.progressVideo<arr[this.blobId]) { if(arr[this.blobId] && this.contentData.progressVideo<arr[this.blobId]) {
postData.progressVideo = arr[this.blobId] postData.progressVideo = arr[this.blobId]
// postData.contentId = this.contentData.id // postData.contentId = this.contentData.id
// postData.courseId = this.contentData.courseId // postData.courseId = this.contentData.courseId
} }
} }
//console.log('记录播放时间') //console.log('记录播放时间')
@@ -1259,9 +1259,9 @@
var time = localStorage.getItem('videoProgressData') var time = localStorage.getItem('videoProgressData')
var arr = time&&JSON.parse(time) || {} var arr = time&&JSON.parse(time) || {}
if(arr[this.blobId] && this.contentData.progressVideo<arr[this.blobId]) { if(arr[this.blobId] && this.contentData.progressVideo<arr[this.blobId]) {
postData.progressVideo = arr[this.blobId] postData.progressVideo = arr[this.blobId]
// postData.contentId = this.contentData.id // postData.contentId = this.contentData.id
// postData.courseId = this.contentData.courseId // postData.courseId = this.contentData.courseId
} }
} }
//console.log('记录播放时间') //console.log('记录播放时间')
@@ -1309,11 +1309,11 @@
} }
//设置必须的字段 //设置必须的字段
if(rs.result.contents.length==1){ if(rs.result.contents.length==1){
$this.tab=2; $this.tab=2;
//console.log('内容只有一个'); //console.log('内容只有一个');
} }
if(!rs.result.isCrowd){ if(!rs.result.isCrowd){
$this.$message.error('您没有查看该课程的权限'); $this.$message.error('您没有查看该课程的权限');
} }
// 是否播放 // 是否播放
this.isCrowd = rs.result.isCrowd this.isCrowd = rs.result.isCrowd
@@ -1514,37 +1514,37 @@
progress(val) { progress(val) {
const progressValue = parseFloat(val) * 100; const progressValue = parseFloat(val) * 100;
this.sendEventProgress = Number(progressValue.toFixed(2)); this.sendEventProgress = Number(progressValue.toFixed(2));
}, },
saveStudyDuration(duration) { //保存本地存储的学习时长 saveStudyDuration(duration) { //保存本地存储的学习时长
if (duration > 0) { if (duration > 0) {
//发送用户学习事件 //发送用户学习事件
//console.log('保存到后台学习时长='+duration); //console.log('保存到后台学习时长='+duration);
let postData={ let postData={
"key": "StudyCourse",//课程学习的key "key": "StudyCourse",//课程学习的key
"title": "学习课程",//事件的标题 "title": "学习课程",//事件的标题
"parameters":"second:"+duration,//second:value,total:value 本次的学习时长 "parameters":"second:"+duration,//second:value,total:value 本次的学习时长
"content": "学习课程【"+this.courseInfo.name+"】",//事件的内容 "content": "学习课程【"+this.courseInfo.name+"】",//事件的内容
"objId": this.courseInfo.id,//课程的id "objId": this.courseInfo.id,//课程的id
"objType": "1",//类型 "objType": "1",//类型
"source":"page", "source":"page",
"objInfo": ""+this.courseInfo.name, "objInfo": ""+this.courseInfo.name,
"aid":this.userInfo.aid, //当前登录人的id "aid":this.userInfo.aid, //当前登录人的id
"aname":this.userInfo.name,//当前人的姓名 "aname":this.userInfo.name,//当前人的姓名
"status": 1, //状态 "status": 1, //状态
"contentId": this.contentData.id, "contentId": this.contentData.id,
}
if(this.resType == 10){
postData.progress = this.sendEventProgress;
}
//静默处理
apiStat.sendEvent(postData).then(rs=>{
if(rs.status == 200) {
// this.appendStartTime = new Date();//重新计时
// studyUtil.clearStudyDuration(); //清除本地存储
} else {
console.log(rs.message);
} }
if(this.resType == 10){ });
postData.progress = this.sendEventProgress;
}
//静默处理
apiStat.sendEvent(postData).then(rs=>{
if(rs.status == 200) {
// this.appendStartTime = new Date();//重新计时
// studyUtil.clearStudyDuration(); //清除本地存储
} else {
console.log(rs.message);
}
});
// let postAppendData = { // let postAppendData = {
// id: this.appentId, // id: this.appentId,
// studyId: this.studyId, // studyId: this.studyId,
@@ -1566,13 +1566,13 @@
}, },
//结束追加学习时长 //结束追加学习时长
stopStudyTime(){ stopStudyTime(){
//console.log('停止追加学习时长'); //console.log('停止追加学习时长');
this.isAppendTime=false; this.isAppendTime=false;
//暂停让他为空 从新计时 //暂停让他为空 从新计时
this.appendStartTime = null this.appendStartTime = null
if (this.appendHandle != null) { if (this.appendHandle != null) {
window.clearTimeout(this.appendHandle); window.clearTimeout(this.appendHandle);
} }
}, },
appendStudyTime() { appendStudyTime() {
// 暂停的时候重新从十五秒开始计时 // 暂停的时候重新从十五秒开始计时
@@ -1594,11 +1594,11 @@
this.appendHandle && window.clearTimeout(this.appendHandle); this.appendHandle && window.clearTimeout(this.appendHandle);
//启动下次追加学习时长 //启动下次追加学习时长
this.appendHandle = setTimeout(() => { this.appendHandle = setTimeout(() => {
let endTime = new Date().getTime(); let endTime = new Date().getTime();
this.appentInterval = 60 this.appentInterval = 60
let totalTime = Math.round((endTime - this.appendStartTime) / 1000); let totalTime = Math.round((endTime - this.appendStartTime) / 1000);
this.appendStudyTime(); this.appendStudyTime();
this.saveStudyDuration(totalTime) this.saveStudyDuration(totalTime)
}, this.appentInterval * 1000); }, this.appentInterval * 1000);
}, },
@@ -1664,55 +1664,55 @@
}, },
handleAudioTimeUpdate(currentTime) { handleAudioTimeUpdate(currentTime) {
// if(this.contentStudysLength.length == 0){ // if(this.contentStudysLength.length == 0){
let params = { let params = {
studyId: this.studyId, //学习id, studyId: this.studyId, //学习id,
courseId: this.courseId, //课程id, courseId: this.courseId, //课程id,
contentId: this.contentData.id, //内容id, contentId: this.contentData.id, //内容id,
contentType: this.contentData.contentType, contentType: this.contentData.contentType,
contentName: this.contentData.contentName, //内容名称 contentName: this.contentData.contentName, //内容名称
progress: 1, progress: 1,
status: 2, status: 2,
contentTotal: this.totalContent contentTotal: this.totalContent
}; };
if(currentTime > 2 && this.trueFalse){ if(currentTime > 2 && this.trueFalse){
apiStudy.studyContent(params).then(()=>{ apiStudy.studyContent(params).then(()=>{
if(this.contentData.status<2){ if(this.contentData.status<2){
this.contentData.status = 2; this.contentData.status = 2;
} }
}) })
this.trueFalse = false this.trueFalse = false
} }
}, },
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-icon-arrow-down{ ::v-deep .el-icon-arrow-down{
color: #000; color: #000;
font-weight: 900; font-weight: 900;
font-size: 16px; font-size: 16px;
} }
.el-menu, .el-menu,
.el-menu-item, .el-menu-item,
.el-submenu__title { .el-submenu__title {
background-color: transparent !important; /* 设置背景色为透明，以移除默认的背景颜色变化 */ background-color: transparent !important; /* 设置背景色为透明，以移除默认的背景颜色变化 */
color: inherit !important; /* 确保文字颜色不变，如果需要的话 */ color: inherit !important; /* 确保文字颜色不变，如果需要的话 */
} }
/* 取消选中效果 */ /* 取消选中效果 */
.el-menu-item.is-active, .el-menu-item.is-active,
.el-submenu__title.is-active { .el-submenu__title.is-active {
background-color: transparent !important; /* 移除选中时的背景色 */ background-color: transparent !important; /* 移除选中时的背景色 */
color: inherit !important; /* 保持文字颜色与未选中时一致，如果需要的话 */ color: inherit !important; /* 保持文字颜色与未选中时一致，如果需要的话 */
} }
/* 如果有特定的 hover 样式，也可以取消 */ /* 如果有特定的 hover 样式，也可以取消 */
.el-menu-item:hover, .el-menu-item:hover,
.el-submenu__title:hover { .el-submenu__title:hover {
background-color: transparent !important; /* 移除鼠标悬停时的背景色变化 */ background-color: transparent !important; /* 移除鼠标悬停时的背景色变化 */
color: inherit !important; /* 保持文字颜色不变 */ color: inherit !important; /* 保持文字颜色不变 */
} }
//内容块样式定义 //内容块样式定义
.course-content { .course-content {
min-height: 745px; min-height: 745px;
@@ -1734,7 +1734,7 @@
// overflow: auto; // overflow: auto;
} }
.course-control{ //内容控制区域 .course-control{ //内容控制区域
width: 420px; width: 420px;
} }
} }
.course-infobox { .course-infobox {
@@ -1840,7 +1840,7 @@
padding: 10px 30px 30px 30px; padding: 10px 30px 30px 30px;
} }
//以下是未整理的样式，上面的整理之后的样式 //以下是未整理的样式，上面的整理之后的样式
.coures-note { .coures-note {
min-height: 500px; min-height: 500px;
padding-left: 17px; padding-left: 17px;
@@ -2219,9 +2219,9 @@
width: 60px !important; width: 60px !important;
height: 60px !important; height: 60px !important;
border-radius: 50%; border-radius: 50%;
img{ img{
width: 100% !important; width: 100% !important;
} }
} }
.teacher-text { .teacher-text {
width: 68px; width: 68px;