我的订单 - 星哥自动�?/title> <link rel="shortcut icon" href="/static/image/favicon.ico" type="image/icon"/>  <link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/6.4.0/css/all.min.css">  <link rel="stylesheet" href="https://cdn.staticfile.net/animate.css/4.1.1/animate.min.css"> <link rel="stylesheet" href="/static/index/css/index.css?v=1.0.1"> <style> /* 联系星哥浮层样式 */ .contact-float { position: fixed; bottom: 30px; right: 30px; z-index: 9999; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } .contact-float-btn { width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); transition: all 0.3s ease; color: white; position: relative; overflow: hidden; } .contact-float-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .contact-float-btn:hover::before { width: 300px; height: 300px; } .contact-float-btn:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6); } .contact-float-btn i { font-size: 24px; margin-bottom: 2px; position: relative; z-index: 1; } .contact-float-btn span { font-size: 11px; font-weight: 500; position: relative; z-index: 1; } .contact-float-panel { position: absolute; bottom: 80px; right: 0; width: 320px; background: white; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.9); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); overflow: hidden; } .contact-float-panel.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .contact-float-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; } .contact-float-header h3 { margin: 0; font-size: 18px; font-weight: 600; } .contact-float-close { background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .contact-float-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); } .contact-float-content { padding: 20px; } .contact-float-tip { background: #f0f4ff; border-left: 3px solid #667eea; padding: 12px 14px; margin: 0 0 20px 0; border-radius: 6px; font-size: 14px; line-height: 1.6; color: #4a5568; } .contact-float-tip i { color: #667eea; margin-right: 6px; } .contact-float-qr { text-align: center; } .contact-float-qr img { width: 100%; max-width: 260px; height: auto; border-radius: 8px; border: 2px solid #e2e8f0; margin-bottom: 12px; } .contact-float-qr p { margin: 0; font-size: 14px; color: #718096; font-weight: 500; } /* 响应式设�?*/ @media (max-width: 768px) { .contact-float { bottom: 20px; right: 20px; } .contact-float-btn { width: 56px; height: 56px; } .contact-float-btn i { font-size: 22px; } .contact-float-btn span { font-size: 10px; } .contact-float-panel { width: 280px; bottom: 70px; } } @media (max-width: 480px) { .contact-float-panel { width: calc(100vw - 40px); right: -10px; } } /* 订单页面专用样式 */ .order-page { min-height: 100vh; background: linear-gradient(180deg, #f8fafc 0%, #f0f4ff 100%); } /* 页面头部 - 蓝靛色主题（订单特色�?*/ .order-header { background: linear-gradient(135deg, rgba(59, 130, 246, 0.92) 0%, rgba(99, 102, 241, 0.9) 50%, rgba(139, 92, 246, 0.88) 100%), url('https://vip.123pan.cn/1849374923/yk6baz03t0l000d7w33fgt3z753xgnphDIYxBID0AdrvDvxvDwrPDY==.jpg') center/cover no-repeat; background-attachment: fixed; padding: 3.5rem 2rem 3rem; color: white; position: relative; overflow: hidden; } .order-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 50px 50px; opacity: 0.6; } .order-header::after { content: ''; position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%); border-radius: 50%; animation: float-header 25s ease-in-out infinite; } @keyframes float-header { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-20px, 20px); } } .order-header-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } .order-header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.75rem; } .order-header p { opacity: 0.9; font-size: 1rem; } /* 主内容区 */ .order-container { max-width: 1200px; margin: -1.5rem auto 0; padding: 0 2rem 3rem; position: relative; z-index: 2; } /* 用户卡片 */ .user-card { display: flex; gap: 1.5rem; align-items: center; background: rgba(255, 255, 255, 0.95); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(99, 102, 241, 0.12); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); backdrop-filter: blur(10px); margin-bottom: 1.5rem; } .avatar { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #4f46e5, #7c3aed); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: white; flex-shrink: 0; border: 3px solid rgba(99, 102, 241, 0.2); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .info h2 { margin: 0 0 0.5rem; font-size: 1.35rem; color: #1e293b; font-weight: 600; } .info p { margin: 0.25rem 0; color: #64748b; font-size: 0.9rem; } .actions { display: flex; gap: 0.75rem; margin-top: 0.75rem; } .btn { padding: 0.55rem 1rem; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: all 0.2s; } .btn-primary { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); } .btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; } /* 订单面板 */ .panel { background: rgba(255, 255, 255, 0.95); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(99, 102, 241, 0.12); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); backdrop-filter: blur(10px); margin-top: 1.25rem; } .panel h3 { margin: 0 0 1rem; font-size: 1.15rem; color: #1e293b; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } .panel h3 i { color: #4f46e5; } .order-notice { background: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(124, 58, 237, 0.05) 100%); border: 1px solid rgba(99, 102, 241, 0.18); border-radius: 16px; padding: 1.1rem 1.25rem; display: flex; gap: 0.85rem; align-items: flex-start; margin-top: 1.25rem; } .order-notice-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(79, 70, 229, 0.12); border: 1px solid rgba(99, 102, 241, 0.16); color: #4f46e5; flex: 0 0 auto; } .order-notice-content { flex: 1; min-width: 0; } .order-notice-title { margin: 0 0 0.35rem; font-size: 0.98rem; font-weight: 600; color: #1e293b; } .order-notice-text { margin: 0; font-size: 0.86rem; line-height: 1.55; color: #64748b; } .order-notice-actions { margin-top: 0.85rem; display: flex; gap: 0.6rem; flex-wrap: wrap; } /* 订单列表 */ .orders-list { display: flex; flex-direction: column; gap: 0.75rem; } .order-item { border: 1px solid rgba(99, 102, 241, 0.12); border-radius: 12px; padding: 1rem 1.25rem; background: rgba(255, 255, 255, 0.8); transition: all 0.2s; display: flex; align-items: center; gap: 1.25rem; } .order-item:hover { box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.2); } .order-item.expired { border-left: 3px solid #ef4444; background: rgba(254, 242, 242, 0.6); } .order-product { flex: 2; min-width: 0; display: flex; align-items: center; gap: 0.75rem; } .order-title { font-size: 0.95rem; font-weight: 600; color: #1e293b; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .order-status-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 8px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; } .order-status-badge.expired { background: rgba(239, 68, 68, 0.1); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.2); } .order-status-badge.active { background: rgba(16, 185, 129, 0.1); color: #059669; border: 1px solid rgba(16, 185, 129, 0.2); } .order-info { display: flex; align-items: center; gap: 1.5rem; flex: 1.2; min-width: 0; } .order-info-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: #64748b; } .order-info-label { color: #94a3b8; font-size: 0.78rem; } .order-info-value { color: #1e293b; font-weight: 500; } .device-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 18px; padding: 0 0.5rem; background: rgba(99, 102, 241, 0.1); color: #4f46e5; border-radius: 6px; font-size: 0.7rem; font-weight: 600; } .order-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .order-actions .btn { padding: 0.4rem 0.9rem; border-radius: 6px; border: none; background: #f1f5f9; color: #64748b; cursor: pointer; font-size: 0.78rem; font-weight: 500; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .order-actions .btn:hover { background: #e2e8f0; color: #1e293b; } .order-actions .btn-download { background: rgba(99, 102, 241, 0.1); color: #4f46e5; } .order-actions .btn-download:hover { background: rgba(99, 102, 241, 0.2); color: #4338ca; } .order-device-group { display: flex; align-items: center; gap: 0.35rem; padding: 0 0.75rem; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; } .order-device-group .order-info-label { margin-right: 0.5rem; } .order-device-group .btn-clear { margin-left: 0.5rem; } .order-actions .btn-clear { background: rgba(245, 158, 11, 0.1); color: #d97706; margin: 0; } .order-actions .btn-clear:hover { background: rgba(245, 158, 11, 0.2); color: #b45309; } .order-actions .btn-delete { background: rgba(239, 68, 68, 0.1); color: #dc2626; } .order-actions .btn-delete:hover { background: rgba(239, 68, 68, 0.2); color: #b91c1c; } .order-actions .btn-renew { background: linear-gradient(135deg, #10b981, #059669); color: #fff; } .order-actions .btn-renew:hover { background: linear-gradient(135deg, #059669, #047857); color: #fff; } .order-expired-tip { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: 6px; color: #92400e; font-size: 0.78rem; margin-right: 0.5rem; } .order-expired-tip i { color: #f59e0b; } .order-expired-tip .btn-renew { padding: 0.25rem 0.75rem; margin: 0; text-decoration: none; font-size: 0.75rem; } /* 分页 */ .pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(99, 102, 241, 0.1); } .pagination-btn { min-width: 34px; height: 34px; padding: 0 0.75rem; border: 1px solid #e2e8f0; background: #fff; color: #64748b; border-radius: 8px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; } .pagination-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #4f46e5; color: #4f46e5; } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pagination-btn.active { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border-color: transparent; } .pagination-info { color: #64748b; font-size: 0.85rem; margin: 0 0.75rem; } /* 空状�?*/ .empty-state { text-align: center; padding: 4rem 2rem; color: #94a3b8; } .empty-state i { font-size: 3.5rem; margin-bottom: 1rem; opacity: 0.4; color: #4f46e5; } .empty-state p { margin: 0.5rem 0; font-size: 0.9rem; } .empty-state a { color: #4f46e5; text-decoration: none; font-weight: 500; } .empty-state a:hover { text-decoration: underline; } /* Toast */ .toast { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); background: rgba(30, 41, 59, 0.95); color: #fff; padding: 0.75rem 1.25rem; border-radius: 12px; font-size: 0.9rem; opacity: 0; transition: opacity 0.2s ease; z-index: 9999; backdrop-filter: blur(10px); } .toast.show { opacity: 1; } /* 页脚 */ .order-footer { background: #1e293b; color: rgba(255, 255, 255, 0.8); text-align: center; padding: 2rem; margin-top: auto; } .order-footer p { margin: 0.25rem 0; font-size: 0.9rem; } /* 响应�?*/ @media(max-width:960px) { .order-item { flex-wrap: wrap; gap: 0.75rem; } .order-product { flex: 1 1 100%; } .order-info { flex-wrap: wrap; gap: 0.75rem; flex: 1 1 100%; } .order-actions { flex: 1 1 100%; justify-content: flex-end; } } @media(max-width:760px) { .order-header { padding: 2rem 1.25rem 2rem; background-attachment: scroll; } .order-header h1 { font-size: 1.5rem; } .order-container { padding: 0 1.25rem 2rem; } .user-card { flex-direction: column; text-align: center; } .order-device-group { border: none; padding: 0; } .order-notice { padding: 1rem 1.05rem; } } </style> </head> <body class="order-page">  <nav class="navbar" id="navbar" data-site-nav data-open="false"> <div class="nav-container"> <a href="/" class="logo"> <img src="https://vip.123pan.cn/1849374923/ymjew503t0l000d7w32xl0rd9z79wzcwDIYxBID0AdrvDvxvDwrPDY==.jpg" alt="AutoXG Logo" class="logo-img"> <span class="logo-text">星哥自动�?/span> </a> <button class="site-nav__toggle" type="button" aria-controls="siteNavPanel" aria-expanded="false" aria-label="打开菜单"> <i class="fas fa-bars" aria-hidden="true"></i> </button> <div class="site-nav__panel" id="siteNavPanel"> <ul class="nav-menu"> <li> <a href="/" data-nav-link class="nav-link"> <i class="fas fa-home"></i> <span>首页</span> </a> </li> <li> <a href="/shop" data-nav-link class="nav-link"> <i class="fas fa-store"></i> <span>软件商城</span> </a> </li> <li> <a href="/bp" data-nav-link class="nav-link"> <i class="fas fa-link"></i> <span>BP链接</span> </a> </li> <li data-auth="user" hidden> <a href="/order" data-nav-link class="nav-link" aria-current="page"> <i class="fas fa-receipt"></i> <span>我的订单</span> </a> </li> <li> <a href="/xing" data-nav-link class="nav-link"> <i class="fas fa-book"></i> <span>帮助文档</span> </a> </li>  <li data-auth="guest"> <a href="/login" class="btn-login" data-login-link> <i class="fas fa-sign-in-alt"></i> <span>登录</span> </a> <a href="/register" class="btn-register" data-register-link> <i class="fas fa-user-plus"></i> <span>注册</span> </a> </li>  <li data-auth="user" hidden> <div class="user-menu-wrapper" data-user-menu> <button class="user-menu-toggle" data-user-menu-toggle type="button" aria-expanded="false"> <span class="user-avatar" data-avatar> <i class="fas fa-user"></i> </span> <span class="user-name" data-name></span> <i class="fas fa-chevron-down" aria-hidden="true"></i> </button> <div class="user-menu-panel" data-user-menu-panel hidden> <button class="user-menu-item" type="button" data-logout> <i class="fas fa-arrow-right-from-bracket"></i> <span>退�?/span> </button> </div> </div> </li> </ul> </div> </div> </nav>  <div class="order-header"> <div class="order-header-container"> <h1><i class="fas fa-receipt"></i> 我的订单</h1> <p>管理您购买的软件和服�?/p> </div> </div>  <div class="order-container"> <div id="userCard" class="user-card" style="display:none"> <div class="avatar" id="avatar"><i class="fas fa-user"></i></div> <div class="info"> <h2 id="nickname"></h2> <p id="username"></p> <p id="email"></p> <p id="phone"></p> </div> </div> <div class="order-notice" id="orderNotice"> <div class="order-notice-icon"><i class="fas fa-circle-info"></i></div> <div class="order-notice-content"> <div class="order-notice-title">遇到任何问题，请联系星哥</div> <p class="order-notice-text"> 不会安装、不会使用、绑其他平台的订单到当前账号、想�?一起自动化搞钱�?、定制开发或有好建议的任何问题，联系星哥 </p> <div class="order-notice-actions"> <button class="btn btn-primary" type="button" id="openContactFloat"> <i class="fas fa-comments"></i> 联系星哥 </button> </div> </div> </div> <div id="loginTip" class="user-card"> <div class="avatar"><i class="fas fa-user-lock"></i></div> <div class="info"> <h2>未登�?/h2> <p>请先登录后查看您的订�?/p> <div class="actions"> <a id="loginLink" class="btn btn-primary" href="/login"> <i class="fas fa-sign-in-alt"></i> 立即登录 </a> </div> </div> </div> <div id="ordersPanel" class="panel" style="display:none"> <h3><i class="fas fa-list-alt"></i> 订单列表</h3> <div class="orders-list" id="ordersList"></div> <div class="pagination" id="pagination" style="display:none"></div> </div> </div>  <div class="toast" id="toast"></div>  <footer class="order-footer"> <p>© 2026 星哥自动�?- All Rights Reserved</p> <p style="margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.8;"> <a target="_blank" href="https://beian.miit.gov.cn/" style="color: white; text-decoration: none;"> 云码智创科技 · 津ICP�?025042208�?3 </a> </p> </footer> <script src="/static/js/jquery.min.js"></script>  <script src="/static/js/nav.js?v=2026041801"></script> <script> (function(){ function toast(msg){ var el = document.getElementById('toast'); el.textContent = msg; el.classList.add('show'); setTimeout(function(){ el.classList.remove('show'); }, 2400); } function esc(s){ return String(s || '').replace(/[&<>"']/g, function(c){ return ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]); }); } function getDeviceCount(macAddresses){ if (!macAddresses || macAddresses === '') return 0; var macs = macAddresses.split(',').filter(function(m){ return m.trim() !== ''; }); return macs.length; } function formatDateTime(dt){ if (!dt || dt === '') return '-'; var formatted = dt.toString().trim(); if (formatted.length > 19) { formatted = formatted.substring(0, 19); } var dateObj = new Date(formatted.replace(/-/g, '/')); var permanentDate = new Date('2050/01/01'); if (dateObj.getTime() > permanentDate.getTime()) { return '永久'; } return formatted; } function isExpired(expireTime){ if (!expireTime || expireTime === '') return false; var expireTs = Date.parse(expireTime.replace(/-/g,'/')); if (!expireTs) return false; var permanentDate = new Date('2050/01/01'); if (expireTs > permanentDate.getTime()) { return false; } return expireTs < Date.now(); } function renderOrders(list, pagination){ var wrap = document.getElementById('ordersList'); var paginationEl = document.getElementById('pagination'); if (!list || !list.length) { wrap.innerHTML = '<div class="empty-state">'+ '<i class="fas fa-inbox"></i>'+ '<p>暂无订单记录</p>'+ '<p><a href="/shop">去软件商城逛�?�?/a></p>'+ '</div>'; paginationEl.style.display = 'none'; return; } wrap.innerHTML = list.map(function(r){ var productName = r.product_name || r.product_id || '未知产品'; var deviceCount = getDeviceCount(r.mac_addresses || ''); var createTime = formatDateTime(r.created_time || ''); var expireTime = formatDateTime(r.expire_time || ''); var expired = isExpired(r.expire_time); var statusClass = expired ? 'expired' : 'active'; var statusText = expired ? '已过�? : '有效'; var statusBadgeHtml = expired ? ''+ '<span class="order-status-badge '+statusClass+'">'+ '<i class="fas fa-'+(expired ? 'exclamation-circle' : 'check-circle')+'"></i>'+ statusText+ '</span>' : ''; return ''+ '<div class="order-item '+(expired ? 'expired' : '')+'">'+ '<div class="order-product">'+ '<h4 class="order-title" title="'+esc(productName)+'">'+esc(productName)+'</h4>'+ statusBadgeHtml+ '</div>'+ '<div class="order-info">'+ '<div class="order-info-item">'+ '<span class="order-info-label">有效日期�?/span>'+ '<span class="order-info-value">'+esc(expireTime)+'</span>'+ '</div>'+ '</div>'+ '<div class="order-actions">'+ (!expired ? '<div class="order-device-group">'+ '<span class="order-info-label">设备数量�?/span>'+ '<span class="device-count-badge">'+deviceCount+' �?/span>'+ '<button class="btn btn-clear" data-id="'+esc(r.id || '')+'">'+ '<i class="fas fa-broom"></i> 清空设备'+ '</button>'+ '</div>' : '')+ (expired ? '<div class="order-expired-tip">'+ '<i class="fas fa-info-circle"></i>'+ '<span>已过期，请前往</span>'+ '<a href="/shop?id='+encodeURIComponent(r.product_id || '')+'" class="btn btn-renew">'+ '<i class="fas fa-shopping-cart"></i> 商城重新购买'+ '</a>'+ '</div>' : '')+ (expired ? '<button class="btn btn-delete" data-id="'+esc(r.id || '')+'">'+ '<i class="fas fa-trash-alt"></i> 删除'+ '</button>' : '')+ (!expired ? '<button class="btn btn-download" data-pid="'+esc(r.product_id || '')+'" data-id="'+esc(r.id || '')+'">'+ '<i class="fas fa-download"></i> 下载软件'+ '</button>' : '')+ '</div>'+ '</div>'; }).join(''); // 绑定按钮事件 wrap.querySelectorAll('.btn-download').forEach(function(btn){ btn.addEventListener('click', function(){ var pid = btn.getAttribute('data-pid'); var id = btn.getAttribute('data-id'); if (!id) { toast('订单ID异常'); return; } btn.disabled = true; var q = 'id=' + encodeURIComponent(id); if (pid) { q += '&product_id=' + encodeURIComponent(pid); } fetch('/shop/api/download?' + q, { credentials: 'include' }) .then(function(res){ return res.json(); }) .then(function(data){ if (data && data.code === 0 && data.data && data.data.download_url) { window.open(data.data.download_url, '_blank'); toast('下载已开�?); } else { toast((data && (data.msg || data.message)) || '下载失败'); } }) .catch(function(err){ toast('网络错误'); console.error(err); }) .finally(function(){ btn.disabled = false; }); }); }); wrap.querySelectorAll('.btn-clear').forEach(function(btn){ btn.addEventListener('click', function(){ var id = btn.getAttribute('data-id'); if (!id) { toast('订单ID异常'); return; } btn.disabled = true; fetch('/shop/api/record/clearMac', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'id=' + encodeURIComponent(id) }).then(function(res){ return res.json(); }) .then(function(data){ if (data && data.code === 0) { toast('已清空设�?); loadOrders(currentPage); } else { toast((data && (data.msg || data.message)) || '清空设备失败'); btn.disabled = false; } }) .catch(function(err){ toast('网络错误'); btn.disabled = false; }); }); }); wrap.querySelectorAll('.btn-delete').forEach(function(btn){ btn.addEventListener('click', function(){ var id = btn.getAttribute('data-id'); if (!id) { toast('订单ID异常'); return; } if (!confirm('确定要删除该订单吗？删除后无法恢复！')) { return; } btn.disabled = true; fetch('/shop/api/record/delete', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'id=' + encodeURIComponent(id) }).then(function(res){ return res.json(); }) .then(function(data){ if (data && data.code === 0) { toast('订单已删�?); loadOrders(currentPage); } else { toast((data && (data.msg || data.message)) || '删除失败'); btn.disabled = false; } }) .catch(function(err){ toast('网络错误'); btn.disabled = false; }); }); }); // 渲染分页 if (pagination && pagination.total_pages > 1) { renderPagination(pagination); paginationEl.style.display = 'flex'; } else { paginationEl.style.display = 'none'; } } function renderPagination(pagination){ var paginationEl = document.getElementById('pagination'); var page = pagination.page; var totalPages = pagination.total_pages; var html = ''; html += '<button class="pagination-btn" '+(page <= 1 ? 'disabled' : '')+' data-page="'+(page - 1)+'">'+ '<i class="fas fa-chevron-left"></i></button>'; var startPage = Math.max(1, page - 2); var endPage = Math.min(totalPages, page + 2); if (startPage > 1) { html += '<button class="pagination-btn" data-page="1">1</button>'; if (startPage > 2) { html += '<span class="pagination-info">...</span>'; } } for (var i = startPage; i <= endPage; i++) { html += '<button class="pagination-btn '+(i === page ? 'active' : '')+'" data-page="'+i+'">'+i+'</button>'; } if (endPage < totalPages) { if (endPage < totalPages - 1) { html += '<span class="pagination-info">...</span>'; } html += '<button class="pagination-btn" data-page="'+totalPages+'">'+totalPages+'</button>'; } html += '<button class="pagination-btn" '+(page >= totalPages ? 'disabled' : '')+' data-page="'+(page + 1)+'">'+ '<i class="fas fa-chevron-right"></i></button>'; html += '<span class="pagination-info">�?'+pagination.total+' �?/span>'; paginationEl.innerHTML = html; paginationEl.querySelectorAll('.pagination-btn:not(:disabled)').forEach(function(btn){ btn.addEventListener('click', function(){ var newPage = parseInt(btn.getAttribute('data-page')); if (newPage && newPage !== page) { loadOrders(newPage); } }); }); } var currentPage = 1; function loadOrders(page){ if (page) currentPage = page; var url = '/shop/api/order?page=' + currentPage + '&page_size=20'; return fetch(url, { credentials: 'include' }) .then(function(res){ return res.json(); }) .then(function(data){ if (data && data.code === 0 && data.data && data.data.logged_in) { document.getElementById('ordersPanel').style.display = 'block'; renderOrders(data.data.records || [], data.data.pagination || {}); } }) .catch(function(err){ toast('加载订单失败'); console.error(err); }); } var loginLink = document.getElementById('loginLink'); fetch('/auth/authorize?redirect=' + encodeURIComponent(window.location.href), { credentials: 'include' }) .then(function(res){ return res.json(); }) .then(function(data){ if (data && data.code === 0 && data.url) { loginLink.href = data.url; } }); fetch('/auth/check', { credentials: 'include' }) .then(function(res){ return res.json(); }) .then(function(data){ if (data.code === 0 && data.data && data.data.logged_in) { document.getElementById('loginTip').style.display = 'none'; document.getElementById('userCard').style.display = 'flex'; document.getElementById('nickname').textContent = data.data.nickname || ''; document.getElementById('username').textContent = data.data.username ? ('用户名：' + data.data.username) : ''; document.getElementById('email').textContent = data.data.email ? ('邮箱�? + data.data.email) : ''; document.getElementById('phone').textContent = data.data.phone ? ('手机�? + data.data.phone) : ''; if (data.data.avatar) { document.getElementById('avatar').innerHTML = '<img src="'+data.data.avatar+'" alt="头像">'; } loadOrders(); } }); // 滚动效果 window.addEventListener('scroll', function() { var navbar = document.getElementById('navbar'); if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); })(); </script>  <div class="contact-float" id="contactFloat"> <div class="contact-float-btn" id="contactFloatBtn"> <i class="fas fa-comments"></i> <span>联系星哥</span> </div> <div class="contact-float-panel" id="contactFloatPanel"> <div class="contact-float-header"> <h3>联系星哥</h3> <button class="contact-float-close" id="contactFloatClose"> <i class="fas fa-times"></i> </button> </div> <div class="contact-float-content"> <p class="contact-float-tip"> <i class="fas fa-info-circle"></i> 不会安装或使用、有好想法或想定制开发等都可以联系星�? </p> <div class="contact-float-qr"> <img src="https://vip.123pan.cn/1849374923/ymjew503t0l000d7w32xa5rs1qn7fbxiDIYxBID0AdrvDvxvDwrPDY==.jpg" alt="星哥个人微信二维�?> <p>扫码添加星哥微信</p> </div> </div> </div> </div> <script> // 联系星哥浮层功能 (function() { const floatBtn = document.getElementById('contactFloatBtn'); const floatPanel = document.getElementById('contactFloatPanel'); const floatClose = document.getElementById('contactFloatClose'); const openFloat = document.getElementById('openContactFloat'); if (floatBtn && floatPanel && floatClose) { // 打开浮层 floatBtn.addEventListener('click', function(e) { e.stopPropagation(); floatPanel.classList.add('active'); }); // 关闭浮层 floatClose.addEventListener('click', function(e) { e.stopPropagation(); floatPanel.classList.remove('active'); }); // 点击外部关闭 document.addEventListener('click', function(e) { if (!floatPanel.contains(e.target) && !floatBtn.contains(e.target)) { floatPanel.classList.remove('active'); } }); // 阻止浮层内部点击冒泡 floatPanel.addEventListener('click', function(e) { e.stopPropagation(); }); } if (openFloat && floatPanel) { openFloat.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); floatPanel.classList.add('active'); }); } })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?232e448dc55061d2baa1a2edcee17067"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>