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 @@ ...@@ -4,6 +4,7 @@
4 } 4 }
5 .central_area { 5 .central_area {
6 min-height:calc(100vh - 207px); 6 min-height:calc(100vh - 207px);
7 margin-top: 20px;
7 } 8 }
8 .navigation_crumbs { 9 .navigation_crumbs {
9 height: 45px; 10 height: 45px;
...@@ -75,3 +76,67 @@ ...@@ -75,3 +76,67 @@
75 .business_module li a:hover { 76 .business_module li a:hover {
76 color: #0091FF; 77 color: #0091FF;
77 } 78 }
79 /* ---------------------------- */
80 .perinfo {
81 height: 140px;
82 padding: 30px;
83 box-sizing: border-box;
84 background: #FFFFFF;
85 border-radius: 4px;
86 }
87 .perinfo_left{
88 float: left;
89 }
90 .perinfo_left ul li {
91 font-size: 16px;
92 color: #6D7278;
93 }
94 .perinfo_left ul li:first-child{
95 margin-top: 7px;
96 color: #4A4A4A;
97 }
98 .perinfo_left ul li:first-child span{
99 font-size: 18px;
100 }
101 .perinfo_left ul li:first-child p {
102 font-size: 18px;
103 }
104 .perinfo_left img {
105 width: 80px;
106 height: 80px;
107 float: left;
108 }
109 .perinfo_left ul {
110 float: left;
111 margin-left: 20px;
112 margin-top: 5px;
113 }
114 .perinfo_left ul li {
115 margin-bottom: 10px;
116 font-size: 16px;
117 }
118 .perinfo_left ul li p{
119 display: inline-block;
120 }
121 .perinfo button {
122 float: right;
123 margin-right: 70px;
124 margin-top: 10px;
125 width: 140px;
126 height: 42px;
127 position: relative;
128 }
129 .perinfo button a {
130 color: #FFFFFF;
131 display: block;
132 width: 140px;
133 height: 42px;
134 text-align: center;
135 line-height: 42px;
136 position: absolute;
137 left: 0;
138 top: 0;
139 }
140 .perinfo button a:hover {
141 color: #FFFFFF;
142 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
12 box-sizing: border-box; 12 box-sizing: border-box;
13 background: #FFFFFF; 13 background: #FFFFFF;
14 border-radius: 4px; 14 border-radius: 4px;
15 border: 1px solid #DEDEDE;
16 } 15 }
17 .perinfo_left{ 16 .perinfo_left{
18 float: left; 17 float: left;
...@@ -104,11 +103,10 @@ ...@@ -104,11 +103,10 @@
104 float: left; 103 float: left;
105 } 104 }
106 .appointment_list li .item_content { 105 .appointment_list li .item_content {
107 border: 1px solid #CBCBCB;
108 border-radius: 4px; 106 border-radius: 4px;
109 border: 1px solid #CBCBCB;
110 font-size: 16px; 107 font-size: 16px;
111 height: 368px; 108 height: 368px;
109 margin-bottom: 25px;
112 } 110 }
113 .item_title { 111 .item_title {
114 height: 48px; 112 height: 48px;
......
...@@ -51,13 +51,13 @@ ...@@ -51,13 +51,13 @@
51 } 51 }
52 .selectCity .area_list li { 52 .selectCity .area_list li {
53 display: inline-block; 53 display: inline-block;
54 width: 140px; 54 width: 100px;
55 height: 48px; 55 height: 36px;
56 border-radius: 3px; 56 border-radius: 3px;
57 margin-right: 15px; 57 margin-right: 15px;
58 color: #9B9B9B; 58 color: #9B9B9B;
59 text-align: center; 59 text-align: center;
60 line-height: 48px; 60 line-height: 36px;
61 margin-bottom: 15px; 61 margin-bottom: 15px;
62 cursor: pointer; 62 cursor: pointer;
63 background: #FFFFFF; 63 background: #FFFFFF;
...@@ -97,16 +97,17 @@ ...@@ -97,16 +97,17 @@
97 line-height: 16px; 97 line-height: 16px;
98 } 98 }
99 .office_halls li{ 99 .office_halls li{
100 width: 170px; 100 width: 155px;
101 height: 48px; 101 height: 40px;
102 background: #FFFFFF; 102 background: #FFFFFF;
103 border-radius: 4px; 103 border-radius: 4px;
104 border: 1px solid #DEDEDE; 104 border: 1px solid #DEDEDE;
105 cursor: pointer; 105 cursor: pointer;
106 text-align: center; 106 text-align: center;
107 line-height: 48px; 107 line-height: 40px;
108 margin-bottom: 10px; 108 margin-bottom: 20px;
109 color: #9B9B9B; 109 color: #9B9B9B;
110 font-size: 14px;
110 } 111 }
111 .office_halls li:hover { 112 .office_halls li:hover {
112 color: #006CFF; 113 color: #006CFF;
...@@ -138,3 +139,31 @@ ...@@ -138,3 +139,31 @@
138 border-color: #0091FF!important; 139 border-color: #0091FF!important;
139 color: #0091FF!important; 140 color: #0091FF!important;
140 } 141 }
142
143 .region_title {
144 height: 25px;
145 padding-left: 8px;
146 font-size: 16px;
147 line-height: 25px;
148 font-weight: 600;
149 margin-bottom: 20px;
150 position: relative;
151 padding-bottom: 10px;
152 color: #4A4A4A;
153 border-bottom: 1px dotted #E6E6E6;
154 width: 100%;
155 }
156 .region_title::before {
157 position:absolute;
158 content:"";
159 left:0;
160 width:4px;
161 height:12px;
162 border-radius: 1px;
163 top: 5px;
164 background-color: #0091FF;
165 }
166 .layui-btn-disabled {
167 background-color: #0091FF!important;
168 opacity: 0.5!important;
169 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -31,21 +31,23 @@ function _initData(currentPage=1) { ...@@ -31,21 +31,23 @@ function _initData(currentPage=1) {
31 let records = result.data.records 31 let records = result.data.records
32 for (var i = 0; i < records.length; i++) { 32 for (var i = 0; i < records.length; i++) {
33 li = '<li>' 33 li = '<li>'
34 li += '<div class="item_content">' 34 li += '<div class="item_content cardItem">'
35 if (records[i].state == '1') { 35 if (records[i].state == '0') {
36 li += '<div class="item_title success">'
37 li += '<h3>预约成功</h3>'
38 li += '<a href="./yyjg.html">查看<i class="layui-icon layui-icon-right"></i></a>'
39 li += '</div>'
40 }else if (records[i].state == '1') {
36 li += '<div class="item_title success">' 41 li += '<div class="item_title success">'
37 li += '<h3>赴约</h3>' 42 li += '<h3>已赴约</h3>'
38 li += '<a>查看<i class="layui-icon layui-icon-right"></i></a>'
39 li += '</div>' 43 li += '</div>'
40 }else if(records[i].state == '2') { 44 }else if(records[i].state == '2') {
41 li += '<div class="item_title overdue">' 45 li += '<div class="item_title overdue">'
42 li += '<h3>逾期</h3>' 46 li += '<h3>已逾期</h3>'
43 li += '<a>查看<i class="layui-icon layui-icon-right"></i></a>'
44 li += '</div>' 47 li += '</div>'
45 }else if(records[i].state == '3') { 48 }else if(records[i].state == '3' || records[i].state == '4') {
46 li += '<div class="item_title cancel">' 49 li += '<div class="item_title cancel">'
47 li += '<h3>取消</h3>' 50 li += '<h3>已取消预约</h3>'
48 li += '<a>查看<i class="layui-icon layui-icon-right"></i></a>'
49 li += '</div>' 51 li += '</div>'
50 } 52 }
51 li += '<ul class="item_info">' 53 li += '<ul class="item_info">'
......
1 layui.use('element', function () {
2 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
3 });
1 $(function () { 4 $(function () {
2 5 // 初始化数据
6 _initData()
7 // 判断是否能选择办事大厅
8 var isSelectofficeHall;
3 var province = undefined 9 var province = undefined
4 var city = undefined 10 var city = undefined
5 // 办事大厅 11 // 办事大厅
...@@ -17,14 +23,6 @@ $(function () { ...@@ -17,14 +23,6 @@ $(function () {
17 } else { 23 } else {
18 } 24 }
19 }); 25 });
20
21 layui.use('element', function () {
22 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
23 //监听导航点击
24 element.on('nav(demo)', function (elem) {
25 layer.msg(elem.text());
26 });
27 });
28 //config的设置是全局的 26 //config的设置是全局的
29 layui.config({ 27 layui.config({
30 base: '../staticJs/' 28 base: '../staticJs/'
...@@ -87,109 +85,95 @@ $(function () { ...@@ -87,109 +85,95 @@ $(function () {
87 alert("定位失败"); 85 alert("定位失败");
88 } 86 }
89 }, { enableHighAccuracy: true }); 87 }, { enableHighAccuracy: true });
90 88 // 点标记添加点击事件
91 // 办事大厅标记 89 // marker.addEventListener('click', function () {
92 var marker = new BMap.Marker(new BMap.Point(108.95346, 34.265725)); 90 // $('.office_halls li').removeClass('hallActive')
93 var marker1 = new BMap.Marker(new BMap.Point(108.953381, 34.256923)); 91 // $('.office_halls li').eq(0).addClass('hallActive')
92 // point = new BMap.Point(108.95346, 34.265725);
93 // map.openInfoWindow(infoWindow, point); // 开启信息窗口
94 // });
95 $(document).on("click", ".office_halls li", function (e) {
96 console.log()
97 $(".office_halls li").removeClass("active2");
98 isSelectofficeHall = true;
99 $('#nextButton').removeClass('layui-btn-disabled');
100 $(this).addClass("active2");
101 console.log($(this).attr('longitude'), $(this).attr('latitude'));
102 point = new BMap.Point($(this).attr('longitude'), $(this).attr('latitude'));
94 // 在地图上添加点标记 103 // 在地图上添加点标记
95 map.addOverlay(marker); 104 map.addOverlay(new BMap.Marker(new BMap.Point($(this).attr('longitude'), $(this).attr('latitude'))));
96 map.addOverlay(marker1); 105 var point = new BMap.Point($(this).attr('longitude'), $(this).attr('latitude'));
97 // 创建信息窗口 106 map.centerAndZoom(point, 14);
98 var opts = { 107 var opts = {
99 width: 200, 108 width: 200,
100 height: 100, 109 height: 100,
101 title: '办事大厅' 110 title: '办事大厅'
102 }; 111 };
103 var infoWindow = new BMap.InfoWindow('西安市大唐不夜城', opts); 112 var infoWindow = new BMap.InfoWindow($(this).text(), opts);
104 var infoWindow1 = new BMap.InfoWindow('南门', opts);
105
106 // 点标记添加点击事件
107 marker.addEventListener('click', function () {
108 $('.office_halls li').removeClass('hallActive')
109 $('.office_halls li').eq(0).addClass('hallActive')
110 point = new BMap.Point(108.95346, 34.265725);
111 map.openInfoWindow(infoWindow, point); // 开启信息窗口
112 });
113 marker1.addEventListener('click', function () {
114 $('.office_halls li').removeClass('hallActive')
115 $('.office_halls li').eq(1).addClass('hallActive')
116 point = new BMap.Point(108.953381, 34.256923);
117 map.openInfoWindow(infoWindow1, point); // 开启信息窗口
118
119
120 });
121 // 办事大厅点亮
122 $('.office_halls li').click(function () {
123 // $('.office_halls li').removeClass('hallActive')
124 // $(this).addClass('hallActive')
125 var index = $(this).index();
126 console.log(4444,index)
127 if (index == 1) {
128 point = new BMap.Point(108.95346, 34.265725);
129 map.openInfoWindow(infoWindow, point); // 开启信息窗口 113 map.openInfoWindow(infoWindow, point); // 开启信息窗口
130 } else if (index == 2) {
131 point = new BMap.Point(108.953381, 34.256923);
132 map.openInfoWindow(infoWindow1, point);
133 }
134 })
135 $(document).on("click", ".office_halls li", function (e) {
136 $(".office_halls li").removeClass("active2")
137 $(this).addClass("active2");
138 var index = $(this).index();
139 console.log(4444,index)
140 jgid = $(this).data('id')
141 console.log(jgid)
142 })
143 infoWindow.addEventListener('close', function (type, target, point) {
144 $('.office_halls li').eq(0).removeClass('hallActive')
145 })
146 infoWindow1.addEventListener('close', function (type, target, point) {
147 $('.office_halls li').eq(1).removeClass('hallActive')
148 }) 114 })
149 $(document).on("click", ".area_list li", function (e) { 115 $(document).on("click", ".area_list li", function (e) {
150 $(".area_list li").removeClass("active2") 116 $(".area_list li").removeClass("active2")
151 $(this).addClass("active2"); 117 $(this).addClass("active2");
152 workdata($(this).index()) 118 if ($(this).index() >= 1) {
119 workdata($(this).index() - 1, data.workList)
120 } else if ($(this).index() == 0) {
121 workdata($(this).index() - 1, data.allList)
122 }
153 }) 123 })
154 // 初始化数据
155 _initData()
156 // 下一步 124 // 下一步
157 $('.nextButton').click(function(){ 125 $('.nextButton').click(function () {
158 window.open("./yysj.html?jgid="+jgid+"","_self") 126 if (isSelectofficeHall) {
127 window.open("./yysj.html?jgid=" + jgid + "", "_self")
128 } else {
129 layer.msg('请先选择办事大厅');
130 }
159 }) 131 })
160 }) 132 })
161 function _initData() { 133 function _initData() {
162 var area_list = $(".area_list"); 134 var area_list = $(".area_list");
163 area_list.empty(); 135 area_list.empty();
164 var li 136 var li;
165 $.ajax({ 137 $.ajax({
166 type: "get", //提交方式 138 type: "get", //提交方式
167 url: portal.api_url + "/reserve/organization/queryAllOrganization?orgType="+1,//路径 139 url: portal.api_url + "/reserve/organization/queryAllOrganization?orgType=" + 1,//路径
168 dataType: "json", 140 dataType: "json",
169 //数据，这里使用的是Json格式进行传输 141 //数据，这里使用的是Json格式进行传输
170 success: function (result) {//返回数据根据结果进行相应的处理 142 success: function (result) {//返回数据根据结果进行相应的处理
171 if (result.code == 200 && result.data != null) { 143 if (result.code == 200 && result.data != null) {
172 workList = result.data[0].children[0].children 144 data.workList = result.data[0].children[0].children;
173 for (var i = 0; i < workList.length; i++) { 145 li = '<li data-id="0" class="active2">全部</li>';
174 li = '<li data-id="' + workList[i].id + '">' + workList[i].name + '</li>';
175 area_list.append(li); 146 area_list.append(li);
147 for (var i = 0; i < data.workList.length; i++) {
148 li = '<li data-id="' + data.workList[i].id + '">' + data.workList[i].name + '</li>';
149 area_list.append(li);
150 if (data.workList[i].children) {
151 data.allList = data.allList.concat(data.workList[i].children)
152 }
176 } 153 }
154 workdata(-1, data.allList)
177 } 155 }
178 } 156 }
179 }); 157 });
180 } 158 }
181 // 点击区域获取办事大厅的方法 159 // 点击区域获取办事大厅的方法
182 function workdata(index){ 160 function workdata(index, workList) {
183 var office_halls =$('.office_halls') 161 var office_halls = $('.office_halls')
184 office_halls.empty() 162 office_halls.empty()
185 var li 163 var li
186 if(workList[index].children.length > 0){ 164 if (index >= 0 && workList[index].children.length > 0) {
187 for(var i=0;i<workList[index].children.length; i++){ 165 for (var i = 0; i < workList[index].children.length; i++) {
188 li = '<li data-id="' + workList[index].children[i].id + '">' + workList[index].children[i].name + '</li>'; 166 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>';
167 office_halls.append(li)
168 }
169 } else if (index == -1) {
170 for (var i = 0; i < workList.length; i++) {
171 li = '<li data-id="' + workList[i].id + '" latitude="' + workList[i].latitude + '" longitude="' + workList[i].longitude + '" >' + workList[i].name + '</li>';
189 office_halls.append(li) 172 office_halls.append(li)
190 } 173 }
191 } 174 }
192 } 175 }
193 var data = { //数据 176 var data = { //数据
194 "workList": [] 177 "workList": [],
178 "allList": []
195 }; 179 };
......
1 <!DOCTYPE html 1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <html xmlns="http://www.w3.org/1999/xhtml">
4
4 <head> 5 <head>
5 <style> 6 <style>
6 </style> 7 </style>
...@@ -22,24 +23,16 @@ ...@@ -22,24 +23,16 @@
22 </div> 23 </div>
23 <!-- -----------------------------------个人中心模块---------------------------------------------- --> 24 <!-- -----------------------------------个人中心模块---------------------------------------------- -->
24 <div class="central_area"> 25 <div class="central_area">
25 <div class="personal_center contentBox"> 26 <div class="perinfo cardItem contentBox">
26 <div class="personal_information layui-bg-gray"> 27 <div class="perinfo_left">
27 <img src="../staticImages/logo-realestate.png" alt="个人中心"> 28 <img src="../staticImages/person.png" alt="">
28 <ul> 29 <ul>
29 <li> 30 <li>
30 <span>姓名：</span> 31 <span>上午好：</span>
31 <p id="username"></p> 32 <p id="username"></p>
32 </li> 33 </li>
33 <li> 34 <li>
34 <span>登录时间：</span> 35 <span>身份证号：</span>
35 <p id="recordtime"></p>
36 </li>
37 <li>
38 <span>联系方式：</span>
39 <p id="phone"></p>
40 </li>
41 <li>
42 <span>身份证号码：</span>
43 <p id="zjhm"></p> 36 <p id="zjhm"></p>
44 </li> 37 </li>
45 </ul> 38 </ul>
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 </div> 22 </div>
23 <!-- -----------------个人信息------------------------ --> 23 <!-- -----------------个人信息------------------------ -->
24 <div class="central_area"> 24 <div class="central_area">
25 <div class="perinfo contentBox"> 25 <div class="perinfo cardItem contentBox">
26 <div class="perinfo_left"> 26 <div class="perinfo_left">
27 <img src="../staticImages/person.png" alt=""> 27 <img src="../staticImages/person.png" alt="">
28 <ul> 28 <ul>
......
...@@ -62,6 +62,7 @@ ...@@ -62,6 +62,7 @@
62 </div> 62 </div>
63 <!-- ---------------------------------------省市办事大厅选择------------------------------------------- --> 63 <!-- ---------------------------------------省市办事大厅选择------------------------------------------- -->
64 <div class="selectCity"> 64 <div class="selectCity">
65 <h2 class="region_title">选择区域</h2>
65 <form class="layui-form"> 66 <form class="layui-form">
66 <h2 class="title">省</h2> 67 <h2 class="title">省</h2>
67 <div class="layui-inline layui-select-default" style="margin-right: 10px;"> 68 <div class="layui-inline layui-select-default" style="margin-right: 10px;">
...@@ -84,7 +85,7 @@ ...@@ -84,7 +85,7 @@
84 </div> 85 </div>
85 <!-- ----------------------------------地图api--------------------------------------------------- --> 86 <!-- ----------------------------------地图api--------------------------------------------------- -->
86 <div class="map_content contentBox"> 87 <div class="map_content contentBox">
87 <h2>请选择办事大厅</h2> 88 <h2 class="region_title">选择办事大厅</h2>
88 <ul class="office_halls"></ul> 89 <ul class="office_halls"></ul>
89 <div id="container" style="width: 80%;height: 500px;float: right;"></div> 90 <div id="container" style="width: 80%;height: 500px;float: right;"></div>
90 </div> 91 </div>
...@@ -94,7 +95,7 @@ ...@@ -94,7 +95,7 @@
94 上一步 95 上一步
95 </a> 96 </a>
96 </button> 97 </button>
97 <button type="button" class="layui-btn nextButton layui-btn-normal"> 98 <button type="button" id="nextButton" class="layui-btn nextButton layui-btn-normal layui-btn-disabled">
98 <a title="下一步"> 99 <a title="下一步">
99 下一步 100 下一步
100 </a> 101 </a>
......