app/templates/admin/codes/index.html

{% extends "base.html" %}

{% block title %}兑换码管理 - GPT Team 管理系统{% endblock %}

{% block content %}
<div class="page-header">
    <h2>兑换码管理</h2>
</div>

<!-- 统计卡片 -->
<div class="stats-container">
    <div class="stat-card">
        <div class="stat-icon">🎫</div>
        <div class="stat-content">
            <div class="stat-value">{{ stats.total }}</div>
            <div class="stat-label">兑换码总数</div>
        </div>
    </div>
    <div class="stat-card stat-success">
        <div class="stat-icon">✅</div>
        <div class="stat-content">
            <div class="stat-value">{{ stats.unused }}</div>
            <div class="stat-label">未使用</div>
        </div>
    </div>
    <div class="stat-card stat-info">
        <div class="stat-icon">📝</div>
        <div class="stat-content">
            <div class="stat-value">{{ stats.used }}</div>
            <div class="stat-label">已使用</div>
        </div>
    </div>
    <div class="stat-card stat-danger">
        <div class="stat-icon">⏰</div>
        <div class="stat-content">
            <div class="stat-value">{{ stats.expired }}</div>
            <div class="stat-label">已过期</div>
        </div>
    </div>
</div>

<!-- 操作栏 -->
<div class="content-section">
    <div class="section-header">
        <div class="header-group">
            <div class="filter-tabs">
                <button onclick="filterByStatus('')" class="filter-tab {% if not status_filter %}active{% endif %}"

                    id="filter-all">全部</button>
                <button onclick="filterByStatus('unused')"

                    class="filter-tab {% if status_filter == 'unused' %}active{% endif %}"

                    id="filter-unused">未使用</button>
                <button onclick="filterByStatus('used')"

                    class="filter-tab {% if status_filter == 'used' %}active{% endif %}" id="filter-used">已使用</button>
                <button onclick="filterByStatus('expired')"

                    class="filter-tab {% if status_filter == 'expired' %}active{% endif %}"

                    id="filter-expired">已过期</button>
            </div>

            <form action="/admin/codes" method="get" class="search-form">
                <div class="input-group-clean">
                    <i data-lucide="search" style="width: 14px; height: 14px;"></i>
                    <input type="text" name="search" value="{{ search or '' }}" placeholder="搜索兑换码..."

                        style="width: 180px;">
                    {% if search %}
                    <a href="/admin/codes" title="清除搜索">
                        <i data-lucide="x-circle" style="width: 14px; height: 14px;"></i>
                    </a>
                    {% endif %}
                </div>
            </form>
        </div>

        <div class="header-actions">
            <div class="dropdown-wrapper">
                <button class="btn btn-secondary dropdown-toggle" onclick="toggleDropdown('columnToggleDropdown')">
                    <i data-lucide="columns" style="width: 16px; height: 16px;"></i> 列设置
                </button>
                <div id="columnToggleDropdown" class="dropdown-menu">
                    <!-- Column checkboxes will be generated here -->
                </div>
            </div>
            <button onclick="showModal('generateCodeModal')" class="btn btn-primary">
                <i data-lucide="plus-circle" style="width: 16px; height: 16px;"></i> 生成兑换码
            </button>
            <button onclick="exportCodes()" class="btn btn-secondary">
                <i data-lucide="download" style="width: 16px; height: 16px;"></i> 导出
            </button>
        </div>
    </div>
</div>

