<!--
==============================================================
【项目名称】天龙四驱 · 会员消费价格计算器
【当前版本】V2.0
【开发时间】2026-07-14
【更新说明】新增多配件动态列表，移除固定市场价/进货价输入框，自动汇总配件总价参与计算；全部输入框（配件名称/数量/单价）焦点自动全选
【功能需求总汇总】
1、基础功能
   1.1、包含四种会员类型：非会员、基础会员、进阶会员、超级会员
   1.2、每种会员可自定义：年费、年度进货限额、超限配件折扣、工时折扣
   1.3、超级会员文案简化为：年度进货价限额（无上限），默认值9999999代表无上限
   1.4、页面默认选中【进阶会员】，默认高亮对应卡片

2、计算核心业务规则（最终定稿）
   2.1、新增多配件模块：动态增删配件，每一项包含：配件名称、数量、单价市场价、单价进货价
   2.2、自动实时汇总：总市场价=所有配件(数量*单价市场价)之和；总进货价=所有配件(数量*单价进货价)之和
   2.3、读取参数：自动汇总总配件市场价、自动汇总总配件进货价、会员已使用年度额度、本次工时原价
   2.4、计算剩余年度限额 = 会员年度总限额 - 已使用额度
   2.5、分支1：本次总进货价 ≤ 剩余限额 → 配件应付 = 总进货价（全额支付进货价，无超限费用）
   2.6、分支2：本次总进货价 ＞ 剩余限额 → 配件应付 = 剩余免费额度 +（总市场价-剩余额度）× 会员超限折扣系数
   2.7、工时费用 = 工时原价 × 对应会员工时折扣系数
   2.8、总支付金额 = 配件应付金额 + 折扣后工时费用
   2.9、非会员：配件全额按总市场价支付，工时无折扣

3、交互体验需求
   3.1、废除【立即计算】按钮，全程输入/增删配件实时自动计算
   3.2、所有文本、数字输入框获取焦点自动全选内容，支持直接覆盖修改，无需手动删除
   3.3、切换会员类型、修改会员参数、修改配件列表、修改已使用额度/工时，实时刷新汇总与计算结果
   3.4、自动同步更新工时费率标签文字，展示当前会员折扣
   3.5、配件列表支持新增行、删除单行，任意字段修改立即重新汇总

4、UI与适配需求
   4.1、深色主题、橙色主题色，卡片式布局，选中会员卡片高亮
   4.2、精简计算结果字段，只保留核心收款展示数据，去除冗余优惠字段
   4.3、全设备自适应：电脑4列、平板2列、手机1列，完美适配手机/平板/电脑
   4.4、禁止页面缩放、适配手机视口，输入框触控优化，小屏不溢出、不挤压

5、结果展示字段（最终保留）
   1. 配件汇总总市场价
   2. 当年剩余可用进货限额
   3. 超出限额对应市场价
   4. 配件合计应付金额
   5. 工时费应付金额（折扣后）
   ★ 本次实际待支付总金额

