puge
/
bankCard


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5447激活网 - 激活管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 15px;
            max-width: 500px;
            margin: 0 auto;
            min-height: 100vh;
        }
        
        .header {
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeff5;
        }
        
        .site-name {
            color: #2a5bd7;
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 5px;
            letter-spacing: 1px;
        }
        
        .tagline {
            color: #5a7cda;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 2px;
            margin-top: 3px;
        }
        
        .section {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 100, 0.08);
            padding: 20px;
            margin-bottom: 25px;
        }
        
        .section-title {
            color: #1a3a8f;
            font-size: 18px;
            margin-bottom: 20px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .section-title i {
            margin-right: 10px;
            color: #2a5bd7;
        }
        
        .input-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 15px;
        }
        
        .input-label {
            font-size: 14px;
            color: #555;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .activation-input {
            padding: 15px;
            border: 2px solid #e0e7ff;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .activation-input:focus {
            outline: none;
            border-color: #2a5bd7;
            box-shadow: 0 0 0 3px rgba(42, 91, 215, 0.1);
        }
        
        .activation-btn {
            background: linear-gradient(135deg, #2a5bd7, #1a3a8f);
            color: white;
            border: none;
            padding: 16px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 10px;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s ease;
            margin-top: 5px;
            letter-spacing: 1px;
        }
        
        .activation-btn:hover {
            background: linear-gradient(135deg, #1a3a8f, #2a5bd7);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(42, 91, 215, 0.3);
        }
        
        /* 卡片式历史记录样式 */
        .history-cards-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 10px;
        }
        
        .history-card {
            border: 1px solid #e8edff;
            border-radius: 12px;
            padding: 18px;
            background-color: #fff;
            box-shadow: 0 3px 10px rgba(0, 0, 100, 0.05);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .history-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 100, 0.1);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 12px;
            border-bottom: 1px solid #f0f5ff;
        }
        
        .activation-code {
            font-weight: 700;
            color: #1a3a8f;
            font-size: 16px;
        }
        
        .card-status {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .status-active {
            background-color: #e8f7ef;
            color: #0ca750;
        }
        
        .status-pending {
            background-color: #fff4e5;
            color: #f2994a;
        }
        
        .status-expired {
            background-color: #ffeaea;
            color: #eb5757;
        }
        .status-success {
            background-color: green;
            color: #fff4e5;
        }
        
        .card-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        
        .card-item {
            display: flex;
            flex-direction: column;
        }
        
        .card-label {
            font-size: 12px;
            color: #777;
            margin-bottom: 4px;
        }
        
        .card-value {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            word-break: break-all;
        }
        
        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            padding-top: 12px;
            border-top: 1px dashed #f0f5ff;
        }
        
        .time-info {
            font-size: 12px;
            color: #999;
        }
        
        .card-actions {
            display: flex;
            gap: 10px;
        }
        
        .card-action-btn {
            background: none;
            border: 1px solid #e0e7ff;
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 12px;
            color: #5a7cda;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .card-action-btn:hover {
            background-color: #f0f5ff;
            border-color: #2a5bd7;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #aaa;
        }
        
        .empty-state i {
            font-size: 50px;
            margin-bottom: 15px;
            color: #d0d9f0;
        }
        
        .empty-state p {
            font-size: 15px;
        }
        
        .footer {
            text-align: center;
            margin-top: 20px;
            color: #888;
            font-size: 13px;
            padding-bottom: 15px;
        }
        
        /* 卡片展开/收起效果 */
        .card-expand-btn {
            background: none;
            border: none;
            color: #5a7cda;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin-top: 10px;
            padding: 8px;
        }
        
        .card-expand-btn i {
            margin-left: 5px;
            transition: transform 0.3s;
        }
        
        .card-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        
        .card-details.expanded {
            max-height: 300px;
        }

        .search-input {
            width: 100%;
            padding: 15px 45px 15px 15px;
            border: 2px solid #e0e7ff;
            border-radius: 10px;
            font-size: 14px;
            transition: all 0.3s;
            background-color: #f8faff;
        }
        
        .search-input:focus {
            outline: none;
            border-color: #2a5bd7;
            box-shadow: 0 0 0 3px rgba(42, 91, 215, 0.1);
            background-color: white;
        }
        
        .search-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #5a7cda;
            font-size: 16px;
        }

        .search-hint {
            font-size: 12px;
            color: #888;
            margin-top: 8px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .search-hint i {
            color: #5a7cda;
        }
        
        /* 表格样式 */
        .history-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(0, 0, 100, 0.05);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .history-table thead {
            background: linear-gradient(135deg, #2a5bd7, #1a3a8f);
            color: white;
        }
        
        .history-table th {
            padding: 14px 12px;
            text-align: left;
            font-weight: 600;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #1a3a8f;
        }
        
        .history-table td {
            padding: 12px;
            border-bottom: 1px solid #f0f5ff;
            background-color: white;
        }
        
        .history-table tr:hover td {
            background-color: #f8faff;
        }
        
        .history-table tr:last-child td {
            border-bottom: none;
        }
        
        .table-status {
            padding: 4px 10px;
            border-radius: 15px;
            font-size: 11px;
            font-weight: 600;
            display: inline-block;
        }
        
        /* 显示模式切换按钮 */
        .view-toggle {
            display: flex;
            gap: 5px;
            background-color: #f0f5ff;
            border-radius: 10px;
            padding: 5px;
            margin-bottom: 15px;
            width: fit-content;
        }
        
        .view-toggle-btn {
            padding: 8px 16px;
            border: none;
            background: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            color: #666;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .view-toggle-btn:hover {
            background-color: #e0e7ff;
        }
        
        .view-toggle-btn.active {
            background-color: white;
            color: #2a5bd7;
            box-shadow: 0 2px 8px rgba(42, 91, 215, 0.15);
            font-weight: 600;
        }
        
        .display-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .record-count {
            font-size: 13px;
            color: #666;
            font-weight: 500;
        }
        
        /* 响应式表格 */
        @media (max-width: 480px) {
            .history-table {
                font-size: 13px;
            }
            
            .history-table th,
            .history-table td {
                padding: 10px 8px;
            }
            
            .history-table th {
                font-size: 12px;
                padding: 12px 8px;
            }
            
            .display-controls {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .view-toggle {
                width: 100%;
                justify-content: center;
            }
        }
        
        @media (max-width: 480px) {
            body {
                padding: 12px;
            }
            
            .section {
                padding: 18px 15px;
            }
            
            .site-name {
                font-size: 22px;
            }
            
            .section-title {
                font-size: 16px;
            }
            
            .activation-input {
                padding: 14px;
                font-size: 15px;
            }
            
            .activation-btn {
                padding: 15px;
            }
            
            .history-card {
                padding: 15px;
            }
            
            .card-content {
                grid-template-columns: 1fr;
                gap: 10px;
            }
        }
        .history-table-container {
            overflow: auto;
        }
        .card-bar {
            border-top: 1px solid #f0f5ff;
            padding-top: 10px;
            display: flex;
            justify-content: end;
        }
        .card-button {
            width: 60px;
            background-color: red;
            color: white;
            text-align: center;
            border-radius: 13px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1 class="site-name">5447激活网</h1>
        <div class="tagline">专业·稳定·快速</div>
    </div>
    
    <div class="section">
        <h2 class="section-title">
            <span>积分余额</span> <span id="yhye">0.00</span>
        </h2>
        
        
        <button class="activation-btn">
            <i class="fas fa-bolt"></i> 充值余额
        </button>
    </div>
    
    <!-- 激活码输入板块 -->
    <div class="section">
        <h2 class="section-title">
            <i class="fas fa-key"></i> 激活码批量输入
        </h2>
        
        <div class="input-group">
            <label class="input-label">请输入激活码（每行一个）</label>
            <textarea 
                class="activation-input" 
                placeholder="每行输入一个激活码，例如：
V7ECKG1KSZHB
A8FDM2JLPXNC
B9GEN3KMQYOD"
                id="activationCode"
                rows="5"
                style="resize: vertical; min-height: 100px; font-family: monospace; line-height: 1.4;"
            ></textarea>
        </div>
        
        <!-- 统计信息 -->
        <div style="margin: 12px 0; padding: 10px; background-color: #f8faff; border-radius: 8px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                <span style="font-size: 13px; color: #555;">激活码数量:</span>
                <span style="font-weight: 600; color: #2a5bd7;" id="codeCount">0 个</span>
            </div>
            <div id="duplicateInfo" style="font-size: 12px; color: #777; display: none;">
                <i class="fas fa-info-circle"></i> 已自动去重
            </div>
        </div>
        
        <button class="activation-btn" id="activateBtn">
            <i class="fas fa-bolt"></i> 批量激活（金卡）
        </button>
        <button class="activation-btn" id="activateBtn2">
            <i class="fas fa-bolt"></i> 批量激活（银卡）
        </button>
    </div>
    
    <!-- 历史激活信息板块 -->
    <div class="section">
        <h2 class="section-title">
            <i class="fas fa-history"></i> 历史激活记录
        </h2>
        
        <!-- 显示控制区域 -->
        <div class="display-controls">
            <div class="view-toggle">
                <button class="view-toggle-btn active" id="cardViewBtn">
                    <i class="fas fa-th-large"></i> 卡片视图
                </button>
                <button class="view-toggle-btn" id="tableViewBtn">
                    <i class="fas fa-table"></i> 表格视图
                </button>
            </div>
            <span class="record-count" id="recordCount">0条记录</span>
        </div>
        
        <!-- 搜索框 -->
        <div class="search-container" style="margin-bottom: 15px;">
            <input type="text" class="search-input" id="searchInput" placeholder="搜索激活码、邮箱或卡号..." autocomplete="off">

            <div class="search-hint">
                <i class="fas fa-info-circle"></i>
                可搜索激活码、邮箱或卡号，支持模糊匹配
            </div>
        </div>
        
        <!-- 卡片视图容器 -->
        <div class="history-cards-container" id="historyCardsContainer">
            <!-- 卡片将通过JavaScript动态生成 -->
        </div>
        
        <!-- 表格视图容器 -->
        <div class="history-table-container" id="historyTableContainer" style="display: none;">
            <!-- 表格将通过JavaScript动态生成 -->
        </div>
        
        <!-- 无数据时的提示 -->
        <div class="empty-state" id="emptyState" style="display: none;">
            <i class="fas fa-clipboard-list"></i>
            <p>暂无激活记录</p>
        </div>
    </div>
    <button class="activation-btn" onclick="localStorage.clear();location.reload();">退出登录</button>
    <div class="footer">
        © 2023 5447激活网 版权所有 | 专业开卡服务平台
    </div>
    <script>
      window.appType = 'bank';
      window.owoLoginSuccess = (userData) => {
        console.log(userData)
        window.yhye.innerText = userData.coins
        // 获取历史提交信息
        const requestOptions = {
          method: "GET",
          redirect: "follow"
        };
        
        fetch('/api/getUserData/' + window.owo.state.userInfo.userID, requestOptions)
          .then((response) => response.json())
          .then((result) => {
              console.log(result)
              // 保存历史数据到全局变量
              window.historyData = result.data;
              // 渲染默认视图
              renderCardView(result.data);
              // 同时渲染表格视图（但隐藏）
              renderTableView(result.data);
          })
          .catch((error) => console.error(error));
      }
    </script>
    <script src="https://cunchu.site/work/login/iframe.js"></script>
    <script>
        // 全局变量
        let currentViewMode = 'card'; // 当前视图模式：'card' 或 'table'
        
        // 获取DOM元素
        const historyCardsContainer = document.getElementById('historyCardsContainer');
        const historyTableContainer = document.getElementById('historyTableContainer');
        const emptyState = document.getElementById('emptyState');
        const activationCodeInput = document.getElementById('activationCode');
        const activateBtn = document.getElementById('activateBtn');
        const activateBtn2 = document.getElementById('activateBtn2');
        const recordCount = document.getElementById('recordCount');
        const cardViewBtn = document.getElementById('cardViewBtn');
        const tableViewBtn = document.getElementById('tableViewBtn');
        
        // 搜索功能
        window.searchInput.addEventListener('input', function() {
            document.querySelectorAll('.history-card').forEach(element => {
                if (window.searchInput.value == '') {
                    element.style.display = 'block';
                }
                else {
                    if (!element.innerText.includes(window.searchInput.value)) {
                        element.style.display = 'none'
                    } else {
                        element.style.display = 'block'
                    }
                }
                
            });
            document.querySelectorAll('.history-table tbody tr').forEach(element => {
                if (window.searchInput.value == '') {
                    element.style.display = 'block';
                }
                else {
                    if (!element.innerText.includes(window.searchInput.value)) {
                        element.style.display = 'none'
                    } else {
                        element.style.display = 'block'
                    }
                }
                
            });
        });
        
        // 视图切换功能
        cardViewBtn.addEventListener('click', function() {
            if (currentViewMode !== 'card') {
                switchViewMode('card');
            }
        });
        
        tableViewBtn.addEventListener('click', function() {
            if (currentViewMode !== 'table') {
                switchViewMode('table');
            }
        });
        
        // 切换视图模式
        function switchViewMode(mode) {
            currentViewMode = mode;
            
            // 更新按钮状态
            cardViewBtn.classList.toggle('active', mode === 'card');
            tableViewBtn.classList.toggle('active', mode === 'table');
            
            // 切换视图显示
            if (mode === 'card') {
                historyCardsContainer.style.display = 'flex';
                historyTableContainer.style.display = 'none';
            } else {
                historyCardsContainer.style.display = 'none';
                historyTableContainer.style.display = 'block';
            }
        }
        
        // 搜索历史记录
        function searchHistory(query) {
            array.forEach(element => {
                if (!window.historyData) return;
                
                if (!query.trim()) {
                    // 搜索框为空，显示所有数据
                    renderCardView(window.historyData);
                    renderTableView(window.historyData);
                    return;
                }
                
                // 过滤数据
                const filteredData = window.historyData.filter(item => {
                    return item.verification_code.toLowerCase().includes(query) ||
                           item.email.toLowerCase().includes(query) ||
                           (item.first_name + ' ' + item.last_name).toLowerCase().includes(query) ||
                           item.card_number.includes(query);
                });
                
                // 渲染过滤后的数据
                if (currentViewMode === 'card') {
                    renderCardView(filteredData);
                } else {
                    renderTableView(filteredData);
                }
            });
        }
        
        // 基础请求示例
        async function setCode(code, userID) {
            try {
                const response = await fetch('/api/setCode', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        code: code,
                        userID: userID
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    alert('激活请求已提交!');
                    location.reload()
                    console.log('更新的数据:', result.data);
                    return result;
                } else {
                    alert(result.messag)
                    console.error('设置失败:', result.message);
                    return result;
                }
            } catch (error) {
                console.error('请求出错:', error);
                return {
                    success: false,
                    message: '网络请求失败'
                };
            }
        }
        
        // 渲染卡片视图
        function renderCardView(historyData) {
            // 更新记录数量
            recordCount.textContent = `${historyData.length}条记录`;
            
            if (historyData.length === 0) {
                historyCardsContainer.innerHTML = '';
                emptyState.style.display = 'block';
                return;
            }
            
            emptyState.style.display = 'none';
            historyCardsContainer.innerHTML = '';
            
            historyData.forEach(item => {
                const card = document.createElement('div');
                card.className = 'history-card';
                card.dataset.id = item.id;
                
                // 根据状态设置对应的CSS类
                let statusClass = 'status-active';
                let statusText = '待执行';
                if (item.application_state === '处理中') {
                    statusClass = 'status-pending';
                    statusText = '处理中';
                }
                if (item.application_state === '已完成') {
                    statusClass = 'status-success';
                    statusText = '已完成';
                }
                if (item.application_state === '出错') {
                    statusClass = 'status-expired';
                    statusText = '出错';
                }
                
                card.innerHTML = `
                    <div class="card-header">
                        <div class="activation-code">${item.verification_code}</div>
                        <div class="card-status ${statusClass}">${statusText}</div>
                    </div>
                    
                    <div class="card-content">
                        <div class="card-item">
                            <span class="card-label">任务ID</span>
                            <span class="card-value">${item.id}</span>
                        </div>
                        <div class="card-item">
                            <span class="card-label">卡类型</span>
                            <span class="card-value">${item.type == '0' ? '金卡' : '银卡'}</span>
                        </div>
                        
                        <div class="card-item">
                            <span class="card-label">卡号</span>
                            <span class="card-value">${item.card_number}</span>
                        </div>
                        <div class="card-item">
                            <span class="card-label">CVC</span>
                            <span class="card-value">${item.cvc}</span>
                        </div>
                        <div class="card-item">
                            <span class="card-label">到期时间</span>
                            <span class="card-value">${item.expiration_date}</span>
                        </div>
                        <div class="card-item">
                            <span class="card-label">余额</span>
                            <span class="card-value">${item.balance}</span>
                        </div>
                        
                    </div>
                    
                    <div class="card-details" id="details-${item.id}">
                        
                        <div class="card-content" style="margin-top: 10px;">
                            <div class="card-item">
                                <span class="card-label">姓名</span>
                                <span class="card-value">${item.first_name} ${item.last_name}</span>
                            </div>
                            <div class="card-item">
                                <span class="card-label">邮箱</span>
                                <span class="card-value"><a target="_black" href="https://mail.lamp.run/?search=${item.email.split('@')[0]}">${item.email}</a></span>
                            </div>
                            
                            
                            <div class="card-item">
                                <span class="card-label">更新日期</span>
                                <span class="card-value">${item.updated_at}</span>
                            </div>
                            <div class="card-item">
                                <span class="card-label">地址</span>
                                <span class="card-value">${item.address}</span>
                            </div>
                            <div class="card-item">
                                <span class="card-label">城市</span>
                                <span class="card-value">${item.city}</span>
                            </div>
                            <div class="card-item">
                                <span class="card-label">地区</span>
                                <span class="card-value">${item.dl_state}</span>
                            </div>
                            <div class="card-item">
                                <span class="card-label">邮编</span>
                                <span class="card-value">${item.zip_code}</span>
                            </div>
                            <div class="card-item">
                                <span class="card-label">手机</span>
                                <span class="card-value">${item.phone}</span>
                            </div>
                        </div>
                    </div>
                    
                    <button class="card-expand-btn" data-target="details-${item.id}">
                        查看详情 <i class="fas fa-chevron-down"></i>
                    </button>
                    <div class="card-bar">
                        <div class="card-button" onclick="updataStatus(${item.id})" style=" background-color: slateblue; margin-right: 5px; ">更新</div>
                        <div class="card-button" onclick="deleteItem(${item.id})">删除</div>
                    </div>
                `;
                
                historyCardsContainer.appendChild(card);
            });
            
            // 为展开/收起按钮添加事件
            setupExpandButtons();
        }
        function deleteItem(itemID) {
            let alertInfo = confirm('确定要删除吗？')
            if (alertInfo) {
                const myHeaders = new Headers();


                const requestOptions = {
                    method: "GET",
                    headers: myHeaders,
                    redirect: "follow"
                };

                fetch("/api/delete/" + itemID, requestOptions)
                .then((response) => response.json())
                .then((result) => {
                    alert('删除成功!')
                    location.href
                })
                .catch((error) => console.error(error));
            }
        }

        function updataStatus(itemID) {
            let alertInfo = confirm('确定要更新吗？')
            if (alertInfo) {
                const myHeaders = new Headers();


                const requestOptions = {
                    method: "GET",
                    headers: myHeaders,
                    redirect: "follow"
                };

                fetch("/api/updataStatus/" + itemID, requestOptions)
                .then((response) => response.json())
                .then((result) => {
                    alert('更新任务已提交!')
                    location.href
                })
                .catch((error) => console.error(error));
            }
        }
        // 渲染表格视图
        function renderTableView(historyData) {
            // 更新记录数量
            recordCount.textContent = `${historyData.length}条记录`;
            
            if (historyData.length === 0) {
                historyTableContainer.innerHTML = '';
                emptyState.style.display = 'block';
                return;
            }
            
            emptyState.style.display = 'none';
            
            // 构建表格HTML
            let tableHTML = `
                <table class="history-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>激活码</th>
                            <th width="70">状态</th>
                            <th>姓名</th>
                            <th>邮箱</th>
                            <th>卡号</th>
                            <th>CVC</th>
                            <th>到期时间</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
            
            historyData.forEach(item => {
                // 根据状态设置对应的CSS类
                let statusClass = 'status-active';
                let statusText = '待执行';
                if (item.application_state === '处理中') {
                    statusClass = 'status-pending';
                    statusText = '处理中';
                }
                if (item.application_state === '已完成') {
                    statusClass = 'status-success';
                    statusText = '已完成';
                }
                if (item.application_state === '出错') {
                    statusClass = 'status-expired';
                    statusText = '出错';
                }
                
                tableHTML += `
                    <tr>
                        <td><strong>${item.id}</strong></td>
                        <td><strong>${item.verification_code}</strong></td>
                        <td><span class="table-status ${statusClass}">${statusText}</span></td>
                        <td>${item.first_name} ${item.last_name}</td>
                        <td><a target="_blank" href="https://mail.lamp.run/?search=${item.email.split('@')[0]}">${item.email}</a></td>
                        <td>${item.card_number}</td>
                        <td>${item.cvc}</td>
                        <td>${item.expiration_date}</td>
                    </tr>
                `;
            });
            
            tableHTML += `
                    </tbody>
                </table>
            `;
            
            historyTableContainer.innerHTML = tableHTML;
        }
        
        // 设置展开/收起按钮功能
        function setupExpandButtons() {
            const expandButtons = document.querySelectorAll('.card-expand-btn');
            expandButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    const detailsDiv = document.getElementById(targetId);
                    const icon = this.querySelector('i');
                    
                    if (detailsDiv.classList.contains('expanded')) {
                        detailsDiv.classList.remove('expanded');
                        icon.style.transform = 'rotate(0deg)';
                        this.innerHTML = '查看详情 <i class="fas fa-chevron-down"></i>';
                    } else {
                        detailsDiv.classList.add('expanded');
                        icon.style.transform = 'rotate(180deg)';
                        this.innerHTML = '收起详情 <i class="fas fa-chevron-up"></i>';
                    }
                });
            });
        }
        
        // 激活按钮点击事件
        activateBtn.addEventListener('click', function() {
            const activationText = document.getElementById('activationCode').value.trim();
            
            if (!activationText) {
                alert('请输入激活码！');
                document.getElementById('activationCode').focus();
                return;
            }
            if (!window.owo.state.userInfo.userID) {
                alert('未登录！');
                return;
            }
            
            // 解析多行激活码
            const codes = activationText.split('\n')
                .map(line => line.trim())
                .filter(line => line.length > 0);
            
            if (codes.length === 0) {
                alert('请输入有效的激活码！');
                return;
            }
            
            // 去重处理
            const uniqueCodes = [...new Set(codes)];
            const duplicateCount = codes.length - uniqueCodes.length;
            
            // 确认对话框
            let confirmMsg = `确定消耗${uniqueCodes.length}积分批量激活${uniqueCodes.length}个激活码吗？`;
            
            if (duplicateCount > 0) {
                confirmMsg += `\n（检测到${duplicateCount}个重复激活码，已自动去重）`;
            }
            
            confirmMsg += `\n\n激活码列表：\n${uniqueCodes.join('\n')}`;
            
            const result = confirm(confirmMsg);
            if (result) {
                console.log("用户点击了确定，开始批量激活");
                // 执行批量激活
                batchSetCodes(uniqueCodes, window.owo.state.userInfo.userID, 0);
            }
        });

        activateBtn2.addEventListener('click', function() {
            const activationText = document.getElementById('activationCode').value.trim();
            
            if (!activationText) {
                alert('请输入激活码！');
                document.getElementById('activationCode').focus();
                return;
            }
            if (!window.owo.state.userInfo.userID) {
                alert('未登录！');
                return;
            }
            
            // 解析多行激活码
            const codes = activationText.split('\n')
                .map(line => line.trim())
                .filter(line => line.length > 0);
            
            if (codes.length === 0) {
                alert('请输入有效的激活码！');
                return;
            }
            
            // 去重处理
            const uniqueCodes = [...new Set(codes)];
            const duplicateCount = codes.length - uniqueCodes.length;
            
            // 确认对话框
            let confirmMsg = `确定消耗${uniqueCodes.length}积分批量激活${uniqueCodes.length}个激活码吗？`;
            
            if (duplicateCount > 0) {
                confirmMsg += `\n（检测到${duplicateCount}个重复激活码，已自动去重）`;
            }
            
            confirmMsg += `\n\n激活码列表：\n${uniqueCodes.join('\n')}`;
            
            const result = confirm(confirmMsg);
            if (result) {
                console.log("用户点击了确定，开始批量激活");
                // 执行批量激活
                batchSetCodes(uniqueCodes, window.owo.state.userInfo.userID, 1);
            }
        });
        
        // 添加实时统计功能
        document.getElementById('activationCode').addEventListener('input', function() {
            const text = this.value.trim();
            const lines = text.split('\n')
                .map(line => line.trim())
                .filter(line => line.length > 0);
            
            const uniqueCodes = [...new Set(lines)];
            const duplicateCount = lines.length - uniqueCodes.length;
            
            // 更新统计信息
            document.getElementById('codeCount').textContent = uniqueCodes.length + ' 个';
            
            const duplicateInfo = document.getElementById('duplicateInfo');
            if (duplicateCount > 0) {
                duplicateInfo.style.display = 'block';
                duplicateInfo.innerHTML = `<i class="fas fa-info-circle"></i> 检测到${duplicateCount}个重复激活码，将自动去重`;
                duplicateInfo.style.color = '#f2994a';
            } else {
                duplicateInfo.style.display = 'none';
            }
        });
        
        // 批量设置验证码函数
        async function batchSetCodes(codes, userID, type) {
            try {
                const response = await fetch('/api/batchSetCodes', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        codes: codes,
                        userID: userID,
                        type: type
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    alert('批量激活请求已提交！');
                    location.reload();
                    console.log('批量激活结果:', result);
                    return result;
                } else {
                    alert(result.message || '批量激活失败');
                    console.error('批量激活失败:', result.message);
                    return result;
                }
            } catch (error) {
                console.error('请求出错:', error);
                alert('网络请求失败，请稍后重试');
                return {
                    success: false,
                    message: '网络请求失败'
                };
            }
        }
        
        
        // 查看详情函数
        function viewDetails(id) {
            const card = document.querySelector(`[data-id="${id}"]`);
            if (card) {
                const detailsDiv = card.querySelector('.card-details');
                const expandBtn = card.querySelector('.card-expand-btn');
                const icon = expandBtn.querySelector('i');
                
                if (detailsDiv.classList.contains('expanded')) {
                    detailsDiv.classList.remove('expanded');
                    icon.style.transform = 'rotate(0deg)';
                    expandBtn.innerHTML = '查看详情 <i class="fas fa-chevron-down"></i>';
                } else {
                    detailsDiv.classList.add('expanded');
                    icon.style.transform = 'rotate(180deg)';
                    expandBtn.innerHTML = '收起详情 <i class="fas fa-chevron-up"></i>';
                }
                
                // 高亮显示卡片
                card.style.boxShadow = '0 0 0 2px #2a5bd7';
                setTimeout(() => {
                    card.style.boxShadow = '';
                }, 1000);
            }
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化视图模式为卡片视图
            switchViewMode('card');
        });
        //   自动刷新
      setInterval(() => {
        location.reload()
      }, 60*1000);
    </script>
</body>
</html>