<!-- 兑换码列表 -->
<div class="content-section">
    {% if codes %}
    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width: 40px;">
                        <input type="checkbox" id="selectAll" onclick="toggleSelectAll(this)"

                            style="width: auto; margin: 0;">
                    </th>
                    <th>兑换码</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>过期时间</th>
                    <th>使用者邮箱</th>
                    <th>使用时间</th>
                    <th>质保</th>
                    <th>质保时长</th>
                    <th style="text-align: right;">操作</th>
                </tr>
            </thead>
            <tbody id="codesTableBody">
                {% for code in codes %}
                <tr data-status="{{ code.status }}">
                    <td>
                        <input type="checkbox" class="code-checkbox" value="{{ code.code }}"

                            onchange="updateSelectionCount()" style="width: auto; margin: 0;">
                    </td>
                    <td>
                        <div style="display: flex; align-items: center; gap: 0.5rem;">
                            <i data-lucide="ticket" style="width: 14px; height: 14px; color: var(--text-muted);"></i>
                            <code>{{ code.code }}</code>
                        </div>
                    </td>
                    <td>
                        {% if code.status == 'unused' %}
                        <span class="status-badge status-active">未使用</span>
                        {% elif code.status == 'used' %}
                        <span class="status-badge status-full">已使用</span>
                        {% elif code.status == 'warranty_active' %}
                        <span class="status-badge status-info">质保中</span>
                        {% elif code.status == 'expired' %}
                        <span class="status-badge status-error">已过期</span>
                        {% endif %}
                    </td>
                    <td>{{ code.created_at }}</td>
                    <td>{{ code.expires_at if code.expires_at else '永久有效' }}</td>
                    <td>{{ code.used_by_email if code.used_by_email else '-' }}</td>
                    <td>{{ code.used_at if code.used_at else '-' }}</td>
                    <td>
                        {% if code.has_warranty %}
                        <span class="status-badge status-info">是</span>
                        {% else %}
                        <span class="status-badge" style="background: #f3f4f6; color: #6b7280;">否</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if code.has_warranty %}
                        <span style="font-size: 0.875rem;">{{ code.warranty_days }} 天</span>
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td style="text-align: right;">
                        <div class="action-buttons" style="justify-content: flex-end;">
                            <button onclick="copyCode('{{ code.code }}')"

                                class="btn btn-sm btn-icon btn-minimal btn-secondary" title="复制">
                                <i data-lucide="copy" style="width: 14px; height: 14px;"></i>
                            </button>
                            <button

                                onclick="editCode('{{ code.code }}', {{ 'true' if code.has_warranty else 'false' }}, {{ code.warranty_days or 30 }})"

                                class="btn btn-sm btn-icon btn-minimal btn-info" title="编辑">
                                <i data-lucide="edit-3" style="width: 14px; height: 14px;"></i>
                            </button>
                            {% if code.status == 'unused' %}
                            <button onclick="deleteCode('{{ code.code }}')"

                                class="btn btn-sm btn-icon btn-minimal btn-danger" title="删除">
                                <i data-lucide="trash-2" style="width: 14px; height: 14px;"></i>
                            </button>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- 批量操作栏 -->
    <div id="bulkActionBar" class="bulk-action-bar" style="display: none;">
        <div class="bulk-info">
            已选择 <span id="selectedCount">0</span> 个兑换码
        </div>
        <div class="bulk-actions">
            <button onclick="showBulkEditModal()" class="btn btn-primary">
                <i data-lucide="edit-3" style="width: 16px; height: 16px;"></i> 批量修改质保
            </button>
            <button onclick="deselectAll()" class="btn btn-secondary">取消全选</button>
        </div>
    </div>

    <!-- 分页 -->
    <!-- 分页 -->
    {% if pagination %}
    <div class="pagination">
        <div class="per-page-selector">
            每页
            <select class="per-page-select" onchange="changePerPage(this.value)">
                <option value="20" {% if pagination.per_page==20 %}selected{% endif %}>20</option>
                <option value="50" {% if pagination.per_page==50 %}selected{% endif %}>50</option>
                <option value="100" {% if pagination.per_page==100 %}selected{% endif %}>100</option>
            </select>
        </div>

        {% if pagination.total_pages > 1 %}
        {% set search_param = '&search=' + search|urlencode if search else '' %}
        {% set status_param = '&status_filter=' + status_filter|urlencode if status_filter else '' %}
        {% set per_page_param = '&per_page=' + pagination.per_page|string if pagination.per_page != 50 else '' %}
        {% set base_query = search_param + status_param + per_page_param %}

        <div class="pagination-controls">
            <!-- 首页 -->
            <a href="?page=1{{ base_query }}"

                class="btn btn-sm btn-secondary {% if pagination.current_page == 1 %}disabled{% endif %}" title="首页">
                <i data-lucide="chevrons-left" style="width: 14px; height: 14px;"></i>
            </a>

            <!-- 上一页 -->
            {% if pagination.current_page > 1 %}
            <a href="?page={{ pagination.current_page - 1 }}{{ base_query }}" class="btn btn-sm btn-secondary"

                title="上一页">
                <i data-lucide="chevron-left" style="width: 14px; height: 14px;"></i>
            </a>
            {% else %}
            <button class="btn btn-sm btn-secondary" disabled>
                <i data-lucide="chevron-left" style="width: 14px; height: 14px;"></i>
            </button>
            {% endif %}

            <!-- 页码 -->
            <div class="pagination-numbers">
                {% set start_page = pagination.current_page - 2 %}
                {% set end_page = pagination.current_page + 2 %}

                {% if start_page < 1 %} {% set end_page=end_page + (1 - start_page) %} {% set start_page=1 %} {% endif
                    %} {% if end_page> pagination.total_pages %}
                    {% set start_page = start_page - (end_page - pagination.total_pages) %}
                    {% set end_page = pagination.total_pages %}
                    {% if start_page < 1 %} {% set start_page=1 %} {% endif %} {% endif %} {% if start_page> 1 %}
                        <a href="?page=1{{ base_query }}" class="page-number">1</a>
                        {% if start_page > 2 %}
                        <span class="page-dots">...</span>
                        {% endif %}
                        {% endif %}

                        {% for p in range(start_page, end_page + 1) %}
                        <a href="?page={{ p }}{{ base_query }}"

                            class="page-number {% if p == pagination.current_page %}active{% endif %}">{{ p }}</a>
                        {% endfor %}

                        {% if end_page < pagination.total_pages %} {% if end_page < pagination.total_pages - 1 %} <span

                            class="page-dots">...</span>
                            {% endif %}
                            <a href="?page={{ pagination.total_pages }}{{ base_query }}" class="page-number">{{
                                pagination.total_pages }}</a>
                            {% endif %}
            </div>

            <!-- 下一页 -->
            {% if pagination.current_page < pagination.total_pages %} <a

                href="?page={{ pagination.current_page + 1 }}{{ base_query }}" class="btn btn-sm btn-secondary"

                title="下一页">
                <i data-lucide="chevron-right" style="width: 14px; height: 14px;"></i>
                </a>
                {% else %}
                <button class="btn btn-sm btn-secondary" disabled>
                    <i data-lucide="chevron-right" style="width: 14px; height: 14px;"></i>
                </button>
                {% endif %}

                <!-- 末页 -->
                <a href="?page={{ pagination.total_pages }}{{ base_query }}"

                    class="btn btn-sm btn-secondary {% if pagination.current_page == pagination.total_pages %}disabled{% endif %}"

                    title="末页">
                    <i data-lucide="chevrons-right" style="width: 14px; height: 14px;"></i>
                </a>
        </div>
        <span class="pagination-info" style="margin-left: 1rem;">共 {{ pagination.total }} 条</span>
        {% endif %}
    </div>
    {% endif %}
    {% else %}
    <div class="empty-state">
        <i data-lucide="package-open" style="width: 48px; height: 48px; margin-bottom: 1rem; opacity: 0.2;"></i>
        <p>暂无兑换码数据</p>
        <button onclick="showModal('generateCodeModal')" class="btn btn-primary">立即生成</button>
    </div>
    {% endif %}
