app.js · 约 5100 字符
1
2$(function(){
3 // 渲染首页雅间列表
4 function renderRooms(){
5 $('#room-list').html(ROOMS.map(function(r){
6 return '<div class="room" data-id="'+r.id+'">'
7 +'<div class="cover" style="background:'+r.grad+'">'+r.name+'</div>'
8 +'<div class="body"><div class="cap">'+r.cap+' · 最低消费 ¥'+r.min+'</div>'
9 +'<div class="desc">'+r.desc+'</div>'
10 +'<div class="tags">'+r.tags.map(function(t){return '<span class="tag">'+t+'</span>';}).join('')+'</div>'
11 +'<div class="row-between"><div class="price">¥'+r.min+' <small>起</small></div><span style="color:#ea580c;font-weight:700;font-size:13px">查看详情 ›</span></div>'
12 +'</div></div>';
13 }).join(''));
14 }
15 // 渲染菜单
16 function renderMenu(){
17 var html = MENU.map(function(m){
18 return '<div class="order-item"><div class="pic">'+m[3]+'</div>'
19 +'<div class="info"><strong>'+m[0]+'</strong><span>'+m[2]+'</span></div>'
20 +'<div class="p">'+m[1]+'</div></div>';
21 }).join('');
22 $('#menu-all').html(html);
23 $('#detail-menu').html(MENU.slice(0,3).map(function(m){
24 return '<div class="order-item"><div class="pic">'+m[3]+'</div>'
25 +'<div class="info"><strong>'+m[0]+'</strong><span>'+m[2]+'</span></div>'
26 +'<div class="p">'+m[1]+'</div></div>';
27 }).join(''));
28 }
29 function go(hash){ location.hash = hash; }
30 function route(){
31 var h = location.hash.replace('#','') || 'home';
32 $('.view').removeClass('active');
33 $('#v-'+h).addClass('active');
34 $('.tabbar a').removeClass('on');
35 $('.tabbar a[data-tab="'+h+'"]').addClass('on');
36 if(h==='mine') renderMine();
37 window.scrollTo(0,0);
38 }
39 $(window).on('hashchange', route);
40 renderRooms();
41 renderMenu();
42
43 // 雅间列表点击
44 $(document).on('click','.room', function(){
45 var id = $(this).data('id');
46 showDetail(id);
47 });
48
49 function showDetail(id){
50 var r = ROOMS.find(function(x){return x.id===id;});
51 if(!r) return;
52 $('#d-name').text(r.name);
53 $('#d-cap').text(r.cap+' · 最低消费 ¥'+r.min);
54 $('#d-desc').text(r.desc);
55 $('#d-cover').css('background', r.grad).text(r.name);
56 $('#d-tags').html(r.tags.map(function(t){return '<span class="tag">'+t+'</span>';}).join(''));
57 $('#d-min').text('¥'+r.min);
58 $('#book-room').data('room', r.name);
59 go('detail');
60 }
61
62 // 预约表单
63 $('#book-room').on('click', function(){
64 var name = $(this).data('room') || '牡丹厅';
65 $('#b-roomname').text(name);
66 $('#b-hidden-room').val(name);
67 go('book');
68 });
69
70 // 时段/人数 选择
71 $('.seg-time .chip').on('click', function(){
72 $('.seg-time .chip').removeClass('on'); $(this).addClass('on');
73 $('#b-time').val($(this).text());
74 });
75 $('.seg-people .chip').on('click', function(){
76 $('.seg-people .chip').removeClass('on'); $(this).addClass('on');
77 $('#b-people').val($(this).data('n'));
78 });
79
80 // 提交预约
81 $('#book-submit').on('click', function(){
82 var room = $('#b-hidden-room').val();
83 var date = $('#b-date').val();
84 var time = $('#b-time').val();
85 var people = $('#b-people').val();
86 var name = $('#b-name').val().trim();
87 var phone = $('#b-phone').val().trim();
88 if(!date||!name||!phone){ toast('请填写完整预约信息'); return; }
89 if(!/^1\d{10}$/.test(phone)){ toast('手机号格式不正确'); return; }
90 var order = {no:'YY'+Date.now().toString().slice(-8), room:room, date:date, time:time, people:people, name:name, phone:phone, at:new Date().toLocaleString('zh-CN')};
91 var list = JSON.parse(localStorage.getItem('yajian_orders')||'[]');
92 list.unshift(order);
93 localStorage.setItem('yajian_orders', JSON.stringify(list));
94 $('#c-no').text(order.no);
95 $('#c-room').text(room);
96 $('#c-date').text(date+' '+time);
97 $('#c-people').text(people+' 人');
98 $('#c-name').text(name);
99 $('#c-phone').text(phone);
100 go('confirm');
101 });
102
103 function renderMine(){
104 var list = JSON.parse(localStorage.getItem('yajian_orders')||'[]');
105 var box = $('#mine-list');
106 if(list.length===0){ box.html('<div class="empty">还没有预约记录<br>去首页挑选雅间吧～</div>'); return; }
107 box.html(list.map(function(o){
108 return '<div class="card"><div class="hd"><strong>'+o.room+'</strong><span class="tag">'+o.no+'</span></div>'
109 +'<div class="info-line"><span>日期</span><span>'+o.date+' '+o.time+'</span></div>'
110 +'<div class="info-line"><span>人数</span><span>'+o.people+' 人</span></div>'
111 +'<div class="info-line"><span>联系人</span><span>'+o.name+'</span></div>'
112 +'<div class="info-line"><span>电话</span><span>'+o.phone+'</span></div></div>';
113 }).join(''));
114 }
115
116 function toast(msg){ var t=$('#toast'); t.text(msg).show(); setTimeout(function(){t.hide();},1800); }
117
118 // 预填默认日期为明天
119 var tmr = new Date(); tmr.setDate(tmr.getDate()+1);
120 $('#b-date').val(tmr.toISOString().slice(0,10));
121
122 route();
123});
124