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 () {
var element = layui.element;
//…
});
layui.use('table', function () {
var table = layui.table;
//第一个实例
table.render({
elem: '#payList'
, url: './lib/index.json'
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, cols: [[
{ field: 'zizeng', title: '序号', templet: '#zizeng', align: 'center' }
, { field: 'username', title: '流水号', align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
, { field: 'sex', title: ' 状态', align: 'center' }
, { field: 'city', title: '缴费金额', align: 'center' }
, { field: 'state', title: '状态', align: 'center', templet: '#state' }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center' }
]]
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.code, //解析接口状态
"data": res.data //解析数据列表
};
}
});
// 线下支付记录查询
table.render({
elem: '#offlineList'
, url: './lib/index.json'
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, cols: [[
{ field: 'zizeng', title: '序号', templet: '#zizeng', align: 'center' }
, { field: 'username', title: '流水号', align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
, { field: 'sex', title: ' 受理编号', align: 'center' }
, { field: 'city', title: ' 权利人', align: 'center' }
, { field: 'state', title: '缴费金额（元）', align: 'center' }
, { field: 'state', title: '状态', align: 'center', templet: '#state' }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center' }
]]
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.code, //解析接口状态
"data": res.data //解析数据列表
};
}
});
//监听行工具事件
table.on('tool(payList)', function (obj) {
var data = obj.data;
if (obj.event === 'payOnline') {
console.log(data)
}
});
//监听行工具事件
table.on('tool(offlineList)', function (obj) {
var data = obj.data;
if (obj.event === 'payOnline') {
console.log(data)
}
});
});
})
\ No newline at end of file
......
.navigation_crumbs {
height: 45px;
}
.layui-tab {
margin-top: -1px;
margin-left: -1px;
}
.layui-tab-title .layui-this {
font-weight: 600;
}
.tab_content {
border: 1px solid #E6E6E6;
margin-top: 20px;
}
.tab_list_search {
margin-top: 10px;
width: 50%;
}
.tab_list_search input {
display: inline-block;
width: 80%;
}
.tab_list_search button {
display: inline-block;
padding: 0 15px;
height: 32px;
margin-left: 6px;
}
.layui-input {
height: 32px;
}
.payed {
color: #5FB878;
}
.unpayed {
color: #FF5722;
}
\ No newline at end of file
......
......@@ -72,7 +72,30 @@
</div>
</div>
<!-- ----------------------------------内容模块的开始----------------------------------------------- -->
<div class="contentBox tab_content">
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">线上业务支付列表</li>
<li>线下业务支付列表</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="tab_list_search">
<input type="text" placeholder="请输入权利人、义务人、流水号" class="layui-input">
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">查询</button>
</div>
<table id="payList" lay-filter="payList"></table>
</div>
<div class="layui-tab-item">
<div class="tab_list_search">
<input type="text" placeholder="请输入受理编号（10-17位数字）" class="layui-input">
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">查询</button>
</div>
<table id="offlineList" lay-filter="offlineList"></table>
</div>
</div>
</div>
</div>
<!-- ----------------------------------内容模块的end----------------------------------------------- -->
<div class="footer">
<div class="system_service">
......@@ -150,3 +173,16 @@
<script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
<script src="../../staticJs/swiper-bundle.min.js"></script>
<script type="text/javascript" src="../../staticJs/zxjf.js"></script>
<script type="text/html" id="zizeng">
{{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="payOnline">在线缴费</a>
</script>
<script type="text/html" id="state">
{{# if(d.state=='1'){ }}
<span class="payed">已支付</span>
{{# } else{}}
<span class="unpayed">待支付</span>
{{# } }}
</script>
\ No newline at end of file
......
{
"code": 0,
"msg": "",
"count": 1000,
"data": [
{
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "签名-0",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57,
"state": 1
},
{
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "签名-1",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27,
"state": 1
},
{
"username": "user-2",
"sex": "女",
"city": "城市-2",
"sign": "签名-2",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31,
"state": 0
}
]
}
\ No newline at end of file