Skip to content

任超 / js.portalStaticPage

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

style:图片上传

1 parent eeb38948
Inline Side-by-side
Showing 3 changed files with 89 additions and 81 deletions
...@@ -460,6 +460,12 @@ input[type='file'] { ...@@ -460,6 +460,12 @@ input[type='file'] {
460 display: none; 460 display: none;
461 opacity: 0; 461 opacity: 0;
462 } 462 }
463 .mask1 {
464 display: block;
465 }
466 .mask1:hover {
467 opacity: 1;
468 }
463 .mask:hover { 469 .mask:hover {
464 opacity: 1; 470 opacity: 1;
465 } 471 }
...@@ -487,4 +493,19 @@ input[type='file'] { ...@@ -487,4 +493,19 @@ input[type='file'] {
487 text-align: center; 493 text-align: center;
488 writing-mode:vertical-lr; 494 writing-mode:vertical-lr;
489 margin-left: 5px; 495 margin-left: 5px;
496 }
497 .folkObligee {
498 display: none;
499 }
500 .folkObligee ul li {
501 width: 30%;
502 display: inline-block;
503 margin-bottom: 10px;
504 font-size: 14px;
505 }
506 .folkObligee ul li p {
507 display: inline-block;
508 }
509 .folkObligee ul li span {
510 color: #9B9B9B;
490 } 511 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -38,6 +38,24 @@ $(function () { ...@@ -38,6 +38,24 @@ $(function () {
38 loadSqrDetail() 38 loadSqrDetail()
39 //读取邮寄信息 39 //读取邮寄信息
40 loadMailDetail(); 40 loadMailDetail();
41 // 在这里页面显示进行处理
42 console.log(99999, slsqxx)
43 if (slsqxx.sqrlb == '1' && slsqxx.sqfs == '2') {
44 $('.obtaining_license').hide();
45 $('#obligeeInformation').text('权利人信息');
46 $('.nextSubmitButton').append('<div class="next_button">' +
47 '<button type="button" lay-submit="" lay-filter="submit1" class="layui-btn layui-btn-normal">' +
48 '<a onclick="skipClick()">下一步</a>' +
49 '</button>' +
50 '</div>')
51 } else {
52 $('#obligeeInformation').text('义务人信息');
53 $('.nextSubmitButton').empty();
54 }
55 //
56 if (slsqxx.sqfs == '1') {
57 $('.folkObligee').show();
58 }
41 }); 59 });
42 60
43 //读取受理信息 61 //读取受理信息
...@@ -222,90 +240,30 @@ function skipClick() { ...@@ -222,90 +240,30 @@ function skipClick() {
222 } 240 }
223 } 241 }
224 242
225 // //加载材料信息
226 // function LoadClxxDiv() {
227 // let clxxDic = $("#clxx");
228 // let clxxContent;
229 // $.each(slsqxx.slclList, function (index, item) {
230 // clxxContent = '<div class="img_update">';
231 // clxxContent += '<div class="fileBox">';
232 // clxxContent += '<div class="fileSpan vm">';
233 // clxxContent += '<input type="file" multiple id="fileInput' + index + '" onchange="handleUpdate(this,' + index + ', ' + slsqxx.slclList[index].fs + ')"/>';
234 // clxxContent += '<div class="pictureUpload"></div>';
235 // clxxContent += '<div class="file_name">';
236 // if (slsqxx.slclList[index].fs == item.slclmxDetailList.length) {
237 // clxxContent += '<img class="update" src="../../staticImages/Yes.png">';
238 // } else {
239 // clxxContent += '<img class="update" src="../../staticImages/update.png">';
240 // clxxContent += '<p class="updatetext">点击文件上传</p>';
241 // }
242 // clxxContent += '</div>';
243 // clxxContent += '<ul class="fileListName" id="fileULName' + index + '">'
244 // $.each(item.slclmxDetailList, function (childIndex, childIitem) {
245 // clxxContent += '<li class="fileName">' + '<span title="' + childIitem.fileName + '">' + childIitem.fileName + '</span>' + '<img bsmSlclmx="' + childIitem.bsmSlclmx + '" class="operation" src="../../staticImages/chacha.png">' + '</li>'
246 // });
247 // clxxContent += '</ul>';
248 // clxxContent += '</div>';
249 // clxxContent += '<div class="certificate">' + slsqxx.slclList[index].clmc + '【' + slsqxx.slclList[index].wjlxmc + '】（' + slsqxx.slclList[index].fs + '份）</div>';
250 // clxxContent += '</div>';
251 // clxxContent += '</div>';
252 // clxxDic.append(clxxContent);
253 // });
254 // }
255
256 // function handleUpdate(e, index, sizeNum) {
257 // let name = e.files[0].name;
258 // let fileul = $("#fileULName" + index);
259 // if (fileul.find("li").length >= slsqxx.slclList[index].fs) {
260 // return false
261 // } else {
262 // _uploadSlcl(e.files[0], slsqxx.slclList[index].bsmCl, $("#fileULName" + index), sizeNum);
263 // fileul.append('<li class="fileName">' + '<span title="' + name + '">' + name + '</span>' + '<img class="operation" src="../../staticImages/chacha.png">' + '</li>');
264 // }
265 // }
266 // $(document).on("click", ".pictureUpload", function (e) {
267 // layer.msg('已经完成上传最大限度', { icon: 5 });
268 // })
269
270 // $(document).on("click", ".fileListName .fileName .operation", function (e) {
271 // var that = this
272 // $.ajax({
273 // type: "post", //提交方式
274 // url: portal.api_url + "/portal/FillInformation/deleteSlcl",//路径
275 // dataType: "json",
276 // data: {
277 // 'bsmSlclmx': $(that).attr('bsmSlclmx')
278 // },
279 // //数据，这里使用的是Json格式进行传输
280 // success: function (result) {//返回数据根据结果进行相应的处理
281 // if (result.code == 200) {
282 // $(that).parent().remove();
283 // layer.msg('删除成功！');
284 // } else {
285 // layer.msg('删除失败！');
286 // }
287 // }
288 // });
289 // });
290
291
292 //加载材料信息 243 //加载材料信息
293 function LoadClxxDiv() { 244 function LoadClxxDiv() {
294 let clxxDic = $("#clxx"); 245 let clxxDic = $("#clxx");
295 let clxxContent; 246 let clxxContent;
296 $.each(slsqxx.slclList, function (index, item) { 247 $.each(slsqxx.slclList, function (index, item) {
297 clxxContent = '<div id="' + item.bsmCl + '" class="conImageUpdate">'; 248 clxxContent = '<div id="' + item.bsmCl + '" class="conImageUpdate">';
298 clxxContent += '<h5 class="imageUpdateTitle">' + slsqxx.slclList[index].clmc + '</h5>'; 249 clxxContent += '<h5 class="imageUpdateTitle">' + item.clmc + '</h5>';
299 for (i = 0; i < item.fs; i++) { 250 for (i = 0; i < item.fs; i++) {
300 clxxContent += '<div style="float: left;" class="itemImageUpdate">'; 251 if (item.slclmxDetailList.length > i) {
301 clxxContent += '<img class="pic" src="../../staticImages/update.png">'; 252 clxxContent += '<div style="float: left;" id="' + item.slclmxDetailList[i].bsmSlclmx + '" class="itemImageUpdate">';
253 clxxContent += '<img class="pic" src="' + item.slclmxDetailList[i].preViewUrl + '">';
254 clxxContent += '<div class="mask mask1"><p><img class="enlarge" src="../../staticImages/fangda.png"><img class="delete" src="../../staticImages/shanchu.png"></p></div>';
255 } else {
256 clxxContent += '<div style="float: left;" class="itemImageUpdate">';
257 clxxContent += '<img class="pic" src="../../staticImages/update.png">';
258 clxxContent += '<div class="mask"><p><img class="enlarge" src="../../staticImages/fangda.png"><img class="delete" src="../../staticImages/shanchu.png"></p></div>';
259 }
302 clxxContent += '<input name="file" accept="image/*" type="file" style="display: none" />'; 260 clxxContent += '<input name="file" accept="image/*" type="file" style="display: none" />';
303 clxxContent += '<div class="mask"><p><img class="enlarge" src="../../staticImages/fangda.png"> <img class="delete" src="../../staticImages/shanchu.png"></p></div>';
304 clxxContent += '<div class="certificate">'; 261 clxxContent += '<div class="certificate">';
305 clxxContent += '<span>' + slsqxx.slclList[index].clmc + '【' + slsqxx.slclList[index].wjlxmc + '】（' + slsqxx.slclList[index].fs + '-' + (i + 1) + '）</span>'; 262 clxxContent += '<span>' + slsqxx.slclList[index].clmc + '【' + slsqxx.slclList[index].wjlxmc + '】（' + slsqxx.slclList[index].fs + '-' + (i + 1) + '）</span>';
306 clxxContent += '</div>'; 263 clxxContent += '</div>';
307 clxxContent += '</div>'; 264 clxxContent += '</div>';
308 } 265 }
266
309 clxxContent += '</div>'; 267 clxxContent += '</div>';
310 clxxDic.append(clxxContent); 268 clxxDic.append(clxxContent);
311 }); 269 });
...@@ -316,24 +274,23 @@ function LoadClxxDiv() { ...@@ -316,24 +274,23 @@ function LoadClxxDiv() {
316 function AddCLxxClick() { 274 function AddCLxxClick() {
317 //上传事件 275 //上传事件
318 $(".pic").click(function () { 276 $(".pic").click(function () {
319 $(this).next().click(); //隐藏了input:file样式后，点击头像就可以本地上传 277 $(this).next().next().click(); //隐藏了input:file样式后，点击头像就可以本地上传
320 $(this).next().on("change", function () { 278 $(this).next().next().on("change", function () {
321 var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径 279 var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
322 var file = this.files[0].type; 280 var file = this.files[0].type;
323 if (file=='') { 281 if (file == '') {
324 layer.msg('请上传，jpg,png,jpeg,gif格式文件'); 282 layer.msg('请上传，jpg,png,jpeg,gif格式文件');
325 return false; 283 return false;
326 } 284 }
327 if (objUrl) { 285 if (objUrl) {
328 let imageData = UploadPicture(this.files[0], $(this).parent().parent().prop("id")); 286 let imageData = UploadPicture(this.files[0], $(this).parent().parent().prop("id"));
329 console.log(999, imageData) 287 if (imageData.bsmSlclmx == "") {
330 if (imageData.bsm_slclmx == "") {
331 layer.msg('图片上传失败，请稍后上传！'); 288 layer.msg('图片上传失败，请稍后上传！');
332 } 289 }
333 else { 290 else {
334 layer.msg('图片上传成功'); 291 layer.msg('图片上传成功');
335 $(this).prev().attr("src", imageData.preViewUrl);//将图片路径存入src中，显示出图片 292 $(this).prev().prev().attr("src", imageData.preViewUrl);//将图片路径存入src中，显示出图片
336 $(this).parent().attr("id", imageData.bsm_slclmx); 293 $(this).parent().attr("id", imageData.bsmSlclmx);
337 $(this).parent().find('.mask').show(); 294 $(this).parent().find('.mask').show();
338 } 295 }
339 } 296 }
...@@ -378,7 +335,7 @@ function AddCLxxClick() { ...@@ -378,7 +335,7 @@ function AddCLxxClick() {
378 $(document).on("click", ".enlarge", function (e) { 335 $(document).on("click", ".enlarge", function (e) {
379 let src = $(this).parent().parent().siblings(".pic").attr('src') 336 let src = $(this).parent().parent().siblings(".pic").attr('src')
380 console.log($(this).parent().parent().siblings(".pic").attr('src')) 337 console.log($(this).parent().parent().siblings(".pic").attr('src'))
381 var imgHtml = "<img style='width:1000px;height:600px' src='"+src+"' />"; 338 var imgHtml = "<img style='width:1000px;height:600px' src='" + src + "' />";
382 layer.open({ 339 layer.open({
383 type: 1, 340 type: 1,
384 title: false, 341 title: false,
......
...@@ -161,7 +161,7 @@ ...@@ -161,7 +161,7 @@
161 </div> 161 </div>
162 <!-----------------权利人信息------------------ --> 162 <!-----------------权利人信息------------------ -->
163 <div class="person_info"> 163 <div class="person_info">
164 <h3>权利人信息</h3> 164 <h3 id="obligeeInformation">权利人信息</h3>
165 <div class="person_radio"> 165 <div class="person_radio">
166 <input type="radio" class="radioInfo" name="1" value="1" checked> 166 <input type="radio" class="radioInfo" name="1" value="1" checked>
167 <p>单独所有</p> 167 <p>单独所有</p>
...@@ -195,11 +195,41 @@ ...@@ -195,11 +195,41 @@
195 <p>添加个人信息</p> 195 <p>添加个人信息</p>
196 </div> 196 </div>
197 </div> 197 </div>
198 198 <!-- 单方申请权利人信息 -->
199 <div class="person_info folkObligee">
200 <h3>权利人信息</h3>
201 <ul>
202 <li>
203 <span>公司名称：</span>
204 <p>西安紫薇房产</p>
205 </li>
206 <li>
207 <span>统一社会信用代码：</span>
208 <p>789798789798</p>
209 </li>
210 <li>
211 <span>联系电话：</span>
212 <p>18740677380</p>
213 </li>
214 <li>
215 <span>法人信息：</span>
216 <p>任超</p>
217 </li>
218 <li>
219 <span>证件类型：</span>
220 <p>身份证</p>
221 </li>
222 <li>
223 <span>证件号码：</span>
224 <p>6101279879798798</p>
225 </li>
226 </ul>
227 </div>
199 <!-----------------资料上传------------------ --> 228 <!-----------------资料上传------------------ -->
200 <div class="data_upload" id="clxx"> 229 <div class="data_upload" id="clxx">
201 <h3>资料上传</h3> 230 <h3>资料上传</h3>
202 </div> 231 </div>
232 <div class="nextSubmitButton"></div>
203 <!-- 领证方式 --> 233 <!-- 领证方式 -->
204 <div class="obtaining_license"> 234 <div class="obtaining_license">
205 <h3>领证方式</h3> 235 <h3>领证方式</h3>
......