book.html · 约 2469 字符
1<!DOCTYPE html><html lang="zh-CN"><head>
2<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
3<title>预订下单 - 小草酒店民宿</title><link rel="stylesheet" href="style.css">
4</head><body>
5<div class="header"><span class="back" onclick="history.back()">‹</span><h1>预订下单</h1><span class="right"></span></div>
6<div class="card" style="display:flex;gap:12px;align-items:center">
7 <div style="font-size:36px" id="b-icon">🏠</div>
8 <div style="flex:1">
9 <div style="font-weight:600;font-size:15px" id="b-name"></div>
10 <div style="font-size:12px;color:#999;margin-top:2px" id="b-type">山景大床房</div>
11 </div>
12 <b style="color:var(--primary);font-size:16px" id="b-price">¥328</b>
13</div>
14<div class="book-card">
15 <label>入住日期</label>
16 <div class="book-row">
17 <input id="b-in" value="2026-08-15">
18 <input id="b-out" value="2026-08-16">
19 </div>
20 <label>入住人数</label>
21 <select id="b-guests">
22 <option>1人</option><option selected>2人</option><option>3人</option><option>4人</option><option>5人及以上</option>
23 </select>
24 <label>入住人姓名</label>
25 <input id="b-name-input" placeholder="请输入入住人姓名">
26 <label>手机号码</label>
27 <input id="b-phone" type="tel" placeholder="用于接收预订确认">
28 <label>特殊要求（选填）</label>
29 <textarea id="b-remark" rows="2" placeholder="如：需要婴儿床、靠窗房、无烟房..."></textarea>
30</div>
31<div class="section-title">🎫 优惠券</div>
32<div id="coupon-list"></div>
33<div class="card">
34 <div class="sum-row"><span>房费（1晚 × ¥<span id="s-price"></span>）</span><b id="s-sub">¥328</b></div>
35 <div class="sum-row"><span>清洁费</span><b>¥20</b></div>
36 <div class="sum-row"><span>优惠券</span><b style="color:var(--green)" id="s-coupon">-¥0</b></div>
37 <div class="sum-row" style="border-top:1px solid #f5f2ec;margin-top:6px;padding-top:10px"><span style="font-weight:700">应付合计</span><b style="font-size:20px" id="s-total">¥348</b></div>
38</div>
39<div style="height:80px"></div>
40<div class="tabbar" style="border-top:1px solid #eee;background:#fff">
41 <a href="javascript:void(0)" style="color:var(--primary);font-size:13px" onclick="doBook()">确认支付</a>
42</div>
43<script src="data.js"></script>
44<script src="app.js"></script>
45<script>renderBook();</script>
46</body></html>