feat: 产品卡片添加复制购买链接按钮
This commit is contained in:
@@ -483,6 +483,28 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.copy-link-btn {
|
||||||
|
background: rgba(0, 212, 255, 0.2);
|
||||||
|
border: 1px solid rgba(0, 212, 255, 0.5);
|
||||||
|
color: #00d4ff;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-link-btn:hover {
|
||||||
|
background: rgba(0, 212, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-link-btn.copied {
|
||||||
|
background: rgba(0, 255, 136, 0.2);
|
||||||
|
border-color: rgba(0, 255, 136, 0.5);
|
||||||
|
color: #00ff88;
|
||||||
|
}
|
||||||
|
|
||||||
.alert-banner {
|
.alert-banner {
|
||||||
background: linear-gradient(90deg, #ff6b6b, #ff8e53);
|
background: linear-gradient(90deg, #ff6b6b, #ff8e53);
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
@@ -675,6 +697,31 @@
|
|||||||
audio.currentTime = 0;
|
audio.currentTime = 0;
|
||||||
audio.play().catch(e => console.log('音频播放需要用户交互'));
|
audio.play().catch(e => console.log('音频播放需要用户交互'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function copyLink(url, btn) {
|
||||||
|
navigator.clipboard.writeText(url).then(() => {
|
||||||
|
btn.textContent = '已复制';
|
||||||
|
btn.classList.add('copied');
|
||||||
|
setTimeout(() => {
|
||||||
|
btn.textContent = '复制链接';
|
||||||
|
btn.classList.remove('copied');
|
||||||
|
}, 2000);
|
||||||
|
}).catch(() => {
|
||||||
|
// fallback
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.value = url;
|
||||||
|
document.body.appendChild(input);
|
||||||
|
input.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(input);
|
||||||
|
btn.textContent = '已复制';
|
||||||
|
btn.classList.add('copied');
|
||||||
|
setTimeout(() => {
|
||||||
|
btn.textContent = '复制链接';
|
||||||
|
btn.classList.remove('copied');
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function showAlertBanner(products) {
|
function showAlertBanner(products) {
|
||||||
const banner = document.getElementById('alertBanner');
|
const banner = document.getElementById('alertBanner');
|
||||||
@@ -1000,6 +1047,7 @@
|
|||||||
? '<span class="buy-btn sold-out">已售罄</span>'
|
? '<span class="buy-btn sold-out">已售罄</span>'
|
||||||
: `<a href="${product.buyUrl || ACTIVITY_URL}" target="_blank" class="buy-btn">立即购买</a>`
|
: `<a href="${product.buyUrl || ACTIVITY_URL}" target="_blank" class="buy-btn">立即购买</a>`
|
||||||
}
|
}
|
||||||
|
${product.buyUrl ? `<button class="copy-link-btn" onclick="copyLink('${product.buyUrl}', this)">复制链接</button>` : ''}
|
||||||
</div>
|
</div>
|
||||||
<div class="product-monitor-checkbox">
|
<div class="product-monitor-checkbox">
|
||||||
<input type="checkbox" id="monitor-${product.id}"
|
<input type="checkbox" id="monitor-${product.id}"
|
||||||
|
|||||||
Reference in New Issue
Block a user