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 @@ ...@@ -85,4 +85,15 @@
85 } 85 }
86 .item_list .button{ 86 .item_list .button{
87 float: right; 87 float: right;
88 }
89 .button a{
90 color: #fff;
91 }
92 .button a:hover {
93 color: #fff;
94 }
95 .type_title {
96 font-size: 16px;
97 font-weight: 600;
98 margin-bottom: 10px;
88 } 99 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -12,8 +12,8 @@ $(function () { ...@@ -12,8 +12,8 @@ $(function () {
12 addTabs('#wssq') 12 addTabs('#wssq')
13 title = GetQueryString('title') 13 title = GetQueryString('title')
14 bus = GetQueryString('bus') 14 bus = GetQueryString('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) {
18 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 18 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
19 var r = window.location.search.substr(1).match(reg); 19 var r = window.location.search.substr(1).match(reg);
...@@ -94,14 +94,14 @@ $(function () { ...@@ -94,14 +94,14 @@ $(function () {
94 stepName: "资料审核", 94 stepName: "资料审核",
95 stepState: 0 95 stepState: 0
96 }, 96 },
97 // { 97 {
98 // stepName: "线上缴费", 98 stepName: "线上缴费",
99 // stepState: 0 99 stepState: 0
100 // }, 100 },
101 // { 101 {
102 // stepName: "生成电子证书", 102 stepName: "生成电子证书",
103 // stepState: 0 103 stepState: 0
104 // } 104 }
105 ], 105 ],
106 } 106 }
107 107
......
1 layui.use('element', function () {
2 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
3 });
4 addTabs('#wssq')
5 var data = {
6 'progressList': [
7 {
8 stepName: "信息效验",
9 stepState: 2 //0：未办理 1：正在办理 2：已办理
10 },
11 {
12 stepName: "填报信息",
13 stepState: 1
14 },
15 {
16 stepName: "完税核税",
17 stepState: 0
18 },
19 {
20 stepName: "身份认证",
21 stepState: 0
22 },
23 {
24 stepName: "资料审核",
25 stepState: 0
26 },
27 {
28 stepName: "线上缴费",
29 stepState: 0
30 },
31 {
32 stepName: "生成电子证书",
33 stepState: 0
34 }
35 ],
36 }
37 layui.use('laytpl', function () {
38 laytpl = layui.laytpl;
39 var getTpl = document.getElementById('progress').innerHTML
40 , view = document.getElementById('app_progress');
41 laytpl(getTpl).render(data, function (html) {
42 view.innerHTML = html;
43 });
44
45 layui.use(['element'], function () {
46 var element = layui.element;
47 //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
48 element.init();
49 });
50 });
51 // form 表单
52 layui.use('form', function () {
53 var form = layui.form;
54 form.on('select(typeId)', function (data) {
55 console.log(data.value);
56 });
57 //自定义验证规则
58 form.verify({
59 title: function (value) {
60 if (value.length == 0) {
61 return '权利人不能为空';
62 } else if (value.length < 2) {
63 return '权利人至少得2个字符啊';
64 }
65 }
66 });
67
68 //监听提交
69 form.on('submit(demo1)', function (data) {
70 layer.alert(JSON.stringify(data.field), {
71 title: '最终的提交信息'
72 })
73 return false;
74 });
75 })
76 $('.radioInfo').click(function () {
77 let index = $(this).attr("value")
78 if (index == 2 || index == 3) {
79 $('.add_form').show()
80 } else {
81 $('.add_form').hide()
82 }
83 })
84 // form 添加
85 $('.add_form').click(function () {
86 $('.layui-form').append(
87 '<div class="layui-form-item">' +
88 '<div class="layui-inline">' +
89 '<label class="layui-form-label">姓名</label>' +
90 '<div class="layui-input-block">' +
91 '<input type="text" name="name" required lay-verify="name" placeholder="请输权利人" class="layui-input">' +
92 '</div>' +
93 '</div>' +
94 '<div class="layui-inline idCard">' +
95 '<label class="layui-form-label">身份证类型</label>' +
96 '<div class="layui-input-block">' +
97 '<select lay-filter="typeId">' +
98 '<option value="1">身份证</option>' +
99 '<option value="2">军官证</option>' +
100 '</select>' +
101 '</div>' +
102 '</div>' +
103 '<div class="layui-inline">' +
104 '<label class="layui-form-label">证件号码</label>' +
105 '<div class="layui-input-block">' +
106 '<input type="tel" name="card" maxlength="18" required lay-verify="card" placeholder="请输证件号码" class="layui-input">' +
107 '</div>' +
108 '</div>' +
109 '<div class="layui-inline">' +
110 '<label class="layui-form-label">联系方式</label>' +
111 '<div class="layui-input-block">' +
112 '<input type="tel" name="phone" maxlength="11" required lay-verify="phone" placeholder="请输联系方式" class="layui-input">' +
113 '</div>' +
114 '</div>' +
115 '<i class="layui-icon layui-icon-reduce-circle"></i>' +
116 '</div>'
117 )
118
119 layui.use('form', function () {
120 var form = layui.form;
121 form.render('select');
122 form.on('select(typeId)', function (data) {
123 console.log(data.value);
124 });
125 })
126 // 编辑
127 $(document).on("click", ".layui-icon-reduce-circle", function (e) {
128 $(this).parent().remove()
129 })
130 })
131 // 图片上传
132 // 询问笔录
133 $('.record').click(function (event) {
134 event.stopPropagation();
135 console.log('下载模板99')
136 })
137 var flieList = []; // 登记证书列表
138 var flieList1 = []; // 房屋所有权证书列表
139 var flieList3 = []; // 询问笔录
140 // 省市区
141 //config的设置是全局的
142 layui.config({
143 base: '../staticJs/'
144 }).extend({ //设定模块别名
145 common: 'cityCommon'
146 });
147
148 $('.next_button a').click(function(){
149 console.log(1)
150 })
151 layui.use(['form', 'common'], function () {
152 var common = layui.common,
153 form = layui.form;
154 //三级地址联动
155 common.showCity('province', 'city', 'district');
156 //领证方式
157 form.on('radio(beshared)', function (data) {
158 if (data.value == 2) {
159 $('.shipping_method').show()
160 $('.submitButton').hide()
161 } else {
162 $('.shipping_method').hide()
163 $('.submitButton').show()
164 }
165 });
166 //区域选择
167 form.on('select(selectCity)', function (data) {
168 return false;
169 });
170 //监听提交
171 form.on('submit(submit1)', function (data) {
172 console.log(data.field)
173 return false;
174 });
175 });
176
1 $(function () {
2 var title = undefined
3 var bus = undefined
4 var countDown = null
5 layui.use('element', function () {
6 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
7 //监听导航点击
8 element.on('nav(demo)', function (elem) {
9 layer.msg(elem.text());
10 });
11 });
12 addTabs('#wssq')
13 title = GetQueryString('title')
14 bus = GetQueryString('bus')
15 // $('.name_title h2').text(title)
16 // $('.name_title p').text(bus)
17 function GetQueryString(name) {
18 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
19 var r = window.location.search.substr(1).match(reg);
20 if (r != null) return decodeURIComponent(r[2]);
21 return null;
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 });
74 // 进度条
75 var data = {
76 'progressList': [
77 {
78 stepName: "信息效验",
79 stepState: 1 //0：未办理 1：正在办理 2：已办理
80 },
81 {
82 stepName: "填报信息",
83 stepState: 0
84 },
85 {
86 stepName: "完税核税",
87 stepState: 0
88 },
89 {
90 stepName: "身份认证",
91 stepState: 0
92 },
93 {
94 stepName: "资料审核",
95 stepState: 0
96 },
97 ],
98 }
99
100 layui.use('laytpl', function () {
101 laytpl = layui.laytpl;
102 var getTpl = document.getElementById('progress').innerHTML
103 , view = document.getElementById('app_progress');
104 laytpl(getTpl).render(data, function (html) {
105 view.innerHTML = html;
106 });
107
108 layui.use(['element'], function () {
109 var element = layui.element;
110 //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
111 element.init();
112 });
113 });
114 })
1 <!DOCTYPE html
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">
4 <head>
5 <style>
6 </style>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <title>立即办理-信息校验</title>
9 <script type="text/javascript" src="../staticJs/head.js"></script>
10 <link rel="stylesheet" type="text/css" href="../staticCss/progress.css">
11 <link rel="stylesheet" type="text/css" href="../staticCss/bljy.css">
12 </head>
13
14 <body>
15 <div class="navigation_crumbs">
16 <div class="contentBox">
17 <span class="layui-breadcrumb">
18 <a href="../../index.html">首页</a>
19 <a href="./wssq.html">网上申请</a>
20 <a><cite>在线申请</cite></a>
21 </span>
22 </div>
23 </div>
24 <div class="content_box">
25 <div class="name_title layui-bg-gray">
26 <h2>二手房</h2>
27 <p>转移登记</p>
28 </div>
29 <div class="progressBar">
30 <ul class="app_progress" id="app_progress">
31 </ul>
32 </div>
33 <div class="input_search">
34 <div class="form_title">
35 <h2>信息校验</h2>
36 </div>
37 <form class="layui-form" action="">
38 <div class="layui-form-item">
39 <div class="layui-inline">
40 <label class="layui-form-label">权利人</label>
41 <div class="layui-input-block">
42 <input type="text" name="title" required lay-verify="title" placeholder="请输权利人"
43 class="layui-input">
44 </div>
45 </div>
46 <div class="layui-inline">
47 <label class="layui-form-label">身份证</label>
48 <div class="layui-input-block">
49 <input type="text" name="idcard" required lay-verify="identity" placeholder="请输身份证"
50 class="layui-input">
51 </div>
52 </div>
53 </div>
54
55 <div class="layui-form-item">
56 <div class="layui-inline">
57 <label class="layui-form-label">联系方式</label>
58 <div class="layui-input-inline">
59 <input type="tel" name="phone" maxlength="11" id="tel" required lay-verify="phone"
60 placeholder="请输联系方式" class="layui-input">
61 </div>
62 <button type="button"
63 class="layui-btn layui-btn-radius layui-btn-primary feachBtn layui-btn-sm">获取验证码</button>
64 </div>
65 <div class="layui-inline">
66 <label class="layui-form-label">验证码</label>
67 <div class="layui-input-block">
68 <input type="tel" name="code" required lay-verify="code" maxlength="6" placeholder="请输验证码"
69 class="layui-input">
70 </div>
71 </div>
72 </div>
73
74 <div class="layui-form-item">
75 <div class="layui-input-block">
76 <button type="reset" class="layui-btn layui-btn-primary">重 置</button>
77 <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">查
78 询</button>
79 </div>
80 </div>
81 </form>
82 </div>
83 <div class="seach_result">
84 <!-- <div class="no_data">暂无数据</div> -->
85 <ul class="appointment_list">
86 <li>
87 <div class="item_content">
88 <div class="item_title success">
89 <h3>正常</h3>
90 <p>
91 查看
92 <i class="layui-icon layui-icon-right"></i>
93 </p>
94 </div>
95 <ul class="item_info">
96 <li>
97 <span>预约人：</span>
98 <p>任超</p>
99 </li>
100 <li>
101 <span>办事大厅：</span>
102 <p>米香园办事大厅</p>
103 </li>
104 <li>
105 <span>办理业务类型：</span>
106 <p>二手房交易</p>
107 <a href="">办事指南</a>
108 </li>
109 <li>
110 <span>预约日期：</span>
111 <p>2020-12-56 上午 16：13</p>
112 </li>
113 <li>
114 <span>预约流水号：</span>
115 <p>897987987987</p>
116 </li>
117 </ul>
118 <a class="cancel_reservation">取消预约</a>
119 </div>
120 </li>
121 <li>
122 <div class="item_content">
123 <div class="item_title overdue">
124 <h3>正常</h3>
125 <p>
126 查看
127 <i class="layui-icon layui-icon-right"></i>
128 </p>
129 </div>
130 <ul class="item_info">
131 <li>
132 <span>预约人：</span>
133 <p>任超</p>
134 </li>
135 <li>
136 <span>办事大厅：</span>
137 <p>米香园办事大厅</p>
138 </li>
139 <li>
140 <span>办理业务类型：</span>
141 <p>二手房交易</p>
142 <a href="">办事指南</a>
143 </li>
144 <li>
145 <span>预约日期：</span>
146 <p>2020-12-56 上午 16：13</p>
147 </li>
148 <li>
149 <span>预约流水号：</span>
150 <p>897987987987</p>
151 </li>
152 </ul>
153 <a class="cancel_reservation">取消预约</a>
154 </div>
155 </li>
156 <li>
157 <div class="item_content">
158 <div class="item_title cancel">
159 <h3>正常</h3>
160 <p>
161 查看
162 <i class="layui-icon layui-icon-right"></i>
163 </p>
164 </div>
165 <ul class="item_info">
166 <li>
167 <span>预约人：</span>
168 <p>任超</p>
169 </li>
170 <li>
171 <span>办事大厅：</span>
172 <p>米香园办事大厅</p>
173 </li>
174 <li>
175 <span>办理业务类型：</span>
176 <p>二手房交易</p>
177 <a href="">办事指南</a>
178 </li>
179 <li>
180 <span>预约日期：</span>
181 <p>2020-12-56 上午 16：13</p>
182 </li>
183 <li>
184 <span>预约流水号：</span>
185 <p>897987987987</p>
186 </li>
187 </ul>
188 <a class="cancel_reservation">取消预约</a>
189 </div>
190 </li>
191 </ul>
192 <div class="next_button">
193 <button type="button" class="layui-btn layui-btn-normal">
194 <a href="./tbxx.html">下一步</a>
195 </button>
196 </div>
197 </div>
198 </div>
199 </body>
200 <script type="text/javascript" src="../staticJs/common.js"></script>
201 <script type="text/javascript" src="../staticJs/down.js"></script>
202 <script type="text/javascript" src="../staticJs/esf-xxjy.js"></script>
203 <script id="progress" type="text/html">
204 {{# layui.each(d.progressList, function(index, item){ }}
205 {{# if(item.stepState==2){ }}
206 <li class="item_proress">
207 <p class="active"></p>
208 <h5>{{item.stepName}}</h5>
209 </li>
210 <li class="layui-progress">
211 <div class="layui-progress-bar" lay-percent="100%"></div>
212 </li>
213 {{# } }}
214 {{# if(item.stepState==1){ }}
215 <li class="item_proress">
216 <p class="active"></p>
217 <h5>{{item.stepName}}</h5>
218 </li>
219 {{# if(index!=(d.progressList.length-1)){ }}
220 <li class="layui-progress">
221 <div class="layui-progress-bar" lay-percent="50%"></div>
222 </li>
223 {{# } }}
224 {{# } }}
225 {{# if(item.stepState==0){ }}
226 <li class="item_proress">
227 <p></p>
228 <h5>{{item.stepName}}</h5>
229 </li>
230 {{# if(index!=(d.progressList.length-1)){ }}
231 <li class="layui-progress">
232 <div class="layui-progress-bar" lay-percent="0%"></div>
233 </li>
234 {{# } }}
235 {{# } }}
236 {{# }); }}
237 </script>
238 </html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -58,6 +58,7 @@ ...@@ -58,6 +58,7 @@
58 <!-- ------------业务办理--------------- --> 58 <!-- ------------业务办理--------------- -->
59 <div class="business layui-bg-gray"> 59 <div class="business layui-bg-gray">
60 <div class="online_processing"> 60 <div class="online_processing">
61 <h1 class="type_title">及时办结</h1>
61 <div class="list_title layui-bg-gray"> 62 <div class="list_title layui-bg-gray">
62 <h2>预告类</h2> 63 <h2>预告类</h2>
63 </div> 64 </div>
...@@ -77,51 +78,28 @@ ...@@ -77,51 +78,28 @@
77 </div> 78 </div>
78 </li> 79 </li>
79 </ul> 80 </ul>
80
81 <div class="list_title layui-bg-gray">
82 <h2>转移类</h2>
83 </div>
84 <ul class="item_list">
85 <li>
86 <p>商品房转移登记</p>
87 <div class="button">
88 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">立即办理</button>
89 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
90 </div>
91 </li>
92 </ul>
93 </div> 81 </div>
94 <div class="online_examination"> 82 <div class="online_examination">
83 <h1 class="type_title">网上预审</h1>
95 <div class="list_title layui-bg-gray"> 84 <div class="list_title layui-bg-gray">
96 <h2>预告类</h2> 85 <h2>预告类</h2>
97 </div> 86 </div>
98 <ul class="item_list"> 87 <ul class="item_list">
99 <li> 88 <li>
100 <p>预售商品房抵押登记</p> 89 <p>二手房买卖登记</p>
101 <div class="button"> 90 <div class="button">
102 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"> 91 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
103 <a href='./xxjy.html?title=预告类&bus=预售商品房抵押登记'>立即办理</a> 92 <a href='./esf-xxjy.html'>立即办理</a>
104 </button> 93 </button>
105 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button> 94 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
106 </div> 95 </div>
107 </li> 96 </li>
108 <li> 97 <li>
109 <p>商品房抵押登记</p>
110 <div class="button">
111 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">立即办理</button>
112 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
113 </div>
114 </li>
115 </ul>
116
117 <div class="list_title layui-bg-gray">
118 <h2>转移类</h2>
119 </div>
120 <ul class="item_list">
121 <li>
122 <p>商品房转移登记</p> 98 <p>商品房转移登记</p>
123 <div class="button"> 99 <div class="button">
124 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">立即办理</button> 100 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
101 <a href='./xxjy.html'>立即办理</a>
102 </button>
125 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button> 103 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
126 </div> 104 </div>
127 </li> 105 </li>
......
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
23 </div> 23 </div>
24 <div class="content_box"> 24 <div class="content_box">
25 <div class="name_title layui-bg-gray"> 25 <div class="name_title layui-bg-gray">
26 <h2></h2> 26 <h2>商品房</h2>
27 <p></p> 27 <p>转移登记</p>
28 </div> 28 </div>
29 <div class="progressBar"> 29 <div class="progressBar">
30 <ul class="app_progress" id="app_progress"> 30 <ul class="app_progress" id="app_progress">
......