<template>
|
<div class="mobileHomeBox">
|
<div class="headerBox">
|
<el-icon @click="goHome"><ArrowLeft /></el-icon>
|
<div class="bookName">{{ bookConfig.bookName }}</div>
|
</div>
|
<div class="contentBox">
|
<div
|
class="pageBox"
|
:style="{ background: settingForm.bgColorActive }"
|
v-show="activeIndex == '0'"
|
>
|
<!-- 头部显示 -->
|
<div class="pageBox-header">
|
<div class="progress">
|
<div v-if="headerData.totlePage && bookConfig.bookName">
|
{{ headerData.process }}/{{ headerData.totlePage }}
|
</div>
|
</div>
|
</div>
|
<!-- 微应用盒子 -->
|
<div class="pageBox-content">
|
<div id="container"></div>
|
</div>
|
</div>
|
<div class="catalogBox" v-show="activeIndex == '1'">
|
<div class="catalogTab">
|
<div class="tabItem hover" @click="selectTabs('catalog')">
|
<div :class="activeTabs == 'catalog' ? 'text textActive' : 'text'">目录</div>
|
</div>
|
<div class="tabItem hover" @click="selectTabs('reMark')">
|
<div :class="activeTabs == 'reMark' ? 'text textActive' : 'text'">书签</div>
|
</div>
|
</div>
|
<div class="catalogList" v-if="activeTabs == 'catalog'">
|
<el-tree
|
ref="catalogTree"
|
default-expand-all="true"
|
:expand-on-click-node="false"
|
node-key="start"
|
highlight-current
|
:data="catalogueData"
|
:props="defaultProps"
|
v-if="catalogueData.length > 0"
|
@node-click="handleNodeClick"
|
>
|
<template #default="{ node, data }">
|
<div class="custom-tree-node">
|
<div class="catalogueLabel" :title="node.label">{{ node.label }}</div>
|
<span class="pageNum">{{ data.page }}</span>
|
</div>
|
</template>
|
</el-tree>
|
<div v-else>
|
<el-empty :image-size="60" description="暂无数据" />
|
</div>
|
</div>
|
<div class="reMarkList" v-if="activeTabs == 'reMark'">
|
<div v-if="reMarkList.length > 0">
|
<div v-for="(item, index) in reMarkList" :key="index" class="reMarkItem">
|
<div class="reMarkCon hover" @click="goReMark(item)">
|
<div>P{{ item.page }}</div>
|
<div class="con">{{ item.content }}</div>
|
</div>
|
<div class="deleteReMarkImg">
|
<img :src="shanchu" class="icon hover" @click="deleteReMark(item)" />
|
</div>
|
</div>
|
</div>
|
<div v-else>
|
<el-empty :image-size="60" description="暂无数据" />
|
</div>
|
</div>
|
</div>
|
<div class="resourceBox" v-show="activeIndex == '2'">
|
<div class="resourceTab">
|
<div class="tabItem hover" @click="selectResourceType('default')">
|
<div>默认资源</div>
|
<div :class="resourceType == 'default' ? 'text' : 'line'"></div>
|
</div>
|
<div class="tabItem hover" @click="selectResourceType('teacher')">
|
<div>教师资源</div>
|
<div :class="resourceType == 'teacher' ? 'text' : 'line'"></div>
|
</div>
|
<div class="tabItem hover" @click="selectResourceType('collection')">
|
<div>收藏</div>
|
<div :class="resourceType == 'collection' ? 'text' : 'line'"></div>
|
</div>
|
</div>
|
<div class="resourceSearchBox" v-if="classifySelectList.length > 0">
|
<div class="classification">
|
<div
|
v-for="item in classifySelectList"
|
:key="item.key"
|
class="flex1 hover"
|
@click="classifyClick(item)"
|
>
|
<div
|
:class="item.key == activeClassify ? 'activeClassify classifyItem' : 'classifyItem'"
|
>
|
<div class="title">{{ item.title }}</div>
|
<div class="count">{{ item.count }}</div>
|
</div>
|
</div>
|
<div class="showSearch flex1 hover">
|
<div :class="searchShow ? 'imgBox' : 'imgBox activeSearch'" @click="searchBtn">
|
<img :src="searchShow ? search : search1" />
|
</div>
|
</div>
|
</div>
|
<div class="searchBox">
|
<div class="inputBox" v-if="!searchShow">
|
<el-input
|
class="custom-input"
|
placeholder="请输入内容"
|
v-model="searchText"
|
@keyup.enter="searchBook"
|
clearable
|
@clear="handleClear"
|
>
|
<template #prefix>
|
<img :src="listSearch" @click="searchBook" />
|
</template>
|
</el-input>
|
</div>
|
</div>
|
</div>
|
<div v-if="resourceDataList.length > 0" class="resourceList">
|
<div v-for="(item, index) in resourceDataList" :key="item" class="resourceItem">
|
<div class="resourceImg">
|
<img :src="item.resourcePath" mode="" v-if="activeClassify == 'image'" />
|
<img :src="item.icon" mode="" v-else-if="item.icon && activeClassify != 'image'" />
|
<el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon>
|
<el-icon v-else-if="activeClassify == 'video'" size="30"><VideoCamera /></el-icon>
|
<el-icon v-else-if="activeClassify == 'other'" size="30"><Files /></el-icon>
|
<el-icon v-else-if="activeClassify == 'exercises'" size="30"><Tickets /></el-icon>
|
</div>
|
<div class="rName">
|
<div>{{ item.resourceName }}</div>
|
<div class="handleBox">
|
<el-icon
|
class="icon hover"
|
size="20"
|
@click="JumpPosition(item)"
|
v-if="resourceType == 'default'"
|
><LocationInformation
|
/></el-icon>
|
<el-icon
|
@click="goPlay(item)"
|
size="20"
|
class="icon hover"
|
v-if="item.resourceType == '视频'"
|
><VideoPlay
|
/></el-icon>
|
<el-icon
|
@click="goPlay(item, index)"
|
size="20"
|
class="icon hover"
|
v-if="item.resourceType == '音频' && playIndex != index"
|
><VideoPlay
|
/></el-icon>
|
<el-icon
|
@click="goPause()"
|
size="20"
|
class="icon hover"
|
v-if="item.resourceType == '音频' && playIndex == index"
|
><VideoPause
|
/></el-icon>
|
<el-icon
|
@click="getCapture(item, index)"
|
size="20"
|
class="icon hover"
|
v-if="item.resourceType == '图片'"
|
><View
|
/></el-icon>
|
<el-icon
|
size="20"
|
class="icon hover"
|
@click="goPlay(item)"
|
v-if="
|
!(
|
item.resourceType == '视频' ||
|
item.resourceType == '音频' ||
|
item.resourceType == '习题' ||
|
item.resourceType == '图片'
|
)
|
"
|
><Download
|
/></el-icon>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else>
|
<el-empty :image-size="60" description="暂无数据" />
|
</div>
|
</div>
|
<div class="noteBox" v-show="activeIndex == '3'">
|
<div class="searchBox">
|
<div class="inputBox">
|
<el-input
|
class="custom-input"
|
placeholder="请输入内容"
|
v-model="searchText"
|
@keyup.enter="searchBook"
|
clearable
|
@clear="handleClear"
|
>
|
<template #prefix>
|
<img :src="listSearch" @click="searchBook" />
|
</template>
|
</el-input>
|
</div>
|
</div>
|
<div class="screenBox">
|
<div class="title">筛选</div>
|
<div class="flex1 hover" @click="searchClick('all')">
|
<div :class="menuState.notesColor == 'all' ? ' allActive' : 'all'">全部</div>
|
</div>
|
<div
|
v-for="item in colorSelectList"
|
:key="item.key"
|
class="flex1 hover"
|
@click="searchClick(item)"
|
>
|
<div
|
:style="{ background: item.key }"
|
:class="item.key == menuState.notesColor ? 'activeScribe scribeItem' : 'scribeItem'"
|
></div>
|
</div>
|
</div>
|
<div v-if="scribeData.noteList.length > 0">
|
<div v-for="(noteItem, index) in scribeData.noteList" :key="noteItem">
|
<div class="chapterName">
|
<el-icon
|
@click="noteClose(index)"
|
v-if="scribeData.isShow && scribeData.openIndex == index"
|
class="hover"
|
><ArrowDown
|
/></el-icon>
|
<el-icon @click="noteOpen(index)" v-else class="hover"><ArrowRight /></el-icon>
|
<span>{{ noteItem.chapterName }}</span>
|
</div>
|
<div
|
v-for="(item, index1) in noteItem.noteList"
|
:key="item.key"
|
class="listItem"
|
v-show="scribeData.isShow && scribeData.openIndex == index"
|
>
|
<div class="textBox">
|
<div class="title">
|
<div class="title-con">
|
<div class="border-left" :style="{ 'border-right-color': item.color }"></div>
|
<span>{{ moment(item.createDate).format('YYYY-MM-DD') }}</span>
|
</div>
|
<div>
|
<img :src="bianji" @click="update(item)" class="hover" />
|
<img :src="shanchu" @click="deleteBtn(item)" class="hover" />
|
</div>
|
</div>
|
<div
|
class="noteText hover 123456"
|
@click="jumpContent(item)"
|
:style="{
|
background:
|
item.color == '#F5E12A'
|
? 'rgba(255,234,41,0.1)'
|
: item.color == '#76F0AE'
|
? 'rgba(83,255,162,0.1)'
|
: item.color == '#59CFF5'
|
? 'rgba(93,216,255,0.1)'
|
: item.color == '#CAA5FC'
|
? 'rgba(205,167,255,0.1)'
|
: item.color == '#F5A0B9'
|
? 'rgba(255,167,193,0.1)'
|
: item.color
|
}"
|
>
|
<div class="con hover">
|
{{ item.note }}
|
</div>
|
</div>
|
<div class="chapter">{{ item.txt }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else>
|
<el-empty :image-size="60" description="暂无数据" />
|
</div>
|
</div>
|
<div class="allSearchBox" v-show="activeIndex == '7'">
|
<div class="searchBox">
|
<div class="inputBox">
|
<el-input
|
class="custom-input"
|
placeholder="请输入内容"
|
v-model="searchText"
|
@keyup.enter="searchBook"
|
clearable
|
@clear="handleClear"
|
>
|
<template #prefix>
|
<img :src="listSearch" @click="searchBook" />
|
</template>
|
</el-input>
|
</div>
|
</div>
|
<div class="allSearch">
|
<div v-if="allSearchReault.length > 0" class="allSearchList">
|
<div v-for="(reault, index) in allSearchReault" :key="index">
|
<div class="chapterName">
|
<el-icon
|
@click="searchClose(index)"
|
v-if="searchReaultData.isShow && searchReaultData.openIndex == index"
|
class="hover"
|
><ArrowDown
|
/></el-icon>
|
<el-icon @click="searchOpen(index)" v-else class="hover"><ArrowRight /></el-icon>
|
<span>{{ reault.chapterName }} （{{ reault.itemList.length }}）</span>
|
</div>
|
<div
|
v-for="(item, index1) in reault.itemList"
|
:key="index1"
|
class="searchItem"
|
v-show="searchReaultData.isShow && searchReaultData.openIndex == index"
|
>
|
<div class="index">{{ index1 + 1 }}.</div>
|
<div class="searchCon hover" @click="goSearchContent(item)">
|
{{ item.txt }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else>
|
<el-empty :image-size="60" description="暂无数据" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="footerBox">
|
<el-menu
|
:default-active="activeIndex"
|
class="el-menu-demo"
|
mode="horizontal"
|
ellipsis
|
@select="handleSelect"
|
>
|
<el-menu-item index="1" class="menu-item">目录</el-menu-item>
|
<el-menu-item index="2" class="menu-item">资源</el-menu-item>
|
<el-menu-item index="3" class="menu-item">笔记</el-menu-item>
|
<el-menu-item index="4" class="menu-item">设置</el-menu-item>
|
<!-- <el-menu-item index="5" class="menu-item">番茄钟</el-menu-item>
|
<el-menu-item index="6" class="menu-item">习题</el-menu-item> -->
|
<el-menu-item index="7" class="menu-item">检索</el-menu-item>
|
</el-menu>
|
</div>
|
<!-- 设置 -->
|
<el-drawer
|
v-model="settingDrawer"
|
title="设置"
|
direction ="btt"
|
size="35%"
|
>
|
<div>
|
<div class="settingBox">
|
<el-form :model="settingForm" label-width="auto" style="max-width: 400px">
|
<el-form-item label="字体大小">
|
<div class="lineStyle">
|
<div class="lineTypeBox">
|
<div
|
v-for="item in settingForm.fontSizeList"
|
:key="item.key"
|
:class="
|
settingForm.fontSizeActive == item.key
|
? 'typeItem lineTypeActive'
|
: 'typeItem'
|
"
|
@click="fontSizeSelect(item)"
|
>
|
{{ item.lable }}
|
<div class="activeIcon" v-if="settingForm.fontSizeActive == item.key">
|
<img :src="xuanzhong" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="底色">
|
<div class="bgColor">
|
<div
|
v-for="item in settingForm.bgColorList"
|
:key="item.key"
|
class="flex1 hover"
|
@click="bgColorSelect(item)"
|
>
|
<div
|
:style="{
|
background: item.key,
|
'border-color': item.key == settingForm.bgColorActive ? '#0093FF' : '#EBEBEB'
|
}"
|
class="scribeItem"
|
>
|
<img :src="xuanzhong1" v-if="item.key == settingForm.bgColorActive" />
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</el-drawer>
|
<!-- 选中工具栏 -->
|
<div
|
class="dialogToolBox"
|
id="dialogToolBox"
|
v-show="showToolBox"
|
:style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }"
|
>
|
<div class="colorSelectBox" v-show="toolActive == '高亮' || toolActive == '划线'">
|
<div
|
v-for="item in colorSelectList"
|
:key="item.key"
|
class="flex1 hover"
|
@click="clickSelect(item)"
|
>
|
<div :style="{ background: item.key }" class="scribeItem">
|
<img :src="xuanzhong1" v-if="item.key == colorActive" />
|
</div>
|
</div>
|
</div>
|
<div class="toolSelectBox" v-show="toolActive != '高亮' && toolActive != '划线'">
|
<div v-for="item in dialogToolList" :key="item.icon" @click="dialogToolHandle(item)">
|
<div
|
:class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'"
|
v-if="item.isShow"
|
>
|
<el-tooltip class="box-item" effect="dark" :content="item.name" placement="bottom">
|
<img :src="item.icon" alt="" />
|
</el-tooltip>
|
</div>
|
<!-- <span>{{ item.name }}</span> -->
|
</div>
|
</div>
|
</div>
|
<!-- 划线，高亮删除 -->
|
<div
|
class="lineDeleteBox"
|
v-show="lineDelete.showLineDelete"
|
:style="{ top: `${lineDelete.top}px`, left: `${lineDelete.left}px` }"
|
>
|
<!-- <el-button @click="delUserKey">删除</el-button> -->
|
<div class="dialogToolItem">
|
<el-tooltip class="box-item" effect="dark" content="删除" placement="bottom">
|
<img :src="deleteIcon" @click="delUserKey" />
|
</el-tooltip>
|
</div>
|
<div class="dialogToolItem" v-if="isUpdate">
|
<el-tooltip class="box-item" effect="dark" content="笔记" placement="bottom">
|
<img :src="biji2" @click="updateNote" />
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
<el-dialog
|
title="添加笔记"
|
align-center
|
v-model="addNoteVisble"
|
:before-close="handleClose"
|
class="myNoteDialogs"
|
>
|
<div class="formBox">
|
<el-input
|
type="textarea"
|
:rows="4"
|
v-model="formData.desc"
|
placeholder="请输入笔记内容"
|
></el-input>
|
</div>
|
<div class="noteColorSelectBox">
|
<div
|
v-for="item in colorSelectList"
|
:key="item.key"
|
class="flex1 hover"
|
@click="clickSelectColor(item)"
|
>
|
<div :style="{ background: item.key }" class="scribeItem">
|
<img :src="xuanzhong" v-if="item.key == noteColorActive" />
|
</div>
|
</div>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="addUserKey" v-if="!isUpdate">确 定</el-button>
|
<el-button type="primary" @click="updateUserKey" v-if="isUpdate">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<!-- 图片 -->
|
<el-image-viewer
|
v-if="confirmDialog"
|
:zoom-rate="1.2"
|
@close="closePreview"
|
:initial-index="previewIndex"
|
:url-list="imgPreviewList"
|
/>
|
<el-dialog
|
title="资源"
|
align-center
|
v-model="resourVisble"
|
width="845"
|
class="resourDialog"
|
:before-close="resourVisbleClose"
|
>
|
<div class="videoBox" v-if="resourType == '视频'">
|
<video controls controlslist="nodownload" :src="testVideo"></video>
|
</div>
|
|
<!-- <div class="wordBox" v-if="resourType == 'word'">
|
<vue-office-docx :src="testWord" />
|
</div> -->
|
</el-dialog>
|
<div class="audioBox" v-show="false">
|
<audio ref="audioPlayer" :src="testAudio" controls @loadedmetadata="autoPlay"></audio>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { ref, reactive, watch, onMounted, onBeforeUnmount,inject } from 'vue'
|
import axios from 'axios'
|
import { ElMessage, ElMessageBox, valueEquals } from 'element-plus'
|
import useClipboard from 'vue-clipboard3'
|
const { toClipboard } = useClipboard()
|
const MG: any = inject('MG')
|
const toolClass = inject('toolClass')
|
import { loadMicroApp } from 'qiankun'
|
import { microApps } from '@/child.ts'
|
|
//获取当前路由的信息
|
import moment from 'moment'
|
|
import bianji from '@/assets/images/operation/bianji.png'
|
import shanchu from '@/assets/images/operation/delete.png'
|
import listSearch from '@/assets/images/operation/list-search.svg'
|
import search from '@/assets/images/operation/search.png'
|
import search1 from '@/assets/images/operation/search1.png'
|
import xuanzhong from '@/assets/images/operation/xuanzhong.png'
|
let token = localStorage.getItem('token')
|
const bookInfo = ref()
|
const isBuy = ref(false)
|
const tryPageCount = ref(0)
|
let microApp = null // 微应用实例
|
const bookConfig = ref({})
|
let userInfo = ref({})
|
//当前显示章节
|
const activeCatalog = ref()
|
const currentChapter = ref(1)
|
onMounted(() => {
|
if (token) {
|
getUserInfo()
|
}
|
if (localStorage.getItem('bookId')) {
|
getBookInfo()
|
}
|
// 加载微应用
|
|
microApp = loadMicroApp(microApps[localStorage.getItem('bookId')], {
|
sandbox: {
|
strictStyleIsolation: true,
|
experimentalStyleIsolation: true
|
},
|
singular: true
|
})
|
|
window.qiankunActions.onGlobalStateChange((state, prev) => {
|
console.log('父层state变化', state)
|
window.qiankunState = state
|
if (isBuy.value) {
|
if (window.qiankunState && window.qiankunState.initTestBook) {
|
window.qiankunState.initTestBook(localStorage.getItem('bookId') + '')
|
}
|
} else {
|
if (window.qiankunState && window.qiankunState.initTestBook) {
|
window.qiankunState.initTestBook(localStorage.getItem('bookId') + '', tryPageCount.value)
|
}
|
}
|
})
|
|
// 定义父层方法
|
window.qiankunActions.setGlobalState({
|
state: 1,
|
disableSign: false,
|
// windowSelection: (data) => {
|
// // 绑定子应用选择监听事件
|
// console.log(data, '子应用选择')
|
// if (data.txt) {
|
// getSelection(data)
|
// } else {
|
// showToolBox.value = false
|
// lineDelete.showLineDelete = false
|
// dictionaryData.showContent = false
|
// isUpdate.value = false
|
// toolActive.value = ''
|
// lineDelete.top = data.y + 20
|
// lineDelete.left = data.x
|
// }
|
// },
|
// chooseWords: (data) => {
|
// console.log(data, '英语生词')
|
// switch (data.type) {
|
// case 'word':
|
// if (data) {
|
// dialogToolData.txt = data.word
|
// dialogToolData.left = data.x
|
// dialogToolData.top = data.y + 20
|
// // getSearchResult()
|
// }
|
// break
|
// case 'swdt':
|
// siweiVisble.value = true
|
// break
|
// case 'readText':
|
// window.speechSynthesis.cancel()
|
// const synth = window.speechSynthesis
|
// const utterances = new SpeechSynthesisUtterance(data.data)
|
// // utterances.lang = 'EN' // 设置语言为中文
|
// synth.speak(utterances)
|
|
// break
|
// }
|
// },
|
getBookConfig: (data) => {
|
console.log(data.bookConfig, '图书配置')
|
bookConfig.value = data.bookConfig
|
getCatalogueData()
|
// getResourceData()
|
// getTextbookComponents()
|
// getReMarkList()
|
},
|
catalogChange: (data) => {
|
activeCatalog.value = data.showCatalogList
|
// if (window.qiankunState.disableSign) {
|
// // getSignData()
|
// }
|
// getSignData()
|
console.log(data, '章节切换：目前显示的三个章节')
|
},
|
pageChange: (data) => {
|
headerData.process = Number(data.page)
|
currentChapter.value = data.catalog
|
// console.log(data, '页面切换：目前显示页面和对应的章节信息')
|
// if (catalogTree.value) {
|
// catalogTree.value.setCurrentKey(Number(data.page))
|
// }
|
// showToolBox.value = false
|
// lineDelete.showLineDelete = false
|
// dictionaryData.showContent = false
|
|
// reMarkCon.value = data.text
|
// reMarResult.value = reMarkData.value.find((item) => {
|
// return item.chapterNum == data.catalog && item.page == data.page
|
// })
|
// if (reMarResult.value) {
|
// floatingToolData.activeToolData = '书签'
|
// } else {
|
// floatingToolData.activeToolData = ''
|
// }
|
}
|
})
|
})
|
|
onBeforeUnmount(() => {
|
if (microApp) {
|
microApp.unmount() // 卸载微应用
|
}
|
})
|
|
const getUserInfo = () => {
|
MG.identity.getCurrentAppUser().then((res) => {
|
if (res) {
|
let teacherRole = res.roleLinks.find((item) => item.role.refCode == 'teacher')
|
let teacherInfos = res.infoList.find((item) => item.type == 'teacherInfo')
|
let wechatInfo = res.infoList.find((item) => item.type == 'WeChat')
|
let studentInfo = res.infoList.find((item) => item.type == 'Default')
|
let phoneInfo = res.secretList.find((item) => item.type == 'MobilePhone')
|
let nameAndPassword = res.secretList.find((item) => item.type == 'LoginNameAndPassword')
|
|
if (teacherRole && teacherInfos) {
|
userInfo.value = {
|
...teacherInfos,
|
name: teacherInfos.name,
|
role: 'Teacher',
|
roleId: teacherRole.role.id
|
}
|
localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
|
} else if (wechatInfo) {
|
userInfo.value = {
|
...wechatInfo,
|
phoneNumber: phoneInfo?.credential,
|
role: 'Student'
|
}
|
} else if (phoneInfo) {
|
userInfo.value = {
|
name: phoneInfo.credential
|
}
|
localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
|
}
|
}
|
})
|
}
|
//根据refcode获取图书信息
|
|
const getBookInfo = () => {
|
const obj = {
|
storeInfo: 'jsek_digitalTextbooks',
|
path: '*',
|
queryType: '*',
|
coverSize: {
|
width: 150
|
},
|
paging: {
|
start: 0,
|
size: 6
|
},
|
filterList: [
|
{
|
value: 'Normal',
|
field: 'state'
|
}
|
],
|
fields: {
|
author: [],
|
RefCodes: [localStorage.getItem('bookId')],
|
probationPage: []
|
}
|
}
|
MG.store.getProductList(obj).then((res) => {
|
bookInfo.value = res.datas[0]
|
if (res.datas[0].purchasedSaleMethodIdList.includes(res.datas[0].defaultSaleMethodId)) {
|
isBuy.value = true
|
} else {
|
isBuy.value = false
|
}
|
tryPageCount.value = Number(res.datas[0].probationPage)
|
})
|
}
|
|
//菜单
|
const activeIndex = ref('0')
|
const handleSelect = (key: string, keyPath: string[]) => {
|
console.log(key, keyPath)
|
if (key == '4') {
|
settingDrawer.value=true
|
} else {
|
activeIndex.value = key
|
switch (activeIndex.value) {
|
case '1':
|
getReMarkList()
|
break
|
case '2':
|
getResourceData()
|
break
|
case '3':
|
getNotesList()
|
break
|
}
|
}
|
}
|
const goHome = () => {
|
activeIndex.value = '0'
|
}
|
|
const catalogueData = ref([]) //获取目录
|
const reMarkList = ref([]) //书签
|
const reMarkData = ref([]) //书签
|
|
const defaultProps = {
|
children: 'children',
|
label: 'label',
|
start: 'start'
|
}
|
const headerData = reactive({
|
process: 0,
|
totlePage: 0
|
})
|
|
//目录菜单
|
const activeTabs = ref('catalog')
|
const selectTabs = (type) => {
|
activeTabs.value = type
|
if (type == 'catalog') {
|
getCatalogueData()
|
} else {
|
getReMarkList()
|
}
|
}
|
//目录列表
|
const getCatalogueData = () => {
|
axios
|
.get(bookConfig.value.resourceUrl + '/information.json')
|
.then(function (response) {
|
var json = response.data
|
// 处理获取到的json数据
|
console.log(json, '目录')
|
catalogueData.value = json.data
|
headerData.totlePage = json.data[json.data.length - 1].end
|
})
|
.catch(function (error) {
|
console.log(error)
|
})
|
}
|
const handleNodeClick = (data) => {
|
console.log(data)
|
activeIndex.value = '0'
|
if (localStorage.getItem('tryPageCount')) {
|
if (data.start < localStorage.getItem('tryPageCount')) {
|
headerData.process = data.start
|
if (window.qiankunState && window.qiankunState.gotoPage)
|
window.qiankunState.gotoPage(data.chapter, data.start)
|
} else {
|
ElMessage({
|
message: '试读已结束!',
|
type: 'warning'
|
})
|
}
|
} else {
|
headerData.process = data.start
|
if (window.qiankunState && window.qiankunState.gotoPage)
|
window.qiankunState.gotoPage(data.chapter, data.start)
|
}
|
}
|
|
//全文检索
|
const catalogTree = ref()
|
const allSearchReault = ref([])
|
const searchReaultData = reactive({
|
isShow: true,
|
openIndex: 0
|
})
|
|
const getAllSearchReault = () => {
|
allSearchReault.value = []
|
if (window.qiankunState && window.qiankunState.searchBookByKeyword) {
|
let searchReault = window.qiankunState.searchBookByKeyword(searchText.value)
|
if (searchReault.length > 0) {
|
let catalogueList = sortArr(catalogueData.value, 'chapter')
|
if (catalogueList.length > 0) {
|
catalogueList.forEach((item) => {
|
let labels = ''
|
if (item.length > 1) {
|
labels = item.map((i) => i.label).join('/')
|
}
|
let itemList = []
|
searchReault.forEach((item1) => {
|
if (item[0].chapter == item1.catalog) {
|
itemList.push(item1)
|
}
|
})
|
if (itemList.length > 0) {
|
allSearchReault.value.push({
|
chapter: item[0].chapter,
|
chapterName: labels ? labels : item[0].label,
|
itemList: itemList
|
})
|
}
|
})
|
}
|
console.log(allSearchReault.value, 444)
|
}
|
}
|
}
|
function sortArr(arr, str) {
|
var _arr = [],
|
_t = [],
|
// 临时的变量
|
_tmp
|
|
// 按照特定的参数将数组排序将具有相同值得排在一起
|
arr = arr.sort(function (a, b) {
|
var s = a[str],
|
t = b[str]
|
|
return s < t ? -1 : 1
|
})
|
|
if (arr.length) {
|
_tmp = arr[0][str]
|
}
|
// console.log( arr );
|
// 将相同类别的对象添加到统一个数组
|
for (var i in arr) {
|
if (arr[i][str] === _tmp) {
|
_t.push(arr[i])
|
} else {
|
_tmp = arr[i][str]
|
_arr.push(_t)
|
_t = [arr[i]]
|
}
|
}
|
// 将最后的内容推出新数组
|
_arr.push(_t)
|
return _arr
|
}
|
|
//检索章节收起
|
const searchOpen = (index) => {
|
searchReaultData.isShow = true
|
searchReaultData.openIndex = index
|
}
|
//检索章节打开
|
const searchClose = (index) => {
|
searchReaultData.isShow = false
|
searchReaultData.openIndex = index
|
}
|
|
//检索跳转
|
const goSearchContent = (item) => {
|
console.log(item)
|
activeIndex.value = '0'
|
if (window.qiankunState && window.qiankunState.gotoPage) {
|
window.qiankunState.jumpSearchItem(item)
|
}
|
}
|
|
//书签列表
|
const getReMarkList = () => {
|
reMarkList.value = []
|
reMarkData.value = []
|
MG.identity
|
.getUserKey({
|
domain: 'reMark',
|
keys: [bookConfig.value.bookId]
|
})
|
.then((res) => {
|
if (res && res.length > 0 && res[0].value) {
|
reMarkData.value = JSON.parse(res[0].value)
|
let list = JSON.parse(res[0].value)
|
list.forEach((item) => {
|
let text = searchText.value.replace(/^\s*|\s*$/g, '')
|
if (searchText.value) {
|
if (item.name.indexOf(text) > -1) {
|
reMarkList.value.push(item)
|
}
|
} else {
|
reMarkList.value.push(item)
|
}
|
})
|
}
|
})
|
}
|
|
//跳转
|
const goReMark = (item) => {
|
console.log(item)
|
activeIndex.value = '0'
|
if (window.qiankunState && window.qiankunState.gotoPage) {
|
window.qiankunState.gotoPage(Number(item.chapterNum), Number(item.page))
|
}
|
}
|
//书签列表删除书签
|
const deleteReMark = (item) => {
|
let list = reMarkList.value.filter((itemData) => itemData.id !== item.id)
|
MG.identity
|
.setUserKey({
|
setKeyRequests: [
|
{
|
domain: 'reMark',
|
key: bookConfig.value.bookId,
|
value: JSON.stringify(list)
|
}
|
]
|
})
|
.then((res) => {
|
ElMessage({
|
message: '删除书签成功!',
|
type: 'success'
|
})
|
getReMarkList()
|
})
|
}
|
|
//资源
|
const classifySelectList = ref([]) //资源列表
|
//资源类型
|
const resourceType = ref('default') //默认/教师
|
const activeClassify = ref('')
|
const searchShow = ref(true)
|
const defaultResourceList = ref([])
|
const teacherResourceList = ref([])
|
const resourceDataList = ref([])
|
const resourVisble = ref(false)
|
const resourType = ref('') //资源类型图片/音频
|
const testVideo = ref('') //视频链接
|
const testAudio = ref('') //音频链接
|
const testWord = ref('') //word链接
|
const playIndex = ref(null) //音频播放
|
const audioPlayer = ref(null)
|
const imgPreviewList = ref([])
|
const imgUrl = ref()
|
const confirmDialog = ref<Boolean>(false)
|
const previewIndex = ref(0)
|
|
const getResourceData = () => {
|
imgPreviewList.value = []
|
axios
|
.get(bookConfig.value.resourceUrl + '/resource.json?t=12')
|
.then(function (response) {
|
var json = response.data
|
// 处理获取到的json数据
|
if (json.length > 0) {
|
defaultResourceList.value = []
|
teacherResourceList.value = []
|
// 获取数组中所有对象的age属性的数量
|
json.forEach((item) => {
|
if (item.iconPath) {
|
item.icon = bookConfig.value.resourceUrl + '/' + item.iconPath
|
} else {
|
item.icon = ''
|
}
|
if (resourceType.value == 'default') {
|
if (item.isDefaultResource == '是') {
|
defaultResourceList.value.push(item)
|
}
|
} else {
|
if (item.isTeacherResource == '是' && item.isDefaultResource == '否') {
|
teacherResourceList.value.push(item)
|
}
|
}
|
})
|
if (defaultResourceList.value.length > 0) {
|
let imgCount = 0
|
let audioCount = 0
|
let videoCount = 0
|
let exercisesCount = 0
|
let otherCount = 0
|
resourceDataList.value = []
|
defaultResourceList.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 (resItem.resourceType == '习题') {
|
if (activeClassify.value == 'exercises') {
|
resourceDataList.value.push(resItem)
|
}
|
exercisesCount++
|
} 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 (exercisesCount > 0) {
|
classifySelectList.value.push({
|
title: '习题',
|
count: exercisesCount,
|
key: 'exercises'
|
})
|
}
|
if (otherCount > 0) {
|
classifySelectList.value.push({
|
title: '其他',
|
count: otherCount,
|
key: 'other'
|
})
|
}
|
if (!activeClassify.value) {
|
activeClassify.value = classifySelectList.value[0].key
|
defaultResourceList.value.forEach((resItem1) => {
|
if (resItem1.resourceType == classifySelectList.value[0].title) {
|
resourceDataList.value.push(resItem1)
|
}
|
})
|
}
|
} else {
|
let imgCount = 0
|
let audioCount = 0
|
let videoCount = 0
|
let exercisesCount = 0
|
let otherCount = 0
|
resourceDataList.value = []
|
teacherResourceList.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 (resItem.resourceType == '习题') {
|
if (activeClassify.value == 'exercises') {
|
resourceDataList.value.push(resItem)
|
}
|
exercisesCount++
|
} 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 (exercisesCount > 0) {
|
classifySelectList.value.push({
|
title: '习题',
|
count: exercisesCount,
|
key: 'exercises'
|
})
|
}
|
if (otherCount > 0) {
|
classifySelectList.value.push({
|
title: '其他',
|
count: otherCount,
|
key: 'other'
|
})
|
}
|
if (!activeClassify.value) {
|
activeClassify.value = classifySelectList.value[0].key
|
teacherResourceList.value.forEach((resItem1) => {
|
if (resItem1.resourceType == classifySelectList.value[0].title) {
|
resourceDataList.value.push(resItem1)
|
}
|
})
|
}
|
}
|
}
|
})
|
.catch(function (error) {
|
console.log(error)
|
})
|
}
|
//资源播放视频
|
const goPlay = (data, index) => {
|
resourType.value = data.resourceType
|
if (data.resourceType == '视频') {
|
if (data.md5) {
|
testVideo.value = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5
|
} else {
|
testVideo.value = bookConfig.value.resourceUrl + '/' + data.resourcePath
|
}
|
resourVisble.value = true
|
} else if (data.resourceType == '音频') {
|
playIndex.value = index
|
if (data.md5) {
|
testAudio.value = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5
|
} else {
|
testAudio.value = bookConfig.value.resourceUrl + '/' + data.resourcePath
|
}
|
autoPlay()
|
} else {
|
if (data.md5) {
|
window.open(bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5)
|
} else if (data.resourcePath) {
|
window.open(bookConfig.value.resourceUrl + '/' + data.resourcePath)
|
}
|
}
|
|
// else if (data.resourceType == 'word') {
|
// testWord.value = bookConfig.value.resourceUrl + '/' + data.resourcePath
|
// }
|
}
|
// 关闭视频
|
const resourVisbleClose = () => {
|
resourVisble.value = false
|
testVideo.value = ''
|
}
|
const autoPlay = () => {
|
if (audioPlayer.value) {
|
audioPlayer.value.play()
|
}
|
}
|
const goPause = () => {
|
playIndex.value = null
|
testAudio.value = ''
|
}
|
|
//查看截图
|
const getCapture = (item, index) => {
|
imgUrl.value = item.imgUrl || item.resourcePath
|
previewIndex.value = index
|
confirmDialog.value = true
|
}
|
const closePreview = () => {
|
confirmDialog.value = false
|
}
|
|
//资源跳转到指定位置
|
const JumpPosition = (data) => {
|
console.log(data, '跳转')
|
activeIndex.value = '0'
|
if (window.qiankunState && window.qiankunState.gotoPage) {
|
window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination))
|
}
|
}
|
|
//资源类型选择默认/教师
|
const selectResourceType = (type) => {
|
resourceType.value = type
|
searchText.value = ''
|
if (type == 'collection') {
|
} else {
|
getResourceData()
|
}
|
}
|
//资源类型图片/视频/音频/习题/其他
|
const classifyClick = (item) => {
|
activeClassify.value = item.key
|
resourceDataList.value = []
|
searchText.value = ''
|
getResourceData()
|
}
|
const searchBtn = () => {
|
if (searchShow.value) {
|
searchShow.value = false
|
} else {
|
searchShow.value = true
|
}
|
}
|
|
//笔记，高亮，划线
|
const scribeData = reactive({
|
isShow: true,
|
openIndex: 0,
|
loading: false,
|
scribeDataList: [], //划线菜单列表
|
lineHeightList: [], //高亮菜单列表
|
noteList: [] //笔记菜单列表
|
})
|
const noteColorActive = ref('')
|
//笔记弹窗
|
const addNoteVisble = ref(false)
|
const isUpdate = ref(false)
|
const formData = reactive({
|
id: '',
|
desc: ''
|
})
|
|
const colorSelectList = reactive([
|
{
|
label: '黄色',
|
key: '#F5E12A'
|
},
|
{
|
label: '绿色',
|
key: '#76F0AE'
|
},
|
{
|
label: '蓝色',
|
key: '#59CFF5'
|
},
|
{
|
label: '紫色',
|
key: '#CAA5FC'
|
},
|
{
|
label: '粉色',
|
key: '#F5A0B9'
|
}
|
])
|
|
//菜单笔记列表
|
const getNotesList = () => {
|
let chapterList = []
|
catalogueData.value.forEach((item) => {
|
chapterList.push(item.chapter + '')
|
})
|
let uniqueArray = [...new Set(chapterList)]
|
scribeData.noteList = []
|
MG.identity
|
.getUserKey({
|
domain: 'notes-' + bookConfig.value.bookId,
|
keys: uniqueArray
|
})
|
.then((res) => {
|
if (res && res.length > 0) {
|
for (let i = 0; i < res.length; i++) {
|
const item = res[i]
|
// 储值
|
let data = catalogueData.value.find((item1) => item1.chapter == Number(item.key))
|
// console.log(data,'666')
|
let dataList = []
|
if (catalogueData.value.length > 0) {
|
catalogueData.value.forEach((item1) => {
|
if (item1.chapter == Number(item.key)) {
|
dataList.push(item1)
|
}
|
})
|
}
|
let labels = ''
|
if (dataList.length > 1) labels = dataList.map((item) => item.label).join('/')
|
|
let list = JSON.parse(item.value)
|
let itemList = []
|
if (list.length > 0) {
|
list.forEach((item) => {
|
if (searchText.value) {
|
let text = searchText.value.replace(/^\s*|\s*$/g, '')
|
if (item.note.indexOf(text) > -1 || item.txt.indexOf(text) > -1) {
|
if (menuState.notesColor == 'all') {
|
itemList = list
|
} else if (item.color == menuState.notesColor) {
|
itemList.push(item)
|
}
|
}
|
} else {
|
if (menuState.notesColor == 'all') {
|
itemList = list
|
} else if (item.color == menuState.notesColor) {
|
itemList.push(item)
|
}
|
}
|
})
|
}
|
if (dataList[0].chapter == Number(item.key) && itemList.length > 0) {
|
scribeData.noteList.push({
|
chapter: dataList[0].chapter,
|
chapterName: labels ? labels : dataList[0].label,
|
noteList: itemList
|
})
|
}
|
}
|
console.log(scribeData.noteList, 'scribeData.noteList')
|
}
|
})
|
}
|
//笔记颜色筛选
|
const searchClick = (item) => {
|
if (item != 'all') {
|
menuState.notesColor = item.key
|
} else {
|
menuState.notesColor = 'all'
|
}
|
getNotesList()
|
}
|
//笔记章节收起
|
const noteOpen = (index) => {
|
console.log(scribeData.isShow, index)
|
scribeData.isShow = true
|
scribeData.openIndex = index
|
}
|
//笔记章节打开
|
const noteClose = (index) => {
|
scribeData.isShow = false
|
scribeData.openIndex = index
|
}
|
//笔记跳转
|
const jumpContent = (item) => {
|
console.log(item)
|
activeIndex.value = '0'
|
if (window.qiankunState && window.qiankunState.gotoPage) {
|
window.qiankunState.gotoPage(Number(item.chapterNum), Number(item.page))
|
}
|
}
|
|
//笔记选颜色
|
const clickSelectColor = (item) => {
|
noteColorActive.value = item.key
|
}
|
|
//菜单笔记编辑
|
const update = (item) => {
|
console.log(item)
|
dialogToolData.chapter = item.chapterNum
|
noteColorActive.value = item.color
|
formData.id = item.id
|
formData.desc = item.note
|
addNoteVisble.value = true
|
isUpdate.value = true
|
}
|
const updateUserKey = () => {
|
let data = scribeData.noteList.find((item1) => item1.chapter == dialogToolData.chapter)
|
data.noteList.forEach((itemNote) => {
|
if ((itemNote.id = formData.id)) {
|
itemNote.note = formData.desc
|
itemNote.color = noteColorActive.value
|
}
|
})
|
MG.identity
|
.setUserKey({
|
setKeyRequests: [
|
{
|
domain: 'notes-' + bookConfig.value.bookId,
|
key: dialogToolData.chapter,
|
value: JSON.stringify(data.noteList)
|
}
|
]
|
})
|
.then((res) => {
|
addNoteVisble.value = false
|
isUpdate.value = false
|
getNotesList()
|
if (!window.qiankunState.disableSign) {
|
getSignData()
|
}
|
})
|
}
|
|
//笔记弹窗关闭
|
const handleClose = () => {
|
addNoteVisble.value = false
|
showToolBox.value = false
|
colorActive.value = ''
|
}
|
|
//菜单删除笔记
|
const deleteBtn = (item) => {
|
let data = scribeData.noteList.find((item1) => item1.chapter == Number(item.chapterNum))
|
// 移除
|
let list = data.noteList.filter((itemData) => itemData.id !== item.id)
|
ElMessageBox.confirm('确定要删除此笔记吗？', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
autofocus: false,
|
type: 'warning'
|
})
|
.then(() => {
|
MG.identity
|
.setUserKey({
|
setKeyRequests: [
|
{
|
domain: 'notes-' + bookConfig.value.bookId,
|
key: item.chapterNum,
|
value: JSON.stringify(list)
|
}
|
]
|
})
|
.then((res) => {
|
ElMessage({
|
message: '删除笔记成功!',
|
type: 'success'
|
})
|
getNotesList()
|
if (window.qiankunState && window.qiankunState.delSign) {
|
window.qiankunState.delSign({ ids: [item.id] })
|
}
|
})
|
})
|
.catch(() => {})
|
}
|
|
const searchText = ref('')
|
const menuState = reactive({
|
open: true,
|
notesColor: 'all' //笔记颜色
|
})
|
const searchBook = async () => {
|
switch (activeIndex.value) {
|
case '3':
|
getNotesList()
|
break
|
case '2':
|
let dataList = JSON.parse(JSON.stringify(resourceDataList.value))
|
if (searchText.value) {
|
resourceDataList.value = []
|
searchText.value = searchText.value.replace(/^\s*|\s*$/g, '')
|
let text = searchText.value.replace(/^\s*|\s*$/g, '')
|
dataList.forEach((item) => {
|
if (item.resourceName.indexOf(text) > -1) {
|
resourceDataList.value.push(item)
|
}
|
})
|
} else {
|
getResourceData()
|
}
|
break
|
case '1':
|
getReMarkList()
|
break
|
case '7':
|
getAllSearchReault()
|
break
|
}
|
}
|
const handleClear = () => {
|
switch (activeIndex.value) {
|
case '3':
|
getNotesList()
|
break
|
case '2':
|
getResourceData()
|
break
|
case '1':
|
getReMarkList()
|
break
|
case '7':
|
break
|
}
|
}
|
|
let dialogToolList = [] //选中文字操作
|
//选中文字工具栏
|
const showToolBox = ref(false)
|
const toolActive = ref('')
|
const colorActive = ref('')
|
const dialogToolData = reactive({
|
left: 500,
|
top: 300,
|
txt: '',
|
page: '',
|
chapter: '', //选中文字所在章节
|
lineHeight: [], //高亮
|
scribeList: [], //划线
|
notesList: [] //笔记
|
})
|
|
///内容选中
|
const getSelection = (data) => {
|
if (data.txt) {
|
toolActive.value = ''
|
dialogToolData.txt = data.txt
|
dialogToolData.page = data.page
|
dialogToolData.chapter = data.chapterNum
|
dialogToolData.left = data.x
|
dialogToolData.top = data.y
|
showToolBox.value = true
|
dictionaryData.showContent = false
|
lineDelete.showLineDelete = false
|
dictionaryData.showContent = false
|
}
|
}
|
|
const clickSelect = (item) => {
|
colorActive.value = item.key
|
addUserKey()
|
}
|
|
const addUserKey = () => {
|
let dom = ''
|
let data = null
|
switch (toolActive.value) {
|
case '高亮':
|
dom = 'highLightData-' + bookConfig.value.bookId
|
data = dialogToolData.lineHeight[dialogToolData.chapter]
|
if (!data) data = []
|
data.push({
|
id: toolClass.uuid(8),
|
txt: dialogToolData.txt,
|
page: dialogToolData.page,
|
chapterNum: dialogToolData.chapter,
|
type: 'Highlight',
|
color: colorActive.value
|
})
|
break
|
case '划线':
|
dom = 'underline-' + bookConfig.value.bookId
|
data = dialogToolData.scribeList[dialogToolData.chapter]
|
if (!data) data = []
|
data.push({
|
id: toolClass.uuid(8),
|
txt: dialogToolData.txt,
|
page: dialogToolData.page,
|
chapterNum: dialogToolData.chapter,
|
type: 'Dashing',
|
color: colorActive.value
|
})
|
break
|
case '笔记':
|
if (!formData.desc.replace(/^\s*|\s*$/g, '')) {
|
ElMessage.error('笔记内容不能为空!')
|
return
|
}
|
if (!noteColorActive.value) {
|
ElMessage.error('请选择笔记颜色!')
|
return
|
}
|
dom = 'notes-' + bookConfig.value.bookId
|
data = dialogToolData.notesList[dialogToolData.chapter]
|
if (!data) data = []
|
data.push({
|
id: toolClass.uuid(8),
|
txt: dialogToolData.txt,
|
page: dialogToolData.page,
|
chapterNum: dialogToolData.chapter,
|
type: 'Note',
|
color: noteColorActive.value,
|
createDate: new Date(),
|
note: formData.desc.replace(/^\s*|\s*$/g, '')
|
})
|
|
break
|
}
|
MG.identity
|
.setUserKey({
|
setKeyRequests: [
|
{
|
domain: dom,
|
key: dialogToolData.chapter,
|
value: JSON.stringify(data)
|
}
|
]
|
})
|
.then((res) => {
|
showToolBox.value = false
|
addNoteVisble.value = false
|
colorActive.value = ''
|
noteColorActive.value = ''
|
toolActive.value = ''
|
getSignData()
|
getNotesList()
|
})
|
}
|
|
const getSignData = () => {
|
MG.identity
|
.getUserKey({
|
domain: 'highLightData-' + bookConfig.value.bookId,
|
keys: activeCatalog.value.map((item) => item + '')
|
})
|
.then((res) => {
|
if (res && res.length > 0) {
|
for (let i = 0; i < res.length; i++) {
|
const item = res[i]
|
const data = JSON.parse(item.value)
|
// 储值
|
dialogToolData.lineHeight[item.key] = data
|
// 渲染
|
for (let j = 0; j < data.length; j++) {
|
const citem = data[j]
|
if (window.qiankunState && window.qiankunState.renderSign)
|
window.qiankunState.renderSign(citem.type, citem)
|
}
|
}
|
}
|
})
|
MG.identity
|
.getUserKey({
|
domain: 'underline-' + bookConfig.value.bookId,
|
keys: activeCatalog.value.map((item) => item + '')
|
})
|
.then((res) => {
|
if (res && res.length > 0) {
|
for (let i = 0; i < res.length; i++) {
|
const item = res[i]
|
const data = JSON.parse(item.value)
|
// 储值
|
dialogToolData.scribeList[item.key] = data
|
|
// 渲染
|
if (data.length > 0) {
|
for (let j = 0; j < data.length; j++) {
|
const citem = data[j]
|
if (window.qiankunState && window.qiankunState.renderSign)
|
window.qiankunState.renderSign(citem.type, citem)
|
}
|
}
|
}
|
}
|
})
|
MG.identity
|
.getUserKey({
|
domain: 'notes-' + bookConfig.value.bookId,
|
keys: activeCatalog.value.map((item) => item + '')
|
})
|
.then((res) => {
|
if (res && res.length > 0) {
|
for (let i = 0; i < res.length; i++) {
|
const item = res[i]
|
const data = JSON.parse(item.value)
|
// 储值
|
dialogToolData.notesList[item.key] = data
|
// 渲染
|
if (data.length > 0) {
|
for (let j = 0; j < data.length; j++) {
|
const citem = data[j]
|
if (window.qiankunState && window.qiankunState.renderSign)
|
window.qiankunState.renderSign(citem.type, citem)
|
}
|
}
|
}
|
}
|
})
|
}
|
|
//正文中删除高亮，划线，笔记操作框
|
const lineDelete = reactive({
|
showLineDelete: false,
|
top: 0,
|
left: 0,
|
deleteType: '',
|
id: ''
|
})
|
|
//设置
|
const settingDrawer = ref(false)
|
const settingForm = reactive({
|
fontSizeList: [
|
{
|
lable: '小',
|
key: 14
|
},
|
{
|
lable: '中',
|
key: 16
|
},
|
|
{
|
lable: '大',
|
key: 18
|
}
|
],
|
fontSizeActive: 16,
|
bgColorList: [
|
{
|
lable: '白',
|
key: '#fff'
|
},
|
{
|
lable: '黄',
|
key: '#FBF9F4'
|
},
|
{
|
lable: '绿',
|
key: '#F2FFF7'
|
},
|
{
|
lable: '紫',
|
key: '#F6F4FC'
|
},
|
{
|
lable: '粉',
|
key: '#FFFAF9'
|
}
|
],
|
bgColorActive: '#FBF9F4'
|
})
|
// 设置字号
|
const fontSizeSelect = (item) => {
|
settingForm.fontSizeActive = item.key
|
window.qiankunActions.setGlobalState({
|
fontSize: item.key
|
})
|
}
|
//设置背景色
|
const bgColorSelect = (item) => {
|
settingForm.bgColorActive = item.key
|
}
|
</script>
|
|
<style lang="less">
|
.mobileHomeBox {
|
width: 100%;
|
height: 100%;
|
.headerBox {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
position: fixed;
|
left: 0;
|
top: 0;
|
z-index: 2;
|
background-color: #fff;
|
border-bottom: 1px solid #e0e0e0;
|
.el-icon {
|
margin: 0 10px;
|
}
|
.bookName {
|
flex: 1;
|
text-align: center;
|
}
|
}
|
.footerBox {
|
width: 100%;
|
height: 50px;
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
z-index: 2020;
|
background-color: #fff;
|
border-top: 1px solid #e0e0e0;
|
.el-menu-demo {
|
width: 100%;
|
justify-content: center;
|
.menu-item {
|
min-width: calc(100% / 4);
|
}
|
}
|
}
|
.contentBox {
|
margin: 50px 0;
|
height: 100%;
|
width: 100%;
|
.pageBox {
|
.pageBox-header {
|
width: 100%;
|
height: 30px;
|
padding: 0 10px;
|
line-height: 30px;
|
text-align: right;
|
}
|
.pageBox-content {
|
height: calc(100vh - 130px);
|
#container {
|
background: #fbf9f4;
|
height: 100%;
|
#__qiankun_microapp_wrapper_for_app_content_1__ {
|
height: 100%;
|
}
|
#__qiankun_microapp_wrapper_for_app_content__{
|
height: 100%;
|
}
|
}
|
}
|
}
|
.catalogBox {
|
height: calc(100vh - 100px);
|
.catalogTab {
|
height: 50px;
|
display: flex;
|
// justify-content: center;
|
align-items: center;
|
border-bottom: 1px solid #e0e0e0;
|
.tabItem {
|
flex: 1;
|
text-align: center;
|
.textActive {
|
color: #0093ff;
|
}
|
}
|
}
|
.catalogList {
|
height: calc(100vh - 150px);
|
overflow: auto;
|
padding: 20px;
|
}
|
.reMarkList {
|
padding: 20px;
|
.reMarkItem {
|
border-bottom: 1px solid #efefef;
|
padding: 10px 0;
|
.deleteReMarkImg {
|
text-align: right;
|
}
|
}
|
}
|
}
|
.searchBox {
|
padding: 5px;
|
|
.inputBox {
|
width: 85%;
|
margin: 10px auto;
|
.custom-input {
|
border: 1px solid #0093ff !important;
|
border-radius: 50px;
|
overflow: hidden;
|
background: #fff;
|
height: 34px;
|
}
|
|
.is-focus,
|
.el-input__wrapper {
|
box-shadow: none !important;
|
.el-input__inner {
|
border: none !important;
|
height: 34px !important;
|
}
|
}
|
.el-input-group__append {
|
padding: 0 10px !important;
|
background: none !important;
|
}
|
}
|
}
|
.resourceBox {
|
.resourceTab {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 16px;
|
border-bottom: 1px solid #e0e0e0;
|
.tabItem {
|
flex: 1;
|
text-align: center;
|
line-height: 47px;
|
}
|
.text {
|
width: 43px;
|
height: 3px;
|
margin: 0 auto;
|
background: #0093ff;
|
border-radius: 3px 3px 0px 0px;
|
}
|
.line {
|
height: 3px;
|
}
|
}
|
.resourceSearchBox {
|
border-bottom: 1px solid #efefef;
|
}
|
.classification {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 10px;
|
.flex1 {
|
flex: 1;
|
text-align: center;
|
}
|
.title {
|
color: #999999;
|
}
|
.count {
|
width: 35px;
|
margin: 0 auto;
|
margin-top: 5px;
|
border-radius: 10px;
|
background: #fff;
|
color: #c8c8c8;
|
height: 18px;
|
font-size: 12px;
|
}
|
.activeClassify,
|
.classifyItem:hover {
|
.title {
|
color: #0093ff;
|
}
|
.count {
|
background: #0093ff;
|
color: #fff;
|
}
|
}
|
.showSearch {
|
.imgBox {
|
width: 39px;
|
height: 24px;
|
border-radius: 16px;
|
margin: 0 auto;
|
}
|
.imgBox:hover,
|
.activeSearch {
|
border: 1px solid #0093ff;
|
}
|
}
|
}
|
.inputBox {
|
margin: 0 auto !important;
|
}
|
.resourceList {
|
padding: 20px;
|
.resourceItem {
|
padding: 10px 0;
|
display: flex;
|
.resourceImg {
|
width: 150px;
|
height: 80px;
|
background: #fff;
|
border-radius: 5px;
|
overflow: hidden;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
border: 1px solid #efefef;
|
img {
|
height: 100%;
|
width: 100%;
|
object-fit: contain;
|
}
|
}
|
.rName {
|
flex: 1;
|
margin-left: 20px;
|
position: relative;
|
.handleBox {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
.el-icon {
|
margin-right: 10px;
|
}
|
}
|
}
|
}
|
}
|
}
|
.screenBox {
|
display: flex;
|
padding: 0 10px;
|
width: 350px;
|
.title {
|
margin: 0;
|
padding: 0 10px;
|
border: none;
|
}
|
|
.flex1 {
|
flex: 1;
|
display: flex;
|
// align-items: center;
|
justify-content: space-between;
|
}
|
|
.all {
|
width: 50px;
|
height: 22px;
|
border-radius: 17px;
|
margin: 0px 10px 10px 0;
|
border: 1px solid #d8d8d8;
|
text-align: center;
|
line-height: 20px;
|
font-size: 12px;
|
}
|
|
.allActive {
|
width: 50px;
|
height: 22px;
|
border-radius: 17px;
|
margin: 0px 10px 10px 0;
|
text-align: center;
|
line-height: 20px;
|
color: #fff;
|
background: #0093ff;
|
border: 1px solid #0093ff;
|
font-size: 12px;
|
}
|
|
.scribeItem {
|
width: 18px;
|
height: 18px;
|
border-radius: 3px;
|
margin: 0px auto;
|
border: none;
|
}
|
|
.activeScribe {
|
border: 1px solid #0093ff;
|
}
|
}
|
|
.noteBox {
|
.chapterName {
|
margin: 15px;
|
display: flex;
|
align-items: center;
|
span {
|
margin-left: 5px;
|
}
|
}
|
.listItem {
|
border-bottom: 1px solid rgba(212, 212, 212, 0.16);
|
position: relative;
|
margin: 10px;
|
line-height: 20px;
|
background: #fff;
|
border-radius: 5px;
|
padding: 10px 0;
|
.textBox {
|
.title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-right: 10px;
|
.border-left {
|
height: 25px;
|
border-right: 4px solid;
|
border-radius: 0 5px 5px 0;
|
margin-right: 10px;
|
}
|
.title-con {
|
display: flex;
|
align-items: center;
|
color: #949494;
|
.round {
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
margin-right: 5px;
|
}
|
}
|
|
img {
|
margin-left: 5px;
|
}
|
}
|
.chapter {
|
color: #b7b7b7;
|
margin: 5px 5px 5px 14px;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 1;
|
overflow: hidden;
|
border-left: 3px solid #b7b7b7;
|
border-left-radius: 20px;
|
padding: 0 5px;
|
}
|
}
|
.noteText {
|
margin: 10px 10px 10px 15px;
|
border-radius: 3px;
|
padding: 2px 5px;
|
.con {
|
max-height: 65px;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 3;
|
overflow: hidden;
|
}
|
}
|
}
|
}
|
.allSearch {
|
padding: 20px;
|
.allSearchList {
|
.searchItem {
|
margin: 15px;
|
background: #fff;
|
border-radius: 10px;
|
padding: 10px;
|
display: flex;
|
.index {
|
line-height: 24px;
|
width: 25px;
|
}
|
.searchCon {
|
flex: 1;
|
width: 240px;
|
overflow: hidden;
|
margin-right: 8px;
|
height: 45px;
|
line-height: 22px;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
}
|
}
|
.settingBox{
|
margin-bottom: 50px !important;
|
}
|
}
|
</style>
|