</div>

<!-- 批量编辑兑换码模态框 -->
<div id="bulkEditCodeModal" class="modal-overlay">
    <div class="modal">
        <div class="modal-header">
            <h3>批量修改质保</h3>
            <button class="modal-close" onclick="hideModal('bulkEditCodeModal')">&times;</button>
        </div>
        <div class="modal-body">
            <div class="alert alert-info" style="margin-bottom: 1rem;">
                您正在批量修改 <strong id="bulk-selected-count-display">0</strong> 个兑换码的质保信息。
            </div>
            <form id="bulkEditCodeForm" onsubmit="handleBulkEditCode(event)">
                <div class="form-group">
                    <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-top: 1rem;">
                        <input type="checkbox" id="bulk-edit-has-warranty" name="hasWarranty"

                            style="width: auto; margin: 0;"

                            onchange="toggleWarrantyDays(this, 'bulk-edit-warranty-days-group')">
                        <span>质保兑换码 (可重复使用)</span>
                    </label>
                </div>
                <div class="form-group" id="bulk-edit-warranty-days-group" style="display: none;">
                    <label>质保时长 (天) *</label>
                    <input type="number" id="bulk-edit-warranty-days" name="warrantyDays" class="form-control"

                        value="30" min="1" max="3650">
                </div>
                <button type="submit" class="btn btn-primary" style="margin-top: 1rem;">保存修改</button>
            </form>
        </div>
    </div>
