520 lines
23 KiB
HTML
520 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>优惠券列表 - 听泉科技</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||
<style>
|
||
/* 激活码页面特定样式 */
|
||
.activation-page {
|
||
padding-top: 120px;
|
||
padding-bottom: 80px;
|
||
}
|
||
|
||
.announcement-banner {
|
||
background: linear-gradient(135deg, #4F46E5, #06B6D4);
|
||
color: white;
|
||
padding: 1rem;
|
||
border-radius: 0.5rem;
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.search-box {
|
||
position: relative;
|
||
margin: 2rem auto;
|
||
max-width: 500px;
|
||
}
|
||
|
||
.search-box input {
|
||
width: 100%;
|
||
padding: 1rem 1rem 1rem 3rem;
|
||
border-radius: 2rem;
|
||
border: 1px solid var(--border-color);
|
||
background-color: var(--glass-background);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.search-box i {
|
||
position: absolute;
|
||
left: 1rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--light-text);
|
||
}
|
||
|
||
.activation-codes {
|
||
background-color: white;
|
||
border-radius: 0.5rem;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.code-header {
|
||
display: grid;
|
||
grid-template-columns: 0.5fr 2fr 3fr 1fr 1fr 1fr;
|
||
background: linear-gradient(90deg, #4F46E5, #06B6D4);
|
||
color: white;
|
||
font-weight: bold;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.code-header span {
|
||
text-align: center;
|
||
}
|
||
|
||
.code-list {
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.code-item {
|
||
display: grid;
|
||
grid-template-columns: 0.5fr 2fr 3fr 1fr 1fr 1fr;
|
||
padding: 0.75rem 1rem;
|
||
border-bottom: 1px solid var(--border-color);
|
||
align-items: center;
|
||
}
|
||
|
||
.code-item:nth-child(even) {
|
||
background-color: #f9fafb;
|
||
}
|
||
|
||
.code-item span {
|
||
text-align: center;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.code-value {
|
||
font-family: monospace;
|
||
font-weight: bold;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.btn-copy-code {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 0.25rem;
|
||
cursor: pointer;
|
||
font-size: 0.875rem;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.btn-copy-code:hover {
|
||
background-color: var(--primary-dark);
|
||
}
|
||
|
||
.coupon-instructions {
|
||
margin-top: 3rem;
|
||
background-color: white;
|
||
padding: 2rem;
|
||
border-radius: 0.5rem;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.coupon-instructions h3 {
|
||
margin-top: 0;
|
||
margin-bottom: 1rem;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.coupon-instructions ol {
|
||
padding-left: 1.5rem;
|
||
}
|
||
|
||
.coupon-instructions li {
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.no-results {
|
||
text-align: center;
|
||
padding: 3rem;
|
||
color: var(--light-text);
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.code-header, .code-item {
|
||
grid-template-columns: 0.5fr 1fr 1.5fr 1fr;
|
||
}
|
||
|
||
.code-header span:nth-child(5),
|
||
.code-item span:nth-child(5) {
|
||
display: none;
|
||
}
|
||
|
||
.code-header span:nth-child(2),
|
||
.code-item span:nth-child(2) {
|
||
display: none;
|
||
}
|
||
|
||
.code-item span {
|
||
padding: 0.25rem;
|
||
}
|
||
|
||
.code-item span:before {
|
||
content: attr(data-label);
|
||
display: block;
|
||
font-size: 0.75rem;
|
||
color: var(--light-text);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="overlay"></div>
|
||
<!-- 导航栏 -->
|
||
<header>
|
||
<div class="container">
|
||
<div class="logo">
|
||
<h1>听泉科技</h1>
|
||
</div>
|
||
<nav>
|
||
<ul>
|
||
<li><a href="index.html">首页</a></li>
|
||
<li><a href="products.html">产品</a></li>
|
||
<li><a href="pricing.html">价格</a></li>
|
||
<li><a href="activation-codes.html" class="active">优惠券</a></li>
|
||
<li><a href="contact.html">联系我们</a></li>
|
||
<li><a href="api-docs.html">API文档</a></li>
|
||
</ul>
|
||
</nav>
|
||
<button class="menu-button">
|
||
<span class="menu-icon"></span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 激活码页面内容 -->
|
||
<section class="activation-page">
|
||
<div class="container">
|
||
<h1 class="section-title">优惠券列表</h1>
|
||
|
||
<div class="purchase-cta" style="background: linear-gradient(90deg, #FF9500, #FF5E3A); padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem; text-align: center; color: white; box-shadow: 0 4px 10px rgba(255, 94, 58, 0.3);">
|
||
<h2 style="margin-top: 0; margin-bottom: 0.5rem;"><i class="fas fa-bolt"></i> 听泉Cursor助手 - 专业AI编程辅助工具</h2>
|
||
<p style="margin-bottom: 1rem; font-size: 1.1rem;">店铺购买链接天卡，周卡，月卡</p>
|
||
<div>
|
||
<a href="https://www.houfaka.com/links/3BD4C127/" target="_blank" class="btn btn-primary" style="background-color: white; color: #FF5E3A; border: none; padding: 0.8rem 2rem; font-size: 1.1rem; margin-right: 1rem;">
|
||
<i class="fas fa-shopping-cart"></i> 立即购买
|
||
</a>
|
||
<span style="font-size: 0.9rem; opacity: 0.9;">👇 使用下方优惠券可享受折扣价格</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="announcement-banner">
|
||
<h1><i class="fas fa-gift"></i> 听泉Cursor助手优惠券</h1>
|
||
<p>下面是购买Cursor助手时可使用的优惠券的商品，点击复制按钮获取优惠券代码</p>
|
||
<div style="margin-top: 0.8rem; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;">
|
||
<a href="https://www.houfaka.com/details/5D113F32" target="_blank" class="btn btn-secondary" style="margin: 0.5rem; white-space: nowrap;">
|
||
<i class="fas fa-shopping-cart"></i> 立即购买
|
||
</a>
|
||
<span style="margin: 0 1rem;">•</span>
|
||
<span style="font-size: 0.9rem; opacity:.9; margin: 0.5rem;">
|
||
数据最后更新时间: <span id="lastUpdate">加载中...</span>
|
||
<button onclick="fetchActivationCodes()" style="background: none; border: none; color: white; cursor: pointer; margin-left: 0.5rem;">
|
||
<i class="fas fa-sync-alt"></i> 刷新
|
||
</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="search-box">
|
||
<input type="text" id="codeSearch" placeholder="搜索优惠券或产品名称..." onkeyup="searchCodes()">
|
||
<i class="fas fa-search"></i>
|
||
</div>
|
||
|
||
<!-- 激活码列表 -->
|
||
<div class="activation-codes">
|
||
<div class="code-header">
|
||
<span class="code-id">序号</span>
|
||
<span class="code-type">产品名字</span>
|
||
<span class="code-value">优惠券</span>
|
||
<span class="code-price">优惠券金额</span>
|
||
<span class="code-valid">有效期</span>
|
||
<span class="code-action">操作</span>
|
||
</div>
|
||
|
||
<div class="code-list" id="codeList">
|
||
<!-- 这里将通过JavaScript填充激活码 -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="coupon-instructions">
|
||
<h3><i class="fas fa-tags"></i> 如何使用优惠券</h3>
|
||
<div style="display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 1.5rem;">
|
||
<div style="flex: 1; min-width: 200px; padding: 1rem; text-align: center; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin: 0.5rem;">
|
||
<div style="background-color: #4F46E5; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 1rem auto;">1</div>
|
||
<p>点击"复制"按钮复制您需要的优惠券代码</p>
|
||
</div>
|
||
<div style="flex: 1; min-width: 200px; padding: 1rem; text-align: center; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin: 0.5rem;">
|
||
<div style="background-color: #4F46E5; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 1rem auto;">2</div>
|
||
<p>前往<a href="https://www.houfaka.com/details/5D113F32" target="_blank" style="color: #4F46E5; font-weight: bold;">购买页面</a></p>
|
||
</div>
|
||
<div style="flex: 1; min-width: 200px; padding: 1rem; text-align: center; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin: 0.5rem;">
|
||
<div style="background-color: #4F46E5; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 1rem auto;">3</div>
|
||
<p>结算时在"使用优惠券"输入框粘贴代码</p>
|
||
</div>
|
||
<div style="flex: 1; min-width: 200px; padding: 1rem; text-align: center; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin: 0.5rem;">
|
||
<div style="background-color: #4F46E5; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 1rem auto;">4</div>
|
||
<p>点击"确认"按钮享受折扣价格</p>
|
||
</div>
|
||
</div>
|
||
<div style="background-color: rgba(79, 70, 229, 0.1); padding: 1rem; border-radius: 0.5rem; margin-top: 1.5rem;">
|
||
<p style="margin: 0;"><i class="fas fa-info-circle" style="color: #4F46E5;"></i> 注意：每个优惠券仅可使用一次，请在有效期内使用。如有问题请联系客服微信：behikcigar</p>
|
||
</div>
|
||
<div style="text-align: center; margin-top: 1.5rem;">
|
||
<a href="https://www.houfaka.com/details/5D113F32" target="_blank" class="btn btn-primary" style="padding: 0.8rem 2rem; font-size: 1.1rem;">
|
||
<i class="fas fa-shopping-cart"></i> 前往购买 Cursor助手
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-col">
|
||
<h3>听泉科技</h3>
|
||
<p>专注于智能软件解决方案</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h3>快速链接</h3>
|
||
<ul>
|
||
<li><a href="index.html">首页</a></li>
|
||
<li><a href="products.html">产品</a></li>
|
||
<li><a href="pricing.html">价格</a></li>
|
||
<li><a href="activation-codes.html">激活码</a></li>
|
||
<li><a href="contact.html">联系我们</a></li>
|
||
<li><a href="api-docs.html">API文档</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h3>联系我们</h3>
|
||
<p><i class="fas fa-envelope"></i> maticarmy@gmail.com</p>
|
||
<div class="social-links">
|
||
<a href="https://github.com/maticarmy/free_cursor_pro.git" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
|
||
<a href="javascript:void(0)" onclick="showWechatModal()" title="微信"><i class="fab fa-weixin"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="copyright">
|
||
<p>© 2024 听泉科技. 保留所有权利.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 微信弹窗 -->
|
||
<div id="wechatModal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
|
||
<div style="position: relative; background: white; max-width: 400px; margin: 100px auto; padding: 2rem; border-radius: 1rem; text-align: center;">
|
||
<span onclick="closeWechatModal()" style="position: absolute; right: 1rem; top: 1rem; cursor: pointer; font-size: 1.5rem;">×</span>
|
||
<img src="img/wechat_qr.png" alt="微信二维码" style="width: 200px; border-radius: 0.5rem;">
|
||
<p style="margin-top: 1rem; font-weight: bold;">
|
||
<i class="fab fa-weixin"></i> 微信号：behikcigar
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/main.js"></script>
|
||
<script>
|
||
// 微信弹窗功能
|
||
function showWechatModal() {
|
||
document.getElementById('wechatModal').style.display = 'block';
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeWechatModal() {
|
||
document.getElementById('wechatModal').style.display = 'none';
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
|
||
// 点击空白处关闭弹窗
|
||
document.getElementById('wechatModal').addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeWechatModal();
|
||
}
|
||
});
|
||
|
||
// 激活码数据将从API获取
|
||
let activationCodes = [];
|
||
|
||
// 从API获取激活码数据
|
||
function fetchActivationCodes() {
|
||
const codeList = document.getElementById('codeList');
|
||
|
||
// 显示加载中状态
|
||
codeList.innerHTML = `
|
||
<div style="text-align: center; padding: 3rem;">
|
||
<i class="fas fa-spinner fa-spin" style="font-size: 2rem; color: var(--primary-color); margin-bottom: 1rem;"></i>
|
||
<p>正在加载优惠券数据，请稍候...</p>
|
||
</div>
|
||
`;
|
||
|
||
// 使用AJAX获取数据
|
||
fetch('https://api.cursorpro.com.cn/admin/api.Houfaka/capu')
|
||
.then(response => {
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP错误! 状态码: ${response.status}`);
|
||
}
|
||
return response.json();
|
||
})
|
||
.then(response => {
|
||
console.log("API响应:", response); // 调试日志
|
||
|
||
// 正确处理API返回的格式 {code: 0, msg: "", data: [], total: 101}
|
||
if (response && response.code === 0 && Array.isArray(response.data)) {
|
||
// 成功情况，处理data数组
|
||
if (response.data.length === 0) {
|
||
throw new Error('优惠券数据为空');
|
||
}
|
||
|
||
activationCodes = response.data.map((item, index) => ({
|
||
id: item.id || index + 1,
|
||
type: item.name || '听泉cursor助手',
|
||
code: item.coupon || '',
|
||
price: item.coupon_amount || '8.00元',
|
||
threshold: item.threshold_amount || '0.00元',
|
||
validity: item.valid_period || '4天后',
|
||
note: item.remark || '福利发放'
|
||
}));
|
||
|
||
// 更新UI显示优惠券
|
||
renderActivationCodes(activationCodes);
|
||
|
||
// 更新数据最后更新时间
|
||
const lastUpdateEl = document.getElementById('lastUpdate');
|
||
if (lastUpdateEl) {
|
||
const now = new Date();
|
||
lastUpdateEl.textContent = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
|
||
}
|
||
} else {
|
||
// 处理API返回错误的情况
|
||
const errorMsg = response && response.msg ? response.msg : 'API返回未知错误';
|
||
throw new Error(errorMsg);
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('获取优惠券数据失败:', error);
|
||
|
||
// 显示错误信息
|
||
codeList.innerHTML = `
|
||
<div style="text-align: center; padding: 3rem; color: #e74c3c;">
|
||
<i class="fas fa-exclamation-circle" style="font-size: 2rem; margin-bottom: 1rem;"></i>
|
||
<p>获取优惠券数据失败，请稍后再试</p>
|
||
<p style="color: #7f8c8d; font-size: 0.9rem;">错误信息: ${error.message}</p>
|
||
<button class="btn btn-copy-code" style="margin-top: 1rem;" onclick="fetchActivationCodes()">
|
||
<i class="fas fa-sync-alt"></i> 重新加载
|
||
</button>
|
||
</div>
|
||
`;
|
||
|
||
// 如果API加载失败，显示备用数据
|
||
if (error.message === '优惠券数据为空' || error.message.includes('格式')) {
|
||
// 使用备用数据
|
||
activationCodes = [
|
||
{ id: 1, type: '听泉cursor助手', code: '02117ECD8FCBJWXO', price: '8.00元', threshold: '0.00元', validity: '4天后', note: '福利发放' },
|
||
{ id: 2, type: '听泉cursor助手', code: '0422997AFF953S6H', price: '8.00元', threshold: '0.00元', validity: '4天后', note: '福利发放' },
|
||
{ id: 3, type: '听泉cursor助手', code: '082613C5999BTQV0', price: '8.00元', threshold: '0.00元', validity: '4天后', note: '福利发放' },
|
||
{ id: 4, type: '听泉cursor助手', code: '0A8E3AF062406KBC', price: '8.00元', threshold: '0.00元', validity: '4天后', note: '福利发放' },
|
||
{ id: 5, type: '听泉cursor助手', code: '0B11A3CDC5BCRTC7', price: '8.00元', threshold: '0.00元', validity: '4天后', note: '福利发放' }
|
||
];
|
||
renderActivationCodes(activationCodes);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 渲染优惠券列表
|
||
function renderActivationCodes(codes) {
|
||
const codeList = document.getElementById('codeList');
|
||
codeList.innerHTML = '';
|
||
|
||
if (codes.length === 0) {
|
||
codeList.innerHTML = '<div class="no-results">没有找到匹配的优惠券</div>';
|
||
return;
|
||
}
|
||
|
||
codes.forEach(code => {
|
||
const codeItem = document.createElement('div');
|
||
codeItem.className = 'code-item';
|
||
|
||
codeItem.innerHTML = `
|
||
<span data-label="序号:">${code.id}</span>
|
||
<span data-label="产品名字:">${code.type}</span>
|
||
<span data-label="优惠券:" class="code-value">${code.code}</span>
|
||
<span data-label="金额:">${code.price}</span>
|
||
<span data-label="有效期:">${code.validity}</span>
|
||
<span data-label="" class="code-action">
|
||
<button class="btn btn-copy-code" onclick="copyCode('${code.code}', this)">
|
||
<i class="fas fa-copy"></i> 复制
|
||
</button>
|
||
<a href="https://www.houfaka.com/details/5D113F32" target="_blank" class="btn" style="background-color: #10B981; margin-left: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: white; border-radius: 0.25rem; text-decoration: none; display: inline-block;">
|
||
<i class="fas fa-shopping-cart"></i> 使用
|
||
</a>
|
||
</span>
|
||
`;
|
||
|
||
codeList.appendChild(codeItem);
|
||
});
|
||
}
|
||
|
||
// 复制优惠券功能
|
||
function copyCode(code, button) {
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = code;
|
||
textarea.style.position = 'fixed';
|
||
document.body.appendChild(textarea);
|
||
textarea.select();
|
||
|
||
try {
|
||
document.execCommand('copy');
|
||
const originalText = button.innerHTML;
|
||
button.innerHTML = '<i class="fas fa-check"></i> 已复制';
|
||
|
||
setTimeout(() => {
|
||
button.innerHTML = originalText;
|
||
}, 2000);
|
||
|
||
} catch (err) {
|
||
console.error('复制失败:', err);
|
||
}
|
||
|
||
document.body.removeChild(textarea);
|
||
}
|
||
|
||
// 搜索优惠券
|
||
function searchCodes() {
|
||
const searchTerm = document.getElementById('codeSearch').value.toLowerCase();
|
||
|
||
if (searchTerm.trim() === '') {
|
||
renderActivationCodes(activationCodes);
|
||
} else {
|
||
const filteredCodes = activationCodes.filter(code =>
|
||
code.code.toLowerCase().includes(searchTerm) ||
|
||
code.type.toLowerCase().includes(searchTerm)
|
||
);
|
||
renderActivationCodes(filteredCodes);
|
||
}
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 立即获取优惠券数据
|
||
fetchActivationCodes();
|
||
|
||
// 设置搜索框的事件监听
|
||
const searchInput = document.getElementById('codeSearch');
|
||
if (searchInput) {
|
||
searchInput.addEventListener('keyup', searchCodes);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |