Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
62e57b1c by 焦小希
Options

登陆页面 在线预约接口的开发

1 parent 8c7fac79
Inline Side-by-side
Showing 7 changed files with 171 additions and 34 deletions
...@@ -314,4 +314,71 @@ div.footer .system_service ul li a:hover { ...@@ -314,4 +314,71 @@ div.footer .system_service ul li a:hover {
314 314
315 ::-webkit-scrollbar-thumb:hover { 315 ::-webkit-scrollbar-thumb:hover {
316 background-color: rgba(144,147,153,.5); 316 background-color: rgba(144,147,153,.5);
317 }
...\ No newline at end of file ...\ No newline at end of file
317 }
318
319 /* 登陆样式 by jxx */
320 .PersonLogin{
321 cursor: pointer;
322 }
323 .loginINfo {
324 padding: 50px 50px;
325 }
326 .loginINfo ul {
327 margin-bottom: 15px;
328 }
329 .loginINfo ul li {
330 color: rgb(44, 41, 41);
331 margin-bottom: 10px;
332 }
333 .loginINfo ul li span{
334 font-size: 16px!important;
335 width: 80px;
336 display: inline-block;
337 text-align-last: justify;
338 }
339 .loginINfo h3 {
340 display: inline-block;
341 font-size: 16px;
342 font-weight: 600;
343 }
344 .require{
345 color:red
346 }
347 .requireInfo{
348 color: red;
349 margin-left:95px;
350 font-size: 12px;
351 display: none
352 }
353 .btns{
354 display: flex;
355 justify-content: center;
356 }
357 #loginButton{
358 margin-right: 30px;
359 cursor: pointer;
360 border: 1px solid #dcdfe6;
361 color: #606266;
362 -webkit-appearance: none;
363 text-align: center;
364 box-sizing: border-box;
365 outline: none;
366 transition: .1s;
367 padding: 5px 10px;
368 font-size: 14px;
369 border-radius: 4px;
370 }
371 #registerButton{
372 margin-right: 30px;
373 cursor: pointer;
374 border: 1px solid #dcdfe6;
375 color: #606266;
376 -webkit-appearance: none;
377 text-align: center;
378 box-sizing: border-box;
379 outline: none;
380 transition: .1s;
381 padding: 5px 10px;
382 font-size: 14px;
383 border-radius: 4px;
384 }
......
...@@ -27,6 +27,10 @@ ...@@ -27,6 +27,10 @@
27 margin: 0 auto; 27 margin: 0 auto;
28 margin-top: 50px; 28 margin-top: 50px;
29 } 29 }
30 .active2 {
31 color: #006CFF!important;
32 border-color: #006CFF!important;
33 }
30 .selectCity h2 { 34 .selectCity h2 {
31 display: inline-block; 35 display: inline-block;
32 margin-right: 5px; 36 margin-right: 5px;
...@@ -82,7 +86,7 @@ ...@@ -82,7 +86,7 @@
82 margin-top: 20px!important; 86 margin-top: 20px!important;
83 } 87 }
84 .office_halls { 88 .office_halls {
85 width: 15%; 89 width: 190px;
86 float: left; 90 float: left;
87 margin-right: 2%; 91 margin-right: 2%;
88 } 92 }
...@@ -93,7 +97,7 @@ ...@@ -93,7 +97,7 @@
93 line-height: 16px; 97 line-height: 16px;
94 } 98 }
95 .office_halls li{ 99 .office_halls li{
96 width: 150px; 100 width: 170px;
97 height: 48px; 101 height: 48px;
98 background: #FFFFFF; 102 background: #FFFFFF;
99 border-radius: 4px; 103 border-radius: 4px;
......
...@@ -17,6 +17,7 @@ document.writeln(" <meta name=\'Keywords\' content=\'\' />"); ...@@ -17,6 +17,7 @@ document.writeln(" <meta name=\'Keywords\' content=\'\' />");
17 document.writeln(" <link rel=\'stylesheet\' type=\'text/css\' href=\'"+localhostPaht+"/staticLib/layui/css/layui.css\' />"); 17 document.writeln(" <link rel=\'stylesheet\' type=\'text/css\' href=\'"+localhostPaht+"/staticLib/layui/css/layui.css\' />");
18 document.writeln(" <link type=\'text/css\' rel=\'stylesheet\' href=\'"+localhostPaht+"/staticCss/common.css\' />"); 18 document.writeln(" <link type=\'text/css\' rel=\'stylesheet\' href=\'"+localhostPaht+"/staticCss/common.css\' />");
19 document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticLib/jquery/jquery.min.js\'></script>"); 19 document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticLib/jquery/jquery.min.js\'></script>");
20 document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticJs/login.js\'></script>");
20 document.writeln("</head>"); 21 document.writeln("</head>");
21 document.writeln(""); 22 document.writeln("");
22 document.writeln("<body>"); 23 document.writeln("<body>");
...@@ -36,7 +37,7 @@ document.writeln(" <li>"); ...@@ -36,7 +37,7 @@ document.writeln(" <li>");
36 document.writeln(" <a href=\'"+localhostPaht+"/staticViews/grzx.html\'>个人中心</a>"); 37 document.writeln(" <a href=\'"+localhostPaht+"/staticViews/grzx.html\'>个人中心</a>");
37 document.writeln(" </li>"); 38 document.writeln(" </li>");
38 document.writeln(" <li>"); 39 document.writeln(" <li>");
39 document.writeln(" <a href=\'"+localhostPaht+"/staticViews/register.html\'>注册</a>"); 40 document.writeln(" <p class='PersonLogin'>登录</p>");
40 document.writeln(" </li>"); 41 document.writeln(" </li>");
41 document.writeln(" </ul>"); 42 document.writeln(" </ul>");
42 document.writeln(" </div>"); 43 document.writeln(" </div>");
......
1 function login(){
2 layui.use('layer', function () {
3 layer.open({
4 type: 1,
5 title: '登陆信息',
6 shadeClose: false,
7 area: ['500px', '320px'],
8 scrollbar: false,
9 skin: 'confimInfo',
10 content: '<div class="loginINfo">'
11 + '<ul>'
12 + '<li><span><a class="require">*</a>用户名</span>：<input id="userName"></li>'
13 + '<li><span><a class="require">*</a>密码</span>：<input id="IDcard"></li>'
14 + '</ul>'
15 + '<div class="btns">'
16 +'<button type="button" id="loginButton">登陆</button>'
17 +'<button type="button" id="registerButton">注册</button></div>'
18 + '</div>'
19 });
20 })
21 }
22 // 时间委托解决冒泡
23 $(document).off().on('click', 'p', function(){
24 　　//所执行的代码
25 login()
26 });
27 // 点击登陆的时候
28 $(document).on('click', '#loginButton', function(){
29 layer.closeAll()
30 });
31 // 点击注册的时候
32 $(document).on('click', '#registerButton', function(){
33 // layer.closeAll()
34 window.open(`${localhostPaht}/staticViews/register.html`,'_self')
35 });
36
37
...\ No newline at end of file ...\ No newline at end of file
...@@ -27,6 +27,7 @@ function register(formData) { ...@@ -27,6 +27,7 @@ function register(formData) {
27 layer.msg('注册成功！'); 27 layer.msg('注册成功！');
28 }) 28 })
29 window.open("../index.html","_self") 29 window.open("../index.html","_self")
30 window.history.go(-1)
30 } 31 }
31 } 32 }
32 }); 33 });
......
...@@ -7,7 +7,6 @@ $(function () { ...@@ -7,7 +7,6 @@ $(function () {
7 $('.area_list li').click(function () { 7 $('.area_list li').click(function () {
8 $(".area_list li").removeClass("activeRegion") 8 $(".area_list li").removeClass("activeRegion")
9 $(this).addClass("activeRegion"); 9 $(this).addClass("activeRegion");
10
11 }) 10 })
12 11
13 $(".single_input").on("click", function () { 12 $(".single_input").on("click", function () {
...@@ -23,7 +22,6 @@ $(function () { ...@@ -23,7 +22,6 @@ $(function () {
23 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 22 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
24 //监听导航点击 23 //监听导航点击
25 element.on('nav(demo)', function (elem) { 24 element.on('nav(demo)', function (elem) {
26 //console.log(elem)
27 layer.msg(elem.text()); 25 layer.msg(elem.text());
28 }); 26 });
29 }); 27 });
...@@ -122,9 +120,10 @@ $(function () { ...@@ -122,9 +120,10 @@ $(function () {
122 }); 120 });
123 // 办事大厅点亮 121 // 办事大厅点亮
124 $('.office_halls li').click(function () { 122 $('.office_halls li').click(function () {
125 $('.office_halls li').removeClass('hallActive') 123 // $('.office_halls li').removeClass('hallActive')
126 $(this).addClass('hallActive') 124 // $(this).addClass('hallActive')
127 var index = $(this).index(); 125 var index = $(this).index();
126 console.log(4444,index)
128 if (index == 1) { 127 if (index == 1) {
129 point = new BMap.Point(108.95346, 34.265725); 128 point = new BMap.Point(108.95346, 34.265725);
130 map.openInfoWindow(infoWindow, point); // 开启信息窗口 129 map.openInfoWindow(infoWindow, point); // 开启信息窗口
...@@ -133,16 +132,62 @@ $(function () { ...@@ -133,16 +132,62 @@ $(function () {
133 map.openInfoWindow(infoWindow1, point); 132 map.openInfoWindow(infoWindow1, point);
134 } 133 }
135 }) 134 })
136 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 })
137 infoWindow.addEventListener('close', function (type, target, point) { 141 infoWindow.addEventListener('close', function (type, target, point) {
138 $('.office_halls li').eq(0).removeClass('hallActive') 142 $('.office_halls li').eq(0).removeClass('hallActive')
139 }) 143 })
140 infoWindow1.addEventListener('close', function (type, target, point) { 144 infoWindow1.addEventListener('close', function (type, target, point) {
141 $('.office_halls li').eq(1).removeClass('hallActive') 145 $('.office_halls li').eq(1).removeClass('hallActive')
142 }) 146 })
143 147 $(document).on("click", ".area_list li", function (e) {
148 $(".area_list li").removeClass("active2")
149 $(this).addClass("active2");
150 workdata($(this).index())
151 })
152 // 初始化数据
153 _initData()
144 // 下一步 154 // 下一步
145 $('.nextButton').click(function(){ 155 $('.nextButton').click(function(){
146 window.open("./yysj.html?halloffice="+halloffice+"","_self") 156 window.open("./yysj.html?halloffice="+halloffice+"","_self")
147 }) 157 })
148 })
...\ No newline at end of file ...\ No newline at end of file
158 })
159 function _initData() {
160 var area_list = $(".area_list");
161 area_list.empty();
162 var li
163 $.ajax({
164 type: "get", //提交方式
165 url: portal.api_url + "/reserve/organization/queryAllOrganization?orgType="+1,//路径
166 dataType: "json",
167 //数据，这里使用的是Json格式进行传输
168 success: function (result) {//返回数据根据结果进行相应的处理
169 if (result.code == 200 && result.data != null) {
170 workList = result.data[0].children[0].children
171 for (var i = 0; i < workList.length; i++) {
172 li = '<li data-id="' + workList[i].id + '">' + workList[i].name + '</li>';
173 area_list.append(li);
174 }
175 }
176 }
177 });
178 }
179 // 点击区域获取办事大厅的方法
180 function workdata(index){
181 var office_halls =$('.office_halls')
182 office_halls.empty()
183 var li
184 if(workList[index].children.length > 0){
185 for(var i=0;i<workList[index].children.length; i++){
186 li = '<li data-id="' + workList[index].children[i].id + '">' + workList[index].children[i].name + '</li>';
187 office_halls.append(li)
188 }
189 }
190 }
191 var data = { //数据
192 "workList": []
193 };
......
...@@ -65,13 +65,13 @@ ...@@ -65,13 +65,13 @@
65 <form class="layui-form"> 65 <form class="layui-form">
66 <h2 class="title">省</h2> 66 <h2 class="title">省</h2>
67 <div class="layui-inline layui-select-default" style="margin-right: 10px;"> 67 <div class="layui-inline layui-select-default" style="margin-right: 10px;">
68 <select name="province" class="Pselected" data-area="浙江省"" lay-filter=" province"> 68 <select name="province" class="Pselected" disabled data-area="浙江省"" lay-filter=" province">
69 <option value="">选择省</option> 69 <option value="">选择省</option>
70 </select> 70 </select>
71 </div> 71 </div>
72 <h2>市</h2> 72 <h2>市</h2>
73 <div class="layui-inline selected layui-select-default"> 73 <div class="layui-inline selected layui-select-default">
74 <select name="city" class="Cselected" data-area="杭州市" lay-filter="selectCity"> 74 <select name="city" class="Cselected" disabled data-area="杭州市" lay-filter="selectCity">
75 <option value="">选择市</option> 75 <option value="">选择市</option>
76 </select> 76 </select>
77 </div> 77 </div>
...@@ -79,32 +79,14 @@ ...@@ -79,32 +79,14 @@
79 <div class="area_list_content"> 79 <div class="area_list_content">
80 <h2>区</h2> 80 <h2>区</h2>
81 <ul class="area_list"> 81 <ul class="area_list">
82 <li>新城区</li>
83 <li>新城区</li>
84 <li>新城区</li>
85 <li>新城区</li>
86 <li>新城区</li>
87 <li>新城区</li>
88 <li>新城区</li>
89 <li>新城区</li>
90 <li>新城区</li>
91 <li>新城区</li>
92 <li>新城区</li>
93 <li>新城区</li>
94 <li>新城区</li>
95 <li>新城区</li>
96 <li>新城区</li>
97 </ul> 82 </ul>
98 </div> 83 </div>
99 </div> 84 </div>
100 <!-- ----------------------------------地图api--------------------------------------------------- --> 85 <!-- ----------------------------------地图api--------------------------------------------------- -->
101 <div class="map_content contentBox"> 86 <div class="map_content contentBox">
102 <ul class="office_halls"> 87 <h2>请选择办事大厅</h2>
103 <h2>请选择办事大厅</h2> 88 <ul class="office_halls"></ul>
104 <li>大唐不夜城</li> 89 <div id="container" style="width: 80%;height: 500px;float: right;"></div>
105 <li>南门永宁门</li>
106 </ul>
107 <div id="container" style="width: 80%;height: 500px;"></div>
108 </div> 90 </div>
109 <div class="footer_button"> 91 <div class="footer_button">
110 <button type="button" class="layui-btn layui-btn-normal"> 92 <button type="button" class="layui-btn layui-btn-normal">
......