Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
459f25c9 by 任超
Options

Merge branch 'master' of yun.pashanhoo.com:renchao/portalStaticPage

2 parents b4d41bec 60599009
Inline Side-by-side
Showing 2 changed files with 180 additions and 195 deletions
...@@ -4,10 +4,7 @@ $(function () { ...@@ -4,10 +4,7 @@ $(function () {
4 var appuintText = undefined; 4 var appuintText = undefined;
5 5
6 6
7 // 国有房屋无业点击选中记录 7
8 var busIndex = undefined;
9 // 机构id
10 var jgid = undefined;
11 getAppointmentDay(); 8 getAppointmentDay();
12 layui.use("element", function () { 9 layui.use("element", function () {
13 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 10 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
...@@ -17,17 +14,17 @@ $(function () { ...@@ -17,17 +14,17 @@ $(function () {
17 }); 14 });
18 }); 15 });
19 16
20 function a(i) { 17 // function a(i) {
21 Date = data.dateList[i].jyjh; 18 // Date = data.dateList[i].jyjh;
22 bookingDate = data.dateList[i].bookingDate; 19 // bookingDate = data.dateList[i].bookingDate;
23 bustime = data.dateList[i].week; 20 // bustime = data.dateList[i].week;
24 getAppointmentPeriodAndBusiness() 21 // //getAppointmentPeriodAndBusiness()
25 $(".swiper-slide") 22 // $(".swiper-slide")
26 .eq(i) 23 // .eq(i)
27 .addClass("active1") 24 // .addClass("active1")
28 .siblings() 25 // .siblings()
29 .removeClass("active1"); 26 // .removeClass("active1");
30 } 27 // }
31 var swiper = new Swiper(".swiper-container", { 28 var swiper = new Swiper(".swiper-container", {
32 slidesPerView: 5, 29 slidesPerView: 5,
33 spaceBetween: 20, 30 spaceBetween: 20,
...@@ -37,7 +34,7 @@ function a(i) { ...@@ -37,7 +34,7 @@ function a(i) {
37 on: { 34 on: {
38 click: function (swiper) { 35 click: function (swiper) {
39 var index = swiper["clickedIndex"]; 36 var index = swiper["clickedIndex"];
40 a(index); 37 //a(index);
41 }, 38 },
42 }, 39 },
43 loopFillGroupWithBlank: true, 40 loopFillGroupWithBlank: true,
...@@ -49,23 +46,9 @@ function a(i) { ...@@ -49,23 +46,9 @@ function a(i) {
49 $(document).on("click", ".cancel", function () { 46 $(document).on("click", ".cancel", function () {
50 layer.closeAll(); 47 layer.closeAll();
51 }); 48 });
52 $(document).on("click", ".confim", function () { 49
53 var paramsobj = {}
54 paramsobj.jgid = GetQueryString("jgid");
55 paramsobj.periodRulesId = periodRulesId
56 paramsobj.userid = getCookie().userid
57 makeAppointment(paramsobj)
58 });
59 }); 50 });
60 $(document).on('click','#canlebutton',function(){ 51
61 console.log(2323)
62 var obj = {}
63 obj.appointmentId = cancleId,
64 obj.userid = getCookie().userid
65 obj.jgid = GetQueryString("jgid"),
66 obj.periodRulesId = choosePeriodRulesId,
67 cancleAppointment(obj)
68 })
69 //获取当前页面预约日期 52 //获取当前页面预约日期
70 function getAppointmentDay() { 53 function getAppointmentDay() {
71 $.ajax({ 54 $.ajax({
...@@ -78,21 +61,35 @@ function getAppointmentDay() { ...@@ -78,21 +61,35 @@ function getAppointmentDay() {
78 success: function (result) { 61 success: function (result) {
79 //返回数据根据结果进行相应的处理 62 //返回数据根据结果进行相应的处理
80 if (result.code == 200 && result.data != null) { 63 if (result.code == 200 && result.data != null) {
81 data.dateList = result.data.listTime; 64 RenderbookingDateList(result.data);
82 layui.use("laytpl", function () { 65 bookingDateClick(result.data.listTime[0].bookingDate);
83 laytpl = layui.laytpl;
84 var getTpl = document.getElementById("date").innerHTML,
85 view = document.getElementById("swiperDate");
86 laytpl(getTpl).render(data, function (html) {
87 view.innerHTML = html;
88 });
89 });
90 } 66 }
91 }, 67 },
92 }); 68 });
93 } 69 }
70
71
72
73 //渲染预约日期列表
74 function RenderbookingDateList(data) {
75 let DateConnect = "";
76 $.each(data.listTime, function (index, item) {
77 DateConnect += '<ul id="' + item.bookingDate + '" class="swiper-slide layui-bg-gray" onclick="bookingDateClick(this.id)">';
78 DateConnect += '<li>' + item.week + '</li><li>' + item.jyjh + '</li>';
79 DateConnect += '</ul>';
80 });
81 $("#swiperDate").html(DateConnect);
82 }
83
84 //预约日期点击事件
85 function bookingDateClick(id) {
86 $(".layui-bg-gray").removeClass("active1");
87 $("#" + id).addClass("active1");
88 getAppointmentPeriodAndBusiness(id);
89 }
90
94 // 根据办事大厅机构ID、日期、用户ID，获取对应日期的业务列表 GET 91 // 根据办事大厅机构ID、日期、用户ID，获取对应日期的业务列表 GET
95 function getAppointmentPeriodAndBusiness() { 92 function getAppointmentPeriodAndBusiness(bookingDate) {
96 $.ajax({ 93 $.ajax({
97 type: "get", //提交方式 94 type: "get", //提交方式
98 url: 95 url:
...@@ -107,38 +104,14 @@ function getAppointmentPeriodAndBusiness() { ...@@ -107,38 +104,14 @@ function getAppointmentPeriodAndBusiness() {
107 success: function (result) { 104 success: function (result) {
108 //返回数据根据结果进行相应的处理 105 //返回数据根据结果进行相应的处理
109 if (result.code == 200 && result.data != null) { 106 if (result.code == 200 && result.data != null) {
110 console.log(result.data)
111 data.busList = result.data.appointmentPeriodBusinessList;
112 choosePeriodRulesId = result.data.choosePeriodRulesId
113 cancleId = result.data.appointmentId
114 RenderBusinessList(result.data); 107 RenderBusinessList(result.data);
115 if (data.busList.length > 0) { 108 if (result.data.appointmentPeriodBusinessList.length > 0) {
116 data.busList.forEach((item, index) => { 109 hallname = result.data.appointmentPeriodBusinessList[0].orgBusinessList[0].jgName;
117 hallname = item.orgBusinessList[0].jgName
118 })
119 } 110 }
120 } 111 }
121 }, 112 },
122 }); 113 });
123 } 114 }
124 var bookingDate = undefined;
125 var flag = undefined;
126 var msg = undefined;
127 var hallname = undefined;
128 var periodRulesId = undefined
129 var choosePeriodRulesId = undefined
130 var appointmentId = undefined
131 var cancleId = undefined
132 var data = {
133 dateList: [],
134 busList: [
135 {
136 startTime: "",
137 endTime: "",
138 orgBusinessList: [],
139 },
140 ],
141 };
142 115
143 //渲染业务信息列表 116 //渲染业务信息列表
144 function RenderBusinessList(data) { 117 function RenderBusinessList(data) {
...@@ -171,7 +144,7 @@ function RenderBusinessList(data) { ...@@ -171,7 +144,7 @@ function RenderBusinessList(data) {
171 businessContent += '<li class="isAppoint" data-id="' + childItem.periodRulesId + '">'; 144 businessContent += '<li class="isAppoint" data-id="' + childItem.periodRulesId + '">';
172 businessContent += '<h3>' + childItem.shortName + '</h3>'; 145 businessContent += '<h3>' + childItem.shortName + '</h3>';
173 if (childItem.residueNumber > 0) { 146 if (childItem.residueNumber > 0) {
174 businessContent += '<input type="button" value="立即预约" id="' + childItem.periodRulesId + '" dataName="' + childItem.shortName + '" onclick="handle(this.id)"/>'; 147 businessContent += '<input type="button" value="立即预约" id="' + childItem.periodRulesId + '" periodRulesId="' + childItem.periodRulesId + '" onclick="handle(this.id)"/>';
175 } 148 }
176 businessContent += '<p style="color:#5FB878">(剩' + childItem.residueNumber + '票)</p></li>'; 149 businessContent += '<p style="color:#5FB878">(剩' + childItem.residueNumber + '票)</p></li>';
177 } 150 }
...@@ -207,13 +180,19 @@ function checkAppointment() { ...@@ -207,13 +180,19 @@ function checkAppointment() {
207 }); 180 });
208 return msg; 181 return msg;
209 } 182 }
210 183 function del(a){
184 layui.use('layer',function(){
185 var layer = layui.layer;
186 layer.msg(a);
187 })
188 }
189
211 function handle(id) { 190 function handle(id) {
212 periodRulesId = id 191 let bookingDateUL = $(".active1");
213 let msg = checkAppointment(); 192 let msg = checkAppointment();
214 if (msg != undefined) { 193 if (msg != undefined) {
215 //layer.msg('hello'); 194 del(msg)
216 return; 195 return false
217 }; 196 };
218 var input = $("#" + id); 197 var input = $("#" + id);
219 layui.use("layer", function () { 198 layui.use("layer", function () {
...@@ -235,21 +214,25 @@ function handle(id) { ...@@ -235,21 +214,25 @@ function handle(id) {
235 hallname + 214 hallname +
236 "</div>" + 215 "</div>" +
237 '<div class="listItem"><h3>预约业务：</h3>' + 216 '<div class="listItem"><h3>预约业务：</h3>' +
238 input.attr("dataName") + 217 input.val() +
239 "</div>" + 218 "</div>" +
240 '<div class="listItem"><h3>预约时间：</h3>' + 219 '<div class="listItem"><h3>预约时间：</h3>' +
241 bookingDate + 220 bookingDateUL.children("li").get(1).innerHTML +
242 "&nbsp;&nbsp;" + 221 "&nbsp;&nbsp;" +
243 bustime + 222 bookingDateUL.children("li").get(0).innerHTML +
244 "</div>" + 223 "</div>" +
245 '<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>' + 224 '<div class="confimButton"><button type="button" class="layui-btn cancel layui-btn-primary">取消</button><button type="button" class="layui-btn confim layui-btn-normal" onclick="makeAppointment(\'' + input.attr("periodRulesId") + '\')">确定</button></div>' +
246 "</div>", 225 "</div>",
247 }); 226 });
248 }); 227 });
249 } 228 }
250 229
251 // 用户预约抢号 POST 230 // 提交预约记录
252 function makeAppointment(data) { 231 function makeAppointment(id) {
232 var paramsobj = {}
233 paramsobj.jgid = GetQueryString("jgid");
234 paramsobj.periodRulesId = id;
235 paramsobj.userid = getCookie().userid;
253 $.ajax({ 236 $.ajax({
254 type: "post", //提交方式 237 type: "post", //提交方式
255 async: false, 238 async: false,
...@@ -258,37 +241,20 @@ function makeAppointment(data) { ...@@ -258,37 +241,20 @@ function makeAppointment(data) {
258 'Content-Type': 'application/json;charset=UTF-8', 241 'Content-Type': 'application/json;charset=UTF-8',
259 }, 242 },
260 dataType: "json", 243 dataType: "json",
261 data: JSON.stringify(data),//***关键****** 244 data: JSON.stringify(paramsobj),//***关键******
262 success: function (result) {//返回数据根据结果进行相应的处理 245 success: function (result) {//返回数据根据结果进行相应的处理
263 if (result.code == 200 && result.data !== null) { 246 if (result.code == 200 && result.data !== null) {
264 appointmentId = result.data 247 appointmentId = result.data
265 window.location.href = "./yyjg.html?appointmentId=" + appointmentId 248 window.location.href = "./yyjg.html?appointmentId=" + appointmentId
249 }else {
250 del(result.message)
266 } 251 }
267 } 252 }
268 }); 253 });
269 } 254 }
270 // 用户取消预约 255
271 function cancleAppointment(data) { 256 // 根据预约信息标识码appointmentId查看预约详情接口数据
272 $.ajax({ 257 function getAppointmentDetail(id) {
273 type: "post", //提交方式
274 url: portal.api_url + "/portal/appointmentmh/cancleAppointment",//路径
275 headers: {//***关键******
276 'Content-Type': 'application/json;charset=UTF-8',
277 },
278 dataType: "json",
279 data: JSON.stringify(data),//***关键******
280 success: function (result) {//返回数据根据结果进行相应的处理
281 if (result.code == 200 && result.data !== null) {
282 console.log('取消预约成功')
283 // a(i)
284 // appointmentId = result.data
285 // window.location.href = "./yyjg.html?appointmentId=" + appointmentId
286 }
287 }
288 });
289 }
290 // GET 根据预约信息标识码appointmentId查看预约详情
291 function getAppointmentDetail(id){
292 $.ajax({ 258 $.ajax({
293 type: "get", //提交方式 259 type: "get", //提交方式
294 url: 260 url:
...@@ -302,16 +268,16 @@ function getAppointmentDetail(id){ ...@@ -302,16 +268,16 @@ function getAppointmentDetail(id){
302 //返回数据根据结果进行相应的处理 268 //返回数据根据结果进行相应的处理
303 if (result.code == 200) { 269 if (result.code == 200) {
304 appointmentDetail(result.data); 270 appointmentDetail(result.data);
305 } 271 }
306 else{ 272 else {
307 alert(result.message); 273 layer.msg(result.message, {icon: 6})
308 } 274 }
309 }, 275 },
310 }); 276 });
311 } 277 }
312 278
313 279
314 //预约详情 280 //预约详情展示页面
315 function appointmentDetail(data) { 281 function appointmentDetail(data) {
316 layui.use("layer", function () { 282 layui.use("layer", function () {
317 layer.open({ 283 layer.open({
...@@ -332,13 +298,36 @@ function appointmentDetail(data) { ...@@ -332,13 +298,36 @@ function appointmentDetail(data) {
332 data.reservationNumber + 298 data.reservationNumber +
333 "</div>" + 299 "</div>" +
334 '<div class="listItem"><h3>预约业务：</h3>' + 300 '<div class="listItem"><h3>预约业务：</h3>' +
335 data.hbShortname + 301 data.hbShortname +
336 "</div>" + 302 "</div>" +
337 '<div class="listItem"><h3>预约时间：</h3>' + 303 '<div class="listItem"><h3>预约时间：</h3>' +
338 data.bookingDate.substr(0,4) + '年'+data.bookingDate.substr(4,2) + '月' + data.bookingDate.substr(6,2) + '日'+data.startTime + '至'+data.endTime + 304 data.bookingDate.substr(0, 4) + '年' + data.bookingDate.substr(4, 2) + '月' + data.bookingDate.substr(6, 2) + '日' + data.startTime + '至' + data.endTime +
339 "</div>" + 305 "</div>" +
340 '<div class="confimButton"><button type="button" class="layui-btn cancel layui-btn-primary" id="canlebutton">取消预约</button></div>' + 306 '<div class="confimButton"><button type="button" class="layui-btn cancel layui-btn-primary" onclick="cancleAppointment(\'' + data.aid + '\',\'' + data.jgid + '\',\'' + data.periodRulesId + '\',\'' + data.userid + '\')">取消预约</button></div>' +
341 "</div>", 307 "</div>",
342 }); 308 });
343 }); 309 });
344 } 310 }
311 // 用户取消预约
312 function cancleAppointment(aid, jgid, periodRulesId, userid) {
313
314 $.ajax({
315 type: "post", //提交方式
316 url: portal.api_url + "/portal/appointmentmh/cancleAppointment",//路径
317 headers: {//***关键******
318 'Content-Type': 'application/json;charset=UTF-8',
319 },
320 dataType: "json",
321 data: JSON.stringify({
322 "appointmentId": aid,
323 "jgid": jgid,
324 "periodRulesId": periodRulesId,
325 "userid": userid
326 }),//***关键******
327 success: function (result) {//返回数据根据结果进行相应的处理
328 if (result.code == 200) {
329 bookingDateClick($(".active1").attr('id'));
330 }
331 }
332 });
333 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <style></style>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>我的预约-预约时间</title>
7 <script type="text/javascript" src="../staticJs/head.js"></script>
8 <link rel="stylesheet" href="../staticCss/swiper-bundle.min.css" />
9 <link
10 rel="stylesheet"
11 type="text/css"
12 href="../staticCss/progressBar.css"
13 />
14 <link rel="stylesheet" type="text/css" href="../staticCss/yysj.css" />
15 <link
16 rel="stylesheet"
17 type="text/css"
18 href="../staticCss/layuiDialog.css"
19 />
20 </head>
21 4
22 <body> 5 <head>
23 <div class="yysj_main"> 6 <style></style>
24 <div class="navigation_crumbs"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
25 <div class="contentBox"> 8 <title>我的预约-预约时间</title>
26 <span class="layui-breadcrumb"> 9 <script type="text/javascript" src="../staticJs/head.js"></script>
27 <a href="../index.html" title="首页">首页</a> 10 <link rel="stylesheet" href="../staticCss/swiper-bundle.min.css" />
28 <a href="./grzx.html" title="个人中心">个人中心</a> 11 <link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css" />
29 <a title="预约时间"><cite>预约时间</cite></a> 12 <link rel="stylesheet" type="text/css" href="../staticCss/yysj.css" />
30 </span> 13 <link rel="stylesheet" type="text/css" href="../staticCss/layuiDialog.css" />
31 </div> 14 </head>
15
16 <body>
17 <div class="yysj_main">
18 <div class="navigation_crumbs">
19 <div class="contentBox">
20 <span class="layui-breadcrumb">
21 <a href="../index.html" title="首页">首页</a>
22 <a href="./grzx.html" title="个人中心">个人中心</a>
23 <a title="预约时间"><cite>预约时间</cite></a>
24 </span>
32 </div> 25 </div>
33 <!-- ----------------------------------内容模块的开始----------------------------------------------- --> 26 </div>
34 <div class="central_area"> 27 <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
35 <div class="progressBar contentBox"> 28 <div class="central_area">
36 <ul class="app_progress"> 29 <div class="progressBar contentBox">
37 <li> 30 <ul class="app_progress">
38 <p class="active"></p> 31 <li>
39 <h5>预约须知</h5> 32 <p class="active"></p>
40 </li> 33 <h5>预约须知</h5>
41 <div class="layui-progress"> 34 </li>
42 <div class="layui-progress-bar" lay-percent="100%"></div> 35 <div class="layui-progress">
43 </div> 36 <div class="layui-progress-bar" lay-percent="100%"></div>
44 <li>
45 <p class="active"></p>
46 <h5>选择区域</h5>
47 </li>
48 <div class="layui-progress">
49 <div class="layui-progress-bar" lay-percent="100%"></div>
50 </div>
51 <li>
52 <p class="activeing"></p>
53 <h5 class="activeingtext">预约时间</h5>
54 </li>
55 <div class="layui-progress">
56 <div class="layui-progress-bar" lay-percent="50%"></div>
57 </div>
58 <li>
59 <p></p>
60 <h5>预约结果</h5>
61 </li>
62 </ul>
63 </div>
64 <div class="appoint_time">
65 <div class="swiper-container" >
66 <div class="swiper-wrapper" id="swiperDate"></div>
67 </div> 37 </div>
68 <!-- Add Arrows --> 38 <li>
69 <div class="swiper-button-next"></div> 39 <p class="active"></p>
70 <div class="swiper-button-prev"></div> 40 <h5>选择区域</h5>
71 </div> 41 </li>
72 <!-- ----------------------------------业务选择start----------------------------------------------- --> 42 <div class="layui-progress">
73 <div class="business_choice contentBox"> 43 <div class="layui-progress-bar" lay-percent="100%"></div>
74 <div class="site-title"> 44 </div>
75 <fieldset> 45 <li>
76 <legend> 46 <p class="activeing"></p>
77 <a href="" name="fieldset"> 业务预约 </a> 47 <h5 class="activeingtext">预约时间</h5>
78 </legend> 48 </li>
79 </fieldset> 49 <div class="layui-progress">
50 <div class="layui-progress-bar" lay-percent="50%"></div>
80 </div> 51 </div>
81 <div id="business_list"></div> 52 <li>
53 <p></p>
54 <h5>预约结果</h5>
55 </li>
56 </ul>
57 </div>
58 <div class="appoint_time">
59 <div class="swiper-container">
60 <div class="swiper-wrapper" id="swiperDate"></div>
61 </div>
62 <!-- Add Arrows -->
63 <div class="swiper-button-next"></div>
64 <div class="swiper-button-prev"></div>
65 </div>
66 <!-- ----------------------------------业务选择start----------------------------------------------- -->
67 <div class="business_choice contentBox">
68 <div class="site-title">
69 <fieldset>
70 <legend>
71 <h2>业务列表</h2>
72 </legend>
73 </fieldset>
82 </div> 74 </div>
75 <div id="business_list"></div>
76 </div>
83 77
84 <div class="next_button"> 78 <div class="next_button">
85 <button type="button" class="layui-btn layui-btn-normal"> 79 <button type="button" class="layui-btn layui-btn-normal">
86 <!-- <a href="./yyxz.html" title="上一步"> 80 <!-- <a href="./yyxz.html" title="上一步">
87 上一步 81 上一步
88 </a> --> 82 </a> -->
89 <a href="./xzqy.html" title="上一步"> 上一步 </a> 83 <a href="./xzqy.html" title="上一步"> 上一步 </a>
90 </button> 84 </button>
91 </div>
92 </div> 85 </div>
93 </div> 86 </div>
94 </body> 87 </div>
88 </body>
89
95 </html> 90 </html>
96 <script type="text/javascript" src="../staticJs/common.js"></script> 91 <script type="text/javascript" src="../staticJs/common.js"></script>
97 <script type="text/javascript" src="../staticJs/down.js"></script> 92 <script type="text/javascript" src="../staticJs/down.js"></script>
98 <script src="../staticJs/swiper-bundle.min.js"></script> 93 <script src="../staticJs/swiper-bundle.min.js"></script>
99 <script type="text/javascript" src="../staticJs/yysj.js"></script> 94 <script type="text/javascript" src="../staticJs/yysj.js"></script>
100 95
101 <script id="date" type="text/html"> 96 <!-- <script id="date" type="text/html">
102 {{# layui.each(d.dateList, function(index, item){ }} {{# if(item.isSelect){ }} 97 {{# layui.each(d.dateList, function(index, item){ }}
98 {{# if(item.isSelect){ }}
103 <ul class="swiper-slide layui-bg-gray active1"> 99 <ul class="swiper-slide layui-bg-gray active1">
104 <li>{{item.week}}</li> 100 <li>{{item.week}}</li>
105 <li>{{item.jyjh}}</li> 101 <li>{{item.jyjh}}</li>
...@@ -111,4 +107,4 @@ ...@@ -111,4 +107,4 @@
111 <li>{{item.jyjh}}</li> 107 <li>{{item.jyjh}}</li>
112 </ul> 108 </ul>
113 {{# } }} {{# }); }} 109 {{# } }} {{# }); }}
114 </script>
...\ No newline at end of file ...\ No newline at end of file
110 </script> -->
...\ No newline at end of file ...\ No newline at end of file
......