feat: 移出书架

This commit is contained in:
xiongxiaoyang 2025-03-20 22:03:10 +08:00
parent ec9674f2aa
commit e4e511aed8
2 changed files with 140 additions and 21 deletions

View File

@ -20,6 +20,28 @@
<style type="text/css"> <style type="text/css">
body {
-webkit-user-select: none; /* Chrome, Safari, Opera */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera, and Firefox */
}
.line-limit-length { .line-limit-length {
@ -62,11 +84,21 @@
height: 180px; height: 180px;
} }
#tipLayer {
display: none;
position: absolute;
background-color: rgba(255, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
z-index: 1000;
}
</style> </style>
</head> </head>
<body> <body>
<input type="hidden" id="limit" th:value="${limit}"/> <input type="hidden" id="limit" th:value="${limit}"/>
<input type="hidden" id="curr" th:value="${curr}"/> <input type="hidden" id="curr" th:value="${curr}"/>
<input type="hidden" id="total" th:value="${total}"/> <input type="hidden" id="total" th:value="${total}"/>
@ -95,6 +127,10 @@
</div> </div>
<div id="tipLayer"
style="display:none; position:absolute; background-color:rgba(255, 0, 0, 0.8); color:white; padding:5px; border-radius:3px; cursor:pointer;">
移出书架
</div>
<div id="books" style="text-align: center;"></div> <div id="books" style="text-align: center;"></div>
@ -105,11 +141,12 @@
<a name="buttom"></a> <a name="buttom"></a>
</body> </body>
<div th:replace="mobile/common/js :: js"></div> <div th:replace="mobile/common/js :: js"></div>
<script> <script>
var timeout, isLongPress = false;
search(1, 20); search(1, 20);
function search(curr, limit) { function search(curr, limit) {
@ -136,22 +173,16 @@
book.bookDesc = book.bookDesc.replace(/<[^>]+>/g, "").replace(/\s+/g, "").replace(/&nbsp;/g, ""); book.bookDesc = book.bookDesc.replace(/<[^>]+>/g, "").replace(/\s+/g, "").replace(/&nbsp;/g, "");
} }
bookListHtml += ("<div class=\"layui-row\" style=\"margin-bottom:10px;padding:10px;background: #f2f2f2\">\n" + bookListHtml += ("<div id='"+book.bookId+"' onclick='read(\""+book.bookId+"\",\""+book.preContentId+"\")' class=\"item layui-row\" style=\"margin-bottom:10px;padding:10px;background: #f2f2f2\">\n" +
" <a href='/book/" + book.bookId + "/" + book.preContentId + ".html'>\n" +
" <div class=\"layui-col-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2\" style=\"text-align: center\">\n" + " <div class=\"layui-col-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2\" style=\"text-align: center\">\n" +
" <img style='width: 130px;height: 180px' align=\"center\"\n" + " <img style='width: 130px;height: 180px' align=\"center\"\n" +
" src=\"" + book.picUrl + "\"/>\n" + " src=\"" + book.picUrl + "\"/>\n" +
"\n" +
" </div>\n" + " </div>\n" +
" </a>\n" + " \n" +
" <div style=\"padding: 10px\" class=\"layui-col-xs6 layui-col-sm8 layui-col-md8 layui-col-lg8\">\n" + " <div style=\"padding: 10px\" class=\"layui-col-xs6 layui-col-sm8 layui-col-md8 layui-col-lg8\">\n" +
" <a href='/book/" + book.bookId + "/" + book.preContentId + ".html'>\n" +
" <div class=\"line-limit-length\" style=\";color: #000;font-size: 15px\">" + book.bookName + "</div>\n" + " <div class=\"line-limit-length\" style=\";color: #000;font-size: 15px\">" + book.bookName + "</div>\n" +
" </a>\n" +
" <div style=\";color: #4c6978;float: right;\"><i style=\"color: red\"></i></div>\n" + " <div style=\";color: #4c6978;float: right;\"><i style=\"color: red\"></i></div>\n" +
" <a href='/book/" + book.bookId + "/" + book.preContentId + ".html'>\n" +
" <div style=\";color: #a6a6a6;\" class=\"line-limit-length\">作者:" + book.authorName + "</div>\n" + " <div style=\";color: #a6a6a6;\" class=\"line-limit-length\">作者:" + book.authorName + "</div>\n" +
" </a>\n" +
" <div style=\"margin-top: 5px;color: #a6a6a6;\">类别:" + book.catName + "</div>\n" + " <div style=\"margin-top: 5px;color: #a6a6a6;\">类别:" + book.catName + "</div>\n" +
" <div style=\"margin-top: 5px;color: #a6a6a6;\">状态:" + (book.bookStatus == 0 ? '连载' : '完结') + "</div>\n" + " <div style=\"margin-top: 5px;color: #a6a6a6;\">状态:" + (book.bookStatus == 0 ? '连载' : '完结') + "</div>\n" +
" <div style=\"margin-top: 5px;color: #a6a6a6;\">更新:<i style='color: red'>" + book.lastIndexUpdateTime.substr(0, 11) + "</i>\n" + " <div style=\"margin-top: 5px;color: #a6a6a6;\">更新:<i style='color: red'>" + book.lastIndexUpdateTime.substr(0, 11) + "</i>\n" +
@ -165,6 +196,43 @@
} }
$("#bookList").html(bookListHtml); $("#bookList").html(bookListHtml);
$(".item").on('touchstart', function(e) {
var element = $(this);
// 清除可能存在的定时器
clearTimeout(timeout);
isLongPress = false;
// 获取触摸点位置
var touch = e.originalEvent.touches[0];
// 设置一个定时器在500ms后触发可以根据需要调整时间
timeout = setTimeout(function() {
e.preventDefault();
showTip(touch, element);
}, 1000);
}).on('touchend', function(e) {
if (!isLongPress) {
// 如果没有发生长按则执行点击事件的逻辑
clearTimeout(timeout);
}
}).on('touchmove', function() {
clearTimeout(timeout);
hideTip();
}).on('contextmenu', function(e) {
e.preventDefault();
});
$('#tipLayer').click(function() {
// 点击tips层时删除对应的.item元素
removeFromBookShelf($(this).data('target').attr("id"));
$(this).data('target').remove();
hideTip();
});
layui.use('laypage', function () { layui.use('laypage', function () {
var laypage = layui.laypage; var laypage = layui.laypage;
@ -203,6 +271,23 @@
} }
function showTip(touchEvent, element) {
isLongPress = true;
// 根据触摸点位置设置弹出层的位置
$('#tipLayer')
.css({
top: touchEvent.pageY - 100, // 调整这个值以改变弹出层相对于触摸点的位置
left: touchEvent.pageX - ($('#tipLayer').outerWidth() / 2)
})
.data('target', element) // 存储目标元素以便后续操作
.show();
}
function hideTip() {
isLongPress = false;
$('#tipLayer').hide().removeData('target'); // 隐藏tips并清除数据
}
function searchByAllCondition(curr, limit, newKeyword) { function searchByAllCondition(curr, limit, newKeyword) {
var toUrl = "/book/search?curr=" + curr + "&limit=" + limit; var toUrl = "/book/search?curr=" + curr + "&limit=" + limit;
@ -248,18 +333,35 @@
searchByAllCondition(1, 20, keywords); searchByAllCondition(1, 20, keywords);
} }
function read(bookId,contentId){
if(isLongPress){
return false;
}
location.href = '/book/'+bookId+"/"+contentId+".html"
hideTip();
}
</script> </script>
<script> <script>
function toMyCollect() { function removeFromBookShelf(bookId) {
var token = localStorage.getItem("token");
if (token) { $.ajax({
window.location.href = "/book/search?token=" + token; type: "delete",
} else { url: "/user/removeFromBookShelf/" + bookId,
window.location.href = "/user/login.html"; data: {},
} dataType: "json",
} success: function (data) {
if (data.code == 200) {
$("#shelf" + bookId).remove();
}
}
});
}
</script> </script>

View File

@ -53,7 +53,7 @@
更新时间 更新时间
</th> </th>
<th class="goread"> <th class="goread">
书签 操作
</th> </th>
</tr> </tr>
</thead> </thead>
@ -94,7 +94,7 @@
var bookShelfListHtml = ""; var bookShelfListHtml = "";
for (var i = 0; i < bookShelfList.length; i++) { for (var i = 0; i < bookShelfList.length; i++) {
var book = bookShelfList[i]; var book = bookShelfList[i];
bookShelfListHtml += (" <tr class=\"book_list\" vals=\"291\">\n" + bookShelfListHtml += (" <tr id='shelf" + book.bookId + "' class=\"book_list\" vals=\"291\">\n" +
" <td class=\"style bookclass\">\n" + " <td class=\"style bookclass\">\n" +
" <a href=\"/book/bookclass.html?c=" + book.catId + "\" >[" + book.catName + "]</a>\n" + " <a href=\"/book/bookclass.html?c=" + book.catId + "\" >[" + book.catName + "]</a>\n" +
" </td>\n" + " </td>\n" +
@ -109,7 +109,8 @@
" " + book.lastIndexUpdateTime + "\n" + " " + book.lastIndexUpdateTime + "\n" +
" </td>\n" + " </td>\n" +
" <td class=\"goread\">\n" + " <td class=\"goread\">\n" +
"<a href='/book/" + book.bookId + "/" + book.preContentId + ".html'>继续阅读</a>" + "<div style=''><a href='/book/" + book.bookId + "/" + book.preContentId + ".html'>继续阅读</a></div>" +
"<div style='line-height:8px;padding-bottom:13px'><a href='javascript:removeFromBookShelf(\"" + book.bookId + "\")'>移出书架</a></div>" +
" </td>\n" + " </td>\n" +
" </tr>"); " </tr>");
} }
@ -160,5 +161,21 @@
}) })
} }
function removeFromBookShelf(bookId) {
$.ajax({
type: "delete",
url: "/user/removeFromBookShelf/" + bookId,
data: {},
dataType: "json",
success: function (data) {
if (data.code == 200) {
$("#shelf" + bookId).remove();
}
}
});
}
</script> </script>
</html> </html>