Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
0ca0258d by 田浩浩
Options

修改材料上传预览

1 parent aa1ce536
Inline Side-by-side
Showing 3 changed files with 263 additions and 143 deletions
......@@ -401,6 +401,7 @@ input[type='file'] {
.layui-form-label {
font-size: 14px;
}
.pictureUpload {
width: 240px;
height: 240px;
......@@ -410,8 +411,21 @@ input[type='file'] {
top: 0;
display: none;
}
.formInfo {
margin-top: 8px;
height: 15px;
line-height: 23px;
}
\ No newline at end of file
}
.pic {
width: 240px;
height: 240px;
/* border-radius: 6px;
margin: 20px auto; */
cursor: pointer;
}
.ddd{
}
......
......@@ -5,63 +5,64 @@ var bsmCl;
var lzfs = 1;
layui.use('element', function () {
});
$(function () {
addTabs('#wssq');
//设置步骤条信息
setAcceptFlow(GetQueryString('bsm_slsq'), GetQueryString('businessno'));
slsqxx = getApplyRecord(GetQueryString('bsm_slsq'), GetQueryString('businessno'));
LoadClxxDiv();
console.log(9999, slsqxx)
//config的设置是全局的
layui.config({
base: '../../staticJs/'
}).extend({ //设定模块别名
common: 'cityCommon'
});
layui.use(['form', 'common'], function () {
var common = layui.common,
form = layui.form;
//三级地址联动
common.showCity('province', 'city', 'district');
//区域选择
form.on('select(selectCity)', function (data) {
return false;
});
});
// layui.use(['form', 'common'], function () {
// var common = layui.common,
// form = layui.form;
// //三级地址联动
// common.showCity('province', 'city', 'district');
// //区域选择
// form.on('select(selectCity)', function (data) {
// return false;
// });
// });
// 买方信息
if(slsqxx.sqrList && slsqxx.sqrList.length>0) {
if (slsqxx.sqrList && slsqxx.sqrList.length > 0) {
$('#userName').text(slsqxx.sqrList[0].sqrmc);
$('#idCard').text(slsqxx.sqrList[0].zjhm);
$('#phone').text(slsqxx.sqrList[0].dhhm);
if(slsqxx.sqrList[0].sqrzj == '1') {
if (slsqxx.sqrList[0].sqrzj == '1') {
$('#documentType p').text('身份证');
}
let li;
for (var i = 1; i < slsqxx.sqrList.length; i++) {
li = '<div class="layui-form-item">'
li += '<div class="layui-inline">'
li += '<label class="layui-form-label">姓名</label>'
li += '<label class="layui-form-label">姓名</label>'
li += '<div class="layui-input-block">'
li += '<input type="text" name="name" value="'+slsqxx.sqrList[i].sqrmc+'" required lay-verify="name" placeholder="请输权利人" class="layui-input">'
li += '<input type="text" name="name" value="' + slsqxx.sqrList[i].sqrmc + '" required lay-verify="name" placeholder="请输权利人" class="layui-input">'
li += '</div>'
li += '</div>'
li += '<div class="layui-inline idCard">'
li += '<label class="layui-form-label">身份证类型</label>'
li += '<div class="layui-input-block">'
li += '<select lay-filter="typeId">'
li += '<option value="'+slsqxx.sqrList[i].sqrzj+'">身份证</option>'
li += '<option value="' + slsqxx.sqrList[i].sqrzj + '">身份证</option>'
li += '</select>'
li += '</div>'
li += '</div>'
li += '<div class="layui-inline">'
li += '<label class="layui-form-label">证件号码</label>'
li += '<div class="layui-input-block">'
li += '<input type="tel" name="card" value="'+slsqxx.sqrList[i].zjhm+ '" maxlength="18" required lay-verify="card" placeholder="请输证件号码" class="layui-input">'
li += '<input type="tel" name="card" value="' + slsqxx.sqrList[i].zjhm + '" maxlength="18" required lay-verify="card" placeholder="请输证件号码" class="layui-input">'
li += '</div>'
li += '</div>'
li += '<div class="layui-inline">'
li += '<label class="layui-form-label">联系方式</label>'
li += '<div class="layui-input-block">'
li += '<input type="tel" name="phone" value="'+slsqxx.sqrList[i].dhhm+'" maxlength="11" required lay-verify="phone" placeholder="请输联系方式" class="layui-input">'
li += '<input type="tel" name="phone" value="' + slsqxx.sqrList[i].dhhm + '" maxlength="11" required lay-verify="phone" placeholder="请输联系方式" class="layui-input">'
li += '</div>'
li += '</div>'
li += '<i class="layui-icon layui-icon-reduce-circle"></i>'
......@@ -69,17 +70,17 @@ $(function () {
$('#layui-form').append(li)
}
}else {
} else {
let userInfo = getCookie('myCookie');
$('#userName').text(userInfo.username);
$('#idCard').text(userInfo.zjhm);
$('#phone').text(userInfo.phone);
if(userInfo.zjzl == '1') {
if (userInfo.zjzl == '1') {
$('#documentType p').text('身份证');
}
}
// 获取房屋信息
let houseInfo = getFDCQ2(GetQueryString('bsm_slsq'));
let houseInfo = getFDCQ2(GetQueryString('bsm_slsq'));
$('#unitNumber p').text(houseInfo.bdcdyh);
$('#titleCertificate p').text(houseInfo.bdcqzh);
$('#beLocated p').text(houseInfo.fdzl);
......@@ -98,43 +99,23 @@ $(function () {
if (slsqxx.mailRecordDetail) {
$('#consignee').val(slsqxx.mailRecordDetail.consignee);
$('#consigneePhone').val(slsqxx.mailRecordDetail.consigneePhone);
$('#province').attr('data-area',slsqxx.mailRecordDetail.province);
$('#city').attr('data-area',slsqxx.mailRecordDetail.city);
$('#district').attr('data-area',slsqxx.mailRecordDetail.district);
$('#province').attr('data-area', slsqxx.mailRecordDetail.province);
$('#city').attr('data-area', slsqxx.mailRecordDetail.city);
$('#district').attr('data-area', slsqxx.mailRecordDetail.district);
$('#consigneeAddress').val(slsqxx.mailRecordDetail.consigneeAddress);
}
})
addTabs('#wssq')
// form 表单
// layui.use('form', function () {
// var form = layui.form;
// form.on('select(typeId)', function (data) {
// console.log(data.value);
// });
// //自定义验证规则
// form.verify({
// title: function (value) {
// if (value.length == 0) {
// return '权利人不能为空';
// } else if (value.length < 2) {
// return '权利人至少得2个字符啊';
// }
// }
// });
});
// //监听提交
// form.on('submit(demo1)', function (data) {
// layer.alert(JSON.stringify(data.field), {
// title: '最终的提交信息'
// })
// return false;
// });
// })
$('.radioInfo').click(function () {
let index = $(this).attr("value")
if ($('#layui-form .layui-form-item').length>1) {
if ($('#layui-form .layui-form-item').length > 1) {
return false
}else {
} else {
if (index == 2 || index == 3) {
$('.add_form').show()
} else {
......@@ -208,77 +189,186 @@ $('.formRadio').click(function () {
})
//下一步事件
function skipClick() {
if(_saveSQR()) {
skipNextPage(GetQueryString('bsm_slsq'),GetQueryString('businessno'));
}else {
if (_saveSQR()) {
skipNextPage(GetQueryString('bsm_slsq'), GetQueryString('businessno'));
} else {
layer.msg('保存信息出错！');
}
}
// //加载材料信息
// function LoadClxxDiv() {
// let clxxDic = $("#clxx");
// let clxxContent;
// $.each(slsqxx.slclList, function (index, item) {
// clxxContent = '<div class="img_update">';
// clxxContent += '<div class="fileBox">';
// clxxContent += '<div class="fileSpan vm">';
// clxxContent += '<input type="file" multiple id="fileInput' + index + '" onchange="handleUpdate(this,' + index + ', ' + slsqxx.slclList[index].fs + ')"/>';
// clxxContent += '<div class="pictureUpload"></div>';
// clxxContent += '<div class="file_name">';
// if (slsqxx.slclList[index].fs == item.slclmxDetailList.length) {
// clxxContent += '<img class="update" src="../../staticImages/Yes.png">';
// } else {
// clxxContent += '<img class="update" src="../../staticImages/update.png">';
// clxxContent += '<p class="updatetext">点击文件上传</p>';
// }
// clxxContent += '</div>';
// clxxContent += '<ul class="fileListName" id="fileULName' + index + '">'
// $.each(item.slclmxDetailList, function (childIndex, childIitem) {
// clxxContent += '<li class="fileName">' + '<span title="' + childIitem.fileName + '">' + childIitem.fileName + '</span>' + '<img bsmSlclmx="' + childIitem.bsmSlclmx + '" class="operation" src="../../staticImages/chacha.png">' + '</li>'
// });
// clxxContent += '</ul>';
// clxxContent += '</div>';
// clxxContent += '<div class="certificate">' + slsqxx.slclList[index].clmc + '【' + slsqxx.slclList[index].wjlxmc + '】（' + slsqxx.slclList[index].fs + '份）</div>';
// clxxContent += '</div>';
// clxxContent += '</div>';
// clxxDic.append(clxxContent);
// });
// }
// function handleUpdate(e, index, sizeNum) {
// let name = e.files[0].name;
// let fileul = $("#fileULName" + index);
// if (fileul.find("li").length >= slsqxx.slclList[index].fs) {
// return false
// } else {
// _uploadSlcl(e.files[0], slsqxx.slclList[index].bsmCl, $("#fileULName" + index), sizeNum);
// fileul.append('<li class="fileName">' + '<span title="' + name + '">' + name + '</span>' + '<img class="operation" src="../../staticImages/chacha.png">' + '</li>');
// }
// }
// $(document).on("click", ".pictureUpload", function (e) {
// layer.msg('已经完成上传最大限度', { icon: 5 });
// })
// $(document).on("click", ".fileListName .fileName .operation", function (e) {
// var that = this
// $.ajax({
// type: "post", //提交方式
// url: portal.api_url + "/portal/FillInformation/deleteSlcl",//路径
// dataType: "json",
// data: {
// 'bsmSlclmx': $(that).attr('bsmSlclmx')
// },
// //数据，这里使用的是Json格式进行传输
// success: function (result) {//返回数据根据结果进行相应的处理
// if (result.code == 200) {
// $(that).parent().remove();
// layer.msg('删除成功！');
// } else {
// layer.msg('删除失败！');
// }
// }
// });
// });
//加载材料信息
function LoadClxxDiv() {
let clxxDic = $("#clxx");
let clxxContent;
$.each(slsqxx.slclList, function (index, item) {
clxxContent = '<div class="img_update">';
clxxContent += '<div class="fileBox">';
clxxContent += '<div class="fileSpan vm">';
clxxContent += '<input type="file" multiple id="fileInput' + index + '" onchange="handleUpdate(this,' + index + ', ' + slsqxx.slclList[index].fs + ')"/>';
clxxContent += '<div class="pictureUpload"></div>';
clxxContent += '<div class="file_name">';
if (slsqxx.slclList[index].fs == item.slclmxDetailList.length) {
clxxContent += '<img class="update" src="../../staticImages/Yes.png">';
}else {
clxxContent += '<img class="update" src="../../staticImages/update.png">';
clxxContent += '<p class="updatetext">点击文件上传</p>';
clxxContent = '<div id="' + item.bsmCl + '">';
for (i = 0; i < item.fs; i++) {
clxxContent += '<div style="float: left;">';
clxxContent += '<img class="pic" src=""> ';
clxxContent += '<input name="file" accept="image/*" type="file" style="display: none" />';
clxxContent += '<div class="certificate">';
clxxContent += '<span>' + slsqxx.slclList[index].clmc + '【' + slsqxx.slclList[index].wjlxmc + '】（' + slsqxx.slclList[index].fs + '-' + (i + 1) + '）</span>';
clxxContent += '<a class="ddd">删除</a>';
clxxContent += '</div>';
clxxContent += '</div>';
}
clxxContent += '</div>';
clxxContent += '<ul class="fileListName" id="fileULName' + index + '">'
$.each(item.slclmxDetailList, function (childIndex, childIitem){
clxxContent += '<li class="fileName">' + '<span title="' + childIitem.fileName + '">' + childIitem.fileName + '</span>' + '<img bsmSlclmx="'+childIitem.bsmSlclmx+'" class="operation" src="../../staticImages/chacha.png">' + '</li>'
});
clxxContent +='</ul>';
clxxContent += '</div>';
clxxContent += '<div class="certificate">' + slsqxx.slclList[index].clmc + '【' + slsqxx.slclList[index].wjlxmc + '】（' + slsqxx.slclList[index].fs + '份）</div>';
clxxContent += '</div>';
clxxContent += '</div>';
clxxDic.append(clxxContent);
});
AddCLxxClick();
}
function handleUpdate(e, index, sizeNum) {
let name = e.files[0].name;
let fileul = $("#fileULName" + index);
if (fileul.find("li").length >= slsqxx.slclList[index].fs) {
return false
} else {
_uploadSlcl(e.files[0], slsqxx.slclList[index].bsmCl, $("#fileULName" + index), sizeNum);
fileul.append('<li class="fileName">' + '<span title="' + name + '">' + name + '</span>' + '<img class="operation" src="../../staticImages/chacha.png">' + '</li>');
}
//添加材料列表点击事件
function AddCLxxClick() {
//上传事件
$(".pic").click(function () {
$(this).next().click(); //隐藏了input:file样式后，点击头像就可以本地上传
$(this).next().on("change", function () {
var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
if (objUrl) {
let bsm_slclmx = UploadPicture(this.files[0], $(this).parent().parent().prop("id"));
if (bsm_slclmx == "") {
alert("图片上传失败，请稍后上传！");
}
else {
$(this).prev().attr("src", objUrl);//将图片路径存入src中，显示出图片
$(this).parent().attr("id", bsm_slclmx);
}
}
});
});
//删除事件
$(".ddd").click(function () {
let imgObj = $(this).parent().siblings(".pic");
let file = $(this).parent().siblings("input[type='file']");
let slclmxObj = $(this).parent().parent();
$.ajax({
type: "post", //提交方式
url: portal.api_url + "/portal/FillInformation/deleteSlcl",//路径
dataType: "json",
data: {
'bsmSlclmx': slclmxObj.prop("id")
},
//数据，这里使用的是Json格式进行传输
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200) {
imgObj.attr("src", "");
file.after(file.clone().val(""));
file.remove();
slclmxObj.attr("id", "");
} else {
alert('删除失败！');
}
}
});
});
}
$(document).on("click", ".pictureUpload", function (e) {
layer.msg('已经完成上传最大限度', { icon: 5 });
})
$(document).on("click", ".fileListName .fileName .operation", function (e) {
var that = this
// 图片上传
function UploadPicture(flie, bsmCl) {
let bsm_slclmx = "";
let formData = new FormData();
formData.append('bsmCl', bsmCl);
formData.append('files', flie);
$.ajax({
type: "post", //提交方式
url: portal.api_url + "/portal/FillInformation/deleteSlcl",//路径
url: portal.api_url + "/portal/FillInformation/uploadSlcl",//路径
dataType: "json",
data: {
'bsmSlclmx': $(that).attr('bsmSlclmx')
},
cache: false, //上传文件不需要缓存
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
async: false,
data: formData,
//数据，这里使用的是Json格式进行传输
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200) {
$(that).parent().remove();
layer.msg('删除成功！');
} else {
layer.msg('删除失败！');
bsm_slclmx = result.data[0].bsmSlclmx;
//layer.msg('上传成功!');
// fileul.parent().find('.fileListName .fileName').eq(fileul.find("li").length - 1).find('.operation').attr('bsmSlclmx', result.data[0].bsmSlclmx)
// if (fileul.find('.fileName').length === sizeNum) {
// fileul.parent().find('.pictureUpload').show()
// layer.msg('上传成功,并且以上传最大限度!');
// fileul.parent().find('.file_name').css("z-index", "15");
// fileul.parent().find('.updatetext').hide()
// fileul.parent().find('.update').attr('src', '../../staticImages/Yes.png')
// } else {
// layer.msg('上传成功!');
//
}
}
});
})
return bsm_slclmx;
}
// // 图片上传
function _uploadSlcl(flieList, bsmCl, fileul, sizeNum) {
var formData = new FormData();
......@@ -317,19 +407,19 @@ function _saveSQR() {
// 申请人信息
var d = {}, sqrList = [];
var t = $('.sqrList').serializeArray();
$.each(t, function() {
d[this.name] = this.value;
$.each(t, function () {
d[this.name] = this.value;
});
d.userid = getCookie('myCookie').userid;
sqrList.push(d);
for(var i=0; i<sqrList.length;i++) {
for (var i = 0; i < sqrList.length; i++) {
sqrList[i].sqrlx = 1;
}
// 领证方式-邮寄地址
var addMailRecordRequest = {};
if (lzfs==2) {
if (lzfs == 2) {
var addressList = $('.addressForm').serializeArray();
$.each(addressList, function() {
$.each(addressList, function () {
addMailRecordRequest[this.name] = this.value;
});
}
......@@ -344,17 +434,30 @@ function _saveSQR() {
'gyfsbm': 1,
'sqrlb': slsqxx.sqrlb,
'lzfs': lzfs,
'sqrList':sqrList,
'addMailRecordRequest':addMailRecordRequest
'sqrList': sqrList,
'addMailRecordRequest': addMailRecordRequest
}),
//数据，这里使用的是Json格式进行传输
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200) {
isSave = true
}else {
} else {
isSave = false
}
}
});
return isSave
}
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
......
......@@ -32,11 +32,11 @@
<ul class="app_progress" id="app_progress">
</ul>
</div>
<!-- 受理情况 -->
<div class="acceptance_information">
<!-- 受理情况 -->
<div class="acceptance_information">
<h3>受理情况</h3>
<ul>
<li id="11">
<span>登记业务名称：</span>
<p>二手房买卖</p>
......@@ -44,7 +44,7 @@
<li id="titleCertificate">
<span>原不动产权证号：</span>
<p>70205004005GB10030</p>
</li>
</li>
<li id="22">
<span>申请编号：</span>
<p>FW202000015</p>
......@@ -55,7 +55,7 @@
</li>
<li id="33">
<span>申请人：</span>
<p> 张三
<p> 张三
</p>
</li>
<li id="44">
......@@ -70,8 +70,8 @@
<span>登记情形：</span>
<p>二手房</p>
</li>
</ul>
</div>
<!-- 房屋信息 -->
......@@ -85,7 +85,7 @@
<li id="unitNumber">
<span>不动产单元号：</span>
<p>450101 450002 GB 00740W00000000</p>
</li>
</li>
<li id="beLocated">
<span>坐落：</span>
<p>
......@@ -96,7 +96,7 @@
<span>面积：</span>
<p>526</p>
</li>
<li>
<span>土地用途：</span>
<p>城镇住宅用地</p>
......@@ -143,8 +143,8 @@
</li>
</ul>
</div>
<!-- 受理情况 -->
<div class="acceptance_information">
<!-- 受理情况 -->
<div class="acceptance_information">
<h3>网签合同情况</h3>
<ul>
<li id="recordNo">
......@@ -158,10 +158,10 @@
<li id="22">
<span>交易价格：</span>
<p>100（万元）</p>
</li>
</li>
</ul>
</div>
<!-----------------买方信息------------------ -->
<!-----------------权利人信息------------------ -->
<div class="person_info">
<h3>权利人信息</h3>
<div class="person_radio">
......@@ -188,7 +188,7 @@
</div>
<div class="layui-inline">
<label class="layui-form-label">联系方式</label>
<p class="formInfo" id="phone"></p>
<p class="formInfo" id="phone"></p>
</div>
</div>
</form>
......@@ -197,9 +197,22 @@
<p>添加个人信息</p>
</div>
</div>
<!-----------------资料上传------------------ -->
<div class="data_upload" id="clxx">
<h3>资料上传</h3>
<!-- <div>
<div style="float: left;">
<img class="pic" src="">
<input name="file" accept="image/*" type="file" style="display: none" />
<div class="certificate">
<span> 申请书【原件】 3-1</span>
<a href="#">删除</a>
</div>
</div>
</div> -->
</div>
<!-- 领证方式 -->
<div class="obtaining_license">
......@@ -216,15 +229,16 @@
<div class="layui-inline">
<label class="layui-form-label">收件人</label>
<div class="layui-input-block">
<input type="text" name="consignee" id="consignee" lay-verify="title" autocomplete="off" placeholder="请输入收件人"
class="layui-input">
<input type="text" name="consignee" id="consignee" lay-verify="title"
autocomplete="off" placeholder="请输入收件人" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">手机号码</label>
<div class="layui-input-block">
<input type="tel" maxlength="11" id="consigneePhone" name="consigneePhone" lay-verify="consigneePhone" autocomplete="off"
placeholder="请输入手机号码" class="layui-input">
<input type="tel" maxlength="11" id="consigneePhone" name="consigneePhone"
lay-verify="consigneePhone" autocomplete="off" placeholder="请输入手机号码"
class="layui-input">
</div>
</div>
</div>
......@@ -233,7 +247,8 @@
<div class="layui-input-block ssq">
<h2>省</h2>
<div class="layui-inline layui-select-default" style="margin-right: 10px;">
<select name="province" class="Pselected" id="province" data-area="陕西省"" lay-filter="province">
<select name="province" class="Pselected" id="province"
data-area="陕西省"" lay-filter=" province">
<option value="">选择省</option>
</select>
</div>
......@@ -245,7 +260,8 @@
</div>
<h2>区</h2>
<div class="layui-inline selected layui-select-default">
<select name="district" class="Cselected" id="district" data-area="雁塔区" lay-filter="selectCity">
<select name="district" class="Cselected" id="district" data-area="雁塔区"
lay-filter="selectCity">
<option value="">选择区</option>
</select>
</div>
......@@ -254,7 +270,8 @@
<div>
<label class="layui-form-label">详细地址</label>
<div class="layui-input-block">
<textarea name="consigneeAddress" id="consigneeAddress" placeholder="请输入内容" class="layui-textarea"></textarea>
<textarea name="consigneeAddress" id="consigneeAddress" placeholder="请输入内容"
class="layui-textarea"></textarea>
</div>
</div>
<div class="next_button">
......@@ -282,19 +299,5 @@
<script type="text/javascript" src="../../staticJs/onlineApply/workFlow.js"></script>
<script type="text/javascript" src="../../staticJs/onlineApply/houseFill.js"></script>
<script type="text/javascript" src="../../staticJs/down.js"></script>
</html>
<!-- <div class="img_update">
<div class="fileBox">
<div class="fileSpan vm">
<input type="file" multiple id="fileInput3" />
<div class="file_name">
<img class="update" src="../../staticImages/update.png">
<p class="updatetext">点击文件上传</p>
</div>
<div class="fileListName3"></div>
<a class="record">下载模板</a>
</div>
<div class="certificate">询问笔录(1)份</div>
</div>
</div> -->
\ No newline at end of file
</html>
\ No newline at end of file
......