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 467 additions and 174 deletions
......@@ -2,7 +2,6 @@
width: 1200px;
margin: 0 auto;
min-height:calc(100vh - 227px);
padding: 20px 0;
}
.title {
height: 16px;
......@@ -58,10 +57,40 @@
.img_update {
border: 1px solid #eeeeee;
overflow: hidden;
position: relative;
}
.fileBox{ margin:10px;width: 330px;float: left; }
#fileSpan{display:inline-block;width:300px;height:150px;border:2px dashed #ccc;text-align:center;line-height:150px;position: relative;}
.fileBox{
margin:10px;float: left;
}
.file_name i {
display: block;
font-size: 32px;
height: 24px;
position: relative;
line-height: 24px;
top: -10px;
padding-top: 60px;
margin-bottom: 10px;
}
.file_name p {
line-height: 16px;
}
.certificate {
height: 24px;
color: red;
margin-top: 5px;
font-size: 14px;
line-height: 24px;
}
#fileSpan{
display: inline-block;
width: 285px;
height: 200px;
border: 2px dashed #ccc;
text-align: center;
position: relative;
}
#fileInput {
position: absolute;
width: 100%;
......@@ -69,17 +98,80 @@
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
z-index: 10;
}
.fileList_parent{
position: absolute;
left: 12px;
top: 12px;
width: 285px;
height: 200px;
text-align: center;
box-sizing: border-box;
padding: 30px 20px;
display: none;
background-color: #eee;
z-index: 20;
}
.fileName {
width: 80px;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file_list {
text-align: center;
margin: 0 auto;
}
.fileList_parent img {
width: 50px;
height: 60px;
}
.fileList_parent{margin:20px;display:none;}
.fileList_parent {
float: left;
}
.file_name {
height: 200px;
text-align: center;
line-height: 200px;
position: relative;
}
.operation {
color: #0091FF;
cursor: pointer;
}
.fileListName {
text-align: center;
padding-top: 10px;
}
.fileListName p {
display: inline-block;
height: 17px;
}
.fileListName a {
display: inline-block;
line-height: 14px;
}
.fileListName a i {
line-height: 14px;
height: 14px;
padding: 0;
position: relative;
top: -2px;
font-size: 14px;
font-weight: 600;
}
.fileList tr {
line-height: 28px;
width: 70px;
}
.fileList tr td {
width: 70px;
}
.operation a:hover {
color: #0091FF!important;
}
.next_button {
text-align: center;
......@@ -88,3 +180,109 @@
.next_button a {
color: #ffffff;
}
.name_title {
padding: 10px;
margin:15px 0;
}
.name_title h2 {
display: inline-block;
font-weight: 600;
margin-right: 10px;
border-left: 3px solid #0091FF;
height: 16px;
line-height: 16px;
padding-left: 5px;
}
.name_title p {
display: inline-block;
color: #0091FF;
}
/* 房屋信息 */
.acceptance_information {
margin: 20px 0;
}
.acceptance_information h3 , .person_info h3, .data_upload h3{
height: 16px;
padding-left: 5px;
border-left: 3px solid #0091FF;
line-height: 18px;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: #585656;
}
.acceptance_information ul {
font-size: 0;
}
.acceptance_information ul li {
display: inline-block;
width: 50%;
font-size: 14px;
line-height: 36px;
}
.acceptance_information ul li span {
color: #9B9B9B;
width: 100px;
text-align: right;
display: inline-block;
}
.acceptance_information ul li p {
display: inline-block;
}
/* 买卖双方信息 */
.layui-form-item .layui-inline {
width: 23%;
}
.idCard {
width: 150px;
}
.layui-form-label {
padding: 9px 0;
width: 92px;
}
.layui-icon-reduce-circle {
font-size: 20px!important;
}
.add_form {
height: 80px;
border: 2px dotted #d2d2d2;
cursor: pointer;
text-align: center;
padding-top: 18px;
box-sizing: border-box;
border-radius: 8px;
display: none;
}
.add_form:hover {
border-color: #0091FF;
}
.add_form i {
font-size: 20px!important;
}
.person_info h3 {
float: left;
margin-right: 10px;
}
.person_info .title {
line-height: 18px;
margin-bottom: 20px;
padding-left: 0!important;
}
.person_info .title input{
display: inline-block;
margin: 0 10px;
cursor: pointer;
width: 21px;
height: 21px;
position: relative;
top: -2px;
}
.person_info .title p {
display: inline-block;
position: relative;
top: -6.5px;
}
/* -----------------资料上传---------------------- */
.data_upload {
margin-top: 20px;
}
\ No newline at end of file
......
$(function () {
var tabledata = [
{
name: 'renchao',
idcard: '61012419930879879',
phone: '18740677380'
}
];
var sellData = [
{
name: 'renchao',
idcard: '61012419930879879',
phone: '18740677380'
}
];
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
layer.msg(elem.text());
});
});
addTabs('#wssq')
var data = {
'progressList': [
{
stepName: "信息效验",
stepState: 2 //0：未办理 1：正在办理 2：已办理
},
{
stepName: "填报信息",
stepState: 1
},
{
stepName: "完税核税",
stepState: 0
},
{
stepName: "身份认证",
stepState: 0
},
{
stepName: "资料审核",
stepState: 0
},
{
stepName: "线上缴费",
stepState: 0
},
{
stepName: "生成电子证书",
stepState: 0
}
],
}
layui.use('laytpl', function () {
laytpl = layui.laytpl;
var getTpl = document.getElementById('progress').innerHTML
, view = document.getElementById('app_progress');
laytpl(getTpl).render(data, function (html) {
view.innerHTML = html;
});
// 业务
layui.use('element', function () {
layui.use(['element'], function () {
var element = layui.element;
//监听Tab切换，以改变地址hash值
element.on('tab(status)', function () {
console.log(this.getAttribute('lay-id'))
//初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
element.init();
});
});
// 买方信息
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#buyInfo'
// , url: '../staticLib/wdyy/index.json'
, cols: [[
{ field: 'name', title: '权利人', align: 'center', edit: 'text' }
, { field: 'idcard', title: '身份证号', align: 'center', edit: 'text' }
, { field: 'phone', title: '联系电话', align: 'center', edit: 'text' }
, { title: '操作', toolbar: '#barDemo', align: 'center' }
]]
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.code, //解析接口状态
"data": res.data //解析数据列表
};
},
data: tabledata
});
table.on('row(buyInfo)', function (obj) {
var rowIndex = $(obj.tr).attr("data-index");
layer.confirm('此操作将删除一列是否继续', {
btn: ['是', '否'] //按钮
}, function () {
tabledata.splice(rowIndex, 1);
table.reload('buyInfo', {
data: tabledata
})
layer.closeAll();
}, function () {
// 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个字符啊';
}
}
});
$('.tableAdd').click(function () {
tabledata.push({
"name": ""
, "idcard": ""
, "phone": ""
})
table.reload('buyInfo', {
data: tabledata
//监听提交
form.on('submit(demo1)', function (data) {
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
})
$('.radioInfo').click(function () {
let index = $(this).attr("value")
if (index == 2 || index == 3) {
$('.add_form').show()
} else {
$('.add_form').hide()
}
})
// form 添加
$('.add_form').click(function () {
$('.layui-form').append(
'<div class="layui-form-item">' +
'<div class="layui-inline">' +
'<label class="layui-form-label">姓名</label>' +
'<div class="layui-input-block">' +
'<input type="text" name="name" required lay-verify="name" placeholder="请输权利人" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-inline idCard">' +
'<label class="layui-form-label">身份证类型</label>' +
'<div class="layui-input-block">' +
'<select lay-filter="typeId">' +
'<option value="1">身份证</option>' +
'<option value="2">军官证</option>' +
'</select>' +
'</div>' +
'</div>' +
'<div class="layui-inline">' +
'<label class="layui-form-label">证件号码</label>' +
'<div class="layui-input-block">' +
'<input type="tel" name="card" maxlength="18" required lay-verify="card" placeholder="请输证件号码" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-inline">' +
'<label class="layui-form-label">联系方式</label>' +
'<div class="layui-input-block">' +
'<input type="tel" name="phone" maxlength="11" required lay-verify="phone" placeholder="请输联系方式" class="layui-input">' +
'</div>' +
'</div>' +
'<i class="layui-icon layui-icon-reduce-circle"></i>' +
'</div>'
)
// 卖方信息
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#sellInfo'
, cols: [[
{ field: 'name', title: '义务人', align: 'center', edit: 'text' }
, { field: 'idcard', title: '证件号', align: 'center', edit: 'text' }
, { field: 'phone', title: '联系电话', align: 'center', edit: 'text' }
, { title: '操作', toolbar: '#barDemo', align: 'center' }
]]
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.code, //解析接口状态
"data": res.data //解析数据列表
};
},
data: sellData
layui.use('form', function () {
var form = layui.form;
form.render('select');
form.on('select(typeId)', function (data) {
console.log(data.value);
});
//监听行工具事件
table.on('row(sellInfo)', function (obj) {
var rowIndex = $(obj.tr).attr("data-index");
layer.confirm('此操作将删除一列是否继续', {
btn: ['是', '否'] //按钮
}, function () {
sellData.splice(rowIndex, 1);
table.reload('sellInfo', {
data: sellData
})
layer.closeAll();
}, function () {
});
});
$('.tableAdd1').click(function () {
sellData.push({
"name": ""
, "idcard": ""
, "phone": ""
})
console.log(999, sellData)
table.reload('sellInfo', {
data: sellData
})
// 编辑
$(document).on("click", ".layui-icon-reduce-circle", function (e) {
$(this).parent().remove()
})
})
// 图片上传
......@@ -136,7 +141,11 @@ $(function () {
var sizeObj = []; //存放每个文件大小的数组，用来比较去重
//拖拽外部文件，进入目标元素触发
oFileSpan.on("dragenter", function () {
$(this).find('.file_name').text("可以释放鼠标了！").css("background", "#ccc");
$(this).find('.file_name').css("background", "#ccc");
$('.file_name').empty();
$(this).find('.file_name').append(
'<p style="line-height:200px">可以方鼠标了</p>'
)
});
//拖拽外部文件，进入目标、离开目标之间，连续触发
oFileSpan.on("dragover", function () {
......@@ -144,42 +153,52 @@ $(function () {
});
//拖拽外部文件，离开目标元素触发
oFileSpan.on("dragleave", function () {
$(this).find('.file_name').text("点击或拖拽文件上传").css("background", "none");
$('.file_name').empty();
$(this).find('.file_name').css("background", "#ffff");
$(this).find('.file_name').append(
' <i class="layui-icon layui-icon-addition"></i>' +
'<p>点击或拖拽文件上传</p>' +
'<div class="certificate">登记申请书（2份）</div>' +
'<div class="fileListName"></div>'
)
});
//拖拽外部文件，在目标元素上释放鼠标触发
oFileSpan.on("drop", function (ev) {
var fs = ev.originalEvent.dataTransfer.files;
$('.file_name').empty();
$(this).find('.file_name').css("background", "#ffff");
$(this).find('.file_name').append(
' <i class="layui-icon layui-icon-addition"></i>' +
'<p>点击或拖拽文件上传</p>' +
'<div class="certificate">登记申请书（2份）</div>' +
'<div class="fileListName"></div>'
)
analysisList(fs); //解析列表函数
$(this).find('.file_name').text("点击或拖拽文件上传").css("background", "none");
return false;
});
//点击选择文件按钮选文件
oFileInput.on("change", function () {
analysisList(this.files);
})
//解析列表函数
function analysisList(obj) {
//如果没有文件
if (obj.length < 1) {
return false;
}
for (var i = 0; i < obj.length; i++) {
var fileObj = obj[i]; //单个文件
var name = fileObj.name; //文件名
var size = fileObj.size; //文件大小
var type = fileType(name); //文件类型，获取的是文件的后缀
//文件大于30M，就不上传
if (size > 1024 * 1024 * 1024 || size == 0) {
layer.msg( '超过了30M，不能上传', {icon: 5});
layer.msg('超过了30M，不能上传', { icon: 5 });
continue;
}
//把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
if (sizeObj.indexOf(size) != -1) {
layer.msg( '已经选择，不能重复上传', {icon: 5});
layer.msg('已经选择，不能重复上传', { icon: 5 });
continue;
}
//给json对象添加内容，得到选择的文件的数据
......@@ -189,11 +208,11 @@ $(function () {
sizeObj.push(size);
}
createList() //生成列表
oFileList_parent.show(); //表格显示
document.querySelector('#fileInput').value = null
if (flieList.length == 2) {
oFileList_parent.show(); //表格显示
}
};
//生成列表
function createList() {
oFileList.empty(); //先清空元素内容
......@@ -201,10 +220,14 @@ $(function () {
var fileData = flieList[i]; //flieList数组中的某一个
var name = fileData[1]; //文件名
var oTr = $("<tr></tr>");
var str = '<td><cite title="' + name + '">' + name + '</cite></td>';
str += '<td><a class="operation">删除</a></td>';
var str = '<td><p class="fileName" title="' + name + '">' + name + '</p></td>';
str += '<td class="iconClose"><a class="operation"><i class="layui-icon layui-icon-close"></i></a></td>';
oTr.html(str);
oTr.appendTo(oFileList);
$('.fileListName').append(
'<p class="fileName" title="' + name + '">' + name + '</p>' +
'<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
);
}
}
//删除表格行
......@@ -214,6 +237,10 @@ $(function () {
oTr.remove(); //删除这一行
flieList.splice(index, 1); //删除数据
sizeObj.splice(index, 1); //删除文件大小数组中的项
if (flieList.length == 0) {
$('.fileList_parent').hide()
$('.fileListName').empty();
}
});
//上传
oFileBtn.on("click", function () {
......
......@@ -18,87 +18,120 @@
<span class="layui-breadcrumb">
<a href="../../index.html">首页</a>
<a href="./wssq.html">网上申请</a>
<a><cite>在线申请</cite></a>
<a><cite>填报信息</cite></a>
</span>
</div>
</div>
<div class="content_box">
<div class="name_title layui-bg-gray">
<h2></h2>
<p></p>
<h2>转移类</h2>
<p> 二手房转移买卖登记（个人）</p>
</div>
<ul class="app_progress">
<li class="selected">
<span>1</span>
信息效验
</li>
<div class="line"></div>
<li class="active">
<span>2</span>
填报信息
</li>
<div class="line"></div>
<div class="progressBar">
<ul class="app_progress" id="app_progress">
</ul>
</div>
<!-- 房屋信息 -->
<div class="acceptance_information">
<h3>房屋信息</h3>
<ul>
<li>
<span>3</span>
完税核税
<span>不动产单元号：</span>
<p>450101 450002 GB 00740W00000000</p>
</li>
<div class="line"></div>
<li>
<span>4</span>
身份认证
<span>产权证号：</span>
<p>70205004005GB10030</p>
</li>
<div class="line"></div>
<li>
<span>5</span>
资料审核
<span>坐落：</span>
<p>
XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室
</p>
</li>
<div class="line"></div>
<li>
<span>6</span>
线上缴费
<span>面积：</span>
<p>526</p>
</li>
<div class="line"></div>
<li>
<span>7</span>
生成电子证书
<span>合同备案号：</span>
<p>YS000000000001</p>
</li>
</ul>
<div class="title layui-bg-green">
<h2>买方信息/共有情况</h2>
</div>
<div class="tabs_title">
<input type="radio" name="1" value="单独所有" checked>
<!-----------------买方信息------------------ -->
<div class="person_info">
<div class="title">
<h3>买方信息</h3>
<input type="radio" class="radioInfo" name="1" value="1" checked>
<p>单独所有</p>
<input type="radio" name="1" value="共同共有">
<p>共同共有</p>
<input type="radio" name="1" value="按份共有">
<p>按份共有</p>
<i class="layui-icon layui-icon-add-circle tableAdd"></i>
<input type="radio" class="radioInfo" name="1" value="2">
<p>按份所有</p>
<input type="radio" class="radioInfo" name="1" value="3">
<p>共同所有</p>
</div>
<table id="buyInfo" lay-filter="buyInfo"></table>
<div class="title layui-bg-green">
<h2>卖方信息</h2>
<i class="layui-icon layui-icon-add-circle tableAdd1"></i>
<form class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="name" placeholder="请输权利人"
class="layui-input">
</div>
<table id="sellInfo" lay-filter="sellInfo"></table>
<div class="title layui-bg-green">
<h2>申报材料</h2>
</div>
<div class="layui-inline idCard">
<label class="layui-form-label">身份证类型</label>
<div class="layui-input-block">
<select lay-filter="typeId">
<option value="1">身份证</option>
<option value="2">军官证</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">证件号码</label>
<div class="layui-input-block">
<input type="tel" name="card" maxlength="18" required lay-verify="card" placeholder="请输证件号码"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">联系方式</label>
<div class="layui-input-block">
<input type="tel" name="phone" maxlength="11" required lay-verify="phone"
placeholder="请输联系方式" class="layui-input">
</div>
</div><i class="layui-icon layui-icon-reduce-circle"></i>
</div>
</form>
<div class="add_form layui-bg-gray">
<i class="layui-icon layui-icon-addition"></i>
<p>添加个人信息</p>
</div>
</div>
<!-----------------资料上传------------------ -->
<div class="data_upload">
<h3>资料上传</h3>
<div class="img_update">
<div class="fileBox">
<div id="fileSpan" class="vm">
<input type="file" multiple id="fileInput" />
<p class="file_name">
点击或拖拽文件上传
</p>
<div class="file_name">
<i class="layui-icon layui-icon-addition"></i>
<p>点击或拖拽文件上传</p>
<div class="certificate">登记申请书（2份）</div>
<div class="fileListName"></div>
</div>
</div>
</div>
<table width="36%" border="1" class="fileList_parent">
<div class="fileList_parent">
<img src="../staticImages/dui.png">
<table width="150px" class="file_list">
<tbody class="fileList">
</table>
</div>
</div>
</div>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">
......@@ -115,5 +148,40 @@
<script type="text/html" id="barDemo">
<i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i>
</script>
<script id="progress" type="text/html">
{{# layui.each(d.progressList, function(index, item){ }}
{{# if(item.stepState==2){ }}
<li class="item_proress">
<p class="active"></p>
<h5>{{item.stepName}}</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
{{# } }}
{{# if(item.stepState==1){ }}
<li class="item_proress">
<p class="active"></p>
<h5>{{item.stepName}}</h5>
</li>
{{# if(index!=(d.progressList.length-1)){ }}
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="50%"></div>
</li>
{{# } }}
{{# } }}
{{# if(item.stepState==0){ }}
<li class="item_proress">
<p></p>
<h5>{{item.stepName}}</h5>
</li>
{{# if(index!=(d.progressList.length-1)){ }}
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="0%"></div>
</li>
{{# } }}
{{# } }}
{{# }); }}
</script>
</html>
\ No newline at end of file
......