feat(ui): 添加详情模态框关闭按钮并优化购买跳转逻辑- 在详情模态框中新增关闭按钮,提升用户体验
- 更新淘宝跳转按钮样式,增强视觉效果 - 修改购买按钮点击事件,统一使用 showModal 方法- 调整复制标题功能,支持动态金额显示-优化模态框相关 JavaScript 逻辑,提高代码可维护性
This commit is contained in:
@@ -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();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user