==============================================================
【版本迭代日志】
V2.0（2026-07-14）
1、移除原固定“本次消费配件市场价、本次配件进货价”两个独立输入框
2、新增动态多配件列表：配件名称、数量、市场价单价、进货价单价、删除按钮
3、自动实时计算全部配件总市场价、总进货价，作为全局计算基数
4、新增【添加配件】按钮，支持无限新增配件条目，单行可删除
5、任意配件字段修改、增删条目立即重新汇总并走原有收款计算逻辑
6、所有配件文本/数字输入框聚焦自动全选，和全局输入框交互统一
7、页面其他原有全部逻辑、UI、适配、交互功能完整保留
V1.0 终版（2026-07-14）
1、完成全部业务逻辑修正，匹配客户真实收款计算规则
2、废除点击计算，实现全程实时自动计算
3、超级会员文案优化为【年度进货价限额（无上限）】
4、默认选中进阶会员，初始化自动高亮、匹配费率
5、全部输入框聚焦自动全选，优化修改体验
6、精简无用结果字段，保留核心收款数据
7、全终端响应式适配（手机/平板/电脑）
8、修复额度内/额度外双场景计算BUG，完全匹配客户示例
==============================================================
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>天龙四驱 · 会员消费计算器 V2.0</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: "Microsoft Yahei", sans-serif;
        }
        body {
            background: #1a1a1a;
            color: #fff;
            padding: 12px;
            max-width: 1100px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            color: #ff8822;
            margin-bottom: 16px;
            font-size: 22px;
        }
        .card-wrap {
            background: #2d2d2d;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
        }
        .title-block {
            font-size: 16px;
            color: #ffaa44;
            margin-bottom: 12px;
            border-left: 4px solid #ff8822;
            padding-left: 10px;
        }
        .input-row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            gap: 8px;
            flex-wrap: wrap;
        }
        label {
            width: 100%;
            font-size: 14px;
        }
        input[type="number"],
        input[type="text"] {
            flex: 1;
            min-width: 0;
            width: 100%;
            padding: 10px 12px;
            background: #3d3d3d;
            border: 1px solid #555;
            color: #fff;
            border-radius: 6px;
            font-size: 16px;
        }
        input:focus {
            outline: none;
            border-color: #ff8822;
        }
        .btn-calc {
            width: 100%;
            padding: 12px;
            background: #444;
            border: none;
            color: #aaa;
            margin: 12px 0;
            font-size: 16px;
            font-weight: bold;
            border-radius: 7px;
            cursor: not-allowed;
            pointer-events: none;
        }
        .btn-add {
            width: 100%;
            padding: 10px;
            background: #ff8822;
            border: none;
            color: #000;
            margin: 10px 0;
            font-size: 15px;
            font-weight: bold;
            border-radius: 6px;
        }
        .btn-del {
            padding: 8px 12px;
            background: #c83838;
            border: none;
            color: #fff;
            border-radius: 6px;
            white-space: nowrap;
        }
        .result-box {
            background: #111;
            padding: 16px;
            border-radius: 10px;
            border: 1px solid #ff882266;
        }
        .result-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #333;
            font-size: 14px;
            gap: 8px;
            flex-wrap: wrap;
        }
        .result-row span:first-child {
            flex: 1;
            min-width: 140px;
        }
        .result-row span:last-child {
            text-align: right;
        }
        .result-row:last-child {
            border-bottom: none;
        }
        .text-orange {
            color: #ffaa44;
            font-weight: bold;
            font-size: 16px;
        }
        .rule-desc {
            margin-top: 12px;
            font-size: 12px;
            color: #aaa;
            line-height: 1.5;
        }
        .setting-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 12px;
            margin-bottom: 12px;
            width: 100%;
        }
        .setting-card {
            border: 1px solid #444;
            padding: 14px;
            border-radius: 10px;
            position: relative;
            width: 100%;
        }
        .setting-card.selected {
            border-color: #ff8822;
            background-color: #ff771122;
        }
        .setting-card h4 {
            color: #ffcc77;
            margin-bottom: 10px;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap:8px;
        }
        .tip-text {
            color: #9cf;
            font-size: 12px;
            margin-top: 6px;
            line-height: 1.4;
        }
        /* 配件列表样式 */
        .item-row {
            display: grid;
            grid-template-columns: 1fr 80px 110px 110px 70px;
            gap:8px;
            align-items: end;
            margin-bottom:10px;
        }
        @media (max-width:768px){
            .item-row {
                grid-template-columns: 1fr 1fr;
                gap:8px;
            }
            .item-row > div:last-child {
                grid-column: 1 / -1;
            }
        }
        .item-col {
            display: flex;
            flex-direction: column;
            gap:4px;
        }
        .sum-info {
            margin:12px 0;
            padding:10px;
            background:#222;
            border-radius:8px;
            display:flex;
            flex-wrap:wrap;
            gap:20px;
        }
    </style>
