查看“Widget:CopyRedeemCode”的源代码

<noinclude>{{#widget:copyRedeemCode}}
<span class="copy-text" data-begin-date="2025-06-23T23:30:00" data-launch-date="2025-06-24T23:30:00">000</span>
<span class="copy-text" data-begin-date="2025-06-23T23:30:00" data-launch-date="2025-06-25T23:30:00">11111111</span>
<span class="copy-text" data-begin-date="2025-06-24T19:30:00" data-launch-date="2025-06-26T19:30:00">22222222</span>
<span class="copy-text" data-begin-date="2025-06-25T23:59:00" data-launch-date="2025-06-24T23:59:00">33333333</span>
<span class="copy-text" data-begin-date="2025-06-26T24:00:00" data-launch-date="2025-06-24T24:00:00">44444444</span>
<span class="copy-text" data-begin-date="2025-06-27T19:30:00" data-launch-date="2025-06-27T19:30:00">5555</span>
<span class="copy-text" data-begin-date="2025-06-25T23:30:00" data-launch-date="2025-06-25T23:30:00">666666666</span>
<span class="copy-text" data-begin-date="2025-06-26T19:30:00" data-launch-date="2025-06-26T19:30:00">777777777</span>
<span class="copy-text" data-begin-date="2025-06-24T23:59:00" data-launch-date="2025-06-27T23:59:00">88</span>
<span class="copy-text" data-begin-date="2025-06-24T24:00:00" data-launch-date="2025-06-28T24:00:00">9999999999999</span>
<span class="copy-text" data-begin-date="2025-06-23T23:30:00" data-launch-date="2025-06-24T23:30:00">000</span>
<span class="copy-text" data-begin-date="2025-06-23T23:30:00" data-launch-date="2025-06-25T23:30:00">11111111</span>
<span class="copy-text" data-begin-date="2025-06-24T19:30:00" data-launch-date="2025-06-26T19:30:00">22222222</span>
<span class="copy-text" data-begin-date="2025-06-25T23:59:00" data-launch-date="2025-06-24T23:59:00">33333333</span>
<span class="copy-text" data-begin-date="2025-06-26T24:00:00" data-launch-date="2025-06-24T24:00:00">44444444</span>
<span class="copy-text" data-begin-date="2025-06-27T19:30:00" data-launch-date="2025-06-27T19:30:00">5555</span>
<span class="copy-text" data-begin-date="2025-06-25T23:30:00" data-launch-date="2025-06-25T23:30:00">666666666</span>
<span class="copy-text" data-begin-date="2025-06-26T19:30:00" data-launch-date="2025-06-26T19:30:00">777777777</span>
<span class="copy-text" data-begin-date="2025-06-24T23:59:00" data-launch-date="2025-06-27T23:59:00">88</span>
<span class="copy-text" data-begin-date="2025-06-24T24:00:00" data-launch-date="2025-06-28T24:00:00">9999999999999</span>

</noinclude><includeonly>

<script>
// 日志管理
const Logger = {
    enabled: true, // 控制是否输出日志
    log: function(...args) {
        if (this.enabled) {
            console.log('[CopyWidget]', ...args);
        }
    },
    error: function(...args) {
        if (this.enabled) {
            console.error('[CopyWidget]', ...args);
        }
    }
};

// 检查日期属性是否有效
function isValidDate(dateStr) {
    if (!dateStr || dateStr === 'null') return false;
    const date = new Date(dateStr);
    return date instanceof Date && !isNaN(date);
}

// 复制功能
function copyText(text) {
    Logger.log('复制文本:', text);
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
}

// 格式化倒计时显示
function formatCountdown(difference) {
    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
    const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((difference / 1000 / 60) % 60);
    const seconds = Math.floor((difference / 1000) % 60);

    if (days > 0) {
        return `${days}天`;
    } else if (hours > 0) {
        return `${hours}时`;
    } else if (minutes > 0) {
        return `${minutes}分`;
    } else {
        return `${seconds}秒`;
    }
}

// 格式化日期显示
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}`;
}

// 更新倒计时
function updateCountdown(element) {
    const beginDateStr = element.getAttribute('data-begin-date');
    const launchDateStr = element.getAttribute('data-launch-date');
    
    // 添加属性检查的日志
    Logger.log('日期属性检查:', {
        element: element,
        beginDateStr: beginDateStr,
        launchDateStr: launchDateStr,
        beginDateValid: isValidDate(beginDateStr),
        launchDateValid: isValidDate(launchDateStr)
    });

    // 检查日期是否有效
    if (!isValidDate(beginDateStr) || !isValidDate(launchDateStr)) {
        Logger.error('无效的日期属性:', {
            beginDate: beginDateStr,
            launchDate: launchDateStr,
            elementHtml: element.outerHTML
        });
        return;
    }

    const beginDate = new Date(beginDateStr);
    const launchDate = new Date(launchDateStr);
    const now = new Date();
    
    Logger.log('更新倒计时:', {
        beginDate: beginDate.toISOString(),
        launchDate: launchDate.toISOString(),
        now: now.toISOString()
    });

    // 检查是否在开始时间之前
    if (now < beginDate) {
        const difference = beginDate - now;
        const countdownSpan = element.querySelector('.countdown-copy');
        if (countdownSpan) {
            countdownSpan.classList.add('begin-countdown');
            const countdownText = formatCountdown(difference);
            
            // 更新或创建tooltip
            let tooltip = countdownSpan.querySelector('.copy-time-tooltip');
            if (!tooltip) {
                tooltip = document.createElement('span');
                tooltip.className = 'copy-time-tooltip';
                countdownSpan.appendChild(tooltip);
            }
            tooltip.textContent = `开放时间：${formatDate(beginDate)}`;
            
            // 更新倒计时文本
            if (countdownSpan.firstChild && countdownSpan.firstChild.nodeType === Node.TEXT_NODE) {
                countdownSpan.firstChild.textContent = countdownText;
            } else {
                countdownSpan.insertBefore(document.createTextNode(countdownText), countdownSpan.firstChild);
            }
        }
    }
    // 检查是否在开始时间和发布时间之间
    else if (now >= beginDate && now < launchDate) {
        const difference = launchDate - now;
        const countdownSpan = element.querySelector('.countdown-copy');
        if (countdownSpan) {
            countdownSpan.classList.remove('begin-countdown');
            const countdownText = formatCountdown(difference);
            
            // 更新tooltip
            let tooltip = countdownSpan.querySelector('.copy-time-tooltip');
            if (!tooltip) {
                tooltip = document.createElement('span');
                tooltip.className = 'copy-time-tooltip';
                countdownSpan.appendChild(tooltip);
            }
            tooltip.textContent = `结束时间：${formatDate(launchDate)}`;
            
            // 更新倒计时文本
            if (countdownSpan.firstChild && countdownSpan.firstChild.nodeType === Node.TEXT_NODE) {
                countdownSpan.firstChild.textContent = countdownText;
            } else {
                countdownSpan.insertBefore(document.createTextNode(countdownText), countdownSpan.firstChild);
            }
        }
    }
    // 超过发布时间
    else {
        Logger.log('超过发布时间，隐藏元素');
        element.style.display = 'none';
    }
}

// 初始化所有复制元素
function initCopyElements() {
    const copyElements = document.querySelectorAll('.copy-text');
    Logger.log('初始化复制元素:', {
        elementsCount: copyElements.length,
        elementsHtml: Array.from(copyElements).map(el => el.outerHTML)
    });
    
    copyElements.forEach((element, index) => {
        // 检查元素的属性
        const beginDate = element.getAttribute('data-begin-date');
        const launchDate = element.getAttribute('data-launch-date');
        
        Logger.log(`处理第 ${index + 1} 个元素:`, {
            beginDate: beginDate,
            launchDate: launchDate,
            text: element.textContent.trim(),
            hasBeginDate: element.hasAttribute('data-begin-date'),
            hasLaunchDate: element.hasAttribute('data-launch-date'),
            elementHtml: element.outerHTML
        });

        // 创建倒计时和复制图标的容器
        const actionSpan = document.createElement('span');
        actionSpan.className = 'countdown-copy';
        
        // 添加倒计时文本节点（如果有倒计时属性且属性值有效）
        if (element.hasAttribute('data-begin-date') && 
            element.hasAttribute('data-launch-date') && 
            isValidDate(beginDate) && 
            isValidDate(launchDate)) {
            actionSpan.appendChild(document.createTextNode(''));
            // 如果日期有效，初始化倒计时
            updateCountdown(element);
            // 每秒更新一次倒计时
            setInterval(() => updateCountdown(element), 1000);
        } else {
            Logger.log(`元素 ${index + 1} 跳过倒计时初始化，日期无效`);
        }
        
        // 添加复制图标
        const copyIcon = document.createElement('span');
        copyIcon.className = 'copy-icon';
        actionSpan.appendChild(copyIcon);
        
        // 将容器添加到copy-text元素中
        element.appendChild(actionSpan);

        // 添加点击事件
        element.addEventListener('click', function() {
            // 获取文本内容（不包括倒计时和图标的文本）
            const textContent = this.childNodes[0].textContent.trim();
            copyText(textContent);
            
            // 添加复制成功的视觉反馈
            this.classList.add('copied');
            setTimeout(() => {
                this.classList.remove('copied');
            }, 300);
            
            // 显示复制成功提示
            showCopySuccess();
        });
    });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initCopyElements);

// 显示复制成功提示
function showCopySuccess() {
    // 移除可能存在的旧提示
    const existingToast = document.querySelector('.copy-success');
    if (existingToast) {
        existingToast.remove();
    }

    // 创建新提示
    const toast = document.createElement('div');
    toast.className = 'copy-success';
    toast.textContent = '复制成功！';
    document.body.appendChild(toast);

    // 2秒后自动移除提示
    setTimeout(() => {
        toast.remove();
    }, 2000);
}

</script>
<style>
.copy-text {
    padding: 3px;
    background-color: #87878724;
    border-radius: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
    margin-bottom: 5px;
}

/* 倒计时和复制图标容器 */
.countdown-copy {
    background-color: #4CAF50;
    border-radius: 3px;
    padding: 2px 3px;
    color: white;
    font-size: 0.8em;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* 添加beginDate状态的样式 */
.countdown-copy.begin-countdown {
    background-color: #FF9800;
}

/* 添加提示文本的样式 */
.countdown-copy .copy-time-tooltip {
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: center;
    padding: 5px 10px;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
}

.countdown-copy:hover .copy-time-tooltip {
    visibility: visible;
}

/* 添加小箭头 */
.countdown-copy .copy-time-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* 复制图标 */
.copy-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 3px;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 复制成功效果 */
.copy-text.copied {
    background-color: #e8f5e9;
    animation: copySuccess 0.3s ease;
}

@keyframes copySuccess {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* 鼠标悬停效果 */
.copy-text:hover {
    text-decoration: underline;
}

/* 适配移动端 */
@media (max-width: 768px) {
    .copy-text {
        font-size: 14px;
        padding-right: 85px;
    }
    
    .countdown-copy {
        font-size: 12px;
    }
}

.copy-success {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background: #4CAF50;
    color: white;
    border-radius: 4px;
    animation: fadeInOut 0.5s ease-in-out forwards;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-20px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
} 
</style>
</includeonly>