Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
3053da5f by 任超
Options

feat:在线缴费

1 parent f962cbbe
Inline Side-by-side
Showing 4 changed files with 172 additions and 1 deletions
...@@ -4,4 +4,62 @@ $(function () { ...@@ -4,4 +4,62 @@ $(function () {
4 var element = layui.element; 4 var element = layui.element;
5 //… 5 //…
6 }); 6 });
7 layui.use('table', function () {
8 var table = layui.table;
9 //第一个实例
10 table.render({
11 elem: '#payList'
12 , url: './lib/index.json'
13 , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
14 , cols: [[
15 { field: 'zizeng', title: '序号', templet: '#zizeng', align: 'center' }
16 , { field: 'username', title: '流水号', align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
17 , { field: 'sex', title: ' 状态', align: 'center' }
18 , { field: 'city', title: '缴费金额', align: 'center' }
19 , { field: 'state', title: '状态', align: 'center', templet: '#state' }
20 , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center' }
21 ]]
22 , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
23 return {
24 "code": res.code, //解析接口状态
25 "data": res.data //解析数据列表
26 };
27 }
28 });
29 // 线下支付记录查询
30 table.render({
31 elem: '#offlineList'
32 , url: './lib/index.json'
33 , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
34 , cols: [[
35 { field: 'zizeng', title: '序号', templet: '#zizeng', align: 'center' }
36 , { field: 'username', title: '流水号', align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
37 , { field: 'sex', title: ' 受理编号', align: 'center' }
38 , { field: 'city', title: ' 权利人', align: 'center' }
39 , { field: 'state', title: '缴费金额（元）', align: 'center' }
40 , { field: 'state', title: '状态', align: 'center', templet: '#state' }
41 , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center' }
42 ]]
43 , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
44 return {
45 "code": res.code, //解析接口状态
46 "data": res.data //解析数据列表
47 };
48 }
49 });
50 //监听行工具事件
51 table.on('tool(payList)', function (obj) {
52 var data = obj.data;
53 if (obj.event === 'payOnline') {
54 console.log(data)
55 }
56 });
57 //监听行工具事件
58 table.on('tool(offlineList)', function (obj) {
59 var data = obj.data;
60 if (obj.event === 'payOnline') {
61 console.log(data)
62 }
63 });
64 });
7 }) 65 })
...\ No newline at end of file ...\ No newline at end of file
......
1 .navigation_crumbs { 1 .navigation_crumbs {
2 height: 45px; 2 height: 45px;
3 }
4 .layui-tab {
5 margin-top: -1px;
6 margin-left: -1px;
7 }
8 .layui-tab-title .layui-this {
9 font-weight: 600;
10 }
11 .tab_content {
12 border: 1px solid #E6E6E6;
13 margin-top: 20px;
14 }
15 .tab_list_search {
16 margin-top: 10px;
17 width: 50%;
18 }
19 .tab_list_search input {
20 display: inline-block;
21 width: 80%;
22 }
23 .tab_list_search button {
24 display: inline-block;
25 padding: 0 15px;
26 height: 32px;
27 margin-left: 6px;
28 }
29 .layui-input {
30 height: 32px;
31 }
32 .payed {
33 color: #5FB878;
34 }
35 .unpayed {
36 color: #FF5722;
3 } 37 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -72,7 +72,30 @@ ...@@ -72,7 +72,30 @@
72 </div> 72 </div>
73 </div> 73 </div>
74 <!-- ----------------------------------内容模块的开始----------------------------------------------- --> 74 <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
75 75 <div class="contentBox tab_content">
76 <div class="layui-tab">
77 <ul class="layui-tab-title">
78 <li class="layui-this">线上业务支付列表</li>
79 <li>线下业务支付列表</li>
80 </ul>
81 <div class="layui-tab-content">
82 <div class="layui-tab-item layui-show">
83 <div class="tab_list_search">
84 <input type="text" placeholder="请输入权利人、义务人、流水号" class="layui-input">
85 <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">查询</button>
86 </div>
87 <table id="payList" lay-filter="payList"></table>
88 </div>
89 <div class="layui-tab-item">
90 <div class="tab_list_search">
91 <input type="text" placeholder="请输入受理编号（10-17位数字）" class="layui-input">
92 <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">查询</button>
93 </div>
94 <table id="offlineList" lay-filter="offlineList"></table>
95 </div>
96 </div>
97 </div>
98 </div>
76 <!-- ----------------------------------内容模块的end----------------------------------------------- --> 99 <!-- ----------------------------------内容模块的end----------------------------------------------- -->
77 <div class="footer"> 100 <div class="footer">
78 <div class="system_service"> 101 <div class="system_service">
...@@ -150,3 +173,16 @@ ...@@ -150,3 +173,16 @@
150 <script type="text/javascript" src="../../staticLib/layui/layui.js"></script> 173 <script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
151 <script src="../../staticJs/swiper-bundle.min.js"></script> 174 <script src="../../staticJs/swiper-bundle.min.js"></script>
152 <script type="text/javascript" src="../../staticJs/zxjf.js"></script> 175 <script type="text/javascript" src="../../staticJs/zxjf.js"></script>
176 <script type="text/html" id="zizeng">
177 {{d.LAY_TABLE_INDEX+1}}
178 </script>
179 <script type="text/html" id="barDemo">
180 <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="payOnline">在线缴费</a>
181 </script>
182 <script type="text/html" id="state">
183 {{# if(d.state=='1'){ }}
184 <span class="payed">已支付</span>
185 {{# } else{}}
186 <span class="unpayed">待支付</span>
187 {{# } }}
188 </script>
...\ No newline at end of file ...\ No newline at end of file
......
1 {
2 "code": 0,
3 "msg": "",
4 "count": 1000,
5 "data": [
6 {
7 "username": "user-0",
8 "sex": "女",
9 "city": "城市-0",
10 "sign": "签名-0",
11 "experience": 255,
12 "logins": 24,
13 "wealth": 82830700,
14 "classify": "作家",
15 "score": 57,
16 "state": 1
17 },
18 {
19 "username": "user-1",
20 "sex": "男",
21 "city": "城市-1",
22 "sign": "签名-1",
23 "experience": 884,
24 "logins": 58,
25 "wealth": 64928690,
26 "classify": "词人",
27 "score": 27,
28 "state": 1
29 },
30 {
31 "username": "user-2",
32 "sex": "女",
33 "city": "城市-2",
34 "sign": "签名-2",
35 "experience": 650,
36 "logins": 77,
37 "wealth": 6298078,
38 "classify": "酱油",
39 "score": 31,
40 "state": 0
41 }
42 ]
43 }
...\ No newline at end of file ...\ No newline at end of file