</head>
<body>
    <h1>天龙四驱 · 会员消费计算器 V2.0</h1>

    <!-- 会员参数设置模块 -->
    <div class="card-wrap">
        <div class="title-block">会员方案参数设置（勾选卡片=选中客户类型，修改数字实时生效）</div>
        <div class="setting-grid">
            <!-- 非会员 -->
            <div class="setting-card" id="card-none">
                <h4>
                    <input type="radio" name="memberSelect" value="none">
                    非会员
                </h4>
                <div class="input-row">
                    <label>年费（元）</label>
                    <input type="number" value="0" disabled>
                </div>
                <div class="input-row">
                    <label>年度进货价限额（元）</label>
                    <input type="number" value="0" disabled>
                </div>
                <div class="input-row">
                    <label>超限配件折扣系数</label>
                    <input type="number" step="0.01" min="0.01" max="1" value="1" disabled>
                </div>
                <div class="input-row">
                    <label>工时折扣系数（1=原价）</label>
                    <input type="number" step="0.01" min="0.01" max="1" value="1" disabled>
                </div>
            </div>
            <!-- 基础会员 -->
            <div class="setting-card" id="card-base">
                <h4>
                    <input type="radio" name="memberSelect" value="base">
                    基础会员
                </h4>
                <div class="input-row">
                    <label>年费（元）</label>
                    <input type="number" id="set-base-fee" min="0" value="599">
                </div>
                <div class="input-row">
                    <label>年度进货价限额（元）</label>
                    <input type="number" id="set-base-limit" min="0" value="5000">
                </div>
                <div class="input-row">
                    <label>超限配件折扣系数</label>
                    <input type="number" step="0.01" min="0.01" max="1" id="set-base-over" value="0.9">
                </div>
                <div class="input-row">
                    <label>工时折扣系数（1=原价）</label>
                    <input type="number" step="0.01" min="0.01" max="1" id="set-base-work" value="1.0">
                </div>
            </div>
            <!-- 进阶会员【默认选中】 -->
            <div class="setting-card" id="card-mid">
                <h4>
                    <input type="radio" name="memberSelect" value="mid" checked>
                    进阶会员
                </h4>
                <div class="input-row">
                    <label>年费（元）</label>
                    <input type="number" id="set-mid-fee" min="0" value="2999">
                </div>
                <div class="input-row">
                    <label>年度进货价限额（元）</label>
                    <input type="number" id="set-mid-limit" min="0" value="30000">
                </div>
                <div class="input-row">
                    <label>超限配件折扣系数</label>
                    <input type="number" step="0.01" min="0.01" max="1" id="set-mid-over" value="0.9">
                </div>
                <div class="input-row">
                    <label>工时折扣系数（1=原价）</label>
                    <input type="number" step="0.01" min="0.01" max="1" id="set-mid-work" value="0.9">
                </div>
            </div>
            <!-- 超级会员 -->
            <div class="setting-card" id="card-super">
                <h4>
                    <input type="radio" name="memberSelect" value="super">
                    超级会员
                </h4>
                <div class="input-row">
                    <label>年费（元）</label>
                    <input type="number" id="set-super-fee" min="0" value="5999">
                </div>
                <div class="input-row">
                    <label>年度进货价限额（无上限）</label>
                    <input type="number" id="set-super-limit" min="0" value="9999999">
                </div>
                <div class="input-row">
                    <label>超限配件折扣系数</label>
                    <input type="number" step="0.01" min="0.01" max="1" id="set-super-over" value="0.9">
                </div>
                <div class="input-row">
                    <label>工时折扣系数（1=原价）</label>
                    <input type="number" step="0.01" min="0.01" max="1" id="set-super-work" value="0.8">
                </div>
            </div>
        </div>
        <div class="tip-text">提示：修改会员参数、配件、工时自动实时计算；超级会员限额9999999代表无上限</div>
    </div>

    <!-- 多配件录入区域（新版，替代原两个总价输入框） -->
    <div class="card-wrap">
        <div class="title-block">配件明细（自动汇总总价参与计算）</div>
        <div id="itemList">
            <!-- 动态配件行由JS生成 -->
        </div>
        <button class="btn-add" id="btnAddItem">+ 添加配件</button>
        <div class="sum-info">
            <div>配件总市场价：<span class="text-orange" id="sumMarket">0.00</span> 元</div>
            <div>配件总进货价：<span class="text-orange" id="sumCost">0.00</span> 元</div>
        </div>

        <div class="input-row">
            <label>会员已使用额度：</label>
            <input type="number" id="yearUsedCost" value="0" min="0" step="0.01">
        </div>
        <div class="input-row">
            <label id="workLabelText">本次工时费原价（费率0.9）：</label>
            <input type="number" id="currentWorkPrice" value="0" min="0" step="0.01">
        </div>
        <button class="btn-calc">配件/数据修改自动实时计算，无需点击</button>
    </div>

    <!-- 精简后计算结果明细 -->
    <div class="card-wrap">
        <div class="title-block">实时计算结果明细</div>
        <div class="result-box" id="resultBox">
            <div class="result-row">
                <span>1. 配件汇总总市场价：</span>
                <span id="resMarketTotal" class="text-orange">0.00 元</span>
            </div>
            <div class="result-row">
                <span>2. 当年剩余可用进货限额：</span>
                <span id="resRemainLimit" class="text-orange">0.00 元</span>
            </div>
            <div class="result-row">
                <span>3. 超出限额对应市场价：</span>
                <span id="resOverMarket" class="text-orange">0.00 元</span>
            </div>
            <div class="result-row">
                <span>4. 配件合计应付金额：</span>
                <span id="resPartTotalPay" class="text-orange">0.00 元</span>
            </div>
            <div class="result-row">
                <span>5. 工时费应付金额（折扣后）：</span>
                <span id="resWorkPay" class="text-orange">0.00 元</span>
            </div>
            <div class="result-row">
                <span class="text-orange">★ 本次实际待支付总金额：</span>
                <span id="resTotalPay" class="text-orange">0.00 元</span>
            </div>
        </div>
        <div class="rule-desc">
            <p>业务收款计算规则：</p>
            <p>1. 配件多件自动汇总总市场价、总进货价；总进货价 ≤ 剩余额度 → 付总进货价；超出则按进货价超出比例换算对应市场价超出部分，再×超限折扣</p>
            <p>2. 工时费：按当前会员配置工时折扣计算；非会员全额市场价</p>
            <p>3. 总应付 = 配件合计应付 + 折扣后工时费</p>
            <p>4. 年度限额缴费起364天重置，工时折扣不叠加其他门店活动</p>
        </div>
    </div>

    <script>
        const DEFAULT_CONFIG = {
            base: { annualFee: 599, yearLimit: 5000, overDiscount: 0.9, workDiscount: 1.0 },
            mid: { annualFee: 2999, yearLimit: 30000, overDiscount: 0.9, workDiscount: 0.9 },
            super: { annualFee: 5999, yearLimit: 9999999, overDiscount: 0.9, workDiscount: 0.8 }
        };
        const fmt = num => Number(num || 0).toFixed(2);
        let itemIndex = 0;

        // 全局输入框聚焦全选（包含text文本框、number数字框，统一处理）
        function bindInputSelectAll(container = document) {
            const inputs = container.querySelectorAll('input[type="text"], input[type="number"]');
            inputs.forEach(input => {
                input.onfocus = function () {
                    this.select();
                }
            });
        }

        // 更新工时费率标签
        function refreshWorkRateLabel() {
            const level = document.querySelector('input[name="memberSelect"]:checked').value;
            let rate = 1;
            if(level !== 'none'){
                rate = Number(document.getElementById(`set-${level}-work`).value) || 1;
            }
            document.getElementById('workLabelText').innerText = `本次工时费原价（费率${rate}）：`;
            doAutoCalc();
        }

        // 读取会员参数
        function getCurrentMemberSetting(type) {
            if(type === 'none') return null;
            return {
                annualFee: Number(document.getElementById(`set-${type}-fee`).value) || 0,
                yearLimit: Number(document.getElementById(`set-${type}-limit`).value) || 0,
                overDiscount: Number(document.getElementById(`set-${type}-over`).value) || 1,
                workDiscount: Number(document.getElementById(`set-${type}-work`).value) || 1
            }
        }

        // 计算配件总市场价、总进货价
        function calcItemSum() {
            let totalMarket = 0;
            let totalCost = 0;
            const rows = document.querySelectorAll('.item-row');
            rows.forEach(row => {
                const qty = Number(row.querySelector('.qty').value) || 0;
                const priceMarket = Number(row.querySelector('.price-market').value) || 0;
                const priceCost = Number(row.querySelector('.price-cost').value) || 0;
                totalMarket += qty * priceMarket;
                totalCost += qty * priceCost;
            });
            document.getElementById('sumMarket').innerText = fmt(totalMarket);
            document.getElementById('sumCost').innerText = fmt(totalCost);
            return { totalMarket, totalCost };
        }

        // 添加配件行
        function addItemRow() {
            const wrap = document.getElementById('itemList');
            const id = itemIndex++;
            const row = document.createElement('div');
            row.className = 'item-row';
            row.dataset.id = id;
            row.innerHTML = `
                <div class="item-col">
                    <label>配件名称</label>
                    <input type="text" class="name" placeholder="配件名称">
                </div>
                <div class="item-col">
                    <label>数量</label>
                    <input type="number" class="qty" value="1" min="0" step="1">
                </div>
                <div class="item-col">
                    <label>市场价单价</label>
                    <input type="number" class="price-market" value="0" min="0" step="0.01">
                </div>
                <div class="item-col">
                    <label>进货价单价</label>
                    <input type="number" class="price-cost" value="0" min="0" step="0.01">
                </div>
                <div class="item-col">
                    <label>&nbsp;</label>
                    <button class="btn-del">删除</button>
                </div>
            `;
            wrap.appendChild(row);
            // 新增行内输入框绑定焦点全选
            bindInputSelectAll(row);
            // 本行输入变更自动汇总计算
            const inputs = row.querySelectorAll('input');
            inputs.forEach(inp => inp.addEventListener('input', ()=>{
                calcItemSum();
                doAutoCalc();
            }));
            // 删除按钮事件
            row.querySelector('.btn-del').addEventListener('click', ()=>{
                row.remove();
                calcItemSum();
                doAutoCalc();
            });
            calcItemSum();
            doAutoCalc();
        }

        // 核心计算逻辑
        function doAutoCalc() {
            const level = document.querySelector('input[name="memberSelect"]:checked').value;
            const { totalMarket, totalCost } = calcItemSum();
            const yearUsed = Number(document.getElementById('yearUsedCost').value) || 0;
            const workRaw = Number(document.getElementById('currentWorkPrice').value) || 0;

            let workRate, remainLimit, overMarket, partTotalPay;
            if (level === 'none') {
                workRate = 1;
                remainLimit = 0;
                overMarket = totalMarket;
                partTotalPay = totalMarket;
            } else {
                const cfg = getCurrentMemberSetting(level);
                workRate = cfg.workDiscount;
                const maxLimit = cfg.yearLimit;
                remainLimit = maxLimit - yearUsed;

                if (totalCost <= remainLimit) {
                    overMarket = 0;
                    partTotalPay = totalCost;
                } else {
                    // 按进货价超出比例换算对应的市场价超出部分
                    // 超出市场价 = (进货价 - 剩余额度) / 进货价 × 总市场价
                    const overCost = totalCost - remainLimit;
                    overMarket = totalCost > 0 ? (overCost / totalCost) * totalMarket : totalMarket;
                    const overPay = overMarket * cfg.overDiscount;
                    partTotalPay = remainLimit + overPay;
                }
            }
            const workPay = workRaw * workRate;
            const totalPay = partTotalPay + workPay;

            // 渲染结果
            document.getElementById('resMarketTotal').innerText = fmt(totalMarket) + ' 元';
            document.getElementById('resRemainLimit').innerText = fmt(Math.max(remainLimit, 0)) + ' 元';
            document.getElementById('resOverMarket').innerText = fmt(Math.max(overMarket, 0)) + ' 元';
            document.getElementById('resPartTotalPay').innerText = fmt(partTotalPay) + ' 元';
            document.getElementById('resWorkPay').innerText = fmt(workPay) + ' 元';
            document.getElementById('resTotalPay').innerText = fmt(totalPay) + ' 元';
        }

        // 切换会员卡片
        function updateCardHighlight() {
            document.querySelectorAll('.setting-card').forEach(card => card.classList.remove('selected'));
            const selectedVal = document.querySelector('input[name="memberSelect"]:checked').value;
            document.getElementById(`card-${selectedVal}`).classList.add('selected');
            refreshWorkRateLabel();
        }
        document.querySelectorAll('input[name="memberSelect"]').forEach(radio=>{
            radio.addEventListener('change', updateCardHighlight);
        })

        // 会员参数修改触发重算
        document.querySelectorAll('.setting-card input[type="number"]').forEach(input=>{
            input.addEventListener('input', ()=>{
                refreshWorkRateLabel();
            });
        })

        // 工时、已使用额度输入实时计算
        const consumeInputs = [
            document.getElementById('yearUsedCost'),
            document.getElementById('currentWorkPrice')
        ];
        consumeInputs.forEach(input => {
            input.addEventListener('input', doAutoCalc);
        })

        // 添加配件按钮
        document.getElementById('btnAddItem').addEventListener('click', addItemRow);

        // 页面初始化
        bindInputSelectAll();
        addItemRow(); // 默认一行配件
        updateCardHighlight();
    </script>
</body>
</html>