Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
72d473ec by 任超
Options

style:选择区域

1 parent 1aa6bfa8
Inline Side-by-side
Showing 8 changed files with 183 additions and 111 deletions
......@@ -4,6 +4,7 @@
}
.central_area {
min-height:calc(100vh - 207px);
margin-top: 20px;
}
.navigation_crumbs {
height: 45px;
......@@ -75,3 +76,67 @@
.business_module li a:hover {
color: #0091FF;
}
/* ---------------------------- */
.perinfo {
height: 140px;
padding: 30px;
box-sizing: border-box;
background: #FFFFFF;
border-radius: 4px;
}
.perinfo_left{
float: left;
}
.perinfo_left ul li {
font-size: 16px;
color: #6D7278;
}
.perinfo_left ul li:first-child{
margin-top: 7px;
color: #4A4A4A;
}
.perinfo_left ul li:first-child span{
font-size: 18px;
}
.perinfo_left ul li:first-child p {
font-size: 18px;
}
.perinfo_left img {
width: 80px;
height: 80px;
float: left;
}
.perinfo_left ul {
float: left;
margin-left: 20px;
margin-top: 5px;
}
.perinfo_left ul li {
margin-bottom: 10px;
font-size: 16px;
}
.perinfo_left ul li p{
display: inline-block;
}
.perinfo button {
float: right;
margin-right: 70px;
margin-top: 10px;
width: 140px;
height: 42px;
position: relative;
}
.perinfo button a {
color: #FFFFFF;
display: block;
width: 140px;
height: 42px;
text-align: center;
line-height: 42px;
position: absolute;
left: 0;
top: 0;
}
.perinfo button a:hover {
color: #FFFFFF;
}
\ No newline at end of file
......
......@@ -12,7 +12,6 @@
box-sizing: border-box;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #DEDEDE;
}
.perinfo_left{
float: left;
......@@ -104,11 +103,10 @@
float: left;
}
.appointment_list li .item_content {
border: 1px solid #CBCBCB;
border-radius: 4px;
border: 1px solid #CBCBCB;
font-size: 16px;
height: 368px;
margin-bottom: 25px;
}
.item_title {
height: 48px;
......
......@@ -51,13 +51,13 @@
}
.selectCity .area_list li {
display: inline-block;
width: 140px;
height: 48px;
width: 100px;
height: 36px;
border-radius: 3px;
margin-right: 15px;
color: #9B9B9B;
text-align: center;
line-height: 48px;
line-height: 36px;
margin-bottom: 15px;
cursor: pointer;
background: #FFFFFF;
......@@ -97,16 +97,17 @@
line-height: 16px;
}
.office_halls li{
width: 170px;
height: 48px;
width: 155px;
height: 40px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #DEDEDE;
cursor: pointer;
text-align: center;
line-height: 48px;
margin-bottom: 10px;
line-height: 40px;
margin-bottom: 20px;
color: #9B9B9B;
font-size: 14px;
}
.office_halls li:hover {
color: #006CFF;
......@@ -138,3 +139,31 @@
border-color: #0091FF!important;
color: #0091FF!important;
}
.region_title {
height: 25px;
padding-left: 8px;
font-size: 16px;
line-height: 25px;
font-weight: 600;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
color: #4A4A4A;
border-bottom: 1px dotted #E6E6E6;
width: 100%;
}
.region_title::before {
position:absolute;
content:"";
left:0;
width:4px;
height:12px;
border-radius: 1px;
top: 5px;
background-color: #0091FF;
}
.layui-btn-disabled {
background-color: #0091FF!important;
opacity: 0.5!important;
}
\ No newline at end of file
......
......@@ -31,21 +31,23 @@ function _initData(currentPage=1) {
let records = result.data.records
for (var i = 0; i < records.length; i++) {
li = '<li>'
li += '<div class="item_content">'
if (records[i].state == '1') {
li += '<div class="item_content cardItem">'
if (records[i].state == '0') {
li += '<div class="item_title success">'
li += '<h3>预约成功</h3>'
li += '<a href="./yyjg.html">查看<i class="layui-icon layui-icon-right"></i></a>'
li += '</div>'
}else if (records[i].state == '1') {
li += '<div class="item_title success">'
li += '<h3>赴约</h3>'
li += '<a>查看<i class="layui-icon layui-icon-right"></i></a>'
li += '<h3>已赴约</h3>'
li += '</div>'
}else if(records[i].state == '2') {
li += '<div class="item_title overdue">'
li += '<h3>逾期</h3>'
li += '<a>查看<i class="layui-icon layui-icon-right"></i></a>'
li += '<h3>已逾期</h3>'
li += '</div>'
}else if(records[i].state == '3') {
}else if(records[i].state == '3' || records[i].state == '4') {
li += '<div class="item_title cancel">'
li += '<h3>取消</h3>'
li += '<a>查看<i class="layui-icon layui-icon-right"></i></a>'
li += '<h3>已取消预约</h3>'
li += '</div>'
}
li += '<ul class="item_info">'
......
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
});
$(function () {
// 初始化数据
_initData()
// 判断是否能选择办事大厅
var isSelectofficeHall;
var province = undefined
var city = undefined
// 办事大厅
......@@ -17,14 +23,6 @@ $(function () {
} else {
}
});
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
layer.msg(elem.text());
});
});
//config的设置是全局的
layui.config({
base: '../staticJs/'
......@@ -87,109 +85,95 @@ $(function () {
alert("定位失败");
}
}, { enableHighAccuracy: true });
// 办事大厅标记
var marker = new BMap.Marker(new BMap.Point(108.95346, 34.265725));
var marker1 = new BMap.Marker(new BMap.Point(108.953381, 34.256923));
// 点标记添加点击事件
// marker.addEventListener('click', function () {
// $('.office_halls li').removeClass('hallActive')
// $('.office_halls li').eq(0).addClass('hallActive')
// point = new BMap.Point(108.95346, 34.265725);
// map.openInfoWindow(infoWindow, point); // 开启信息窗口
// });
$(document).on("click", ".office_halls li", function (e) {
console.log()
$(".office_halls li").removeClass("active2");
isSelectofficeHall = true;
$('#nextButton').removeClass('layui-btn-disabled');
$(this).addClass("active2");
console.log($(this).attr('longitude'), $(this).attr('latitude'));
point = new BMap.Point($(this).attr('longitude'), $(this).attr('latitude'));
// 在地图上添加点标记
map.addOverlay(marker);
map.addOverlay(marker1);
// 创建信息窗口
map.addOverlay(new BMap.Marker(new BMap.Point($(this).attr('longitude'), $(this).attr('latitude'))));
var point = new BMap.Point($(this).attr('longitude'), $(this).attr('latitude'));
map.centerAndZoom(point, 14);
var opts = {
width: 200,
height: 100,
title: '办事大厅'
};
var infoWindow = new BMap.InfoWindow('西安市大唐不夜城', opts);
var infoWindow1 = new BMap.InfoWindow('南门', opts);
// 点标记添加点击事件
marker.addEventListener('click', function () {
$('.office_halls li').removeClass('hallActive')
$('.office_halls li').eq(0).addClass('hallActive')
point = new BMap.Point(108.95346, 34.265725);
map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
marker1.addEventListener('click', function () {
$('.office_halls li').removeClass('hallActive')
$('.office_halls li').eq(1).addClass('hallActive')
point = new BMap.Point(108.953381, 34.256923);
map.openInfoWindow(infoWindow1, point); // 开启信息窗口
});
// 办事大厅点亮
$('.office_halls li').click(function () {
// $('.office_halls li').removeClass('hallActive')
// $(this).addClass('hallActive')
var index = $(this).index();
console.log(4444,index)
if (index == 1) {
point = new BMap.Point(108.95346, 34.265725);
var infoWindow = new BMap.InfoWindow($(this).text(), opts);
map.openInfoWindow(infoWindow, point); // 开启信息窗口
} else if (index == 2) {
point = new BMap.Point(108.953381, 34.256923);
map.openInfoWindow(infoWindow1, point);
}
})
$(document).on("click", ".office_halls li", function (e) {
$(".office_halls li").removeClass("active2")
$(this).addClass("active2");
var index = $(this).index();
console.log(4444,index)
jgid = $(this).data('id')
console.log(jgid)
})
infoWindow.addEventListener('close', function (type, target, point) {
$('.office_halls li').eq(0).removeClass('hallActive')
})
infoWindow1.addEventListener('close', function (type, target, point) {
$('.office_halls li').eq(1).removeClass('hallActive')
})
$(document).on("click", ".area_list li", function (e) {
$(".area_list li").removeClass("active2")
$(this).addClass("active2");
workdata($(this).index())
if ($(this).index() >= 1) {
workdata($(this).index() - 1, data.workList)
} else if ($(this).index() == 0) {
workdata($(this).index() - 1, data.allList)
}
})
// 初始化数据
_initData()
// 下一步
$('.nextButton').click(function(){
window.open("./yysj.html?jgid="+jgid+"","_self")
$('.nextButton').click(function () {
if (isSelectofficeHall) {
window.open("./yysj.html?jgid=" + jgid + "", "_self")
} else {
layer.msg('请先选择办事大厅');
}
})
})
function _initData() {
var area_list = $(".area_list");
area_list.empty();
var li
var li;
$.ajax({
type: "get", //提交方式
url: portal.api_url + "/reserve/organization/queryAllOrganization?orgType="+1,//路径
url: portal.api_url + "/reserve/organization/queryAllOrganization?orgType=" + 1,//路径
dataType: "json",
//数据，这里使用的是Json格式进行传输
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200 && result.data != null) {
workList = result.data[0].children[0].children
for (var i = 0; i < workList.length; i++) {
li = '<li data-id="' + workList[i].id + '">' + workList[i].name + '</li>';
data.workList = result.data[0].children[0].children;
li = '<li data-id="0" class="active2">全部</li>';
area_list.append(li);
for (var i = 0; i < data.workList.length; i++) {
li = '<li data-id="' + data.workList[i].id + '">' + data.workList[i].name + '</li>';
area_list.append(li);
if (data.workList[i].children) {
data.allList = data.allList.concat(data.workList[i].children)
}
}
workdata(-1, data.allList)
}
}
});
}
// 点击区域获取办事大厅的方法
function workdata(index){
var office_halls =$('.office_halls')
function workdata(index, workList) {
var office_halls = $('.office_halls')
office_halls.empty()
var li
if(workList[index].children.length > 0){
for(var i=0;i<workList[index].children.length; i++){
li = '<li data-id="' + workList[index].children[i].id + '">' + workList[index].children[i].name + '</li>';
if (index >= 0 && workList[index].children.length > 0) {
for (var i = 0; i < workList[index].children.length; i++) {
li = '<li data-id="' + workList[index].children[i].id + '" latitude="' + workList[index].children[i].latitude + '" longitude="' + workList[index].children[i].longitude + '" >' + workList[index].children[i].name + '</li>';
office_halls.append(li)
}
} else if (index == -1) {
for (var i = 0; i < workList.length; i++) {
li = '<li data-id="' + workList[i].id + '" latitude="' + workList[i].latitude + '" longitude="' + workList[i].longitude + '" >' + workList[i].name + '</li>';
office_halls.append(li)
}
}
}
var data = { //数据
"workList": []
"workList": [],
"allList": []
};
......
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
......@@ -22,24 +23,16 @@
</div>
<!-- -----------------------------------个人中心模块---------------------------------------------- -->
<div class="central_area">
<div class="personal_center contentBox">
<div class="personal_information layui-bg-gray">
<img src="../staticImages/logo-realestate.png" alt="个人中心">
<div class="perinfo cardItem contentBox">
<div class="perinfo_left">
<img src="../staticImages/person.png" alt="">
<ul>
<li>
<span>姓名：</span>
<span>上午好：</span>
<p id="username"></p>
</li>
<li>
<span>登录时间：</span>
<p id="recordtime"></p>
</li>
<li>
<span>联系方式：</span>
<p id="phone"></p>
</li>
<li>
<span>身份证号码：</span>
<span>身份证号：</span>
<p id="zjhm"></p>
</li>
</ul>
......
......@@ -22,7 +22,7 @@
</div>
<!-- -----------------个人信息------------------------ -->
<div class="central_area">
<div class="perinfo contentBox">
<div class="perinfo cardItem contentBox">
<div class="perinfo_left">
<img src="../staticImages/person.png" alt="">
<ul>
......
......@@ -62,6 +62,7 @@
</div>
<!-- ---------------------------------------省市办事大厅选择------------------------------------------- -->
<div class="selectCity">
<h2 class="region_title">选择区域</h2>
<form class="layui-form">
<h2 class="title">省</h2>
<div class="layui-inline layui-select-default" style="margin-right: 10px;">
......@@ -84,7 +85,7 @@
</div>
<!-- ----------------------------------地图api--------------------------------------------------- -->
<div class="map_content contentBox">
<h2>请选择办事大厅</h2>
<h2 class="region_title">选择办事大厅</h2>
<ul class="office_halls"></ul>
<div id="container" style="width: 80%;height: 500px;float: right;"></div>
</div>
......@@ -94,7 +95,7 @@
上一步
</a>
</button>
<button type="button" class="layui-btn nextButton layui-btn-normal">
<button type="button" id="nextButton" class="layui-btn nextButton layui-btn-normal layui-btn-disabled">
<a title="下一步">
下一步
</a>
......