Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
c959c3a0 by 任超
Options

style:填报信息

1 parent a4186664
Inline Side-by-side
Showing 4 changed files with 490 additions and 197 deletions
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
2 width: 1200px; 2 width: 1200px;
3 margin: 0 auto; 3 margin: 0 auto;
4 min-height:calc(100vh - 227px); 4 min-height:calc(100vh - 227px);
5 padding: 20px 0;
6 } 5 }
7 .title { 6 .title {
8 height: 16px; 7 height: 16px;
...@@ -58,10 +57,40 @@ ...@@ -58,10 +57,40 @@
58 .img_update { 57 .img_update {
59 border: 1px solid #eeeeee; 58 border: 1px solid #eeeeee;
60 overflow: hidden; 59 overflow: hidden;
60 position: relative;
61 } 61 }
62 62
63 .fileBox{ margin:10px;width: 330px;float: left; } 63 .fileBox{
64 #fileSpan{display:inline-block;width:300px;height:150px;border:2px dashed #ccc;text-align:center;line-height:150px;position: relative;} 64 margin:10px;float: left;
65 }
66 .file_name i {
67 display: block;
68 font-size: 32px;
69 height: 24px;
70 position: relative;
71 line-height: 24px;
72 top: -10px;
73 padding-top: 60px;
74 margin-bottom: 10px;
75 }
76 .file_name p {
77 line-height: 16px;
78 }
79 .certificate {
80 height: 24px;
81 color: red;
82 margin-top: 5px;
83 font-size: 14px;
84 line-height: 24px;
85 }
86 #fileSpan{
87 display: inline-block;
88 width: 285px;
89 height: 200px;
90 border: 2px dashed #ccc;
91 text-align: center;
92 position: relative;
93 }
65 #fileInput { 94 #fileInput {
66 position: absolute; 95 position: absolute;
67 width: 100%; 96 width: 100%;
...@@ -69,17 +98,80 @@ ...@@ -69,17 +98,80 @@
69 left: 0; 98 left: 0;
70 top: 0; 99 top: 0;
71 opacity: 0; 100 opacity: 0;
101 cursor: pointer;
102 z-index: 10;
103 }
104 .fileList_parent{
105 position: absolute;
106 left: 12px;
107 top: 12px;
108 width: 285px;
109 height: 200px;
110 text-align: center;
111 box-sizing: border-box;
112 padding: 30px 20px;
113 display: none;
114 background-color: #eee;
115 z-index: 20;
116 }
117 .fileName {
118 width: 80px;
119 line-height: 30px;
120 overflow: hidden;
121 text-overflow: ellipsis;
122 white-space: nowrap;
123 }
124 .file_list {
125 text-align: center;
126 margin: 0 auto;
127 }
128 .fileList_parent img {
129 width: 50px;
130 height: 60px;
72 } 131 }
73 .fileList_parent{margin:20px;display:none;}
74 .fileList_parent { 132 .fileList_parent {
75 float: left; 133 float: left;
76 } 134 }
135 .file_name {
136 height: 200px;
137 text-align: center;
138 line-height: 200px;
139 position: relative;
140 }
77 .operation { 141 .operation {
78 color: #0091FF; 142 color: #0091FF;
79 cursor: pointer; 143 cursor: pointer;
80 } 144 }
145 .fileListName {
146 text-align: center;
147 padding-top: 10px;
148 }
149 .fileListName p {
150 display: inline-block;
151 height: 17px;
152 }
153 .fileListName a {
154 display: inline-block;
155 line-height: 14px;
156 }
157 .fileListName a i {
158 line-height: 14px;
159 height: 14px;
160 padding: 0;
161 position: relative;
162 top: -2px;
163 font-size: 14px;
164 font-weight: 600;
165 }
81 .fileList tr { 166 .fileList tr {
82 line-height: 28px; 167 line-height: 28px;
168 width: 70px;
169 }
170 .fileList tr td {
171 width: 70px;
172 }
173 .operation a:hover {
174 color: #0091FF!important;
83 } 175 }
84 .next_button { 176 .next_button {
85 text-align: center; 177 text-align: center;
...@@ -87,4 +179,110 @@ ...@@ -87,4 +179,110 @@
87 } 179 }
88 .next_button a { 180 .next_button a {
89 color: #ffffff; 181 color: #ffffff;
182 }
183 .name_title {
184 padding: 10px;
185 margin:15px 0;
186 }
187 .name_title h2 {
188 display: inline-block;
189 font-weight: 600;
190 margin-right: 10px;
191 border-left: 3px solid #0091FF;
192 height: 16px;
193 line-height: 16px;
194 padding-left: 5px;
195 }
196 .name_title p {
197 display: inline-block;
198 color: #0091FF;
199 }
200 /* 房屋信息 */
201 .acceptance_information {
202 margin: 20px 0;
203 }
204 .acceptance_information h3 , .person_info h3, .data_upload h3{
205 height: 16px;
206 padding-left: 5px;
207 border-left: 3px solid #0091FF;
208 line-height: 18px;
209 font-size: 16px;
210 font-weight: 600;
211 margin-bottom: 15px;
212 color: #585656;
213 }
214 .acceptance_information ul {
215 font-size: 0;
216 }
217 .acceptance_information ul li {
218 display: inline-block;
219 width: 50%;
220 font-size: 14px;
221 line-height: 36px;
222 }
223 .acceptance_information ul li span {
224 color: #9B9B9B;
225 width: 100px;
226 text-align: right;
227 display: inline-block;
228 }
229 .acceptance_information ul li p {
230 display: inline-block;
231 }
232 /* 买卖双方信息 */
233 .layui-form-item .layui-inline {
234 width: 23%;
235 }
236 .idCard {
237 width: 150px;
238 }
239 .layui-form-label {
240 padding: 9px 0;
241 width: 92px;
242 }
243 .layui-icon-reduce-circle {
244 font-size: 20px!important;
245 }
246 .add_form {
247 height: 80px;
248 border: 2px dotted #d2d2d2;
249 cursor: pointer;
250 text-align: center;
251 padding-top: 18px;
252 box-sizing: border-box;
253 border-radius: 8px;
254 display: none;
255 }
256 .add_form:hover {
257 border-color: #0091FF;
258 }
259 .add_form i {
260 font-size: 20px!important;
261 }
262 .person_info h3 {
263 float: left;
264 margin-right: 10px;
265 }
266 .person_info .title {
267 line-height: 18px;
268 margin-bottom: 20px;
269 padding-left: 0!important;
270 }
271 .person_info .title input{
272 display: inline-block;
273 margin: 0 10px;
274 cursor: pointer;
275 width: 21px;
276 height: 21px;
277 position: relative;
278 top: -2px;
279 }
280 .person_info .title p {
281 display: inline-block;
282 position: relative;
283 top: -6.5px;
284 }
285 /* -----------------资料上传---------------------- */
286 .data_upload {
287 margin-top: 20px;
90 } 288 }
...\ No newline at end of file ...\ No newline at end of file
......
1 $(function () { 1 $(function () {
2
3 var tabledata = [
4 {
5 name: 'renchao',
6 idcard: '61012419930879879',
7 phone: '18740677380'
8 }
9 ];
10 var sellData = [
11 {
12 name: 'renchao',
13 idcard: '61012419930879879',
14 phone: '18740677380'
15 }
16 ];
17
18 layui.use('element', function () { 2 layui.use('element', function () {
19 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 3 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
20 //监听导航点击
21 element.on('nav(demo)', function (elem) {
22 layer.msg(elem.text());
23 });
24 }); 4 });
25 addTabs('#wssq') 5 addTabs('#wssq')
6 var data = {
7 'progressList': [
8 {
9 stepName: "信息效验",
10 stepState: 2 //0：未办理 1：正在办理 2：已办理
11 },
12 {
13 stepName: "填报信息",
14 stepState: 1
15 },
16 {
17 stepName: "完税核税",
18 stepState: 0
19 },
20 {
21 stepName: "身份认证",
22 stepState: 0
23 },
24 {
25 stepName: "资料审核",
26 stepState: 0
27 },
28 {
29 stepName: "线上缴费",
30 stepState: 0
31 },
32 {
33 stepName: "生成电子证书",
34 stepState: 0
35 }
36 ],
37 }
38 layui.use('laytpl', function () {
39 laytpl = layui.laytpl;
40 var getTpl = document.getElementById('progress').innerHTML
41 , view = document.getElementById('app_progress');
42 laytpl(getTpl).render(data, function (html) {
43 view.innerHTML = html;
44 });
26 45
27 // 业务 46 layui.use(['element'], function () {
28 layui.use('element', function () { 47 var element = layui.element;
29 var element = layui.element; 48 //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
30 //监听Tab切换，以改变地址hash值 49 element.init();
31 element.on('tab(status)', function () {
32 console.log(this.getAttribute('lay-id'))
33 }); 50 });
34 }); 51 });
35 // 买方信息 52 // form 表单
36 layui.use('table', function () { 53 layui.use('form', function () {
37 var table = layui.table; 54 var form = layui.form;
38 table.render({ 55 form.on('select(typeId)', function (data) {
39 elem: '#buyInfo' 56 console.log(data.value);
40 // , url: '../staticLib/wdyy/index.json'
41 , cols: [[
42 { field: 'name', title: '权利人', align: 'center', edit: 'text' }
43 , { field: 'idcard', title: '身份证号', align: 'center', edit: 'text' }
44 , { field: 'phone', title: '联系电话', align: 'center', edit: 'text' }
45 , { title: '操作', toolbar: '#barDemo', align: 'center' }
46 ]]
47 , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
48 return {
49 "code": res.code, //解析接口状态
50 "data": res.data //解析数据列表
51 };
52 },
53 data: tabledata
54 }); 57 });
55 table.on('row(buyInfo)', function (obj) { 58 //自定义验证规则
56 var rowIndex = $(obj.tr).attr("data-index"); 59 form.verify({
57 layer.confirm('此操作将删除一列是否继续', { 60 title: function (value) {
58 btn: ['是', '否'] //按钮 61 if (value.length == 0) {
59 }, function () { 62 return '权利人不能为空';
60 tabledata.splice(rowIndex, 1); 63 } else if (value.length < 2) {
61 table.reload('buyInfo', { 64 return '权利人至少得2个字符啊';
62 data: tabledata 65 }
63 }) 66 }
64 layer.closeAll();
65 }, function () {
66 });
67 }); 67 });
68 68
69 $('.tableAdd').click(function () { 69 //监听提交
70 tabledata.push({ 70 form.on('submit(demo1)', function (data) {
71 "name": "" 71 layer.alert(JSON.stringify(data.field), {
72 , "idcard": "" 72 title: '最终的提交信息'
73 , "phone": ""
74 })
75 table.reload('buyInfo', {
76 data: tabledata
77 }) 73 })
78 }) 74 return false;
75 });
76 })
77 $('.radioInfo').click(function () {
78 let index = $(this).attr("value")
79 if (index == 2 || index == 3) {
80 $('.add_form').show()
81 } else {
82 $('.add_form').hide()
83 }
79 }) 84 })
85 // form 添加
86 $('.add_form').click(function () {
87 $('.layui-form').append(
88 '<div class="layui-form-item">' +
89 '<div class="layui-inline">' +
90 '<label class="layui-form-label">姓名</label>' +
91 '<div class="layui-input-block">' +
92 '<input type="text" name="name" required lay-verify="name" placeholder="请输权利人" class="layui-input">' +
93 '</div>' +
94 '</div>' +
95 '<div class="layui-inline idCard">' +
96 '<label class="layui-form-label">身份证类型</label>' +
97 '<div class="layui-input-block">' +
98 '<select lay-filter="typeId">' +
99 '<option value="1">身份证</option>' +
100 '<option value="2">军官证</option>' +
101 '</select>' +
102 '</div>' +
103 '</div>' +
104 '<div class="layui-inline">' +
105 '<label class="layui-form-label">证件号码</label>' +
106 '<div class="layui-input-block">' +
107 '<input type="tel" name="card" maxlength="18" required lay-verify="card" placeholder="请输证件号码" class="layui-input">' +
108 '</div>' +
109 '</div>' +
110 '<div class="layui-inline">' +
111 '<label class="layui-form-label">联系方式</label>' +
112 '<div class="layui-input-block">' +
113 '<input type="tel" name="phone" maxlength="11" required lay-verify="phone" placeholder="请输联系方式" class="layui-input">' +
114 '</div>' +
115 '</div>' +
116 '<i class="layui-icon layui-icon-reduce-circle"></i>' +
117 '</div>'
118 )
80 119
81 // 卖方信息 120 layui.use('form', function () {
82 layui.use('table', function () { 121 var form = layui.form;
83 var table = layui.table; 122 form.render('select');
84 table.render({ 123 form.on('select(typeId)', function (data) {
85 elem: '#sellInfo' 124 console.log(data.value);
86 , cols: [[
87 { field: 'name', title: '义务人', align: 'center', edit: 'text' }
88 , { field: 'idcard', title: '证件号', align: 'center', edit: 'text' }
89 , { field: 'phone', title: '联系电话', align: 'center', edit: 'text' }
90 , { title: '操作', toolbar: '#barDemo', align: 'center' }
91 ]]
92 , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
93 return {
94 "code": res.code, //解析接口状态
95 "data": res.data //解析数据列表
96 };
97 },
98 data: sellData
99 });
100 //监听行工具事件
101 table.on('row(sellInfo)', function (obj) {
102 var rowIndex = $(obj.tr).attr("data-index");
103 layer.confirm('此操作将删除一列是否继续', {
104 btn: ['是', '否'] //按钮
105 }, function () {
106 sellData.splice(rowIndex, 1);
107 table.reload('sellInfo', {
108 data: sellData
109 })
110 layer.closeAll();
111 }, function () {
112 }); 125 });
113 }); 126 })
114 127 // 编辑
115 $('.tableAdd1').click(function () { 128 $(document).on("click", ".layui-icon-reduce-circle", function (e) {
116 sellData.push({ 129 $(this).parent().remove()
117 "name": ""
118 , "idcard": ""
119 , "phone": ""
120 })
121 console.log(999, sellData)
122 table.reload('sellInfo', {
123 data: sellData
124 })
125 }) 130 })
126 }) 131 })
127 // 图片上传 132 // 图片上传
...@@ -131,12 +136,16 @@ $(function () { ...@@ -131,12 +136,16 @@ $(function () {
131 var oFileSpan = $("#fileSpan"); //选择文件框 136 var oFileSpan = $("#fileSpan"); //选择文件框
132 var oFileList_parent = $(".fileList_parent"); //表格 137 var oFileList_parent = $(".fileList_parent"); //表格
133 var oFileList = $(".fileList"); //表格tbody 138 var oFileList = $(".fileList"); //表格tbody
134 var oFileBtn = $("#fileBtn"); //上传按钮 139 var oFileBtn = $("#fileBtn"); //上传按钮
135 var flieList = []; //数据，为一个复合数组 140 var flieList = []; //数据，为一个复合数组
136 var sizeObj = []; //存放每个文件大小的数组，用来比较去重 141 var sizeObj = []; //存放每个文件大小的数组，用来比较去重
137 //拖拽外部文件，进入目标元素触发 142 //拖拽外部文件，进入目标元素触发
138 oFileSpan.on("dragenter", function () { 143 oFileSpan.on("dragenter", function () {
139 $(this).find('.file_name').text("可以释放鼠标了！").css("background", "#ccc"); 144 $(this).find('.file_name').css("background", "#ccc");
145 $('.file_name').empty();
146 $(this).find('.file_name').append(
147 '<p style="line-height:200px">可以方鼠标了</p>'
148 )
140 }); 149 });
141 //拖拽外部文件，进入目标、离开目标之间，连续触发 150 //拖拽外部文件，进入目标、离开目标之间，连续触发
142 oFileSpan.on("dragover", function () { 151 oFileSpan.on("dragover", function () {
...@@ -144,42 +153,52 @@ $(function () { ...@@ -144,42 +153,52 @@ $(function () {
144 }); 153 });
145 //拖拽外部文件，离开目标元素触发 154 //拖拽外部文件，离开目标元素触发
146 oFileSpan.on("dragleave", function () { 155 oFileSpan.on("dragleave", function () {
147 $(this).find('.file_name').text("点击或拖拽文件上传").css("background", "none"); 156 $('.file_name').empty();
157 $(this).find('.file_name').css("background", "#ffff");
158 $(this).find('.file_name').append(
159 ' <i class="layui-icon layui-icon-addition"></i>' +
160 '<p>点击或拖拽文件上传</p>' +
161 '<div class="certificate">登记申请书（2份）</div>' +
162 '<div class="fileListName"></div>'
163 )
148 }); 164 });
149 //拖拽外部文件，在目标元素上释放鼠标触发 165 //拖拽外部文件，在目标元素上释放鼠标触发
150 oFileSpan.on("drop", function (ev) { 166 oFileSpan.on("drop", function (ev) {
151 var fs = ev.originalEvent.dataTransfer.files; 167 var fs = ev.originalEvent.dataTransfer.files;
168 $('.file_name').empty();
169 $(this).find('.file_name').css("background", "#ffff");
170 $(this).find('.file_name').append(
171 ' <i class="layui-icon layui-icon-addition"></i>' +
172 '<p>点击或拖拽文件上传</p>' +
173 '<div class="certificate">登记申请书（2份）</div>' +
174 '<div class="fileListName"></div>'
175 )
152 analysisList(fs); //解析列表函数 176 analysisList(fs); //解析列表函数
153 $(this).find('.file_name').text("点击或拖拽文件上传").css("background", "none");
154 return false; 177 return false;
155 }); 178 });
156 //点击选择文件按钮选文件 179 //点击选择文件按钮选文件
157 oFileInput.on("change", function () { 180 oFileInput.on("change", function () {
158 analysisList(this.files); 181 analysisList(this.files);
159 }) 182 })
160
161 //解析列表函数 183 //解析列表函数
162 function analysisList(obj) { 184 function analysisList(obj) {
163
164 //如果没有文件 185 //如果没有文件
165 if (obj.length < 1) { 186 if (obj.length < 1) {
166 return false; 187 return false;
167 } 188 }
168 for (var i = 0; i < obj.length; i++) { 189 for (var i = 0; i < obj.length; i++) {
169
170 var fileObj = obj[i]; //单个文件 190 var fileObj = obj[i]; //单个文件
171 var name = fileObj.name; //文件名 191 var name = fileObj.name; //文件名
172 var size = fileObj.size; //文件大小 192 var size = fileObj.size; //文件大小
173 var type = fileType(name); //文件类型，获取的是文件的后缀 193 var type = fileType(name); //文件类型，获取的是文件的后缀
174
175 //文件大于30M，就不上传 194 //文件大于30M，就不上传
176 if (size > 1024 * 1024 * 1024 || size == 0) { 195 if (size > 1024 * 1024 * 1024 || size == 0) {
177 layer.msg( '超过了30M，不能上传', {icon: 5}); 196 layer.msg('超过了30M，不能上传', { icon: 5 });
178 continue; 197 continue;
179 } 198 }
180 //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传 199 //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
181 if (sizeObj.indexOf(size) != -1) { 200 if (sizeObj.indexOf(size) != -1) {
182 layer.msg( '已经选择，不能重复上传', {icon: 5}); 201 layer.msg('已经选择，不能重复上传', { icon: 5 });
183 continue; 202 continue;
184 } 203 }
185 //给json对象添加内容，得到选择的文件的数据 204 //给json对象添加内容，得到选择的文件的数据
...@@ -189,11 +208,11 @@ $(function () { ...@@ -189,11 +208,11 @@ $(function () {
189 sizeObj.push(size); 208 sizeObj.push(size);
190 } 209 }
191 createList() //生成列表 210 createList() //生成列表
192 oFileList_parent.show(); //表格显示
193 document.querySelector('#fileInput').value = null 211 document.querySelector('#fileInput').value = null
212 if (flieList.length == 2) {
213 oFileList_parent.show(); //表格显示
214 }
194 }; 215 };
195
196
197 //生成列表 216 //生成列表
198 function createList() { 217 function createList() {
199 oFileList.empty(); //先清空元素内容 218 oFileList.empty(); //先清空元素内容
...@@ -201,10 +220,14 @@ $(function () { ...@@ -201,10 +220,14 @@ $(function () {
201 var fileData = flieList[i]; //flieList数组中的某一个 220 var fileData = flieList[i]; //flieList数组中的某一个
202 var name = fileData[1]; //文件名 221 var name = fileData[1]; //文件名
203 var oTr = $("<tr></tr>"); 222 var oTr = $("<tr></tr>");
204 var str = '<td><cite title="' + name + '">' + name + '</cite></td>'; 223 var str = '<td><p class="fileName" title="' + name + '">' + name + '</p></td>';
205 str += '<td><a class="operation">删除</a></td>'; 224 str += '<td class="iconClose"><a class="operation"><i class="layui-icon layui-icon-close"></i></a></td>';
206 oTr.html(str); 225 oTr.html(str);
207 oTr.appendTo(oFileList); 226 oTr.appendTo(oFileList);
227 $('.fileListName').append(
228 '<p class="fileName" title="' + name + '">' + name + '</p>' +
229 '<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
230 );
208 } 231 }
209 } 232 }
210 //删除表格行 233 //删除表格行
...@@ -214,6 +237,10 @@ $(function () { ...@@ -214,6 +237,10 @@ $(function () {
214 oTr.remove(); //删除这一行 237 oTr.remove(); //删除这一行
215 flieList.splice(index, 1); //删除数据 238 flieList.splice(index, 1); //删除数据
216 sizeObj.splice(index, 1); //删除文件大小数组中的项 239 sizeObj.splice(index, 1); //删除文件大小数组中的项
240 if (flieList.length == 0) {
241 $('.fileList_parent').hide()
242 $('.fileListName').empty();
243 }
217 }); 244 });
218 //上传 245 //上传
219 oFileBtn.on("click", function () { 246 oFileBtn.on("click", function () {
......
...@@ -18,86 +18,119 @@ ...@@ -18,86 +18,119 @@
18 <span class="layui-breadcrumb"> 18 <span class="layui-breadcrumb">
19 <a href="../../index.html">首页</a> 19 <a href="../../index.html">首页</a>
20 <a href="./wssq.html">网上申请</a> 20 <a href="./wssq.html">网上申请</a>
21 <a><cite>在线申请</cite></a> 21 <a><cite>填报信息</cite></a>
22 </span> 22 </span>
23 </div> 23 </div>
24 </div> 24 </div>
25 <div class="content_box"> 25 <div class="content_box">
26 <div class="name_title layui-bg-gray"> 26 <div class="name_title layui-bg-gray">
27 <h2></h2> 27 <h2>转移类</h2>
28 <p></p> 28 <p> 二手房转移买卖登记（个人）</p>
29 </div> 29 </div>
30 <ul class="app_progress"> 30 <div class="progressBar">
31 <li class="selected"> 31 <ul class="app_progress" id="app_progress">
32 <span>1</span> 32 </ul>
33 信息效验
34 </li>
35 <div class="line"></div>
36 <li class="active">
37 <span>2</span>
38 填报信息
39 </li>
40 <div class="line"></div>
41 <li>
42 <span>3</span>
43 完税核税
44 </li>
45 <div class="line"></div>
46 <li>
47 <span>4</span>
48 身份认证
49 </li>
50 <div class="line"></div>
51 <li>
52 <span>5</span>
53 资料审核
54 </li>
55 <div class="line"></div>
56 <li>
57 <span>6</span>
58 线上缴费
59 </li>
60 <div class="line"></div>
61 <li>
62 <span>7</span>
63 生成电子证书
64 </li>
65 </ul>
66 <div class="title layui-bg-green">
67 <h2>买方信息/共有情况</h2>
68 </div> 33 </div>
69 <div class="tabs_title"> 34 <!-- 房屋信息 -->
70 <input type="radio" name="1" value="单独所有" checked> 35 <div class="acceptance_information">
71 <p>单独所有</p> 36 <h3>房屋信息</h3>
72 <input type="radio" name="1" value="共同共有"> 37 <ul>
73 <p>共同共有</p> 38 <li>
74 <input type="radio" name="1" value="按份共有"> 39 <span>不动产单元号：</span>
75 <p>按份共有</p> 40 <p>450101 450002 GB 00740W00000000</p>
76 <i class="layui-icon layui-icon-add-circle tableAdd"></i> 41 </li>
77 </div> 42 <li>
78 <table id="buyInfo" lay-filter="buyInfo"></table> 43 <span>产权证号：</span>
79 44 <p>70205004005GB10030</p>
80 <div class="title layui-bg-green"> 45 </li>
81 <h2>卖方信息</h2> 46 <li>
82 <i class="layui-icon layui-icon-add-circle tableAdd1"></i> 47 <span>坐落：</span>
48 <p>
49 XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室
50 </p>
51 </li>
52 <li>
53 <span>面积：</span>
54 <p>526</p>
55 </li>
56 <li>
57 <span>合同备案号：</span>
58 <p>YS000000000001</p>
59 </li>
60 </ul>
83 </div> 61 </div>
84 <table id="sellInfo" lay-filter="sellInfo"></table> 62 <!-----------------买方信息------------------ -->
85 63 <div class="person_info">
86 <div class="title layui-bg-green"> 64 <div class="title">
87 <h2>申报材料</h2> 65 <h3>买方信息</h3>
66 <input type="radio" class="radioInfo" name="1" value="1" checked>
67 <p>单独所有</p>
68 <input type="radio" class="radioInfo" name="1" value="2">
69 <p>按份所有</p>
70 <input type="radio" class="radioInfo" name="1" value="3">
71 <p>共同所有</p>
72 </div>
73 <form class="layui-form">
74 <div class="layui-form-item">
75 <div class="layui-inline">
76 <label class="layui-form-label">姓名</label>
77 <div class="layui-input-block">
78 <input type="text" name="name" required lay-verify="name" placeholder="请输权利人"
79 class="layui-input">
80 </div>
81 </div>
82 <div class="layui-inline idCard">
83 <label class="layui-form-label">身份证类型</label>
84 <div class="layui-input-block">
85 <select lay-filter="typeId">
86 <option value="1">身份证</option>
87 <option value="2">军官证</option>
88 </select>
89 </div>
90 </div>
91 <div class="layui-inline">
92 <label class="layui-form-label">证件号码</label>
93 <div class="layui-input-block">
94 <input type="tel" name="card" maxlength="18" required lay-verify="card" placeholder="请输证件号码"
95 class="layui-input">
96 </div>
97 </div>
98 <div class="layui-inline">
99 <label class="layui-form-label">联系方式</label>
100 <div class="layui-input-block">
101 <input type="tel" name="phone" maxlength="11" required lay-verify="phone"
102 placeholder="请输联系方式" class="layui-input">
103 </div>
104 </div><i class="layui-icon layui-icon-reduce-circle"></i>
105 </div>
106 </form>
107 <div class="add_form layui-bg-gray">
108 <i class="layui-icon layui-icon-addition"></i>
109 <p>添加个人信息</p>
110 </div>
88 </div> 111 </div>
89 <div class="img_update"> 112 <!-----------------资料上传------------------ -->
90 <div class="fileBox"> 113 <div class="data_upload">
91 <div id="fileSpan" class="vm"> 114 <h3>资料上传</h3>
92 <input type="file" multiple id="fileInput" /> 115 <div class="img_update">
93 <p class="file_name"> 116 <div class="fileBox">
94 点击或拖拽文件上传 117 <div id="fileSpan" class="vm">
95 </p> 118 <input type="file" multiple id="fileInput" />
119 <div class="file_name">
120 <i class="layui-icon layui-icon-addition"></i>
121 <p>点击或拖拽文件上传</p>
122 <div class="certificate">登记申请书（2份）</div>
123 <div class="fileListName"></div>
124 </div>
125 </div>
126 </div>
127 <div class="fileList_parent">
128 <img src="../staticImages/dui.png">
129 <table width="150px" class="file_list">
130 <tbody class="fileList">
131 </table>
96 </div> 132 </div>
97 </div> 133 </div>
98 <table width="36%" border="1" class="fileList_parent">
99 <tbody class="fileList">
100 </table>
101 </div> 134 </div>
102 135
103 <div class="next_button"> 136 <div class="next_button">
...@@ -115,5 +148,40 @@ ...@@ -115,5 +148,40 @@
115 <script type="text/html" id="barDemo"> 148 <script type="text/html" id="barDemo">
116 <i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i> 149 <i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i>
117 </script> 150 </script>
151 <script id="progress" type="text/html">
152 {{# layui.each(d.progressList, function(index, item){ }}
153 {{# if(item.stepState==2){ }}
154 <li class="item_proress">
155 <p class="active"></p>
156 <h5>{{item.stepName}}</h5>
157 </li>
158 <li class="layui-progress">
159 <div class="layui-progress-bar" lay-percent="100%"></div>
160 </li>
161 {{# } }}
162 {{# if(item.stepState==1){ }}
163 <li class="item_proress">
164 <p class="active"></p>
165 <h5>{{item.stepName}}</h5>
166 </li>
167 {{# if(index!=(d.progressList.length-1)){ }}
168 <li class="layui-progress">
169 <div class="layui-progress-bar" lay-percent="50%"></div>
170 </li>
171 {{# } }}
172 {{# } }}
173 {{# if(item.stepState==0){ }}
174 <li class="item_proress">
175 <p></p>
176 <h5>{{item.stepName}}</h5>
177 </li>
178 {{# if(index!=(d.progressList.length-1)){ }}
179 <li class="layui-progress">
180 <div class="layui-progress-bar" lay-percent="0%"></div>
181 </li>
182 {{# } }}
183 {{# } }}
184 {{# }); }}
185 </script>
118 186
119 </html> 187 </html>
...\ No newline at end of file ...\ No newline at end of file
......