|
|
@@ -1,27 +1,88 @@
|
|
|
<template>
|
|
|
- <div class="pb_content">
|
|
|
- <div class="pb_content_body">
|
|
|
- <div class="body_student">
|
|
|
- <div class="student_head">
|
|
|
- <div class="box_course">
|
|
|
- <div class="wheel">
|
|
|
- <div class="workd_media">
|
|
|
- <!-- <el-image
|
|
|
+ <div class="pb_content">
|
|
|
+ <div class="pb_content_body" style="display: flex">
|
|
|
+ <div style="width: 20%; margin-right: 10px; background: #fff">
|
|
|
+ <div class="courseTitle">
|
|
|
+ {{ courseDetail.title }}
|
|
|
+ </div>
|
|
|
+ <div class="ml">目录</div>
|
|
|
+ <div
|
|
|
+ class="blue_box_one"
|
|
|
+ v-for="(item, index) in chapInfoList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div>第{{ index + 1 }}阶段</div>
|
|
|
+ <div>{{ item.dyName }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="body_student">
|
|
|
+ <div class="study_top">
|
|
|
+ <div class="checkbox">
|
|
|
+ <div
|
|
|
+ class="check"
|
|
|
+ :class="{ checked: type == 1 }"
|
|
|
+ @click="type = 1"
|
|
|
+ >
|
|
|
+ <div v-if="type == 1">
|
|
|
+ <img src="../assets/icon/videoActive.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div v-else><img src="../assets/icon/video.png" alt="" /></div>
|
|
|
+ 视频
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="check"
|
|
|
+ :class="{ checked: type == 2 }"
|
|
|
+ @click="type = 2"
|
|
|
+ >
|
|
|
+ <div v-if="type == 2">
|
|
|
+ <img src="../assets/icon/navActive.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div v-else><img src="../assets/icon/nav.png" alt="" /></div>
|
|
|
+ 文档资料
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="check"
|
|
|
+ :class="{ checked: type == 3 }"
|
|
|
+ @click="type = 3"
|
|
|
+ >
|
|
|
+ <div v-if="type == 3">
|
|
|
+ <img src="../assets/icon/wordActive.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div v-else><img src="../assets/icon/word.png" alt="" /></div>
|
|
|
+ 附件
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="check"
|
|
|
+ :class="{ checked: type == 4 }"
|
|
|
+ @click="type = 4"
|
|
|
+ >
|
|
|
+ <div v-if="type == 4">
|
|
|
+ <img src="../assets/icon/workActive.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div v-else><img src="../assets/icon/work.png" alt="" /></div>
|
|
|
+ 作业与测验
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="student_head" v-if="type == 1">
|
|
|
+ <div class="box_course">
|
|
|
+ <div class="wheel">
|
|
|
+ <div class="workd_media">
|
|
|
+ <!-- <el-image
|
|
|
style="width: 100%; height: 300px"
|
|
|
:src="require('../../assets/tu4.png')"
|
|
|
></el-image> -->
|
|
|
- <video-player
|
|
|
- class="video-player vjs-custom-skin"
|
|
|
- ref="videoPlayer"
|
|
|
- :playsinline="true"
|
|
|
- :options="playerO"
|
|
|
- @play="onPlayerPlay($event)"
|
|
|
- style="width: 50%;
|
|
|
- height: 100%;
|
|
|
- margin: 20px auto;"
|
|
|
- ></video-player>
|
|
|
- </div>
|
|
|
- <!-- <div class="cd_content_steps">
|
|
|
+ <video-player
|
|
|
+ class="video-player vjs-custom-skin"
|
|
|
+ ref="videoPlayer"
|
|
|
+ :playsinline="true"
|
|
|
+ :options="playerO"
|
|
|
+ @play="onPlayerPlay($event)"
|
|
|
+ style="width: 65%; height: 100%; margin: 20px auto"
|
|
|
+ ></video-player>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="cd_content_steps">
|
|
|
<div
|
|
|
class="cd_steps_box"
|
|
|
v-for="(media, index) in vedio"
|
|
|
@@ -29,167 +90,169 @@
|
|
|
@click="switchVideo(media, index)"
|
|
|
>
|
|
|
<i :class="{ active: index < 1 }"></i> -->
|
|
|
- <!-- <i
|
|
|
+ <!-- <i
|
|
|
:class="{
|
|
|
active: playerOptions.sources[0].src == media,
|
|
|
}"
|
|
|
></i>
|
|
|
<span>视频{{ index + 1 }}</span> -->
|
|
|
- <!-- </div>
|
|
|
+ <!-- </div>
|
|
|
</div> -->
|
|
|
- <!-- <img src="../assets/sp2.png" alt="" /> -->
|
|
|
- </div>
|
|
|
- <div style="font-size: 18px; margin: 15px">
|
|
|
- {{ chapInfo.dyName }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="student_body">
|
|
|
- <div class="study_top">
|
|
|
- <div class="checkbox">
|
|
|
- <div
|
|
|
- class="check"
|
|
|
- :class="{ checked: type == 1 }"
|
|
|
- @click="type = 1"
|
|
|
- >
|
|
|
- 文档资料
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="check"
|
|
|
- :class="{ checked: type == 2 }"
|
|
|
- @click="type = 2"
|
|
|
- >
|
|
|
- 视频
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="check"
|
|
|
- :class="{ checked: type == 3 }"
|
|
|
- @click="type = 3"
|
|
|
- >
|
|
|
- 附件
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div @click="openAddWork" class="btn">提交实践作业</div>
|
|
|
- </div>
|
|
|
- <div class="project_box" v-if="type == 1">
|
|
|
- <div class="detail_content_top">
|
|
|
- <div class="detail_title">{{ chapInfo.dyName }}</div>
|
|
|
- <div class="detail_time">{{ courseDetail.time }}</div>
|
|
|
- </div>
|
|
|
- <div class="detail_content" v-html="courseDetail.template"></div>
|
|
|
- </div>
|
|
|
- <div class="project_box" v-if="type == 2">
|
|
|
- <div class="filebox">
|
|
|
- <div class="media" v-for="(media, index) in vedio" :key="index">
|
|
|
- <img
|
|
|
- :src="
|
|
|
- media.cover != null && media.cover != ''
|
|
|
- ? JSON.parse(media.cover).length > 0
|
|
|
- ? JSON.parse(media.cover)[0].url
|
|
|
- : mr
|
|
|
- : mr
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <div class="title">{{ media.name }}</div>
|
|
|
- <div class="btn" @click="lookVedio(media.url)">点击播放</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="project_box" v-if="type == 3">
|
|
|
- <div class="filebox">
|
|
|
- <div
|
|
|
- class="file"
|
|
|
- v-for="(f, index) in file"
|
|
|
- :key="index"
|
|
|
- @click="downFile(index)"
|
|
|
- >
|
|
|
- <img :src="require('../assets/file.png')" alt="" />
|
|
|
- <div>{{ f.name }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-dialog
|
|
|
- title="提交实践作业"
|
|
|
- :visible.sync="dialogVisible"
|
|
|
- :append-to-body="true"
|
|
|
- width="500px"
|
|
|
- :before-close="handleClose"
|
|
|
- class="dialog_change"
|
|
|
- >
|
|
|
- <div class="first">
|
|
|
- <div>作业名称:</div>
|
|
|
- <div>{{ chapInfo.dyName }}</div>
|
|
|
- </div>
|
|
|
- <div style="font-size: 20px; margin-bottom: 10px">上传作业</div>
|
|
|
- <el-input
|
|
|
- type="textarea"
|
|
|
- resize="none"
|
|
|
- rows="7"
|
|
|
- placeholder="输入文字描述..."
|
|
|
- v-model="studyJuri[0].content"
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- <div class="marginT">
|
|
|
- <div>上传图片</div>
|
|
|
- <div
|
|
|
- class="chapter_add"
|
|
|
- v-if="studyJuri[0].cover.length == 0"
|
|
|
- @click="addImg($event)"
|
|
|
- >
|
|
|
- <div class="up_photo">
|
|
|
- <img src="../assets/photo.png" alt="" />
|
|
|
- </div>
|
|
|
- <input
|
|
|
- type="file"
|
|
|
- accept="image/png,image/gif,image/jpeg"
|
|
|
- style="display: none"
|
|
|
- @change="beforeUpload1($event, 1)"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="chapter_add" v-else>
|
|
|
- <img
|
|
|
- :src="
|
|
|
- studyJuri[0].cover[0].url != null &&
|
|
|
- studyJuri[0].cover[0].url != ''
|
|
|
- ? studyJuri[0].cover[0].url
|
|
|
- : mr
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <span>{{ studyJuri[0].cover[0].name }}</span>
|
|
|
- <div class="deleteWord" @click="clean(1)">
|
|
|
- <img src="../assets/icon/delete.png" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="marginT">
|
|
|
- <div>上传视频</div>
|
|
|
- <div
|
|
|
- class="chapter_add"
|
|
|
- v-if="studyJuri[0].upVedio.length == 0"
|
|
|
- @click="addImg($event)"
|
|
|
- >
|
|
|
- <div class="up_photo">
|
|
|
- <img src="../assets/vidio.png" alt="" />
|
|
|
- </div>
|
|
|
- <input
|
|
|
- type="file"
|
|
|
- accept="video/mp4,video/quicktime,video/x-msvideo"
|
|
|
- style="display: none"
|
|
|
- @change="beforeUpload2($event, 2)"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="chapter_add" v-else>
|
|
|
- <img :src="mr" alt="" />
|
|
|
- <span>{{ studyJuri[0].upVedio[0].name }}</span>
|
|
|
- <div class="deleteWord" @click="clean(2)">
|
|
|
- <img src="../assets/icon/delete.png" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="marginT">
|
|
|
+ <!-- <img src="../assets/sp2.png" alt="" /> -->
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 18px; margin: 15px">
|
|
|
+ {{ chapInfo.dyName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="student_body">
|
|
|
+ <div class="videoTop">
|
|
|
+ <div v-if="type == 1">视频列表</div>
|
|
|
+ <div v-if="type == 3">{{ chapInfo.dyName }}</div>
|
|
|
+ <div v-else></div>
|
|
|
+ <div
|
|
|
+ @click="openAddWork"
|
|
|
+ class="upbtn"
|
|
|
+ v-if="type == 1 || type == 2"
|
|
|
+ >
|
|
|
+ 提交实践作业
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="project_box" v-if="type == 2">
|
|
|
+ <div class="detail_content_top">
|
|
|
+ <div class="detail_title">{{ chapInfo.dyName }}</div>
|
|
|
+ <div class="detail_time">{{ courseDetail.time }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="detail_content" v-html="courseDetail.template"></div>
|
|
|
+ </div>
|
|
|
+ <div class="project_box" v-if="type == 1">
|
|
|
+ <div class="filebox">
|
|
|
+ <div class="media" v-for="(media, index) in vedio" :key="index">
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ media.cover != null && media.cover != ''
|
|
|
+ ? JSON.parse(media.cover).length > 0
|
|
|
+ ? JSON.parse(media.cover)[0].url
|
|
|
+ : mr
|
|
|
+ : mr
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div class="title">{{ media.name }}</div>
|
|
|
+ <div class="btn" @click="lookVedio(media.url)">点击播放</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="project_box" v-if="type == 3">
|
|
|
+ <div class="filebox">
|
|
|
+ <div
|
|
|
+ class="file"
|
|
|
+ v-for="(f, index) in file"
|
|
|
+ :key="index"
|
|
|
+ @click="downFile(index)"
|
|
|
+ >
|
|
|
+ <img :src="require('../assets/file.png')" alt="" />
|
|
|
+ <div>{{ f.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="upFile" v-if="type == 3 || type == 4">提交</div>
|
|
|
+ </div>
|
|
|
+ <div class="project_box" v-if="type == 4">
|
|
|
+ <div class="filebox">
|
|
|
+ 暂无数据
|
|
|
+ <!-- <div
|
|
|
+ class="file"
|
|
|
+ v-for="(f, index) in file"
|
|
|
+ :key="index"
|
|
|
+ @click="downFile(index)"
|
|
|
+ >
|
|
|
+ <img :src="require('../assets/file.png')" alt="" />
|
|
|
+ <div>{{ f.name }}</div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="upFile" v-if="type == 3 || type == 4">提交</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ title="提交实践作业"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="500px"
|
|
|
+ :before-close="handleClose"
|
|
|
+ class="dialog_change"
|
|
|
+ >
|
|
|
+ <div class="first">
|
|
|
+ <div>作业名称:</div>
|
|
|
+ <div>{{ chapInfo.dyName }}</div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 20px; margin-bottom: 10px">上传作业</div>
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ resize="none"
|
|
|
+ rows="7"
|
|
|
+ placeholder="输入文字描述..."
|
|
|
+ v-model="studyJuri[0].content"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <div class="marginT">
|
|
|
+ <div>上传图片</div>
|
|
|
+ <div
|
|
|
+ class="chapter_add"
|
|
|
+ v-if="studyJuri[0].cover.length == 0"
|
|
|
+ @click="addImg($event)"
|
|
|
+ >
|
|
|
+ <div class="up_photo">
|
|
|
+ <img src="../assets/photo.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="image/png,image/gif,image/jpeg"
|
|
|
+ style="display: none"
|
|
|
+ @change="beforeUpload1($event, 1)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="chapter_add" v-else>
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ studyJuri[0].cover[0].url != null &&
|
|
|
+ studyJuri[0].cover[0].url != ''
|
|
|
+ ? studyJuri[0].cover[0].url
|
|
|
+ : mr
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span>{{ studyJuri[0].cover[0].name }}</span>
|
|
|
+ <div class="deleteWord" @click="clean(1)">
|
|
|
+ <img src="../assets/icon/delete.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="marginT">
|
|
|
+ <div>上传视频</div>
|
|
|
+ <div
|
|
|
+ class="chapter_add"
|
|
|
+ v-if="studyJuri[0].upVedio.length == 0"
|
|
|
+ @click="addImg($event)"
|
|
|
+ >
|
|
|
+ <div class="up_photo">
|
|
|
+ <img src="../assets/vidio.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="video/mp4,video/quicktime,video/x-msvideo"
|
|
|
+ style="display: none"
|
|
|
+ @change="beforeUpload2($event, 2)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="chapter_add" v-else>
|
|
|
+ <img :src="mr" alt="" />
|
|
|
+ <span>{{ studyJuri[0].upVedio[0].name }}</span>
|
|
|
+ <div class="deleteWord" @click="clean(2)">
|
|
|
+ <img src="../assets/icon/delete.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="marginT">
|
|
|
<div>附件上传</div>
|
|
|
<div
|
|
|
class="chapter_add"
|
|
|
@@ -218,613 +281,678 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
- <div class="upload_send" @click="addWork">提交</div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="upload_send" @click="addWork">提交</div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import "../common/aws-sdk-2.235.1.min.js";
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- dialogVisible: false,
|
|
|
- id: this.$route.query.courseId,
|
|
|
- userid: this.$route.query.userid,
|
|
|
- courseType: this.$route.query.type,
|
|
|
- type: 1,
|
|
|
- vedio: [],
|
|
|
- file: [],
|
|
|
- rateList: {
|
|
|
- ca: 0,
|
|
|
- },
|
|
|
- rateParams: [],
|
|
|
- colors: ["#000", "#000", "#000"],
|
|
|
- studyJuri: [
|
|
|
- {
|
|
|
- content: "",
|
|
|
- cover: [],
|
|
|
- upVedio: [],
|
|
|
- upFile: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- mr: require("../assets/tu4.png"),
|
|
|
- courseDetail: {},
|
|
|
- chapInfo: [],
|
|
|
- playerOptions: {
|
|
|
- playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
|
|
|
- autoplay: false, //如果true,浏览器准备好时开始回放。
|
|
|
- muted: false, // 默认情况下将会消除任何音频。
|
|
|
- loop: false, // 导致视频一结束就重新开始。
|
|
|
- preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
|
|
- language: "zh-CN",
|
|
|
- aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
|
|
- fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
|
|
- sources: [
|
|
|
- {
|
|
|
- type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目 || "video/ogg"|| "video/webm"
|
|
|
- src: "", //url地址require("../../assets/media/aaa.mp4")
|
|
|
- },
|
|
|
- ],
|
|
|
- // poster: require("../../assets/tu31.png"), //你的封面地址
|
|
|
- // poster: dataRes.imgUrl, //你的封面地址
|
|
|
- notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
- controlBar: {
|
|
|
- timeDivider: true, //当前时间和持续时间的分隔符
|
|
|
- durationDisplay: true, //显示持续时间
|
|
|
- remainingTimeDisplay: false, //是否显示剩余时间功能
|
|
|
- fullscreenToggle: true, //全屏按钮
|
|
|
- },
|
|
|
- },
|
|
|
- playerO: {},
|
|
|
- noneBtnImg: false,
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- clean(type) {
|
|
|
- if (type == 1) {
|
|
|
- this.studyJuri[0].cover.splice(0, 1);
|
|
|
- } else if (type == 2) {
|
|
|
- this.studyJuri[0].upVedio.splice(0, 1);
|
|
|
- } else {
|
|
|
- this.studyJuri[0].upFile.splice(0, 1);
|
|
|
- }
|
|
|
- },
|
|
|
- handleClose(done) {
|
|
|
- done();
|
|
|
- // this.studyJuri[0].push([
|
|
|
- // {
|
|
|
- // content: "",
|
|
|
- // cover: [],
|
|
|
- // upVedio: [],
|
|
|
- // upFile: [],
|
|
|
- // },
|
|
|
- // ]);
|
|
|
- },
|
|
|
- imgChange(file, fileList, type) {
|
|
|
- if (type == 1) {
|
|
|
- var _tmp = this.studyJuri[0].cover;
|
|
|
- } else if (type == 2) {
|
|
|
- var _tmp = this.studyJuri[0].upVedio;
|
|
|
- } else {
|
|
|
- var _tmp = this.studyJuri[0].upFile;
|
|
|
- }
|
|
|
- this.noneBtnImg = _tmp.length >= 1;
|
|
|
- },
|
|
|
- addImg(e) {
|
|
|
- var el = e.currentTarget;
|
|
|
- el.getElementsByTagName("input")[0].click();
|
|
|
- },
|
|
|
- beforeUpload1(event, type) {
|
|
|
- var file = event.target.files[0];
|
|
|
- var credentials = {
|
|
|
- accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
- secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
- }; //秘钥形式的登录上传
|
|
|
- window.AWS.config.update(credentials);
|
|
|
- window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+import "../common/aws-sdk-2.235.1.min.js";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ id: this.$route.query.courseId,
|
|
|
+ userid: this.$route.query.userid,
|
|
|
+ courseType: this.$route.query.type,
|
|
|
+ type: 1,
|
|
|
+ vedio: [],
|
|
|
+ file: [],
|
|
|
+ rateList: {
|
|
|
+ ca: 0,
|
|
|
+ },
|
|
|
+ rateParams: [],
|
|
|
+ colors: ["#000", "#000", "#000"],
|
|
|
+ studyJuri: [
|
|
|
+ {
|
|
|
+ content: "",
|
|
|
+ cover: [],
|
|
|
+ upVedio: [],
|
|
|
+ upFile: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ mr: require("../assets/tu4.png"),
|
|
|
+ courseDetail: {},
|
|
|
+ chapInfo: [],
|
|
|
+ chapInfoList: [],
|
|
|
+ playerOptions: {
|
|
|
+ playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
|
|
|
+ autoplay: false, //如果true,浏览器准备好时开始回放。
|
|
|
+ muted: false, // 默认情况下将会消除任何音频。
|
|
|
+ loop: false, // 导致视频一结束就重新开始。
|
|
|
+ preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
|
|
+ language: "zh-CN",
|
|
|
+ aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
|
|
+ fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
|
|
+ sources: [
|
|
|
+ {
|
|
|
+ type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目 || "video/ogg"|| "video/webm"
|
|
|
+ src: "", //url地址require("../../assets/media/aaa.mp4")
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // poster: require("../../assets/tu31.png"), //你的封面地址
|
|
|
+ // poster: dataRes.imgUrl, //你的封面地址
|
|
|
+ notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
+ controlBar: {
|
|
|
+ timeDivider: true, //当前时间和持续时间的分隔符
|
|
|
+ durationDisplay: true, //显示持续时间
|
|
|
+ remainingTimeDisplay: false, //是否显示剩余时间功能
|
|
|
+ fullscreenToggle: true, //全屏按钮
|
|
|
+ },
|
|
|
+ },
|
|
|
+ playerO: {},
|
|
|
+ noneBtnImg: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clean(type) {
|
|
|
+ if (type == 1) {
|
|
|
+ this.studyJuri[0].cover.splice(0, 1);
|
|
|
+ } else if (type == 2) {
|
|
|
+ this.studyJuri[0].upVedio.splice(0, 1);
|
|
|
+ } else {
|
|
|
+ this.studyJuri[0].upFile.splice(0, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ done();
|
|
|
+ // this.studyJuri[0].push([
|
|
|
+ // {
|
|
|
+ // content: "",
|
|
|
+ // cover: [],
|
|
|
+ // upVedio: [],
|
|
|
+ // upFile: [],
|
|
|
+ // },
|
|
|
+ // ]);
|
|
|
+ },
|
|
|
+ imgChange(file, fileList, type) {
|
|
|
+ if (type == 1) {
|
|
|
+ var _tmp = this.studyJuri[0].cover;
|
|
|
+ } else if (type == 2) {
|
|
|
+ var _tmp = this.studyJuri[0].upVedio;
|
|
|
+ } else {
|
|
|
+ var _tmp = this.studyJuri[0].upFile;
|
|
|
+ }
|
|
|
+ this.noneBtnImg = _tmp.length >= 1;
|
|
|
+ },
|
|
|
+ addImg(e) {
|
|
|
+ var el = e.currentTarget;
|
|
|
+ el.getElementsByTagName("input")[0].click();
|
|
|
+ },
|
|
|
+ beforeUpload1(event, type) {
|
|
|
+ var file = event.target.files[0];
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
|
|
|
- var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
- var _this = this;
|
|
|
+ var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
+ var _this = this;
|
|
|
|
|
|
- if (file) {
|
|
|
- var params = {
|
|
|
- Key:
|
|
|
- file.name.split(".")[0] +
|
|
|
- new Date().getTime() +
|
|
|
- "." +
|
|
|
- file.name.split(".")[1],
|
|
|
- ContentType: file.type,
|
|
|
- Body: file,
|
|
|
- "Access-Control-Allow-Credentials": "*",
|
|
|
- ACL: "public-read",
|
|
|
- }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
- var options = {
|
|
|
- partSize: 2048 * 1024 * 1024,
|
|
|
- queueSize: 2,
|
|
|
- leavePartsOnError: true,
|
|
|
- };
|
|
|
- bucket
|
|
|
- .upload(params, options)
|
|
|
- .on("httpUploadProgress", function (evt) {
|
|
|
- //这里可以写进度条
|
|
|
- // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
- })
|
|
|
- .send(function (err, data) {
|
|
|
- if (err) {
|
|
|
- var a = _this.$refs.upload1.uploadFiles;
|
|
|
- a.splice(a.length - 1, a.length);
|
|
|
- _this.$message.error("上传失败");
|
|
|
- } else {
|
|
|
- _this.studyJuri[0].cover.push({
|
|
|
- name: file.name,
|
|
|
- url: data.Location,
|
|
|
- uid: file.uid,
|
|
|
- });
|
|
|
- _this.imgChange(null, null, type);
|
|
|
- console.log(data.Location);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- beforeUpload2(event, type) {
|
|
|
- var file = event.target.files[0];
|
|
|
- var credentials = {
|
|
|
- accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
- secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
- }; //秘钥形式的登录上传
|
|
|
- window.AWS.config.update(credentials);
|
|
|
- window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+ if (file) {
|
|
|
+ var params = {
|
|
|
+ Key:
|
|
|
+ file.name.split(".")[0] +
|
|
|
+ new Date().getTime() +
|
|
|
+ "." +
|
|
|
+ file.name.split(".")[1],
|
|
|
+ ContentType: file.type,
|
|
|
+ Body: file,
|
|
|
+ "Access-Control-Allow-Credentials": "*",
|
|
|
+ ACL: "public-read",
|
|
|
+ }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
+ var options = {
|
|
|
+ partSize: 2048 * 1024 * 1024,
|
|
|
+ queueSize: 2,
|
|
|
+ leavePartsOnError: true,
|
|
|
+ };
|
|
|
+ bucket
|
|
|
+ .upload(params, options)
|
|
|
+ .on("httpUploadProgress", function (evt) {
|
|
|
+ //这里可以写进度条
|
|
|
+ // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
+ })
|
|
|
+ .send(function (err, data) {
|
|
|
+ if (err) {
|
|
|
+ var a = _this.$refs.upload1.uploadFiles;
|
|
|
+ a.splice(a.length - 1, a.length);
|
|
|
+ _this.$message.error("上传失败");
|
|
|
+ } else {
|
|
|
+ _this.studyJuri[0].cover.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ uid: file.uid,
|
|
|
+ });
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ console.log(data.Location);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeUpload2(event, type) {
|
|
|
+ var file = event.target.files[0];
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
|
|
|
- var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
- var _this = this;
|
|
|
+ var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
+ var _this = this;
|
|
|
|
|
|
- if (file) {
|
|
|
- var params = {
|
|
|
- Key:
|
|
|
- file.name.split(".")[0] +
|
|
|
- new Date().getTime() +
|
|
|
- "." +
|
|
|
- file.name.split(".")[1],
|
|
|
- ContentType: file.type,
|
|
|
- Body: file,
|
|
|
- "Access-Control-Allow-Credentials": "*",
|
|
|
- ACL: "public-read",
|
|
|
- }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
- var options = {
|
|
|
- partSize: 2048 * 1024 * 1024,
|
|
|
- queueSize: 2,
|
|
|
- leavePartsOnError: true,
|
|
|
- };
|
|
|
- bucket
|
|
|
- .upload(params, options)
|
|
|
- .on("httpUploadProgress", function (evt) {
|
|
|
- //这里可以写进度条
|
|
|
- // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
- })
|
|
|
- .send(function (err, data) {
|
|
|
- if (err) {
|
|
|
- var a = _this.$refs.upload1.uploadFiles;
|
|
|
- a.splice(a.length - 1, a.length);
|
|
|
- _this.$message.error("上传失败");
|
|
|
- } else {
|
|
|
- if (type == 2) {
|
|
|
- _this.studyJuri[0].upVedio.push({
|
|
|
- name: file.name,
|
|
|
- url: data.Location,
|
|
|
- uid: file.uid,
|
|
|
- });
|
|
|
- _this.imgChange(null, null, type);
|
|
|
- } else if (type == 3) {
|
|
|
- _this.studyJuri[0].upFile.push({
|
|
|
- name: file.name,
|
|
|
- url: data.Location,
|
|
|
- uid: file.uid,
|
|
|
- });
|
|
|
- _this.imgChange(null, null, type);
|
|
|
- }
|
|
|
- console.log(data.Location);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- getCourseDetail() {
|
|
|
- const loading = this.$loading.service({
|
|
|
- background: "rgba(255, 255, 255, 0.7)",
|
|
|
- target: document.querySelector(".student_table"),
|
|
|
- });
|
|
|
- var t = this.courseType;
|
|
|
- let params = {
|
|
|
- courseId: this.id,
|
|
|
- };
|
|
|
- this.ajax
|
|
|
- .get(this.$store.state.api + "selectCourseDetail", params)
|
|
|
- .then((res) => {
|
|
|
- loading.close();
|
|
|
- // element.imgUrl = JSON.parse(element.chapters).poster;
|
|
|
- var a = JSON.parse(res.data[0][0].chapters)[t].chapterInfo[0]
|
|
|
- .chapterData;
|
|
|
- var b = [
|
|
|
- "AVI",
|
|
|
- "NAVI",
|
|
|
- "MPEG",
|
|
|
- "ASF",
|
|
|
- "MOV",
|
|
|
- "WMV",
|
|
|
- "3GP",
|
|
|
- "RM",
|
|
|
- "RMVB",
|
|
|
- "FLV",
|
|
|
- "F4V",
|
|
|
- "H.264",
|
|
|
- "H.265",
|
|
|
- "REAL VIDEO",
|
|
|
- "MKV",
|
|
|
- "WebM",
|
|
|
- "HDDVD",
|
|
|
- "MP4",
|
|
|
- "MPG",
|
|
|
- "M4V",
|
|
|
- "MGV",
|
|
|
- "OGV",
|
|
|
- "QTM",
|
|
|
- "STR",
|
|
|
- "AMC",
|
|
|
- "DVX",
|
|
|
- "EVO",
|
|
|
- "DAT",
|
|
|
- "OGG",
|
|
|
- "OGM",
|
|
|
- ];
|
|
|
- for (var i = 0; i < a.length; i++) {
|
|
|
- if (
|
|
|
- b.indexOf(
|
|
|
- a[i].url
|
|
|
- .split(".")
|
|
|
- [a[i].url.split(".").length - 1].toLocaleUpperCase()
|
|
|
- ) != -1
|
|
|
- ) {
|
|
|
- this.vedio.push(a[i]);
|
|
|
- } else {
|
|
|
- this.file.push(a[i]);
|
|
|
- }
|
|
|
- }
|
|
|
- // element.mediaList = JSON.parse(element.chapters)[0].chapterInfo[t].chapterData;
|
|
|
- console.log(this.vedio);
|
|
|
- console.log(this.file);
|
|
|
- // this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
|
|
|
- this.courseDetail = res.data[0][0];
|
|
|
- this.chapInfo = JSON.parse(this.courseDetail.chapters)[t];
|
|
|
- // this.playerOptions.poster = this.course.imgUrl;
|
|
|
- this.playerOptions.sources[0].src =
|
|
|
- this.vedio.length > 0
|
|
|
- ? this.vedio[0].url
|
|
|
- : require("../assets/icon/wheel.png");
|
|
|
- console.log(this.playerOptions.sources[0].src);
|
|
|
- this.playerO = this.playerOptions;
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- loading.close();
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- },
|
|
|
- switchVideo(media, index) {
|
|
|
- this.playerO = {};
|
|
|
- this.playerOptions.poster = "";
|
|
|
- this.playerOptions.sources[0].src = media;
|
|
|
- this.playerO = this.playerOptions;
|
|
|
- },
|
|
|
- onPlayerPlay() {},
|
|
|
- lookVedio(u) {
|
|
|
- this.playerOptions.sources[0].src = u;
|
|
|
- this.playerO = this.playerOptions;
|
|
|
- },
|
|
|
- downFile(i) {
|
|
|
- window.open(this.file[i].url);
|
|
|
- },
|
|
|
- openAddWork() {
|
|
|
- this.dialogVisible = true;
|
|
|
- this.studyJuri = [
|
|
|
- {
|
|
|
- content: "",
|
|
|
- cover: [],
|
|
|
- upVedio: [],
|
|
|
- upFile: [],
|
|
|
- },
|
|
|
- ];
|
|
|
- },
|
|
|
- addWork() {
|
|
|
- let params = [
|
|
|
- {
|
|
|
- uid: this.userid,
|
|
|
- cid: this.id,
|
|
|
- stage: this.courseType,
|
|
|
- content: JSON.stringify(this.studyJuri),
|
|
|
- },
|
|
|
- ];
|
|
|
- this.ajax
|
|
|
- .post(this.$store.state.api + "addWorks", params)
|
|
|
- .then((res) => {
|
|
|
- this.$message({
|
|
|
- message: "提交成功",
|
|
|
- type: "success",
|
|
|
- });
|
|
|
- this.dialogVisible = false;
|
|
|
- // this.studyJuri.push([
|
|
|
- // {
|
|
|
- // content: "",
|
|
|
- // cover: [],
|
|
|
- // upVedio: [],
|
|
|
- // upFile: [],
|
|
|
- // },
|
|
|
- // ]);
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- this.$message.error("提交失败");
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getCourseDetail();
|
|
|
- document.scrollingElement.scrollTop = 0;
|
|
|
- },
|
|
|
- };
|
|
|
+ if (file) {
|
|
|
+ var params = {
|
|
|
+ Key:
|
|
|
+ file.name.split(".")[0] +
|
|
|
+ new Date().getTime() +
|
|
|
+ "." +
|
|
|
+ file.name.split(".")[1],
|
|
|
+ ContentType: file.type,
|
|
|
+ Body: file,
|
|
|
+ "Access-Control-Allow-Credentials": "*",
|
|
|
+ ACL: "public-read",
|
|
|
+ }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
+ var options = {
|
|
|
+ partSize: 2048 * 1024 * 1024,
|
|
|
+ queueSize: 2,
|
|
|
+ leavePartsOnError: true,
|
|
|
+ };
|
|
|
+ bucket
|
|
|
+ .upload(params, options)
|
|
|
+ .on("httpUploadProgress", function (evt) {
|
|
|
+ //这里可以写进度条
|
|
|
+ // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
+ })
|
|
|
+ .send(function (err, data) {
|
|
|
+ if (err) {
|
|
|
+ var a = _this.$refs.upload1.uploadFiles;
|
|
|
+ a.splice(a.length - 1, a.length);
|
|
|
+ _this.$message.error("上传失败");
|
|
|
+ } else {
|
|
|
+ if (type == 2) {
|
|
|
+ _this.studyJuri[0].upVedio.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ uid: file.uid,
|
|
|
+ });
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ } else if (type == 3) {
|
|
|
+ _this.studyJuri[0].upFile.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ uid: file.uid,
|
|
|
+ });
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ }
|
|
|
+ console.log(data.Location);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCourseDetail() {
|
|
|
+ const loading = this.$loading.service({
|
|
|
+ background: "rgba(255, 255, 255, 0.7)",
|
|
|
+ target: document.querySelector(".student_table"),
|
|
|
+ });
|
|
|
+ var t = this.courseType;
|
|
|
+ let params = {
|
|
|
+ courseId: this.id,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectCourseDetail", params)
|
|
|
+ .then((res) => {
|
|
|
+ loading.close();
|
|
|
+ // element.imgUrl = JSON.parse(element.chapters).poster;
|
|
|
+ var a = JSON.parse(res.data[0][0].chapters)[t].chapterInfo[0]
|
|
|
+ .chapterData;
|
|
|
+ var b = [
|
|
|
+ "AVI",
|
|
|
+ "NAVI",
|
|
|
+ "MPEG",
|
|
|
+ "ASF",
|
|
|
+ "MOV",
|
|
|
+ "WMV",
|
|
|
+ "3GP",
|
|
|
+ "RM",
|
|
|
+ "RMVB",
|
|
|
+ "FLV",
|
|
|
+ "F4V",
|
|
|
+ "H.264",
|
|
|
+ "H.265",
|
|
|
+ "REAL VIDEO",
|
|
|
+ "MKV",
|
|
|
+ "WebM",
|
|
|
+ "HDDVD",
|
|
|
+ "MP4",
|
|
|
+ "MPG",
|
|
|
+ "M4V",
|
|
|
+ "MGV",
|
|
|
+ "OGV",
|
|
|
+ "QTM",
|
|
|
+ "STR",
|
|
|
+ "AMC",
|
|
|
+ "DVX",
|
|
|
+ "EVO",
|
|
|
+ "DAT",
|
|
|
+ "OGG",
|
|
|
+ "OGM",
|
|
|
+ ];
|
|
|
+ for (var i = 0; i < a.length; i++) {
|
|
|
+ if (
|
|
|
+ b.indexOf(
|
|
|
+ a[i].url
|
|
|
+ .split(".")
|
|
|
+ [a[i].url.split(".").length - 1].toLocaleUpperCase()
|
|
|
+ ) != -1
|
|
|
+ ) {
|
|
|
+ this.vedio.push(a[i]);
|
|
|
+ } else {
|
|
|
+ this.file.push(a[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // element.mediaList = JSON.parse(element.chapters)[0].chapterInfo[t].chapterData;
|
|
|
+ console.log(this.vedio);
|
|
|
+ console.log(this.file);
|
|
|
+ // this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
|
|
|
+ this.courseDetail = res.data[0][0];
|
|
|
+ this.chapInfo = JSON.parse(this.courseDetail.chapters)[t];
|
|
|
+ this.chapInfoList = JSON.parse(this.courseDetail.chapters);
|
|
|
+ // this.playerOptions.poster = this.course.imgUrl;
|
|
|
+ this.playerOptions.sources[0].src =
|
|
|
+ this.vedio.length > 0
|
|
|
+ ? this.vedio[0].url
|
|
|
+ : require("../assets/icon/wheel.png");
|
|
|
+ console.log(this.playerOptions.sources[0].src);
|
|
|
+ this.playerO = this.playerOptions;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ loading.close();
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ switchVideo(media, index) {
|
|
|
+ this.playerO = {};
|
|
|
+ this.playerOptions.poster = "";
|
|
|
+ this.playerOptions.sources[0].src = media;
|
|
|
+ this.playerO = this.playerOptions;
|
|
|
+ },
|
|
|
+ onPlayerPlay() {},
|
|
|
+ lookVedio(u) {
|
|
|
+ this.playerOptions.sources[0].src = u;
|
|
|
+ this.playerO = this.playerOptions;
|
|
|
+ },
|
|
|
+ downFile(i) {
|
|
|
+ window.open(this.file[i].url);
|
|
|
+ },
|
|
|
+ openAddWork() {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.studyJuri = [
|
|
|
+ {
|
|
|
+ content: "",
|
|
|
+ cover: [],
|
|
|
+ upVedio: [],
|
|
|
+ upFile: [],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ addWork() {
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ uid: this.userid,
|
|
|
+ cid: this.id,
|
|
|
+ stage: this.courseType,
|
|
|
+ content: JSON.stringify(this.studyJuri),
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "addWorks", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "提交成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.dialogVisible = false;
|
|
|
+ // this.studyJuri.push([
|
|
|
+ // {
|
|
|
+ // content: "",
|
|
|
+ // cover: [],
|
|
|
+ // upVedio: [],
|
|
|
+ // upFile: [],
|
|
|
+ // },
|
|
|
+ // ]);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("提交失败");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getCourseDetail();
|
|
|
+ document.scrollingElement.scrollTop = 0;
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .body_student {
|
|
|
- margin: 0px auto;
|
|
|
- width: 98%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .student_head {
|
|
|
- width: 100%;
|
|
|
- margin: 0 auto;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
- .wheel > img,
|
|
|
- .project > img,
|
|
|
- .star > img,
|
|
|
- .evaluate > img,
|
|
|
- .up_photo > img,
|
|
|
- .chapter_add > img,
|
|
|
- .deleteWord > img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .chapter_add {
|
|
|
- width: 120px;
|
|
|
- margin-top: 20px;
|
|
|
- position: relative;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .deleteWord {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- position: absolute;
|
|
|
- right: -10px;
|
|
|
- top: -10px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .box_course {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
- .wheel {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .right_box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-left: 30px;
|
|
|
- justify-content: space-around;
|
|
|
- }
|
|
|
- .right_box_title {
|
|
|
- font-size: 23px;
|
|
|
- }
|
|
|
- .people {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- .student_body {
|
|
|
- width: 100%;
|
|
|
- margin: 0 auto;
|
|
|
- background: #fff;
|
|
|
- margin-top: 20px;
|
|
|
- padding: 0 0 20px;
|
|
|
- }
|
|
|
- .study_top {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .study_top .checkbox {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-left: 25px;
|
|
|
- }
|
|
|
- .study_top .check {
|
|
|
- margin: 0 10px 0 0;
|
|
|
- /* border-bottom: 4px solid #ccc; */
|
|
|
- padding-bottom: 5px;
|
|
|
- width: 80px;
|
|
|
- text-align: center;
|
|
|
- color: rgb(170, 170, 170);
|
|
|
- cursor: pointer;
|
|
|
- height: 30px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .study_top .checked {
|
|
|
- border-bottom: 4px solid #3FC6A0;
|
|
|
- padding-bottom: 5px;
|
|
|
- color: #3FC6A0;
|
|
|
- }
|
|
|
- .study_top .btn {
|
|
|
- margin: 25px;
|
|
|
- background: #41CDA6;
|
|
|
- color: #fff;
|
|
|
- width: 120px;
|
|
|
- text-align: center;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- font-size: 13px;
|
|
|
- border-radius: 5px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .project_box {
|
|
|
- padding: 0 30px 10px 30px;
|
|
|
- }
|
|
|
+.body_student {
|
|
|
+ margin: 0px auto;
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.student_head {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.wheel > img,
|
|
|
+.project > img,
|
|
|
+.star > img,
|
|
|
+.evaluate > img,
|
|
|
+.up_photo > img,
|
|
|
+.chapter_add > img,
|
|
|
+.deleteWord > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.chapter_add {
|
|
|
+ width: 120px;
|
|
|
+ margin-top: 20px;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.deleteWord {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ position: absolute;
|
|
|
+ right: -10px;
|
|
|
+ top: -10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.box_course {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.wheel {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.right_box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 30px;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.right_box_title {
|
|
|
+ font-size: 23px;
|
|
|
+}
|
|
|
+.people {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.student_body {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 0 0 20px;
|
|
|
+}
|
|
|
+.study_top {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #fff;
|
|
|
+ margin: 10px 0;
|
|
|
+ height: 60px;
|
|
|
+}
|
|
|
+.study_top .checkbox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 25px;
|
|
|
+}
|
|
|
+.study_top .check {
|
|
|
+ margin: 0 15px 0 0;
|
|
|
+ /* border-bottom: 4px solid #ccc; */
|
|
|
+ padding-bottom: 5px;
|
|
|
+ text-align: center;
|
|
|
+ color: rgb(170, 170, 170);
|
|
|
+ cursor: pointer;
|
|
|
+ height: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.study_top .checked {
|
|
|
+ border-bottom: 4px solid #3fc6a0;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ color: #3fc6a0;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.study_top .checked > div,
|
|
|
+.study_top .check > div {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.videoTop {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #fff;
|
|
|
+ height: 60px;
|
|
|
+ align-items: center;
|
|
|
+ width: 95%;
|
|
|
+ margin: 10px auto;
|
|
|
+ border-bottom: 2px solid #ededed;
|
|
|
+}
|
|
|
+.upbtn {
|
|
|
+ margin: 25px;
|
|
|
+ background: #70afdb;
|
|
|
+ color: #fff;
|
|
|
+ width: 120px;
|
|
|
+ text-align: center;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 13px;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.project_box {
|
|
|
+ padding: 0 30px 10px 30px;
|
|
|
+}
|
|
|
|
|
|
- .filebox {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
+.filebox {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
|
|
|
- .file {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin: 0 20px 20px 0;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+.file {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0 20px 20px 0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
|
|
|
- .file div {
|
|
|
- margin-top: 10px;
|
|
|
- width: 150px;
|
|
|
- text-align: center;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
+.file div {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 150px;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
|
|
|
- .media {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin: 0 20px 20px 0;
|
|
|
- cursor: pointer;
|
|
|
- width: 250px;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
|
|
|
- 0px 2px 1px -1px rgb(0 0 0 / 12%);
|
|
|
- border-radius: 0 0 5px 5px;
|
|
|
- /* border: 1px solid #cecece; */
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .media img {
|
|
|
- width: 250px;
|
|
|
- height: 150px;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
- .media .title {
|
|
|
- padding: 5px 10px;
|
|
|
- text-align: left;
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .media .btn {
|
|
|
- width: 100%;
|
|
|
- height: 35px;
|
|
|
- line-height: 35px;
|
|
|
- color: #fff;
|
|
|
- background: #41CDA6;
|
|
|
- text-align: center;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
+.media {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0 20px 20px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 250px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
|
|
|
+ 0px 2px 1px -1px rgb(0 0 0 / 12%);
|
|
|
+ border-radius: 0 0 5px 5px;
|
|
|
+ /* border: 1px solid #cecece; */
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.media img {
|
|
|
+ width: 250px;
|
|
|
+ height: 150px;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+.media .title {
|
|
|
+ padding: 5px;
|
|
|
+ text-align: left;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.media .btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ color: #fff;
|
|
|
+ background: #606060;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
|
|
|
- .detail_content_top {
|
|
|
- width: 100%;
|
|
|
- padding: 25px 0 25px 0;
|
|
|
- }
|
|
|
- .detail_title {
|
|
|
- text-align: center;
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- .detail_time {
|
|
|
- font-size: 13px;
|
|
|
- padding: 15px 0 0 40px;
|
|
|
- }
|
|
|
- .detail_content {
|
|
|
- line-height: 2pc;
|
|
|
- width: 90%;
|
|
|
- margin: 0 auto;
|
|
|
- padding-top: 30px;
|
|
|
- text-indent: 30px;
|
|
|
- }
|
|
|
- .score_box >>> .el-rate {
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- .dialog_change >>> .el-dialog {
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
- .dialog_change >>> .el-dialog__header {
|
|
|
- background: #f2f2f2;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .dialog_change >>> .el-dialog__title {
|
|
|
- line-height: 5px;
|
|
|
- }
|
|
|
- .dialog_change >>> .el-dialog__body {
|
|
|
- background: #fff;
|
|
|
- padding: 10px 20px;
|
|
|
- }
|
|
|
- .score_box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 18px;
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
- .up_photo {
|
|
|
- width: 60px;
|
|
|
- cursor: pointer;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- .upload_send {
|
|
|
- margin: 20px auto;
|
|
|
- width: 60%;
|
|
|
- background: #169bd6;
|
|
|
- text-align: center;
|
|
|
- height: 35px;
|
|
|
- line-height: 35px;
|
|
|
- color: #fff;
|
|
|
- border-radius: 5px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .marginT {
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
- .workd_media {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .cd_content_steps {
|
|
|
- display: flex;
|
|
|
- width: 90%;
|
|
|
- justify-content: space-around;
|
|
|
- border-top: 1px solid #eeeeee;
|
|
|
- }
|
|
|
- .cd_steps_box {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .first {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 15px 0 20px 0;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
- .first > div:nth-child(2) {
|
|
|
- font-size: 16px !important;
|
|
|
- padding-left: 10px;
|
|
|
- line-height: 26px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
+.detail_content_top {
|
|
|
+ width: 100%;
|
|
|
+ padding: 25px 0 25px 0;
|
|
|
+}
|
|
|
+.detail_title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+.detail_time {
|
|
|
+ font-size: 13px;
|
|
|
+ padding: 15px 0 0 40px;
|
|
|
+}
|
|
|
+.detail_content {
|
|
|
+ line-height: 2pc;
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 30px;
|
|
|
+ text-indent: 30px;
|
|
|
+}
|
|
|
+.score_box >>> .el-rate {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.dialog_change >>> .el-dialog {
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.dialog_change >>> .el-dialog__header {
|
|
|
+ background: #f2f2f2;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.dialog_change >>> .el-dialog__title {
|
|
|
+ line-height: 5px;
|
|
|
+}
|
|
|
+.dialog_change >>> .el-dialog__body {
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px 20px;
|
|
|
+}
|
|
|
+.score_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.up_photo {
|
|
|
+ width: 60px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.upload_send {
|
|
|
+ margin: 20px auto;
|
|
|
+ width: 60%;
|
|
|
+ background: #169bd6;
|
|
|
+ text-align: center;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.marginT {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.workd_media {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.cd_content_steps {
|
|
|
+ display: flex;
|
|
|
+ width: 90%;
|
|
|
+ justify-content: space-around;
|
|
|
+ border-top: 1px solid #eeeeee;
|
|
|
+}
|
|
|
+.cd_steps_box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.first {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 15px 0 20px 0;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+.first > div:nth-child(2) {
|
|
|
+ font-size: 16px !important;
|
|
|
+ padding-left: 10px;
|
|
|
+ line-height: 26px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.blue_box_one {
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background-image: linear-gradient(to right, #30c499, #75ceba);
|
|
|
+ border-radius: 7px;
|
|
|
+ margin: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 95%;
|
|
|
+ height: 45px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.blue_box_one > div:nth-child(1) {
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 65px;
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+.upFile {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 120px;
|
|
|
+ background: #70afdb;
|
|
|
+ color: #fff;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.courseTitle {
|
|
|
+ background: #329c74;
|
|
|
+ width: 95%;
|
|
|
+ margin: 10px auto;
|
|
|
+ height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 40px;
|
|
|
+ text-indent: 15px;
|
|
|
+}
|
|
|
+.ml {
|
|
|
+ margin-left: 15px;
|
|
|
+ color: #d1d1d1;
|
|
|
+}
|
|
|
</style>
|
zengyicheng
