124d2861 by 任超

feat:业务预约

1 parent 3ea369a6
This diff could not be displayed because it is too large.
$(function () {
var Date = undefined;
// 国有房屋无业点击选中记录
var busIndex = undefined
var data = {
'dateList': [
{
week: '星期一',
date: '10月15号',
isSelect: true
},
{
week: '星期二',
date: '10月16号'
},
{
week: '星期三',
date: '10月17号'
},
{
week: '星期二',
date: '10月18号'
},
{
week: '星期五',
date: '10月19号'
},
{
week: '星期六',
date: '10月19号'
}
],
"list": ['上午:09:00-10:00', '上午:10:00-11:00', '上午:11:00-12:00', '下午:14:00-15:00', '下午:15:00-16:00'],
"appint_detail": [
{
'total': 2
},
{
'total': 2
},
{
'total': 0
},
{
'total': 0
},
{
'total': 1
}
]
};
// 获取当前选中的日期
for (var i = 0; i < data.dateList.length; i++) {
if(data.dateList[i].isSelect) {
Date = data.dateList[i].date
}
};
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能,需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
//console.log(elem)
layer.msg(elem.text());
});
});
function a(i) {
$(".swiper-slide").eq(i).addClass('active').siblings().removeClass('active');
}
$('.business_list li').click(function () {
$('.layui_anim_content').show()
var demo = $('.layui-anim')
$('html,body').addClass('ovfHiden');
var othis = demo, anim = othis.data('anim');
othis.removeClass(anim);
setTimeout(function () {
demo.show()
othis.addClass(anim);
});
// 获取当前点击li 的下标
let index = $(this).index() + 1;
busIndex = index
})
layui.use('laytpl', function () {
laytpl = layui.laytpl;
var getTpl = document.getElementById('date').innerHTML
, view = document.getElementById('swiperDate');
laytpl(getTpl).render(data, function (html) {
view.innerHTML = html;
});
var getTpl = document.getElementById('appoint_timeList').innerHTML
, view = document.getElementById('view');
laytpl(getTpl).render(data, function (html) {
view.innerHTML = html;
});
var getTpl = document.getElementById('appint_detail').innerHTML
, view = document.getElementById('view1');
laytpl(getTpl).render(data, function (html) {
view.innerHTML = html;
});
});
var swiper = new Swiper('.swiper-container', {
slidesPerView: 5,
spaceBetween: 20,
slidesPerGroup: 1,
observer: true,
observeParents: true,
on: {
click: function (swiper) {
var index = swiper['clickedIndex'];
a(index);
}
},
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
$(document).on('click', '.able_appint', function () {
$('.able_appint').removeClass("able_appintActive")
$(this).addClass("able_appintActive")
modleClose()
console.log(9999, busIndex)
// $('.business_list li').eq(busIndex-1).addClass('bugActive')
});
});
function modleClose() {
$('.layui_anim_content').hide()
$('.layui-anim').hide()
$('html,body').removeClass('ovfHiden');
}
......@@ -101,3 +101,13 @@
.map_content {
margin-top: 20px;
}
.footer_button {
margin: 20px 0;
text-align: center;
}
.footer_button button {
margin-right: 10px;
}
.footer_button a {
color: #fff;
}
\ No newline at end of file
......
......@@ -150,6 +150,18 @@
<div class="map_content contentBox">
<div id="container" style="width: 100%;height: 500px;"></div>
</div>
<div class="footer_button">
<button type="button" class="layui-btn layui-btn-normal">
<a href="../yyxz/index.html" title="上一步">
上一步
</a>
</button>
<button type="button" class="layui-btn layui-btn-normal">
<a href="../yysj/index.html" title="下一步">
下一步
</a>
</button>
</div>
<!-- ----------------------------------内容模块end-------------------------------------------------- -->
<div class="footer">
<div class="system_service">
......
.yysj_main .navigation .layui-nav-item{
width: 133px;
}
.ovfHiden{overflow: hidden;height: 100%;}
.navigation_crumbs {
height: 45px;
}
.appointment_notice {
margin-top: 30px;
margin-bottom: 30px;
}
.app_progress li {
padding: 0 30px;
line-height: 40px;
background: #eee;
display: inline-block;
color: #fff;
position: relative;
color: black;
cursor: pointer;
}
.app_progress li:hover {
background-color: #1E9FFF!important;
color: #fff!important;
}
.app_progress li:hover:after {
border-left-color: #1E9FFF;
}
.app_progress li:after{
content: '';
display: block;
border-top: 20px solid #fff;
border-bottom: 20px solid #fff;
border-left: 12px solid #eee;
position: absolute;
right:0;
top: 0;
}
.active {
background-color: #1E9FFF!important;
color: #fff!important;
}
.app_progress li.active:after {
border-left-color: #1E9FFF;
}
.line {
width: 80px;
height: 0;
display: inline-block;
border-bottom: 2px dotted#dddddd;
margin-bottom: 4px;
}
/* -------------------------------预约日期---------------------------------------- */
.appoint_time {
width: 1200px;
height: 60px;
margin: 0 auto;
padding: 0 50px;
box-sizing: border-box;
position: relative;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
text-align: center;
color: #fff;
cursor: pointer;
}
.swiper-slide li {
height: 20px;
font-size: 18px;
margin-top: 6px;
}
.active {
background-color: #1E9FFF;
}
.business_choice {
margin: 20px auto;
}
.business_choice .title {
position: relative;
padding-left: 10px;
}
.business_choice .title::before {
content:"";
width:3px;
height:40px;
background-color: #1E9FFF;
position:absolute;
left: 0px;
top: 3px;
}
.business_choice h2{
font-size: 18px;
}
/* -------------分割线----------------------- */
.site-title {
margin: 20px 0;
}
.site-title fieldset {
border-top: 1px solid #eee;
}
.site-title fieldset legend {
margin: 0 auto;
font-size: 20px;
padding: 0 15px;
}
.site-title fieldset legend a:hover {
color: #f46143;
}
.business_list {
width: 1220px!important;
font-size: 0;
margin-left: -10px;
}
.business_list li{
width: 25%;
margin-bottom: 10px;
height: 43px;
line-height: 43px;
text-align: center;
display: inline-block;
font-size: 14px;
padding: 0 10px;
box-sizing: border-box;
}
.business_list li .bugActive {
background-color: #1E9FFF;
color: #fff;
}
.business_list li a{
display: block;
border-radius: 3px;
height: 100%;
background-color: #eee;
box-sizing: content-box;
}
.business_list li a:hover {
background-color: #1E9FFF;
color: #fff;
cursor: pointer;
}
.layui_anim_list {
width: 530px!important;
height: 450px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background-color: #fff;
display: none;
z-index: 102;
padding: 10px;
border-radius: 5px;
}
.layui_anim_content {
display: none;
width: 100%;
height: 100%;
position:fixed;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 101;
}
.layui-anim h2 {
text-align: right;
}
.layui-anim h2 i {
font-size: 18px;
padding: 10px;
cursor: pointer;
}
.appointment_time {
float: left;
margin-right: 60px;
}
.appointment_time li {
width: 200px;
height: 60px;
margin-bottom: 20px;
text-align: center;
line-height: 60px;
}
.content_box {
padding: 10px 20px;
}
.appint_detail li{
width: 200px;
height: 60px;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
box-sizing: border-box;
padding-top: 10px;
}
.appint_detail li span {
height: 20px;
display: block;
}
.appint_detail li p {
height: 20px;
}
.full_engagement {
margin-top: 10px;
}
.appint_detail .layui-bg-gray{
cursor:not-allowed;
}
.able_appint {
border: 1px solid #e2e2e2;
color: #393D49;
}
.able_appint:hover {
background-color: #01AAED;
color: #fff;
}
.able_appintActive {
background-color: #5FB878;
color: #fff;
}
\ No newline at end of file