Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
0428c855 by 任超
Options

feat:预约时间

1 parent 0efd4585
Inline Side-by-side
Showing 5 changed files with 158 additions and 189 deletions
...@@ -2,7 +2,8 @@ $(function () { ...@@ -2,7 +2,8 @@ $(function () {
2 2
3 var province = undefined 3 var province = undefined
4 var city = undefined 4 var city = undefined
5 5 // 办事大厅
6 var halloffice = '不夜城'
6 $('.area_list li').click(function () { 7 $('.area_list li').click(function () {
7 $(".area_list li").removeClass("active1") 8 $(".area_list li").removeClass("active1")
8 $(this).addClass("active1"); 9 $(this).addClass("active1");
...@@ -139,4 +140,9 @@ $(function () { ...@@ -139,4 +140,9 @@ $(function () {
139 infoWindow1.addEventListener('close', function (type, target, point) { 140 infoWindow1.addEventListener('close', function (type, target, point) {
140 $('.office_halls li').eq(1).removeClass('hallActive') 141 $('.office_halls li').eq(1).removeClass('hallActive')
141 }) 142 })
143
144 // 下一步
145 $('.nextButton').click(function(){
146 window.open("../yysj/index.html?halloffice="+halloffice+"","_self")
147 })
142 }) 148 })
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,12 +5,13 @@ $(function () { ...@@ -5,12 +5,13 @@ $(function () {
5 var bustime = undefined; 5 var bustime = undefined;
6 // 国有房屋无业点击选中记录 6 // 国有房屋无业点击选中记录
7 var busIndex = undefined 7 var busIndex = undefined
8 // 办事中心
9 var halloffice = undefined
8 var data = { 10 var data = {
9 'dateList': [ 11 'dateList': [
10 { 12 {
11 week: '星期一', 13 week: '星期一',
12 date: '10月15号', 14 date: '10月15号'
13 isSelect: true
14 }, 15 },
15 { 16 {
16 week: '星期二', 17 week: '星期二',
...@@ -33,30 +34,40 @@ $(function () { ...@@ -33,30 +34,40 @@ $(function () {
33 date: '10月19号' 34 date: '10月19号'
34 } 35 }
35 ], 36 ],
36 "list": ['上午：09:00-10：00', '上午：10:00-11：00', '上午：11:00-12：00', '下午：14:00-15：00', '下午：15:00-16：00'], 37 "busList": [{
37 "appint_detail": [ 38 startTime: "09:30",
39 endTime: "10:30",
40 orgBusinessList: [
38 { 41 {
39 'total': 2 42 shortName: "一般抵押登记",
43 isyy: 1,
44 residueNumber: "约满"
40 }, 45 },
41 { 46 {
42 'total': 2 47 shortName: "查封/解封登记",
48 isyy: 1,
49 residueNumber: "约满"
43 }, 50 },
44 { 51 {
45 'total': 0 52 shortName: "有证房抵押首次登记",
53 isyy: 1,
54 residueNumber: "约满"
46 }, 55 },
47 { 56 {
48 'total': 0 57 shortName: "商品房抵押登记",
49 }, 58 isyy: 0,
50 { 59 residueNumber: "余3位"
51 'total': 1
52 } 60 }
53 ] 61 ]
62 }],
54 }; 63 };
55 64
56 // 获取当前选中的日期 65 // 获取当前选中的日期
66 data.dateList[0].isSelect = true
57 for (var i = 0; i < data.dateList.length; i++) { 67 for (var i = 0; i < data.dateList.length; i++) {
58 if (data.dateList[i].isSelect) { 68 if (data.dateList[i].isSelect) {
59 Date = data.dateList[i].date 69 Date = data.dateList[i].date
70 bustime = data.dateList[i].week
60 } 71 }
61 }; 72 };
62 73
...@@ -69,50 +80,22 @@ $(function () { ...@@ -69,50 +80,22 @@ $(function () {
69 }); 80 });
70 function a(i) { 81 function a(i) {
71 Date = data.dateList[i].date 82 Date = data.dateList[i].date
83 bustime = data.dateList[i].week
72 $(".swiper-slide").eq(i).addClass('active').siblings().removeClass('active'); 84 $(".swiper-slide").eq(i).addClass('active').siblings().removeClass('active');
73 } 85 }
74 86
75 $('.business_list li').click(function () {
76 // 获取元素
77 appuintText = $(this).find('a').text()
78
79
80 $('.layui_anim_list').removeClass('disnone')
81 $('.layui_anim_content').show()
82 var demo = $('.layui-anim')
83 $('html,body').addClass('ovfHiden');
84 var othis = demo, anim = othis.data('anim');
85 othis.removeClass(anim);
86 setTimeout(function () {
87 demo.show()
88 othis.addClass(anim);
89 });
90
91 // 获取当前点击li 的下标
92 let index = $(this).index()
93 busIndex = index
94 })
95
96 layui.use('laytpl', function () { 87 layui.use('laytpl', function () {
97 laytpl = layui.laytpl; 88 laytpl = layui.laytpl;
98
99
100 var getTpl = document.getElementById('date').innerHTML 89 var getTpl = document.getElementById('date').innerHTML
101 , view = document.getElementById('swiperDate'); 90 , view = document.getElementById('swiperDate');
102 laytpl(getTpl).render(data, function (html) { 91 laytpl(getTpl).render(data, function (html) {
103 view.innerHTML = html; 92 view.innerHTML = html;
104 }); 93 });
105 94
106 var getTpl = document.getElementById('appoint_timeList').innerHTML 95 var getTpl1 = document.getElementById('business_item').innerHTML
107 , view = document.getElementById('view'); 96 , view1 = document.getElementById('business_list');
108 laytpl(getTpl).render(data, function (html) { 97 laytpl(getTpl1).render(data, function (html) {
109 view.innerHTML = html; 98 view1.innerHTML = html;
110 });
111
112 var getTpl = document.getElementById('appint_detail').innerHTML
113 , view = document.getElementById('view1');
114 laytpl(getTpl).render(data, function (html) {
115 view.innerHTML = html;
116 }); 99 });
117 }); 100 });
118 var swiper = new Swiper('.swiper-container', { 101 var swiper = new Swiper('.swiper-container', {
...@@ -133,52 +116,7 @@ $(function () { ...@@ -133,52 +116,7 @@ $(function () {
133 prevEl: '.swiper-button-prev', 116 prevEl: '.swiper-button-prev',
134 }, 117 },
135 }); 118 });
136 $(document).on('click', '.able_appint', function () { 119 function handle(){
137 $('.able_appint').removeClass("able_appintActive")
138 $(this).addClass("able_appintActive")
139
140 let index = $(this).index()
141 // 获取当前选中的日期
142 bustime = data.list[index]
143 modleClose()
144 $(".business_list li .allowedMask").remove()
145 $(".business_list li .reserved").remove()
146 var str = "<div class='reserved'> <i class='layui-icon layui-icon-log'></i> <div><p>" + appuintText + "</p><p>" + bustime + "</p></div> <i class='layui-icon appintDel layui-icon-reduce-circle'></i></div>"
147 $(".business_list li").append('<div class="allowedMask"></div>');
148 $(".business_list li:eq(" + busIndex + ") a").removeClass('not-allowed')
149 $(".business_list li").eq(busIndex).append(str);
150 $(".business_list li:eq(" + busIndex + ") a").hide()
151 });
152
153 // 删除预约记录
154 $(document).on('click', '.appintDel', function (event) {
155 $('.layui_anim_list').addClass('disnone')
156 $('.able_appint').removeClass('able_appintActive')
157 layui.use('layer', function () {
158 var layer = layui.layer;
159 layer.confirm('此操作将删除预约记录，是否继续', {
160 btn: ['取消', '继续'] //按钮
161 }, function () {
162 layer.closeAll();
163 modleClose()
164 }, function () {
165 modleClose()
166 $(".business_list li a").show()
167 $(".business_list li .allowedMask").remove()
168 $(".business_list li .reserved").remove()
169 });
170 });
171 });
172
173
174 $(document).on('click', '.allowedMask', function () {
175 $('.layui_anim_list').addClass('disnone')
176 modleClose()
177 });
178
179 // 下一步确认
180 $('.nextButton').click(function () {
181 if ($('.business_list li').has('.reserved').length) {
182 layui.use('layer', function () { 120 layui.use('layer', function () {
183 layer.open({ 121 layer.open({
184 type: 1, 122 type: 1,
...@@ -193,25 +131,23 @@ $(function () { ...@@ -193,25 +131,23 @@ $(function () {
193 + '<li><span>身份证号</span>：610124193335522</li>' 131 + '<li><span>身份证号</span>：610124193335522</li>'
194 + '<li><span>联系电话</span>：18740677386</li>' 132 + '<li><span>联系电话</span>：18740677386</li>'
195 + '</ul>' 133 + '</ul>'
196 + '<div class="listItem"><h3>大厅名称：</h3>碑林区不动产办事中心</div>' 134 + '<div class="listItem"><h3>大厅名称：</h3>'+halloffice+'</div>'
197 + '<div class="listItem"><h3>预约业务：</h3>' + appuintText + '</div>' 135 + '<div class="listItem"><h3>预约业务：</h3>' + appuintText + '</div>'
198 + '<div class="listItem"><h3>预约时间：</h3>' + Date +'&nbsp;&nbsp;'+bustime+'</div>' 136 + '<div class="listItem"><h3>预约时间：</h3>' + Date + '&nbsp;&nbsp;' + bustime + '</div>'
199 + '<div class="confimButton"><button type="button" class="layui-btn cancel layui-btn-primary">取消</button><button type="button" class="layui-btn confim layui-btn-normal">确定</button></div>' 137 + '<div class="confimButton"><button type="button" class="layui-btn cancel layui-btn-primary">取消</button><button type="button" class="layui-btn confim layui-btn-normal">确定</button></div>'
200 + '</div>' 138 + '</div>'
201 }); 139 });
202 }) 140 })
203 } else {
204 layui.use('layer', function () {
205 layer.alert('请先选择相应业务', {
206 skin: 'layui-layer-molv' //样式类名
207 , closeBtn: 0
208 }, function () {
209 layer.closeAll()
210 });
211 })
212 } 141 }
142 // 业务选择
143 $(document).on('click', '.business_item ul li', function () {
144 halloffice = GetRequest()
145 appuintText = $(this).find('h3').text()
146 handle()
147 });
148
149
213 150
214 })
215 $(document).on('click', '.cancel', function () { 151 $(document).on('click', '.cancel', function () {
216 layer.closeAll() 152 layer.closeAll()
217 }) 153 })
...@@ -219,8 +155,15 @@ $(function () { ...@@ -219,8 +155,15 @@ $(function () {
219 window.location.href = "../yyjg/index.html" 155 window.location.href = "../yyjg/index.html"
220 }) 156 })
221 }); 157 });
222 function modleClose() { 158 function GetRequest() {
223 $('.layui_anim_content').hide() 159 var url = location.search; //获取url中"?"符后的字串
224 $('.layui-anim').hide() 160 var theRequest = new Object();
225 $('html,body').removeClass('ovfHiden'); 161 if (url.indexOf("?") != -1) {
162 var str = url.substr(1);
163 strs = str.split("?");
164 for (var i = 0; i < strs.length; i++) {
165 theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
166 }
167 }
168 return theRequest.halloffice;
226 } 169 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -147,8 +147,8 @@ ...@@ -147,8 +147,8 @@
147 上一步 147 上一步
148 </a> 148 </a>
149 </button> 149 </button>
150 <button type="button" class="layui-btn layui-btn-normal"> 150 <button type="button" class="layui-btn nextButton layui-btn-normal">
151 <a href="../yysj/index.html" title="下一步"> 151 <a title="下一步">
152 下一步 152 下一步
153 </a> 153 </a>
154 </button> 154 </button>
......
...@@ -340,3 +340,65 @@ ...@@ -340,3 +340,65 @@
340 height: 30px; 340 height: 30px;
341 line-height: 30px; 341 line-height: 30px;
342 } 342 }
343 .layui-layer-ico {
344 background: none!important;
345 position: relative;
346 }
347 .layui-layer-ico::after {
348 content: '\2716';
349 position: absolute;
350 left: 0;
351 top: -2px;
352 font-size: 14px;
353 color: #fff;
354 }
355 /* ----------------------------------------------- */
356 .business_item .item_time {
357 float: left;
358 width: 200px;
359 background-color: #0091FF;
360 color: #fff;
361 margin-right: 15px;
362 height: 130px;
363 text-align: center;
364 line-height: 130px;
365 }
366 .business_item ul {
367 display: inline-block;
368 width: 80%;
369 }
370 .business_item ul li {
371 width: 33%;
372 display: inline-block;
373 background-color:#eee;
374 color: #fff;
375 border-radius: 3px;
376 text-align: center;
377 margin: 5px 0;
378 color: #666;
379 cursor: pointer;
380 padding: 7px 0;
381 position: relative;
382 }
383 .business_item ul li .mask {
384 position: absolute;
385 left: 0;
386 top: 0;
387 width: 100%;
388 height: 100%;
389 }
390 .business_item ul .item_appoint:hover {
391 background-color: #0091FF;
392 color: #fff;
393 }
394 .isAppoint {
395 cursor:not-allowed!important;
396 }
397 .business_item ul li h3 {
398 margin-bottom: 5px;
399 }
400 .business_item ul li p {
401 font-size: 12px;
402 text-align: center;
403 line-height: 14px;
404 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
18 <link rel="stylesheet" type="text/css" href="../../staticCss/common.css" /> 18 <link rel="stylesheet" type="text/css" href="../../staticCss/common.css" />
19 <link rel="stylesheet" type="text/css" href="./css/index.css"> 19 <link rel="stylesheet" type="text/css" href="./css/index.css">
20 </head> 20 </head>
21
22 <body> 21 <body>
23 <div class="yysj_main"> 22 <div class="yysj_main">
24 <div class="subject top-logo"> 23 <div class="subject top-logo">
...@@ -108,74 +107,25 @@ ...@@ -108,74 +107,25 @@
108 </div> 107 </div>
109 <!-- ----------------------------------业务选择start----------------------------------------------- --> 108 <!-- ----------------------------------业务选择start----------------------------------------------- -->
110 <div class="business_choice contentBox"> 109 <div class="business_choice contentBox">
111 <div class="title">
112 <h2>选择业务</h2>
113 <p>(请选择您要办理的业务)</p>
114 </div>
115 <div class="site-title"> 110 <div class="site-title">
116 <fieldset> 111 <fieldset>
117 <legend> 112 <legend>
118 <a href="" name="fieldset"> 113 <a href="" name="fieldset">
119 国有房屋 114 业务预约
120 </a> 115 </a>
121 </legend> 116 </legend>
122 </fieldset> 117 </fieldset>
123 </div> 118 </div>
124 <ul class="business_list"> 119 <div id="business_list">
125 <li>
126 <a title="二手房转移登记">
127 二手房转移登记
128 </a>
129 </li>
130 <li>
131 <a title="有证房抵押首次登记">
132 有证房抵押首次登记/注销登记
133 </a>
134 </li>
135 <li>
136 <a title="解封登记">
137 查封/解封登记
138 </a>
139 </li>
140 <li>
141 <a title="解封登记">
142 查封/解封登记
143 </a>
144 </li>
145 <li>
146 <a title="证房抵押首次登记">
147 证房抵押首次登记/注销登记
148 </a>
149 </li>
150 <li>
151 <a title="二手房转移登记">
152 二手房转移登记
153 </a>
154 </li>
155 </ul>
156 </div> 120 </div>
157 <div class="layui-anim layui_anim_list" data-anim="layui-anim-scale">
158 <h2>
159 <i class="layui-icon layui-icon-close" onclick="modleClose()"></i>
160 </h2>
161 <ul class="content_box">
162 <li id="view"></li>
163 <li id="view1"></li>
164 </ul>
165 </div> 121 </div>
166 <div class="layui_anim_content"></div>
167 122
168 <div class="next_button"> 123 <div class="next_button">
169 <button type="button" class="layui-btn layui-btn-normal"> 124 <button type="button" class="layui-btn layui-btn-normal">
170 <a href="../xxqu/index.html" title="上一步"> 125 <a href="../xzqy/index.html" title="上一步">
171 上一步 126 上一步
172 </a> 127 </a>
173 </button> 128 </button>
174 <button type="button" class="layui-btn layui-btn-normal nextButton">
175 <a title="下一步">
176 下一步
177 </a>
178 </button>
179 </div> 129 </div>
180 </div> 130 </div>
181 <!-- ----------------------------------内容模块的end----------------------------------------------- --> 131 <!-- ----------------------------------内容模块的end----------------------------------------------- -->
...@@ -273,37 +223,45 @@ ...@@ -273,37 +223,45 @@
273 {{# }); }} 223 {{# }); }}
274 </script> 224 </script>
275 225
276 226 <script id="business_item" type="text/html">
277 <script id="appoint_timeList" type="text/html"> 227 {{# layui.each(d.busList, function(index, item){ }}
278 <ul class="appointment_time"> 228 <div class="business_item">
279 {{# layui.each(d.list, function(index, item){ }} 229 <div class="item_time">
280 <li class="layui-bg-gray"> 230 <span>上午</span>
281 {{item}} 231 <span>{{item.startTime}}</span>
282 </li> 232 <span>-</span>
283 {{# }); }} 233 <span>{{item.endTime}}</span>
284 {{# if(d.list.length === 0){ }} 234 </div>
285 无数据 235 <ul>
236 {{# layui.each(item.orgBusinessList, function(index1, item1){ }}
237 {{# if(item1.isyy==0){ }}
238 <li class="item_appoint">
239 <h3>
240 {{item1.shortName}}
241 </h3>
242 {{# if(item1.isyy==1){ }}
243 <p style="color:#FF5722">({{item1.residueNumber}})</p>
244 {{# } }}
245 {{# if(item1.isyy==0){ }}
246 <p style="color:#5FB878">({{item1.residueNumber}})</p>
286 {{# } }} 247 {{# } }}
287 </ul>
288 </script>
289
290 <script id="appint_detail" type="text/html">
291 <ol class="appint_detail">
292 {{# layui.each(d.appint_detail, function(index, item){ }}
293 {{# if(item.total > 0){ }}
294 <li class="able_appint">
295 <span>可预约</span>
296 <p>余{{item.total}}位</p>
297 </li> 248 </li>
298 {{# } }} 249 {{# } }}
299 {{# if(item.total == 0){ }} 250 {{# if(item1.isyy==1){ }}
300 <li class="layui-bg-gray"> 251 <li class="isAppoint">
301 <p class="full_engagement">已约满</p> 252 <h3>
253 {{item1.shortName}}
254 </h3>
255 {{# if(item1.isyy==1){ }}
256 <p style="color:#FF5722">({{item1.residueNumber}})</p>
257 {{# } }}
258 {{# if(item1.isyy==0){ }}
259 <p style="color:#5FB878">({{item1.residueNumber}})</p>
260 {{# } }}
302 </li> 261 </li>
303 {{# } }} 262 {{# } }}
304 {{# }); }} 263 {{# }); }}
305 {{# if(d.list.length === 0){ }} 264 </ul>
306 无数据 265 </div>
307 {{# } }} 266 {{# }); }}
308 </ol>
309 </script> 267 </script>
...\ No newline at end of file ...\ No newline at end of file
......