mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-20 08:16:44 +08:00
1210 lines
43 KiB
Vue
1210 lines
43 KiB
Vue
<template>
|
||
<div>
|
||
<portal-header current="course"></portal-header>
|
||
<div class="portal-content xcontent">
|
||
<!-- <el-row class="nav">课程列表 > 课程详情</el-row> -->
|
||
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadname">
|
||
<el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
|
||
<el-breadcrumb-item>课程预览</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
<el-row :gutter="10">
|
||
<el-col :span="24">
|
||
<el-card :body-style="{ padding: '0px', 'min-height': '600px' }">
|
||
<el-row class="detail">
|
||
<el-col :span="18">
|
||
<el-tabs v-model="activeName" @tab-click="changeTab">
|
||
<el-tab-pane label="课件" name="courseware">
|
||
<div>
|
||
<div class="courseware-div" v-if="enrollStutas == 1" style="max-height: 500px;width: 100%;">
|
||
<course-image :course="courseInfo" class="courseware-img" ></course-image>
|
||
<!-- <el-button type="warning" @click="enroll" class="courseware-enroll-btn">报名后即可开始学习！</el-button> -->
|
||
</div>
|
||
<div class="courseware-div" v-else>
|
||
<div v-if="coursewareInfo.content.contentType == 10" style="position: relative;">
|
||
<videoPlayer :src="fileBaseUrl+coursewareInfo.content.content" style="width: 100%;"
|
||
@onPlayerPlaying="onPlayerPlaying"
|
||
@onPlayerPlay="onPlayerPlay"
|
||
:initTime="videoPlayingTime"
|
||
@onPlayerPause="onPlayerPause"
|
||
@onPlayerEnded="onPlayerEnded">
|
||
</videoPlayer>
|
||
</div>
|
||
<div v-if="coursewareInfo.content.contentType == 20">
|
||
<div class="con-audio">
|
||
<div class="con-audio-player">
|
||
<audioPlayer :url="fileBaseUrl+coursewareInfo.content.content"
|
||
:name="coursewareInfo.content.contentName"
|
||
@onPlaying="audioPlaying"
|
||
@onPlay="audioPlay"
|
||
@onPause="audioPause"
|
||
@onPlayEnd="audioEnd">
|
||
</audioPlayer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="coursewareInfo.content.contentType == 30">
|
||
<img :src="fileBaseUrl+coursewareInfo.content.content" alt="图片">
|
||
</div>
|
||
<div v-if="coursewareInfo.content.contentType == 40">
|
||
<pdfPreview :autoScroll="true" v-if="coursewareInfo.content.contentType == 40" :filePath="fileBaseUrl+coursewareInfo.content.content"></pdfPreview>
|
||
</div>
|
||
<div v-if="coursewareInfo.content.contentType == 41">
|
||
<div class="couretitle" style="padding: 20px;" v-html="coursewareInfo.content.content"></div>
|
||
</div>
|
||
<div v-if="coursewareInfo.content.contentType == 52">
|
||
<hyper-link :content="coursewareInfo.content"></hyper-link>
|
||
<!-- <div class="hyper-link" v-if="!showiframe">
|
||
<div class="hyper-link-row">课程内容是外部连接，请选择打开方式</div>
|
||
<div class="hyper-link-row">{{coursewareInfo.content.content}}</div>
|
||
<div class="hyper-link-row">
|
||
<el-button @click="showiframe = true" type="warning">本页面打开</el-button>
|
||
<el-button @click="widthOpen(coursewareInfo.content.content)" type="primary">新窗口打开</el-button>
|
||
</div>
|
||
</div>
|
||
<div v-if="showiframe">
|
||
<iframe :src="contentData.content" style="width: 100%;border:0px;min-height: 473px;" frameborder="0"></iframe>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="作业" name="homework">
|
||
<div>
|
||
<div v-if="homeworkInfo.has" class="homework-div">
|
||
<div>
|
||
<div class="homework-title">作业名称</div>
|
||
<div class="homework-content">{{homeworkInfo.info.name}}</div>
|
||
</div>
|
||
<div>
|
||
<div class="homework-title">内容</div>
|
||
<div class="homework-content">{{homeworkInfo.info.content}}</div>
|
||
</div>
|
||
<div v-if="homeworkInfo.info.file">
|
||
<div class="homework-title">附件</div>
|
||
<div class="homework-content" style="color: blue">
|
||
<a :href="fileBaseUrl+homeworkInfo.info.file" target="_blank">下载作业附件</a></div>
|
||
</div>
|
||
<div>
|
||
<div class="homework-title">截止时间</div>
|
||
<div class="homework-content" :style="{color:homeworkInfo.close? 'red':''}">{{homeworkInfo.info.deadTime}}</div>
|
||
</div>
|
||
<div v-show="!homeworkInfo.close">
|
||
<div v-if="homeworkInfo.info.submitMode>1">
|
||
<div class="homework-title">作业内容</div>
|
||
<div class="homework-content"><textarea :rows="5" placeholder="请输入作业内容(限255个字)" v-model="homeworkInfo.answer" style="width: 100%"></textarea></div>
|
||
</div>
|
||
<div v-if="homeworkInfo.info.submitMode==1 || homeworkInfo.info.submitMode==3">
|
||
<div class="homework-title">上传作业</div>
|
||
<div class="homework-content">
|
||
|
||
<!-- <div v-else >
|
||
<el-button type="primary">选择文件并上传</el-button>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<!-- <div style="text-align: center;padding-bottom: 10px;">
|
||
<el-button type="primary" @click="submitHomework()">{{homeworkInfo.records.length>0?'重新提交':'提交'}}</el-button>
|
||
</div> -->
|
||
</div>
|
||
<!-- <div>作业提交记录 -->
|
||
<!-- <el-table :data="homeworkInfo.records" style="width: 100%">
|
||
<el-table-column prop="endTime" label="提交时间" align="center"></el-table-column>
|
||
<el-table-column fixed="right" label="操作" width="100" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="small">查看作业</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table> -->
|
||
<!-- </div> -->
|
||
</div>
|
||
<div v-else style="text-align: center;padding-top: 20px;color: red;">此课程无作业</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="考试" name="test">
|
||
<div>
|
||
<div v-if="examInfo.has" class="test-div">
|
||
<div v-if="!testStart">
|
||
<div>
|
||
<div class="test-info">考试时长：{{examInfo.info.testDuration}}分钟    及格线：{{examInfo.info.passLine}}%
|
||
<!--     尝试次数：{{examInfo.info.times}} -->
|
||
</div>
|
||
<!-- <div class="test-info"> -->
|
||
<!-- 评分方式：{{examInfo.info.scoringType ===1 ? '最高一次':'最后一次'}} -->
|
||
<!--     及格线：{{examInfo.info.passLine}}%</div> -->
|
||
</div>
|
||
<!-- <div v-if="examInfo.allowSubmit" style="text-align: center; margin-bottom: 15px">
|
||
<el-button type="primary" @click="startTest()">开始考试</el-button>
|
||
</div> -->
|
||
<!-- <el-table :data="examInfo.records" style="width: 100%">
|
||
<el-table-column prop="lastTime" label="完成时间" align="center"></el-table-column>
|
||
<el-table-column prop="testDuration" label="用时(秒)" width="180" align="center"></el-table-column>
|
||
<el-table-column prop="score" label="成绩" width="180" align="center"></el-table-column>
|
||
<el-table-column fixed="right" label="操作" width="100" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button @click="showExamAnswer(scope.row)" type="text" size="small">查看试卷</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table> -->
|
||
</div>
|
||
<!-- <div v-else> -->
|
||
<div>
|
||
<div class="test-info" style="font-weight: 700;">共{{examInfo.paper && examInfo.paper.items && examInfo.paper.items.length}}题    </div>
|
||
<div v-for="(item, index) in examInfo.paper.items" :key="item.id">
|
||
<!-- <div v-show="show == index"> -->
|
||
<div class="test-info">{{index + 1}}.[{{testType(item.type)}}]{{item.content}}</div>
|
||
<div class="test-info" v-if="item.type != 102">
|
||
<el-radio-group v-model="item.userAnswer">
|
||
<el-radio v-for="(it,indcc) in item.options" :key="indcc" :label="it.id">{{numberToLetter(indcc+1)}}.{{it.content}}</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<div class="test-info" v-else>
|
||
<el-checkbox v-for="(it,indcc) in item.options" :key="indcc" v-model="it.isCheck" :label="it.id">{{numberToLetter(indcc+1)}}.{{it.content}}</el-checkbox>
|
||
</div>
|
||
</div>
|
||
<!-- <el-button v-if="show == index && show<examInfo.paper.items.length-1" @click="show +=1">下一题</el-button> -->
|
||
<!-- </div> -->
|
||
<!-- </div> -->
|
||
<!-- <div style="text-align: center; margin-bottom: 15px"><el-button type="primary" @click="submitTest()">提交</el-button></div> -->
|
||
</div>
|
||
</div>
|
||
<div v-else style="text-align: center;padding-top: 20px;color: red;">此课程无考试内容</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="评估" name="assess">
|
||
<div>
|
||
<div class="assess-div">
|
||
<div>
|
||
<div class="assess-info">课程满意度计算方式：{{assessInfo.info.countType}}；</div>
|
||
<div class="assess-info">满意度：{{assessInfo.info.countText}}</div>
|
||
<hr />
|
||
<div v-if="assessInfo.info.items">
|
||
<div v-for="(ass,assIdx) in assessInfo.info.items" :key="assIdx">
|
||
<div class="assess-info">{{assIdx+1}}.{{ass.question}}</div>
|
||
<div v-if="ass.qType==1" class="assess-info" style="height: 20px">
|
||
<span style="float: left">{{ass.minText}}</span>
|
||
<span style="float: right">{{ass.maxText}}</span>
|
||
</div>
|
||
<div v-if="ass.qType==1" class="assess-info">
|
||
<el-radio-group v-model="ass.answer" class="assessRadio1">
|
||
<el-radio-button :label="1">1</el-radio-button>
|
||
<el-radio-button :label="2">2</el-radio-button>
|
||
<el-radio-button :label="3">3</el-radio-button>
|
||
<el-radio-button :label="4">4</el-radio-button>
|
||
<el-radio-button :label="5">5</el-radio-button>
|
||
<el-radio-button :label="6">6</el-radio-button>
|
||
<el-radio-button :label="7">7</el-radio-button>
|
||
<el-radio-button :label="8">8</el-radio-button>
|
||
<el-radio-button :label="9">9</el-radio-button>
|
||
<el-radio-button :label="10">10</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<div v-if="ass.qType==9" class="assess-info">
|
||
<textarea :rows="4" v-model="ass.answer" style="width: 100%" placeholder=""></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- <div v-else style="text-align: center;padding-top: 20px;color: red;">此课程无评估</div> -->
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<div style="display: flex;justify-content: space-between;padding: 10px;">
|
||
<div class="score" style="display: flex;">
|
||
<el-rate disabled v-model="courseInfo.score" :max="5" :allow-half="true" show-score text-color="#ff9900" score-template="{value}"></el-rate>
|
||
<div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;">
|
||
<el-popover :disabled="scoreInfo.has" placement="top" width="300" trigger="hover">
|
||
<div style="text-align:center;line-height:50px;padding:20px 0px">
|
||
<el-rate v-model="scoreInfo.score"></el-rate>
|
||
<div style="padding-top:30px">
|
||
<el-button @click="addScore">提交评分</el-button>
|
||
</div>
|
||
</div>
|
||
<el-tag class="ref-score" v-if="enrollStutas > 1 " slot="reference">去评分</el-tag>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;justify-content: flex-end;cursor: pointer;padding-top: 5px;">
|
||
<div>
|
||
<img class="icon-small" v-if="isPraise" :src="require('@/assets/images/icon/praise-active.png')">
|
||
<img class="icon-small" v-else :src="require('@/assets/images/icon/praise.png')"> 赞
|
||
</div>
|
||
<div style="margin-left: 15px;">
|
||
<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')"> 踩
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6" class="cont">
|
||
<interactBar :readonly="enrollStutas==1" :type="1" :data="courseInfo" :views="false" :comments="false"></interactBar>
|
||
<div class="title">{{courseInfo.name}}</div>
|
||
<div class="study-count"><span class="num">{{courseInfo.studys}}人学习</span></div>
|
||
<div class="label"><el-tag class="label-item" effect="plain">录播课</el-tag></div>
|
||
<div class="label" v-if="tags.length >0">
|
||
<el-tag class="label-item" effect="plain" v-for="(item, index) in tags" :key="index">{{item}}</el-tag>
|
||
<!-- <el-tag class="label-item" effect="plain">中心长</el-tag> -->
|
||
</div>
|
||
<div class="label" style="padding-top: 135px;">
|
||
<el-rate style="display: inline-block;" disabled v-model="courseInfo.score" score-template="{value}" show-score text-color="#ff8e00"></el-rate>
|
||
<span style="font-size: 14px;color: #f7ba2a;">分</span>
|
||
</div>
|
||
<!-- <div class="keyword"><el-tag class="label-item" effect="plain">质量</el-tag></div> -->
|
||
<!--资源归属是一共有三级，这里只显示三级-->
|
||
<!-- <div class="study-count">资源归属：{{courseInfo.resOwner}}</div> -->
|
||
<!-- <div class="btn-div" style="padding-top: 20px;">
|
||
<el-button type="primary" v-if="enrollStutas == 1" @click="enroll">立即报名</el-button>
|
||
<el-button type="primary" v-else>已报名</el-button>
|
||
</div> -->
|
||
<!-- <div class="qr-code" style="padding-top: 50px;">
|
||
<img :src="`${webBaseUrl}/temp/qr-code.png`" />
|
||
<div>手机扫码观看</div>
|
||
</div> -->
|
||
</el-col>
|
||
<!-- <img class="detail-img" v-show="!showQrcode" @click="showQrcode = true" src="../../../assets/images/qr.png" alt="" srcset="">
|
||
<div class="qr-code" v-show="showQrcode" style="padding-top: 10px;">
|
||
<div id="qrcode" ref="qrcode" class="qrcode" ></div>
|
||
<div>手机扫码观看</div>
|
||
</div> -->
|
||
<!-- 11 -->
|
||
</el-row>
|
||
</el-card>
|
||
<el-row :gutter="10">
|
||
<el-col :span="18">
|
||
<div style="background-color: #FFFFFF;padding: 20px;">
|
||
<el-tabs v-model="bootTabActive">
|
||
<el-tab-pane label="课程介绍" name="info">
|
||
<div class="content"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 目标人群</div>
|
||
<div class="content-text" >{{courseInfo.forUsers}}</div>
|
||
<div class="content"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 课程价值</div>
|
||
<div class="content-text">{{courseInfo.value}}</div>
|
||
<div class="content"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 详细介绍</div>
|
||
<div class="content-text" v-html="courseInfo.summary"></div>
|
||
</el-tab-pane>
|
||
<!-- <el-tab-pane :label="'评论('+commentsTtoal+')'" name="commnets">
|
||
<comments v-if="courseInfo.id!=''" :readonly="enrollStutas==1" :showTop="false" @writeTotal="showCommentsTotal" @success="addCommentSuccess" :obj-type="1" :to-users="toUsers" :obj-id="courseInfo.id" :obj-title="courseInfo.name"></comments>
|
||
</el-tab-pane> -->
|
||
</el-tabs>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card :body-style="{ padding: '0px' }" class="teachers">
|
||
<div class="top">授课讲师</div>
|
||
<div>
|
||
<div class="teacher" v-for="(item, idx) in teachers" :key="idx" >
|
||
<div class="teacher-avator">
|
||
<el-avatar v-if="item.avatar !== ''" :src="item.avatar" shape="square" :size="50"></el-avatar>
|
||
<div v-else class="uavatar">
|
||
<div v-if="item.sex == 1 "><img src="../../../../public/images/Avatarman.png" alt=""></div>
|
||
<div v-else><img src="../../../../public/images/Avatarwoman.png" alt=""></div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="teacher-info">
|
||
<div class="teacher-name">{{ item.teacherName }}</div>
|
||
<div class="teacher-remark" v-html="item.remark"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<el-dialog :visible.sync="examInfo.detailShow" title="查询答卷详细信息" custom-class="g-dialog">
|
||
<div>
|
||
<!--答卷信息-->
|
||
<div v-for="(ditem,didx) in examInfo.detailItems" :key="didx" class="paper-item">
|
||
<div class="paper-item-q">{{didx +1}}.【{{testType(ditem.type)}}】{{ditem.content}}</div>
|
||
<div class="paper-item-opts" style="padding-left: 20px;">
|
||
<div v-if="ditem.type==101 || ditem.type==103">
|
||
<el-radio-group v-model="ditem.userAnswer" size="medium">
|
||
<el-radio v-for="(opt,optIdx) in ditem.options" :key="optIdx" :label="opt.id"><span>{{numberToLetter(optIdx+1)}}.{{opt.content}}</span></el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<div v-if="ditem.type==102">
|
||
<!-- <el-checkbox-group v-model="ditem.userAnswer" size="medium"> -->
|
||
<el-checkbox v-for="(opt,optIdx2) in ditem.options" :key="optIdx2" v-model="opt.isCheck" :label="opt.id">{{numberToLetter(optIdx2+1)}}.{{opt.content}}</el-checkbox>
|
||
<!-- </el-checkbox-group> -->
|
||
</div>
|
||
</div>
|
||
<div class="paper-item-answer">
|
||
<span>正确答案：</span>
|
||
<span style="margin-left: 10px;" v-for="(opt,oidx) in ditem.options" :key="oidx" v-if="opt.answer">{{numberToLetter(oidx+1)}}</span>
|
||
<!-- <span v-for="(opt,oidx) in ditem.options" :key="oidx" v-if="opt.answer && (ditem.type==101 || ditem.type==103)"> {{opt.id != ditem.userAnswer? '回答错误':'回答正确'}}</span> -->
|
||
<span v-if="correctJudgment(ditem)" style="padding-left: 20px;color:green"><i class="el-icon-circle-check"></i>回答正确</span>
|
||
<span v-else style="padding-left: 20px;color:red"><i class="el-icon-circle-close"></i>回答错误</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer"><el-button type="primary" @click="examInfo.detailShow = false">关 闭</el-button></span>
|
||
</el-dialog>
|
||
<portal-footer></portal-footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import hyperLink from '@/components/Course/hyperLink.vue';
|
||
import QRCode from 'qrcodejs2';
|
||
import { mapGetters,mapActions} from 'vuex';
|
||
import portalHeader from "@/components/PortalHeader.vue";
|
||
import comments from "@/components/Portal/comments.vue";
|
||
import portalFooter from "@/components/PortalFooter.vue";
|
||
import interactBar from "@/components/Portal/interactBar.vue";
|
||
import apiCourse from "@/api/modules/course.js";
|
||
import apiCourseFile from "@/api/modules/courseFile.js";
|
||
import apiCoursePortal from "@/api/modules/coursePortal.js";
|
||
import apiUser from '@/api/system/user.js';
|
||
import {
|
||
formatDate,
|
||
resListMap,
|
||
toScore,
|
||
courseType,
|
||
getType,
|
||
numberToLetter,
|
||
correctJudgment
|
||
} from "@/utils/tools.js";
|
||
import apicourseStudy from "@/api/modules/courseStudy.js";
|
||
import apiCourseGrade from "@/api/modules/courseGrade.js";
|
||
import apiPraises from "@/api/modules/praises.js";
|
||
import apiTrample from "@/api/modules/trample.js";
|
||
import FileUpload from "@/components/FileUpload/index.vue";
|
||
// import pdf from "vue-pdf";
|
||
import pdfPreview from "@/components/PdfPreview/index.vue";
|
||
// import {resOwnerIndexName} from '@/utils/type.js';
|
||
import { setTimeout } from "timers";
|
||
import videoPlayer from '@/components/VideoPlayer/index.vue';
|
||
import audioPlayer from '@/components/AudioPlayer/index.vue';
|
||
import courseImage from "@/components/Course/courseImage.vue";
|
||
export default {
|
||
name: "micro",
|
||
components: {
|
||
portalHeader,
|
||
portalFooter,
|
||
interactBar,
|
||
FileUpload,
|
||
comments,
|
||
pdfPreview,
|
||
videoPlayer,
|
||
audioPlayer,
|
||
courseImage,
|
||
hyperLink
|
||
},
|
||
computed: {
|
||
...mapGetters(['resOwnerMap','sysTypeMap']),
|
||
},
|
||
data() {
|
||
return {
|
||
tearsex:null,
|
||
showQrcode:false,
|
||
showiframe: false,//用于超连接的
|
||
toScore,
|
||
correctJudgment:correctJudgment,
|
||
detailItems: [],
|
||
show:0,
|
||
studyId: "",
|
||
tags: [],
|
||
numberToLetter: numberToLetter,
|
||
// resOwnerListMap: resOwnerIndexName,
|
||
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||
getType: getType,
|
||
courseType,
|
||
activeName: "courseware",
|
||
courseInfo: {
|
||
id: "",
|
||
type: 10,
|
||
name: "",
|
||
favorites: 0,
|
||
comments: 0,
|
||
shares: 0,
|
||
praises: 0,
|
||
views: 0
|
||
},
|
||
toUsers:[],//可以@的用户列表
|
||
teachers: [],
|
||
totalContent: 4, //微课默认是4项
|
||
coursewareInfo: {
|
||
content: {},
|
||
finish: false,
|
||
studyItemId: ""
|
||
},
|
||
homeworkInfo: {
|
||
has: false,
|
||
content: {},
|
||
info: {},
|
||
studyItemId: "",
|
||
filePath: "",
|
||
answer: "",
|
||
close: false,
|
||
records: [] //作业记录
|
||
},
|
||
examInfo: {
|
||
has: false,
|
||
content: {},
|
||
info: {},
|
||
paper: [],
|
||
studyItemId: "",
|
||
records: [], //考试记录
|
||
allowSubmit: true, //是否允许考试，尝试次数达到后不能再考试
|
||
startTime: "",
|
||
detailShow: false,
|
||
detailItems: []
|
||
},
|
||
assessInfo: {
|
||
has: false,
|
||
allowSubmit: true,
|
||
content: {},
|
||
info: {},
|
||
studyItemId: ""
|
||
},
|
||
enrollStutas: 1, // 1 :未报名，2:已报名
|
||
dialogVisible: false,
|
||
testStart: false,
|
||
courseRate: 5,
|
||
videoPlayingTime:0,//当前视频的耿入的时间点
|
||
appendStartTime: null, //记录追加的开始时间
|
||
scoreInfo: {
|
||
score: 5,
|
||
has: false
|
||
},
|
||
isPraise: false,
|
||
isTrample: false,
|
||
bootTabActive:'info',
|
||
commentsTtoal:0,
|
||
isAppendTime:true,
|
||
};
|
||
},
|
||
mounted() {
|
||
|
||
this.loadResOwners();
|
||
let id = this.$route.query.id;
|
||
this.courseInfo.id = id;
|
||
this.showQrimage();
|
||
let $this = this;
|
||
//页面只支取一次，所以先直接写在这里面
|
||
apiCoursePortal.detail(id,true).then(rs => {
|
||
if (rs.status == 200) {
|
||
console.log(rs,'2')
|
||
this.courseInfo = rs.result.course;
|
||
// this.courseInfo.score = this.toScore(rs.result.course.score);
|
||
if(rs.result.course.tags != '') this.tags = rs.result.course.tags.split(",");
|
||
this.teachers = rs.result.teachers;
|
||
if(rs.result.teachers && rs.result.teachers.length > 0){
|
||
let userIds=[];
|
||
let ctoUsers=[];
|
||
rs.result.teachers.forEach(item=>{
|
||
item.avatar = "";
|
||
item.sex = null;
|
||
userIds.push(item.teacherId);
|
||
ctoUsers.push({aid:item.teacherId,name:item.teacherName,sex:item.sex});
|
||
})
|
||
this.toUsers=ctoUsers;
|
||
this.loadAuthorInfo(rs.result.teachers,userIds)
|
||
}
|
||
this.totalContent = rs.result.contents.length; //计算总内容数
|
||
if (!rs.result.course.resOwner3) {
|
||
this.courseInfo.resOwner = this.resOwnerName(
|
||
rs.result.course.resOwner2
|
||
);
|
||
} else {
|
||
this.courseInfo.resOwner = this.resOwnerName(
|
||
rs.result.course.resOwner3
|
||
);
|
||
}
|
||
rs.result.contents.forEach(con => {
|
||
if (con.sortIndex == 1) {
|
||
$this.coursewareInfo.content = con;
|
||
if ($this.coursewareInfo.content.contentType == 40) {
|
||
//需要读取pdf的路径
|
||
if($this.coursewareInfo.content.content!='' && $this.coursewareInfo.content.content.indexOf('.pdf')==-1){
|
||
apiCourseFile.detail($this.coursewareInfo.content.contentRefId).then(cfrs=>{
|
||
if(cfrs.status==200){
|
||
$this.coursewareInfo.content.content=cfrs.result.previewFilePath;
|
||
}else{
|
||
$this.$message.error('加载pdf课件文件失败');
|
||
}
|
||
});
|
||
}
|
||
//let url = this.fileBaseUrl + r.content;
|
||
}
|
||
// //加载课件的学习情况
|
||
} else if (con.sortIndex == 2) {
|
||
$this.homeworkInfo.content = con;
|
||
$this.homeworkInfo.has = true;
|
||
//查询作业信息，并显示
|
||
$this.loadHomeworkInfo();
|
||
} else if (con.sortIndex == 3) {
|
||
$this.examInfo.has = true;
|
||
$this.examInfo.content = con;
|
||
//查询考试信息并显示
|
||
$this.loadExamInfo();
|
||
} else if (con.sortIndex == 4) {
|
||
$this.assessInfo.has = true;
|
||
$this.assessInfo.content = con;
|
||
//转化文本为json内容
|
||
$this.loadAssessInfo();
|
||
}
|
||
});
|
||
|
||
} else {
|
||
this.$message.error(rs.message);
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
showQrimage(row){
|
||
this.qrcode = this.webBaseUrl+'/mobile/pages/resource/microDetail?id='+this.courseInfo.id;
|
||
this.$nextTick(() => {
|
||
//this.crateQrcode();
|
||
});
|
||
},
|
||
crateQrcode(){
|
||
this.qr = new QRCode('qrcode', {
|
||
width: 150,
|
||
height: 150, // 高度
|
||
text: this.qrcode // 二维码内容
|
||
});
|
||
},
|
||
...mapActions({
|
||
getResOwnerTree:'resOwner/getResOwnerTree',
|
||
loadResOwners:'resOwner/loadResOwners',
|
||
getSysTypeTree:'sysType/getSysTypeTree',
|
||
loadSysTypes:'sysType/loadSysTypes'
|
||
}),
|
||
resOwnerName(code){
|
||
if(code==''){return '';}
|
||
return this.resOwnerMap.get(code);
|
||
},
|
||
widthOpen(url) {
|
||
window.open(this.webBaseUrl+url,'_blank');
|
||
},
|
||
showCommentsTotal(total){
|
||
this.commentsTtoal=total;
|
||
},
|
||
addCommentSuccess(comm){
|
||
this.commentsTtoal++;
|
||
},
|
||
onPlayerPlay(){
|
||
//console.log("开始播放");
|
||
},
|
||
onPlayerPause(){
|
||
//console.log("暂停");
|
||
},
|
||
onPlayerEnded(){
|
||
//console.log("播放结束");
|
||
this.isAppendTime=true;//开启追加学习时间
|
||
},
|
||
onPlayerPlaying(itme){
|
||
this.isAppendTime=false;//禁止追加学习时间
|
||
//console.log("当前播放11"+itme);
|
||
let intTime=parseInt(itme);
|
||
this.videoPlayingTime=intTime;
|
||
},
|
||
audioPlaying(item){
|
||
//console.log("当前播放22"+item);
|
||
},
|
||
audioPlay(){
|
||
//console.log("开始播放");
|
||
},
|
||
audioPause(){
|
||
//console.log("暂停");
|
||
},
|
||
audioEnd(){
|
||
//console.log("播放结束");
|
||
},
|
||
changeTab(tab) {
|
||
let $this = this;
|
||
if (tab.name == "homework") {
|
||
//检查作业是否已过截止时间
|
||
if (this.homeworkInfo.info.deadTime != "") {
|
||
var d = new Date(this.homeworkInfo.info.deadTime);
|
||
var now = new Date();
|
||
if (now.getTime() > d.getTime()) {
|
||
this.homeworkInfo.close = true;
|
||
} else {
|
||
this.homeworkInfo.close = false;
|
||
}
|
||
}
|
||
if (this.homeworkInfo.records.length == 0) {
|
||
let params = {
|
||
studyId: this.studyId,
|
||
contentId: this.homeworkInfo.content.id
|
||
};
|
||
|
||
}
|
||
} else if (tab.name == "test") {
|
||
if (this.examInfo.records.length == 0) {
|
||
let params = {
|
||
studyId: this.studyId,
|
||
contentId: this.examInfo.content.id
|
||
};
|
||
}
|
||
} else if (tab.name == "assess") {
|
||
//console.log('加载评估信息');,评估只会有一个，所以主直接取
|
||
let params = {
|
||
studyId: this.studyId,
|
||
contentId: this.assessInfo.content.id
|
||
};
|
||
} else {
|
||
|
||
}
|
||
},
|
||
saveStudyInfo() {
|
||
//记录课件学习信息
|
||
if (this.activeName != "courseware") {
|
||
//只有在课件页面停留超过5秒才会记录
|
||
return;
|
||
}
|
||
if (this.coursewareInfo.finish) {
|
||
return;
|
||
}
|
||
|
||
},
|
||
startTest() {
|
||
this.examInfo.startTime = new Date();
|
||
this.testStart = true;
|
||
},
|
||
// 提交考试
|
||
submitTest() {
|
||
|
||
},
|
||
showExamAnswer(item) {
|
||
//显示试卷的答卷信息
|
||
this.examInfo.detailShow=true;
|
||
|
||
},
|
||
testType(type) {
|
||
//此方法移到tools中
|
||
let name = "";
|
||
switch (type) {
|
||
case 101:
|
||
name = "单选";
|
||
break;
|
||
case 102:
|
||
name = "多选";
|
||
break;
|
||
case 103:
|
||
name = "判断";
|
||
break;
|
||
}
|
||
return name;
|
||
},
|
||
//作业上传
|
||
uploadHomeworkFile(res) {
|
||
this.homeworkInfo.filePath = res.result.filePath;
|
||
},
|
||
removeHomeworkFile() {
|
||
|
||
},
|
||
submitHomework() {
|
||
},
|
||
loadHomeworkInfo() {
|
||
apiCourse.getHomework(this.homeworkInfo.content.id).then(res => {
|
||
if (res.status == 200) {
|
||
this.homeworkInfo.info = res.result;
|
||
} else if (res.status == 404) {
|
||
//没有找到作业信息
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
//
|
||
},
|
||
loadExamInfo() {
|
||
apiCourse.getExam(this.examInfo.content.id).then(res => {
|
||
if (res.status == 200) {
|
||
this.examInfo.info = res.result;
|
||
this.examInfo.paper = JSON.parse(res.result.paperContent);
|
||
} else if (res.status == 404) {
|
||
//没有找到考试信息
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
loadAssessInfo() {
|
||
//评估保存失败
|
||
if (
|
||
this.assessInfo.content.content != "" &&
|
||
this.assessInfo.content.content.length > 10
|
||
) {
|
||
let json = JSON.parse(this.assessInfo.content.content);
|
||
if (json) {
|
||
json.items.forEach(item => {
|
||
if (item.qType == 1) {
|
||
item.answer = 0;
|
||
} else {
|
||
item.answer = "";
|
||
}
|
||
});
|
||
}
|
||
//console.log(json)
|
||
this.assessInfo.info = json;
|
||
}
|
||
},
|
||
enroll() {
|
||
let pamars = {
|
||
courseId: this.courseInfo.id,
|
||
courseName: this.courseInfo.name,
|
||
courseType: this.courseInfo.type,
|
||
signType: 1,
|
||
signInfo: ""
|
||
};
|
||
this.enrollStutas = 2;
|
||
},
|
||
loadScorePraiseAndTrample() {
|
||
|
||
},
|
||
addScore() {
|
||
|
||
},
|
||
praiseContent() {
|
||
|
||
},
|
||
treadContent() {
|
||
|
||
},
|
||
loadAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
|
||
if(ids.length==0){
|
||
return;
|
||
}
|
||
apiUser.getByIds(ids).then(res=>{
|
||
if(res.status==200){
|
||
// console.log(res)
|
||
list.forEach((item,index)=>{
|
||
res.result.some(author=>{
|
||
if(author.aid==item.teacherId){
|
||
item.sex = author.sex;
|
||
// this.tearsex = item.sex;
|
||
console.log(this.tearsex)
|
||
console.log(author.sex,item.sex,'sexs')
|
||
|
||
// console.log(item.sex)
|
||
if(author.avatar){
|
||
item.avatar=this.fileBaseUrl + author.avatar;
|
||
|
||
}
|
||
|
||
|
||
return true;
|
||
}else{
|
||
return false;
|
||
}
|
||
})
|
||
});
|
||
}else{
|
||
//console.log('加载课程信息失败:'+res.error);
|
||
//this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.couretitle{
|
||
word-break: break-all;
|
||
}
|
||
.ref-score{
|
||
background: #e4e4e4;
|
||
width: 64px;
|
||
height: 32px;
|
||
border-radius: 17px;
|
||
// opacity: 0.24;
|
||
color: #000;
|
||
font-size: 14px;
|
||
border: none;
|
||
}
|
||
.portal-content ::v-deep .el-rate__icon{
|
||
font-size: 24px !important;
|
||
}
|
||
|
||
.content{
|
||
img{
|
||
width: 18px;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
.content-text{
|
||
padding-left: 30px;
|
||
min-height: 50px;
|
||
font-size: 14px;
|
||
word-break:break-all;
|
||
color: #666666;
|
||
}
|
||
::v-deep .el-tabs__item.is-active {
|
||
color: #409EFF;
|
||
font-size: 20px;
|
||
}
|
||
.icon-small{
|
||
width: 20px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
vertical-align: middle;
|
||
}
|
||
.con-audio{
|
||
padding: 50px;
|
||
text-align: center;
|
||
.con-audio-title{
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
.con-audio-player{
|
||
padding: 20px 100px;
|
||
}
|
||
}
|
||
.hyper-link{
|
||
padding-left:20px;
|
||
text-align: center;
|
||
padding-top: 100px;
|
||
.hyper-link-row{
|
||
padding: 20px;
|
||
}
|
||
}
|
||
.red{
|
||
background: red;
|
||
background-image: linear-gradient(to bottom right, rgb(245, 30, 30) , rgb(241, 227, 21));
|
||
}
|
||
.paper-item-answer{
|
||
line-height: 30px;
|
||
border-bottom: 1px solid #ccc;
|
||
margin-bottom: 10px;
|
||
}
|
||
.breadname {
|
||
margin-bottom: 15px;
|
||
font-size: 18px;
|
||
}
|
||
.paper-item-opts{
|
||
.el-radio {
|
||
display: block;
|
||
}
|
||
.el-checkbox {
|
||
display: block;
|
||
}
|
||
}
|
||
.detail {
|
||
background-color: #fff;
|
||
padding: 5px 20px 10px 20px;
|
||
.detail-img{
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
.qr-code {
|
||
margin-top: 5px;
|
||
margin-bottom: 10px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 46px;
|
||
// img {
|
||
// width: 120px;
|
||
// height: 120px;
|
||
// }
|
||
div {
|
||
width: 120px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.courseware-div {
|
||
border: 1px solid;
|
||
min-height: 500px;
|
||
|
||
// width: 876px;
|
||
// font-size: 30px;
|
||
text-align: center;
|
||
// line-height: 100px;
|
||
position: relative;
|
||
.courseware-img {
|
||
vertical-align: middle;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.courseware-enroll-btn {
|
||
position: absolute;
|
||
width: 270px;
|
||
height: 68px;
|
||
font-size: 22px;
|
||
left: 400px;
|
||
top: 225px;
|
||
opacity: 0.3;
|
||
background: #000000;
|
||
border-radius: 21px;
|
||
}
|
||
.video-div {
|
||
position: absolute;
|
||
z-index: 999999999;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(101, 101, 101, 0.9);
|
||
.good {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 200px;
|
||
div {
|
||
line-height: 1;
|
||
margin: 0 15px;
|
||
.svg-icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
div:nth-of-type(2) {
|
||
.svg-icon {
|
||
transform: scaleX(-1);
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
// margin-bottom: 50px;
|
||
// line-height: 20px;
|
||
// .el-link{
|
||
// font-size: 30px;
|
||
// color: #70a5f4;
|
||
// margin: 0 30px;
|
||
// }
|
||
}
|
||
.score {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
.homework-div {
|
||
border: 1px solid #bcbcbc;
|
||
min-height: 500px;
|
||
padding: 20px;
|
||
font-size: 14px;
|
||
.homework-title {
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
}
|
||
.homework-content {
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.test-div {
|
||
border: 1px solid #bcbcbc;
|
||
min-height: 500px;
|
||
padding: 20px;
|
||
font-size: 16px;
|
||
|
||
.test-info {
|
||
margin-bottom: 10px;
|
||
.el-radio {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.assess-div {
|
||
border: 1px solid #bcbcbc;
|
||
min-height: 500px;
|
||
padding: 20px;
|
||
font-size: 14px;
|
||
.assess-info {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.cont {
|
||
padding: 25px;
|
||
height: 540px;
|
||
.title {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
line-height: 50px;
|
||
word-break:break-all;
|
||
}
|
||
.course-info-tools-btns {
|
||
::v-deep .interact-bar-btns {
|
||
justify-content: flex-start !important;
|
||
}
|
||
.course-info-tools-btn {
|
||
margin: 0 15px 0 0;
|
||
}
|
||
margin-bottom: 15px;
|
||
}
|
||
.label {
|
||
margin-bottom: 15px;
|
||
.label-item {
|
||
margin-right: 5px;
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
.keyword {
|
||
margin-bottom: 15px;
|
||
.label-item {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
.study-count {
|
||
padding: 20px 0;
|
||
.num {
|
||
color: #444444;
|
||
font-size: 16px;
|
||
|
||
}
|
||
margin-bottom: 15px;
|
||
}
|
||
.btn-div {
|
||
margin-top: 30px;
|
||
}
|
||
.qr-code {
|
||
margin-top: 5px;
|
||
margin-bottom: 10px;
|
||
img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
div {
|
||
width: 120px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.view-summary {
|
||
position: absolute;
|
||
margin-bottom: 10px;
|
||
margin-left: 18px;
|
||
}
|
||
}
|
||
}
|
||
.summary-div {
|
||
.summary-content {
|
||
font-size: 14px;
|
||
line-height: 25px;
|
||
}
|
||
}
|
||
.info {
|
||
background-color: #fff;
|
||
margin-top: 20px;
|
||
padding: 0 10px;
|
||
.content {
|
||
color: #666;
|
||
line-height: 25px;
|
||
text-indent: 2em;
|
||
padding: 5px 10px;
|
||
}
|
||
.pinglun-div {
|
||
background-color: #fff;
|
||
padding: 0px 20px 10px 20px;
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
line-height: 50px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
.tip {
|
||
color: #666;
|
||
font-size: 12px;
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
.submit-div {
|
||
margin: 15px 0;
|
||
}
|
||
.bottom {
|
||
text-align: right;
|
||
}
|
||
|
||
.data {
|
||
margin-top: 10px;
|
||
background-color: #fff;
|
||
padding: 5px 20px 10px 20px;
|
||
.data-item {
|
||
border-bottom: 1px solid #dfdfdf;
|
||
margin-top: 10px;
|
||
.top {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
span {
|
||
font-size: 14px;
|
||
color: #666;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
.text {
|
||
margin: 15px 0 5px 0;
|
||
padding-left: 40px;
|
||
line-height: 35px;
|
||
}
|
||
.huifu {
|
||
padding-left: 40px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
.result-div {
|
||
padding-left: 40px;
|
||
padding-top: 10px;
|
||
.top {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
.up-div {
|
||
padding: 0 15px;
|
||
.up-btn {
|
||
padding: 8px 20px;
|
||
color: #000;
|
||
}
|
||
}
|
||
img {
|
||
margin-right: 10px;
|
||
width: 30px;
|
||
border: 1px solid #eee;
|
||
border-radius: 50%;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.teacher {
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
border-top: 1px solid #e7e7e7;
|
||
padding: 10px 0px;
|
||
.teacher-avator {
|
||
.uavatar{
|
||
div{
|
||
img{
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.teacher-info {
|
||
flex: 1;
|
||
.teacher-name {
|
||
padding: 0px 5px 10px 10px;
|
||
}
|
||
.teacher-remark {
|
||
padding: 0px 5px 0 10px;
|
||
font-size: 12px;
|
||
color: #797979;
|
||
}
|
||
}
|
||
}
|
||
.teachers {
|
||
background-color: #fff;
|
||
margin-top: 10px;
|
||
padding: 5px 15px 5px 10px;
|
||
.top {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
line-height: 50px;
|
||
}
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.assessRadio1 /deep/ .el-radio-button__inner {
|
||
padding-left: 36px;
|
||
padding-right: 36px;
|
||
}
|
||
</style>
|