装装帮轻装报价系�?/title> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <style> :root { --primary: #E89A3C; --primary-dark: #D08930; --primary-light: #FFF4E6; --accent-blue: #1A5B8F; --bg: #FFFBF5; --card: #ffffff; --text: #2c2c2c; --text-sub: #777; --border: #F0E5D0; --success: #52c41a; --warning: #E89A3C; --error: #ff4d4f; --radius: 14px; --shadow: 0 2px 14px rgba(232,154,60,0.10); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif; background: linear-gradient(rgba(255,251,245,0.92), rgba(255,251,245,0.92)), url('assets/pattern-house.png') center/400px repeat, #FFFBF5; color: var(--text); min-height: 100vh; -webkit-text-size-adjust: 100%; } .header { background: linear-gradient(135deg, #E89A3C 0%, #F0A840 50%, #F5B85C 100%); padding: 18px 16px 16px; color: #fff; position: relative; overflow: hidden; } .header::before { content: ''; position: absolute; top: -50px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,0.10); } .header::after { content: ''; position: absolute; bottom: -30px; left: 20%; width: 100px; height: 100px; border-radius: 50%; background: rgba(26,91,143,0.08); } .header-logo-img { margin-bottom: 6px; text-align: center; } .header-logo-img img { height: 44px; width: auto; object-fit: contain; display: block; margin: 0 auto; } .header-title { font-size: 21px; font-weight: 800; color: #fff; margin-bottom: 2px; text-align: center; letter-spacing: 1px; } .header-sub { font-size: 12px; color: rgba(255,255,255,0.80); text-align: center; letter-spacing: 2px; } .steps { display: flex; gap: 6px; margin-bottom: 18px; } .step { flex: 1; text-align: center; font-size: 12px; padding: 10px 4px; border-radius: 10px; color: var(--text-sub); background: #fff; font-weight: 600; transition: all 0.3s; border: 1.5px solid var(--border); line-height: 1.3; } .step.active { background: linear-gradient(135deg, var(--primary) 0%, #F0A840 100%); color: #fff; border-color: var(--primary); box-shadow: 0 3px 12px rgba(232,154,60,0.25); transform: translateY(-1px); } .step.done { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); } .page { display: none; padding: 12px 12px 100px; } .page.active { display: block; } .card { background: var(--card); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; box-shadow: var(--shadow); border: 1px solid rgba(240,229,208,0.6); } .card-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; } .card-title::before { content: ''; display: inline-block; width: 4px; height: 18px; background: var(--primary); border-radius: 3px; } .form-row { margin-bottom: 14px; position: relative; } .form-row:last-child { margin-bottom: 0; } .form-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; } .form-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.75; } .form-input { width: 100%; border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 14px 11px 38px; font-size: 14px; color: var(--text); outline: none; background: #fff; font-family: inherit; transition: all 0.25s; position: relative; } .form-input:focus { border-color: var(--primary); background: #FFFBF7; box-shadow: 0 0 0 3px rgba(232,154,60,0.12); } .form-input-wrap { position: relative; } .form-input-wrap .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: 0.45; pointer-events: none; transition: opacity 0.25s; } .form-input-wrap .input-icon.focused { opacity: 0.85; } .input-with-unit { position: relative; display: flex; align-items: center; } .input-with-unit .form-input { padding-right: 50px; flex: 1; } .input-with-unit .input-unit { position: absolute; right: 14px; font-size: 13px; color: var(--text-sub); pointer-events: none; } .options-group { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; } .option-btn { padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 22px; font-size: 13px; cursor: pointer; background: #FFFBF7; color: var(--text-sub); transition: all 0.25s; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .option-btn.selected { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); font-weight: 600; box-shadow: 0 2px 8px rgba(232,154,60,0.15); } .option-btn:active { transform: scale(0.96); } .form-hint { font-size: 11px; color: var(--primary-dark); margin-top: -6px; margin-bottom: 8px; line-height: 1.6; } .pkg-cards { display: flex; flex-direction: column; gap: 12px; } .pkg-card { border: 2px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: all 0.25s; position: relative; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .pkg-card.selected { border-color: var(--primary); background: linear-gradient(135deg, #FFFBF7 0%, #FFF8F0 100%); box-shadow: 0 6px 24px rgba(232,154,60,0.22); transform: translateY(-3px); } .pkg-card:hover { box-shadow: 0 3px 12px rgba(232,154,60,0.12); } .pkg-card:active { transform: scale(0.98); } .pkg-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; } .pkg-price { font-size: 28px; font-weight: 800; color: var(--primary-dark); margin-bottom: 4px; } .pkg-desc { font-size: 12px; color: var(--text-sub); line-height: 1.6; } .pkg-badge { position: absolute; top: 12px; right: 12px; color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; letter-spacing: 0.5px; } .pkg-badge.badge-main { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); color: #5a3e1b; } .pkg-badge.badge-recommend { background: linear-gradient(135deg, #f35626 0%, #feab3a 100%); color: #fff; animation: badge-pulse 2s ease-in-out infinite; } @keyframes badge-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } .nav-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--border); padding: 10px 16px; display: flex; gap: 12px; z-index: 100; box-shadow: 0 -4px 20px rgba(232,154,60,0.08); } .nav-btn { flex: 1; padding: 13px; border: none; border-radius: 10px; font-size: 15px; cursor: pointer; font-family: inherit; font-weight: 600; transition: all 0.25s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .nav-btn.primary { background: linear-gradient(135deg, #E89A3C, #F0A840); color: #fff; font-weight: 700; box-shadow: 0 4px 14px rgba(232,154,60,0.30); } .nav-btn.primary:active { background: linear-gradient(135deg, #D08930, #E89A3C); transform: scale(0.98); } .nav-btn.secondary { background: #F5F0EA; color: var(--text); border: 1.5px solid var(--border); } .nav-btn.secondary:active { background: #EEE8DD; } .fee-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed rgba(240,229,208,0.8); font-size: 13px; } .fee-item:last-child { border-bottom: none; } .fee-name { color: var(--text); flex: 1; } .fee-name-sub { font-size: 11px; color: var(--text-sub); margin-top: 2px; } .fee-amount { font-weight: 700; color: var(--primary); font-size: 15px; } .fee-amount.zero { color: #bbb; font-weight: 400; font-size: 13px; } .option-note { font-size: 11px; color: var(--text-sub); background: linear-gradient(135deg, #FFF9F0, #FFFBF7); border-radius: 8px; padding: 8px 12px; margin-top: 10px; line-height: 1.5; border-left: 3px solid var(--primary); } .wall-desc { font-size: 11px; color: var(--primary-dark); margin-top: 6px; line-height: 1.6; background: linear-gradient(135deg, #FFF9F0, #FFFBF7); border-radius: 8px; padding: 10px 12px; display: none; border-left: 3px solid rgba(232,154,60,0.4); } .wall-desc.active { display: block; } @media screen and (max-width: 480px) { .header-title { font-size: 18px; } .pkg-price { font-size: 24px; } .quote-total { font-size: 28px; } .fee-amount { font-size: 14px; } .form-input, .input-with-unit input { font-size: 16px; } .option-btn { padding: 6px 12px; font-size: 12px; } .card { padding: 12px; } .card-title { font-size: 14px; } } .cs-item { display: flex; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border); align-items: center; gap: 6px; } .cs-item:last-child { border-bottom: none; } .cs-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; } .cs-label { color: var(--text-sub); width: 72px; flex-shrink: 0; } .cs-val { color: var(--text); font-weight: 500; } .quote-box { background: linear-gradient(135deg, #E89A3C 0%, #F0A840 50%, #F5B85C 100%); border-radius: var(--radius); padding: 24px 20px; margin-bottom: 14px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 6px 28px rgba(232,154,60,0.30); } .quote-box::after { content: ''; position: absolute; bottom: -20px; left: -15px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.06); } .quote-box::before { content: ''; position: absolute; top: -20px; right: -15px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,0.10); } .quote-label { font-size: 13px; color: rgba(255,255,255,0.80); margin-bottom: 6px; letter-spacing: 2px; } .quote-total { font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 6px; text-shadow: 0 2px 8px rgba(208,137,48,0.25); } .quote-total small { font-size: 16px; } .quote-desc { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.6; } .floor-brand-note { font-size: 11px; color: var(--text-sub); margin-top: 4px; line-height: 1.5; } .section-divider { height: 6px; margin: 16px 0; text-align: center; overflow: hidden; } .section-divider img { height: 6px; width: 100%; object-fit: cover; border-radius: 3px; } /* ===== 授权验证层样�?===== */ .auth-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #FFFBF5 0%, #FFF4E6 100%); z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .auth-mask.hidden { display: none; } .auth-box { background: #fff; border-radius: var(--radius); padding: 36px 28px; box-shadow: 0 8px 40px rgba(232,154,60,0.15); text-align: center; width: 100%; max-width: 360px; border: 1px solid var(--border); } .auth-box .logo-img { height: 72px; width: auto; margin-bottom: 18px; } .auth-box h2 { font-size: 18px; margin-bottom: 6px; color: var(--text); } .auth-box p { font-size: 12px; color: var(--text-sub); margin-bottom: 20px; } .auth-input { width: 100%; padding: 13px; border: 2px solid var(--border); border-radius: 10px; font-size: 17px; text-align: center; letter-spacing: 4px; font-family: monospace; outline: none; margin-bottom: 14px; transition: all 0.25s; background: #FFFBF7; } .auth-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,154,60,0.12); } .auth-btn { width: 100%; padding: 13px; border: none; border-radius: 10px; background: linear-gradient(135deg, #E89A3C, #F0A840); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 4px 14px rgba(232,154,60,0.30); transition: all 0.25s; } .auth-btn:active { background: linear-gradient(135deg, #D08930, #E89A3C); transform: scale(0.98); } .auth-error { color: var(--error); font-size: 12px; margin-top: 8px; min-height: 18px; } .auth-info { font-size: 11px; color: var(--text-sub); margin-top: 16px; line-height: 1.6; } .auth-logout { position: fixed; top: 8px; right: 12px; z-index: 50; font-size: 11px; color: rgba(255,255,255,0.5); cursor: pointer; background: rgba(0,0,0,0.3); padding: 4px 10px; border-radius: 10px; display: none; } .auth-logout.visible { display: block; } /* 通用按钮 */ .btn { display: inline-block; padding: 13px 36px; border: none; border-radius: 10px; font-size: 15px; font-family: inherit; font-weight: 700; cursor: pointer; transition: all 0.25s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; text-align: center; letter-spacing: 1px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.3); transform: translate(-50%, -50%); transition: width 0.4s, height 0.4s; } .btn:active::after { width: 200px; height: 200px; opacity: 0; } .btn-primary { background: linear-gradient(135deg, #E89A3C, #F0A840); color: #fff; box-shadow: 0 4px 14px rgba(232,154,60,0.30); } .btn-primary:active { background: linear-gradient(135deg, #D08930, #E89A3C); transform: scale(0.98); } /* ===== 报价图片预览弹窗 ===== */ .img-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .img-modal.active { display: flex; } .img-modal-box { background: #fff; border-radius: var(--radius); padding: 16px; max-width: 380px; width: 100%; text-align: center; max-height: 90vh; overflow-y: auto; } .img-modal-box img { width: 100%; border-radius: 8px; display: block; border: 1px solid var(--border); } .img-modal-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .img-modal-tip { font-size: 12px; color: var(--text-sub); margin: 12px 0 8px; line-height: 1.6; } .img-modal-btn { width: 100%; padding: 13px; border: none; border-radius: 10px; background: linear-gradient(135deg, #E89A3C, #F0A840); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 10px; box-shadow: 0 4px 14px rgba(232,154,60,0.30); } .img-modal-btn:active { background: linear-gradient(135deg, #D08930, #E89A3C); transform: scale(0.98); } .img-modal-close { width: 100%; padding: 12px; border: none; border-radius: 8px; background: #f0f0f0; color: var(--text); font-size: 15px; cursor: pointer; font-family: inherit; margin-top: 8px; } /* ===== 报价单图片模板（隐藏，用于生成图片） ===== */ #quoteImageTemplate { position: fixed; left: -9999px; top: 0; width: 375px; background: #fff; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif; color: #2c2c2c; padding: 0; } .qi-header { background: linear-gradient(135deg, #E89A3C 0%, #F0A840 50%, #F5B85C 100%); padding: 22px 16px; text-align: center; color: #fff; } .qi-header img { height: 38px; width: auto; margin-bottom: 6px; } .qi-header h2 { font-size: 18px; font-weight: 800; margin-bottom: 2px; letter-spacing: 1px; } .qi-header p { font-size: 11px; color: rgba(255,255,255,0.80); margin: 0; letter-spacing: 2px; } .qi-body { padding: 18px; background: #FFFBF7; } .qi-section { margin-bottom: 14px; position: relative; } .qi-section-title { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 10px; padding-bottom: 10px; border-bottom: none; display: flex; align-items: center; gap: 8px; } .qi-section-title::after { content: ''; flex: 1; height: 2px; background: url('assets/divider-orange.png') repeat-x; background-size: auto 2px; opacity: 0.5; } .qi-row { display: flex; justify-content: space-between; font-size: 12px; padding: 5px 0; } .qi-row .qi-label { color: #666; } .qi-row .qi-val { color: #2c2c2c; font-weight: 500; } .qi-fee-row { display: flex; justify-content: space-between; font-size: 12px; padding: 6px 0; border-bottom: 1px dashed #e8e0d0; } .qi-fee-row:last-child { border-bottom: none; } .qi-fee-name { color: #2c2c2c; } .qi-fee-sub { font-size: 10px; color: #999; margin-top: 1px; } .qi-fee-amt { font-weight: 700; color: var(--primary); } .qi-fee-amt.zero { color: #bbb; font-weight: 400; } .qi-total-box { background: linear-gradient(135deg, #E89A3C 0%, #F0A840 100%); border-radius: 12px; padding: 20px; margin: 14px 0; text-align: center; color: #fff; box-shadow: 0 4px 16px rgba(232,154,60,0.25); } .qi-total-label { font-size: 12px; color: rgba(255,255,255,0.80); letter-spacing: 2px; } .qi-total-price { font-size: 30px; font-weight: 800; color: #fff; margin: 4px 0; text-shadow: 0 2px 6px rgba(208,137,48,0.20); } .qi-footer { text-align: center; font-size: 10px; color: #bbb; padding: 12px 16px; border-top: 1px solid var(--border); background: #FFFBF7; } /* ===== 页面切换动画 ===== */ .page { display: none; animation: fadeSlideIn 0.35s ease-out; } .page.active { display: block; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .page.leaving { animation: fadeSlideOut 0.2s ease-in forwards; } @keyframes fadeSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } } </style> <script src="https://beacon.cdn.qq.com/sdk/4.5.9/beacon_web.min.js"></script> <script> (function(){ try{ var beacon=new BeaconAction({ appkey:'0WEB06U85YBSLJNL', versionCode:'1.0.0', channelID:'share', delay:1000, sessionDuration:30*60*1000, isOversea:false, needReportRqdEvent:false }); beacon.onDirectUserAction('preview_page_view',{ 'url':location.href, 'referrer':document.referrer, 'title':document.title, 'sandbox_id':'fde861bacc224c43b2f219134aa448d8' }); }catch(e){} })(); </script></head> <body>  <div class="auth-mask" id="authMask"> <div class="auth-box"> <img src="assets/logo-zhuangzhuangbang-white.png" alt="装装�? class="logo-img"> <h2>装装帮轻装报价系�?/h2> <p>请输入授权码以继续使�?/p> <input type="text" id="authCodeInput" class="auth-input" placeholder="ZZB-XXXX-XXXX" maxlength="14" onkeydown="if(event.key==='Enter')doAuth()"> <button class="auth-btn" onclick="doAuth()">验证授权�?/button> <div class="auth-error" id="authError"></div> <div class="auth-info"> 授权码由管理员发放，有效期内可正常使�?br> 如有问题请联系管理员 </div> </div> </div> <div class="auth-logout" id="authLogout" onclick="logoutAuth()">退出登�?/div> <div class="header"> <div class="header-logo-img"><img src="assets/logo-zhuangzhuangbang-white.png" alt="装装�?></div> <div class="header-title">装装帮轻装报价系�?/div> <div class="header-sub">透明报价 · 明白消费</div> </div> <div class="steps"> <div class="step active" data-step="1">客户信息</div> <div class="step" data-step="2">套餐选择</div> <div class="step" data-step="3">额外选项</div> <div class="step" data-step="4">最终报�?/div> </div>  <div id="page1" class="page active"> <div class="card"> <div class="card-title"><img src="assets/icon-home.png" style="width:18px;height:18px;vertical-align:middle;margin-right:6px;" alt="">客户信息</div> <div class="form-row"> <div class="form-label"><img src="assets/icon-home.png" class="form-icon" alt="">客户姓名</div> <div class="form-input-wrap"> <img src="assets/icon-home.png" class="input-icon" alt=""> <input type="text" id="customerName" class="form-input" placeholder="请输入客户姓名"> </div> </div> <div class="form-row"> <div class="form-label"><img src="assets/icon-phone.png" class="form-icon" alt="">联系电话</div> <div class="form-input-wrap"> <img src="assets/icon-phone.png" class="input-icon" alt=""> <input type="tel" id="customerPhone" class="form-input" placeholder="请输入联系电话"> </div> </div> <div class="form-row"> <div class="form-label"><img src="assets/icon-location.png" class="form-icon" alt="">小区名称</div> <div class="form-input-wrap"> <img src="assets/icon-location.png" class="input-icon" alt=""> <input type="text" id="communityName" class="form-input" placeholder="请输入小区名称"> </div> </div> <div class="form-row"> <div class="form-label"><img src="assets/icon-location.png" class="form-icon" alt="">楼号地址</div> <div class="form-input-wrap"> <img src="assets/icon-location.png" class="input-icon" alt=""> <input type="text" id="buildingAddress" class="form-input" placeholder="选填，如：1栋2单元501"> </div> </div> </div> <div class="card"> <div class="card-title"><img src="assets/icon-renovation.png" style="width:18px;height:18px;vertical-align:middle;margin-right:6px;" alt="">房屋基本情况</div> <div class="form-row"> <div class="form-label"><img src="assets/icon-renovation.png" class="form-icon" alt="">建筑面积</div> <div class="input-with-unit"> <img src="assets/icon-renovation.png" class="input-icon" alt="" style="left:12px;"> <input type="number" id="area" placeholder="请输入面积" style="padding-left:38px;" min="20" max="500" oninput="validateArea()"> <span class="input-unit">m²</span> </div> </div> <div class="form-hint" style="margin-top:4px;">面积超出90m²将按超出部分加收</div> <div class="form-row"> <div class="form-label">户型结构</div> <select id="roomLayout" style="flex:1;border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:14px;color:var(--text);outline:none;background:#fafaf8;font-family:inherit;appearance:none;-webkit-appearance:none;" onchange="onRoomLayoutChange()"> <option value="" disabled selected>-- 请选择 --</option> <option value="1-1-1-1">一室一厅一厨一卫</option> <option value="2-1-1-1">两室一厅一厨一卫</option> <option value="2-2-1-1">两室两厅一厨一卫</option> <option value="2-2-1-2">两室两厅一厨两卫</option> <option value="3-1-1-1">三室一厅一厨一卫</option> <option value="3-2-1-1">三室两厅一厨一卫</option> <option value="3-2-1-2">三室两厅一厨两卫</option> <option value="4-2-1-2">四室两厅一厨两卫</option> <option value="4-2-1-3">四室两厅一厨三卫</option> <option value="5-2-1-2">五室两厅一厨两卫</option> <option value="5-2-1-3">五室两厅一厨三卫</option> </select> </div> <div class="form-hint" id="layoutHint">请选择户型结构</div> <div class="form-row"> <div class="form-label">入户方式</div> <div class="options-group"> <div class="option-btn" data-val="no" onclick="selectOption(this,'hasElevator')">无电�?/div> <div class="option-btn" data-val="yes" onclick="selectOption(this,'hasElevator')">有电�?/div> </div> </div> <div class="form-row" id="floorRow" style="display:none;"> <div class="form-label"><img src="assets/icon-renovation.png" class="form-icon" alt="">楼层</div> <div class="input-with-unit"> <img src="assets/icon-renovation.png" class="input-icon" alt="" style="left:12px;"> <input type="number" id="floor" placeholder="请输入楼层" min="1" max="100" style="padding-left:38px;"> <span class="input-unit">层</span> </div> </div> <div class="form-row"> <div class="form-label">墙面现状</div> <div class="options-group" style="flex-wrap:wrap;"> <div class="option-btn" data-val="standard" onclick="selectOption(this,'wallCondition')">标准</div> <div class="option-btn" data-val="severe" onclick="selectOption(this,'wallCondition')">重度</div> </div> </div> <div class="wall-desc" id="wallDescStandard">标准：新房，墙体基层牢固无空鼓，只需铲墙皮到腻子层�?/div> <div class="wall-desc" id="wallDescSevere">重度：老房子，墙体基底松散，铲墙需铲到砖层后重新粉墙�?/div> </div> </div>  <div id="page2" class="page"> <div style="text-align:center;padding:8px 0 4px;"> <img src="assets/logo-zhuangzhuangbang-primary.png" alt="װװ��" style="height:120px;width:auto;object-fit:contain;display:block;margin:0 auto;"> </div> <div class="card" style="margin-bottom:12px;"> <div class="card-title">选择装修套餐</div> <div class="pkg-cards"> <div class="pkg-card" data-pkg="basic" onclick="selectPackage('basic')"> <span class="pkg-badge badge-main">高性价比</span> <div class="pkg-name">实用家基础版</div> <div class="pkg-price">46,800<span style="font-size:14px;font-weight:400;">元起</span></div> <div class="pkg-desc">建筑面积90平米内，一厨一卫，全屋轻整装<br>包含：全屋水电换线、品牌防水10年质保、墙地砖铺贴、全套洁具淋浴房、橱柜吊顶、套装木门、窗帘灯具<br>不含：衣柜、电器和活动家具</div> </div> <div class="pkg-card" data-pkg="pro" onclick="selectPackage('pro')"> <span class="pkg-badge badge-recommend">品质升级</span> <div class="pkg-name">实用家进阶版</div> <div class="pkg-price">68,800<span style="font-size:14px;font-weight:400;">元起</span></div> <div class="pkg-desc">建筑面积90平米内，一厨一卫，自住改善首选<br>包含：基础版全部项目，另含15㎡定制衣柜、全屋薄边吊+窗帘盒、2.5+2.0管大弧放线、新三层木地板或全屋贴砖、智能镜柜、升降晾衣架、电箱更换移位<br>65个工作日完工，不含：电器、活动家具</div> </div> <div class="pkg-card" data-pkg="premium" onclick="selectPackage('premium')"> <span class="pkg-badge badge-recommend">力荐</span> <div class="pkg-name">舒适家</div> <div class="pkg-price">89,800<span style="font-size:14px;font-weight:400;">元起</span></div> <div class="pkg-desc">建筑面积90平米内，一厨两卫，全屋整装<br>包含：全屋水电改造、质保防水、全套洁具门窗，25平米两房的定制衣柜和一组鞋柜，升级的窗帘和灯具<br>不含：全屋电器，活动家具</div> </div> </div> </div> <div class="option-note" style="margin-top:4px;"> 温馨提示：以上价格为建筑面积90平米以内基准价，超出部分按平米计费。具体费用请完成全部选项后查看最终报价。</div> </div>  <div id="page3" class="page"> <div class="card" id="floorOptionCard"> <div class="card-title"><img src="assets/icon-construction.png" style="width:18px;height:18px;vertical-align:middle;margin-right:6px;" alt="">地板选项</div> <div class="options-group" style="flex-wrap:wrap;" id="floorOptionsContainer"></div> <div class="option-note" id="floorOptionNote">铺设面积=建筑面积×65%</div> <div class="floor-brand-note" id="floorBrandNote"></div> </div> </div>  <div id="page4" class="page"> <div class="quote-box"> <div class="quote-label">最终报�?/div> <div class="quote-total" id="finalPrice">�?small>�?/small></div> <div class="quote-desc" id="quoteDesc">请完成前面步骤后查看报价</div> </div> <div class="card"> <div class="card-title"><img src="assets/icon-home.png" style="width:18px;height:18px;vertical-align:middle;margin-right:6px;" alt="">客户信息确认</div> <div id="summaryCustomer"></div> <div class="section-divider"><img src="assets/divider-orange.png" alt="" style="width:100%;height:6px;"></div> <div id="summaryInfo"></div> </div> <div class="card"> <div class="card-title"><img src="assets/icon-renovation.png" style="width:18px;height:18px;vertical-align:middle;margin-right:6px;" alt="">费用明细</div> <div id="feeDetail"></div> <div class="fee-item" style="border-top:2px solid var(--primary);padding-top:12px;margin-top:4px;"> <span class="fee-name" style="font-weight:700;font-size:14px;">合计总价</span> <span class="fee-amount" id="feeTotal" style="font-size:18px;color:var(--error);">�?/span> </div> </div> <div class="option-note"> 此报价为初步估算，实际价格以现场量房后出具的正式合同为准。报价有效期7天�? </div> <div style="text-align:center;margin-top:16px;"> <button class="btn btn-primary" style="padding:12px 40px;font-size:16px;" onclick="submitQuote()">确认生成报价</button> </div> <div style="text-align:center;margin-top:20px;padding:16px;background:linear-gradient(135deg,rgba(232,154,60,0.08),rgba(26,91,143,0.06));border-radius:var(--radius);"> <img src="assets/ip-simple-filled.png" alt="" style="width:48px;height:auto;margin-bottom:8px;"> <div style="font-size:13px;font-weight:700;color:var(--primary);margin-bottom:2px;">装装帮轻装</div> <div style="font-size:11px;color:var(--text-sub);line-height:1.5;"> 透明报价 · 明白消费 · 放心托付<br> 您的专属轻装服务商 </div> </div> </div>  <div class="img-modal" id="imgModal"> <div class="img-modal-box"> <div class="img-modal-title">报价单已生成</div> <img id="quotePreviewImg" src="" alt="报价�?> <div class="img-modal-tip"> 长按上方图片即可保存到手机相�?br> 也可截图分享给客�? </div> <button class="img-modal-btn" onclick="downloadQuoteImage()">下载图片</button> <button class="img-modal-close" onclick="closeImgModal()">关闭</button> </div> </div>  <div id="quoteImageTemplate"> <div class="qi-header"> <div style="font-size:20px;font-weight:700;margin-bottom:2px;">装装帮轻装报价系�?/div> <p>透明报价 · 明白消费</p> </div> <div class="qi-body"> <div class="qi-section"> <div class="qi-section-title"><img src="assets/icon-home.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt="">客户信息</div> <div id="qiCustomer"></div> </div> <div class="qi-section"> <div class="qi-section-title"><img src="assets/icon-renovation.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt="">房屋信息</div> <div id="qiHouse"></div> </div> <div class="qi-section"> <div class="qi-section-title"><img src="assets/icon-construction.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt="">费用明细</div> <div id="qiFees"></div> </div> <div class="qi-total-box"> <div class="qi-total-label">合计总价</div> <div class="qi-total-price" id="qiTotal">�?/div> </div> </div> <div class="qi-footer"> 此报价为初步估算，实际价格以现场量房后出具的正式合同为准<br> 报价有效期7天 | 装装帮出品 </div> </div>  <div class="nav-bar"> <button class="nav-btn secondary" id="btnPrev" onclick="prevStep()" style="display:none;">上一�?/button> <button class="nav-btn primary" id="btnNext" onclick="nextStep()">下一�?/button> <button class="nav-btn primary" id="btnRecalc" onclick="goStep(1)" style="display:none;">重新计算</button> </div> <script> (function () { 'use strict'; // ========== 授权验证系统 ========== /* AUTH_CONFIG_START - 授权码配置（�?admin.html 生成�?*/ var AUTH_CONFIG = { "codes": [ { "code": "ZZB-ABC-DEF", "name": "张波", "expire": "2026-09-07", "maxDevices": 3, "devices": [] } ], "settings": { "deviceStorageDays": 7, "version": "1.0" } }; /* AUTH_CONFIG_END */ var AUTH_STORAGE_KEY = 'zzb_auth_data'; function getDeviceId() { var id = localStorage.getItem('zzb_device_id'); if (!id) { id = 'D' + Date.now().toString(36).toUpperCase() + Math.random().toString(36).substr(2, 4).toUpperCase(); localStorage.setItem('zzb_device_id', id); } return id; } function checkAuth() { // 如果没有配置任何授权码，直接放行（方便初次部署） if (!AUTH_CONFIG.codes || AUTH_CONFIG.codes.length === 0) { showAuthMask(false); return true; } var saved = localStorage.getItem(AUTH_STORAGE_KEY); if (!saved) { showAuthMask(true); return false; } try { var data = JSON.parse(saved); // 检查授权码是否仍在有效列表内 var codeObj = null; for (var i = 0; i < AUTH_CONFIG.codes.length; i++) { if (AUTH_CONFIG.codes[i].code === data.code) { codeObj = AUTH_CONFIG.codes[i]; break; } } if (!codeObj) { showAuthMask(true); return false; } // 检查是否过期 if (new Date(codeObj.expire) < new Date()) { localStorage.removeItem(AUTH_STORAGE_KEY); showAuthMask(true); return false; } // 检查设备是否被授权 var devId = getDeviceId(); if (codeObj.devices && codeObj.devices.indexOf(devId) === -1) { // 设备不在列表中，检查是否超过上限 if (codeObj.devices.length >= codeObj.maxDevices) { localStorage.removeItem(AUTH_STORAGE_KEY); showAuthMask(true); return false; } } showAuthMask(false); return true; } catch(e) { showAuthMask(true); return false; } } window.doAuth = function() { var input = document.getElementById('authCodeInput'); var errorEl = document.getElementById('authError'); var code = input.value.trim().toUpperCase(); errorEl.textContent = ''; if (!code) { errorEl.textContent = '请输入授权码'; return; } var codeObj = null; for (var i = 0; i < AUTH_CONFIG.codes.length; i++) { if (AUTH_CONFIG.codes[i].code === code) { codeObj = AUTH_CONFIG.codes[i]; break; } } if (!codeObj) { errorEl.textContent = '授权码不存在，请核对后重试'; return; } if (new Date(codeObj.expire) < new Date()) { errorEl.textContent = '授权码已过期，请联系管理员续期'; return; } var devId = getDeviceId(); // 如果设备不在授权列表中，尝试添加 if (!codeObj.devices) codeObj.devices = []; if (codeObj.devices.indexOf(devId) === -1) { if (codeObj.devices.length >= codeObj.maxDevices) { errorEl.textContent = '授权码已达到设备上限（' + codeObj.maxDevices + '台），请联系管理员'; return; } codeObj.devices.push(devId); } // 保存授权信息 var authData = { code: code, deviceId: devId, loginAt: new Date().toISOString() }; localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(authData)); showAuthMask(false); }; window.logoutAuth = function() { if (!confirm('确定退出当前授权吗？退出后需要重新输入授权码')) return; localStorage.removeItem(AUTH_STORAGE_KEY); location.reload(); }; window.submitQuote = function() { syncInputs(); // 静默保存到本地（后台处理，不提示用户） var submission = { id: 'SQ' + Date.now().toString(36).toUpperCase(), time: new Date().toLocaleString('zh-CN'), timestamp: Date.now(), customerName: state.customerName || '', customerPhone: state.customerPhone || '', communityName: state.communityName || '', buildingAddress: state.buildingAddress || '', area: state.area || 0, roomLayout: state.roomLayout || '', package: state.package || '', floorOption: state.floorOption || '', totalPrice: document.getElementById('feeTotal') ? document.getElementById('feeTotal').textContent.replace(/[^\d]/g, '') : '0' }; var submissions = []; try { var saved = localStorage.getItem('zzb_quote_submissions'); if (saved) submissions = JSON.parse(saved); } catch(e) {} submissions.unshift(submission); if (submissions.length > 200) submissions = submissions.slice(0, 200); localStorage.setItem('zzb_quote_submissions', JSON.stringify(submissions)); // 同步到云端 if (typeof saveQuoteToCloud === 'function') saveQuoteToCloud(submission); // 直接生成报价图片（不再显示分享链接弹窗） generateQuoteImage(); }; window.closeImgModal = function() { var modal = document.getElementById('imgModal'); if (modal) modal.classList.remove('active'); }; window.downloadQuoteImage = function() { var img = document.getElementById('quotePreviewImg'); if (!img || !img.src) return; var link = document.createElement('a'); link.href = img.src; link.download = '装装帮报价单_' + (state.customerName || '客户') + '_' + new Date().toLocaleDateString('zh-CN').replace(/\//g, '') + '.png'; link.click(); }; function generateQuoteImage() { var template = document.getElementById('quoteImageTemplate'); if (!template) return; // 填充客户信息 var custHtml = ''; if (state.customerName) custHtml += '<div class="qi-row"><img src="assets/icon-home.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt=""><span class="qi-label">客户姓名</span><span class="qi-val">' + esc(state.customerName) + '</span></div>'; if (state.customerPhone) custHtml += '<div class="qi-row"><img src="assets/icon-phone.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt=""><span class="qi-label">联系电话</span><span class="qi-val">' + esc(state.customerPhone) + '</span></div>'; if (state.communityName) custHtml += '<div class="qi-row"><img src="assets/icon-location.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt=""><span class="qi-label">小区名称</span><span class="qi-val">' + esc(state.communityName) + '</span></div>'; if (state.buildingAddress) custHtml += '<div class="qi-row"><img src="assets/icon-location.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt=""><span class="qi-label">楼号地址</span><span class="qi-val">' + esc(state.buildingAddress) + '</span></div>'; document.getElementById('qiCustomer').innerHTML = custHtml; // 填充房屋信息 var pkgName = state.package === 'basic' ? '实用家基础版' : (state.package === 'pro' ? '实用家进阶版' : (state.package === 'premium' ? '舒适家' : '未选择')); var layout = parseLayout(state.roomLayout); var wallNames = { standard: '标准', severe: '重度' }; var floorNames = { standard: '标配地板', upgrade: '升级地板', tile: '地砖' }; var elevatorNames = { yes: '有电梯', no: '无电梯' }; var houseHtml = ''; houseHtml += '<div class="qi-row"><img src="assets/icon-renovation.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt=""><span class="qi-label">套餐</span><span class="qi-val">' + pkgName + '</span></div>'; houseHtml += '<div class="qi-row"><span class="qi-label">建筑面积</span><span class="qi-val">' + (state.area || '?') + ' m²</span></div>'; houseHtml += '<div class="qi-row"><img src="assets/icon-home.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt=""><span class="qi-label">户型</span><span class="qi-val">' + layout.rooms + '室' + layout.halls + '厅' + layout.kitchens + '厨' + layout.baths + '卫</span></div>'; houseHtml += '<div class="qi-row"><span class="qi-label">楼层</span><span class="qi-val">' + (state.floor || '?') + '楼 ' + (elevatorNames[state.hasElevator] || '') + '</span></div>'; houseHtml += '<div class="qi-row"><img src="assets/icon-construction.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt=""><span class="qi-label">墙面</span><span class="qi-val">' + (wallNames[state.wallCondition] || '?') + '</span></div>'; houseHtml += '<div class="qi-row"><img src="assets/icon-construction.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt=""><span class="qi-label">地板</span><span class="qi-val">' + (floorNames[state.floorOption] || '?') + '</span></div>'; document.getElementById('qiHouse').innerHTML = houseHtml; // 重新计算以获取费用明�? syncInputs(); var area = state.area || 60; var pkg = state.package; var feeItems = []; var total = 0; var extraArea = Math.max(0, area - PRICE.baseArea); var basePrice = pkg === 'pro' ? PRICE.pro : (pkg === 'premium' ? PRICE.premium : PRICE.basic); feeItems.push({ name: '套餐基础价', sub: (pkg === 'pro' ? '实用家进阶版（90m²内）' : (pkg === 'premium' ? '舒适家（90m²内）' : '实用家基础版（90m²内）')), amount: basePrice }); total += basePrice; if (extraArea > 0) { var extraRate = pkg === 'pro' ? PRICE.extraAreaPro : (pkg === 'premium' ? PRICE.extraAreaPremium : PRICE.extraAreaBasic); var extraFee = extraArea * extraRate; feeItems.push({ name: '超面积附加费', sub: '超出' + PRICE.baseArea + 'm²，共' + extraArea.toFixed(1) + 'm² × ' + extraRate + '元/m²', amount: extraFee }); total += extraFee; } if (area < PRICE.smallAreaThreshold) { var discount = pkg === 'pro' ? PRICE.smallAreaPro : (pkg === 'premium' ? PRICE.smallAreaPremium : PRICE.smallAreaBasic); var discountName = pkg === 'pro' ? '实用家进阶版' : (pkg === 'premium' ? '舒适家' : '实用家基础版'); feeItems.push({ name: '小面积优惠', sub: '建筑面积' + PRICE.smallAreaThreshold + '㎡以下优惠（' + discountName + '）', amount: -discount }); total -= discount; } var ly = parseLayout(state.roomLayout); var extraRoom = Math.max(0, ly.rooms - 3); var extraHall = Math.max(0, ly.halls - 2); if (extraRoom > 0) { var perRoom = pkg === 'basic' ? 1500 : (pkg === 'pro' ? 2000 : 2500); feeItems.push({ name: '卧室超出附加费', sub: '超出3室，' + extraRoom + '室 × ' + perRoom + '元/室', amount: extraRoom * perRoom }); total += extraRoom * perRoom; } if (extraHall > 0) { feeItems.push({ name: '客厅超出附加费', sub: '超出2厅，' + extraHall + '厅', amount: 0 }); } var moveFee = calcMoveFee(area); var actualFloor = Math.min(state.floor || 1, PRICE.floorMax); var baseFee = area <= 90 ? PRICE.floorBaseFee : (PRICE.floorBaseFee + (area - 90) * PRICE.floorExtraPerSqm); if (moveFee > 0) { feeItems.push({ name: '楼层搬运费', sub: '无电梯，' + actualFloor + '层 × ' + baseFee + '元/层', amount: moveFee }); total += moveFee; } else { feeItems.push({ name: '楼层搬运费', sub: '有电梯，免搬运费', amount: 0 }); } var wallFee = calcWallFee(area); if (wallFee > 0) { var wallLabels = { standard: '标准墙面处理', severe: '重度墙面处理（铲到砖层，重新粉墙）' }; feeItems.push({ name: '墙面处理费', sub: (wallLabels[state.wallCondition] || ''), amount: wallFee }); total += wallFee; } else { feeItems.push({ name: '墙面处理费', sub: '墙面状态良好，无需额外处理', amount: 0 }); } var floorFee = calcFloorFee(area); var floorLbls = { standard: '标配地板', upgrade: '升级地板', tile: '地砖' }; var floorName = floorLbls[state.floorOption] || ''; if (floorFee > 0) { feeItems.push({ name: '地板铺设费', sub: floorName + '（铺设面积约' + (area * 0.65).toFixed(1) + 'm²）', amount: floorFee }); total += floorFee; } else { feeItems.push({ name: '地板铺设费', sub: floorName + '（套餐内含，不额外计费）', amount: 0 }); } var baseBaths = pkg === 'premium' ? PRICE.baseBathPremium : (pkg === 'pro' ? PRICE.baseBathPro : PRICE.baseBathBasic); var extraBaths = Math.max(0, ly.baths - baseBaths); var bathFee = extraBaths * (pkg === 'pro' ? PRICE.extraBathPro : (pkg === 'premium' ? PRICE.extraBathPremium : PRICE.extraBathBasic)); if (bathFee > 0) { feeItems.push({ name: '卫生间超出附加费', sub: '套餐含' + baseBaths + '卫，超出' + extraBaths + '卫', amount: bathFee }); total += bathFee; } else { feeItems.push({ name: '卫生间费用', sub: '含' + Math.min(ly.baths, baseBaths) + '卫（套餐内含）', amount: 0 }); } // 填充费用明细 var feesHtml = ''; feeItems.forEach(function(item) { var amtClass = item.amount === 0 ? 'qi-fee-amt zero' : 'qi-fee-amt'; var sign = item.amount < 0 ? '-' : (item.amount === 0 ? '' : '+'); feesHtml += '<div class="qi-fee-row">' + '<div><div class="qi-fee-name">' + item.name + '</div><div class="qi-fee-sub">' + item.sub + '</div></div>' + '<div class="' + amtClass + '">' + sign + ' ' + formatMoney(Math.abs(item.amount)) + ' 元</div>' + '</div>'; }); document.getElementById('qiFees').innerHTML = feesHtml; document.getElementById('qiTotal').textContent = formatMoney(total) + ' 元'; // 使用 html2canvas 生成图片 if (typeof html2canvas !== 'undefined') { html2canvas(template, { scale: 2, useCORS: true, backgroundColor: '#ffffff', width: 375, height: template.scrollHeight }).then(function(canvas) { var imgData = canvas.toDataURL('image/png'); var previewImg = document.getElementById('quotePreviewImg'); if (previewImg) previewImg.src = imgData; var modal = document.getElementById('imgModal'); if (modal) modal.classList.add('active'); }).catch(function(err) { console.error('生成图片失败:', err); alert('图片生成失败，请截图保存报价内容'); }); } else { alert('图片库加载中，请稍后重试或截图保存'); } } function showAuthMask(show) { var mask = document.getElementById('authMask'); var logout = document.getElementById('authLogout'); if (mask) mask.classList.toggle('hidden', !show); if (logout) logout.classList.toggle('visible', !show); } // ========== 全局状�?========== // ========== Supabase Edge Function 接口 ========== const SUPABASE_URL = "https://dymvbngyolumyizeswme.supabase.co"; const SUPABASE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImR5bXZibnF5b2x1bXlpemVzd21lIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODA4Mzc2MTgsImV4cCI6MjA5NjQxMzYxOH0.kcKBV7eCwkD8sPPiuoVKTBF5Ef_vjEHGBkAaMJC7Z5Y"; const EDGE_FUNCTION_URL = SUPABASE_URL + "/functions/v1/zzb-api"; // 保存报价到云端（通过 Edge Function，异步，不阻塞UI） function saveQuoteToCloud(sub) { fetch(EDGE_FUNCTION_URL, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + SUPABASE_KEY }, body: JSON.stringify({ action: 'saveQuote', data: { quote_id: sub.id, customer_name: sub.customerName || "", customer_phone: sub.customerPhone || "", community_name: sub.communityName || "", building_address: sub.buildingAddress || "", area: sub.area || 0, room_layout: sub.roomLayout || "", package: sub.package || "", floor_option: sub.floorOption || "", total_price: sub.totalPrice || "0", raw_data: sub } }) }).then(function(r) { if (!r.ok) { console.error("[API] 写入失败, HTTP " + r.status); return; } return r.json(); }).then(function(j) { if (j && j.error) console.error("[API] 写入失败:", j.error); else console.log("[API] 已同�?", sub.id); }).catch(function(e) { console.error("[API] 网络错误:", e); }); } var state = { currentStep: 1, maxStep: 4, // �?步：客户信息 + 房屋信息 customerName: '', customerPhone: '', communityName: '', buildingAddress: '', area: null, roomLayout: null, floor: null, hasElevator: null, wallCondition: null, bathCount: null, // �?步：套餐选择 package: null, // �?步：额外选项 floorOption: null }; // ========== 定价常量 ========== var PRICE = { basic: 46800, pro: 68800, premium: 89800, baseArea: 90, extraAreaBasic: 400, extraAreaPro: 560, extraAreaPremium: 700, baseBathBasic: 1, baseBathPro: 1, baseBathPremium: 2, extraBathBasic: 8000, extraBathPro: 10000, extraBathPremium: 12000, floorMax: 8, floorBaseFee: 1000, floorExtraPerSqm: 10, smallAreaThreshold: 60, smallAreaBasic: 2500, smallAreaPro: 3000, smallAreaPremium: 3500, wallStandard: 1500, wallSevere: 4000, wallStandardExtra: 38, wallSevereExtra: 68, houseFactor: { studio: 0.85, two: 1.0, three: 1.1, four_plus: 1.2 } }; function parseLayout(str) { if (!str) return {rooms:3, halls:2, kitchens:1, baths:1}; var parts = str.split('-'); return { rooms: parseInt(parts[0]) || 3, halls: parseInt(parts[1]) || 2, kitchens: parseInt(parts[2]) || 1, baths: parseInt(parts[3]) || 1 }; } function _(id) { return document.getElementById(id); } window.goStep = function (n) { if (n < 1 || n > state.maxStep) return; // 先执行离开动画 var pages = document.querySelectorAll('.page'); var currentPage = document.querySelector('.page.active') || pages[state.currentStep - 1]; if (currentPage) { currentPage.classList.add('leaving'); setTimeout(function() { currentPage.classList.remove('leaving'); currentPage.classList.remove('active'); state.currentStep = n; renderUI(); // 新页面进入 setTimeout(function() { var newPage = pages[state.currentStep - 1]; if (newPage) newPage.classList.add('active'); }, 30); }, 180); return; } state.currentStep = n; renderUI(); }; window.nextStep = function () { syncInputs(); var err = validateStep(state.currentStep); if (err) { alert(err); return; } if (state.currentStep < state.maxStep) { if (state.currentStep + 1 === state.maxStep) { calculateQuote(); } goStep(state.currentStep + 1); } }; window.prevStep = function () { if (state.currentStep > 1) { goStep(state.currentStep - 1); } }; function validateStep(step) { if (step === 1) { var name = _('customerName').value.trim(); var phone = _('customerPhone').value.trim(); var community = _('communityName').value.trim(); if (!name) return '请输入客户姓名'; if (!phone) return '请输入联系电话'; if (!/^1[3-9]\d{9}$/.test(phone)) return '请输入正确的手机号码（11位数字）'; if (!community) return '请输入小区名称'; if (!state.area || state.area < 20 || state.area > 500) return '请输入有效的建筑面积（20-500平米）'; if (!state.roomLayout) return '请选择户型结构'; if (!state.hasElevator) return '请选择入户方式（有无电梯）'; if (state.hasElevator === 'no' && (!state.floor || state.floor < 1)) return '请输入所在楼层（无电梯需计费）'; if (!state.wallCondition) return '请选择墙面现状'; return null; } if (step === 2) { if (!state.package) return '请先选择一个装修套餐'; return null; } if (step === 3) { if (!state.floorOption) return '请选择地板选项'; return null; } return null; } window.validateArea = function () { var v = parseFloat(_('area').value); if (!isNaN(v) && v > 0) state.area = v; else state.area = null; }; window.selectPackage = function (pkg) { state.package = pkg; state.floorOption = null; checkAuth(); renderUI(); }; window.selectOption = function (btn, group) { var parent = btn.parentElement; qsa('.option-btn', parent).forEach(function (b) { b.classList.remove('selected'); }); btn.classList.add('selected'); var val = btn.getAttribute('data-val'); state[group] = val; // 墙面现状描述切换 if (group === 'wallCondition') { ['Standard','Severe'].forEach(function(k){ var el = _('wallDesc'+k); if (el) el.classList.remove('active'); }); var map = {standard:'Standard',severe:'Severe'}; var el2 = _('wallDesc'+map[val]); if (el2) el2.classList.add('active'); } // 入户方式切换时显�?隐藏楼层 if (group === 'hasElevator') { var floorRow = _('floorRow'); if (floorRow) { floorRow.style.display = (val === 'yes') ? 'none' : ''; } if (val === 'yes') state.floor = null; } }; window.onRoomLayoutChange = function () { var sel = _('roomLayout'); if (sel) state.roomLayout = sel.value; var layout = parseLayout(state.roomLayout); state.bathCount = layout.baths; updateLayoutHint(); }; function updateLayoutHint() { var hint = _('layoutHint'); if (!hint) return; var l = parseLayout(state.roomLayout); if (!state.roomLayout) { hint.textContent = '请选择户型结构'; return; } hint.textContent = '已选：' + l.rooms + '室' + l.halls + '厅' + l.kitchens + '厨' + l.baths + '卫'; } function renderFloorOptions() { var container = _('floorOptionsContainer'); var noteEl = _('floorBrandNote'); if (!container) return; container.innerHTML = ''; if (!state.package) return; var options = []; if (state.package === 'basic') { options = [ { val: 'standard', label: '标配地板', note: '12mm环保强化地板（套餐内含，不额外计费）' }, { val: 'upgrade', label: '升级地板', note: '升级新三层实木地板（+48.6元/㎡）' }, { val: 'tile', label: '地砖', note: '800×800地砖通铺，含铺设（120元/㎡）' } ]; } else if (state.package === 'pro') { options = [ { val: 'standard', label: '标配地板', note: '新三层实木地板，品牌：欧派花木匠/莫干山（套餐内含，不额外计费）' }, { val: 'tile', label: '地砖', note: '全屋800×800地砖通铺，含铺设（套餐内含，不额外计费）' } ]; } else if (state.package === 'premium') { options = [ { val: 'standard', label: '标配地板', note: '12mm环保多层实木三层，品牌：欧派花木匠/莫干山（套餐内含，不额外计费）' }, { val: 'tile', label: '地砖', note: '800×800地砖，含铺设（套餐内含，不额外计费）' } ]; } options.forEach(function(opt) { var btn = document.createElement('div'); btn.className = 'option-btn'; btn.setAttribute('data-val', opt.val); btn.textContent = opt.label; if (state.floorOption === opt.val) btn.classList.add('selected'); btn.addEventListener('click', function() { container.querySelectorAll('.option-btn').forEach(function(b) { b.classList.remove('selected'); }); btn.classList.add('selected'); state.floorOption = opt.val; noteEl.textContent = opt.note; }); container.appendChild(btn); }); if (state.floorOption) { var matched = options.filter(function(o) { return o.val === state.floorOption; }); if (matched.length > 0) noteEl.textContent = matched[0].note; } else { noteEl.textContent = ''; } } function syncInputs() { var areaEl = _('area'); var floorEl = _('floor'); var layoutSel = _('roomLayout'); if (areaEl && areaEl.value) { var a = parseFloat(areaEl.value); if (!isNaN(a) && a >= 20 && a <= 500) state.area = a; } if (floorEl && floorEl.value) { var f = parseInt(floorEl.value, 10); if (!isNaN(f) && f >= 1) state.floor = f; } if (layoutSel && layoutSel.value) { state.roomLayout = layoutSel.value; var layout = parseLayout(layoutSel.value); state.bathCount = layout.baths; } state.customerName = _('customerName').value.trim(); state.customerPhone = _('customerPhone').value.trim(); state.communityName = _('communityName').value.trim(); state.buildingAddress = _('buildingAddress').value.trim(); } function calculateQuote() { syncInputs(); var area = state.area || 60; var pkg = state.package; var feeItems = []; var total = 0; var extraArea = Math.max(0, area - PRICE.baseArea); var basePrice = pkg === 'pro' ? PRICE.pro : (pkg === 'premium' ? PRICE.premium : PRICE.basic); feeItems.push({ name: '套餐基础价', sub: (pkg === 'pro' ? '实用家进阶版（90m²内）' : (pkg === 'premium' ? '舒适家（90m²内）' : '实用家基础版（90m²内）')), amount: basePrice }); total += basePrice; if (extraArea > 0) { var extraRate = pkg === 'pro' ? PRICE.extraAreaPro : (pkg === 'premium' ? PRICE.extraAreaPremium : PRICE.extraAreaBasic); var extraFee = extraArea * extraRate; feeItems.push({ name: '超面积附加费', sub: '超出' + PRICE.baseArea + 'm²，共' + extraArea.toFixed(1) + 'm² × ' + extraRate + '元/m²', amount: extraFee }); total += extraFee; } if (area < PRICE.smallAreaThreshold) { var discount = pkg === 'pro' ? PRICE.smallAreaPro : (pkg === 'premium' ? PRICE.smallAreaPremium : PRICE.smallAreaBasic); var discountName = pkg === 'pro' ? '实用家进阶版' : (pkg === 'premium' ? '舒适家' : '实用家基础版'); feeItems.push({ name: '小面积优惠', sub: '建筑面积' + PRICE.smallAreaThreshold + '㎡以下优惠（' + discountName + '）', amount: -discount }); total -= discount; } var layout = parseLayout(state.roomLayout); var extraRoom = Math.max(0, layout.rooms - 3); var extraHall = Math.max(0, layout.halls - 2); var roomFee = 0; if (extraRoom > 0) { var perRoom = pkg === 'basic' ? 1500 : (pkg === 'pro' ? 2000 : 2500); roomFee = extraRoom * perRoom; feeItems.push({ name: '卧室超出附加费', sub: '超出3室，' + extraRoom + '室 × ' + perRoom + '元/室', amount: extraRoom * perRoom }); total += roomFee; } if (extraHall > 0) { feeItems.push({ name: '客厅超出附加费', sub: '超出2厅，' + extraHall + '厅', amount: 0 }); } var moveFee = calcMoveFee(area); var actualFloor = Math.min(state.floor || 1, PRICE.floorMax); var baseFee = area <= 90 ? PRICE.floorBaseFee : (PRICE.floorBaseFee + (area - 90) * PRICE.floorExtraPerSqm); if (moveFee > 0) { feeItems.push({ name: '楼层搬运费', sub: '无电梯，' + actualFloor + '层 × ' + baseFee + '元/层（单楼层基础费）', amount: moveFee }); total += moveFee; } else { feeItems.push({ name: '楼层搬运费', sub: '有电梯，免搬运费', amount: 0 }); } var wallFee = calcWallFee(area); if (wallFee > 0) { var wallLabels = { standard: '标准墙面处理', severe: '重度墙面处理（铲到砖层，重新粉墙）' }; feeItems.push({ name: '墙面处理费', sub: (wallLabels[state.wallCondition] || '无需处理'), amount: wallFee }); total += wallFee; } else { feeItems.push({ name: '墙面处理费', sub: '墙面状态良好，无需额外处理', amount: 0 }); } var floorFee = calcFloorFee(area); var floorLabels = { standard: '标配地板', upgrade: '升级地板', tile: '地砖' }; var floorName = floorLabels[state.floorOption] || ''; if (floorFee > 0) { feeItems.push({ name: '地板铺设费', sub: floorName + '（铺设面积约' + (area * 0.65).toFixed(1) + 'm²）', amount: floorFee }); total += floorFee; } else { feeItems.push({ name: '地板铺设费', sub: floorName + '（套餐内含，不额外计费）', amount: 0 }); } var baseBaths = pkg === 'premium' ? PRICE.baseBathPremium : (pkg === 'pro' ? PRICE.baseBathPro : PRICE.baseBathBasic); var extraBaths = Math.max(0, layout.baths - baseBaths); var bathFee = extraBaths * (pkg === 'pro' ? PRICE.extraBathPro : (pkg === 'premium' ? PRICE.extraBathPremium : PRICE.extraBathBasic)); if (bathFee > 0) { feeItems.push({ name: '卫生间超出附加费', sub: '套餐含' + baseBaths + '卫，超出' + extraBaths + '卫', amount: bathFee }); total += bathFee; } else { feeItems.push({ name: '卫生间费用', sub: '含' + Math.min(layout.baths, baseBaths) + '卫（套餐内含）', amount: 0 }); } renderQuote(total, feeItems); } function calcMoveFee(area) { var floor = state.floor || 1; var hasElev = state.hasElevator; if (hasElev === 'yes') return 0; if (hasElev === 'no') { var effectiveFloor = Math.min(floor, PRICE.floorMax); var baseFee = area <= 90 ? PRICE.floorBaseFee : (PRICE.floorBaseFee + (area - 90) * PRICE.floorExtraPerSqm); return Math.round(effectiveFloor * baseFee); } return 0; } function calcWallFee(area) { var base = state.wallCondition === 'standard' ? PRICE.wallStandard : PRICE.wallSevere; var extraPerSqm = state.wallCondition === 'standard' ? PRICE.wallStandardExtra : PRICE.wallSevereExtra; var extraArea = Math.max(0, area - 90); return Math.round(base + extraArea * extraPerSqm); } function calcFloorFee(area) { if (!state.floorOption || state.floorOption === 'standard') return 0; var floorArea = area * 0.65; var pkg = state.package; if (pkg === 'basic') { if (state.floorOption === 'upgrade') return Math.round(floorArea * 48.6); if (state.floorOption === 'tile') return Math.round(floorArea * 120); } else if (pkg === 'pro' || pkg === 'premium') { return 0; } return 0; } function formatMoney(amount) { return amount.toLocaleString('zh-CN'); } function renderQuote(total, items) { _('finalPrice').innerHTML = formatMoney(total) + '<small> �?/small>'; _('quoteDesc').textContent = '此报价为初步估算，最终价格以正式合同为准'; // 客户信息 var custHtml = ''; if (state.customerName) custHtml += '<div class="cs-item"><img src="assets/icon-home.png" class="cs-icon" alt=""><span class="cs-label">客户姓名</span><span class="cs-val">' + esc(state.customerName) + '</span></div>'; if (state.customerPhone) custHtml += '<div class="cs-item"><img src="assets/icon-phone.png" class="cs-icon" alt=""><span class="cs-label">联系电话</span><span class="cs-val">' + esc(state.customerPhone) + '</span></div>'; if (state.communityName) custHtml += '<div class="cs-item"><img src="assets/icon-location.png" class="cs-icon" alt=""><span class="cs-label">小区名称</span><span class="cs-val">' + esc(state.communityName) + '</span></div>'; if (state.buildingAddress) custHtml += '<div class="cs-item"><img src="assets/icon-location.png" class="cs-icon" alt=""><span class="cs-label">楼号地址</span><span class="cs-val">' + esc(state.buildingAddress) + '</span></div>'; _('summaryCustomer').innerHTML = custHtml; // 房屋信息 var pkgName = state.package === 'basic' ? '实用家基础版' : (state.package === 'pro' ? '实用家进阶版' : (state.package === 'premium' ? '舒适家' : '未选择')); var layout = parseLayout(state.roomLayout); var wallNames = { standard: '标准', severe: '重度' }; var floorNames = { standard: '标配地板', upgrade: '升级地板', tile: '地砖' }; var elevatorNames = { yes: '有电梯', no: '无电梯' }; var infoHtml = ''; infoHtml += '<div class="cs-item"><img src="assets/icon-renovation.png" class="cs-icon" alt=""><span class="cs-label">套餐</span><span class="cs-val">' + pkgName + '</span></div>'; infoHtml += '<div class="cs-item"><span class="cs-label">面积</span><span class="cs-val">' + ((state.area || '?') + ' m²') + '</span></div>'; infoHtml += '<div class="cs-item"><img src="assets/icon-home.png" class="cs-icon" alt=""><span class="cs-label">户型</span><span class="cs-val">' + (layout.rooms + '室' + layout.halls + '厅' + layout.kitchens + '厨' + layout.baths + '卫') + '</span></div>'; infoHtml += '<div class="cs-item"><span class="cs-label">楼层</span><span class="cs-val">' + ((state.floor || '?') + '楼 ' + (elevatorNames[state.hasElevator] || '')) + '</span></div>'; infoHtml += '<div class="cs-item"><img src="assets/icon-construction.png" class="cs-icon" alt=""><span class="cs-label">墙面</span><span class="cs-val">' + (wallNames[state.wallCondition] || '?') + '</span></div>'; infoHtml += '<div class="cs-item"><img src="assets/icon-construction.png" class="cs-icon" alt=""><span class="cs-label">地板</span><span class="cs-val">' + (floorNames[state.floorOption] || '?') + '</span></div>'; _('summaryInfo').innerHTML = infoHtml; // 费用明细 var detailHtml = ''; items.forEach(function (item) { var amountClass = item.amount === 0 ? 'fee-amount zero' : 'fee-amount'; var sign = item.amount < 0 ? '-' : (item.amount === 0 ? '' : '+'); detailHtml += '<div class="fee-item">' + '<div class="fee-name">' + item.name + '<div class="fee-name-sub">' + item.sub + '</div></div>' + '<div class="' + amountClass + '">' + sign + ' ' + formatMoney(Math.abs(item.amount)) + ' 元</div>' + '</div>'; }); _('feeDetail').innerHTML = detailHtml; _('feeTotal').textContent = formatMoney(total) + ' 元'; } function esc(str) { if (!str) return ''; return String(str).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); } function renderUI() { var step = state.currentStep; for (var i = 1; i <= state.maxStep; i++) { var page = _('page' + i); if (page) page.classList.toggle('active', i === step); } qsa('.step').forEach(function (el) { var s = parseInt(el.getAttribute('data-step'), 10); el.classList.remove('active', 'done'); if (s === step) el.classList.add('active'); if (s < step) el.classList.add('done'); }); var btnPrev = _('btnPrev'); var btnNext = _('btnNext'); var btnRecalc = _('btnRecalc'); if (step === 1) { btnPrev.style.display = 'none'; btnNext.style.display = ''; btnNext.textContent = '下一步'; btnRecalc.style.display = 'none'; } else if (step === state.maxStep) { btnPrev.style.display = ''; btnNext.style.display = 'none'; btnRecalc.style.display = ''; btnRecalc.textContent = '重新计算'; } else { btnPrev.style.display = ''; btnNext.style.display = ''; btnNext.textContent = '下一步'; btnRecalc.style.display = 'none'; } if (step === 1) { syncInputs(); if (state.area && _('area')) _('area').value = state.area; if (state.floor && _('floor')) _('floor').value = state.floor; var layoutSel = _('roomLayout'); if (layoutSel && state.roomLayout) { layoutSel.value = state.roomLayout; updateLayoutHint(); } syncOptionsUI('hasElevator', state.hasElevator); syncOptionsUI('wallCondition', state.wallCondition); var floorRow = _('floorRow'); if (floorRow) { floorRow.style.display = (state.hasElevator === 'yes') ? 'none' : ''; } // 恢复墙面描述 var wallMap = {standard:'Standard', severe:'Severe'}; if (state.wallCondition) { ['Standard','Severe'].forEach(function(k){ var el = _('wallDesc'+k); if (el) el.classList.remove('active'); }); var el2 = _('wallDesc'+wallMap[state.wallCondition]); if (el2) el2.classList.add('active'); } } if (step === 2) { qsa('.pkg-card').forEach(function (el) { el.classList.toggle('selected', el.getAttribute('data-pkg') === state.package); }); } if (step === 3) { renderFloorOptions(); } if (step === state.maxStep) { calculateQuote(); } } function qsa(sel, ctx) { return (ctx || document).querySelectorAll(sel); } function syncOptionsUI(group, val) { var groups = qsa('.options-group'); groups.forEach(function (grp) { var btns = qsa('.option-btn', grp); if (btns.length === 0) return; var sampleVal = btns[0].getAttribute('data-val'); if (sampleVal === null) return; var field = detectGroupField(sampleVal); if (field === group) { btns.forEach(function (b) { var bVal = b.getAttribute('data-val'); b.classList.toggle('selected', String(bVal) === String(val)); }); } }); } function detectGroupField(sampleVal) { if (sampleVal === 'yes' || sampleVal === 'no') return 'hasElevator'; if (sampleVal === 'standard' || sampleVal === 'severe') return 'wallCondition'; if (sampleVal === 'standard' || sampleVal === 'upgrade' || sampleVal === 'tile') return 'floorOption'; return null; } // 输入框焦点图标联动 document.querySelectorAll('.form-input-wrap .form-input').forEach(function(input) { input.addEventListener('focus', function() { var icon = this.parentElement.querySelector('.input-icon'); if (icon) icon.classList.add('focused'); }); input.addEventListener('blur', function() { var icon = this.parentElement.querySelector('.input-icon'); if (icon) icon.classList.remove('focused'); }); }); checkAuth(); renderUI(); })(); </script>  <script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.20/libs/cn/index.js"></script> <script src="/assets/coze-chat.js?v=1"></script> </body> </html>