<!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> <title>商品ROI计算器</title> <script src=”https://cdn.tailwindcss.com”></script> <script> tailwind.config = { theme: { extend: { colors: { redMain: “#e62210”, redLight: “#ff6638″, }, }, }, }; </script> <style> .red-gradient { background: linear-gradient(135deg, #dd1616 0%, #ff5930 100%); } .tab-active { background: linear-gradient(135deg, #dd1616 0%, #ff5930 100%); color: white; } .input-item { @apply w-full rounded bg-gray-100 px-4 py-3 text-right text-xl outline-none border border-gray-100 focus:border-redMain; } .card-box { @apply bg-white rounded-xl p-6 shadow-sm; } .result-block { @apply red-gradient rounded-lg p-5 text-white my-4; } .tip-notice { @apply bg-amber-50 border-l-4 border-amber-400 p-4 rounded-r text-sm text-gray-700; } </style> </head> <body class=”bg-gray-50 min-h-screen”> <!– 顶部头部 –> <div class=”red-gradient py-8 px-4 md:px-12″> <div class=”max-w-7xl mx-auto text-center”> <h1 class=”text-4xl font-bold text-white”>商品ROI计算器</h1> <p class=”text-white/80 mt-2″>一秒看懂你能赚多少 · 利润核算 / 反推定价 / 资金预估 三合一</p> <!– Tab切换栏 –> <div class=”flex mt-8 bg-white rounded-xl overflow-hidden”> <button class=”tab-btn flex-1 py-4 text-lg font-medium text-gray-600″ data-target=”page-profit”>💰 利润核算</button> <button class=”tab-btn flex-1 py-4 text-lg font-medium tab-active” data-target=”page-price”>📝 反推定价</button> <button class=”tab-btn flex-1 py-4 text-lg font-medium text-gray-600″ data-target=”page-fund”>📊 资金预估</button> </div> </div> </div> <!– 主体内容 –> <div class=”max-w-7xl mx-auto px-4 md:px-10 py-8″> <!– 页面1：利润核算 –> <div id=”page-profit” class=”tab-page hidden”> <!– 顶部净利润总卡片 –> <div class=”red-gradient rounded-xl p-8 text-center mb-8″> <div class=”text-white/90 text-lg”>预估净利润</div> <div id=”profit-top-num” class=”text-6xl font-bold my-3″>0.00</div> <div class=”bg-white/20 inline-block px-5 py-1 rounded-full text-sm text-white”>请填写售价和成本</div> </div> <!– 三栏输入区 –> <div class=”grid grid-cols-1 md:grid-cols-3 gap-6 mb-8″> <!– 基础信息 –> <div class=”card-box”> <h3 class=”text-xl font-bold text-redMain border-l-4 border-redMain pl-3 mb-6″>基础信息</h3> <div class=”space-y-6″> <div> <label class=”text-sm text-gray-500 block mb-1″>商品售价 <span class=”text-xs”>(一单卖多少钱(含运费))</span></label> <div class=”relative”> <input class=”input-item num-input” id=”p_price” value=”0″/> <span class=”absolute right-3 top-3 text-gray-400″>元</span> </div> </div> <div> <label class=”text-sm text-gray-500 block mb-1″>单品成本 <span class=”text-xs”>(货品+快递+包装+仓储)</span></label> <div class=”relative”> <input class=”input-item num-input” id=”p_cost” value=”0″/> <span class=”absolute right-3 top-3 text-gray-400″>元</span> </div> </div> </div> </div> <!– 推广与订单 –> <div class=”card-box”> <h3 class=”text-xl font-bold text-redMain border-l-4 border-redMain pl-3 mb-6″>推广与订单</h3> <div class=”space-y-6″> <div> <label class=”text-sm text-gray-500 block mb-1″>实际投产比(ROI) <span class=”text-xs”>(推广1元带回销售额)</span></label> <div class=”relative”> <input class=”input-item num-input” id=”p_roi” value=”3″/> <span class=”absolute right-3 top-3 text-gray-400″>倍</span> </div> </div> <div> <label class=”text-sm text-gray-500 block mb-1″>订单量 <span class=”text-xs”>统计周期总单数</span></label> <div class=”relative”> <input class=”input-item num-input” id=”p_order” value=”100″/> <span class=”absolute right-3 top-3 text-gray-400″>单</span> </div> </div> <div> <label class=”text-sm text-gray-500 block mb-1″>退款单数</label> <div class=”relative”> <input class=”input-item num-input” id=”p_refund” value=”0″/> <span class=”absolute right-3 top-3 text-gray-400″>单</span> </div> </div> </div> </div> <!– 平台扣费 –> <div class=”card-box”> <h3 class=”text-xl font-bold text-redMain border-l-4 border-redMain pl-3 mb-6″>平台扣费（默认即可）</h3> <div class=”space-y-6″> <div> <label class=”text-sm text-gray-500 block mb-1″>平台扣点</label> <div class=”relative”> <input class=”input-item num-input” id=”p_platform_rate” value=”0.6″/> <span class=”absolute right-3 top-3 text-gray-400″>%</span> </div> </div> <div> <label class=”text-sm text-gray-500 block mb-1″>增值税</label> <div class=”relative”> <input class=”input-item num-input” id=”p_tax_rate” value=”1″/> <span class=”absolute right-3 top-3 text-gray-400″>%</span> </div> </div> <div> <label class=”text-sm text-gray-500 block mb-1″>单均运费险</label> <div class=”relative”> <input class=”input-item num-input” id=”p_insurance” value=”0″/> <span class=”absolute right-3 top-3 text-gray-400″>元</span> </div> </div> </div> </div> </div> <!– 核算结果网格 –> <div class=”card-box mb-6″> <h3 class=”text-xl font-bold text-redMain border-l-4 border-redMain pl-3 mb-6″>核算结果</h3> <div class=”grid grid-cols-1 md:grid-cols-3 gap-4″> <div class=”bg-orange-50 rounded p-4″> <div class=”text-gray-600 text-sm”>单品毛利</div> <div id=”res_single_gross” class=”text-2xl font-bold text-redMain mt-1″>0.00元</div> </div> <div class=”bg-orange-50 rounded p-4″> <div class=”text-gray-600 text-sm”>毛利率</div> <div id=”res_gross_rate” class=”text-2xl font-bold text-redMain mt-1″>0.00%</div> </div> <div class=”bg-orange-50 rounded p-4″> <div class=”text-gray-600 text-sm”>理论保本投产</div> <div id=”res_break_even” class=”text-2xl font-bold text-redMain mt-1″>—</div> </div> <div class=”bg-orange-50 rounded p-4″> <div class=”text-gray-600 text-sm”>单笔推广费</div> <div id=”res_single_ad” class=”text-2xl font-bold text-redMain mt-1″>0.00元</div> </div> <div class=”bg-orange-50 rounded p-4″> <div class=”text-gray-600 text-sm”>扣推广后单利润</div> <div id=”res_single_net” class=”text-2xl font-bold text-redMain mt-1″>0.00元</div> </div> <div class=”bg-orange-50 rounded p-4″> <div class=”text-gray-600 text-sm”>总营业额</div> <div id=”res_total_sale” class=”text-2xl font-bold text-redMain mt-1″>0.00元</div> </div> </div> </div> <!– 底部总毛利润 –> <div class=”result-block”> <div class=”text-white/90″>总毛利润（扣推广前）<span class=”text-xs block”>已扣平台费、未扣售后损失</span></div> <div id=”res_total_gross” class=”text-3xl font-bold mt-2″>0.00元</div> </div> </div> <!– 页面2：反推定价（当前截图页面） –> <div id=”page-price” class=”tab-page”> <div class=”grid grid-cols-1 md:grid-cols-2 gap-8″> <!– 左侧：反推定价 –> <div class=”card-box”> <h3 class=”text-xl font-bold text-redMain border-l-4 border-redMain pl-3 mb-6″>反推定价 (成本 + 目标毛利率 → 售价)</h3> <div class=”space-y-6″> <div> <label class=”text-sm text-gray-500 block mb-1″>单品成本 <span class=”text-xs”>货+快递+包装+仓储</span></label> <div class=”relative”> <input class=”input-item num-input” id=”pr_cost” value=”10″/> <span class=”absolute right-3 top-3 text-gray-400″>元</span> </div> </div> <div> <label class=”text-sm text-gray-500 block mb-1″>目标毛利率 <span class=”text-xs”>想要的毛利率，如20%</span></label> <div class=”relative”> <input class=”input-item num-input” id=”pr_rate” value=”50″/> <span class=”absolute right-3 top-3 text-gray-400″>%</span> </div> </div> <!– 建议售价结果 –> <div class=”result-block”> <div class=”text-white/90″>建议售价</div> <div id=”pr_price_out” class=”text-4xl font-bold mt-1″>20.00元</div> <div class=”text-sm mt-1 opacity-90″>公式：成本 ÷ (1 – 毛利率)</div> </div> <!– 底部提示 –> <div class=”tip-notice”> 📌 三档定价参考：毛利率 20% → 定价区；30%~40% → 利润区；50%+ → 预算区 (推广空间大)。 </div> </div> </div> <!– 右侧：保本投产 –> <div class=”card-box”> <h3 class=”text-xl font-bold text-redMain border-l-4 border-redMain pl-3 mb-6″>理论保本投产（不计售后）</h3> <div class=”space-y-6″> <div> <label class=”text-sm text-gray-500 block mb-1″>毛利率 <span class=”text-xs”>同上，输入你的毛利率</span></label> <div class=”relative”> <input class=”input-item num-input” id=”pr_rate_right” value=”50″/> <span class=”absolute right-3 top-3 text-gray-400″>%</span> </div> </div> <!– 保本ROI结果 –> <div class=”result-block”> <div class=”text-white/90″>保本投产ROI</div> <div id=”pr_roi_out” class=”text-4xl font-bold mt-1″>2.00</div> <div class=”text-sm mt-1 opacity-90″>公式：1 ÷ 毛利率</div> </div> <!– 提示说明 –> <div class=”tip-notice”> 🎯 含义：ROI 必须 ≥ 此数字才不亏，做生意请把目标ROI定在保本值的 1.3 倍以上。 </div> </div> </div> </div> </div> <!– 页面3：资金预估（预留，可自行扩展） –> <div id=”page-fund” class=”tab-page hidden”> <div class=”card-box text-center py-20 text-gray-500 text-xl”> 资金预估模块待完善，可添加月销备货、流动资金测算功能 </div> </div> <!– 底部说明文字 –> <div class=”text-center text-gray-400 text-sm mt-12″> 公式参考拼多多店铺核算模型 · 数据自动保存在浏览器本地<br/> 本工具仅供参考，最终以平台实际结算为准 </div> </div> <script> // Tab切换逻辑 const tabBtns = document.querySelectorAll(“.tab-btn”); const tabPages = document.querySelectorAll(“.tab-page”); tabBtns.forEach(btn => { btn.addEventListener(“click”, () => { // 清除所有激活 tabBtns.forEach(b => { b.classList.remove(“tab-active”); b.classList.add(“text-gray-600”); }); tabPages.forEach(p => p.classList.add(“hidden”)); // 激活当前 btn.classList.add(“tab-active”); btn.classList.remove(“text-gray-600”); const targetId = btn.dataset.target; document.getElementById(targetId).classList.remove(“hidden”); }); }); // 数字输入过滤 const allNumInputs = document.querySelectorAll(“.num-input”); allNumInputs.forEach(input => { input.addEventListener(“input”, () => { input.value = input.value.replace(/[^\d.]/g, “”); calcAll(); }); }); // 全局计算入口 function calcAll() { calcProfitPage(); calcPricePage(); } // 反推定价页面计算 function calcPricePage() { const cost = Number(document.getElementById(“pr_cost”).value) || 0; const rateLeft = Number(document.getElementById(“pr_rate”).value) / 100 || 0.01; const rateRight = Number(document.getElementById(“pr_rate_right”).value) / 100 || 0.01; // 建议售价 const suggestPrice = cost / (1 – rateLeft); document.getElementById(“pr_price_out”).innerText = suggestPrice.toFixed(2) + “元”; // 保本ROI const breakEvenRoi = 1 / rateRight; document.getElementById(“pr_roi_out”).innerText = breakEvenRoi.toFixed(2); // 左右毛利率联动同步 document.getElementById(“pr_rate”).value = (rateRight * 100).toFixed(0); document.getElementById(“pr_rate_right”).value = (rateLeft * 100).toFixed(0); } // 利润核算页面计算 function calcProfitPage() { const price = Number(document.getElementById(“p_price”).value) || 0; const cost = Number(document.getElementById(“p_cost”).value) || 0; const roi = Number(document.getElementById(“p_roi”).value) || 0.01; const order = Number(document.getElementById(“p_order”).value) || 0; const refund = Number(document.getElementById(“p_refund”).value) || 0; const platRate = Number(document.getElementById(“p_platform_rate”).value) / 100; const taxRate = Number(document.getElementById(“p_tax_rate”).value) / 100; const insurance = Number(document.getElementById(“p_insurance”).value) || 0; // 单品扣平台毛利 const singleGross = price – cost – price * (platRate + taxRate) – insurance; // 单笔推广费 const singleAd = price / roi; // 扣推广单品净利 const singleNet = singleGross – singleAd; // 毛利率 const grossRate = price === 0 ? 0 : (singleGross / price) * 100; // 保本ROI const breakEven = singleGross <= 0 ? 0 : price / singleGross; // 总营业额 const totalSale = price * order; // 总毛利（未扣推广） const totalGross = singleGross * order; // 最终净利润（扣推广+退款） const validOrder = order – refund; const totalNet = singleNet * validOrder – singleGross * refund; // 渲染页面 const fmt = n => n.toFixed(2); document.getElementById(“profit-top-num”).innerText = fmt(totalNet); document.getElementById(“res_single_gross”).innerText = fmt(singleGross) + “元”; document.getElementById(“res_gross_rate”).innerText = fmt(grossRate) + “%”; document.getElementById(“res_break_even”).innerText = breakEven <= 0 ? “不盈利” : fmt(breakEven) + “倍”; document.getElementById(“res_single_ad”).innerText = fmt(singleAd) + “元”; document.getElementById(“res_single_net”).innerText = fmt(singleNet) + “元”; document.getElementById(“res_total_sale”).innerText = fmt(totalSale) + “元”; document.getElementById(“res_total_gross”).innerText = fmt(totalGross) + “元”; } // 页面加载自动计算 calcAll(); </script> </body> </html>
声明： 本站内容均转载于互联网，并不代表91抖推猫立场！
如若本站内容侵犯了原著者的合法权益，可联系我们进行处理！