</div>

<!-- 编辑兑换码模态框 -->
<div id="editCodeModal" class="modal-overlay">
    <div class="modal">
        <div class="modal-header">
            <h3>编辑兑换码</h3>
            <button class="modal-close" onclick="hideModal('editCodeModal')">&times;</button>
        </div>
        <div class="modal-body">
            <form id="editCodeForm" onsubmit="handleEditCode(event)">
                <input type="hidden" id="edit-code" name="code">
                <div class="form-group">
                    <label>兑换码</label>
                    <input type="text" id="edit-code-display" class="form-control" readonly

                        style="background: rgba(0,0,0,0.05);">
                </div>
                <div class="form-group">
                    <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-top: 1rem;">
                        <input type="checkbox" id="edit-has-warranty" name="hasWarranty" style="width: auto; margin: 0;"

                            onchange="toggleWarrantyDays(this, 'edit-warranty-days-group')">
                        <span>质保兑换码 (可重复使用)</span>
                    </label>
                </div>
                <div class="form-group" id="edit-warranty-days-group" style="display: none;">
                    <label>质保时长 (天) *</label>
                    <input type="number" id="edit-warranty-days" name="warrantyDays" class="form-control" value="30"

                        min="1" max="3650">
                </div>
                <button type="submit" class="btn btn-primary" style="margin-top: 1rem;">保存修改</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>

    .bulk-action-bar {

        position: fixed;

        bottom: 2rem;

        left: 50%;

        transform: translateX(-50%);

        background: white;

        padding: 1rem 2rem;

        border-radius: 12px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

        display: flex;

        align-items: center;

        gap: 2rem;

        z-index: 100;

        border: 1px solid var(--border-color);

        animation: slideUp 0.3s ease-out;

    }



    @keyframes slideUp {

        from {

            transform: translate(-50%, 100%);

            opacity: 0;

        }



        to {

            transform: translate(-50%, 0);

            opacity: 1;

        }

    }



    .bulk-info {

        font-weight: 500;

        color: var(--text-color);

    }



    .bulk-actions {

        display: flex;

        gap: 0.5rem;

    }

</style>
{% endblock %}

