Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
d7cf2e3d by 任超
Options

style:预约时间选择

1 parent 38d22421
Inline Side-by-side
Showing 5 changed files with 102 additions and 56 deletions
...@@ -110,7 +110,7 @@ div.top-logo .top_logo_search { ...@@ -110,7 +110,7 @@ div.top-logo .top_logo_search {
110 float: left; 110 float: left;
111 width: 350px; 111 width: 350px;
112 position: relative; 112 position: relative;
113 margin-left: 338px; 113 margin-left: 328px;
114 } 114 }
115 div.top-logo .top_logo_search input { 115 div.top-logo .top_logo_search input {
116 border-radius: 50px; 116 border-radius: 50px;
......
...@@ -33,16 +33,19 @@ ...@@ -33,16 +33,19 @@
33 /* -------------------------------预约日期---------------------------------------- */ 33 /* -------------------------------预约日期---------------------------------------- */
34 .appoint_time { 34 .appoint_time {
35 width: 1200px; 35 width: 1200px;
36 height: 90px; 36 height: 92px;
37 margin: 0 auto; 37 margin: 0 auto;
38 padding: 0 130px; 38 padding: 0 150px;
39 box-sizing: border-box; 39 box-sizing: border-box;
40 position: relative; 40 position: relative;
41 margin-top: 30px; 41 margin-top: 30px;
42 border-radius: 2px;
42 } 43 }
43 .swiper-container { 44 .swiper-container {
44 width: 100%; 45 width: 100%;
45 height: 100%; 46 height: 92px;
47 border: 1px solid #DEDEDE;
48 padding-right: 2px;
46 } 49 }
47 50
48 .swiper-slide { 51 .swiper-slide {
...@@ -52,21 +55,30 @@ ...@@ -52,21 +55,30 @@
52 color: #fff; 55 color: #fff;
53 cursor: pointer; 56 cursor: pointer;
54 } 57 }
58 .swiper-wrapper {
59 box-sizing: border-box;
60 }
55 .swiper-slide li:nth-child(1) { 61 .swiper-slide li:nth-child(1) {
56 margin-top: 23px; 62 margin-top: 23px;
63 color: #6D7278;
57 } 64 }
58 .swiper-slide li:nth-child(2) { 65 .swiper-slide li:nth-child(2) {
59 font-size: 16px; 66 font-size: 16px;
60 font-weight: 600; 67 font-weight: 600;
68 color: #4A4A4A;
61 } 69 }
62 .swiper-slide li { 70 .swiper-slide li {
63 height: 20px; 71 height: 20px;
64 font-size: 14px; 72 font-size: 14px;
65 margin-top: 3px; 73 margin-top: 3px;
66 } 74 }
67 .active1 { 75 .active3 {
68 background-color: #1E9FFF; 76 border: 1px solid #1E9FFF;
69 color: #fff; 77 background-image: url(../staticImages/jiao.png);
78 background-size: 24px 20px;
79 background-position: right bottom;
80 background-repeat: no-repeat;
81 height: 90px;
70 } 82 }
71 .business_choice { 83 .business_choice {
72 margin: 20px auto; 84 margin: 20px auto;
...@@ -353,7 +365,6 @@ ...@@ -353,7 +365,6 @@
353 float: left; 365 float: left;
354 width: 150px; 366 width: 150px;
355 margin-right: 15px; 367 margin-right: 15px;
356 height: 90px;
357 text-align: center; 368 text-align: center;
358 background: #FCFCFC; 369 background: #FCFCFC;
359 border-radius: 2px; 370 border-radius: 2px;
...@@ -361,6 +372,8 @@ ...@@ -361,6 +372,8 @@
361 box-sizing: border-box; 372 box-sizing: border-box;
362 padding-top: 28px; 373 padding-top: 28px;
363 color: #6D7278; 374 color: #6D7278;
375 height: 90px;
376 font-size: 16px;
364 } 377 }
365 .business_item{ 378 .business_item{
366 margin-bottom: 10px; 379 margin-bottom: 10px;
...@@ -384,6 +397,8 @@ ...@@ -384,6 +397,8 @@
384 background: #FFFFFF; 397 background: #FFFFFF;
385 border-radius: 2px; 398 border-radius: 2px;
386 border: 1px solid #DEDEDE; 399 border: 1px solid #DEDEDE;
400 padding-top: 23px;
401 font-size: 14px;
387 } 402 }
388 .business_item ul li .mask { 403 .business_item ul li .mask {
389 position: absolute; 404 position: absolute;
...@@ -401,7 +416,7 @@ ...@@ -401,7 +416,7 @@
401 background-color: #ccc; 416 background-color: #ccc;
402 } 417 }
403 .business_item ul li h3 { 418 .business_item ul li h3 {
404 margin-bottom: 5px; 419 margin-bottom: 10px;
405 } 420 }
406 .business_item ul li p { 421 .business_item ul li p {
407 font-size: 12px; 422 font-size: 12px;
...@@ -409,8 +424,60 @@ ...@@ -409,8 +424,60 @@
409 line-height: 14px; 424 line-height: 14px;
410 } 425 }
411 .swiper-button-next, .swiper-container-rtl .swiper-button-prev { 426 .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
412 right: 45px; 427 right: -6px;
428 width: 150px;
429 height: 92px;
430 top: 22px;
431 border-radius: 2px;
432 border: 1px solid #DEDEDE;
413 } 433 }
414 .swiper-button-prev, .swiper-container-rtl .swiper-button-next { 434 .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
415 left: 45px; 435 left: -1px;
436 width: 150px;
437 height: 92px;
438 top: 22px;
439 border-radius: 2px;
440 border: 1px solid #DEDEDE;
441 }
442 .swiper-button-next:after, .swiper-button-prev:after {
443 font-size: 16px;
444 border: 1px solid #6D7278;
445 width: 21px;
446 height: 21px;
447 line-height: 21px;
448 border-radius: 50%;
449 text-align: center;
450 }
451 .viewDetails {
452 color: #0091FF;
453 cursor: pointer;
454 margin-bottom: 5px;
455 font-size: 14px!important;
456 }
457 .appointmentNow {
458 color: #0091FF;
459 cursor: pointer;
460 font-size: 14px!important;
461 margin-bottom: 5px;
462 }
463 .reserved {
464 background: rgba(47, 165, 255, 0.06)!important;
465 border: 1px solid #0091FF!important;
466 padding-top: 18px!important;
467 background-image: url(../staticImages/jiao.png)!important;;
468 background-size: 24px 20px!important;;
469 background-position: right bottom!important;;
470 background-repeat: no-repeat!important;;
471 }
472 .reserved h3 {
473 margin-bottom: 6px!important;
474 }
475 .appointmentAvailable {
476 padding-top: 18px!important;
477 }
478 .appointmentAvailable:hover {
479 border: 1px solid #0091FF!important;
480 }
481 .appointmentAvailable h3 {
482 margin-bottom: 6px!important;
416 } 483 }
...\ No newline at end of file ...\ No newline at end of file
......
1 var bustime = undefined; 1 var bustime = undefined;
2 layui.use("element", function () {
3 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
4 });
2 $(function () { 5 $(function () {
3 var Date = undefined;
4 var appuintText = undefined;
5
6
7
8 getAppointmentDay(); 6 getAppointmentDay();
9 layui.use("element", function () {
10 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
11 //监听导航点击
12 element.on("nav(demo)", function (elem) {
13 layer.msg(elem.text());
14 });
15 });
16
17 // function a(i) {
18 // Date = data.dateList[i].jyjh;
19 // bookingDate = data.dateList[i].bookingDate;
20 // bustime = data.dateList[i].week;
21 // //getAppointmentPeriodAndBusiness()
22 // $(".swiper-slide")
23 // .eq(i)
24 // .addClass("active1")
25 // .siblings()
26 // .removeClass("active1");
27 // }
28 var swiper = new Swiper(".swiper-container", { 7 var swiper = new Swiper(".swiper-container", {
29 slidesPerView: 5, 8 slidesPerView: 5,
30 spaceBetween: 20, 9 spaceBetween: 0,
31 slidesPerGroup: 1, 10 slidesPerGroup: 1,
32 observer: true, 11 observer: true,
33 observeParents: true, 12 observeParents: true,
34 on: { 13 // on: {
35 click: function (swiper) { 14 // click: function (swiper) {
36 var index = swiper["clickedIndex"]; 15 // var index = swiper["clickedIndex"];
37 //a(index); 16 // //a(index);
38 }, 17 // },
39 }, 18 // },
40 loopFillGroupWithBlank: true, 19 loopFillGroupWithBlank: true,
41 navigation: { 20 navigation: {
42 nextEl: ".swiper-button-next", 21 nextEl: ".swiper-button-next",
...@@ -73,7 +52,7 @@ function getAppointmentDay() { ...@@ -73,7 +52,7 @@ function getAppointmentDay() {
73 function RenderbookingDateList(data) { 52 function RenderbookingDateList(data) {
74 let DateConnect = ""; 53 let DateConnect = "";
75 $.each(data.listTime, function (index, item) { 54 $.each(data.listTime, function (index, item) {
76 DateConnect += '<ul id="' + item.bookingDate + '" class="swiper-slide layui-bg-gray" onclick="bookingDateClick(this.id)">'; 55 DateConnect += '<ul id="' + item.bookingDate + '" class="swiper-slide" onclick="bookingDateClick(this.id)">';
77 DateConnect += '<li>' + item.week + '</li><li>' + item.jyjh + '</li>'; 56 DateConnect += '<li>' + item.week + '</li><li>' + item.jyjh + '</li>';
78 DateConnect += '</ul>'; 57 DateConnect += '</ul>';
79 }); 58 });
...@@ -82,8 +61,8 @@ function RenderbookingDateList(data) { ...@@ -82,8 +61,8 @@ function RenderbookingDateList(data) {
82 61
83 //预约日期点击事件 62 //预约日期点击事件
84 function bookingDateClick(id) { 63 function bookingDateClick(id) {
85 $(".layui-bg-gray").removeClass("active1"); 64 $(".swiper-slide").removeClass("active3");
86 $("#" + id).addClass("active1"); 65 $("#" + id).addClass("active3");
87 getAppointmentPeriodAndBusiness(id); 66 getAppointmentPeriodAndBusiness(id);
88 } 67 }
89 68
...@@ -136,22 +115,22 @@ function RenderBusinessList(data) { ...@@ -136,22 +115,22 @@ function RenderBusinessList(data) {
136 //存在预约记录 115 //存在预约记录
137 if (existRecord) { 116 if (existRecord) {
138 if (data.choosePeriodRulesId == childItem.periodRulesId) { 117 if (data.choosePeriodRulesId == childItem.periodRulesId) {
139 businessContent += '<li class="isAppoint" style="border: 1px solid red ;" data-id="' + childItem.periodRulesId + '">'; 118 businessContent += '<li class="isAppoint reserved" data-id="' + childItem.periodRulesId + '">';
140 businessContent += '<h3>' + childItem.shortName + '</h3>'; 119 businessContent += '<h3>' + childItem.shortName + '</h3>';
141 businessContent += '<input type="button" value="查看详情" id="' + data.appointmentId + '" dataName="' + childItem.shortName + '" onclick="getAppointmentDetail(this.id)"/>'; 120 businessContent += '<p class="viewDetails" id="' + data.appointmentId + '" dataName="' + childItem.shortName + '" onclick="getAppointmentDetail(this.id)">查看详情</p>';
142 } 121 }
143 else { 122 else {
144 businessContent += '<li class="isAppoint">'; 123 businessContent += '<li class="isAppoint" style="background: #FCFCFC">';
145 businessContent += '<h3>' + childItem.shortName + '</h3>'; 124 businessContent += '<h3>' + childItem.shortName + '</h3>';
146 } 125 }
147 businessContent += '<p style="color:#5FB878">(剩' + childItem.residueNumber + '票)</p></li>'; 126 businessContent += '<p style="color:#FF1313">(剩' + childItem.residueNumber + '票)</p></li>';
148 } else { 127 } else {
149 businessContent += '<li class="isAppoint" data-id="' + childItem.periodRulesId + '">'; 128 businessContent += '<li class="appointmentAvailable" data-id="' + childItem.periodRulesId + '" id="' + childItem.periodRulesId + '" periodRulesId="' + childItem.periodRulesId + '" onclick="handle(this.id)">';
150 businessContent += '<h3>' + childItem.shortName + '</h3>'; 129 businessContent += '<h3>' + childItem.shortName + '</h3>';
151 if (childItem.residueNumber > 0) { 130 if (childItem.residueNumber > 0) {
152 businessContent += '<input type="button" value="立即预约" id="' + childItem.periodRulesId + '" periodRulesId="' + childItem.periodRulesId + '" onclick="handle(this.id)"/>'; 131 businessContent += '<p class="appointmentNow">立即预约</p>';
153 } 132 }
154 businessContent += '<p style="color:#5FB878">(剩' + childItem.residueNumber + '票)</p></li>'; 133 businessContent += '<p style="color:#FF1313">(剩' + childItem.residueNumber + '票)</p></li>';
155 } 134 }
156 135
157 }); 136 });
...@@ -203,7 +182,7 @@ function del(a){ ...@@ -203,7 +182,7 @@ function del(a){
203 } 182 }
204 183
205 function handle(id) { 184 function handle(id) {
206 let bookingDateUL = $(".active1"); 185 let bookingDateUL = $(".active3");
207 let msg = checkAppointment(); 186 let msg = checkAppointment();
208 if (msg != undefined) { 187 if (msg != undefined) {
209 del(msg) 188 del(msg)
...@@ -341,7 +320,7 @@ function cancleAppointment(aid, jgid, periodRulesId, userid) { ...@@ -341,7 +320,7 @@ function cancleAppointment(aid, jgid, periodRulesId, userid) {
341 }),//***关键****** 320 }),//***关键******
342 success: function (result) {//返回数据根据结果进行相应的处理 321 success: function (result) {//返回数据根据结果进行相应的处理
343 if (result.code == 200) { 322 if (result.code == 200) {
344 bookingDateClick($(".active1").attr('id')); 323 bookingDateClick($(".active3").attr('id'));
345 } 324 }
346 } 325 }
347 }); 326 });
......
...@@ -54,8 +54,8 @@ ...@@ -54,8 +54,8 @@
54 <div class="layui-progress-bar" lay-percent="100%"></div> 54 <div class="layui-progress-bar" lay-percent="100%"></div>
55 </div> 55 </div>
56 <li> 56 <li>
57 <p class="activeing"></p> 57 <p class="active"></p>
58 <h5 class="activeingtext"> 58 <h5>
59 预约结果 59 预约结果
60 </h5> 60 </h5>
61 </li> 61 </li>
......