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 () {
var province = undefined
var city = undefined
// 办事大厅
var halloffice = '不夜城'
$('.area_list li').click(function () {
$(".area_list li").removeClass("active1")
$(this).addClass("active1");
......@@ -139,4 +140,9 @@ $(function () {
infoWindow1.addEventListener('close', function (type, target, point) {
$('.office_halls li').eq(1).removeClass('hallActive')
})
// 下一步
$('.nextButton').click(function(){
window.open("../yysj/index.html?halloffice="+halloffice+"","_self")
})
})
\ No newline at end of file
......
......@@ -5,12 +5,13 @@ $(function () {
var bustime = undefined;
// 国有房屋无业点击选中记录
var busIndex = undefined
// 办事中心
var halloffice = undefined
var data = {
'dateList': [
{
week: '星期一',
date: '10月15号',
isSelect: true
date: '10月15号'
},
{
week: '星期二',
......@@ -33,30 +34,40 @@ $(function () {
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": [
"busList": [{
startTime: "09:30",
endTime: "10:30",
orgBusinessList: [
{
'total': 2
shortName: "一般抵押登记",
isyy: 1,
residueNumber: "约满"
},
{
'total': 2
shortName: "查封/解封登记",
isyy: 1,
residueNumber: "约满"
},
{
'total': 0
shortName: "有证房抵押首次登记",
isyy: 1,
residueNumber: "约满"
},
{
'total': 0
},
{
'total': 1
shortName: "商品房抵押登记",
isyy: 0,
residueNumber: "余3位"
}
]
}],
};
// 获取当前选中的日期
data.dateList[0].isSelect = true
for (var i = 0; i < data.dateList.length; i++) {
if (data.dateList[i].isSelect) {
Date = data.dateList[i].date
bustime = data.dateList[i].week
}
};
......@@ -69,50 +80,22 @@ $(function () {
});
function a(i) {
Date = data.dateList[i].date
bustime = data.dateList[i].week
$(".swiper-slide").eq(i).addClass('active').siblings().removeClass('active');
}
$('.business_list li').click(function () {
// 获取元素
appuintText = $(this).find('a').text()
$('.layui_anim_list').removeClass('disnone')
$('.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()
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 getTpl1 = document.getElementById('business_item').innerHTML
, view1 = document.getElementById('business_list');
laytpl(getTpl1).render(data, function (html) {
view1.innerHTML = html;
});
});
var swiper = new Swiper('.swiper-container', {
......@@ -133,52 +116,7 @@ $(function () {
prevEl: '.swiper-button-prev',
},
});
$(document).on('click', '.able_appint', function () {
$('.able_appint').removeClass("able_appintActive")
$(this).addClass("able_appintActive")
let index = $(this).index()
// 获取当前选中的日期
bustime = data.list[index]
modleClose()
$(".business_list li .allowedMask").remove()
$(".business_list li .reserved").remove()
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>"
$(".business_list li").append('<div class="allowedMask"></div>');
$(".business_list li:eq(" + busIndex + ") a").removeClass('not-allowed')
$(".business_list li").eq(busIndex).append(str);
$(".business_list li:eq(" + busIndex + ") a").hide()
});
// 删除预约记录
$(document).on('click', '.appintDel', function (event) {
$('.layui_anim_list').addClass('disnone')
$('.able_appint').removeClass('able_appintActive')
layui.use('layer', function () {
var layer = layui.layer;
layer.confirm('此操作将删除预约记录，是否继续', {
btn: ['取消', '继续'] //按钮
}, function () {
layer.closeAll();
modleClose()
}, function () {
modleClose()
$(".business_list li a").show()
$(".business_list li .allowedMask").remove()
$(".business_list li .reserved").remove()
});
});
});
$(document).on('click', '.allowedMask', function () {
$('.layui_anim_list').addClass('disnone')
modleClose()
});
// 下一步确认
$('.nextButton').click(function () {
if ($('.business_list li').has('.reserved').length) {
function handle(){
layui.use('layer', function () {
layer.open({
type: 1,
......@@ -193,25 +131,23 @@ $(function () {
+ '<li><span>身份证号</span>：610124193335522</li>'
+ '<li><span>联系电话</span>：18740677386</li>'
+ '</ul>'
+ '<div class="listItem"><h3>大厅名称：</h3>碑林区不动产办事中心</div>'
+ '<div class="listItem"><h3>大厅名称：</h3>'+halloffice+'</div>'
+ '<div class="listItem"><h3>预约业务：</h3>' + appuintText + '</div>'
+ '<div class="listItem"><h3>预约时间：</h3>' + Date +'&nbsp;&nbsp;'+bustime+'</div>'
+ '<div class="listItem"><h3>预约时间：</h3>' + Date + '&nbsp;&nbsp;' + bustime + '</div>'
+ '<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>'
+ '</div>'
});
})
} else {
layui.use('layer', function () {
layer.alert('请先选择相应业务', {
skin: 'layui-layer-molv' //样式类名
, closeBtn: 0
}, function () {
layer.closeAll()
});
})
}
// 业务选择
$(document).on('click', '.business_item ul li', function () {
halloffice = GetRequest()
appuintText = $(this).find('h3').text()
handle()
});
})
$(document).on('click', '.cancel', function () {
layer.closeAll()
})
......@@ -219,8 +155,15 @@ $(function () {
window.location.href = "../yyjg/index.html"
})
});
function modleClose() {
$('.layui_anim_content').hide()
$('.layui-anim').hide()
$('html,body').removeClass('ovfHiden');
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("?");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
}
}
return theRequest.halloffice;
}
\ No newline at end of file
......
......@@ -147,8 +147,8 @@
上一步
</a>
</button>
<button type="button" class="layui-btn layui-btn-normal">
<a href="../yysj/index.html" title="下一步">
<button type="button" class="layui-btn nextButton layui-btn-normal">
<a title="下一步">
下一步
</a>
</button>
......
......@@ -340,3 +340,65 @@
height: 30px;
line-height: 30px;
}
.layui-layer-ico {
background: none!important;
position: relative;
}
.layui-layer-ico::after {
content: '\2716';
position: absolute;
left: 0;
top: -2px;
font-size: 14px;
color: #fff;
}
/* ----------------------------------------------- */
.business_item .item_time {
float: left;
width: 200px;
background-color: #0091FF;
color: #fff;
margin-right: 15px;
height: 130px;
text-align: center;
line-height: 130px;
}
.business_item ul {
display: inline-block;
width: 80%;
}
.business_item ul li {
width: 33%;
display: inline-block;
background-color:#eee;
color: #fff;
border-radius: 3px;
text-align: center;
margin: 5px 0;
color: #666;
cursor: pointer;
padding: 7px 0;
position: relative;
}
.business_item ul li .mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.business_item ul .item_appoint:hover {
background-color: #0091FF;
color: #fff;
}
.isAppoint {
cursor:not-allowed!important;
}
.business_item ul li h3 {
margin-bottom: 5px;
}
.business_item ul li p {
font-size: 12px;
text-align: center;
line-height: 14px;
}
\ No newline at end of file
......
......@@ -18,7 +18,6 @@
<link rel="stylesheet" type="text/css" href="../../staticCss/common.css" />
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div class="yysj_main">
<div class="subject top-logo">
......@@ -108,74 +107,25 @@
</div>
<!-- ----------------------------------业务选择start----------------------------------------------- -->
<div class="business_choice contentBox">
<div class="title">
<h2>选择业务</h2>
<p>(请选择您要办理的业务)</p>
</div>
<div class="site-title">
<fieldset>
<legend>
<a href="" name="fieldset">
国有房屋
业务预约
</a>
</legend>
</fieldset>
</div>
<ul class="business_list">
<li>
<a title="二手房转移登记">
二手房转移登记
</a>
</li>
<li>
<a title="有证房抵押首次登记">
有证房抵押首次登记/注销登记
</a>
</li>
<li>
<a title="解封登记">
查封/解封登记
</a>
</li>
<li>
<a title="解封登记">
查封/解封登记
</a>
</li>
<li>
<a title="证房抵押首次登记">
证房抵押首次登记/注销登记
</a>
</li>
<li>
<a title="二手房转移登记">
二手房转移登记
</a>
</li>
</ul>
<div id="business_list">
</div>
<div class="layui-anim layui_anim_list" data-anim="layui-anim-scale">
<h2>
<i class="layui-icon layui-icon-close" onclick="modleClose()"></i>
</h2>
<ul class="content_box">
<li id="view"></li>
<li id="view1"></li>
</ul>
</div>
<div class="layui_anim_content"></div>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">
<a href="../xxqu/index.html" title="上一步">
<a href="../xzqy/index.html" title="上一步">
上一步
</a>
</button>
<button type="button" class="layui-btn layui-btn-normal nextButton">
<a title="下一步">
下一步
</a>
</button>
</div>
</div>
<!-- ----------------------------------内容模块的end----------------------------------------------- -->
......@@ -273,37 +223,45 @@
{{# }); }}
</script>
<script id="appoint_timeList" type="text/html">
<ul class="appointment_time">
{{# layui.each(d.list, function(index, item){ }}
<li class="layui-bg-gray">
{{item}}
</li>
{{# }); }}
{{# if(d.list.length === 0){ }}
无数据
<script id="business_item" type="text/html">
{{# layui.each(d.busList, function(index, item){ }}
<div class="business_item">
<div class="item_time">
<span>上午</span>
<span>{{item.startTime}}</span>
<span>-</span>
<span>{{item.endTime}}</span>
</div>
<ul>
{{# layui.each(item.orgBusinessList, function(index1, item1){ }}
{{# if(item1.isyy==0){ }}
<li class="item_appoint">
<h3>
{{item1.shortName}}
</h3>
{{# if(item1.isyy==1){ }}
<p style="color:#FF5722">({{item1.residueNumber}})</p>
{{# } }}
{{# if(item1.isyy==0){ }}
<p style="color:#5FB878">({{item1.residueNumber}})</p>
{{# } }}
</ul>
</script>
<script id="appint_detail" type="text/html">
<ol class="appint_detail">
{{# layui.each(d.appint_detail, function(index, item){ }}
{{# if(item.total > 0){ }}
<li class="able_appint">
<span>可预约</span>
<p>余{{item.total}}位</p>
</li>
{{# } }}
{{# if(item.total == 0){ }}
<li class="layui-bg-gray">
<p class="full_engagement">已约满</p>
{{# if(item1.isyy==1){ }}
<li class="isAppoint">
<h3>
{{item1.shortName}}
</h3>
{{# if(item1.isyy==1){ }}
<p style="color:#FF5722">({{item1.residueNumber}})</p>
{{# } }}
{{# if(item1.isyy==0){ }}
<p style="color:#5FB878">({{item1.residueNumber}})</p>
{{# } }}
</li>
{{# } }}
{{# }); }}
{{# if(d.list.length === 0){ }}
无数据
{{# } }}
</ol>
</ul>
</div>
{{# }); }}
</script>
\ No newline at end of file
......