Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
4fe05c87 by 任超
Options

style:办事指南

1 parent d0dfb127
Inline Side-by-side
Showing 7 changed files with 130 additions and 151 deletions
...@@ -187,4 +187,19 @@ ...@@ -187,4 +187,19 @@
187 .active2 { 187 .active2 {
188 color: #006CFF!important; 188 color: #006CFF!important;
189 border-color: #006CFF!important; 189 border-color: #006CFF!important;
190 }
191 .itemButton {
192 display: inline-block;
193 float: right;
194 width: 170px;
195 }
196 .itemButton a {
197 display: inline-block;
198 }
199 .itemButton a:nth-child(1) {
200 position: relative;
201 left: 15px;
202 }
203 .itemButton button {
204 display: inline-block;
190 } 205 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -6,43 +6,27 @@ $(function () { ...@@ -6,43 +6,27 @@ $(function () {
6 var element = layui.element; 6 var element = layui.element;
7 //监听Tab切换，以改变地址hash值 7 //监听Tab切换，以改变地址hash值
8 element.on('tab(navtab)', function () { 8 element.on('tab(navtab)', function () {
9 if (this.getAttribute('lay-id') == 1) { 9 let idUum = undefined
10 $("body,html").animate({ scrollTop: $(".tudi").offset().top }); 10 idUum = this.getAttribute('lay-id')-1
11 $(".online_business h2").removeClass('titleActive') 11 $(".layui-tab-content .online_business h2").removeClass('titleActive')
12 $(".tudi .online_business h2").addClass('titleActive') 12 if (this.getAttribute('lay-id')==0) {
13 } else if (this.getAttribute('lay-id') == 2) {
14 $("body,html").animate({ scrollTop: $(".jianzhu").offset().top });
15 $(".online_business h2").removeClass('titleActive')
16 $(".jianzhu .online_business h2").addClass('titleActive')
17 } else if (this.getAttribute('lay-id') == 3) {
18 $("body,html").animate({ scrollTop: $(".linmu").offset().top });
19 $(".online_business h2").removeClass('titleActive')
20 $(".linmu .online_business h2").addClass('titleActive')
21 } else if (this.getAttribute('lay-id') == 4) {
22 $("body,html").animate({ scrollTop: $(".qita").offset().top });
23 $(".online_business h2").removeClass('titleActive')
24 $(".qita .online_business h2").addClass('titleActive')
25 } else {
26 $("body,html").animate({ scrollTop: 0 }); 13 $("body,html").animate({ scrollTop: 0 });
27 $(".online_business h2").removeClass('titleActive') 14 $(".online_business h2").removeClass('titleActive')
15 } else {
16 $("body,html").animate({ scrollTop: $(".layui-tab-content").eq(idUum).offset().top });
17 $("#tabContentListOnline .layui-tab-content").eq(idUum).find('.online_business h2').addClass('titleActive')
28 } 18 }
29 }); 19 });
30 element.on('tab(navtab1)', function () { 20 element.on('tab(navtab1)', function () {
31 if (this.getAttribute('lay-id') == 1) { 21 let idUum1 = undefined
32 $("body,html").animate({ scrollTop: $(".tudi1").offset().top }); 22 idUum1 = this.getAttribute('lay-id')-1
33 $(".navtab1 h2").removeClass('titleActive') 23 $(".layui-tab-content .online_business h2").removeClass('titleActive')
34 $(".tudi1 .navtab1 h2").addClass('titleActive') 24 if (this.getAttribute('lay-id')==0) {
35 } else if (this.getAttribute('lay-id') == 2) {
36 $("body,html").animate({ scrollTop: $(".jianzhu1").offset().top });
37 $(".navtab1 h2").removeClass('titleActive')
38 $(".jianzhu1 .navtab1 h2").addClass('titleActive')
39 } else if (this.getAttribute('lay-id') == 3) {
40 $("body,html").animate({ scrollTop: $(".linmu1").offset().top });
41 $(".navtab1 h2").removeClass('titleActive')
42 $(".linmu1 .navtab1 h2").addClass('titleActive')
43 } else {
44 $("body,html").animate({ scrollTop: 0 }); 25 $("body,html").animate({ scrollTop: 0 });
45 $(".navtab1 h2").removeClass('titleActive') 26 $(".online_business h2").removeClass('titleActive')
27 } else {
28 $("body,html").animate({ scrollTop: $("#tabContentList .layui-tab-content").eq(idUum1).offset().top });
29 $("#tabContentList .layui-tab-content").eq(idUum1).find('.online_business h2').addClass('titleActive')
46 } 30 }
47 }); 31 });
48 }); 32 });
...@@ -74,7 +58,6 @@ layui.config({ ...@@ -74,7 +58,6 @@ layui.config({
74 $(document).on("click", ".area_list li", function (e) { 58 $(document).on("click", ".area_list li", function (e) {
75 $(".area_list li").removeClass("active2") 59 $(".area_list li").removeClass("active2")
76 $(this).addClass("active2"); 60 $(this).addClass("active2");
77 console.log(666, $(this).attr("data-id"))
78 _getGuideBusinessInWssq($(this).attr("data-id")) 61 _getGuideBusinessInWssq($(this).attr("data-id"))
79 _getGuideBusinessInReserve($(this).attr("data-id")) 62 _getGuideBusinessInReserve($(this).attr("data-id"))
80 }) 63 })
...@@ -91,6 +74,7 @@ layui.use(['form', 'common'], function () { ...@@ -91,6 +74,7 @@ layui.use(['form', 'common'], function () {
91 }); 74 });
92 // 初始化数据 75 // 初始化数据
93 function _initData() { 76 function _initData() {
77 var regionId = undefined;
94 var area_list = $(".area_list"); 78 var area_list = $(".area_list");
95 area_list.empty(); 79 area_list.empty();
96 var li 80 var li
...@@ -103,10 +87,16 @@ function _initData() { ...@@ -103,10 +87,16 @@ function _initData() {
103 if (result.code == 200 && result.data != null) { 87 if (result.code == 200 && result.data != null) {
104 let data = result.data[0].children[0].children 88 let data = result.data[0].children[0].children
105 for (var i = 0; i < data.length; i++) { 89 for (var i = 0; i < data.length; i++) {
106 li = '<li data-id="' + data[i].id + '">' + data[i].name + '</li>'; 90 if(i==0) {
91 li = '<li data-id="' + data[i].id + '" class="active2">' + data[i].name + '</li>';
92 }else {
93 li = '<li data-id="' + data[i].id + '">' + data[i].name + '</li>';
94 }
107 area_list.append(li); 95 area_list.append(li);
108 } 96 }
109 97 regionId = data[0].id
98 _getGuideBusinessInWssq(regionId)
99 _getGuideBusinessInReserve(regionId)
110 } 100 }
111 } 101 }
112 }) 102 })
......
...@@ -13,7 +13,7 @@ function SetServicesPath() { ...@@ -13,7 +13,7 @@ function SetServicesPath() {
13 //设置全局參數 13 //设置全局參數
14 var portal = 14 var portal =
15 { 15 {
16 'api_url': "http://192.168.2.59:8000", //属性名用引号括起来，属性间由逗号隔开 16 'api_url': "http://192.168.2.108:8000", //属性名用引号括起来，属性间由逗号隔开
17 'name': 'myName', 17 'name': 'myName',
18 "rootPath": GetRootPath() 18 "rootPath": GetRootPath()
19 }; 19 };
......
1 $(function () { 1 $(function () {
2 //元素
3 var oFileInput = $("#fileInput"); //选择文件按钮
4 var sizeObj = []; //存放每个文件大小的数组，用来比较去重
5 //点击选择文件按钮选文件 2 //点击选择文件按钮选文件
6 function handleUpdate() {
7 if(flieList.length>=2) {
8 layer.msg('已经完成上传最大限度', { icon: 5 });
9 return false
10 }else {
11 analysisList(this.files, $("#fileInput"));
12 }
13 }
14
15 //解析列表函数
16 function analysisList(obj, inputName) {
17 //如果没有文件
18 if (obj.length < 1) {
19 return false;
20 }
21 for (var i = 0; i < obj.length; i++) {
22 var fileObj = obj[i]; //单个文件
23 var name = fileObj.name; //文件名
24 var size = fileObj.size; //文件大小
25 //文件大于30M，就不上传
26 if (size > 1024 * 1024 * 1024 || size == 0) {
27 layer.msg('超过了30M，不能上传', { icon: 5 });
28 return false;
29 }
30 //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
31 if (sizeObj.indexOf(size) != -1) {
32 layer.msg('已经选择，不能重复上传', { icon: 5 });
33 return false;
34 }
35 //给json对象添加内容，得到选择的文件的数据
36 var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型
37 flieList.push(itemArr);
38 if (flieList.length==2){
39 inputName.parent().find('.update').attr('src','../../staticImages/Yes.png');
40 inputName.parent().find('.updatetext').text('')
41 }
42 //把这个文件的大小放进数组中
43 sizeObj.push(size);
44 }
45 createList() //生成列表
46 document.querySelector('#fileInput').value = null
47 };
48 //生成列表
49 function createList() {
50 $('.fileListName').empty()
51 for (var i = 0; i < flieList.length; i++) {
52 var fileData = flieList[i];
53 name = fileData[1]
54 $('.fileListName').append(
55 '<li class="fileName">'+
56 '<span title="' + name + '">' + name + '</span>' +
57 '<img class="operation" src="../../staticImages/chacha.png">'+
58 '</li>'
59 );
60 }
61 }
62 $(document).on("click", ".fileListName .fileName .operation", function (e) { 3 $(document).on("click", ".fileListName .fileName .operation", function (e) {
63 var index = $(this).parent().index(); 4 var index = $(this).parent().index();
64 flieList.splice(index, 1) 5 flieList.splice(index, 1)
...@@ -70,9 +11,66 @@ $(function () { ...@@ -70,9 +11,66 @@ $(function () {
70 $(this).parent().remove() 11 $(this).parent().remove()
71 }) 12 })
72 }) 13 })
73 //通过文件名，返回文件的后缀名 14 // 存放每个文件大小的数组，用来比较去重
74 function fileType(name) { 15 var sizeObj = [];
75 var nameArr = name.split("."); 16
76 return nameArr[nameArr.length - 1].toLowerCase(); 17
18 function handleUpdate(e,$input) {
19 if(flieList.length>=2) {
20 layer.msg('已经完成上传最大限度', { icon: 5 });
21 return false
22 }else {
23 let file = [];
24 file.push(e.files[0])
25 analysisList(file, document.getElementById("#"+$input), $input);
26 }
77 } 27 }
28 //解析列表函数
29 function analysisList(obj, inputName, $input) {
30 //如果没有文件
31 if (obj.length < 1) {
32 return false;
33 }
34 for (var i = 0; i < obj.length; i++) {
35 var fileObj = obj[i]; //单个文件
36 var name = fileObj.name; //文件名
37 var size = fileObj.size; //文件大小
38 //文件大于30M，就不上传
39 if (size > 1024 * 1024 * 1024 || size == 0) {
40 layer.msg('超过了30M，不能上传', { icon: 5 });
41 return false;
42 }
43 //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
44 if (sizeObj.indexOf(size) != -1) {
45 layer.msg('已经选择，不能重复上传', { icon: 5 });
46 return false;
47 }
48 //给json对象添加内容，得到选择的文件的数据
49 var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型
50 flieList.push(itemArr);
51 if (flieList.length==2){
52 inputName.parent().find('.update').attr('src','../../staticImages/Yes.png');
53 inputName.parent().find('.updatetext').text('')
54 }
55 //把这个文件的大小放进数组中
56 sizeObj.push(size);
57 }
58 createList(); //生成列表
59 document.querySelector("#"+$input).value = null
60 };
78 61
62 //生成列表
63 function createList() {
64 $('.fileListName').empty()
65 console.log(flieList, 98898989)
66 for (var i = 0; i < flieList.length; i++) {
67 var fileData = flieList[i];
68 var name = fileData[1]
69 $('.fileListName').append(
70 '<li class="fileName">'+
71 '<span title="' + name + '">' + name + '</span>' +
72 '<img class="operation" src="../../staticImages/chacha.png">'+
73 '</li>'
74 );
75 }
76 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,48 +2,13 @@ $(function () { ...@@ -2,48 +2,13 @@ $(function () {
2 //元素 2 //元素
3 var oFileInput1 = $("#fileInput1"); //选择文件按钮 3 var oFileInput1 = $("#fileInput1"); //选择文件按钮
4 var sizeObj1 = []; //存放每个文件大小的数组，用来比较去重 4 var sizeObj1 = []; //存放每个文件大小的数组，用来比较去重
5 // var oFileSpan = $("#fileSpan");
6 // //拖拽外部文件，进入目标元素触发
7 // oFileSpan.on("dragenter", function () {
8 // $(this).find('.file_name').css("background", "#ccc");
9 // $(this).find('.file_name').empty();
10 // $(this).find('.file_name').append(
11 // '<p style="line-height:240px">可以方鼠标了</p>'
12 // )
13 // });
14 // //拖拽外部文件，进入目标、离开目标之间，连续触发
15 // oFileSpan.on("dragover", function () {
16 // return false;
17 // });
18 // //拖拽外部文件，离开目标元素触发
19 // oFileSpan.on("dragleave", function () {
20 // $(this).find('.file_name').empty();
21 // $(this).find('.file_name').css("background", "#ffff");
22 // $(this).find('.file_name').append(
23 // '<img class="update" src="../staticImages/update.png">'+
24 // '<p class="updatetext">点击或拖拽文件上传</p>'+
25 // '<div class="fileListName"></div>'
26 // )
27 // });
28 // //拖拽外部文件，在目标元素上释放鼠标触发
29 // oFileSpan.on("drop", function (ev) {
30 // var fs = ev.originalEvent.dataTransfer.files;
31 // $(this).find('.file_name').empty();
32 // $(this).find('.file_name').css("background", "#ffff");
33 // $(this).find('.file_name').append(
34 // '<img class="update" src="../staticImages/update.png">'+
35 // '<p class="updatetext">点击或拖拽文件上传</p>'+
36 // '<div class="fileListName"></div>'
37 // )
38 // analysisList(fs); //解析列表函数
39 // return false;
40 // });
41 //点击选择文件按钮选文件 5 //点击选择文件按钮选文件
42 oFileInput1.on("change", function () { 6 oFileInput1.on("change", function () {
43 if(flieList1.length>=2) { 7 if(flieList1.length>=2) {
44 layer.msg('已经完成上传最大限度', { icon: 5 }); 8 layer.msg('已经完成上传最大限度', { icon: 5 });
45 return false 9 return false
46 }else { 10 }else {
11 console.log(this.files)
47 analysisList(this.files, oFileInput1); 12 analysisList(this.files, oFileInput1);
48 } 13 }
49 }) 14 })
...@@ -53,6 +18,7 @@ $(function () { ...@@ -53,6 +18,7 @@ $(function () {
53 if (obj.length < 1) { 18 if (obj.length < 1) {
54 return false; 19 return false;
55 } 20 }
21 console.log(999999999, obj)
56 for (var i = 0; i < obj.length; i++) { 22 for (var i = 0; i < obj.length; i++) {
57 var fileObj = obj[i]; //单个文件 23 var fileObj = obj[i]; //单个文件
58 var name = fileObj.name; //文件名 24 var name = fileObj.name; //文件名
...@@ -72,7 +38,7 @@ $(function () { ...@@ -72,7 +38,7 @@ $(function () {
72 var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型 38 var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型
73 flieList1.push(itemArr); 39 flieList1.push(itemArr);
74 if (flieList1.length==2){ 40 if (flieList1.length==2){
75 inputName.parent().find('.update').attr('src','../staticImages/Yes.png'); 41 inputName.parent().find('.update').attr('src','../../staticImages/Yes.png');
76 inputName.parent().find('.updatetext').text('') 42 inputName.parent().find('.updatetext').text('')
77 } 43 }
78 //把这个文件的大小放进数组中 44 //把这个文件的大小放进数组中
...@@ -90,7 +56,7 @@ $(function () { ...@@ -90,7 +56,7 @@ $(function () {
90 $('.fileListName1').append( 56 $('.fileListName1').append(
91 '<li class="fileName">'+ 57 '<li class="fileName">'+
92 '<span title="' + name + '">' + name + '</span>' + 58 '<span title="' + name + '">' + name + '</span>' +
93 '<img class="operation" src="../staticImages/chacha.png">'+ 59 '<img class="operation" src="../../staticImages/chacha.png">'+
94 '</li>' 60 '</li>'
95 ); 61 );
96 } 62 }
...@@ -100,7 +66,7 @@ $(function () { ...@@ -100,7 +66,7 @@ $(function () {
100 flieList1.splice(index, 1) 66 flieList1.splice(index, 1)
101 sizeObj1.splice(index, 1) 67 sizeObj1.splice(index, 1)
102 if(flieList1.length==1) { 68 if(flieList1.length==1) {
103 $(this).parent().parent().parent('.fileSpan').find('.update').attr('src','../staticImages/update.png'); 69 $(this).parent().parent().parent('.fileSpan').find('.update').attr('src','../../staticImages/update.png');
104 $(this).parent().parent().parent('.fileSpan').find('.updatetext').text('点击文件上传') 70 $(this).parent().parent().parent('.fileSpan').find('.updatetext').text('点击文件上传')
105 } 71 }
106 $(this).parent().remove() 72 $(this).parent().remove()
......
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
77 <!-- 网上申请 --> 77 <!-- 网上申请 -->
78 <script id="businessGuide" type="text/html"> 78 <script id="businessGuide" type="text/html">
79 {{# layui.each(d.list, function(index, item){ }} 79 {{# layui.each(d.list, function(index, item){ }}
80 <div class="layui-tab-content tudi1" style="padding:0"> 80 <div class="layui-tab-content" style="padding:0">
81 <div class="online_business navtab1"> 81 <div class="online_business navtab1">
82 <h2> 82 <h2>
83 <svg class="icon svg-icon" aria-hidden="true"> 83 <svg class="icon svg-icon" aria-hidden="true">
...@@ -89,11 +89,16 @@ ...@@ -89,11 +89,16 @@
89 <ul class="online_list"> 89 <ul class="online_list">
90 {{# for(var i = 0; i < item.bsznListVOS.length; i++){ }} 90 {{# for(var i = 0; i < item.bsznListVOS.length; i++){ }}
91 <li> 91 <li>
92 <a href='./businessGuideDeatil.html?id="{{item.bsznListVOS[i].bsmBszn}}"' target="_blank"> 92 <span>{{item.bsznListVOS[i].headline}}</span>
93 <span>{{item.bsznListVOS[i].headline}}</span> 93 <div class="itemButton">
94 <button type="button" 94 <a href='./businessGuideDeatil.html?id="{{item.bsznListVOS[i].bsmBszn}}"' target="_blank">
95 class="layui-btn layui-btn-sm layui-btn-normal">在线办理</button> 95 <button type="button"
96 </a> 96 class="layui-btn layui-btn-sm">查看详情</button>
97 </a>
98 <a>
99 <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">在线办理</button>
100 </a>
101 </div>
97 </li> 102 </li>
98 {{# } }} 103 {{# } }}
99 </ul> 104 </ul>
...@@ -101,10 +106,10 @@ ...@@ -101,10 +106,10 @@
101 {{# }); }} 106 {{# }); }}
102 </script> 107 </script>
103 108
104 <!-- 在线预约 --> 109 <!-- 在线预约 -->
105 <script id="onlineBooking" type="text/html"> 110 <script id="onlineBooking" type="text/html">
106 {{# layui.each(d.onlineList, function(index, item){ }} 111 {{# layui.each(d.onlineList, function(index, item){ }}
107 <div class="layui-tab-content tudi1" style="padding:0"> 112 <div class="layui-tab-content" style="padding:0">
108 <div class="online_business navtab1"> 113 <div class="online_business navtab1">
109 <h2> 114 <h2>
110 <svg class="icon svg-icon" aria-hidden="true"> 115 <svg class="icon svg-icon" aria-hidden="true">
...@@ -116,15 +121,20 @@ ...@@ -116,15 +121,20 @@
116 <ul class="online_list"> 121 <ul class="online_list">
117 {{# for(var i = 0; i < item.bsznListVOS.length; i++){ }} 122 {{# for(var i = 0; i < item.bsznListVOS.length; i++){ }}
118 <li> 123 <li>
119 <a href='./businessGuideDeatil.html?id={{item.bsznListVOS[i].bsmBszn}}'> 124 <span>{{item.bsznListVOS[i].headline}}</span>
120 <span>{{item.bsznListVOS[i].headline}}</span> 125 <div class="itemButton">
121 <button type="button" 126 <a href='./businessGuideDeatil.html?id={{item.bsznListVOS[i].bsmBszn}}' target="_blank">
122 class="layui-btn layui-btn-sm layui-btn-normal">在线办理</button> 127 <button type="button" class="layui-btn layui-btn-sm">查看详情</button>
123 </a> 128 </a>
129 <a>
130 <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">在线办理</button>
131 </a>
132 </div>
124 </li> 133 </li>
125 {{# } }} 134 {{# } }}
126 </ul> 135 </ul>
127 </div> 136 </div>
128 {{# }); }} 137 {{# }); }}
129 </script> 138 </script>
139
130 </html> 140 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
116 <div class="img_update"> 116 <div class="img_update">
117 <div class="fileBox"> 117 <div class="fileBox">
118 <div class="fileSpan vm"> 118 <div class="fileSpan vm">
119 <input type="file" multiple id="fileInput" onclick="" onchange="imgUpdate"/> 119 <input type="file" multiple id="fileInput" onclick="" onchange="handleUpdate(this,'fileInput')"/>
120 <div class="file_name"> 120 <div class="file_name">
121 <img class="update" src="../../staticImages/update.png"> 121 <img class="update" src="../../staticImages/update.png">
122 <p class="updatetext">点击文件上传</p> 122 <p class="updatetext">点击文件上传</p>
......