mirror of
https://gitee.com/bookshelfplus/bookshelfplus
synced 2025-10-01 21:45:15 +08:00
446 lines
18 KiB
HTML
446 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head>
|
||
<%- include("./component/header.html"); %>
|
||
<!-- 书籍信息部分 -->
|
||
<style>
|
||
.main {
|
||
width: 80vw !important;
|
||
max-width: initial !important;
|
||
}
|
||
|
||
#bookImage {
|
||
/* width: 100%; */
|
||
height: auto;
|
||
max-height: 300px;
|
||
margin-bottom: 20px;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
#favorties-button {
|
||
width: 32px;
|
||
height: 32px;
|
||
user-select: none;
|
||
cursor: pointer;
|
||
margin-top: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
#favorties-button:hover {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.download-link {
|
||
user-select: none;
|
||
font-size: 1.1em;
|
||
}
|
||
#download-icon {
|
||
width: 0px;
|
||
height: 1.2em;
|
||
user-select: none;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: all 0.3s;
|
||
position: relative;
|
||
}
|
||
.download-link:hover #download-icon {
|
||
width: 1.2em;
|
||
opacity: 1;
|
||
}
|
||
.download-link * {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
#book-details {
|
||
margin-top: 20px;
|
||
}
|
||
#book-details>p {
|
||
margin: 0;
|
||
}
|
||
</style>
|
||
<!-- 文件下载部分 -->
|
||
<style>
|
||
.download-container {
|
||
padding-top: 5px;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
#file-container {
|
||
width: min(80vw, 650px);
|
||
margin: 0 auto;
|
||
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
grid-gap: 10px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.file-item {
|
||
text-align: left;
|
||
background-color: #e6e6e6;
|
||
padding: 10px 20px;
|
||
border-radius: 5px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.file-item:hover {
|
||
text-align: left;
|
||
background-color: #dfdfdf;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.file-detail {
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.file-object {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||
place-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.file-object>.file-object-item {
|
||
font-size: 14px;
|
||
display: inline-block;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.file-object>.file-object-item:hover {
|
||
transform: scale(1.03);
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 统一 */
|
||
.bold {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.size12 {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.size14 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.size16 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.size20 {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.overflow-hide {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: block;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<%- include("./component/navbar.html"); %>
|
||
<main class="main">
|
||
<!-- <h1><%= title %></h1> -->
|
||
<div id="container">
|
||
|
||
</div>
|
||
<hr>
|
||
<div class="download-container">
|
||
<h3 id="scrollTarget">下载这本书</h3>
|
||
<div id="file-container">
|
||
<!-- <div class="file-item">
|
||
<div class="file-title">
|
||
<span class="file-name size20">bookshelf</span><span class="file-ext size16">.json</span>
|
||
<span class="file-size size14" style="padding-left: 30px;">10.02MB</span>
|
||
</div>
|
||
<div class="file-detail">
|
||
<span class="size14 overflow-hide">SHA1：<span class="file-sha1 size12">07b12eb2a5915282bf086a7913b0fd9720fc012c</span></span>
|
||
<span class="file-copyright size14 overflow-hide">来源信息：中国地质大学（武汉）</span>
|
||
<span class="file-copyright size14" style="margin-top: 12px; display: block;">下载地址：</span>
|
||
</div>
|
||
<div class="file-object">
|
||
<div class="file-object-item">
|
||
<a href="" target="_blank">百度网盘</a>
|
||
</div>
|
||
<div class="file-object-item">
|
||
<a href="" target="_blank">阿里云盘</a>
|
||
</div>
|
||
<div class="file-object-item">
|
||
<a href="" download="文件名.pdf">直链下载</a>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<p style="font-size: 12px;">
|
||
* 由于直链下载成本很高，为降低运营成本，目前仅提供给登录用户使用。
|
||
</p>
|
||
</main>
|
||
<%- include("./component/footer.html"); %>
|
||
|
||
<!-- 获取参数 -->
|
||
<script src="/assets/javascripts/getParams.js"></script>
|
||
<script>
|
||
var requestParams = getParams();
|
||
var searchbox = document.getElementById("searchInput");
|
||
var bookId = Number(requestParams["id"]) ?? "";
|
||
if (bookId === "") {
|
||
location.href = "/search";
|
||
}
|
||
</script>
|
||
<script>
|
||
// 由于多个请求之后都需要调用该方法，为避免多次压缩，使用计数器，等最后一个请求完成后执行一次
|
||
var requestCount = 2;
|
||
function doFontmin() {
|
||
console.log("所有请求完毕，开始获取字体");
|
||
if (--requestCount == 0) {
|
||
fontmin(getPageText());
|
||
}
|
||
}
|
||
</script>
|
||
<script>
|
||
// 获取书籍信息
|
||
getRequest("/book/get", { id: bookId })
|
||
.then(function (response) {
|
||
var axiosData = response.data;
|
||
var status = axiosData.status;
|
||
var data = axiosData.data;
|
||
if (status === "success") {
|
||
console.log(data)
|
||
if (data.description == "") {
|
||
data.description = "暂无描述";
|
||
}
|
||
document.getElementById("container").innerHTML = `
|
||
<div class="grid">
|
||
<div class="grid-item">
|
||
<img id="bookImage" src="${data.thumbnail}" alt="书籍缩略图">
|
||
</div>
|
||
<div class="grid-item">
|
||
<h1>${data.bookName}</h1>
|
||
</div>
|
||
<div class="grid-item">
|
||
<img id="favorties-button" src="/assets/image/svg/favorites_empty.svg" style="visibility: hidden; opacity: 1; transition: all 0.3s;" title="点击收藏/取消收藏" onclick="alert('请先登录！')" />
|
||
<!-- 预加载图片 --><img src="/assets/image/svg/favorites_fill.svg" style="display: none;" />
|
||
</div>
|
||
<div class="grid-item">
|
||
<a class="download-link" href="javaScript:scrollToTarget()"><img id="download-icon" src="/assets/image/svg/download.svg" /><span>下载这本书</span></a>
|
||
<!--<a class="download-link" href="/download/?bookId=${data.id}"><img id="download-icon" src="/assets/image/svg/download.svg" /><span>下载这本书</span></a>-->
|
||
</div>
|
||
</div>
|
||
<hr style="opacity: 0.3; margin-top: 30px; margin-bottom: 25px;">
|
||
<div>
|
||
<div class="grid-item" id="book-details">
|
||
<p>作者：${data.author}</p>
|
||
<p>所属分类：<a href="/category?id=${data.category.id}">${data.category.name}</a></p>
|
||
<p>语言：${data.language}</p>
|
||
<p>出版社：${data.publishingHouse}</p>
|
||
<p></p>
|
||
</div>
|
||
<h2>书本介绍</h2>
|
||
<p>${data.description}</p>
|
||
<h2>版权信息</h2>
|
||
<p>${data.copyright}</p>
|
||
</div>`;
|
||
|
||
// 获取用户收藏信息
|
||
getUserFavouritesStatus();
|
||
} else {
|
||
alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
|
||
}
|
||
}).catch(function (error) {
|
||
console.log(error);
|
||
alert("无法连接到服务器，请检查网络连接！");
|
||
}).finally(function () {
|
||
doFontmin();
|
||
});
|
||
</script>
|
||
<script>
|
||
// 显示收藏还是取消收藏图标
|
||
var favortiesIcon = false;
|
||
// 获取用户收藏信息
|
||
function getUserFavouritesStatus() {
|
||
localStorageUtils.checkLocalStorage();
|
||
|
||
if (!localStorageUtils.getLoginStatus()) {
|
||
// 用户未登录
|
||
$("#favorties-button").css("visibility", "visible");
|
||
return;
|
||
}
|
||
postRequest("/book/getFavoritesStatus", { token: localStorageUtils.getToken(), bookId: bookId })
|
||
.then(function (responseData) {
|
||
var axiosData = responseData.data;
|
||
var status = axiosData.status;
|
||
var data = axiosData.data;
|
||
if (status === "success") {
|
||
console.log(data)
|
||
if (data.status == 1) {
|
||
// 用户已收藏
|
||
console.log("已收藏");
|
||
favortiesIcon = true;
|
||
} else {
|
||
// 用户没有收藏本书
|
||
console.log("没有收藏");
|
||
favortiesIcon = false;
|
||
}
|
||
toggleDisplayButton();
|
||
} else {
|
||
if (data.errCode == "20004") {
|
||
// 登陆过期，小问题，这里不弹窗显示
|
||
localStorageUtils.userLogout();
|
||
} else {
|
||
alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
|
||
}
|
||
}
|
||
}).catch(function (error) {
|
||
console.log(error);
|
||
// alert("无法连接到服务器，请检查网络连接！");
|
||
}).finally(function () {
|
||
$("#favorties-button").css("visibility", "visible");
|
||
});
|
||
}
|
||
</script>
|
||
<script>
|
||
// 正在请求标记
|
||
var requestingFlag = false;
|
||
// 添加收藏/取消收藏
|
||
function toggleFavorites(toggleStatus) {
|
||
if (requestingFlag) return;
|
||
requestingFlag = true;
|
||
$("#favorties-button").css("opacity", "0.3");
|
||
postRequest("/book/toggleFavorites", { token: localStorageUtils.getToken(), bookId: bookId, status: toggleStatus ? 1 : 0 })
|
||
.then(function (responseData) {
|
||
var axiosData = responseData.data;
|
||
var status = axiosData.status;
|
||
var data = axiosData.data;
|
||
if (status === "success") {
|
||
console.log(data)
|
||
if (data == "success") {
|
||
if (toggleStatus) {
|
||
console.log("收藏成功");
|
||
favortiesIcon = true;
|
||
} else {
|
||
console.log("取消收藏成功");
|
||
favortiesIcon = false;
|
||
}
|
||
} else {
|
||
console.log("操作失败");
|
||
}
|
||
} else {
|
||
alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
|
||
}
|
||
}).catch(function (error) {
|
||
console.log(error);
|
||
// alert("无法连接到服务器，请检查网络连接！");
|
||
}).finally(function () {
|
||
setTimeout(toggleDisplayButton, 500);
|
||
});
|
||
}
|
||
|
||
function toggleDisplayButton() {
|
||
requestingFlag = false;
|
||
$("#favorties-button").attr("src", "");
|
||
$("#favorties-button").css("opacity", "1");
|
||
if (favortiesIcon) {
|
||
$("#favorties-button").attr("src", "/assets/image/svg/favorites_fill.svg");
|
||
$("#favorties-button").attr("onclick", "toggleFavorites(false)");
|
||
} else {
|
||
$("#favorties-button").attr("src", "/assets/image/svg/favorites_empty.svg");
|
||
$("#favorties-button").attr("onclick", "toggleFavorites(true)");
|
||
}
|
||
}
|
||
</script>
|
||
<!-- 页面滚动 -->
|
||
<script>
|
||
$(".download-container").css("transition", "0.5s");
|
||
$(".download-container").css("border-radius", "20px");
|
||
function scrollToTarget() {
|
||
$('html, body').animate({
|
||
scrollTop: $("#scrollTarget").offset().top
|
||
}, 600);
|
||
setTimeout(function () {
|
||
$(".download-container").css("background-color", "#6DA122");
|
||
$(".download-container").css("transform", "scale(1.05)");
|
||
setTimeout(function () {
|
||
$(".download-container").css("background-color", "");
|
||
$(".download-container").css("transform", "");
|
||
}, 500);
|
||
}, 500);
|
||
}
|
||
</script>
|
||
<!-- 获取文件下载链接信息 -->
|
||
<script>
|
||
// 获取文件信息
|
||
function getFileInfo() {
|
||
function stringifyFileSize(nBytes = 0) {
|
||
// 美化输出文件大小
|
||
let sOutput = nBytes + " bytes";
|
||
const aMultiples = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
||
for (nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
|
||
sOutput = nApprox.toFixed(2) + " " + aMultiples[nMultiple];
|
||
}
|
||
return sOutput;
|
||
}
|
||
getRequest("/file/getFile", { bookId: bookId })
|
||
.then(function (response) {
|
||
var axiosData = response.data;
|
||
var status = axiosData.status;
|
||
var data = axiosData.data;
|
||
if (status === "success") {
|
||
console.log(data);
|
||
|
||
var fileContainer = document.getElementById("file-container");
|
||
var innerHTML = [];
|
||
for (let i = 0; i < data.length; i++) {
|
||
const fileInfo = data[i];
|
||
innerHTML.push(`
|
||
<div class="file-item">
|
||
<div class="file-title">
|
||
<span class="file-name size20">${fileInfo.fileName}</span><span class="file-ext size16">${fileInfo.fileFormat == "" ? "" : ("." + fileInfo.fileFormat)}</span>
|
||
<span class="file-size size14" style="padding-left: 30px;">${stringifyFileSize(fileInfo.fileSize)}</span>
|
||
</div>
|
||
<div class="file-detail">
|
||
<span class="overflow-hide file-sha1 size12">SHA1：<span class="">${fileInfo.fileSha1}</span></span>
|
||
<span class="file-copyright size14 overflow-hide">${fileInfo.bookOrigin == "" ? "" : ("来源信息：" + fileInfo.bookOrigin) }</span>
|
||
<span class="file-copyright size14" style="margin-top: 12px; display: block;">下载地址：</span>
|
||
</div>
|
||
<div class="file-object">
|
||
<div class="file-object-item">
|
||
<a href="" target="_blank">百度网盘</a>
|
||
</div>
|
||
<div class="file-object-item">
|
||
<a href="" target="_blank">阿里云盘</a>
|
||
</div>
|
||
<div class="file-object-item">
|
||
<a href="" download="文件名.pdf">直链下载</a>
|
||
</div>
|
||
</div>
|
||
</div>`
|
||
);
|
||
}
|
||
fileContainer.innerHTML = innerHTML.join("");
|
||
|
||
if (data.length == 0) {
|
||
var fileItem = document.createElement("div");
|
||
fileItem.className = "file-item";
|
||
fileItem.style.textAlign = "center";
|
||
fileItem.innerHTML = "暂无可用文件源";
|
||
fileContainer.appendChild(fileItem);
|
||
}
|
||
} else {
|
||
alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
|
||
}
|
||
}).catch(function (error) {
|
||
console.log(error);
|
||
alert("无法连接到服务器，请检查网络连接！");
|
||
}).finally(function () {
|
||
doFontmin();
|
||
});
|
||
}
|
||
getFileInfo();
|
||
</script>
|
||
</body>
|
||
</html> |