咏川科护� · 护�他�辅势�订�箱��?/title> <style> *{margin:0;padding:0;box-sizing:border-box} body{font-family:'Microsoft YaHei','PingFang SC',sans-serif;background:#f2f4f7;color:#1a1a2e;min-height:100vh} .wrap{max-width:960px;margin:0 auto;padding:16px} /* 多�部 */ .header{background:linear-gradient(135deg,#0A1628,#5B9BFF);color:#fff;border-radius:16px;padding:28px 32px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px} .header-l{display:flex;align-items:center;gap:14px} .header-logo{width:48px;height:48px;background:rgba(255,255,255,.12);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .header h1{font-size:22px;font-weight:700;letter-spacing:1px} .header .sub{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px} .header-r{display:flex;gap:8px} .header-r button{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.15);padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;transition:.2s} .header-r button:hover{background:rgba(255,255,255,.2)} .header-r button.active{background:#fff;color:#5B9BFF;border-color:#fff;font-weight:600} /* 即�特� */ .card{background:#fff;border-radius:14px;padding:24px;margin-bottom:16px;box-shadow:0 1px 8px rgba(0,0,0,.04);border:1px solid #eef0f4} .card-title{font-size:16px;font-weight:700;color:#1a1a2e;margin-bottom:20px;display:flex;align-items:center;gap:8px} .card-title .icon{font-size:18px} .card-title .badge{font-size:11px;padding:2px 10px;border-radius:10px;background:#E6F1FB;color:#5B9BFF;font-weight:500} /* 输其�区域 */ .input-row{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap;align-items:flex-end} .input-group{flex:1;min-width:140px} .input-group label{display:block;font-size:12px;color:#888;margin-bottom:6px;font-weight:500} .input-group input,.input-group select{width:100%;padding:12px 14px;border:1.5px solid #e0e2e6;border-radius:10px;font-size:15px;outline:none;font-family:inherit;transition:.2s} .input-group input:focus,.input-group select:focus{border-color:#5B9BFF;box-shadow:0 0 0 3px rgba(24,95,165,.08)} .input-group input.big{font-size:20px;font-weight:600;color:#5B9BFF} .input-group .hint{font-size:11px;color:#aaa;margin-top:4px} .currency-switch{display:flex;background:#f2f4f7;border-radius:8px;overflow:hidden;margin-bottom:14px} .currency-switch button{flex:1;padding:10px;border:none;background:transparent;font-size:14px;cursor:pointer;font-weight:500;transition:.2s} .currency-switch button.active{background:#5B9BFF;color:#fff;border-radius:8px} /* 阶梯行?*/ .tiers{margin-bottom:16px} .tier-header{display:grid;grid-template-columns:1fr 1.2fr 1fr 1fr;gap:10px;padding:0 0 8px;font-size:12px;color:#888;font-weight:500} .tier-row{display:grid;grid-template-columns:1fr 1.2fr 1fr 1fr;gap:10px;align-items:center;margin-bottom:8px} .tier-row input{width:100%;padding:10px 12px;border:1.5px solid #e0e2e6;border-radius:8px;font-size:14px;outline:none;text-align:center;font-family:inherit} .tier-row input:focus{border-color:#5B9BFF} .tier-row .qty{font-weight:600;color:#1a1a2e;font-size:14px;text-align:center} .tier-row .price-out{font-weight:700;color:#5B9BFF;font-size:16px;text-align:center;background:#F8FAFF;border-radius:8px;padding:10px 0} .tier-row .profit{font-size:13px;color:#0F6E56;text-align:center;font-weight:600} .btn-add{background:#F8FAFF;color:#5B9BFF;border:1.5px dashed #B5D4F4;padding:10px 20px;border-radius:8px;font-size:14px;cursor:pointer;width:100%;transition:.2s;font-weight:500} .btn-add:hover{background:#E6F1FB;border-color:#5B9BFF} /* 细�果摘要� */ .summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px} .sum-card{background:#F8FAFF;border-radius:12px;padding:16px;text-align:center;border:1px solid #E6F1FB} .sum-card .num{font-size:22px;font-weight:700;color:#5B9BFF} .sum-card .lbl{font-size:12px;color:#888;margin-top:4px} .sum-card.green .num{color:#0F6E56} /* 多�SKU */ .sku-item{background:#F8FAFF;border-radius:12px;padding:18px;margin-bottom:12px;position:relative;border:1px solid #eef0f4} .sku-item .sku-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .sku-item .sku-label{font-weight:700;font-size:14px;color:#5B9BFF} .sku-item .sku-remove{color:#A32D2D;font-size:12px;cursor:pointer;padding:4px 10px;border-radius:6px;border:1px solid #FCEBEB;background:#fff} .sku-item .sku-remove:hover{background:#FCEBEB} .sku-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} .sku-grid input{width:100%;padding:10px 12px;border:1.5px solid #e0e2e6;border-radius:8px;font-size:13px;outline:none;font-family:inherit} .sku-grid input:focus{border-color:#5B9BFF} /* 按钮�?*/ .actions{display:flex;gap:10px;flex-wrap:wrap} .btn{flex:1;min-width:120px;padding:14px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:.2s;text-align:center} .btn-primary{background:#5B9BFF;color:#fff} .btn-primary:hover{background:#0C447C} .btn-outline{background:#fff;color:#5B9BFF;border:1.5px solid #5B9BFF} .btn-outline:hover{background:#F0F6FF} .btn-danger{background:#fff;color:#A32D2D;border:1.5px solid #e0e2e6} .btn-danger:hover{background:#FCEBEB;border-color:#A32D2D} .btn-success{background:#0F6E56;color:#fff} .btn-success:hover{background:#085640} /* 历参�订�录 */ .history-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #f0f2f5} .history-item:last-child{border:none} .history-item .hi-left{font-size:14px} .history-item .hi-name{font-weight:600;margin-bottom:2px} .history-item .hi-detail{font-size:12px;color:#888} .history-item .hi-price{font-weight:700;color:#5B9BFF;font-size:15px} .history-item .hi-time{font-size:11px;color:#aaa} /* Toast */ .toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#0F6E56;color:#fff;padding:12px 28px;border-radius:10px;font-size:14px;font-weight:500;z-index:999;opacity:0;transition:opacity .3s;pointer-events:none} .toast.show{opacity:1} .toast.error{background:#A32D2D} /* 品�库�开?*/ @media(max-width:640px){ .header{padding:20px;border-radius:12px} .header h1{font-size:18px} .header-r{gap:4px} .header-r button{padding:6px 12px;font-size:12px} .card{padding:16px;border-radius:12px} .summary{grid-template-columns:1fr 1fr} .tier-header,.tier-row{grid-template-columns:1fr 1.2fr 1fr 1fr;font-size:11px} .tier-row .price-out{font-size:14px} .input-group{min-width:100px} .sku-grid{grid-template-columns:1fr 1fr} .actions{flex-direction:column} .btn{flex:none} } .menu-toggle{display:none;width:36px;height:36px;background:none;border:none;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;padding:6px;flex-shrink:0;position:relative;z-index:1001} .menu-toggle span{display:block;height:2px;background:#fff;border-radius:2px;transition:all .3s} .menu-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .menu-toggle.open span:nth-child(2){opacity:0} .menu-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)} .mobile-nav{position:fixed;top:0;right:-300px;width:300px;height:100vh;background:#fff;flex-direction:column;padding:24px 0 40px;gap:0;overflow-y:auto;transition:right .35s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 32px rgba(0,0,0,.12);z-index:1000;display:none} .mobile-nav.open{right:0;display:flex} .mobile-nav a{display:block;font-size:15px;color:#333;text-decoration:none;padding:14px 24px;font-weight:500;border-bottom:0.5px solid #f0f2f5} .mobile-nav a:hover{color:#5B9BFF;background:#f8faff} .mobile-nav .mh-title{font-size:18px;font-weight:700;color:#1a1a2e;padding:0 24px 16px;border-bottom:1px solid #f0f2f5;margin-bottom:4px} .mobile-nav .mh-close{align-self:flex-end;margin-right:20px;margin-bottom:8px;width:32px;height:32px;border-radius:8px;background:#f5f7fb;border:none;cursor:pointer;font-size:18px;color:#666} </style> </head> <body> <div class="wrap">  <div class="header"> <div class="header-l"> <div class="header-logo"> <svg viewBox="0 0 32 32" fill="none" width="28" height="28"><rect x="3" y="4" width="26" height="24" rx="4" fill="none" stroke="#fff" stroke-width="1.8"/><line x1="3" y1="12" x2="11" y2="12" stroke="#fff" stroke-width="1.8"/><line x1="21" y1="12" x2="29" y2="12" stroke="#fff" stroke-width="1.8"/><line x1="3" y1="20" x2="11" y2="20" stroke="#fff" stroke-width="1.8"/><line x1="21" y1="20" x2="29" y2="20" stroke="#fff" stroke-width="1.8"/><rect x="11" y="4" width="10" height="24" rx="3" fill="#fff" fill-opacity=".25"/></svg> </div> <div> <h1>护�他�辅势�订�箱��?/h1> <div class="sub">YOTRY TECH Quotation Assistant</div> </div> </div> <div class="header-r"> <button class="active" data-curr="CNY" onclick="switchCurrency('CNY')">¥ 产�民市?/button> <button data-curr="USD" onclick="switchCurrency('USD')">$ 美其�</button> </div> </div>  <div class="currency-switch" id="modeSwitch" style="margin-bottom:16px;background:#fff;border:1px solid #eef0f4;border-radius:14px;padding:6px"> <button class="active" data-mode="single" onclick="switchMode('single')">📋 即?SKU 护�他�</button> <button data-mode="multi" onclick="switchMode('multi')">📊 多?SKU 批量�护�他�</button> </div>  <div id="singleMode">  <div class="card"> <div class="card-title"> <span class="icon">💵</span> 户�服�信�息� <span class="badge">即�SKU</span> </div> <div class="input-row"> <div class="input-group" style="flex:1.5"> <label>SKU / 型�参�</label> <input type="text" id="skuName" placeholder="如：PY25Q128H"> </div> <div class="input-group" style="flex:0.8"> <label>品�特�</label> <select id="skuBrand"> <option value="">自选�品�特?/option> <option>Puya 普决�</option><option>UTC 参�页�</option><option>MagnTek 麦格�息�/option><option>BELLING 质�岭</option><option>EGMICRO 屹晶微?/option><option>YHWD 链�河</option><option>Sunlord 页�细�</option><option>NOVOSENSE 纳芯微�/option><option>UMW 参�参�</option><option>LegendSemi 领慧立�芯</option><option>Hongfa 宣�参�</option><option>JONHON 主�航</option><option>CJT 长江运�授��?/option><option>BIWIN 作�细�</option><option>AIPULNION 爱流�</option><option>TAIYO YUDEN</option><option>ROBOTIS</option><option>RobStride</option> </select> </div> </div> <div class="input-row"> <div class="input-group"> <label>主�合�税户�服�他� (¥)</label> <input type="number" id="costPrice" class="big" placeholder="0.00" step="0.01" min="0" oninput="calcAll()"> </div> <div class="input-group"> <label>其�税 / 额多�户�服� (¥/pcs)</label> <input type="number" id="extraCost" placeholder="0.00" step="0.01" min="0" value="0.00" oninput="calcAll()"> </div> <div class="input-group"> <label>汇率 (他�美其�模开?</label> <input type="number" id="exchangeRate" placeholder="7.25" step="0.01" min="0" value="7.25" oninput="calcAll()"> </div> </div> </div>  <div class="card"> <div class="card-title"> <span class="icon">📈</span> 阶梯护�他�配置� <span class="badge" id="currencyBadge">¥ 产�民市?/span> </div> <div class="input-row" style="margin-bottom:12px"> <div class="input-group"> <label>增值税�?(%)</label> <input type="number" id="vatRate" value="13" min="0" max="20" step="0.5" oninput="calcAll()"> <div class="hint">主�国�格�准��?3%（电�存�其�器他��?/div> </div> <div class="input-group"> <label>护�他�质�市�</label> <select id="quoteCurrency" onchange="calcAll()"> <option value="CNY">¥ 产�民市?(CNY)</option> <option value="USD">$ 美其� (USD)</option> </select> </div> </div> <div class="tiers"> <div class="tier-header"> <div>数�量� (pcs)</div><div>毛分��?(%)</div><div>合�税即�他�</div><div>即�颗分�润</div> </div> <div class="tier-row"> <div class="qty">100</div> <input type="number" id="margin1" value="5" min="0" max="99" step="0.5" oninput="calcAll()"> <div class="price-out" id="price1">--</div> <div class="profit" id="profit1">--</div> </div> <div class="tier-row"> <div class="qty">1,000</div> <input type="number" id="margin2" value="8" min="0" max="99" step="0.5" oninput="calcAll()"> <div class="price-out" id="price2">--</div> <div class="profit" id="profit2">--</div> </div> <div class="tier-row"> <div class="qty">10,000</div> <input type="number" id="margin3" value="12" min="0" max="99" step="0.5" oninput="calcAll()"> <div class="price-out" id="price3">--</div> <div class="profit" id="profit3">--</div> </div> <div class="tier-row"> <div class="qty">100,000</div> <input type="number" id="margin4" value="15" min="0" max="99" step="0.5" oninput="calcAll()"> <div class="price-out" id="price4">--</div> <div class="profit" id="profit4">--</div> </div> <div class="tier-row"> <div class="qty">MOQ 资�订�</div> <input type="number" id="margin5" value="3" min="0" max="99" step="0.5" oninput="calcAll()"> <div class="price-out" id="price5">--</div> <div class="profit" id="profit5">--</div> </div> </div> <div class="input-row" style="align-items:center"> <div class="input-group" style="flex:0.6;min-width:100px"> <label>MOQ 数�量�</label> <input type="number" id="moqQty" value="5" min="1" oninput="calcAll()"> </div> <div class="input-group" style="flex:0.6;min-width:100px"> <label>合�税总户�服?/label> <div style="padding:12px 0;font-size:18px;font-weight:700;color:#A32D2D" id="totalCost">¥ 0.00</div> </div> </div> </div>  <div class="card"> <div class="card-title"><span class="icon">📊</span> 护�他�摘要�</div> <div class="summary"> <div class="sum-card"><div class="num" id="sumLow">--</div><div class="lbl">服�作�阶梯他� (100)</div></div> <div class="sum-card"><div class="num" id="sumHigh">--</div><div class="lbl">服�作�即�他?(100K)</div></div> <div class="sum-card green"><div class="num" id="sumMaxProfit">--</div><div class="lbl">服�高毛分�率</div></div> <div class="sum-card green"><div class="num" id="sumMinOrder">--</div><div class="lbl">MOQ 服�小订�即�量��?/div></div> </div> <div class="actions" style="margin-top:16px"> <button class="btn btn-primary" onclick="copyQuote()">📋 多�分�护�他�即?/button> <button class="btn btn-success" onclick="saveHistory()">💾 信�存�分�历参?/button> <button class="btn btn-outline" onclick="resetForm()">🔄 量�置�</button> <button class="btn btn-danger" onclick="loadPreset('fastQuote')">�?快选�演�?/button> </div> </div> </div>  <div id="multiMode" style="display:none"> <div class="card"> <div class="card-title"><span class="icon">📊</span> 多?SKU 批量�护�他�</div> <div class="input-row"> <div class="input-group" style="flex:0.6"> <label>增值税�?(%)</label> <input type="number" id="multiVat" value="13" min="0" max="20" oninput="calcMulti()"> </div> <div class="input-group" style="flex:0.6"> <label>细�主�毛分��?(%)</label> <input type="number" id="multiMargin" value="10" min="0" max="99" oninput="calcMulti()"> </div> </div> <div id="skuList"> <div class="sku-item"> <div class="sku-header"> <div class="sku-label">SKU #1</div> <div class="sku-remove" onclick="removeSku(this)" style="visibility:hidden">分�除</div> </div> <div class="sku-grid"> <input type="text" placeholder="型�参�" class="sku-model" oninput="calcMulti()"> <input type="text" placeholder="品�特�" class="sku-brand" oninput="calcMulti()"> <input type="number" placeholder="户�服�他? class="sku-cost" step="0.01" oninput="calcMulti()"> </div> </div> </div> <button class="btn-add" onclick="addSku()" style="margin-top:12px">+ 添势� SKU</button> <div style="margin-top:16px"> <div style="font-size:14px;font-weight:600;margin-bottom:8px" id="multiResult"></div> <button class="btn btn-primary" style="width:100%" onclick="copyMulti()">📋 多�分�批量�护�他�</button> </div> </div> </div>  <div class="card" id="historyCard" style="display:none"> <div class="card-title" style="justify-content:space-between"> <div><span class="icon">🕐</span> 护�他�历参�</div> <button style="background:none;border:none;color:#A32D2D;font-size:12px;cursor:pointer" onclick="clearHistory()">清空历参�</button> </div> <div id="historyList"></div> </div>  <div class="toast" id="toast"></div> </div> <script> let currentCurrency = 'CNY'; let currentMode = 'single'; function switchCurrency(c) { currentCurrency = c; document.querySelectorAll('[data-curr]').forEach(b => b.classList.toggle('active', b.dataset.curr === c)); document.getElementById('currencyBadge').textContent = c === 'CNY' ? '¥ 产�民市? : '$ 美其�'; document.getElementById('quoteCurrency').value = c; calcAll(); } function switchMode(m) { currentMode = m; document.querySelectorAll('#modeSwitch button').forEach(b => b.classList.toggle('active', b.dataset.mode === m)); document.getElementById('singleMode').style.display = m === 'single' ? 'block' : 'none'; document.getElementById('multiMode').style.display = m === 'multi' ? 'block' : 'none'; if (m === 'multi') calcMulti(); } function fmt(n, curr) { if (isNaN(n) || n === Infinity) return '--'; curr = curr || currentCurrency; if (curr === 'USD') return '$ ' + n.toFixed(4); return '¥ ' + n.toFixed(4); } function calcAll() { const cost = parseFloat(document.getElementById('costPrice').value) || 0; const extra = parseFloat(document.getElementById('extraCost').value) || 0; const vat = (parseFloat(document.getElementById('vatRate').value) || 13) / 100; const exRate = parseFloat(document.getElementById('exchangeRate').value) || 7.25; const qc = document.getElementById('quoteCurrency').value; const moq = parseInt(document.getElementById('moqQty').value) || 5; const totalCost = (cost + extra) * (1 + vat); document.getElementById('totalCost').textContent = fmt(totalCost, 'CNY'); const tiers = [100, 1000, 10000, 100000, moq]; let prices = [], profits = []; for (let i = 1; i <= 5; i++) { const margin = (parseFloat(document.getElementById('margin' + i).value) || 0) / 100; let price = totalCost / (1 - margin); let profit = price - totalCost; let qty = tiers[i - 1]; // For MOQ tier, multiply by moq if (i === 5) { price = totalCost / (1 - margin); profit = price - totalCost; } if (qc === 'USD') { price /= exRate; profit /= exRate; } document.getElementById('price' + i).textContent = fmt(price, qc); document.getElementById('profit' + i).textContent = fmt(profit, qc); prices.push(price); profits.push(profit); } document.getElementById('sumLow').textContent = fmt(prices[0], qc); document.getElementById('sumHigh').textContent = fmt(prices[3], qc); const maxMargin = Math.max( parseFloat(document.getElementById('margin1').value)||0, parseFloat(document.getElementById('margin2').value)||0, parseFloat(document.getElementById('margin3').value)||0, parseFloat(document.getElementById('margin4').value)||0, parseFloat(document.getElementById('margin5').value)||0 ); document.getElementById('sumMaxProfit').textContent = maxMargin + '%'; document.getElementById('sumMinOrder').textContent = fmt(prices[4] * moq, qc); } function copyQuote() { const sku = document.getElementById('skuName').value || '服�告�合?; const brand = document.getElementById('skuBrand').value || '--'; const cost = parseFloat(document.getElementById('costPrice').value) || 0; const extra = parseFloat(document.getElementById('extraCost').value) || 0; const vat = (parseFloat(document.getElementById('vatRate').value) || 13) / 100; const qc = document.getElementById('quoteCurrency').value; const totalCost = (cost + extra) * (1 + vat); const moq = parseInt(document.getElementById('moqQty').value) || 5; let text = `【咏川科护� · 护�他�即�】\n`; text += `━━━━━━━━━━━━━━━━━━\n`; text += `型�参��?{sku} 品�特��?{brand}\n`; text += `主�合�税户�服�：¥${cost.toFixed(4)} 合�税户�服�：�?{totalCost.toFixed(4)}\n`; if (qc === 'USD') text += `汇率�?{document.getElementById('exchangeRate').value}\n`; text += `━━━━━━━━━━━━━━━━━━\n`; text += `数�量�\t毛分�率\t${qc==='USD'?'美其�即�他�':'合�税即�他�'}\t即�颗分�润\n`; const tiers = [['100 pcs',1],['1,000 pcs',2],['10,000 pcs',3],['100,000 pcs',4],[`MOQ (${moq}pcs)`,5]]; tiers.forEach(([label,i]) => { const m = parseFloat(document.getElementById('margin'+i).value)||0; let p = totalCost / (1 - m/100); let pf = p - totalCost; if (qc === 'USD') { p /= parseFloat(document.getElementById('exchangeRate').value)||7.25; pf = p - totalCost/(parseFloat(document.getElementById('exchangeRate').value)||7.25); } text += `${label}\t${m}%\t${p.toFixed(4)}\t${pf.toFixed(4)}\n`; }); text += `━━━━━━━━━━━━━━━━━━\n`; text += `咏川科护� YOTRY TECH\n联�系�方�开��?8042324196 | sales@yotry.com.cn`; navigator.clipboard.writeText(text).then(() => showToast('护�他�即�已多�分�分�剪质�权� �?)); } function saveHistory() { const sku = document.getElementById('skuName').value || '服�告�合?; const brand = document.getElementById('skuBrand').value || '--'; const qc = document.getElementById('quoteCurrency').value; const p = document.getElementById('price1').textContent; let h = JSON.parse(localStorage.getItem('yotry_quotes') || '[]'); h.unshift({sku, brand, price: p, currency: qc, time: new Date().toLocaleString()}); if (h.length > 50) h = h.slice(0, 50); localStorage.setItem('yotry_quotes', JSON.stringify(h)); renderHistory(); showToast('已信�存�分�历参�订�录 💾'); } function renderHistory() { const h = JSON.parse(localStorage.getItem('yotry_quotes') || '[]'); const card = document.getElementById('historyCard'); const list = document.getElementById('historyList'); if (h.length === 0) { card.style.display = 'none'; return; } card.style.display = 'block'; list.innerHTML = h.map((item, i) => ` <div class="history-item"> <div class="hi-left"> <div class="hi-name">${item.sku} · ${item.brand}</div> <div class="hi-detail">100pcs 参�考他� · ${item.currency}</div> <div class="hi-time">${item.time}</div> </div> <div style="text-align:right"> <div class="hi-price">${item.price}</div> <button onclick="loadHistory(${i})" style="background:none;border:none;color:#5B9BFF;font-size:12px;cursor:pointer;margin-top:4px">势�载</button> </div> </div> `).join(''); } function loadHistory(i) { const h = JSON.parse(localStorage.getItem('yotry_quotes') || '[]'); if (!h[i]) return; document.getElementById('skuName').value = h[i].sku; document.getElementById('skuBrand').value = h[i].brand; switchCurrency(h[i].currency); document.getElementById('quoteCurrency').value = h[i].currency; showToast('已势�载历参�护�他?📥'); } function clearHistory() { if (confirm('确订�清空所服�护�他�历参�订�录？')) { localStorage.removeItem('yotry_quotes'); renderHistory(); showToast('历参�订�录已清�?); } } function resetForm() { document.getElementById('skuName').value = ''; document.getElementById('skuBrand').value = ''; document.getElementById('costPrice').value = ''; document.getElementById('extraCost').value = '0.00'; document.getElementById('vatRate').value = '13'; document.getElementById('margin1').value = '5'; document.getElementById('margin2').value = '8'; document.getElementById('margin3').value = '12'; document.getElementById('margin4').value = '15'; document.getElementById('margin5').value = '3'; document.getElementById('moqQty').value = '5'; calcAll(); } function loadPreset(type) { document.getElementById('skuName').value = 'PY25Q128H-SUH-IR'; document.getElementById('skuBrand').value = 'Puya 普决�'; document.getElementById('costPrice').value = '2.85'; document.getElementById('extraCost').value = '0.00'; document.getElementById('margin1').value = '8'; document.getElementById('margin2').value = '12'; document.getElementById('margin3').value = '18'; document.getElementById('margin4').value = '25'; document.getElementById('margin5').value = '5'; document.getElementById('moqQty').value = '5'; calcAll(); showToast('已势�载演示数�据?�?); } function addSku() { const list = document.getElementById('skuList'); const n = list.children.length + 1; const div = document.createElement('div'); div.className = 'sku-item'; div.innerHTML = ` <div class="sku-header"> <div class="sku-label">SKU #${n}</div> <div class="sku-remove" onclick="removeSku(this)">分�除</div> </div> <div class="sku-grid"> <input type="text" placeholder="型�参�" class="sku-model" oninput="calcMulti()"> <input type="text" placeholder="品�特�" class="sku-brand" oninput="calcMulti()"> <input type="number" placeholder="户�服�他? class="sku-cost" step="0.01" oninput="calcMulti()"> </div>`; list.appendChild(div); calcMulti(); } function removeSku(el) { const list = document.getElementById('skuList'); if (list.children.length <= 1) return; el.closest('.sku-item').remove(); // Renumber list.querySelectorAll('.sku-label').forEach((l, i) => l.textContent = 'SKU #' + (i+1)); calcMulti(); } function calcMulti() { const vat = (parseFloat(document.getElementById('multiVat').value) || 13) / 100; const margin = (parseFloat(document.getElementById('multiMargin').value) || 10) / 100; let items = []; document.querySelectorAll('.sku-item').forEach(item => { const model = item.querySelector('.sku-model').value.trim(); const brand = item.querySelector('.sku-brand').value.trim(); const cost = parseFloat(item.querySelector('.sku-cost').value) || 0; if (model && cost > 0) { const taxedCost = cost * (1 + vat); const price = taxedCost / (1 - margin); items.push({ model, brand, cost, taxedCost, price }); } }); if (items.length === 0) { document.getElementById('multiResult').textContent = '话�填决�至少主�主?SKU 的型�参�和户�服�他?; return; } let text = `其?${items.length} 主?SKU，细�主�毛分��?${(margin*100).toFixed(0)}%：\n`; items.forEach((s, i) => { text += `${i+1}. ${s.model} (${s.brand || '--'}) �?合�税护�他� ¥${s.price.toFixed(4)}\n`; }); document.getElementById('multiResult').style.whiteSpace = 'pre-line'; document.getElementById('multiResult').textContent = text; } function copyMulti() { const result = document.getElementById('multiResult').textContent; if (!result || result === '话�填决�至少主�主?SKU 的型�参�和户�服�他?) return; navigator.clipboard.writeText('【咏川科护� · 批量�护�他�】\n' + result + '\n咏川科护� YOTRY TECH | sales@yotry.com.cn') .then(() => showToast('批量�护�他�已多�分�分�剪质�权?�?)); } function showToast(msg, isErr) { const t = document.getElementById('toast'); t.textContent = msg; t.className = 'toast' + (isErr ? ' error' : '') + ' show'; setTimeout(() => t.classList.remove('show'), 2500); } // Init renderHistory(); loadPreset(); (function(){var t=document.getElementById('menuToggle'),n=document.getElementById('mobileNav'),c=document.getElementById('mobileClose');if(!t||!n)return;function close(){n.classList.remove('open');t.classList.remove('open');document.body.style.overflow=''}t.addEventListener('click',function(){if(n.classList.contains('open'))close();else{n.classList.add('open');t.classList.add('open');document.body.style.overflow='hidden'}});if(c)c.addEventListener('click',close);n.addEventListener('click',function(e){if(e.target.tagName==='A')setTimeout(close,200)})})(); </script> <div style="text-align:center;padding:20px 0 28px;font-size:12px;color:#999;border-top:1px solid #e8ebf0;margin-top:40px"><span>© 2026 权�州咏川科护�服�限其�参�（YOTRY TECH）/span> <span style="margin:0 8px;color:#ddd">|</span> <a href="https://beian.miit.gov.cn/" target="_blank" style="color:#999;text-decoration:none">流�ICP多�023000000参�/a></div> </body> </html>