From 11433c56279d667305b0b627e205000851bc0456 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期二, 25 六月 2024 15:34:55 +0800
Subject: [PATCH] 新增pdf预览功能
---
src/views/readerPages/webHome.vue | 247 +++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 218 insertions(+), 29 deletions(-)
diff --git a/src/views/readerPages/webHome.vue b/src/views/readerPages/webHome.vue
index 8678935..34bd1d5 100644
--- a/src/views/readerPages/webHome.vue
+++ b/src/views/readerPages/webHome.vue
@@ -117,6 +117,11 @@
<div>鏁欏笀璧勬簮</div>
<div :class="resourceType == 'teacher' ? 'text' : 'line'"></div>
</div>
+ <hr class="hr" />
+ <div class="tabItem hover" @click="selectResourceType('collect')">
+ <div>鏀惰棌璧勬簮</div>
+ <div :class="resourceType == 'collect' ? 'text' : 'line'"></div>
+ </div>
</div>
<div v-if="activeMenu == '棰樺簱'" class="resourceTab">
<div
@@ -127,18 +132,30 @@
<div>涔犻</div>
<div :class="exercisesType == 'exercises' ? 'text' : 'line'"></div>
</div>
- <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1"/>
- <div class="tabItem hover" @click="selectExercisesType('additional')" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1">
+ <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1" />
+ <div
+ class="tabItem hover"
+ @click="selectExercisesType('additional')"
+ v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1"
+ >
<div>闄勫姞棰�</div>
<div :class="exercisesType == 'additional' ? 'text' : 'line'"></div>
</div>
- <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1"/>
- <div class="tabItem hover" @click="selectExercisesType('wrong')" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1">
+ <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1" />
+ <div
+ class="tabItem hover"
+ @click="selectExercisesType('wrong')"
+ v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1"
+ >
<div>閿欓鏈�</div>
<div :class="exercisesType == 'wrong' ? 'text' : 'line'"></div>
</div>
- <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1"/>
- <div class="tabItem hover" @click="selectExercisesType('collection')" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1">
+ <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1" />
+ <div
+ class="tabItem hover"
+ @click="selectExercisesType('collection')"
+ v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1"
+ >
<div>鏀惰棌澶�</div>
<div :class="exercisesType == 'collection' ? 'text' : 'line'"></div>
</div>
@@ -405,6 +422,12 @@
"
><Download
/></el-icon>
+ <!-- 鏀惰棌鎸夐挳 -->
+ <img
+ :src="collectResourceList.findIndex(citem => citem.id == item.id) > -1 ? isHeart : heart "
+ class="icon hover"
+ style="width: 15px;"
+ @click="handleCollectResource(item.id,item.md5 ? item.md5 : '',item.resourcePath ? item.resourcePath : '',item.resourceType,item.resourceType == '瑙嗛' || '闊抽' ? 'bits' : 'json',item.resourceName)" />
</div>
</div>
</div>
@@ -470,7 +493,10 @@
</div>
</div>
<div class="questionList" v-if="activeMenu == '棰樺簱'" v-loading="listLoading">
- <div class="resourceSearchBox" v-if="exercisesType !== 'collection' && exercisesType !=='wrong'">
+ <div
+ class="resourceSearchBox"
+ v-if="exercisesType !== 'collection' && exercisesType !== 'wrong'"
+ >
<div class="inputBox">
<el-input
class="custom-input"
@@ -491,14 +517,20 @@
<div v-for="(item, index) in questionList" :key="index" class="reMarkItem">
<div
class="questionCon hover"
- @click="clickQuestion(exercisesType,item)"
+ @click="clickQuestion(exercisesType, item)"
:title="item.resourceName"
>
{{ item.resourceName }}
</div>
</div>
</div>
- <div v-if="questionList.length == 0 && (exercisesType !== 'collection' && exercisesType !=='wrong')">
+ <div
+ v-if="
+ questionList.length == 0 &&
+ exercisesType !== 'collection' &&
+ exercisesType !== 'wrong'
+ "
+ >
<el-empty :image-size="60" description="鏆傛棤鏁版嵁" />
</div>
</div>
@@ -1198,10 +1230,18 @@
</div>
</el-dialog>
<!-- 绛旈鍣� -->
- <examination ref="examinationRef" :activeBook="bookConfig" :info="examinationData.info" :type="examinationData.type" :infoType="examinationData.infoType" />
+ <examination
+ ref="examinationRef"
+ :activeBook="bookConfig"
+ :info="examinationData.info"
+ :type="examinationData.type"
+ :infoType="examinationData.infoType"
+ />
</template>
<script setup lang="ts">
+import heart from '@/assets/images/examination/collectIcon.png'
+import isHeart from '@/assets/images/examination/collectClickIcon.png'
import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useClipboard from 'vue-clipboard3'
@@ -1562,7 +1602,11 @@
{
name: '棰樺簱',
icon: question,
- isShow: bookConfig.value.textbookComponents.indexOf('3D3B4F55') > -1 || bookConfig.value.textbookComponents.indexOf('AFC1A288') > -1 || bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1 || bookConfig.value.textbookComponents.indexOf('A4821F71') > -1
+ isShow:
+ bookConfig.value.textbookComponents.indexOf('3D3B4F55') > -1 ||
+ bookConfig.value.textbookComponents.indexOf('AFC1A288') > -1 ||
+ bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1 ||
+ bookConfig.value.textbookComponents.indexOf('A4821F71') > -1
}
]
teachToolsMenuData = [
@@ -1778,6 +1822,7 @@
const showHandle = ref(null)
const playIndex = ref(null) //闊抽鎾斁
const audioPlayer = ref(null)
+const collectResourceList = ref([])
const getResourceData = () => {
if (token) {
imgPreviewList.value = []
@@ -1962,6 +2007,8 @@
})
.catch(function (error) {
console.log(error)
+ resourceDataList.value = []
+ classifySelectList.value = []
listLoading.value = false
})
} else {
@@ -2040,14 +2087,23 @@
const selectResourceType = (type) => {
resourceType.value = type
searchText.value = ''
- getResourceData()
+ if (type == 'collect') {
+ getCollectResource()
+ } else {
+ getResourceData()
+ }
}
//璧勬簮绫诲瀷鍥剧墖/瑙嗛/闊抽/涔犻/鍏朵粬
const classifyClick = (item) => {
activeClassify.value = item.key
resourceDataList.value = []
searchText.value = ''
- getResourceData()
+ if(resourceType.value == 'collect') {
+ getCollectResource()
+ } else {
+ getResourceData()
+ }
+
}
const searchBtn = () => {
if (searchShow.value) {
@@ -2057,14 +2113,148 @@
}
}
+// 鑾峰彇鏀惰棌鐨勮祫婧�
+const getCollectResource = () => {
+ if(token) {
+ MG.identity
+ .getUserKey({
+ domain: 'collectResource',
+ keys: [bookConfig.value.bookId]
+ })
+ .then((res) => {
+ if (res.length) {
+ collectResourceList.value = JSON.parse(res[0].value)
+ console.log('鏀惰棌璧勬簮鍒楄〃', collectResourceList.value)
+ if(collectResourceList.value.length > 0) {
+ let imgCount = 0
+ let audioCount = 0
+ let videoCount = 0
+ let exercisesCount = 0
+ let otherCount = 0
+ resourceDataList.value = []
+ collectResourceList.value.forEach((resItem) => {
+ if (resItem.resourceType == '鍥剧墖') {
+ if (resItem.resourcePath) {
+ resItem.resourcePath = bookConfig.value.resourceUrl + '/' + resItem.resourcePath
+ } else {
+ resItem.resourcePath =
+ bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5
+ }
+
+ imgPreviewList.value.push(resItem.resourcePath)
+ if (activeClassify.value == 'image') {
+ resourceDataList.value.push(resItem)
+ }
+ imgCount++
+ } else if (resItem.resourceType == '闊抽') {
+ if (activeClassify.value == 'audio') {
+ resourceDataList.value.push(resItem)
+ }
+ audioCount++
+ } else if (resItem.resourceType == '瑙嗛') {
+ if (activeClassify.value == 'video') {
+ resourceDataList.value.push(resItem)
+ }
+ videoCount++
+ } else {
+ if (activeClassify.value == 'other') {
+ resourceDataList.value.push(resItem)
+ }
+ otherCount++
+ }
+ })
+ classifySelectList.value = []
+ if (imgCount > 0) {
+ classifySelectList.value.push({
+ title: '鍥剧墖',
+ count: imgCount,
+ key: 'image'
+ })
+ }
+ if (audioCount > 0) {
+ classifySelectList.value.push({
+ title: '闊抽',
+ count: audioCount,
+ key: 'audio'
+ })
+ }
+ if (videoCount > 0) {
+ classifySelectList.value.push({
+ title: '瑙嗛',
+ count: videoCount,
+ key: 'video'
+ })
+ }
+ if (otherCount > 0) {
+ classifySelectList.value.push({
+ title: '鍏朵粬',
+ count: otherCount,
+ key: 'other'
+ })
+ }
+ if (!activeClassify.value) {
+ activeClassify.value = classifySelectList.value[0].key
+ collectResourceList.value.forEach((resItem1) => {
+ if (resItem1.resourceType == classifySelectList.value[0].title) {
+ resourceDataList.value.push(resItem1)
+ }
+ })
+ }
+ }
+ }
+ })
+ } else {
+ ElMessageBox.confirm('璇峰厛鐧诲綍锛�', {
+ confirmButtonText: '鍘荤櫥褰�',
+ cancelButtonText: '鍙栨秷',
+ autofocus: false,
+ type: 'warning'
+ })
+ .then(() => {
+ if (sessionStorage.getItem('loginCtx')) {
+ window.open(sessionStorage.getItem('loginCtx'))
+ } else {
+ router.replace({
+ path: '/login'
+ })
+ }
+ })
+ .catch(() => {})
+ }
+}
+// 鏀惰棌鎸夐挳
+const handleCollectResource = (id,md5,resourcePath,resourceType,source,resourceName) => {
+ if(collectResourceList.value.findIndex(item => item.id == id) > -1) {
+ collectResourceList.value = collectResourceList.value.filter(item => item.id != id)
+ } else {
+ collectResourceList.value.push({
+ id,
+ md5,
+ resourcePath:resourcePath.replace(bookConfig.value.resourceUrl + '/',''),
+ resourceType,
+ source,
+ resourceName
+ })
+ }
+ MG.identity.setUserKey({
+ setKeyRequests: [
+ {
+ domain: "collectResource",
+ key:bookConfig.value.bookId,
+ value: JSON.stringify(collectResourceList.value),
+ },
+ ],
+ })
+}
+
//涔犻
const exercisesType = ref('exercises') //涔犻绫诲瀷
const questionList = ref([])
const examinationRef = ref() // 绛旈鍣ㄥ疄渚�
const examinationData = reactive({
- type:"", // 绛旈绫诲瀷 option 娴嬭瘯
- infoType:"", // 鏁版嵁鏉ユ簮 bits 姣旂壒鍚庡彴 json 鍋囨暟鎹�
- info:{}, // 杩欏棰樼殑淇℃伅
+ type: '', // 绛旈绫诲瀷 option 娴嬭瘯
+ infoType: '', // 鏁版嵁鏉ユ簮 bits 姣旂壒鍚庡彴 json 鍋囨暟鎹�
+ info: {} // 杩欏棰樼殑淇℃伅
})
// 鑾峰彇涔犻
const getExercisesList = () => {
@@ -2154,36 +2344,35 @@
searchText.value = ''
if (type == 'exercises') {
getExercisesList()
- } else if(type == 'additional') {
+ } else if (type == 'additional') {
getAdditionalList()
- } else if(type == 'wrong'){
- openExaminationDialog(true,{},'errorQuestion')
+ } else if (type == 'wrong') {
+ openExaminationDialog(true, {}, 'errorQuestion')
questionList.value = []
- }else{
- openExaminationDialog(true,{},'collectQuestion')
+ } else {
+ openExaminationDialog(true, {}, 'collectQuestion')
questionList.value = []
}
}
// 棰樺垪琛ㄧ偣鍑�
-const clickQuestion = (type:string,data:any) => {
+const clickQuestion = (type: string, data: any) => {
switch (type) {
case 'exercises':
JumpPosition(data)
- break;
+ break
case 'additional':
- openExaminationDialog(true,data,'option')
- break;
+ openExaminationDialog(true, data, 'option')
+ break
default:
- break;
+ break
}
}
-const openExaminationDialog = (isSHow:boolean,data:any,type:string) => {
- if(examinationRef.value) {
+const openExaminationDialog = (isSHow: boolean, data: any, type: string) => {
+ if (examinationRef.value) {
examinationRef.value.handleExaminationDialog(isSHow)
examinationData.type = type
examinationData.info = data
}
-
}
// 閫変腑鑿滃崟
--
Gitblit v1.9.1