Skip to content

T
tax-opr-digit
提交 e7300db4 authored 作者: 郭忠轩's avatar 郭忠轩
浏览文件
操作

修改

上级 cc630c54
隐藏空白字符变更
内嵌 并排
正在显示 包含 2 行增加 和 1436 行删除
src/views/Ebook/ebook - 副本.vue deleted 100644 → 0
浏览文件 @ cc630c54
<template> ++ /dev/null
<template>
<el-container class="ebook-container" style="width:100%;">
<el-aside class="ebook-aside">
<div class="resource-wrap" ref="transition">
<ul class="resource-cat-ul">
<li
v-for="(item,index) in resourceCatList"
:key="index"
:class="{'active':activeCatId===item.id}"
@click="handleChangeResource(item)"
>
<a href="javascript:void(0)">{{ item.name }}</a>
</li>
</ul>
<ul class="result-list-ul">
<li v-for="(item,index) in resourceList" :key="index">
<a href="javascript:void(0)" @click="toArticalReadPage(item)">{{ item.name }}</a>
</li>
</ul>
<v-none v-show="isNoData" />
</div>
<div class="semi-circle-right" @click.stop="hideAside" ref="asideBar">
<span></span>
</div>
</el-aside>
<el-main style="padding:0;width:800px;">
<div class="ebook-main" ref="ebookMain">
<h3 class="title" v-if="ebookInfo.name">《{{ `${ebookInfo.name}` }}》</h3>
<!-- 电子书正文 -->
<!-- <div class="ebook-main-content"
v-html="bookHtml"
ref="ebookContent"
id="ebookContent"
@mouseup="handleContentMouseUp"
@click="handleImageClick"></div>-->
<!-- <tr> -->
<transition name="slide-fade">
<viewer :trigger="bookHtml" style="height:100%">
<div v-if="doubleLook" style="display:flex;height:100%">
<div
v-html="bookHtml"
:class="['ebook-main-content',showPermissionNew()&&'ebook-main-content-supplement']"
style="flex:1;height:100%;overflow:hidden;padding:30px 20px"
ref="doublePage"
></div>
<div
:class="['ebook-main-content',showPermissionNew()&&'ebook-main-content-supplement']"
style="flex:1;height:100%;padding:30px 20px"
ref="doublePage2"
></div>
</div>
<div
v-else
:class="['ebook-main-content',showPermissionNew()&&'ebook-main-content-supplement']"
v-html="bookHtml"
ref="ebookContent"
id="ebookContent"
@mousewheel="handleMousewheel"
></div>
</viewer>
</transition>
<!-- 权限相关 -->
<!-- <div class="auth-part" v-if="showPermission"> -->
<div class="auth-part" v-if="showPermissionNew()">
<!-- 0-未上架or未定价 -->
<div v-if="messageCode===0" class="opt-con">
<span class="tip">资源更新中，敬请期待</span>
</div>
<!-- 1-所属图书无版权或者不可售 -->
<div v-else-if="messageCode===1" class="opt-con">
<span class="tip">温馨提示:该资源暂不支持在线购买或阅读全文</span>
</div>
<!-- 2-未登录或未购买 -->
<div v-else-if="messageCode===2" class="opt-con">
<div>
<span class="tip">试读结束，请先通过以下方式购买内容阅读权限</span>
<a
class="buyVip"
@click="buyVip"
href="javascript:void(0)"
style="margin-bottom:10px;"
>开通VIP会员免费看</a>
</div>
<span
class="tip"
style="margin-bottom:10px;display:block;color:#999999;"
v-if="!isLogin"
>
已是会员或已购买，请
<a
href="javascript:void(0)"
class="login"
@click="login"
style="color:#FC9224;text-decoration:none;"
>登录</a>后阅读
</span>
</div>
<!-- 3-机构账户无权限 -->
<div v-else-if="messageCode===3" class="opt-con">
<span class="tip">温馨提示:阅读全文请通过个人账户购买，或者联系管理员</span>
</div>
</div>
<!-- 电子书目录 -->
<div class="catalogue" ref="catalogue">
<v-catalogue
:content="catalogueContent"
:list="catalogueList"
@closeCat="handleCloseDynamicMask('catalogue')"
@chapterChange="handleChapterChange"
/>
</div>
<!-- 电子书设置 -->
<div class="setting" ref="setting">
<v-setting @settingCallback="handleSettingCallback"></v-setting>
</div>
<!-- 笔记 -->
<div class="note" ref="note">
<v-note
:content="NoteList"
@closeNote="handleCloseDynamicMask('note')"
@deleteNote="deleteNote"
></v-note>
</div>
</div>
</el-main>
<el-aside class="ebook-aside">
<ul class="ebook-opt">
<li
v-for="(item,index) in ebookOpt"
:key="index"
:class="[`opt-icon ${item.iClass}`, {'active': checkActiveByPanelOpen(item)}]"
@click="handleClick(item)"
:ref="item.ref"
:style="{display: item.type === 'jiucuo' && userIsOrg? 'none':''}"
>
<i></i>
</li>
</ul>
<ul class="ebook-opt ebook-paging-opt">
<li :class="['prev', {'disabled': !havePrev}]" @click="handlePageChange('prev')">
<i class="el-icon-arrow-left"></i>
</li>
<li :class="['next', {'disabled': !haveNext}]" @click="handlePageChange('next')">
<i class="el-icon-arrow-right"></i>
</li>
</ul>
</el-aside>
<!-- 登录弹窗 -->
<div class="login-box">
<el-dialog
clsss="login-box-dialog"
:visible.sync="logindialogShow"
:show-close="false"
:append-to-body="false"
>
<v-Login></v-Login>
</el-dialog>
</div>
<!-- 开通vip 弹窗 -->
<v-buyVip :visible="buyVipVisible" @childEvent="changeVisible" />
<!-- 纠错 -->
<el-dialog title="纠错" :visible.sync="correctVisble" v-if="correctVisble" width="500px">
<v-correct @closeCorrect="handleCorrectCallback"></v-correct>
</el-dialog>
<!-- 添加笔记动态操作button -->
<div class="add-note-dy-button" ref="add-note-dy-button" :style="buttonStyle">
<span class="up-triangle"></span>
<a href="javascript:void(0)" @click="setNoteModalVidible">
<i class="el-icon-edit-outline"></i>
<span>添加笔记</span>
</a>
</div>
<!-- 添加笔记弹窗 -->
<div class="add-note-dy-modal" ref="add-note-dy-modal">
<span class="up-triangle up-triangle-top"></span>
<span class="up-triangle up-triangle-bottom"></span>
<div class="note-textarea-con">
<el-input
type="textarea"
:autosize="{ minRows: 9, maxRows: 9}"
placeholder="请在此处填写笔记内容..."
v-model="noteInpText"
maxlength="300"
@input="handleNoteInput"
></el-input>
<span class="remnant">{{ noteInputLen }}/500</span>
</div>
<div class="bottom-opt">
<a href="javascript:void(0)" class="btn submit" @click="submitNote" v-if="!noteFleg">提交</a>
<a href="javascript:void(0)" class="btn submit" @click="updateNote" v-if="noteFleg">修改</a>
<a href="javascript:void(0)" class="btn cancel" @click="closeNoteModal">取消</a>
</div>
</div>
<!-- 图片查看大图 -->
<el-dialog title class="artical-img-modal" :visible.sync="imgInArticalVisible">
<div class="artical-img-wraper">
<img :src="imgSrc" />
</div>
</el-dialog>
<!-- 收藏msg -->
<div class="collectTip" ref="collectTip">{{ collectTxt }}</div>
</el-container>
</template>
<script>
import _ from "lodash";
import Highlighter from "web-highlighter";
import { RESOURCETYPE_CODE, WEBSITE_BASEURL } from "@/utils/global";
import {
isLogin,
getUserLevelTypeCode,
USERLEVELTYPE,
getUserInfo,
} from "@/utils/auth";
import { errorMessage, modifySuccess, warningMessage } from "@/utils/tip";
import { getMousePos, openNewWin } from "@/utils/str";
import { arr2tree, tree2Arr } from "@/utils/arr";
import { loadCss } from "@/utils";
import None from "@/components/None/index";
import Login from "@/components/Login";
import BuyVip from "@/components/BuyVip/buyVipDialog";
import EbookCatalogue from "./catalogue";
import EbookSetting from "./setting";
import EbookNote from "./note";
import EbookCorrect from "./correct";
import { Message } from "element-ui";
import { setTimeout } from "timers";
export default {
data() {
return {
show: false,
doubleLook: true,
website: WEBSITE_BASEURL,
ebookId: "", // 图书ID
markId: "", // 章节ID
orderNum: "", // 排序号
orderMaxNum: "", // 最大目录排序
orderMinNum: "", // 最小目录排序
ebookInfo: {}, //除去vue警告
isCollection: 0, // 0：未收藏；1：已收藏
isLogin: isLogin() || false,
logindialogShow: false,
isNoData: false,
activeCatId: RESOURCETYPE_CODE.rsWenku,
resourceList: [],
resourceCatList: [
{
id: RESOURCETYPE_CODE.rsWenku,
name: "文章",
},
{
id: RESOURCETYPE_CODE.rsAnli,
name: "案例",
},
{
id: RESOURCETYPE_CODE.rsShicao,
name: "实操",
},
{
id: RESOURCETYPE_CODE.rsLaw,
name: "法规",
},
{
id: RESOURCETYPE_CODE.rsQA,
name: "问答",
},
],
ebookOpt: [
{
type: "home",
iClass: "home",
},
{
type: "catalogue",
iClass: "catalogue",
ref: "opt-catalogue",
},
{
type: "setting",
iClass: "setting",
ref: "opt-setting",
},
{
type: "note",
iClass: "note",
ref: "opt-note",
},
{
type: "collect",
iClass: "collect",
ref: "collect",
},
{
type: "reply",
iClass: "reply",
},
{
type: "jiucuo",
iClass: "jiucuo",
},
],
catalogueContent: "电子书目录",
catalogueList: [],
catPermissionType: "first", // whole-整章章节 first-第一章第一节等
ids: [],
flattenCatalogueList: [],
noteSide: "笔记",
correctVisble: false,
messageCode: "",
message: "",
bookHtml: "",
// 添加笔记相关
buttonStyle: {
display: "none",
left: 0,
top: 0,
},
scrollTopMy: 0,
selectedText: "",
noteInpText: "",
noteInputLen: 0,
articleId: "",
highlighter: null,
noteSources: null,
noteFleg: true,
NoteList: [],
upDateId: "",
imgSrc: "",
imgInArticalVisible: false,
buyVipVisible: false,
collectLoading: false, // 避免重复点收藏
showPermission: false,
catalogueIsOpen: false,
settingIsOpen: false,
collectTxt: "收藏成功",
timer: null,
};
},
components: {
"v-none": None,
"v-catalogue": EbookCatalogue,
"v-setting": EbookSetting,
"v-note": EbookNote,
"v-correct": EbookCorrect,
"v-Login": Login,
"v-buyVip": BuyVip,
},
computed: {
userIsOrg() {
// 当前登录用户是否是机构用户
return getUserLevelTypeCode() === USERLEVELTYPE.ORGANIZATION;
},
// 是否有上一页
havePrev() {
return (
parseInt(this.orderNum, 10) <= parseInt(this.orderMaxNum, 10) &&
parseInt(this.orderNum, 10) > parseInt(this.orderMinNum, 10)
);
},
// 是否有下一页
haveNext() {
return !(parseInt(this.orderNum, 10) >= parseInt(this.orderMaxNum, 10));
},
},
watch: {},
methods: {
showPermissionNew() {
const { messageCode, markId, catalogueList, haveNext } = this;
let _orderNum = this.orderNum;
// 付费资源 到最后一页在提示
if (messageCode == 2 || messageCode == 3) {
// 2-vip免费 3-单品购买
// 当前页的下一页是否有权限
if (!haveNext || !this.hasPermission("next", _orderNum)) {
this.showPermission = true;
} else {
this.showPermission = false;
}
} else {
if (_.isNull(messageCode)) {
this.showPermission = false;
} else {
this.showPermission = true;
}
}
return this.showPermission;
},
login() {
this.logindialogShow = true;
},
handleCloseDynamicMask(refStr) {
if (this.$refs[refStr].classList.contains("transition")) {
this.$refs[refStr].classList.remove("transition");
refStr === "catalogue" && (this.catalogueIsOpen = false);
refStr === "setting" && (this.settingIsOpen = false);
} else {
//qll加的,点击笔记先判断是否登陆
if (refStr == "note") {
if (!this.isLogin) {
this.logindialogShow = true;
return;
}
}
["catalogue", "setting", "note"].forEach((item) =>
this.$refs[item].classList.remove("transition")
);
this.$refs[refStr].classList.add("transition");
refStr === "catalogue" && (this.catalogueIsOpen = true);
refStr === "setting" && (this.settingIsOpen = true);
}
//qll加的清除笔记按钮和弹框用的
this.buttonStyle.display = "none";
this.$refs["add-note-dy-modal"].style.display = "none";
},
checkActiveByPanelOpen(record) {
// 先把目录和设置的高亮去掉
this.$refs["opt-catalogue"] &&
this.$refs["opt-catalogue"][0].classList.contains("active") &&
this.$refs["opt-catalogue"][0].classList.remove("active");
this.$refs["opt-setting"] &&
this.$refs["opt-setting"][0].classList.contains("active") &&
this.$refs["opt-setting"][0].classList.remove("active");
const type = record.type;
let boole = false;
switch (type) {
case "catalogue":
boole = this.catalogueIsOpen;
break;
case "setting":
boole = this.settingIsOpen;
break;
case "collect":
boole = this.isCollection === 1;
break;
default:
break;
}
return boole;
},
handleClick(record) {
const type = record.type;
switch (type) {
case "home":
this.$router.push({ name: "home" });
break;
case "catalogue":
this.handleCloseDynamicMask("catalogue");
break;
case "setting":
this.handleCloseDynamicMask("setting");
break;
case "note":
this.handleCloseDynamicMask("note");
break;
case "reply": // 去往全部评论页
const resourceId = this.ebookId; // 资源ID
const resourceType = RESOURCETYPE_CODE.rsBook; // 资源类型 0全部1图书 31文章 100资讯 等
this.$router.push({
name: "comments",
query: { id: resourceId, type: resourceType },
});
break;
case "collect":
this.collectEbook();
break;
case "jiucuo":
this.handleErrorCorrect();
break;
default:
break;
}
},
// 收藏
collectEbook() {
if (!this.isLogin) {
this.logindialogShow = true;
return;
}
const {
author,
img: cover,
synopsis: intro,
id: objectId,
goodsType: objectType,
name: title,
} = this.ebookInfo;
const { isCollection } = this;
if (isCollection === 1) {
// 取消收藏
const cancelCollectData = {
objectId,
objectType: 1, // 1图书 2文章 3微课即视频
type: 1, // 1-税可知 2-走出去 3-视频课
};
this.$store
.dispatch("CancelCollect", { ...cancelCollectData })
.then((result) => {
if (result.code === 0 && result.status) {
this.isCollection = 0;
this.$refs["collect"][0].classList.remove("active");
this.collectTxt = "取消收藏成功";
this.timer = null;
this.$refs["collectTip"].style.display = "block";
this.timer = setTimeout(() => {
this.$refs["collectTip"].style.display = "none";
clearTimeout(this.timer);
this.timer = null;
}, 2000);
// this.getBookInfo(objectId)
} else {
warningMessage("取消收藏失败，请重试", 2);
}
});
return;
}
// 收藏
if (this.collectLoading) {
return;
}
const data = [
{
author,
cover,
intro,
objectId,
objectType: 1, // 1图书 2文章 3微课即视频
title,
type: 1, // 1-税可知 2-走出去 3-视频课
},
];
this.collectLoading = true;
this.$store.dispatch("SaveCollect", data).then((result) => {
this.collectLoading = false;
if (result.code === 0 && result.status) {
this.isCollection = 1;
this.$refs["collect"][0].classList.add("active");
this.collectTxt = "收藏成功";
this.timer = null;
this.$refs["collectTip"].style.display = "block";
this.timer = setTimeout(() => {
this.$refs["collectTip"].style.display = "none";
clearTimeout(this.timer);
this.timer = null;
}, 2000);
// this.getBookInfo(objectId)
} else {
warningMessage("收藏失败，请重试", 2);
}
});
},
handleErrorCorrect() {
if (!this.isLogin) {
this.logindialogShow = true;
return;
}
this.correctVisble = true;
},
// 电子书设置回调
handleSettingCallback(callbackPrams) {
const { close, data } = callbackPrams;
if (close) {
this.handleCloseDynamicMask("setting");
}
this.doubleLook
? this.callDoubleOrOne("doublePage", data, close)
: this.callDoubleOrOne("ebookContent", data, close);
// 主题
Array.from(this.$refs["ebookMain"].classList).forEach((classItem) => {
this.$refs["ebookMain"].classList.remove(classItem);
});
this.$refs["ebookMain"].classList.add("ebook-main");
if (data.topic) {
this.$refs["ebookMain"].classList.add(`topic-${data.topic}`);
}
},
callDoubleOrOne(Content, data, close) {
Array.from(this.$refs[Content].classList).forEach((classItem) => {
this.$refs[Content].classList.remove(classItem);
});
this.$refs[Content].classList.add("ebook-main-content");
if (!data) {
return;
}
// 字体
if (data.fontFamily) {
this.$refs[Content].classList.add(`fontfamily-${data.fontFamily}`);
}
// 字体大小
if (data.fontSize) {
this.$refs[Content].classList.add(`fontsize-${data.fontSize}`);
}
// 行间距
if (data.lineHeight) {
this.$refs[Content].classList.add(`lineHeight-${data.lineHeight}`);
}
},
// 笔记回调
handleNoteCallback(callbackPrams) {
if (callbackPrams.close) {
this.handleCloseDynamicMask("setting");
}
},
// 纠错回调
handleCorrectCallback(callbackPrams) {
const { close, data } = callbackPrams;
if (close) {
this.correctVisble = false;
}
if (data) {
const userInfo = getUserInfo();
const values = data;
const params = {
commitTime: new Date(), // 提交时间
content: values.content, // 纠错内容
name: userInfo.nickName, // 纠错人
resourceType: RESOURCETYPE_CODE.rsBook, // 资源类型
status: this.ebookInfo.status, // (默认0未审核)
title: this.ebookInfo.name, // 资源标题
};
this.$store
.dispatch("ArticalErrorCorrect", { ...params })
.then((result) => {
this.correctVisble = false;
if (result.code === 0) {
modifySuccess("纠错信息已提交，感谢你呦！", 2);
} else {
errorMessage("提交失败，请稍后再试~", 2);
}
});
}
},
// 点击目录回调
handleChapterChange(callbackPrams) {
const { close, data } = callbackPrams;
if (close) {
this.handleCloseDynamicMask("catalogue");
}
if (data) {
const { bookid, markid, orderNum } = data;
this.orderNum = orderNum;
this.markId = markid;
this.ebookId = bookid;
this.getEbookContent(markid, orderNum);
}
},
hideAside(event) {
const target = event.target || event.srcElement;
if (target.classList.contains("transition")) {
this.$refs.transition.classList.remove("transition");
this.$refs.asideBar.classList.remove("transition");
} else {
this.$refs.transition.classList.add("transition");
this.$refs.asideBar.classList.add("transition");
}
},
// 获取右侧关联资源类型数据
getRelationResource() {
const params = {
id: this.ebookId,
resourceType: this.activeCatId,
};
this.isNoData = false;
this.$store.dispatch("EbookRelationRes", { ...params }).then((res) => {
if (res.code == 0 && res.data) {
res.data.length === 0 && (this.isNoData = true);
this.resourceList = res.data;
}
});
},
// 右侧关联资源类型change
handleChangeResource(record) {
this.activeCatId = record.id;
this.getRelationResource();
},
// 去往文章阅读页
toArticalReadPage(record) {
let pathName = "htmlArticle";
if (record.isPdf == "1") {
// pdf形式
pathName = "pdfArticle";
}
// this.$router.push({ name: pathName, query: {id: record.resourceId} })
openNewWin({ name: pathName, query: { id: record.resourceId } }, this);
},
getBookInfo(bId) {
this.$store
.dispatch("GetBookInfo", { bookId: bId || this.ebookId })
.then((result) => {
console.log("书籍信息", result);
document.title = result.name || "电子书阅读";
const {
epubFile,
xmlFile,
pdfFile,
messageCode,
message,
isCollection,
cssPath,
} = result;
this.ebookInfo = result;
this.isCollection = isCollection;
// 权限相关
this.messageCode = messageCode;
this.message = message;
if (_.isNull(messageCode)) {
this.showPermission = false;
} else {
this.showPermission = true;
}
// 目录
this.catalogueContent = result.bookCatalog;
this.catalogueList = this.dealCatalogue(result.chapterList);
if (this.$route.params.id && this.$route.query.mid) {
this.markId = this.$route.query.mid;
this.getEbookContent(this.markId);
}
// 加载css
if (cssPath) {
const _cssPath = `${this.website}${cssPath
.split("\\")
.join("/")}/stylesheet.css`;
loadCss(_cssPath);
}
});
},
/************************ 添加笔记相关 start ************************/
getPosition($node) {
let offset = {
top: 0,
left: 0,
};
while ($node) {
offset.top += $node.offsetTop;
offset.left += $node.offsetLeft;
$node = $node.offsetParent;
}
return offset;
},
mapNote(id) {
//根据插件id查找笔记内容
let noteText = "";
let upDateId = "";
this.NoteList.forEach((list) => {
if (list.contentTitle == id) {
noteText = list.content;
upDateId = list.id;
}
});
return {
noteText: noteText,
upDateId: upDateId,
};
},
mapNoteId(id) {
//根据后台id查插件id；
let highId = "";
this.NoteList.forEach((list) => {
if (list.id == id) {
highId = list.contentTitle;
}
});
return highId;
},
removeNote() {
for (let i = 0; i < this.NoteList.length; i++) {
let hs = this.NoteList[i];
let startMeta = JSON.parse(hs.startIndex);
let endMeta = JSON.parse(hs.endIndex);
if (startMeta && endMeta && hs.dataContent && hs.contentTitle) {
this.highlighter.remove(hs.contentTitle);
}
}
},
initNote() {
let _this = this;
this.highlighter = new Highlighter({
exceptSelectors: [
".my-node-tip",
"pre",
"code",
".el-dialog__wrapper",
".note-content",
],
//exceptSelectors: [".el-dialog__wrapper",".note-content"]
});
this.highlighter
.on("selection:hover", ({ id }) => {
// display different bg color when hover
// this.highlighter.addClass('highlight-wrap-hover', id);
// console.log('hover')
})
.on("selection:hover-out", ({ id }) => {
// this.highlighter.removeClass('highlight-wrap-hover', id);
// console.log('hover-out')
})
.on("selection:create", ({ sources }) => {
const DomLen = this.highlighter.getDoms(sources[0].id).length;
if (DomLen > 1) {
this.highlighter.remove(sources[0].id);
warningMessage("笔记内容不能重复,可以删除后重新添加");
return;
}
//const position = this.getPosition(this.highlighter.getDoms(sources[0].id)[0]);
let Event = event;
setTimeout(() => {
const xy = getMousePos(Event);
this.buttonStyle.left = `${xy.x - 60}px`;
this.buttonStyle.top = `${xy.y + 20}px`;
this.buttonStyle.display = "block";
}, 0);
if (this.noteSources) {
//这里处理没提交时，移除上一个空标签
let preId = this.noteSources[0]["hs"]["id"];
this.highlighter.remove(preId);
}
sources = sources.map((hs) => ({ hs }));
this.noteSources = sources;
})
.on("selection:click", ({ id }) => {
this.buttonStyle.display = "none";
//const position = this.getPosition(this.highlighter.getDoms(id)[0]);
let Event = event;
let noteText = this.mapNote(id).noteText; //笔记回显
if (!noteText) {
//没有存储的点击无效果
return;
}
this.noteInpText = noteText;
setTimeout(() => {
// this.$refs['add-note-dy-modal'].style.left = `${position.left - 60}px`
// this.$refs['add-note-dy-modal'].style.top = `${position.top - this.scrollTopMy*1+20}px`
// this.$refs['add-note-dy-modal'].style.display = 'block'
const xy = getMousePos(Event);
this.$refs["add-note-dy-modal"].style.left = `${xy.x - 160}px`;
this.$refs["add-note-dy-modal"].style.top = `${xy.y + 20}px`;
this.$refs["add-note-dy-modal"].style.display = "block";
}, 0);
this.upDateId = this.mapNote(id).upDateId;
});
this.highlighter.run();
},
highlighterSave() {
this.highlighter = new Highlighter({
exceptSelectors: [
".my-node-tip",
"pre",
"code",
".el-dialog__wrapper",
".note-content",
],
});
// this.highlighter.fromStore({parentTagName: "P", parentIndex: 1, textOffset: 186},{parentTagName: "P", parentIndex: 1, textOffset: 201}, '5580399b-bddd-4c26-924d-1bb18b6ca3c4','税收的依赖程度越强；越是全球化');
},
handleContentMouseUp(event) {
if (this.userIsOrg || !this.isLogin) {
return;
}
let selectedText;
if (window.getSelection) {
selectedText = window.getSelection().toString();
} else if (document.selection && document.selection.createRange) {
selectedText = document.selection.createRange().text;
}
this.selectedText = selectedText;
if (
selectedText &&
(!_.isEmpty(selectedText) || selectedText.length > 0)
) {
const xy = getMousePos(event);
this.buttonStyle.left = `${xy.x - 60}px`;
this.buttonStyle.top = `${xy.y + 20}px`;
this.buttonStyle.display = "block";
} else {
this.buttonStyle.display = "none";
this.$refs["add-note-dy-modal"].style.display = "none";
}
console.log("选取的文字为：", selectedText);
},
setNoteModalVidible(event) {
if (!this.isLogin) {
this.logindialogShow = true;
return;
}
this.noteFleg = false; //切换修改和新增
this.buttonStyle.display = "none";
const xy = getMousePos(event);
this.$refs["add-note-dy-modal"].style.left = `${xy.x - 160}px`;
this.$refs["add-note-dy-modal"].style.top = `${xy.y - 20}px`;
this.$refs["add-note-dy-modal"].style.display = "block";
},
handleNoteInput() {
this.noteInputLen = this.noteInpText.length;
},
submitNote() {
if (this.noteInpText.trim().length <= 0) {
warningMessage("笔记内容不能为空");
return;
}
if (!this.noteSources) {
return;
}
let note = this.noteSources[0]["hs"];
const params = {
articleId: this.articleId,
bookId: this.ebookId,
content: this.noteInpText, //笔记内容
contentTitle: note.id, //用来储存noteid
//creater: '' ,//用户id
dataContent: note.text, //添加笔记的段落内容
//dataMark: '' ,//段落标识（文章的markid#_#段落编号）
startIndex: JSON.stringify(note.startMeta),
endIndex: JSON.stringify(note.endMeta),
markId: this.markId,
};
this.$store.dispatch("ArticalNoteAdd", { ...params }).then((result) => {
this.closeNoteModal(); //关闭输入笔记框
if (result.code === 0) {
modifySuccess("笔记信息已提交，感谢你呦！", 2);
this.getNoteList();
} else {
errorMessage("提交失败，请稍后再试~", 2);
}
});
},
closeNoteModal() {
this.$refs["add-note-dy-modal"].style.display = "none";
this.noteInpText = "";
this.noteFleg = true; //初始化为修改
},
updateNote() {
if (this.noteInpText.trim().length <= 0) {
warningMessage("笔记内容不能为空");
return;
}
// if(!this.noteSources){
// return;
// }
// let note=this.noteSources[0]['hs'];
// console.log(note,"notetetetete")
const params = {
id: this.upDateId, //后台返回的id
content: this.noteInpText, //笔记内容
};
this.$store
.dispatch("ArticalNoteUpdate", { ...params })
.then((result) => {
this.closeNoteModal(); //关闭输入笔记框
if (result.code === 0) {
modifySuccess("笔记信息已修改，感谢你呦！", 2);
this.getNoteList();
} else {
errorMessage("修改失败，请稍后再试~", 2);
}
});
},
deleteNote(paramsNote) {
this.$confirm("确定删除此条笔记吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
const params = {
ids: [paramsNote.delId], //后台返回的id
};
this.$store.dispatch("ArticalNoteDel", { ...params }).then((result) => {
if (result.code === 0) {
modifySuccess("笔记已删除，感谢你呦！", 2);
this.removeNote();
this.getNoteList();
} else {
errorMessage("删除失败，请稍后再试~", 2);
}
});
});
},
getNoteList() {
if (!this.isLogin) {
return;
}
let _this = this;
let params = {
articleId: this.articleId,
bookId: this.ebookId,
markId: this.markId,
pageNum: 1,
pageSize: 99999,
};
this.$store.dispatch("ArticalNoteList", { ...params }).then((result) => {
if (result.code === 0) {
this.removeNote(); //赋值一起先清除笔记;
this.NoteList = result.data.list || [];
// this.highlighter = new Highlighter({
// exceptSelectors: [".my-node-tip", "pre", "code",".el-dialog__wrapper"]
// });
for (let i = 0; i < this.NoteList.length; i++) {
let hs = this.NoteList[i];
let startMeta = JSON.parse(hs.startIndex);
let endMeta = JSON.parse(hs.endIndex);
if (startMeta && endMeta && hs.dataContent && hs.contentTitle) {
_this.highlighter.fromStore(
startMeta,
endMeta,
hs.dataContent,
hs.contentTitle
);
}
}
// _this.highlighter.fromStore({"parentTagName":"P","parentIndex":1,"textOffset":122},{"parentTagName":"P","parentIndex":1,"textOffset":140},'dd5d375f-0290-47ae-bb30-6c5e58d514ec','谓和实物、劳务及金钱等不同的形式，可');
// console.log('endddd')
} else {
errorMessage("获取失败，请稍后再试~", 2);
}
});
},
/************************ 添加笔记相关 end ************************/
// 获取电子书内容
getEbookContent(mId, oNum, type) {
// this.show = false
const self = this;
const params = {
bookId: this.ebookId,
};
mId && (params["markId"] = mId);
oNum && (params["orderNum"] = oNum);
this.$store.dispatch("GetEBookContent", { ...params }).then((result) => {
console.log("正文信息", result);
const {
orderMinNum,
orderMaxNum,
orderNum,
text,
id,
innerText,
} = result;
this.bookHtml = text;
// this.show = true
console.log(innerText.length, 8888);
let that = this;
if (innerText.length < 50) {
setTimeout(function name(params) {
that.orderMinNum = orderMinNum;
that.orderMaxNum = orderMaxNum;
that.orderNum = orderNum;
that.handlePageChange("next");
}, 2000);
}
this.articleId = id;
this.orderMinNum = orderMinNum;
this.orderMaxNum = orderMaxNum;
this.orderNum = orderNum;
setTimeout(() => {
type === "next" && self.showPermissionNew();
this.getNoteList(); //获取笔记列表
}, 0);
this.$nextTick(() => {
this.computedDouble();
});
});
},
// 上一页、下一页
handlePageChange(type) {
const { orderMinNum, orderMaxNum, havePrev, haveNext } = this;
let { orderNum } = this;
console.log(haveNext, orderNum, 4444);
if ((type === "prev" && !havePrev) || (type === "next" && !haveNext)) {
return;
}
// 判断是否有阅读权限
console.log(!this.hasPermission(type, orderNum), 6666);
if (!this.hasPermission(type, orderNum)) {
warningMessage("暂无阅读权限", 2);
return;
}
type === "prev" && orderNum--;
type === "next" && orderNum++;
// this.show = false
this.getEbookContent(null, orderNum, type);
},
hasPermission(type, orderNum) {
console.log(this, type, orderNum, "bbbb");
let _orderNum = orderNum;
type === "prev" && _orderNum--;
type === "next" && _orderNum++;
// const { catalogueList } = this
console.log(this.catalogueList, "cccc");
const recordItem = this.getItemByOrderNum(this.catalogueList, _orderNum);
console.log(recordItem, "aaaa"); //自动触发打印undefined
return recordItem && recordItem.hasPermission;
},
/*getItemByOrderNum(list, orderNum) {
for(let i =0; i<list.length; i+=1) {
if (orderNum === list[i].orderNum) {
return list[i]
} else {
if (list[i].children) {
return list[i].children && this.getItemByOrderNum(list[i].children, orderNum)
} else {
continue;
}
}
}
},*/
getItemByOrderNum(list, orderNum) {
return _.find(
this.flattenCatalogueList,
(item) => item.orderNum === orderNum
);
},
// 处理目录结构
dealCatalogue(list) {
list.forEach((listItem) => (listItem["hasPermission"] = true)); // 默认都具备阅读权限
const result = arr2tree(list, {
id: "markid",
key: "markid",
parent_id: "pid",
chapterName: "chapterName",
pid: "pid",
bookid: "bookid",
bookName: "bookName",
orderNum: "orderNum",
markid: "markid",
level: "level",
hasPermission: "hasPermission",
});
// 根据messageCode处理目录的权限-无权限下只有第一章能点击
const { messageCode, catPermissionType } = this;
// console.log('目录',JSON.stringify(result))
this.ids = [];
if (!_.isNull(messageCode)) {
// 无权限
catPermissionType === "first" &&
this.getPremissionIdsFirst(_.cloneDeep(result));
catPermissionType === "whole" &&
this.getPremissionIdsWhole(_.cloneDeep(result[0]));
this.setPermission(result, this.ids);
}
this.flattenCatalogueList = tree2Arr(_.cloneDeep(result));
return result;
},
// 递归查找第一个章节的id，以及其所属上级id
getPremissionIdsFirst(catList) {
if (_.isArray(catList) && _.isArray(catList[0].children)) {
this.ids.push(catList[0].id); // 记录level1
this.getPremissionIdsFirst(catList[0].children[0]);
} else if (_.isArray(catList.children)) {
this.ids.push(catList.id); // 记录level2
this.getPremissionIdsFirst(catList.children[0]);
} else {
this.ids.push(catList.id);
}
},
// 设置整一章的章节
getPremissionIdsWhole(catList) {
if (_.isArray(catList)) {
catList.forEach((item) => {
this.ids.push(item.id);
_.isArray(item.children) && this.getPremissionIdsWhole(item.children);
});
} else {
this.ids.push(catList.id);
_.isArray(catList.children) &&
this.getPremissionIdsWhole(catList.children);
}
},
// 给目录数据结构设置hasPermission标记
setPermission(list) {
const ids = this.ids;
list.forEach((item) => {
if (ids.includes(item.id)) {
item["hasPermission"] = true;
} else {
item["hasPermission"] = false;
}
item.children && this.setPermission(item.children);
});
},
// 文中正文图片点击放大
handleImageClick(event) {
const target = event.target || event.srcElement;
if (
target.nodeName.toLocaleLowerCase() === "img" ||
target.tagName.toLocaleLowerCase() === "img"
) {
this.imgSrc = target.src;
this.imgInArticalVisible = true;
}
},
// 开通vip
buyVip() {
this.buyVipVisible = true;
},
changeVisible(eventInfo) {
this.buyVipVisible = eventInfo.eventInfo;
},
// 有滚动条监测滚动事件
handleScroll() {
const element =
document.getElementById("ebookContent") || this.$refs["ebookContent"];
const scrollTop = element.scrollTop; //变量 windowHeight 是可视区的高度
const windowHeight = element.clientHeight; //变量 scrollHeight 是滚动条的总高度
const scrollHeight = element.scrollHeight;
if (scrollTop + windowHeight == scrollHeight) {
console.log("到底了");
}
if (scrollTop === 0) {
console.log("到头了");
}
},
handleMousewheel: _.throttle(function (event) {
//滚动的时候隐藏弹框和按钮
this.buttonStyle.display = "none";
this.$refs["add-note-dy-modal"].style.display = "none";
let direct = 0;
const ev = event || window.event;
ev.stopPropagation();
if (ev.wheelDelta) {
// 判断浏览器IE，谷歌滑轮事件
if (ev.wheelDelta > 0) {
// console.log('滑轮向上滚动');
this.goUp(ev);
}
if (ev.wheelDelta < 0) {
// console.log('滑轮向下滚动');
this.goDown(ev);
}
} else if (ev.detail) {
//Firefox滑轮事件
if (ev.detail > 0) {
// console.log('滑轮向上滚动');
this.goUp(ev);
}
if (ev.detail < 0) {
// console.log('滑轮向下滚动');
this.goDown(ev);
}
}
}, 2000),
mouseWheelPosition(direct) {
const element =
document.getElementById("ebookContent") || this.$refs["ebookContent"];
if (!element) {
return { isTop: false, isBottom: false };
}
const scrollTop = element.scrollTop; //变量 windowHeight 是可视区的高度
const windowHeight = element.clientHeight; //变量 scrollHeight 是滚动条的总高度
const scrollHeight = element.scrollHeight;
this.scrollTopMy = scrollTop;
if (direct === "down") {
// 下滑
if (scrollTop + windowHeight == scrollHeight) {
// console.log('到底了');
return { isTop: false, isBottom: true };
}
} else {
// 上滑
if (scrollTop === 0) {
// console.log('到头了');
return { isTop: true, isBottom: false };
}
}
return { isTop: false, isBottom: false };
},
goUp(e) {
if (this.mouseWheelPosition("up").isTop) {
this.handlePageChange("prev");
return;
}
},
goDown(e) {
if (this.mouseWheelPosition("down").isBottom) {
this.handlePageChange("next");
return;
}
},
computedDouble() {
let me = this;
console.log("computedDouble");
let doublePage = this.$refs["doublePage"];
let doublePage2 = this.$refs["doublePage2"];
doublePage2.innerHTML = "";
let doublePageheight = this.$refs["doublePage"].offsetHeight - 60;
let doublePagewidth = this.$refs["doublePage"].offsetWidth - 40;
let doublePagelineHeight = window
.getComputedStyle(me.$refs["doublePage"])
.lineHeight.replace("px", "");
let pFontsize = window
.getComputedStyle(me.$refs["doublePage"].children[1])
.fontSize.replace("px", "");
let doublePagechild = this.$refs["doublePage"].children;
let oneTag = this.$refs["doublePage"].children[0].tagName;
if (oneTag.indexOf("H") != "-1") {
//有H
let marginNum = 0;
// for (let i = 1; i < doublePagechild.length; i++) {
// // if(doublePagechild[i].tagName.indexOf("H") != "-1"){
// //是H标签
// let marginTop = window.getComputedStyle(doublePagechild[i]).marginTop.replace("px", "");
// let marginBottom = window.getComputedStyle(doublePagechild[i]).marginBottom.replace("px", "");
// marginNum = marginNum + Number(marginBottom) + Number(marginTop);
// // }
// }
let HHeight = this.$refs["doublePage"].children[0].offsetHeight;
doublePageheight = Number(doublePageheight) - Number(HHeight);
let Allhang = Math.floor(
Number(doublePageheight) / Number(doublePagelineHeight)
);
let singleZi = Number(doublePagewidth) / Number(pFontsize);
let shouldZi = Number(Allhang) * Number(singleZi);
let hangNum = 0;
let currentP, miunsHang, currentindex,phang;
for (let i = 1; i < doublePagechild.length; i++) {
let marginTop = window.getComputedStyle(doublePagechild[i]).marginTop.replace("px", "");
let marginBottom = window.getComputedStyle(doublePagechild[i]).marginBottom.replace("px", "");
phang = (doublePagechild[i].offsetHeight-marginTop-marginBottom) / doublePagelineHeight;
hangNum = hangNum + phang;
if (hangNum > Allhang) {
console.log("不相等");
miunsHang = hangNum - Allhang;
1;
currentP = doublePagechild[i];
currentindex = i;
break;
}
if (hangNum == Allhang) {
console.log("相等");
miunsHang = 0;
currentP = doublePagechild[i];
currentindex = i;
break;
}
}
console.log(Allhang);
console.log(hangNum);
console.log(currentP);
console.log(marginNum);
let currentPhang = currentP.offsetHeight / doublePagelineHeight;
let currentZi = Math.round((currentPhang - miunsHang) * singleZi);
let strzi = doublePagechild[currentindex].innerText;
let afterStr = strzi.substring(0, currentZi);
let beforeStr = strzi.substring(currentZi, strzi.length);
let newdom = doublePagechild[currentindex].cloneNode(true);
let newdom2 = doublePagechild[currentindex].cloneNode(true);
newdom.innerHTML = afterStr;
newdom2.innerHTML = beforeStr;
//删除临界点之前的元素
for (let i = doublePagechild.length - 1; i > 0; i--) {
if (i < currentindex) {
break;
}
doublePage.removeChild(doublePagechild[i]);
}
doublePage.appendChild(newdom);
doublePage2.appendChild(newdom2);
} else {
//没H直接计算
}
// for (let i in doublePage) {
// console.log(i);
// }
},
},
created() {
if (this.$route.params.id) {
this.ebookId = this.$route.params.id;
this.getRelationResource();
this.getBookInfo(); // 图书详情信息
}
},
mounted() {
this.initNote();
this.highlighterSave();
// this.throttleLoad = _.throttle(() => this.handleScroll(), 500);
// window.addEventListener("scroll", this.throttleLoad, true);
},
destroyed() {
// window.removeEventListener('scroll', this.throttleLoad, true);
this.highlighter.dispose();
},
};
</script>
<style>
.slide-fade-enter-active  {
transition: all .8s ease !important;
}
.slide-fade-leave-active  {
transition: all .8s cubic-bezier(1,  0.5,  0.8,  1.0) !important;
}
.slide-fade-enter,
 .slide-fade-leave-to {
transform: translateX(10px) !important;
opacity: 0 !important;
}
</style>
<style lang="scss" >
@import "index";
</style>
src/views/Ebook/ebook.vue
浏览文件 @ e7300db4
...@@ -1162,6 +1162,7 @@ export default { ...@@ -1162,6 +1162,7 @@ export default {
id, id,
innerText, innerText,
} = result; } = result;
//这个先这样
let str = '/sc/9787509214701'; let str = '/sc/9787509214701';
let reg = new RegExp(str,'g'); let reg = new RegExp(str,'g');
text = text.replace(reg,'http://zgsccbs.com/sc/9787509214701'); text = text.replace(reg,'http://zgsccbs.com/sc/9787509214701');
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论