{% block extra_js %}
<script>

    document.addEventListener('DOMContentLoaded', () => {

        // Init Column Toggler

        initColumnToggler('.data-table', 'codes_list_columns');

    });



    // Column Toggler Logic & Pagination

    function initColumnToggler(tableSelector, storageKey) {

        const table = document.querySelector(tableSelector);

        if (!table) return;



        const headers = table.querySelectorAll('thead th');

        const container = document.getElementById('columnToggleDropdown');

        if (!container) return;



        container.innerHTML = '<div class="dropdown-header">显示/隐藏列</div>';



        // Load saved preferences

        const saved = JSON.parse(localStorage.getItem(storageKey) || '[]');



        headers.forEach((th, index) => {

            const text = th.innerText.trim();

            if (!text || text === '操作' || th.querySelector('input')) return; // Checkbox column or Action



            const isVisible = !saved.includes(index);

            if (!isVisible) {

                th.style.display = 'none';

                table.querySelectorAll(`tbody tr td:nth-child(${index + 1})`).forEach(td => td.style.display = 'none');

            }



            const item = document.createElement('label');

            item.className = 'dropdown-item';

            item.innerHTML = `

        <input type="checkbox" ${isVisible ? 'checked' : ''}>

            <span>${text}</span>

            `;



            item.querySelector('input').addEventListener('change', (e) => {

                const checked = e.target.checked;

                // Toggle header

                th.style.display = checked ? '' : 'none';

                // Toggle cells

                table.querySelectorAll(`tbody tr td:nth-child(${index + 1})`).forEach(td => td.style.display = checked ? '' : 'none');



                // Save to localStorage

                const currentSaved = JSON.parse(localStorage.getItem(storageKey) || '[]');

                if (checked) {

                    const idx = currentSaved.indexOf(index);

                    if (idx > -1) currentSaved.splice(idx, 1);

                } else {

                    if (!currentSaved.includes(index)) currentSaved.push(index);

                }

                localStorage.setItem(storageKey, JSON.stringify(currentSaved));

            });



            container.appendChild(item);

        });

    }



    function toggleDropdown(id) {

        const el = document.getElementById(id);

        if (el) {

            el.classList.toggle('show');

            document.querySelectorAll('.dropdown-menu').forEach(d => {

                if (d.id !== id) d.classList.remove('show');

            });

        }

    }



    // Close dropdowns

    document.addEventListener('click', (e) => {

        if (!e.target.closest('.dropdown-wrapper') && !e.target.closest('.dropdown-toggle')) {

            document.querySelectorAll('.dropdown-menu').forEach(d => d.classList.remove('show'));

        }

    });



    function changePerPage(val) {

        const url = new URL(window.location.href);

        url.searchParams.set('per_page', val);

        url.searchParams.set('page', 1);

        window.location.href = url.toString();

    }



    // 全选/取消全选

    function toggleSelectAll(checkbox) {

        const checkboxes = document.querySelectorAll('.code-checkbox');

        checkboxes.forEach(cb => {

            // 只选择当前显示的行

            if (cb.closest('tr').style.display !== 'none') {

                cb.checked = checkbox.checked;

            }

        });

        updateSelectionCount();

    }



    // 取消全选

    function deselectAll() {

        document.getElementById('selectAll').checked = false;

        toggleSelectAll(document.getElementById('selectAll'));

    }



    // 更新选择计数

    function updateSelectionCount() {

        const selected = document.querySelectorAll('.code-checkbox:checked');

        const count = selected.length;

        document.getElementById('selectedCount').innerText = count;



        const actionBar = document.getElementById('bulkActionBar');

        if (count > 0) {

            actionBar.style.display = 'flex';

        } else {

            actionBar.style.display = 'none';

        }

    }



    // 显示批量编辑弹窗

    function showBulkEditModal() {

        const selected = document.querySelectorAll('.code-checkbox:checked');

        document.getElementById('bulk-selected-count-display').innerText = selected.length;

        showModal('bulkEditCodeModal');

    }



    // 处理批量编辑

    async function handleBulkEditCode(event) {

        event.preventDefault();

        const selected = document.querySelectorAll('.code-checkbox:checked');

        const codes = Array.from(selected).map(cb => cb.value);



        const has_warranty = document.getElementById('bulk-edit-has-warranty').checked;

        const warranty_days = parseInt(document.getElementById('bulk-edit-warranty-days').value) || 30;



        try {

            const response = await fetch('/admin/codes/bulk-update', {

                method: 'POST',

                headers: {

                    'Content-Type': 'application/json'

                },

                body: JSON.stringify({

                    codes: codes,

                    has_warranty: has_warranty,

                    warranty_days: has_warranty ? warranty_days : null

                })

            });



            const result = await response.json();



            if (response.ok && result.success) {

                showToast('批量更新成功', 'success');

                hideModal('bulkEditCodeModal');

                setTimeout(() => window.location.reload(), 1000);

            } else {

                showToast(result.error || '批量更新失败', 'error');

            }

        } catch (error) {

            console.error(error);

            showToast('网络错误', 'error');

        }

    }



    // 当前筛选状态

    let currentFilter = 'all';



    // 按状态筛选 (服务器端筛选)

    function filterByStatus(status) {

        const url = new URL(window.location.href);

        if (status && status !== 'all') {

            url.searchParams.set('status_filter', status);

        } else {

            url.searchParams.delete('status_filter');

        }

        url.searchParams.set('page', 1);

        window.location.href = url.toString();

    }



    // 删除兑换码

    async function deleteCode(code) {

        if (!confirm(`确定要删除兑换码 ${code} 吗?`)) {

            return;

        }



        try {

            const response = await fetch(`/admin/codes/${encodeURIComponent(code)}/delete`, {

                method: 'POST',

                headers: {

                    'Content-Type': 'application/json'

                }

            });



            const result = await response.json();



            if (response.ok && result.success) {

                showToast('删除成功', 'success');

                // 刷新页面

                setTimeout(() => {

                    window.location.reload();

                }, 1000);

            } else {

                showToast(result.error || '删除失败', 'error');

            }

        } catch (error) {

            showToast('网络错误', 'error');

        }

    }





    // 导出兑换码

    async function exportCodes() {

        try {

            const urlParams = new URLSearchParams(window.location.search);

            const search = urlParams.get('search') || '';

            const exportUrl = `/admin/codes/export${search ? '?search=' + encodeURIComponent(search) : ''}`;



            const response = await fetch(exportUrl);



            if (response.ok) {

                const blob = await response.blob();

                const url = URL.createObjectURL(blob);

                const a = document.createElement('a');

                a.href = url;

                a.download = `redemption_codes_${new Date().getTime()}.xlsx`;

                document.body.appendChild(a);

                a.click();

                document.body.removeChild(a);

                URL.revokeObjectURL(url);

                showToast('导出成功', 'success');

            } else {

                showToast('导出失败', 'error');

            }

        } catch (error) {

            showToast('网络错误', 'error');

        }

    }



    // 编辑兑换码

    function editCode(code, hasWarranty, warrantyDays) {

        document.getElementById('edit-code').value = code;

        document.getElementById('edit-code-display').value = code;



        const hasWarrantyCheckbox = document.getElementById('edit-has-warranty');

        hasWarrantyCheckbox.checked = hasWarranty;



        const warrantyDaysInput = document.getElementById('edit-warranty-days');

        warrantyDaysInput.value = warrantyDays || 30;



        // 触发显示/隐藏

        toggleWarrantyDays(hasWarrantyCheckbox, 'edit-warranty-days-group');



        showModal('editCodeModal');

    }



    async function handleEditCode(event) {

        event.preventDefault();

        const code = document.getElementById('edit-code').value;

        const has_warranty = document.getElementById('edit-has-warranty').checked;

        const warranty_days = parseInt(document.getElementById('edit-warranty-days').value) || 30;



        try {

            const response = await fetch(`/admin/codes/${encodeURIComponent(code)}/update`, {

                method: 'POST',

                headers: {

                    'Content-Type': 'application/json'

                },

                body: JSON.stringify({

                    has_warranty,

                    warranty_days: has_warranty ? warranty_days : null

                })

            });



            const result = await response.json();



            if (response.ok && result.success) {

                showToast('更新成功', 'success');

                hideModal('editCodeModal');

                setTimeout(() => window.location.reload(), 1000);

            } else {

                showToast(result.error || '更新失败', 'error');

            }

        } catch (error) {

            showToast('网络错误', 'error');

        }

    }

</script>
{% endblock %}