|
@@ -11,8 +11,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mt-10px shadow-default bg-white-grey pt-25px pl-35px pr-35px pb-35px rounded-10px">
|
|
|
- <div class="flex justify-between">
|
|
|
- <div class="w-800px relative">
|
|
|
+ <div class="content_nav">
|
|
|
+ <div ref="liveBox" class="w-800px relative left-box">
|
|
|
<div class="flex justify-between items-center">
|
|
|
<h3 class="nav-title flex-1">
|
|
|
<span>{{ course_title }}</span>
|
|
@@ -58,22 +58,22 @@
|
|
|
<ChatBlock :id="tzk_id" />
|
|
|
</div>
|
|
|
<!-- v-if="user.user_role_id ==75" -->
|
|
|
- <div class="w-300px mt-46px right-box pt-30px relative">
|
|
|
+ <div ref="fileBox" class="300px mt-46px right-box pt-30px">
|
|
|
<div v-if="user.user_role_id === '75'" class="right-nav ml-20px">
|
|
|
<span>相关章节</span>
|
|
|
<i></i>
|
|
|
</div>
|
|
|
- <homeworkBlock :id="tzk_id" :dxa="chapter_info.tzk_dxa_file" :homework="chapter_info.tzk_ksce_file" :file="chapter_info.tzk_files_json" @filePre="filePre"></homeworkBlock>
|
|
|
+ <homeworkBlock :id="tzk_id" :dxa="chapter_info.tzk_dxa_file" :homework="chapter_info.tzk_ksce_file"
|
|
|
+ :file="chapter_info.tzk_files_json" :zjr="chapter_info.tzk_zjr_user_id" @filePre="filePre">
|
|
|
+ </homeworkBlock>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-dialog v-model="dialogVisible" :title="title" width="80%">
|
|
|
<filePreview style="width: 100%; height: 700px; overflow-y: auto" :url="previewUrl"></filePreview>
|
|
|
<template #footer>
|
|
|
- <div class="text-center">
|
|
|
- <el-button size="large" type="primary" @click="dialogVisible = false"
|
|
|
- >确定</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
+ <div class="text-center">
|
|
|
+ <el-button size="large" type="primary" @click="dialogVisible = false">确定</el-button>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
@@ -86,6 +86,7 @@ import ChatBlock from "./chat.vue";
|
|
|
import homeworkBlock from "./homework.vue";
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
import { user } from '../../store/index';
|
|
|
+import mammoth from 'mammoth/mammoth.browser';
|
|
|
import {
|
|
|
chapter_detail,
|
|
|
chapter_list,
|
|
@@ -94,9 +95,13 @@ import {
|
|
|
jf_list,
|
|
|
} from "./api";
|
|
|
import QrcodeVue from "qrcode.vue";
|
|
|
-console.log(user.value);
|
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
|
+
|
|
|
+const liveBox = ref(null);
|
|
|
+const fileBox = ref(null);
|
|
|
+
|
|
|
+
|
|
|
let course_title = $ref("");
|
|
|
let tz_id = $ref('');
|
|
|
let tzk_id = $ref("");
|
|
@@ -112,7 +117,6 @@ let previewUrl = $ref("");
|
|
|
const linkBack = () => {
|
|
|
router.back()
|
|
|
};
|
|
|
-
|
|
|
function getChapterDetail() {
|
|
|
let data = {
|
|
|
tzk_id: tzk_id,
|
|
@@ -121,7 +125,10 @@ function getChapterDetail() {
|
|
|
if (res.code === "1") {
|
|
|
chapter_info = res.data.one_info;
|
|
|
course_title = res.data.one_info.tzk_ksmc;
|
|
|
-
|
|
|
+ if (user.value.user_id ==='100') {
|
|
|
+ let width = liveBox.value.parentElement.offsetWidth;
|
|
|
+ liveBox.value.style.width = width + 'px';
|
|
|
+ }
|
|
|
var player = new Aliplayer(
|
|
|
{
|
|
|
id: "player-con",
|
|
@@ -235,13 +242,17 @@ function changeChapter(item) {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
-if (route.params.tz_id && route.params.tzk_id) {
|
|
|
- tzk_id = route.params.tzk_id;
|
|
|
- tz_id = route.params.tz_id;
|
|
|
- shareLink = window.location.href;
|
|
|
- getChapterDetail();
|
|
|
- // getChapterList();
|
|
|
-}
|
|
|
+
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ if (route.params.tz_id && route.params.tzk_id) {
|
|
|
+ tzk_id = route.params.tzk_id;
|
|
|
+ tz_id = route.params.tz_id;
|
|
|
+ shareLink = window.location.href;
|
|
|
+ getChapterDetail();
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
watch(
|
|
|
() => route.path,
|
|
|
() => {
|
|
@@ -297,12 +308,30 @@ async function copyLink() {
|
|
|
ElMessage.success("已复制");
|
|
|
jfData();
|
|
|
}
|
|
|
+let wordText = $ref();
|
|
|
let dialogVisible = $ref(false);
|
|
|
let title = $ref('资源预览')
|
|
|
function filePre(item) {
|
|
|
console.log(item, 111111);
|
|
|
dialogVisible = true;
|
|
|
- previewUrl = getFullUrl(item);
|
|
|
+ previewUrl = item;
|
|
|
+ getWordText(getFullUrl(item))
|
|
|
+}
|
|
|
+function getWordText(url) {
|
|
|
+ console.log(url);
|
|
|
+ const xhr = new XMLHttpRequest();
|
|
|
+ xhr.open("get", url, true);
|
|
|
+ xhr.responseType = "arraybuffer";
|
|
|
+ xhr.onload = () => {
|
|
|
+ if (xhr.status == 200) {
|
|
|
+ mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then((resultObject) => {
|
|
|
+ nextTick(() => {
|
|
|
+ wordText = resultObject.value;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+ xhr.send();
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -346,6 +375,19 @@ $color: #1259a1;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
+:deep(.el-dialog){
|
|
|
+ z-index: 10000 !important;
|
|
|
+}
|
|
|
+.content_nav{
|
|
|
+ // width: 1200px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.content_nav::after{
|
|
|
+ content:"";
|
|
|
+ display:block;
|
|
|
+ clear:both;
|
|
|
+}
|
|
|
|
|
|
.search-box {
|
|
|
width: 300px;
|
|
@@ -375,63 +417,6 @@ $color: #1259a1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.course-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- li {
|
|
|
- min-width: 0;
|
|
|
- width: 268px;
|
|
|
- background: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
|
|
|
- margin-right: 19px;
|
|
|
- margin-bottom: 15px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:nth-child(4n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .course-img {
|
|
|
- width: 100%;
|
|
|
- height: 151px;
|
|
|
- border-radius: 10px 10px 0 0;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .info-bottom {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 30;
|
|
|
- width: 152px;
|
|
|
- height: 27px;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- border-radius: 0 10px 0 0;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .icon-view {
|
|
|
- width: 24px;
|
|
|
- height: 16px;
|
|
|
- background: url("/images/icon/view.png") center no-repeat;
|
|
|
- background-size: 24px 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .icon-thumb {
|
|
|
- width: 17px;
|
|
|
- height: 16px;
|
|
|
- background: url("/images/icon/thumb.png") center no-repeat;
|
|
|
- background-size: 17px 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
.thumb {
|
|
|
display: inline-block;
|
|
|
font-size: 16px;
|
|
@@ -521,11 +506,14 @@ $color: #1259a1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+.left-box{
|
|
|
+ float: left;
|
|
|
+}
|
|
|
.right-box {
|
|
|
- height: 460px;
|
|
|
+ // height: 460px;
|
|
|
background: #ffffff;
|
|
|
border-radius: 12px;
|
|
|
+ float: right;
|
|
|
box-shadow: 2px 10px 24px rgba(161, 153, 168, 0.18);
|
|
|
|
|
|
.right-nav {
|
|
@@ -582,112 +570,16 @@ $color: #1259a1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.res-box {
|
|
|
- width: 100%;
|
|
|
- height: 317px;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 12px;
|
|
|
- box-shadow: 2px 10px 24px rgba(161, 153, 168, 0.18);
|
|
|
-
|
|
|
- .res-nav {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- li {
|
|
|
- position: relative;
|
|
|
- padding: 0 5px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &.selected {
|
|
|
- span {
|
|
|
- color: #1259a1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &+li {
|
|
|
- margin-left: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- position: relative;
|
|
|
- display: block;
|
|
|
- font-size: 16px;
|
|
|
- color: #9fa9b4;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- i {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 2px;
|
|
|
- width: 100%;
|
|
|
- height: 6px;
|
|
|
- opacity: 0.2;
|
|
|
- background: #1259a1;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .res-list {
|
|
|
- width: 100%;
|
|
|
- padding: 0 20px 0 30px;
|
|
|
- height: 200px;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- li {
|
|
|
- display: flex;
|
|
|
- padding: 20px;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- &+li {
|
|
|
- border-top: 1px dashed rgba(110, 88, 197, 0.5);
|
|
|
- }
|
|
|
-
|
|
|
- .file-type {
|
|
|
- min-width: 0;
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
-
|
|
|
- &.word {
|
|
|
- background: url("/images/word.png") center no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- &.excel {
|
|
|
- background: url("/images/excel.png") center no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- &.ppt {
|
|
|
- background: url("/images/ppt.png") center no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- &.pdf {
|
|
|
- background: url("/images/pdf.png") center no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .file-btn {
|
|
|
- width: 58px;
|
|
|
- height: 24px;
|
|
|
- border: 1px solid #1259a1;
|
|
|
- border-radius: 12px;
|
|
|
- font-size: 12px;
|
|
|
- color: #1259a1;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
::v-deep .el-dialog__footer {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
-:deep(.chat){
|
|
|
+:deep(.chat) {
|
|
|
// background-color: rgba($color:#fff, $alpha: .7);
|
|
|
position: absolute;
|
|
|
- bottom: 0;
|
|
|
- z-index: 100;
|
|
|
+ top: 60px;
|
|
|
+ right: 10px;
|
|
|
+
|
|
|
}
|
|
|
</style>
|