Add custom servo contact path
This commit is contained in:
82
app/page.tsx
82
app/page.tsx
@@ -65,7 +65,8 @@ function getFeaturedSpecs(product: CatalogProduct) {
|
||||
|
||||
const SERVO_CATEGORIES = ["标准舵机", "异形舵机", "全金属舵机", "大扭矩舵机", "积木舵机"];
|
||||
const SILENT_SERVO_CATEGORY = "静音舵机";
|
||||
const SELECTOR_CATEGORIES = [...SERVO_CATEGORIES, SILENT_SERVO_CATEGORY];
|
||||
const CUSTOM_SERVO_CATEGORY = "非标准舵机定制";
|
||||
const SELECTOR_CATEGORIES = [...SERVO_CATEGORIES, SILENT_SERVO_CATEGORY, CUSTOM_SERVO_CATEGORY];
|
||||
const TORQUE_MIN = 0.09;
|
||||
const TORQUE_MAX = 920;
|
||||
const TORQUE_PRESETS = [0.1, 1, 5, 20, 100, 300, 920];
|
||||
@@ -447,7 +448,9 @@ export default function Home() {
|
||||
<option value="全部舵机">全部舵机(243款)</option>
|
||||
{SELECTOR_CATEGORIES.map((category) => (
|
||||
<option key={category} value={category}>
|
||||
{category}({getCategoryCount(category)}款)
|
||||
{category === CUSTOM_SERVO_CATEGORY
|
||||
? `${category}(联系我们)`
|
||||
: `${category}(${getCategoryCount(category)}款)`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
@@ -644,7 +647,80 @@ export default function Home() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{stage === 4 && top && (
|
||||
{stage === 4 && requirements.category === CUSTOM_SERVO_CATEGORY && (
|
||||
<div className="result-panel custom-result-panel">
|
||||
<div className="result-heading">
|
||||
<div>
|
||||
<p className="step-kicker">非标准舵机定制</p>
|
||||
<h2>已生成定制需求摘要</h2>
|
||||
</div>
|
||||
<button type="button" className="restart-button" onClick={reset}>重新填写</button>
|
||||
</div>
|
||||
|
||||
<div className="custom-result-card">
|
||||
<div className="custom-result-mark">ODM</div>
|
||||
<div>
|
||||
<span>高徳乐工程定制</span>
|
||||
<h3>目录型号无法覆盖?可进行非标结构与性能评估</h3>
|
||||
<p>支持特殊尺寸、扭矩、角度、控制协议、静音、防水、线材与安装结构等定制需求。</p>
|
||||
</div>
|
||||
<div className="metric-grid custom-requirement-grid">
|
||||
<Metric label="最低堵转扭矩" value={`${formatTorque(requirements.torque)} kgf·cm`} />
|
||||
<Metric label="额定电压" value={`${requirements.voltage.toFixed(1)}V`} />
|
||||
<Metric label="操作角度" value={requirements.angle} />
|
||||
<Metric label="控制 / 通讯" value={requirements.control} />
|
||||
<Metric label="首次采购数量" value={requirements.firstOrderQuantity ? `${requirements.firstOrderQuantity}只` : "待确认"} />
|
||||
<Metric label="年度用量" value={requirements.annualVolume} />
|
||||
</div>
|
||||
{requirements.otherRequirements && (
|
||||
<p className="custom-notes"><strong>其他要求:</strong>{requirements.otherRequirements}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!showSampleForm && (
|
||||
<div className="result-actions">
|
||||
<button className="panel-primary" type="button" onClick={() => setShowSampleForm(true)}>
|
||||
联系我们 · 提交定制需求 <span>→</span>
|
||||
</button>
|
||||
<button className="outline-button" type="button" onClick={() => window.print()}>打印 / 保存需求</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showSampleForm && !submitted && (
|
||||
<form className="sample-form custom-contact-form" onSubmit={submitLead}>
|
||||
<div>
|
||||
<p className="step-kicker">联系我们</p>
|
||||
<h3>留下项目联系方式</h3>
|
||||
<p>提交后将生成定制需求卡,正式版可自动进入CRM并通知工程师跟进。</p>
|
||||
</div>
|
||||
<div className="form-grid">
|
||||
<label><span>公司名称</span><input required name="company" placeholder="请输入公司名称" /></label>
|
||||
<label><span>联系人</span><input required name="name" placeholder="姓名" /></label>
|
||||
<label><span>手机号</span><input required name="phone" inputMode="tel" placeholder="用于方案确认" /></label>
|
||||
<label><span>邮箱(选填)</span><input name="email" type="email" placeholder="接收定制方案" /></label>
|
||||
</div>
|
||||
<label className="full-field">
|
||||
<span>补充说明</span>
|
||||
<textarea name="notes" defaultValue={requirements.otherRequirements} placeholder="请补充结构图、安装空间、认证或交期要求" />
|
||||
</label>
|
||||
<button className="panel-primary" type="submit">提交定制需求 <span>→</span></button>
|
||||
<small className="demo-disclaimer">当前为内部演示,不会向外部系统发送信息。</small>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{submitted && (
|
||||
<div className="success-card">
|
||||
<div className="success-icon">✓</div>
|
||||
<p className="step-kicker">定制需求卡已生成</p>
|
||||
<h3>需求编号 {leadId}</h3>
|
||||
<p>需求已标记为“非标准舵机定制”。正式版上线后将自动通知销售与工程师联合评估。</p>
|
||||
<button type="button" className="outline-button" onClick={reset}>继续填写另一项需求</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{stage === 4 && requirements.category !== CUSTOM_SERVO_CATEGORY && top && (
|
||||
<div className="result-panel">
|
||||
<div className="result-heading">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user