Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
279128b1 by 任超
Options

style:填报信息

1 parent 0858ae14
Inline Side-by-side
Showing 3 changed files with 266 additions and 139 deletions
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
201 .acceptance_information { 201 .acceptance_information {
202 margin: 20px 0; 202 margin: 20px 0;
203 } 203 }
204 .acceptance_information h3 , .person_info h3, .data_upload h3{ 204 .acceptance_information h3 , .person_info h3, .data_upload h3, .obtaining_license h3{
205 height: 16px; 205 height: 16px;
206 padding-left: 5px; 206 padding-left: 5px;
207 border-left: 3px solid #0091FF; 207 border-left: 3px solid #0091FF;
...@@ -303,4 +303,33 @@ ...@@ -303,4 +303,33 @@
303 } 303 }
304 .record:hover { 304 .record:hover {
305 color: #0091FF; 305 color: #0091FF;
306 }
307 .layui-form-radio>i:hover, .layui-form-radioed>i {
308 color: #0091FF!important;
309 }
310 /* -------------------领证方式----------------------- */
311 .shipping_method {
312 display: none;
313 }
314 .item_inline {
315 font-size: 0;
316 }
317 .item_inline .layui-inline {
318 width: 50%;
319 font-size: 16px;
320 margin-right: 0!important;
321 }
322 .obtaining_license .layui-input-block h2{
323 display: inline-block;
324 color: rgb(133, 125, 125);
325 margin-right: 13px;
326 }
327 .ssq {
328 width: 92%;
329 }
330 .ssq .layui-inline {
331 width: 29%;
332 }
333 .obtaining_license {
334 margin-top: 20px;
306 } 335 }
...\ No newline at end of file ...\ No newline at end of file
......
1 layui.use('element', function () { 1 layui.use('element', function () {
2 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 2 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
3 });
4 addTabs('#wssq')
5 var data = {
6 'progressList': [
7 {
8 stepName: "信息效验",
9 stepState: 2 //0：未办理 1：正在办理 2：已办理
10 },
11 {
12 stepName: "填报信息",
13 stepState: 1
14 },
15 {
16 stepName: "完税核税",
17 stepState: 0
18 },
19 {
20 stepName: "身份认证",
21 stepState: 0
22 },
23 {
24 stepName: "资料审核",
25 stepState: 0
26 },
27 {
28 stepName: "线上缴费",
29 stepState: 0
30 },
31 {
32 stepName: "生成电子证书",
33 stepState: 0
34 }
35 ],
36 }
37 layui.use('laytpl', function () {
38 laytpl = layui.laytpl;
39 var getTpl = document.getElementById('progress').innerHTML
40 , view = document.getElementById('app_progress');
41 laytpl(getTpl).render(data, function (html) {
42 view.innerHTML = html;
43 });
44
45 layui.use(['element'], function () {
46 var element = layui.element;
47 //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
48 element.init();
49 });
50 });
51 // form 表单
52 layui.use('form', function () {
53 var form = layui.form;
54 form.on('select(typeId)', function (data) {
55 console.log(data.value);
3 }); 56 });
4 addTabs('#wssq') 57 //自定义验证规则
5 var data = { 58 form.verify({
6 'progressList': [ 59 title: function (value) {
7 { 60 if (value.length == 0) {
8 stepName: "信息效验", 61 return '权利人不能为空';
9 stepState: 2 //0：未办理 1：正在办理 2：已办理 62 } else if (value.length < 2) {
10 }, 63 return '权利人至少得2个字符啊';
11 {
12 stepName: "填报信息",
13 stepState: 1
14 },
15 {
16 stepName: "完税核税",
17 stepState: 0
18 },
19 {
20 stepName: "身份认证",
21 stepState: 0
22 },
23 {
24 stepName: "资料审核",
25 stepState: 0
26 },
27 {
28 stepName: "线上缴费",
29 stepState: 0
30 },
31 {
32 stepName: "生成电子证书",
33 stepState: 0
34 } 64 }
35 ], 65 }
36 } 66 });
37 layui.use('laytpl', function () {
38 laytpl = layui.laytpl;
39 var getTpl = document.getElementById('progress').innerHTML
40 , view = document.getElementById('app_progress');
41 laytpl(getTpl).render(data, function (html) {
42 view.innerHTML = html;
43 });
44 67
45 layui.use(['element'], function () { 68 //监听提交
46 var element = layui.element; 69 form.on('submit(demo1)', function (data) {
47 //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果 70 layer.alert(JSON.stringify(data.field), {
48 element.init(); 71 title: '最终的提交信息'
49 }); 72 })
73 return false;
50 }); 74 });
51 // form 表单 75 })
76 $('.radioInfo').click(function () {
77 let index = $(this).attr("value")
78 if (index == 2 || index == 3) {
79 $('.add_form').show()
80 } else {
81 $('.add_form').hide()
82 }
83 })
84 // form 添加
85 $('.add_form').click(function () {
86 $('.layui-form').append(
87 '<div class="layui-form-item">' +
88 '<div class="layui-inline">' +
89 '<label class="layui-form-label">姓名</label>' +
90 '<div class="layui-input-block">' +
91 '<input type="text" name="name" required lay-verify="name" placeholder="请输权利人" class="layui-input">' +
92 '</div>' +
93 '</div>' +
94 '<div class="layui-inline idCard">' +
95 '<label class="layui-form-label">身份证类型</label>' +
96 '<div class="layui-input-block">' +
97 '<select lay-filter="typeId">' +
98 '<option value="1">身份证</option>' +
99 '<option value="2">军官证</option>' +
100 '</select>' +
101 '</div>' +
102 '</div>' +
103 '<div class="layui-inline">' +
104 '<label class="layui-form-label">证件号码</label>' +
105 '<div class="layui-input-block">' +
106 '<input type="tel" name="card" maxlength="18" required lay-verify="card" placeholder="请输证件号码" class="layui-input">' +
107 '</div>' +
108 '</div>' +
109 '<div class="layui-inline">' +
110 '<label class="layui-form-label">联系方式</label>' +
111 '<div class="layui-input-block">' +
112 '<input type="tel" name="phone" maxlength="11" required lay-verify="phone" placeholder="请输联系方式" class="layui-input">' +
113 '</div>' +
114 '</div>' +
115 '<i class="layui-icon layui-icon-reduce-circle"></i>' +
116 '</div>'
117 )
118
52 layui.use('form', function () { 119 layui.use('form', function () {
53 var form = layui.form; 120 var form = layui.form;
121 form.render('select');
54 form.on('select(typeId)', function (data) { 122 form.on('select(typeId)', function (data) {
55 console.log(data.value); 123 console.log(data.value);
56 }); 124 });
57 //自定义验证规则
58 form.verify({
59 title: function (value) {
60 if (value.length == 0) {
61 return '权利人不能为空';
62 } else if (value.length < 2) {
63 return '权利人至少得2个字符啊';
64 }
65 }
66 });
67
68 //监听提交
69 form.on('submit(demo1)', function (data) {
70 layer.alert(JSON.stringify(data.field), {
71 title: '最终的提交信息'
72 })
73 return false;
74 });
75 }) 125 })
76 $('.radioInfo').click(function () { 126 // 编辑
77 let index = $(this).attr("value") 127 $(document).on("click", ".layui-icon-reduce-circle", function (e) {
78 if (index == 2 || index == 3) { 128 $(this).parent().remove()
79 $('.add_form').show()
80 } else {
81 $('.add_form').hide()
82 }
83 }) 129 })
84 // form 添加 130 })
85 $('.add_form').click(function () { 131 // 图片上传
86 $('.layui-form').append( 132 // 询问笔录
87 '<div class="layui-form-item">' + 133 $('.record').click(function (event) {
88 '<div class="layui-inline">' + 134 event.stopPropagation();
89 '<label class="layui-form-label">姓名</label>' + 135 console.log('下载模板99')
90 '<div class="layui-input-block">' + 136 })
91 '<input type="text" name="name" required lay-verify="name" placeholder="请输权利人" class="layui-input">' + 137 var flieList = []; // 登记证书列表
92 '</div>' + 138 var flieList1 = []; // 房屋所有权证书列表
93 '</div>' + 139 var flieList3 = []; // 询问笔录
94 '<div class="layui-inline idCard">' + 140 // 省市区
95 '<label class="layui-form-label">身份证类型</label>' + 141 //config的设置是全局的
96 '<div class="layui-input-block">' + 142 layui.config({
97 '<select lay-filter="typeId">' + 143 base: '../staticJs/'
98 '<option value="1">身份证</option>' + 144 }).extend({ //设定模块别名
99 '<option value="2">军官证</option>' + 145 common: 'cityCommon'
100 '</select>' + 146 });
101 '</div>' +
102 '</div>' +
103 '<div class="layui-inline">' +
104 '<label class="layui-form-label">证件号码</label>' +
105 '<div class="layui-input-block">' +
106 '<input type="tel" name="card" maxlength="18" required lay-verify="card" placeholder="请输证件号码" class="layui-input">' +
107 '</div>' +
108 '</div>' +
109 '<div class="layui-inline">' +
110 '<label class="layui-form-label">联系方式</label>' +
111 '<div class="layui-input-block">' +
112 '<input type="tel" name="phone" maxlength="11" required lay-verify="phone" placeholder="请输联系方式" class="layui-input">' +
113 '</div>' +
114 '</div>' +
115 '<i class="layui-icon layui-icon-reduce-circle"></i>' +
116 '</div>'
117 )
118 147
119 layui.use('form', function () { 148 $('.next_button a').click(function(){
120 var form = layui.form; 149 console.log(1)
121 form.render('select'); 150 })
122 form.on('select(typeId)', function (data) { 151 layui.use(['form', 'common'], function () {
123 console.log(data.value); 152 var common = layui.common,
124 }); 153 form = layui.form;
125 }) 154 //三级地址联动
126 // 编辑 155 common.showCity('province', 'city', 'district');
127 $(document).on("click", ".layui-icon-reduce-circle", function (e) { 156 //领证方式
128 $(this).parent().remove() 157 form.on('radio(beshared)', function (data) {
129 }) 158 if (data.value == 2) {
130 }) 159 $('.shipping_method').show()
131 // 图片上传 160 $('.submitButton').hide()
132 // 询问笔录 161 } else {
133 $('.record').click(function(event){ 162 $('.shipping_method').hide()
134 event.stopPropagation(); 163 $('.submitButton').show()
135 console.log('下载模板99') 164 }
136 }) 165 });
137 var flieList = []; // 登记证书列表 166 //区域选择
138 var flieList1 = []; // 房屋所有权证书列表 167 form.on('select(selectCity)', function (data) {
139 var flieList3 = []; // 询问笔录 168 return false;
140 $('.next_button a').click(function(){ 169 });
141 console.log(999, flieList,5689, flieList1,98999, flieList3) 170 //监听提交
142 return false 171 form.on('submit(submit1)', function (data) {
143 }) 172 console.log(data.field)
173 return false;
174 });
175 });
144 176
......
...@@ -175,12 +175,78 @@ ...@@ -175,12 +175,78 @@
175 </div> 175 </div>
176 </div> 176 </div>
177 <!-- 领证方式 --> 177 <!-- 领证方式 -->
178 <div class="next_button"> 178 <div class="obtaining_license">
179 <button type="button" class="layui-btn layui-btn-normal"> 179 <h3>领证方式</h3>
180 <a href="./wshs.html"> 180 <form class="layui-form" action="" lay-filter="example">
181 下一步 181 <div class="layui-form-item">
182 </a> 182 <label class="layui-form-label">领证方式</label>
183 </button> 183 <div class="layui-input-block">
184 <input type="radio" name="type" value="1" lay-filter="beshared" title="现场领证" checked="">
185 <input type="radio" name="type" value="2" lay-filter="beshared" title="快递到家">
186 </div>
187 </div>
188 <div class="shipping_method">
189 <div class="layui-form-item item_inline">
190 <div class="layui-inline">
191 <label class="layui-form-label">收件人</label>
192 <div class="layui-input-block">
193 <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入收件人"
194 class="layui-input">
195 </div>
196 </div>
197 <div class="layui-inline">
198 <label class="layui-form-label">手机号码</label>
199 <div class="layui-input-block">
200 <input type="tel" maxlength="11" name="title" lay-verify="title" autocomplete="off"
201 placeholder="请输入手机号码" class="layui-input">
202 </div>
203 </div>
204 </div>
205 <div class="layui-form-item">
206 <label class="layui-form-label">所在地区</label>
207 <div class="layui-input-block ssq">
208 <h2>省</h2>
209 <div class="layui-inline layui-select-default" style="margin-right: 10px;">
210 <select name="province" class="Pselected" data-area="浙江省"" lay-filter="province">
211 <option value="">选择省</option>
212 </select>
213 </div>
214 <h2>市</h2>
215 <div class="layui-inline selected layui-select-default">
216 <select name="city" class="Cselected" data-area="杭州市">
217 <option value="">选择市</option>
218 </select>
219 </div>
220 <h2>区</h2>
221 <div class="layui-inline selected layui-select-default">
222 <select name="city" class="Cselected" data-area="西湖区" lay-filter="selectCity">
223 <option value="">选择区</option>
224 </select>
225 </div>
226 </div>
227 </div>
228 <div class="layui-form-item layui-form-text">
229 <label class="layui-form-label">详细地址</label>
230 <div class="layui-input-block">
231 <textarea placeholder="请输入详细地址" class="layui-textarea" name="desc"></textarea>
232 </div>
233 </div>
234 <div class="next_button">
235 <button type="button" lay-submit="" lay-filter="submit1" class="layui-btn layui-btn-normal">
236 <a>
237 下一步
238 </a>
239 </button>
240 </div>
241 </div>
242 <div class="next_button submitButton">
243 <button type="button" class="layui-btn layui-btn-normal">
244 <a href="./wshs.html">
245 下一步
246 </a>
247 </button>
248 </div>
249 </form>
184 </div> 250 </div>
185 </div> 251 </div>
186 </body> 252 </body>
...@@ -190,6 +256,7 @@ ...@@ -190,6 +256,7 @@
190 <script type="text/javascript" src="../staticJs/imageUpdate.js"></script> 256 <script type="text/javascript" src="../staticJs/imageUpdate.js"></script>
191 <script type="text/javascript" src="../staticJs/imageUpdate1.js"></script> 257 <script type="text/javascript" src="../staticJs/imageUpdate1.js"></script>
192 <script type="text/javascript" src="../staticJs/imageUpdate3.js"></script> 258 <script type="text/javascript" src="../staticJs/imageUpdate3.js"></script>
259 <script type="text/javascript" src="../staticJs/city-picker.js"></script>
193 <script type="text/html" id="barDemo"> 260 <script type="text/html" id="barDemo">
194 <i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i> 261 <i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i>
195 </script> 262 </script>
...@@ -228,5 +295,4 @@ ...@@ -228,5 +295,4 @@
228 {{# } }} 295 {{# } }}
229 {{# }); }} 296 {{# }); }}
230 </script> 297 </script>
231
232 </html> 298 </html>
...\ No newline at end of file ...\ No newline at end of file
......