1
0
mirror of https://gitee.com/bookshelfplus/bookshelfplus synced 2025-09-01 22:53:29 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee
Files
bookshelfplus/bookshelfplus-frontend/views/search.html

108 lines
4.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%- include("./component/header.html"); %>
<style>
.main {
width: 80vw !important;
max-width: initial !important;
}
#result-table {
width: 100%;
/* border: 1px solid black; */
margin-top: 30px;
line-height: 2.3em;
}
tr:hover {
background-color: #f5f5f5;
}
tr a {
cursor: pointer;
/* cursor: alias; */
}
</style>
</head>
<body>
<%- include("./component/navbar.html"); %>
<div class="main">
<h1><%= title %></h1>
<%- include("./component/searchbox.html"); %>
<div id="container">
<table id="result-table"></table>
<!-- <table id="origin-table"></table> -->
</div>
</div>
<%- include("./component/footer.html"); %>
<!-- 获取参数 -->
<script src="./assets/javascripts/getParams.js"></script>
<!-- 渲染表格 -->
<script src="./assets/javascripts/renderTable.js"></script>
<script>
var requestParams = getParams();
var searchbox = document.getElementById("searchInput");
var keyword = (requestParams["keyword"] || "").trim();
searchbox.value = keyword;
if (keyword === "") {
searchbox.focus();
} else {
search(keyword);
}
function search(searchboxValue) {
getRequest("/book/search", { bookName: searchboxValue })
.then(function (responseData) {
var axiosData = responseData.data;
var status = axiosData.status;
var data = axiosData.data;
if (status === "success") {
// console.log(data)
// 数据进行转换
var renderData = [];
data.forEach(element => {
var mainDivWidth = 80/*vw*/; // 定义div的宽度用于计算表格中的数据的显示长度
var columnWidth = [23, 17, 30, 10, 20];
renderData.push({
书名: ` <a target="_blank" href="/book?id=${element.category.id}">
<span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
${element.bookName}
</span>
</a>`,
分类: ` <a target="_blank" href="/category?id=${element.category.id}">
<span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
${element.category.name}
</span>
</a>`,
简介: ` <span class="overflow-omit" style="max-width: ${columnWidth[2] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
${element.description}
</span>`,
语言: ` <span class="overflow-omit" style="max-width: ${columnWidth[3] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
${element.language}
</span>`,
出版社: `<span class="overflow-omit" style="max-width: ${columnWidth[4] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
${element.publishingHouse}
</span>`,
})
});
if(renderData.length == 0) {
renderTable({ data: `没有搜索到与 <span style="color: red;">${searchboxValue}</span> 相关的书籍,请换个关键词再试试吧`, tableId: "result-table", renderTableHead: true });
} else {
renderTable({ data: renderData, tableId: "result-table", renderTableHead: true });
}
// renderTable({ data: data, tableId: "origin-table", renderTableHead: true });
// 渲染后重新获取一次字体
fontmin(getPageText());
} else {
alert(`出错啦!${data.errMsg} (错误码: ${data.errCode}) `);
}
});
}
</script>
</body>
</html>