Skip to content

任超 / js.portalStaticPage

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

feat:业务办理校验

1 parent f892371a
Inline Side-by-side
Showing 4 changed files with 380 additions and 6 deletions
.content_box {
width: 1200px;
margin: 0 auto;
min-height:calc(100vh - 207px);
}
.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;
}
.form_title h2 {
font-weight: 600;
border-left: 3px solid #0091FF;
height: 16px;
line-height: 16px;
padding-left: 5px;
margin: 15px 0;
}
.layui-form-item .layui-inline {
width: 48%;
}
.layui-layer-dialog .layui-layer-content {
line-height: 24px;
}
.no_data {
text-align: center;
line-height: 36px;
}
.data_list {
margin-bottom: 20px;
}
.data_list li {
width: 31%;
border: 1px solid #d2d2d2;
display: inline-block;
color: #4a4a4a;
border-radius: 3px;
box-sizing: border-box;
margin-right: 20px;
}
.data_list li:last-child {
margin-right: 0;
}
.data_list li h3 {
background-color: #5FB878;
text-align: center;
line-height: 36px;
padding: 0 10px;
color: #fff;
}
.data_list li p {
line-height: 40px;
padding: 0 10px;
}
.data_list li p span {
width: 85px;
text-align-last: justify;
display: inline-block;
margin-right: 10px;
}
.next_button {
text-align: center;
margin-bottom: 20px;
}
\ No newline at end of file
......
.app_progress li {
padding: 0 30px;
line-height: 40px;
background: #eee;
display: inline-block;
color: #fff;
position: relative;
color: black;
cursor: pointer;
}
.app_progress li:hover {
background-color: #1E9FFF;
color: #fff;
}
.app_progress li:hover:after {
border-left-color: #1E9FFF;
}
.app_progress li:after{
content: '';
display: block;
border-top: 20px solid #fff;
border-bottom: 20px solid #fff;
border-left: 12px solid #eee;
position: absolute;
right:0;
top: 0;
}
.active {
background-color: #1E9FFF!important;
color: #fff!important;
}
.app_progress li.active:after {
border-left-color: #1E9FFF;
}
.selected {
background-color: #5FB878!important;
color: #fff!important;
}
.selected:hover {
background-color: #5FB878!important;
}
.app_progress li.selected:after {
border-left-color: #5FB878;
}
.line {
width: 62px;
height: 0;
display: inline-block;
border-bottom: 2px dotted#dddddd;
margin-bottom: 4px;
}
\ No newline at end of file
$(function () {
var title = undefined
var bus = undefined
var countDown = null
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
......@@ -11,7 +12,6 @@ $(function () {
addTabs('#wssq')
title = GetQueryString('title')
bus = GetQueryString('bus')
console.log(title, bus)
$('.name_title h2').text(title)
$('.name_title p').text(bus)
function GetQueryString(name) {
......@@ -20,4 +20,55 @@ $(function () {
if (r != null) return decodeURIComponent(r[2]);
return null;
}
})
\ No newline at end of file
// 业务
// 点击获取验证码操作
$('.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;
});
});
})
......
<!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>
......@@ -8,7 +9,9 @@
<title>立即办理-校验</title>
<script type="text/javascript" src="../staticJs/head.js"></script>
<link rel="stylesheet" type="text/css" href="../staticCss/bljy.css">
<link rel="stylesheet" type="text/css" href="../staticCss/progress.css">
</head>
<body>
<div class="navigation_crumbs">
<div class="contentBox">
......@@ -18,10 +21,205 @@
<a><cite>在线申请</cite></a>
</span>
</div>
<div class="content_box">
<div class="name_title">
<h2></h2>
<p></p>
</div>
<div class="content_box">
<div class="name_title layui-bg-gray">
<h2></h2>
<p></p>
</div>
<ul class="app_progress">
<li class="active">
<span>1</span>
效验
</li>
<div class="line"></div>
<li>
<span>2</span>
申请
</li>
<div class="line"></div>
<li>
<span>3</span>
完税
</li>
<div class="line"></div>
<li>
<span>4</span>
认证
</li>
<div class="line"></div>
<li>
<span>5</span>
领证方式
</li>
<div class="line"></div>
<li>
<span>6</span>
缴费
</li>
<div class="line"></div>
<li>
<span>7</span>
公示
</li>
</ul>
<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="data_list">
<li>
<h3>房屋状态：正常</h3>
<p>
<span>权利人:</span>
郭小美
</p>
<p>
<span>身份证号:</span>
61052877686868
</p>
<p>
<span>联系电话:</span>
15877343636
</p>
<p>
<span>产权证号:</span>
370205004005GB10030
</p>
<p>
<span>坐落:</span>
XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室
</p>
<p>
<span>
面积（㎡）:
</span>
202
</p>
<p>
<span>合同备案号:</span>
YS000000000001
</p>
</li>
<li>
<h3>房屋状态：正常</h3>
<p>
<span>权利人:</span>
郭小美
</p>
<p>
<span>身份证号:</span>
61052877686868
</p>
<p>
<span>联系电话:</span>
15877343636
</p>
<p>
<span>产权证号:</span>
370205004005GB10030
</p>
<p>
<span>坐落:</span>
XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室
</p>
<p>
<span>
面积（㎡）:
</span>
202
</p>
<p>
<span>合同备案号:</span>
YS000000000001
</p>
</li>
<li>
<h3>房屋状态：正常</h3>
<p>
<span>权利人:</span>
郭小美
</p>
<p>
<span>身份证号:</span>
61052877686868
</p>
<p>
<span>联系电话:</span>
15877343636
</p>
<p>
<span>产权证号:</span>
370205004005GB10030
</p>
<p>
<span>坐落:</span>
XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室
</p>
<p>
<span>
面积（㎡）:
</span>
202
</p>
<p>
<span>合同备案号:</span>
YS000000000001
</p>
</li>
</ul>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">下一步</button>
</div>
</div>
</div>
......@@ -29,4 +227,5 @@
<script type="text/javascript" src="../staticJs/common.js"></script>
<script type="text/javascript" src="../staticJs/down.js"></script>
<script type="text/javascript" src="../staticJs/bljy.js"></script>
</html>
\ No newline at end of file
......