index.html · 约 6403 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<title>雅间预约 · 饭馆雅间预约系统</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <div class="topbar">🍜 雅间预约</div>
12
13 <!-- 首页 -->
14 <section class="view active" id="v-home">
15 <div class="hero">
16 <h1>江南食府 · 雅间预约</h1>
17 <p>精致包间 · 私密宴请 · 在线预订免排队</p>
18 <div class="stat">
19 <div><span>4</span><small>雅间数量</small></div>
20 <div><span>2-16</span><small>可容纳人数</small></div>
21 <div><span>24h</span><small>在线预订</small></div>
22 </div>
23 </div>
24 <div class="section-title">精选雅间 <small>点击查看详情</small></div>
25 <div id="room-list"></div>
26 </section>
27
28 <!-- 雅间详情 -->
29 <section class="view" id="v-detail">
30 <div class="room" style="box-shadow:none;border:none;margin:0">
31 <div class="cover" id="d-cover"></div>
32 <div class="body">
33 <div class="cap" id="d-cap"></div>
34 <div class="desc" id="d-desc"></div>
35 <div class="tags" id="d-tags"></div>
36 <div class="row-between">
37 <div class="price">最低消费 <span id="d-min"></span></div>
38 </div>
39 <div style="height:14px"></div>
40 <button class="btn btn-primary" id="book-room">立即预约</button>
41 </div>
42 </div>
43 <div class="section-title">本店招牌菜</div>
44 <div id="detail-menu"></div>
45 </section>
46
47 <!-- 预约表单 -->
48 <section class="view" id="v-book">
49 <div class="card" style="margin-bottom:16px">
50 <strong id="b-roomname"></strong>
51 <div style="color:#9a3412;font-size:13px;margin-top:4px">请填写以下信息完成预约</div>
52 </div>
53 <input type="hidden" id="b-hidden-room">
54 <div class="field">
55 <label>预约日期</label>
56 <input type="date" id="b-date">
57 </div>
58 <div class="field">
59 <label>用餐时段</label>
60 <div class="chips seg-time">
61 <div class="chip on">午市 11:00</div>
62 <div class="chip">晚市 17:00</div>
63 <div class="chip">晚市 19:30</div>
64 </div>
65 <input type="hidden" id="b-time" value="午市 11:00">
66 </div>
67 <div class="field">
68 <label>用餐人数</label>
69 <div class="chips seg-people">
70 <div class="chip" data-n="2">2人</div>
71 <div class="chip on" data-n="4">4人</div>
72 <div class="chip" data-n="6">6人</div>
73 <div class="chip" data-n="10">10人</div>
74 <div class="chip" data-n="16">16人</div>
75 </div>
76 <input type="hidden" id="b-people" value="4">
77 </div>
78 <div class="field">
79 <label>联系人姓名</label>
80 <input type="text" id="b-name" placeholder="请输入您的称呼">
81 </div>
82 <div class="field">
83 <label>手机号</label>
84 <input type="tel" id="b-phone" placeholder="用于接收入座通知" maxlength="11">
85 </div>
86 <button class="btn btn-primary" id="book-submit">提交预约</button>
87 </section>
88
89 <!-- 预约确认 -->
90 <section class="view" id="v-confirm">
91 <div class="success">
92 <div class="check">✓</div>
93 <h2>预约成功！</h2>
94 <p style="color:#9a3412">我们已收到您的预约，到店请报预约号</p>
95 </div>
96 <div class="card">
97 <div class="info-line"><span>预约号</span><span id="c-no"></span></div>
98 <div class="info-line"><span>雅间</span><span id="c-room"></span></div>
99 <div class="info-line"><span>日期时段</span><span id="c-date"></span></div>
100 <div class="info-line"><span>人数</span><span id="c-people"></span></div>
101 <div class="info-line"><span>联系人</span><span id="c-name"></span></div>
102 <div class="info-line"><span>电话</span><span id="c-phone"></span></div>
103 </div>
104 <button class="btn btn-ghost" onclick="location.hash='mine'">查看我的预约</button>
105 </section>
106
107 <!-- 我的预约 -->
108 <section class="view" id="v-mine">
109 <div class="section-title">我的预约</div>
110 <div id="mine-list"></div>
111 </section>
112
113 <!-- 菜单 -->
114 <section class="view" id="v-menu">
115 <div class="section-title">招牌菜单</div>
116 <div class="card" id="menu-all"></div>
117 </section>
118
119 <nav class="tabbar">
120 <a href="#home" data-tab="home" class="on"><span class="ic">🏠</span>首页</a>
121 <a href="#book" data-tab="book"><span class="ic">📅</span>预约</a>
122 <a href="#mine" data-tab="mine"><span class="ic">📋</span>我的</a>
123 <a href="#menu" data-tab="menu"><span class="ic">🍽️</span>菜单</a>
124 </nav>
125 <div class="toast" id="toast"></div>
126</div>
127<script src="jquery.min.js"></script>
128<script>
129var ROOMS = [{"id": "r1", "name": "牡丹厅", "cap": "10-16人", "min": 1888, "tags": ["大包间", "独立KTV", "麻将桌"], "desc": "典雅大包，适合商务宴请与家庭聚会，含独立KTV与棋牌区。", "grad": "linear-gradient(135deg,#f97316,#ef4444)"}, {"id": "r2", "name": "兰花厅", "cap": "6-10人", "min": 988, "tags": ["中包间", "靠窗", "沙发卡座"], "desc": "明亮中包，临窗观景，适合朋友小聚与公司团建。", "grad": "linear-gradient(135deg,#fb923c,#f59e0b)"}, {"id": "r3", "name": "竹影厅", "cap": "4-6人", "min": 588, "tags": ["小包间", "安静", "茶台"], "desc": "清幽小包，配茶台与屏风，适合私密洽谈与二人世界。", "grad": "linear-gradient(135deg,#fbbf24,#f97316)"}, {"id": "r4", "name": "梅香厅", "cap": "2-4人", "min": 388, "tags": ["迷你包", "情侣座", "投影"], "desc": "温馨迷你包，投影观影，适合情侣约会与小家庭。", "grad": "linear-gradient(135deg,#f59e0b,#fb7185)"}];
130var MENU = [["招牌红烧肉", "¥68", "肥而不腻，入口即化", "🍖"], ["清蒸鲈鱼", "¥88", "鲜活鲈鱼，原汁原味", "🐟"], ["宫保鸡丁", "¥42", "麻辣鲜香，下饭神器", "🍗"], ["蒜蓉粉丝虾", "¥78", "鲜虾配蒜蓉，鲜甜爽口", "🦐"], ["上汤娃娃菜", "¥32", "清爽解腻，老少皆宜", "🥬"], ["杨枝甘露", "¥28", "港式甜品，芒果西米", "🥭"]];
131</script>
132<script src="app.js"></script>
133</body>
134</html>
135