feat(ui): 添加详情模态框关闭按钮并优化购买跳转逻辑- 在详情模态框中新增关闭按钮,提升用户体验

- 更新淘宝跳转按钮样式,增强视觉效果
- 修改购买按钮点击事件,统一使用 showModal 方法- 调整复制标题功能,支持动态金额显示-优化模态框相关 JavaScript 逻辑,提高代码可维护性
This commit is contained in:
danial
2025-10-31 16:59:27 +08:00
parent 78326d7a8c
commit 0eb68554f0

View File

@@ -373,6 +373,14 @@
</div>
</div>
<!-- 关闭按钮 -->
<div class="mb-6">
<button id="closeDetailsModalBtn"
class="w-full px-6 py-3 bg-gray-500 text-white rounded-lg font-medium hover:bg-gray-600 transition-all duration-200 shadow-sm hover:shadow-md">
关闭
</button>
</div>
<!-- 底部信任标识 -->
<div class="mt-4">
<p class="text-xs text-gray-400 text-center">
@@ -394,8 +402,8 @@
<!-- 添加淘宝跳转按钮 -->
<div class="mb-6 slide-up" style="animation-delay: 0.35s;">
<a href="{{.LinkID}}" target="_self" rel="noopener noreferrer"
class="flex items-center justify-center gap-2 w-full py-3 px-4 bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-all duration-200"
<a id="shopLinkBtn" target="_self" rel="noopener noreferrer"
class="flex items-center justify-center gap-2 w-full py-3 px-4 bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer"
style="background-color:var(--bs-info)">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@@ -512,6 +520,7 @@
// --- 详情模态框逻辑 ---
const copyTitleBtn = document.getElementById('copyTitleBtn');
const copyBtnText = document.getElementById('copyBtnText');
const closeDetailsModalBtn = document.getElementById('closeDetailsModalBtn');
/**
* @function showDetailsModal
@@ -543,7 +552,7 @@
// 复制标题功能
copyTitleBtn.addEventListener('click', async function () {
const title = '玄武卡 100';
const title = '玄武卡 {{.mmValue}}';
try {
await navigator.clipboard.writeText(title);
@@ -578,11 +587,16 @@
}
});
// 为原来的跳转链接添加点击事件,显示详情模态框
const shopLink = document.querySelector('a[href="{{.LinkID}}"]');
if (shopLink) {
shopLink.addEventListener('click', function (e) {
// 关闭按钮点击事件
closeDetailsModalBtn.addEventListener('click', function () {
closeDetailsModal();
});
// 为购买按钮添加点击事件,显示详情模态框
const shopLinkBtn = document.getElementById('shopLinkBtn');
if (shopLinkBtn) {
shopLinkBtn.addEventListener('click', function (e) {
e.preventDefault();
showDetailsModal();
});