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 376 additions and 2 deletions
1 .content_box { 1 .content_box {
2 width: 1200px; 2 width: 1200px;
3 margin: 0 auto; 3 margin: 0 auto;
4 min-height:calc(100vh - 207px);
5 }
6 .name_title {
7 padding: 10px;
8 margin:15px 0;
9 }
10 .name_title h2 {
11 display: inline-block;
12 font-weight: 600;
13 margin-right: 10px;
14 border-left: 3px solid #0091FF;
15 height: 16px;
16 line-height: 16px;
17 padding-left: 5px;
18 }
19 .name_title p {
20 display: inline-block;
21 color: #0091FF;
22 }
23 .form_title h2 {
24 font-weight: 600;
25 border-left: 3px solid #0091FF;
26 height: 16px;
27 line-height: 16px;
28 padding-left: 5px;
29 margin: 15px 0;
30 }
31 .layui-form-item .layui-inline {
32 width: 48%;
33 }
34 .layui-layer-dialog .layui-layer-content {
35 line-height: 24px;
36 }
37 .no_data {
38 text-align: center;
39 line-height: 36px;
40 }
41 .data_list {
42 margin-bottom: 20px;
43 }
44 .data_list li {
45 width: 31%;
46 border: 1px solid #d2d2d2;
47 display: inline-block;
48 color: #4a4a4a;
49 border-radius: 3px;
50 box-sizing: border-box;
51 margin-right: 20px;
52 }
53 .data_list li:last-child {
54 margin-right: 0;
55 }
56 .data_list li h3 {
57 background-color: #5FB878;
58 text-align: center;
59 line-height: 36px;
60 padding: 0 10px;
61 color: #fff;
62 }
63 .data_list li p {
64 line-height: 40px;
65 padding: 0 10px;
66 }
67 .data_list li p span {
68 width: 85px;
69 text-align-last: justify;
70 display: inline-block;
71 margin-right: 10px;
72 }
73 .next_button {
74 text-align: center;
75 margin-bottom: 20px;
4 } 76 }
...\ No newline at end of file ...\ No newline at end of file
......
1 .app_progress li {
2 padding: 0 30px;
3 line-height: 40px;
4 background: #eee;
5 display: inline-block;
6 color: #fff;
7 position: relative;
8 color: black;
9 cursor: pointer;
10 }
11 .app_progress li:hover {
12 background-color: #1E9FFF;
13 color: #fff;
14 }
15
16 .app_progress li:hover:after {
17 border-left-color: #1E9FFF;
18 }
19 .app_progress li:after{
20 content: '';
21 display: block;
22 border-top: 20px solid #fff;
23 border-bottom: 20px solid #fff;
24 border-left: 12px solid #eee;
25 position: absolute;
26 right:0;
27 top: 0;
28 }
29 .active {
30 background-color: #1E9FFF!important;
31 color: #fff!important;
32 }
33 .app_progress li.active:after {
34 border-left-color: #1E9FFF;
35 }
36 .selected {
37 background-color: #5FB878!important;
38 color: #fff!important;
39 }
40 .selected:hover {
41 background-color: #5FB878!important;
42 }
43 .app_progress li.selected:after {
44 border-left-color: #5FB878;
45 }
46 .line {
47 width: 62px;
48 height: 0;
49 display: inline-block;
50 border-bottom: 2px dotted#dddddd;
51 margin-bottom: 4px;
52 }
...\ No newline at end of file ...\ No newline at end of file
1 $(function () { 1 $(function () {
2 var title = undefined 2 var title = undefined
3 var bus = undefined 3 var bus = undefined
4 var countDown = null
4 layui.use('element', function () { 5 layui.use('element', function () {
5 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 6 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
6 //监听导航点击 7 //监听导航点击
...@@ -11,7 +12,6 @@ $(function () { ...@@ -11,7 +12,6 @@ $(function () {
11 addTabs('#wssq') 12 addTabs('#wssq')
12 title = GetQueryString('title') 13 title = GetQueryString('title')
13 bus = GetQueryString('bus') 14 bus = GetQueryString('bus')
14 console.log(title, bus)
15 $('.name_title h2').text(title) 15 $('.name_title h2').text(title)
16 $('.name_title p').text(bus) 16 $('.name_title p').text(bus)
17 function GetQueryString(name) { 17 function GetQueryString(name) {
...@@ -20,4 +20,55 @@ $(function () { ...@@ -20,4 +20,55 @@ $(function () {
20 if (r != null) return decodeURIComponent(r[2]); 20 if (r != null) return decodeURIComponent(r[2]);
21 return null; 21 return null;
22 } 22 }
23 // 业务
24 // 点击获取验证码操作
25 $('.feachBtn').click(function () {
26 var tel = $("#tel").val();
27 //正则表达式
28 var reg = /(1[3-9]\d{9}$)/;
29 if (!reg.test(tel)) {
30 layer.msg("请输入正确格式的手机号码", {
31 icon: 5
32 });
33 return false;
34 } else {
35 let count = 5;
36 $('.feachBtn').attr('disabled', true);
37 $('.feachBtn').css({
38 background: '#eee',
39 color: '#707070',
40 });
41 count--;
42 countDown = setInterval(() => {
43 count--;
44 $('.feachBtn').text(count + '秒后可重新获取');
45 if (count === 0) {
46 $('.feachBtn').text('重新发送').removeAttr('disabled');
47 clearInterval(countDown);
48 }
49 }, 1000);
50 $('.feachBtn').text(count + '秒后可重新获取');
51 }
52 })
53 layui.use(['form'], function () {
54 var form = layui.form
55 //自定义验证规则
56 form.verify({
57 title: function (value) {
58 if (value.length == 0) {
59 return '权利人不能为空';
60 } else if (value.length < 2) {
61 return '权利人至少得2个字符啊';
62 }
63 }
64 });
65
66 //监听提交
67 form.on('submit(demo1)', function (data) {
68 layer.alert(JSON.stringify(data.field), {
69 title: '最终的提交信息'
70 })
71 return false;
72 });
73 });
23 }) 74 })
......
1 <!DOCTYPE html 1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <html xmlns="http://www.w3.org/1999/xhtml">
4
4 <head> 5 <head>
5 <style> 6 <style>
6 </style> 7 </style>
...@@ -8,7 +9,9 @@ ...@@ -8,7 +9,9 @@
8 <title>立即办理-校验</title> 9 <title>立即办理-校验</title>
9 <script type="text/javascript" src="../staticJs/head.js"></script> 10 <script type="text/javascript" src="../staticJs/head.js"></script>
10 <link rel="stylesheet" type="text/css" href="../staticCss/bljy.css"> 11 <link rel="stylesheet" type="text/css" href="../staticCss/bljy.css">
12 <link rel="stylesheet" type="text/css" href="../staticCss/progress.css">
11 </head> 13 </head>
14
12 <body> 15 <body>
13 <div class="navigation_crumbs"> 16 <div class="navigation_crumbs">
14 <div class="contentBox"> 17 <div class="contentBox">
...@@ -18,15 +21,211 @@ ...@@ -18,15 +21,211 @@
18 <a><cite>在线申请</cite></a> 21 <a><cite>在线申请</cite></a>
19 </span> 22 </span>
20 </div> 23 </div>
24 </div>
21 <div class="content_box"> 25 <div class="content_box">
22 <div class="name_title"> 26 <div class="name_title layui-bg-gray">
23 <h2></h2> 27 <h2></h2>
24 <p></p> 28 <p></p>
25 </div> 29 </div>
30 <ul class="app_progress">
31 <li class="active">
32 <span>1</span>
33 效验
34 </li>
35 <div class="line"></div>
36 <li>
37 <span>2</span>
38 申请
39 </li>
40 <div class="line"></div>
41 <li>
42 <span>3</span>
43 完税
44 </li>
45 <div class="line"></div>
46 <li>
47 <span>4</span>
48 认证
49 </li>
50 <div class="line"></div>
51 <li>
52 <span>5</span>
53 领证方式
54 </li>
55 <div class="line"></div>
56 <li>
57 <span>6</span>
58 缴费
59 </li>
60 <div class="line"></div>
61 <li>
62 <span>7</span>
63 公示
64 </li>
65 </ul>
66 <div class="input_search">
67 <div class="form_title">
68 <h2>信息校验</h2>
69 </div>
70 <form class="layui-form" action="">
71 <div class="layui-form-item">
72 <div class="layui-inline">
73 <label class="layui-form-label">权利人</label>
74 <div class="layui-input-block">
75 <input type="text" name="title" required lay-verify="title" placeholder="请输权利人"
76 class="layui-input">
77 </div>
78 </div>
79 <div class="layui-inline">
80 <label class="layui-form-label">身份证</label>
81 <div class="layui-input-block">
82 <input type="text" name="idcard" required lay-verify="identity" placeholder="请输身份证"
83 class="layui-input">
84 </div>
85 </div>
86 </div>
87
88 <div class="layui-form-item">
89 <div class="layui-inline">
90 <label class="layui-form-label">联系方式</label>
91 <div class="layui-input-inline">
92 <input type="tel" name="phone" maxlength="11" id="tel" required lay-verify="phone" placeholder="请输联系方式"
93 class="layui-input">
94 </div>
95 <button type="button"
96 class="layui-btn layui-btn-radius layui-btn-primary feachBtn layui-btn-sm">获取验证码</button>
97 </div>
98 <div class="layui-inline">
99 <label class="layui-form-label">验证码</label>
100 <div class="layui-input-block">
101 <input type="tel" name="code" required lay-verify="code" maxlength="6" placeholder="请输验证码"
102 class="layui-input">
103 </div>
104 </div>
105 </div>
106
107 <div class="layui-form-item">
108 <div class="layui-input-block">
109 <button type="reset" class="layui-btn layui-btn-primary">重 置</button>
110 <button type="submit" class="layui-btn layui-btn-normal" lay-submit=""
111 lay-filter="demo1">查 询</button>
112 </div>
113 </div>
114 </form>
115 </div>
116 <div class="seach_result">
117 <!-- <div class="no_data">暂无数据</div> -->
118 <ul class="data_list">
119 <li>
120 <h3>房屋状态：正常</h3>
121 <p>
122 <span>权利人:</span>
123 郭小美
124 </p>
125 <p>
126 <span>身份证号:</span>
127 61052877686868
128 </p>
129 <p>
130 <span>联系电话:</span>
131 15877343636
132 </p>
133 <p>
134 <span>产权证号:</span>
135 370205004005GB10030
136 </p>
137 <p>
138 <span>坐落:</span>
139 XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室
140 </p>
141 <p>
142 <span>
143 面积（㎡）:
144 </span>
145 202
146 </p>
147 <p>
148 <span>合同备案号:</span>
149 YS000000000001
150 </p>
151 </li>
152
153 <li>
154 <h3>房屋状态：正常</h3>
155 <p>
156 <span>权利人:</span>
157 郭小美
158 </p>
159 <p>
160 <span>身份证号:</span>
161 61052877686868
162 </p>
163 <p>
164 <span>联系电话:</span>
165 15877343636
166 </p>
167 <p>
168 <span>产权证号:</span>
169 370205004005GB10030
170 </p>
171 <p>
172 <span>坐落:</span>
173 XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室
174 </p>
175 <p>
176 <span>
177 面积（㎡）:
178 </span>
179 202
180 </p>
181 <p>
182 <span>合同备案号:</span>
183 YS000000000001
184 </p>
185 </li>
186
187 <li>
188 <h3>房屋状态：正常</h3>
189 <p>
190 <span>权利人:</span>
191 郭小美
192 </p>
193 <p>
194 <span>身份证号:</span>
195 61052877686868
196 </p>
197 <p>
198 <span>联系电话:</span>
199 15877343636
200 </p>
201 <p>
202 <span>产权证号:</span>
203 370205004005GB10030
204 </p>
205 <p>
206 <span>坐落:</span>
207 XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室
208 </p>
209 <p>
210 <span>
211 面积（㎡）:
212 </span>
213 202
214 </p>
215 <p>
216 <span>合同备案号:</span>
217 YS000000000001
218 </p>
219 </li>
220 </ul>
221 <div class="next_button">
222 <button type="button" class="layui-btn layui-btn-normal">下一步</button>
223 </div>
26 </div> 224 </div>
27 </div> 225 </div>
28 </body> 226 </body>
29 <script type="text/javascript" src="../staticJs/common.js"></script> 227 <script type="text/javascript" src="../staticJs/common.js"></script>
30 <script type="text/javascript" src="../staticJs/down.js"></script> 228 <script type="text/javascript" src="../staticJs/down.js"></script>
31 <script type="text/javascript" src="../staticJs/bljy.js"></script> 229 <script type="text/javascript" src="../staticJs/bljy.js"></script>
230
32 </html> 231 </html>
...\ No newline at end of file ...\ No newline at end of file
......