151 lines
6.8 KiB
HTML
151 lines
6.8 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>__SITE_NAME__</title><link rel="stylesheet" href="style.css">
|
||
<style>
|
||
.hero { text-align:center;padding:32px 0 16px; }
|
||
.hero h1 { font-size:22px;font-weight:500;margin:0; }
|
||
.hero p { color:#888780;font-size:13px;margin:8px 0 0; }
|
||
.ai-badge { display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;background:#e6f1fb;color:#185fa5;margin-top:4px; }
|
||
.ai-result { background:#f1efe8;border-radius:8px;padding:12px;margin-top:10px;font-size:13px;display:none; }
|
||
.ai-result .label { font-size:11px;color:#888780; }
|
||
.confirm { display:none;text-align:center;padding:32px; }
|
||
.confirm h2 { color:#1d9e75;font-size:18px; }
|
||
.confirm .order-num { font-size:16px;font-family:monospace;color:#534ab7;padding:8px 16px;background:#f1efe8;border-radius:8px;display:inline-block;margin:12px 0; }
|
||
/* 蜜罐：用户不可见，仅机器人会填 */
|
||
.hp-field { position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden; }
|
||
</style></head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="nav">
|
||
<a href="/submit" class="active">提交需求</a>
|
||
<a href="/track">追踪订单</a>
|
||
<a href="/admin">管理面板</a>
|
||
</div>
|
||
|
||
<div id="form-view">
|
||
<div class="hero">
|
||
<h1>之秋 · 技术开发接单</h1>
|
||
<p>提交你的需求，AI 辅助梳理后推送给开发者</p>
|
||
<span class="ai-badge">🤖 由 AI 辅助录入</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>你的需求</h2>
|
||
<label>请描述你的需求 *</label>
|
||
<textarea id="req-text" rows="6" placeholder="例：我想做一个微信小程序，用户可以发布二手物品信息，需要有登录、发布、搜索功能，类似闲鱼但简单很多。预算5000左右。"></textarea>
|
||
<button class="secondary small" onclick="aiAnalyze()">🤖 AI 帮我梳理</button>
|
||
<div id="ai-result" class="ai-result"></div>
|
||
|
||
<label>怎么称呼你 *</label>
|
||
<input id="req-name" placeholder="你的名字或昵称">
|
||
|
||
<label>联系方式 *</label>
|
||
<div class="flex">
|
||
<select id="req-contact-type" style="width:100px;flex-shrink:0;">
|
||
<option value="微信">微信</option>
|
||
<option value="手机">手机</option>
|
||
<option value="邮箱">邮箱</option>
|
||
<option value="QQ">QQ</option>
|
||
</select>
|
||
<input id="req-contact" class="flex-grow" placeholder="微信号 / 手机号 / 邮箱">
|
||
</div>
|
||
|
||
<label>预算范围</label>
|
||
<input id="req-budget" placeholder="如：3000-5000 元（选填）">
|
||
|
||
<label>预期完成时间（多少天内）</label>
|
||
<select id="req-days">
|
||
<option value="3">3 天内</option>
|
||
<option value="7" selected>7 天内</option>
|
||
<option value="14">14 天内</option>
|
||
<option value="30">30 天内</option>
|
||
<option value="0">不着急，慢慢来</option>
|
||
</select>
|
||
|
||
<!-- 蜜罐字段：用户不可见，机器人会填 -->
|
||
<div class="hp-field">
|
||
<label>网站</label>
|
||
<input type="text" name="website" id="hp-website" tabindex="-1" autocomplete="off">
|
||
</div>
|
||
|
||
<button onclick="submitOrder()">📤 提交需求</button>
|
||
<div id="form-msg"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="confirm-view" class="confirm"></div>
|
||
</div>
|
||
|
||
<script>
|
||
async function aiAnalyze() {
|
||
const text = document.getElementById('req-text').value.trim();
|
||
if (!text) return;
|
||
const box = document.getElementById('ai-result');
|
||
box.style.display = 'block';
|
||
box.innerHTML = '<p style="color:#888780">AI 正在分析...</p>';
|
||
try {
|
||
const r = await fetch('/api/orders/analyze', {
|
||
method:'POST', headers:{'Content-Type':'application/json'},
|
||
body: JSON.stringify({text})
|
||
});
|
||
const d = await r.json();
|
||
if (d.error) { box.innerHTML = `<p class="msg error">${d.error}</p>`; return; }
|
||
let html = '<div class="label">AI 分析结果</div>';
|
||
html += `<p><strong>类型:</strong> ${d.projectType || '?'} · <strong>复杂度:</strong> ${d.complexity || '?'} · <strong>预估:</strong> ${d.estimatedDays || '?'}天</p>`;
|
||
html += `<p><strong>摘要:</strong> ${d.summary || ''}</p>`;
|
||
if (d.techStack?.length) html += `<p><strong>建议技术栈:</strong> ${d.techStack.map(t=>`<span class="tag">${t}</span>`).join(' ')}</p>`;
|
||
if (d.suggestions?.length) html += `<p><strong>建议补充:</strong></p><ul style="font-size:12px;color:#5f5e5a;">${d.suggestions.map(s=>`<li>${s}</li>`).join('')}</ul>`;
|
||
box.innerHTML = html;
|
||
} catch(e) {
|
||
box.innerHTML = `<p class="msg error">分析失败: ${e.message}</p>`;
|
||
}
|
||
}
|
||
|
||
async function submitOrder() {
|
||
const name = document.getElementById('req-name').value.trim() || '匿名';
|
||
const contact = document.getElementById('req-contact').value.trim();
|
||
const requirements = document.getElementById('req-text').value.trim();
|
||
if (!contact || !requirements) {
|
||
document.getElementById('form-msg').innerHTML = '<p class="msg error">请填写需求描述和联系方式</p>';
|
||
return;
|
||
}
|
||
document.querySelector('button').disabled = true;
|
||
document.getElementById('form-msg').innerHTML = '<p style="color:#888780">提交中...</p>';
|
||
try {
|
||
const r = await fetch('/api/orders', {
|
||
method:'POST', headers:{'Content-Type':'application/json'},
|
||
body: JSON.stringify({
|
||
name, contact,
|
||
contactType: document.getElementById('req-contact-type').value,
|
||
requirements,
|
||
budget: document.getElementById('req-budget').value.trim(),
|
||
expectedDays: parseInt(document.getElementById('req-days').value) || 0,
|
||
website: document.getElementById('hp-website').value,
|
||
})
|
||
});
|
||
const d = await r.json();
|
||
if (d.success) {
|
||
document.getElementById('form-view').style.display = 'none';
|
||
const cv = document.getElementById('confirm-view');
|
||
cv.style.display = 'block';
|
||
cv.innerHTML = `
|
||
<h2>✅ 提交成功!</h2>
|
||
<p>你的需求已推送给开发者</p>
|
||
<div class="order-num">${d.order.id}</div>
|
||
<p style="margin:12px 0;"><a href="/track?id=${d.order.id}" style="background:#534ab7;color:#fff;padding:10px 24px;border-radius:8px;text-decoration:none;font-size:14px;">📌 点击查看订单进度</a></p>
|
||
<p style="font-size:12px;color:#888780;">建议收藏此链接，也可保存订单编号 ${d.order.id} 备用</p>
|
||
<p style="font-size:13px;color:#888780;margin-top:16px;">开发者会通过 ${d.order.contactType} 联系你</p>
|
||
`;
|
||
} else {
|
||
document.getElementById('form-msg').innerHTML = `<p class="msg error">${d.error}</p>`;
|
||
}
|
||
} catch(e) {
|
||
document.getElementById('form-msg').innerHTML = `<p class="msg error">${e.message}</p>`;
|
||
}
|
||
}
|
||
|
||
// 自动聚焦
|
||
document.getElementById('req-text').focus();
|
||
</script>
|
||
</body></html>
|