以下是针对“骗子曝光平台”的功能介绍及后续开发建议，供您参考：
---
## 一、平台功能介绍
### 1. 核心功能
- **曝光信息提交**：用户可填写标题、店铺名称、被骗日期、商品名称、被骗内容介绍（限10000字符）、骗子联系方式（电话/微信/QQ）、发货地址、网址链接、证据截图（支持多图上传）以及备注说明（限5000字符）。
- **证据截图展示**：支持上传多张图片（每张≤5MB），点击图片可在当前页面通过模态框（弹窗）放大查看，无需跳转新页面，提升浏览体验。
- **关键词搜索**：支持按标题、店铺名、电话、微信号、商品名称、内容介绍、备注、地址、网址链接等进行全文搜索，快速定位目标曝光信息。
- **数据本地存储**：所有曝光数据保存在浏览器本地（localStorage），无需后端服务器即可运行，保护用户隐私。
### 2. 用户体验
- **自适应布局**：采用响应式设计，适配手机、平板、PC端，界面简洁直观。
- **表单验证**：对必填项、字符长度进行前端校验，防止无效提交。
- **示例数据**：首次加载时自动生成两条示例曝光，帮助用户快速了解平台用途。
---
## 二、后续开发建议
### 1. 后端化与数据持久化
**当前限制**：数据仅存储在用户浏览器本地，无法跨设备同步，也无法进行统一管理。
**建议方案**：
- 搭建后端服务（如Node.js + Express、Python + Flask/Django），提供RESTful API。
- 使用数据库（如MySQL、PostgreSQL、MongoDB）存储曝光信息，实现数据云端持久化。
- 增加用户认证系统（注册/登录），让用户可管理自己提交的曝光信息。
### 2. 增加管理后台与审核机制
**必要性**：为防止虚假、恶意或侵权信息，平台需建立内容审核机制。
**建议功能**：
- 管理员后台：可查看、审核、下架、编辑曝光内容。
- 举报机制：用户可对可疑信息进行举报，管理员收到通知后处理。
- 发布前审核或发布后举报两种模式，根据平台定位选择。
### 3. 提升搜索与筛选能力
**当前**：仅支持关键词模糊搜索。
**可扩展功能**：
- 按时间范围筛选（如最近一周、一个月）。
- 按骗子联系方式（电话/微信号）聚合展示，方便查询同一骗子多次作案。
- 按被骗金额区间筛选（需增加金额字段）。
- 支持标签系统（如“刷单诈骗”“冒充客服”等），方便分类浏览。
### 4. 增加互动与社区功能
**建议**：
- 评论/留言区：允许用户对曝光信息进行讨论、补充证据。
- 点赞/支持数：提高可信曝光信息的可见度。
- 收藏功能：用户可收藏关注特定曝光案例。
### 5. 安全与防滥用
**重点**：
- 图片上传增加服务端校验（类型、大小、内容安全），防止恶意文件上传。
- 增加验证码机制，防止机器人批量提交垃圾信息。
- 敏感信息脱敏处理（如手机号中间四位隐藏），避免泄露隐私引发的法律风险。
### 6. 数据导出与分享
**建议**：
- 支持将曝光信息导出为PDF或图片，方便用户保存证据或分享至社交平台。
- 生成分享链接，一键复制曝光内容。
### 7. 移动端体验优化
- 可考虑开发微信小程序或App，提升移动端使用便捷性。
- 增加拍照直接上传功能，方便用户即时提交证据。
### 8. 法律合规与免责声明
- 明确平台责任边界，增加详细的使用条款、隐私政策、投诉删除机制。
- 提供“侵权投诉”入口，便于被曝光方申诉。
### 9. 数据可视化
- 增加统计面板，展示曝光趋势、诈骗类型分布、高发地区等，帮助用户提高警惕。
### 10. 国际化与多语言
- 若平台受众扩大，可增加多语言支持（中/英等），方便不同地区用户使用。
---
## 三、技术升级建议（如后端化）
| 模块 | 推荐技术栈 |
|------|------------|
| 前端 | Vue.js / React（增强交互性，替代原生JS） |
| 后端 | Node.js + Express / Python + FastAPI |
| 数据库 | PostgreSQL / MongoDB |
| 图片存储 | 阿里云OSS / 七牛云 / AWS S3 |
| 部署 | 云服务器（阿里云、腾讯云）或 Vercel + 云函数 |
---
## 四、总结
当前版本的“骗子曝光平台”已具备信息提交、展示、搜索等基础功能，适合作为小型社区工具或原型演示。若计划长期运营或扩大影响力，建议逐步引入后端架构、审核机制、用户系统及法律合规建设，使其成为一个安全、可信、高效的防骗信息共享平台。
如果需要进一步协助（如后端接口设计、数据库结构、前端框架升级等），可随时提出，我可以继续提供具体实现方案。
完整页面代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=yes">
<title>防骗曝光台 · 骗子举报平台</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body {
background: #f0f2f5;
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
padding: 24px 16px 60px;
color: #1e293b;
}
.container {
max-width: 1280px;
margin: 0 auto;
}
/* 头部 & 卡片通用样式 */
.card {
background: white;
border-radius: 28px;
box-shadow: 0 8px 20px rgba(0,0,0,0.03), 0 2px 6px rgba(0,0,0,0.05);
padding: 20px 24px;
margin-bottom: 32px;
transition: all 0.2s ease;
border: 1px solid #eef2f6;
}
h1 {
font-size: 1.9rem;
font-weight: 700;
background: linear-gradient(135deg, #c2410c, #b91c1c);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.3px;
display: inline-block;
}
.sub {
color: #5b6e8c;
margin-top: 8px;
font-size: 0.9rem;
border-left: 3px solid #dc2626;
padding-left: 12px;
}
/* 表单样式 */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px 24px;
}
.field-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.full-width {
grid-column: 1 / -1;
}
label {
font-weight: 600;
font-size: 0.85rem;
color: #334155;
display: flex;
align-items: center;
gap: 6px;
}
.required:after {
content: "*";
color: #e11d48;
margin-left: 4px;
}
input, select, textarea {
padding: 12px 14px;
border: 1px solid #cbd5e1;
border-radius: 18px;
font-size: 0.95rem;
font-family: inherit;
transition: 0.2s;
background: #fff;
outline: none;
}
input:focus, select:focus, textarea:focus {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220,38,38,0.2);
}
textarea {
resize: vertical;
min-height: 100px;
}
.char-count {
font-size: 0.7rem;
color: #6c757d;
text-align: right;
}
.btn {
background: #1e293b;
border: none;
padding: 12px 24px;
border-radius: 40px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: 0.2s;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary {
background: #dc2626;
box-shadow: 0 4px 8px rgba(220,38,38,0.2);
}
.btn-primary:hover {
background: #b91c1c;
transform: translateY(-1px);
}
.btn-outline {
background: white;
border: 1px solid #dc2626;
color: #dc2626;
}
.btn-outline:hover {
background: #fff5f5;
}
/* 搜索条 */
.search-bar {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.search-input-wrapper {
flex: 3;
min-width: 200px;
position: relative;
}
.search-input-wrapper input {
width: 100%;
padding-right: 40px;
border-radius: 60px;
}
.stats {
font-size: 0.85rem;
background: #eef2ff;
padding: 6px 14px;
border-radius: 40px;
color: #1e40af;
}
.clear-search {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
}
/* 曝光卡片列表 */
.exposures-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.expo-card {
background: white;
border-radius: 28px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: 0.2s;
border: 1px solid #edf2f7;
overflow: hidden;
}
.expo-header {
background: #fef9f5;
padding: 16px 20px;
border-bottom: 1px solid #ffe4dc;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 10px;
}
.expo-title {
font-size: 1.3rem;
font-weight: 700;
color: #991b1b;
word-break: break-word;
}
.expo-date {
font-size: 0.75rem;
color: #6c757d;
background: #f1f5f9;
padding: 4px 10px;
border-radius: 30px;
}
.expo-body {
padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px 20px;
}
.info-row {
font-size: 0.9rem;
border-bottom: 1px dashed #f0f0f0;
padding-bottom: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.info-label {
font-weight: 700;
min-width: 100px;
color: #4b5563;
}
.info-value {
color: #1f2937;
word-break: break-all;
flex: 1;
}
.content-block {
grid-column: 1 / -1;
background: #fafafc;
padding: 14px 16px;
border-radius: 20px;
margin-top: 4px;
}
.content-text {
white-space: pre-wrap;
line-height: 1.5;
font-size: 0.9rem;
}
.screenshot-area {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
}
.screenshot-img {
width: 100px;
height: 100px;
border-radius: 16px;
border: 1px solid #e2e8f0;
object-fit: cover;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.screenshot-img:hover {
transform: scale(1.02);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.empty-state {
text-align: center;
padding: 60px 20px;
background: white;
border-radius: 48px;
color: #94a3b8;
}
.badge {
background: #fee2e2;
color: #b91c1c;
padding: 2px 12px;
border-radius: 30px;
font-size: 0.7rem;
font-weight: 600;
}
footer {
text-align: center;
margin-top: 40px;
font-size: 0.75rem;
color: #7c8ba0;
}
@media (max-width: 640px) {
.card {
padding: 16px;
}
.expo-header {
flex-direction: column;
}
.info-label {
min-width: 85px;
}
.screenshot-img {
width: 80px;
height: 80px;
}
}
/* 图片模态框（弹窗）样式 */
.image-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.92);
z-index: 9999;
justify-content: center;
align-items: center;
cursor: pointer;
backdrop-filter: blur(4px);
}
.modal-content {
max-width: 90vw;
max-height: 90vh;
text-align: center;
position: relative;
}
.modal-content img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 20px 35px rgba(0,0,0,0.5);
background: #1e1e1e;
}
.modal-close {
position: absolute;
top: -40px;
right: -10px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: white;
cursor: pointer;
transition: 0.2s;
backdrop-filter: blur(4px);
}
.modal-close:hover {
background: rgba(255,80,80,0.7);
transform: scale(1.05);
}
@media (max-width: 640px) {
.modal-close {
top: -30px;
right: 0px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 标题区 -->
<div style="margin-bottom: 20px;">
<h1>⚠️ 骗子曝光平台</h1>
<div class="sub">让诈骗无处遁形 · 提交前请确保信息真实，依法举证</div>
</div>
<!-- 提交表单卡片 -->
<div class="card">
<h3 style="margin-bottom: 18px; font-weight: 600;">📢 提交曝光信息</h3>
<form id="exposureForm">
<div class="form-grid">
<div class="field-group">
<label class="required">标题名称</label>
<input type="text" id="title" placeholder="例：虚假手机诈骗" maxlength="200" required>
</div>
<div class="field-group">
<label>店铺名称</label>
<input type="text" id="shopName" placeholder="淘宝/微店/闲鱼ID等">
</div>
<div class="field-group">
<label class="required">被骗日期</label>
<input type="date" id="fraudDate" required>
</div>
<div class="field-group">
<label>购买的商品名称</label>
<input type="text" id="productName" placeholder="手机/课程/会员等">
</div>
<div class="field-group full-width">
<label class="required">被骗内容介绍 <span style="font-weight: normal;">(限10000字符)</span></label>
<textarea id="contentIntro" rows="4" maxlength="10000" placeholder="详细描述被骗经过、手段、金额等..." required></textarea>
<div class="char-count"><span id="introCount">0</span>/10000</div>
</div>
<div class="field-group">
<label>骗子电话</label>
<input type="tel" id="phone" placeholder="手机/固话">
</div>
<div class="field-group">
<label>骗子的微信号/QQ等分类</label>
<input type="text" id="wechatQQ" placeholder="微信号:xxx 或 QQ:123456">
</div>
<div class="field-group">
<label>骗子发货地址</label>
<input type="text" id="address" placeholder="省/市/区 详细地址">
</div>
<div class="field-group">
<label>网址链接</label>
<input type="url" id="urlLink" placeholder="https://...">
</div>
<div class="field-group">
<label>上传截图 (支持多图)</label>
<input type="file" id="screenshots" multiple accept="image/jpeg,image/png,image/webp">
<div style="font-size: 0.7rem; color:gray;">最多5张，每张≤5MB（前端预览）</div>
</div>
<div class="field-group full-width">
<label>其它备注说明 <span style="font-weight: normal;">(限5000字)</span></label>
<textarea id="remarks" rows="3" maxlength="5000" placeholder="补充证据线索等..."></textarea>
<div class="char-count"><span id="remarkCount">0</span>/5000</div>
</div>
</div>
<div style="display: flex; gap: 16px; justify-content: flex-end; margin-top: 28px; flex-wrap: wrap;">
<button type="reset" class="btn btn-outline" style="background: #f8fafc;">清空表单</button>
<button type="submit" class="btn btn-primary">✅ 提交曝光</button>
</div>
</form>
</div>
<!-- 搜索 & 统计栏 -->
<div class="search-bar">
<div class="search-input-wrapper">
<input type="text" id="keywordSearch" placeholder="🔍 按标题、店铺、电话、微信号、商品、内容等关键词搜索...">
<button class="clear-search" id="clearSearchBtn" aria-label="清除">✖</button>
</div>
<div class="stats" id="statsInfo">共 0 条曝光</div>
<button id="resetAllDemoBtn" class="btn btn-outline" style="padding: 6px 18px;">🏠 重置演示数据</button>
</div>
<!-- 曝光列表展示区 -->
<div id="exposuresContainer" class="exposures-list">
<!-- 动态卡片 -->
<div class="empty-state">暂无曝光信息，成为第一个正义使者 👊</div>
</div>
<footer>免责声明：平台仅为信息整理曝光，请自行甄别，依法维权。所有数据存储于浏览器本地。点击截图可在当前页面弹窗放大。</footer>
</div>
<!-- 图片模态框（弹窗） -->
<div id="imageModal" class="image-modal">
<div class="modal-content">
<span class="modal-close" id="modalCloseBtn">×</span>
<img id="modalImage" src="" alt="证据截图放大预览">
</div>
</div>
<script>
// ---------- 存储KEY ----------
const STORAGE_KEY = "fraud_exposure_platform_data";
// 辅助函数: 读取本地数据
function loadExposures() {
const raw = localStorage.getItem(STORAGE_KEY);
if(!raw) return [];
try {
return JSON.parse(raw);
} catch(e) { return []; }
}
// 保存数据
function saveExposures(data) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
}
// 生成简单ID
function generateId() {
return Date.now() + '-' + Math.random().toString(36).substr(2, 8);
}
// 全局数据
let exposures = loadExposures();
let currentSearchKeyword = "";
// DOM 元素
const form = document.getElementById('exposureForm');
const titleInput = document.getElementById('title');
const shopNameInput = document.getElementById('shopName');
const fraudDateInput = document.getElementById('fraudDate');
const productNameInput = document.getElementById('productName');
const contentIntro = document.getElementById('contentIntro');
const phoneInput = document.getElementById('phone');
const wechatQQInput = document.getElementById('wechatQQ');
const addressInput = document.getElementById('address');
const urlLinkInput = document.getElementById('urlLink');
const screenshotsFile = document.getElementById('screenshots');
const remarksInput = document.getElementById('remarks');
const introCountSpan = document.getElementById('introCount');
const remarkCountSpan = document.getElementById('remarkCount');
const container = document.getElementById('exposuresContainer');
const statsSpan = document.getElementById('statsInfo');
const keywordSearchInput = document.getElementById('keywordSearch');
const clearSearchBtn = document.getElementById('clearSearchBtn');
const resetDemoBtn = document.getElementById('resetAllDemoBtn');
// 模态框元素
const modal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImage');
const modalCloseBtn = document.getElementById('modalCloseBtn');
// 全局图片弹窗函数（在当前页面弹出）
function showImageModal(imageSrc) {
modalImg.src = imageSrc;
modal.style.display = 'flex';
document.body.style.overflow = 'hidden'; // 防止背景滚动
}
function closeImageModal() {
modal.style.display = 'none';
document.body.style.overflow = '';
modalImg.src = ''; // 清空避免残留
}
// 模态框事件绑定
modal.addEventListener('click', function(e) {
// 点击背景层关闭
if(e.target === modal) closeImageModal();
});
modalCloseBtn.addEventListener('click', closeImageModal);
// ESC 键关闭
document.addEventListener('keydown', function(e) {
if(e.key === 'Escape' && modal.style.display === 'flex') {
closeImageModal();
}
});
// 字数统计监听
function updateCounters() {
introCountSpan.innerText = contentIntro.value.length;
remarkCountSpan.innerText = remarksInput.value.length;
}
contentIntro.addEventListener('input', updateCounters);
remarksInput.addEventListener('input', updateCounters);
// 设置默认日期为今天
if(!fraudDateInput.value) {
const today = new Date().toISOString().slice(0,10);
fraudDateInput.value = today;
}
// 辅助: 将FileList转为base64数组 (限制5MB 最多5张)
function filesToBase64Array(files) {
return new Promise((resolve) => {
if(!files || files.length === 0) return resolve([]);
const limit = Math.min(files.length, 5);
const promises = [];
for(let i=0; i<limit; i++) {
const file = files[i];
if(!file.type.startsWith('image/')) continue;
if(file.size > 5 * 1024 * 1024) {
alert(`图片 ${file.name} 超过5MB，已跳过`);
continue;
}
const promise = new Promise((ok) => {
const reader = new FileReader();
reader.onload = (e) => ok({ src: e.target.result, name: file.name });
reader.readAsDataURL(file);
});
promises.push(promise);
}
Promise.all(promises).then(resolve);
});
}
// 渲染列表 (根据搜索词)
function renderExposures() {
let filtered = [...exposures];
const keyword = currentSearchKeyword.trim().toLowerCase();
if(keyword !== "") {
filtered = exposures.filter(item => {
// 搜索范围: 标题,店铺名称,骗子电话,微信号/QQ,商品名称,内容介绍,备注,地址,网址链接
const searchableFields = [
item.title, item.shopName, item.phone, item.wechatQQ,
item.productName, item.contentIntro, item.remarks,
item.address, item.urlLink
];
return searchableFields.some(field => field && field.toLowerCase().includes(keyword));
});
}
statsSpan.innerText = `共 ${filtered.length} 条曝光${keyword ? ` (匹配"${keyword}")` : ''}`;
if(filtered.length === 0) {
container.innerHTML = `<div class="empty-state">🔍 没有找到相关曝光信息，尝试其他关键词或 <span style="color:#dc2626;">提交第一条曝光</span></div>`;
return;
}
container.innerHTML = filtered.map(expo => {
// 处理图片展示 - 绑定内联onclick事件调用showImageModal (无需跳转新页面)
let imagesHtml = '';
if(expo.screenshotImages && expo.screenshotImages.length) {
imagesHtml = `<div class="screenshot-area">${expo.screenshotImages.map((img, idx) =>
`<img class="screenshot-img" src="${img.src}" alt="截图证据" data-src="${img.src}" onclick="window.showImageModalFromGlobal ? window.showImageModalFromGlobal('${img.src.replace(/'/g, "\\'")}') : (function(){ const modalDiv = document.getElementById('imageModal'); const modalImgEl = document.getElementById('modalImage'); modalImgEl.src = '${img.src.replace(/'/g, "\\'")}'; modalDiv.style.display='flex'; document.body.style.overflow='hidden'; })()">`
).join('')}</div>`;
} else {
imagesHtml = '<div style="font-size:0.7rem; color:#aaa;">暂无上传截图</div>';
}
// 为了确保onclick安全调用全局函数，我们在window上挂载方法
return `
<div class="expo-card">
<div class="expo-header">
<span class="expo-title">${escapeHtml(expo.title)}</span>
<span class="expo-date">📅 被骗: ${expo.fraudDate || '未知'}</span>
</div>
<div class="expo-body">
<div class="info-row"><span class="info-label">🏪 店铺名：</span><span class="info-value">${escapeHtml(expo.shopName) || '—'}</span></div>
<div class="info-row"><span class="info-label">🛍️ 商品：</span><span class="info-value">${escapeHtml(expo.productName) || '—'}</span></div>
<div class="info-row"><span class="info-label">📞 骗子电话：</span><span class="info-value">${escapeHtml(expo.phone) || '—'}</span></div>
<div class="info-row"><span class="info-label">💬 微信/QQ：</span><span class="info-value">${escapeHtml(expo.wechatQQ) || '—'}</span></div>
<div class="info-row"><span class="info-label">📍 发货地址：</span><span class="info-value">${escapeHtml(expo.address) || '—'}</span></div>
<div class="info-row"><span class="info-label">🔗 网址链接：</span><span class="info-value">${expo.urlLink ? `<a href="${escapeHtml(expo.urlLink)}" target="_blank" rel="noopener noreferrer">${escapeHtml(expo.urlLink)}</a>` : '—'}</span></div>
<div class="content-block">
<div style="font-weight:600; margin-bottom:6px;">📄 被骗内容介绍</div>
<div class="content-text">${escapeHtml(expo.contentIntro).replace(/\n/g,'<br>')}</div>
</div>
${expo.remarks ? `<div class="content-block"><div style="font-weight:600; margin-bottom:6px;">📝 备注说明</div><div class="content-text">${escapeHtml(expo.remarks).replace(/\n/g,'<br>')}</div></div>` : ''}
<div class="content-block">
<div style="font-weight:600; margin-bottom:6px;">🖼️ 证据截图 (点击放大)</div>
${imagesHtml}
</div>
</div>
</div>`;
}).join('');
// 由于innerHTML后重新绑定图片点击事件：但我们在HTML内联中已经使用了全局函数，需要确保window上的方法有效
// 确保全局函数挂载
if(typeof window.showImageModalFromGlobal === 'undefined') {
window.showImageModalFromGlobal = function(src) {
const modalDiv = document.getElementById('imageModal');
const modalImgEl = document.getElementById('modalImage');
if(modalDiv && modalImgEl) {
modalImgEl.src = src;
modalDiv.style.display = 'flex';
document.body.style.overflow = 'hidden';
}
};
}
// 二次保险：因为动态生成的img内联onclick里调用可能由于转义问题，最好重新代理一下
// 直接为所有 .screenshot-img 添加事件委托 (更稳健)
setTimeout(() => {
document.querySelectorAll('.screenshot-img').forEach(img => {
// 避免重复绑定
if(img.getAttribute('data-listener')) return;
img.setAttribute('data-listener', 'true');
const originalSrc = img.getAttribute('src');
img.removeAttribute('onclick'); // 移除内联，统一用事件委托
img.addEventListener('click', (e) => {
e.stopPropagation();
const srcVal = img.getAttribute('src');
if(srcVal) {
window.showImageModalFromGlobal(srcVal);
}
});
});
}, 10);
}
// 简易防XSS
function escapeHtml(str) {
if(!str) return '';
return str.replace(/[&<>]/g, function(m) {
if(m === '&') return '&';
if(m === '<') return '<';
if(m === '>') return '>';
return m;
}).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) {
return c;
});
}
// 保存新曝光记录
async function addExposure(event) {
event.preventDefault();
// 必填项验证
const title = titleInput.value.trim();
if(!title) { alert("请填写标题名称"); titleInput.focus(); return; }
const fraudDate = fraudDateInput.value;
if(!fraudDate) { alert("请选择被骗日期"); return; }
const contentIntroVal = contentIntro.value.trim();
if(!contentIntroVal) { alert("请填写被骗内容介绍"); contentIntro.focus(); return; }
if(contentIntroVal.length > 10000) { alert("内容介绍不能超过10000字符"); return; }
const remarksVal = remarksInput.value.trim();
if(remarksVal.length > 5000) { alert("备注说明不能超过5000字符"); return; }
// 图片处理
let screenshotArray = [];
if(screenshotsFile.files.length > 0) {
screenshotArray = await filesToBase64Array(screenshotsFile.files);
}
const newExpo = {
id: generateId(),
title: title,
shopName: shopNameInput.value.trim(),
fraudDate: fraudDate,
productName: productNameInput.value.trim(),
contentIntro: contentIntroVal,
phone: phoneInput.value.trim(),
wechatQQ: wechatQQInput.value.trim(),
address: addressInput.value.trim(),
urlLink: urlLinkInput.value.trim(),
remarks: remarksVal,
screenshotImages: screenshotArray,
createdAt: new Date().toISOString()
};
exposures.unshift(newExpo); // 最新的在上面
saveExposures(exposures);
// 重置表单 (除了日期保留默认，清空文件等)
form.reset();
// 重置日期为今天
const today = new Date().toISOString().slice(0,10);
fraudDateInput.value = today;
// 清空文件
screenshotsFile.value = '';
// 重置字数统计
updateCounters();
// 重新渲染并且保留搜索词不清空（可选），但刷新列表时搜索词不变比较好
renderExposures();
alert("曝光提交成功！感谢您的勇气。");
// 滚动到顶部
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// 搜索事件
function handleSearch() {
currentSearchKeyword = keywordSearchInput.value;
renderExposures();
}
function clearSearch() {
keywordSearchInput.value = '';
currentSearchKeyword = '';
renderExposures();
}
// 初始化一些示例数据（让平台不空旷，同时展示效果）
function initDemoDataIfEmpty() {
if(exposures.length === 0) {
const demoImages = []; // 无真实截图，展示占位说明，为演示添加一个带占位图的演示？为了展示弹窗效果，我们添加一个示例图片（内嵌一个简单SVG? 但最好演示真实图片？使用data:image示例）
// 演示第一条加入一个简单示例图片（基于data:image 一个小图标）
const sampleImage = { src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23fee2e2'/%3E%3Ctext x='50' y='55' font-size='12' text-anchor='middle' fill='%23b91c1c'%3E证据截图%3C/text%3E%3C/svg%3E", name: "示例截图" };
const demos = [
{
id: generateId(), title: "虚假购物平台诈骗", shopName: "数码专营店（虚假）", fraudDate: "2025-01-15",
productName: "iPhone 15 Pro Max", contentIntro: "通过微信联系，转账后迟迟不发货，最后拉黑。对方谎称海关扣押要求补税，再次转账5000元后失联。",
phone: "155****1234", wechatQQ: "wxid_fake123", address: "广东省深圳市某区", urlLink: "https://fake-shop-example.com",
remarks: "已报警，立案回执号：A202501001，聊天记录已备份。", screenshotImages: [sampleImage]
},
{
id: generateId(), title: "兼职刷单骗局", shopName: "某某任务平台", fraudDate: "2025-02-10",
productName: "刷单垫付金", contentIntro: "骗子以高佣金诱导刷单，前两单返现后第三单开始吞款，被骗共计8700元。骗子QQ持续活跃。",
phone: "", wechatQQ: "qq:987654321", address: "湖南省长沙市", urlLink: "",
remarks: "希望大家注意任何垫付都不可信。", screenshotImages: []
}
];
exposures.push(...demos);
saveExposures(exposures);
}
renderExposures();
}
// 重置演示数据 (清空全部并重新加入两条demo)
function resetToDemo() {
if(confirm("重置所有数据将清空当前所有曝光记录，并恢复两条示例数据（包含示例图片弹窗演示）。确定吗？")) {
const sampleImage = { src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23ffe0e0'/%3E%3Ctext x='50' y='55' font-size='12' text-anchor='middle' fill='%23b91c1c'%3E示例截图%3C/text%3E%3C/svg%3E", name: "demo" };
const freshDemo = [
{
id: generateId(), title: "虚假购物平台诈骗", shopName: "数码专营店（虚假）", fraudDate: "2025-01-15",
productName: "iPhone 15 Pro Max", contentIntro: "通过微信联系，转账后迟迟不发货，最后拉黑。对方谎称海关扣押要求补税，再次转账5000元后失联。",
phone: "155****1234", wechatQQ: "wxid_fake123", address: "广东省深圳市某区", urlLink: "https://fake-shop-example.com",
remarks: "已报警，立案回执号：A202501001，聊天记录已备份。", screenshotImages: [sampleImage]
},
{
id: generateId(), title: "兼职刷单骗局", shopName: "某某任务平台", fraudDate: "2025-02-10",
productName: "刷单垫付金", contentIntro: "骗子以高佣金诱导刷单，前两单返现后第三单开始吞款，被骗共计8700元。骗子QQ持续活跃。",
phone: "", wechatQQ: "qq:987654321", address: "湖南省长沙市", urlLink: "",
remarks: "希望大家注意任何垫付都不可信。", screenshotImages: []
}
];
exposures = freshDemo;
saveExposures(exposures);
// 清空搜索
clearSearch();
renderExposures();
alert("已重置为演示数据，点击截图图片可体验当前页面弹窗效果");
}
}
// 监听提交
form.addEventListener('submit', addExposure);
keywordSearchInput.addEventListener('input', handleSearch);
clearSearchBtn.addEventListener('click', clearSearch);
resetDemoBtn.addEventListener('click', resetToDemo);
// 初始化全局弹窗方法
window.showImageModalFromGlobal = function(src) {
const modalDiv = document.getElementById('imageModal');
const modalImgEl = document.getElementById('modalImage');
if(modalDiv && modalImgEl) {
modalImgEl.src = src;
modalDiv.style.display = 'flex';
document.body.style.overflow = 'hidden';
}
};
// 初始化页面
updateCounters();
initDemoDataIfEmpty();
</script>
</body>
</html>
名称建议如下
根据平台的定位和功能，我为您推荐以下几个标题选项，您可以根据使用场景选择：
---
## 一、简洁直白型（适合正式场合）
1. **防骗曝光台**
2. **骗子举报平台**
3. **诈骗曝光网**
4. **反诈信息共享平台**
---
## 二、警示呼吁型（增强正义感）
5. **让骗子无处遁形**
6. **曝光骗局 · 守护正义**
7. **别让下一个受害者是你**
8. **全民反诈曝光平台**
---
## 三、口语亲切型（适合社区/自媒体）
9. **骗子避雷区**
10. **防骗小黑板**
11. **踩坑曝光站**
12. **骗局雷达**
---
## 四、组合创意型（个性化）
13. **照妖镜 · 骗子曝光平台**
14. **防骗110**
15. **真相曝光墙**
16. **反诈避坑指南**
---
## 五、我的推荐
如果希望兼顾**正式感与传播力**，推荐：
> ### 🔍 **防骗曝光台 · 全民反诈共享平台**
如果希望**简洁易记**，推荐：
> ### ⚠️ **骗子曝光台**
如果需要配合您的现有页面风格，当前页面使用的是：
> ### ⚠️ **骗子曝光平台**
您可以根据平台定位选择或组合使用，如需进一步调整风格（更严肃/更年轻/更权威），我可以继续优化。
扫一扫
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
