Skip to content

任超 / js.portalStaticPage

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

style:网上申请

1 parent db6829ec
Expand all
Inline Side-by-side
Showing 8 changed files with 558 additions and 41 deletions
......@@ -85,4 +85,15 @@
}
.item_list .button{
float: right;
}
.button a{
color: #fff;
}
.button a:hover {
color: #fff;
}
.type_title {
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
}
\ No newline at end of file
......
......@@ -12,8 +12,8 @@ $(function () {
addTabs('#wssq')
title = GetQueryString('title')
bus = GetQueryString('bus')
$('.name_title h2').text(title)
$('.name_title p').text(bus)
// $('.name_title h2').text(title)
// $('.name_title p').text(bus)
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
......@@ -94,14 +94,14 @@ $(function () {
stepName: "资料审核",
stepState: 0
},
// {
// stepName: "线上缴费",
// stepState: 0
// },
// {
// stepName: "生成电子证书",
// stepState: 0
// }
{
stepName: "线上缴费",
stepState: 0
},
{
stepName: "生成电子证书",
stepState: 0
}
],
}
......
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
});
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 () {
var element = layui.element;
//初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
element.init();
});
});
// 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 (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('form', function () {
var form = layui.form;
form.render('select');
form.on('select(typeId)', function (data) {
console.log(data.value);
});
})
// 编辑
$(document).on("click", ".layui-icon-reduce-circle", function (e) {
$(this).parent().remove()
})
})
// 图片上传
// 询问笔录
$('.record').click(function (event) {
event.stopPropagation();
console.log('下载模板99')
})
var flieList = []; // 登记证书列表
var flieList1 = []; // 房屋所有权证书列表
var flieList3 = []; // 询问笔录
// 省市区
//config的设置是全局的
layui.config({
base: '../staticJs/'
}).extend({ //设定模块别名
common: 'cityCommon'
});
$('.next_button a').click(function(){
console.log(1)
})
layui.use(['form', 'common'], function () {
var common = layui.common,
form = layui.form;
//三级地址联动
common.showCity('province', 'city', 'district');
//领证方式
form.on('radio(beshared)', function (data) {
if (data.value == 2) {
$('.shipping_method').show()
$('.submitButton').hide()
} else {
$('.shipping_method').hide()
$('.submitButton').show()
}
});
//区域选择
form.on('select(selectCity)', function (data) {
return false;
});
//监听提交
form.on('submit(submit1)', function (data) {
console.log(data.field)
return false;
});
});
$(function () {
var title = undefined
var bus = undefined
var countDown = null
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
layer.msg(elem.text());
});
});
addTabs('#wssq')
title = GetQueryString('title')
bus = GetQueryString('bus')
// $('.name_title h2').text(title)
// $('.name_title p').text(bus)
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]);
return null;
}
// 业务
// 点击获取验证码操作
$('.feachBtn').click(function () {
var tel = $("#tel").val();
//正则表达式
var reg = /(1[3-9]\d{9}$)/;
if (!reg.test(tel)) {
layer.msg("请输入正确格式的手机号码", {
icon: 5
});
return false;
} else {
let count = 5;
$('.feachBtn').attr('disabled', true);
$('.feachBtn').css({
background: '#eee',
color: '#707070',
});
count--;
countDown = setInterval(() => {
count--;
$('.feachBtn').text(count + '秒后可重新获取');
if (count === 0) {
$('.feachBtn').text('重新发送').removeAttr('disabled');
clearInterval(countDown);
}
}, 1000);
$('.feachBtn').text(count + '秒后可重新获取');
}
})
layui.use(['form'], function () {
var form = layui.form
//自定义验证规则
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;
});
});
// 进度条
var data = {
'progressList': [
{
stepName: "信息效验",
stepState: 1 //0：未办理 1：正在办理 2：已办理
},
{
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 () {
var element = layui.element;
//初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
element.init();
});
});
})
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>立即办理-信息校验</title>
<script type="text/javascript" src="../staticJs/head.js"></script>
<link rel="stylesheet" type="text/css" href="../staticCss/progress.css">
<link rel="stylesheet" type="text/css" href="../staticCss/bljy.css">
</head>
<body>
<div class="navigation_crumbs">
<div class="contentBox">
<span class="layui-breadcrumb">
<a href="../../index.html">首页</a>
<a href="./wssq.html">网上申请</a>
<a><cite>在线申请</cite></a>
</span>
</div>
</div>
<div class="content_box">
<div class="name_title layui-bg-gray">
<h2>二手房</h2>
<p>转移登记</p>
</div>
<div class="progressBar">
<ul class="app_progress" id="app_progress">
</ul>
</div>
<div class="input_search">
<div class="form_title">
<h2>信息校验</h2>
</div>
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">权利人</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="title" placeholder="请输权利人"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">身份证</label>
<div class="layui-input-block">
<input type="text" name="idcard" required lay-verify="identity" placeholder="请输身份证"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">联系方式</label>
<div class="layui-input-inline">
<input type="tel" name="phone" maxlength="11" id="tel" required lay-verify="phone"
placeholder="请输联系方式" class="layui-input">
</div>
<button type="button"
class="layui-btn layui-btn-radius layui-btn-primary feachBtn layui-btn-sm">获取验证码</button>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证码</label>
<div class="layui-input-block">
<input type="tel" name="code" required lay-verify="code" maxlength="6" placeholder="请输验证码"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="reset" class="layui-btn layui-btn-primary">重 置</button>
<button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">查
询</button>
</div>
</div>
</form>
</div>
<div class="seach_result">
<!-- <div class="no_data">暂无数据</div> -->
<ul class="appointment_list">
<li>
<div class="item_content">
<div class="item_title success">
<h3>正常</h3>
<p>
查看
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
<ul class="item_info">
<li>
<span>预约人：</span>
<p>任超</p>
</li>
<li>
<span>办事大厅：</span>
<p>米香园办事大厅</p>
</li>
<li>
<span>办理业务类型：</span>
<p>二手房交易</p>
<a href="">办事指南</a>
</li>
<li>
<span>预约日期：</span>
<p>2020-12-56 上午 16：13</p>
</li>
<li>
<span>预约流水号：</span>
<p>897987987987</p>
</li>
</ul>
<a class="cancel_reservation">取消预约</a>
</div>
</li>
<li>
<div class="item_content">
<div class="item_title overdue">
<h3>正常</h3>
<p>
查看
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
<ul class="item_info">
<li>
<span>预约人：</span>
<p>任超</p>
</li>
<li>
<span>办事大厅：</span>
<p>米香园办事大厅</p>
</li>
<li>
<span>办理业务类型：</span>
<p>二手房交易</p>
<a href="">办事指南</a>
</li>
<li>
<span>预约日期：</span>
<p>2020-12-56 上午 16：13</p>
</li>
<li>
<span>预约流水号：</span>
<p>897987987987</p>
</li>
</ul>
<a class="cancel_reservation">取消预约</a>
</div>
</li>
<li>
<div class="item_content">
<div class="item_title cancel">
<h3>正常</h3>
<p>
查看
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
<ul class="item_info">
<li>
<span>预约人：</span>
<p>任超</p>
</li>
<li>
<span>办事大厅：</span>
<p>米香园办事大厅</p>
</li>
<li>
<span>办理业务类型：</span>
<p>二手房交易</p>
<a href="">办事指南</a>
</li>
<li>
<span>预约日期：</span>
<p>2020-12-56 上午 16：13</p>
</li>
<li>
<span>预约流水号：</span>
<p>897987987987</p>
</li>
</ul>
<a class="cancel_reservation">取消预约</a>
</div>
</li>
</ul>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">
<a href="./tbxx.html">下一步</a>
</button>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../staticJs/common.js"></script>
<script type="text/javascript" src="../staticJs/down.js"></script>
<script type="text/javascript" src="../staticJs/esf-xxjy.js"></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
......@@ -58,6 +58,7 @@
<!-- ------------业务办理--------------- -->
<div class="business layui-bg-gray">
<div class="online_processing">
<h1 class="type_title">及时办结</h1>
<div class="list_title layui-bg-gray">
<h2>预告类</h2>
</div>
......@@ -77,51 +78,28 @@
</div>
</li>
</ul>
<div class="list_title layui-bg-gray">
<h2>转移类</h2>
</div>
<ul class="item_list">
<li>
<p>商品房转移登记</p>
<div class="button">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">立即办理</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
</div>
</li>
</ul>
</div>
<div class="online_examination">
<h1 class="type_title">网上预审</h1>
<div class="list_title layui-bg-gray">
<h2>预告类</h2>
</div>
<ul class="item_list">
<li>
<p>预售商品房抵押登记</p>
<p>二手房买卖登记</p>
<div class="button">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
<a href='./xxjy.html?title=预告类&bus=预售商品房抵押登记'>立即办理</a>
<a href='./esf-xxjy.html'>立即办理</a>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
</div>
</li>
<li>
<p>商品房抵押登记</p>
<div class="button">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">立即办理</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
</div>
</li>
</ul>
<div class="list_title layui-bg-gray">
<h2>转移类</h2>
</div>
<ul class="item_list">
<li>
<p>商品房转移登记</p>
<div class="button">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">立即办理</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
<a href='./xxjy.html'>立即办理</a>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
</div>
</li>
......
......@@ -23,8 +23,8 @@
</div>
<div class="content_box">
<div class="name_title layui-bg-gray">
<h2></h2>
<p></p>
<h2>商品房</h2>
<p>转移登记</p>
</div>
<div class="progressBar">
<ul class="app_progress" id="app_progress">
......