YwxAppThink/addon/paycenter/view/backend/trade/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>支付中心 - 交易流水</title>
    <link rel="stylesheet" href="/assets/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid" style="padding:15px;">
    <div class="layui-card">
        <div class="layui-card-header">交易流水</div>
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane" lay-filter="search">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">订单号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="trade_no" placeholder="模糊搜索" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">渠道</label>
                        <div class="layui-input-inline">
                            <select name="channel">
                                <option value="">全部</option>
                                <option value="alipay">支付宝</option>
                                <option value="wechat">微信支付</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline">
                            <select name="status">
                                <option value="">全部</option>
                                <option value="0">待支付</option>
                                <option value="1">已支付</option>
                                <option value="2">已退款</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
            <table id="tbl" lay-filter="tbl"></table>
        </div>
    </div>
</div>

<script type="text/html" id="toolTpl">
    {{# if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="refund">退款</a>
    {{# } else if(d.status == 0){ }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="query">查单</a>
    {{# } else { }}
    <span style="color:#999;">已退款</span>
    {{# } }}
</script>

<script src="/assets/layui/layui.js"></script>
<script>
layui.use(['table', 'form', 'layer', 'http'], function () {
    var http = layui.http;
    var table = layui.table, form = layui.form, layer = layui.layer;
    var base = '/paycenter/backend/trade';

    var t = table.render({
        elem: '#tbl',
        url: base + '/list',
        page: true,
        cols: [[
            {field: 'trade_no', title: '订单号', width: 210},
            {field: 'biz', title: '业务', width: 90},
            {field: 'channel', title: '渠道', width: 90},
            {field: 'scene', title: '场景', width: 70},
            {field: 'subject', title: '标题', minWidth: 160},
            {field: 'amount', title: '金额', width: 100, templet: '<div>¥{{d.amount}}</div>'},
            {field: 'status_text', title: '状态', width: 90},
            {field: 'gateway_no', title: '网关交易号', width: 200},
            {field: 'create_time', title: '下单时间', width: 170},
            {field: 'pay_time', title: '支付时间', width: 170},
            {title: '操作', width: 120, toolbar: '#toolTpl', fixed: 'right'}
        ]]
    });

    form.on('submit(search)', function (data) {
        t.reload({where: data.field, page: {curr: 1}});
        return false;
    });

    table.on('tool(tbl)', function (obj) {
        var d = obj.data;
        if (obj.event === 'query') {
            http.post(base + '/query', {trade_no: d.trade_no}).then(function (res) {
                layer.msg(res.msg || res.message, {icon: res.code === 0 ? 1 : 2});
                t.reload();
            });
        } else if (obj.event === 'refund') {
            layer.confirm('确认对订单 ' + d.trade_no + ' 发起全额退款？', function (i) {
                http.post(base + '/refund', {trade_no: d.trade_no}).then(function (res) {
                    layer.msg(res.msg || res.message, {icon: res.code === 0 ? 1 : 2});
                    if (res.code === 0) t.reload();
                    layer.close(i);
                });
            });
        }
    });
});
</script>
</body>
</html>