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 {
float: left;
width: 350px;
position: relative;
margin-left: 338px;
margin-left: 328px;
}
div.top-logo .top_logo_search input {
border-radius: 50px;
......
......@@ -33,16 +33,19 @@
/* -------------------------------预约日期---------------------------------------- */
.appoint_time {
width: 1200px;
height: 90px;
height: 92px;
margin: 0 auto;
padding: 0 130px;
padding: 0 150px;
box-sizing: border-box;
position: relative;
margin-top: 30px;
border-radius: 2px;
}
.swiper-container {
width: 100%;
height: 100%;
height: 92px;
border: 1px solid #DEDEDE;
padding-right: 2px;
}
.swiper-slide {
......@@ -52,21 +55,30 @@
color: #fff;
cursor: pointer;
}
.swiper-wrapper {
box-sizing: border-box;
}
.swiper-slide li:nth-child(1) {
margin-top: 23px;
color: #6D7278;
}
.swiper-slide li:nth-child(2) {
font-size: 16px;
font-weight: 600;
color: #4A4A4A;
}
.swiper-slide li {
height: 20px;
font-size: 14px;
margin-top: 3px;
}
.active1 {
background-color: #1E9FFF;
color: #fff;
.active3 {
border: 1px solid #1E9FFF;
background-image: url(../staticImages/jiao.png);
background-size: 24px 20px;
background-position: right bottom;
background-repeat: no-repeat;
height: 90px;
}
.business_choice {
margin: 20px auto;
......@@ -353,7 +365,6 @@
float: left;
width: 150px;
margin-right: 15px;
height: 90px;
text-align: center;
background: #FCFCFC;
border-radius: 2px;
......@@ -361,6 +372,8 @@
box-sizing: border-box;
padding-top: 28px;
color: #6D7278;
height: 90px;
font-size: 16px;
}
.business_item{
margin-bottom: 10px;
......@@ -384,6 +397,8 @@
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #DEDEDE;
padding-top: 23px;
font-size: 14px;
}
.business_item ul li .mask {
position: absolute;
......@@ -401,7 +416,7 @@
background-color: #ccc;
}
.business_item ul li h3 {
margin-bottom: 5px;
margin-bottom: 10px;
}
.business_item ul li p {
font-size: 12px;
......@@ -409,8 +424,60 @@
line-height: 14px;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
right: 45px;
right: -6px;
width: 150px;
height: 92px;
top: 22px;
border-radius: 2px;
border: 1px solid #DEDEDE;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
left: 45px;
left: -1px;
width: 150px;
height: 92px;
top: 22px;
border-radius: 2px;
border: 1px solid #DEDEDE;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 16px;
border: 1px solid #6D7278;
width: 21px;
height: 21px;
line-height: 21px;
border-radius: 50%;
text-align: center;
}
.viewDetails {
color: #0091FF;
cursor: pointer;
margin-bottom: 5px;
font-size: 14px!important;
}
.appointmentNow {
color: #0091FF;
cursor: pointer;
font-size: 14px!important;
margin-bottom: 5px;
}
.reserved {
background: rgba(47, 165, 255, 0.06)!important;
border: 1px solid #0091FF!important;
padding-top: 18px!important;
background-image: url(../staticImages/jiao.png)!important;;
background-size: 24px 20px!important;;
background-position: right bottom!important;;
background-repeat: no-repeat!important;;
}
.reserved h3 {
margin-bottom: 6px!important;
}
.appointmentAvailable {
padding-top: 18px!important;
}
.appointmentAvailable:hover {
border: 1px solid #0091FF!important;
}
.appointmentAvailable h3 {
margin-bottom: 6px!important;
}
\ No newline at end of file
......
var bustime = undefined;
layui.use("element", function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
});
$(function () {
var Date = undefined;
var appuintText = undefined;
getAppointmentDay();
layui.use("element", function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on("nav(demo)", function (elem) {
layer.msg(elem.text());
});
});
// function a(i) {
// Date = data.dateList[i].jyjh;
// bookingDate = data.dateList[i].bookingDate;
// bustime = data.dateList[i].week;
// //getAppointmentPeriodAndBusiness()
// $(".swiper-slide")
// .eq(i)
// .addClass("active1")
// .siblings()
// .removeClass("active1");
// }
var swiper = new Swiper(".swiper-container", {
slidesPerView: 5,
spaceBetween: 20,
spaceBetween: 0,
slidesPerGroup: 1,
observer: true,
observeParents: true,
on: {
click: function (swiper) {
var index = swiper["clickedIndex"];
//a(index);
},
},
// on: {
// click: function (swiper) {
// var index = swiper["clickedIndex"];
// //a(index);
// },
// },
loopFillGroupWithBlank: true,
navigation: {
nextEl: ".swiper-button-next",
......@@ -73,7 +52,7 @@ function getAppointmentDay() {
function RenderbookingDateList(data) {
let DateConnect = "";
$.each(data.listTime, function (index, item) {
DateConnect += '<ul id="' + item.bookingDate + '" class="swiper-slide layui-bg-gray" onclick="bookingDateClick(this.id)">';
DateConnect += '<ul id="' + item.bookingDate + '" class="swiper-slide" onclick="bookingDateClick(this.id)">';
DateConnect += '<li>' + item.week + '</li><li>' + item.jyjh + '</li>';
DateConnect += '</ul>';
});
......@@ -82,8 +61,8 @@ function RenderbookingDateList(data) {
//预约日期点击事件
function bookingDateClick(id) {
$(".layui-bg-gray").removeClass("active1");
$("#" + id).addClass("active1");
$(".swiper-slide").removeClass("active3");
$("#" + id).addClass("active3");
getAppointmentPeriodAndBusiness(id);
}
......@@ -136,22 +115,22 @@ function RenderBusinessList(data) {
//存在预约记录
if (existRecord) {
if (data.choosePeriodRulesId == childItem.periodRulesId) {
businessContent += '<li class="isAppoint" style="border: 1px solid red ;" data-id="' + childItem.periodRulesId + '">';
businessContent += '<li class="isAppoint reserved" data-id="' + childItem.periodRulesId + '">';
businessContent += '<h3>' + childItem.shortName + '</h3>';
businessContent += '<input type="button" value="查看详情" id="' + data.appointmentId + '" dataName="' + childItem.shortName + '" onclick="getAppointmentDetail(this.id)"/>';
businessContent += '<p class="viewDetails" id="' + data.appointmentId + '" dataName="' + childItem.shortName + '" onclick="getAppointmentDetail(this.id)">查看详情</p>';
}
else {
businessContent += '<li class="isAppoint">';
businessContent += '<li class="isAppoint" style="background: #FCFCFC">';
businessContent += '<h3>' + childItem.shortName + '</h3>';
}
businessContent += '<p style="color:#5FB878">(剩' + childItem.residueNumber + '票)</p></li>';
businessContent += '<p style="color:#FF1313">(剩' + childItem.residueNumber + '票)</p></li>';
} else {
businessContent += '<li class="isAppoint" data-id="' + childItem.periodRulesId + '">';
businessContent += '<li class="appointmentAvailable" data-id="' + childItem.periodRulesId + '" id="' + childItem.periodRulesId + '" periodRulesId="' + childItem.periodRulesId + '" onclick="handle(this.id)">';
businessContent += '<h3>' + childItem.shortName + '</h3>';
if (childItem.residueNumber > 0) {
businessContent += '<input type="button" value="立即预约" id="' + childItem.periodRulesId + '" periodRulesId="' + childItem.periodRulesId + '" onclick="handle(this.id)"/>';
businessContent += '<p class="appointmentNow">立即预约</p>';
}
businessContent += '<p style="color:#5FB878">(剩' + childItem.residueNumber + '票)</p></li>';
businessContent += '<p style="color:#FF1313">(剩' + childItem.residueNumber + '票)</p></li>';
}
});
......@@ -203,7 +182,7 @@ function del(a){
}
function handle(id) {
let bookingDateUL = $(".active1");
let bookingDateUL = $(".active3");
let msg = checkAppointment();
if (msg != undefined) {
del(msg)
......@@ -341,7 +320,7 @@ function cancleAppointment(aid, jgid, periodRulesId, userid) {
}),//***关键******
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200) {
bookingDateClick($(".active1").attr('id'));
bookingDateClick($(".active3").attr('id'));
}
}
});
......
......@@ -54,8 +54,8 @@
<div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<li>
<p class="activeing"></p>
<h5 class="activeingtext">
<p class="active"></p>
<h5>
预约结果
</h5>
</li>
......