diff --git a/app/data/controller/base/Payment.php b/app/data/controller/base/Payment.php
index 2cd2ed7ab..37d7e0d5c 100644
--- a/app/data/controller/base/Payment.php
+++ b/app/data/controller/base/Payment.php
@@ -7,6 +7,7 @@ use app\data\service\PaymentService;
 use app\data\service\UserAdminService;
 use think\admin\Controller;
 use think\admin\extend\CodeExtend;
+use think\admin\helper\QueryHelper;
 
 /**
  * 支付通道管理
@@ -31,10 +32,25 @@ class Payment extends Controller
      */
     public function index()
     {
-        $this->title = '支付通道管理';
-        $query = BaseUserPayment::mQuery();
-        $query->where(['deleted' => 0])->order('sort desc,id desc');
-        $query->like('name,code')->equal('type,status')->dateBetween('create_at')->page();
+        $this->type = input('get.type', 'index');
+        BaseUserPayment::mQuery()->layTable(function () {
+            $this->title = '支付通道管理';
+        }, function (QueryHelper $query) {
+            $query->where(['status' => intval($this->type === 'index'), 'deleted' => 0]);
+            $query->like('name,code')->equal('status,type#ptype')->dateBetween('create_at');
+        });
+    }
+
+    /**
+     * 获取支付名称
+     * @param array $data
+     * @return void
+     */
+    protected function _page_filter(array &$data)
+    {
+        foreach ($data as &$vo) {
+            $vo['ntype'] = $this->types[$vo['type']]['name'] ?? $vo['type'];
+        }
     }
 
     /**
diff --git a/app/data/model/BaseUserPayment.php b/app/data/model/BaseUserPayment.php
index 897961b59..4ce692e1f 100644
--- a/app/data/model/BaseUserPayment.php
+++ b/app/data/model/BaseUserPayment.php
@@ -11,5 +11,13 @@ use think\admin\Model;
  */
 class BaseUserPayment extends Model
 {
-
+    /**
+     * 格式化创建时间
+     * @param string $value
+     * @return string
+     */
+    public function getCreateAtAttr(string $value): string
+    {
+        return format_datetime($value);
+    }
 }
\ No newline at end of file
diff --git a/app/data/view/base/payment/index.html b/app/data/view/base/payment/index.html
index fba0065c9..05fd14f27 100644
--- a/app/data/view/base/payment/index.html
+++ b/app/data/view/base/payment/index.html
@@ -1,4 +1,4 @@
-{extend name="../../admin/view/main"}
+{extend name='../../admin/view/table'}
 
 {block name="button"}
 <!--{if auth("add")}-->
@@ -6,68 +6,90 @@
 <!--{/if}-->
 
 <!--{if auth("remove")}-->
-<button class='layui-btn layui-btn-sm layui-btn-primary' data-action='{:url("remove")}' data-confirm="确定要删除这些支付吗？" data-rule="id#{key}">删除支付</button>
+<button class='layui-btn layui-btn-sm layui-btn-primary' data-action='{:url("remove")}' data-confirm="确定要删除这些支付吗？" data-rule="id#{id}">删除支付</button>
 <!--{/if}-->
 {/block}
 
-{block name='content'}
-<div class="think-box-shadow">
-    {include file='base/payment/index_search'}
-    <table class="layui-table margin-top-10" lay-skin="line">
-        {notempty name='list'}
-        <thead>
-        <tr>
-            <th class='list-table-check-td think-checkbox'>
-                <label><input data-auto-none data-check-target='.list-check-box' type='checkbox'></label>
-            </th>
-            <th class='list-table-sort-td'>
-                <button class="layui-btn layui-btn-xs" data-reload type="button">刷 新</button>
-            </th>
-            <th class="text-left nowrap">支付名称</th>
-            <th class="text-left nowrap">支付编号</th>
-            <th class="text-left nowrap">支付方式</th>
-            <th class="text-left nowrap">使用状态</th>
-            <th class="text-left nowrap">创建时间</th>
-            <th class="text-left nowrap"></th>
-        </tr>
-        </thead>
-        {/notempty}
-        <tbody>
-        {foreach $list as $key=>$vo}
-        <tr>
-            <td class='list-table-check-td think-checkbox'>
-                <label><input class="list-check-box" type='checkbox' value='{$vo.id}'></label>
-            </td>
-            <td class='list-table-sort-td'>
-                <label><input class="list-sort-input" data-action-blur="{:sysuri()}" data-loading="false" data-value="id#{$vo.id};action#sort;sort#{value}" value="{$vo.sort}"></label>
-            </td>
-            <td class="text-left nowrap">
-                <div class="headimg headimg-xs headimg-no" data-tips-hover data-tips-image data-lazy-src="{$vo.cover}"></div>
-                {$vo.name|default=''}
-            </td>
-            <td class="text-left nowrap">{$vo.code|default=''}</td>
-            <td class="text-left nowrap">{$types[$vo.type]['name']??$vo.type}</td>
-            <td>{if $vo.status eq 0}<span class="color-red">已禁用</span>{elseif $vo.status eq 1}<span class="color-green">已激活</span>{/if}</td>
-            <td class="text-left nowrap">{$vo.create_at|format_datetime}</td>
-            <td class='text-left nowrap'>
-                <!--{if auth("edit")}-->
-                <a class="layui-btn layui-btn-sm" data-open="{:url('edit')}?id={$vo.id}">编 辑</a>
-                <!--{/if}-->
-
-                <!--{if auth("state") and $vo.status eq 1}-->
-                <a class="layui-btn layui-btn-sm layui-btn-warm" data-action="{:url('state')}" data-value="id#{$vo.id};status#0">禁 用</a>
-                <!--{elseif auth("state") and $vo.status eq 0}-->
-                <a class="layui-btn layui-btn-sm layui-btn-warm" data-action="{:url('state')}" data-value="id#{$vo.id};status#1">激 活</a>
-                <!--{/if}-->
-
-                <!--{if auth("remove")}-->
-                <a class="layui-btn layui-btn-sm layui-btn-danger" data-action="{:url('remove')}" data-confirm="确定要删除该支付吗？" data-value="id#{$vo.id}">删 除</a>
-                <!--{/if}-->
-            </td>
-        </tr>
-        {/foreach}
-        </tbody>
-    </table>
-    {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
+{block name="content"}
+<div class="layui-tab layui-tab-card">
+    <ul class="layui-tab-title">
+        {foreach ['index'=>'支付管理','recycle'=>'回 收 站'] as $k=>$v}{if isset($type) and $type eq $k}
+        <li data-open="{:url('index')}?type={$k}" class="layui-this color-green">{$v}</li>
+        {else}
+        <li data-open="{:url('index')}?type={$k}">{$v}</li>
+        {/if}{/foreach}
+    </ul>
+    <div class="layui-tab-content">
+        {include file='base/payment/index_search'}
+        <table id="PaymentTable" data-url="{:sysuri()}" data-target-search="form.form-search"></table>
+    </div>
 </div>
+{/block}
+
+{block name='script'}
+<script>
+    $(function () {
+        // 初始化表格组件
+        $('#PaymentTable').layTable({
+            even: true, height: 'full',
+            sort: {field: 'sort desc,code', type: 'desc'},
+            where: {type: '{$type|default="index"}'},
+            cols: [[
+                {checkbox: true, fixed: true},
+                {field: 'sort', title: '排序权重', align: 'center', width: 100, sort: true, templet: '#SortInputTpl'},
+                {field: 'code', title: '支付编号', align: "center", minWidth: 170},
+                {field: 'ntype', title: '支付类型', align: "center", minWidth: 170},
+                {
+                    field: 'cover', title: '图片', width: 60, align: 'center', templet: function (d) {
+                        if (!d.cover) return '';
+                        return layui.laytpl('<div data-tips-image data-tips-hover class="headimg headimg-xs headimg-no margin-0" data-lazy-src="{{d.cover}}"></div>').render(d);
+                    }
+                },
+                {field: 'name', title: '支付名称', align: 'left', minWidth: 140},
+                {field: 'status', title: '支付状态', align: 'center', minWidth: 110, templet: '#StatusSwitchTpl'},
+                {field: 'create_at', title: '创建时间', align: 'center', minWidth: 170, sort: true},
+                {toolbar: '#toolbar', title: '操作面板', align: 'center', minWidth: 80, fixed: 'right'},
+            ]]
+        });
+
+        // 数据状态切换操作
+        layui.form.on('switch(StatusSwitch)', function (obj) {
+            var data = {id: obj.value, status: obj.elem.checked > 0 ? 1 : 0};
+            $.form.load("{:url('state')}", data, 'post', function (ret) {
+                if (ret.code < 1) $.msg.error(ret.info, 3, function () {
+                    $('#PaymentTable').trigger('reload');
+                }); else {
+                    $('#PaymentTable').trigger('reload');
+                }
+                return false;
+            }, false);
+        });
+    });
+
+</script>
+
+<!-- 列表排序权重模板 -->
+<script type="text/html" id="SortInputTpl">
+    <input type="number" min="0" data-blur-number="0" data-action-blur="{:sysuri()}" data-value="id#{{d.id}};action#sort;sort#{value}" data-loading="false" value="{{d.sort}}" class="layui-input text-center">
+</script>
+
+<!-- 数据状态切换模板 -->
+<script type="text/html" id="StatusSwitchTpl">
+    <!--{if auth("state")}-->
+    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="已激活|已禁用" lay-filter="StatusSwitch" {{d.status>0?'checked':''}}>
+    <!--{else}-->
+    {{d.status ? '<b class="color-green">已启用</b>' : '<b class="color-red">已禁用</b>'}}
+    <!--{/if}-->
+</script>
+
+<!-- 数据操作工具条模板 -->
+<script type="text/html" id="toolbar">
+    <!--{if auth("edit") and isset($type) and $type eq 'index'}-->
+    <a class="layui-btn layui-btn-primary layui-btn-sm" data-open='{:url("edit")}?id={{d.id}}'>编 辑</a>
+    <!--{/if}-->
+
+    <!--{if auth("remove") and isset($type) and $type neq 'index'}-->
+    <a class="layui-btn layui-btn-danger layui-btn-sm" data-action="{:url('remove')}" data-value="id#{{d.id}}" data-confirm="确定要删除文章吗?">删 除</a>
+    <!--{/if}-->
+</script>
 {/block}
\ No newline at end of file
diff --git a/app/data/view/base/payment/index_search.html b/app/data/view/base/payment/index_search.html
index 9cb4bbdd7..a4d345f20 100644
--- a/app/data/view/base/payment/index_search.html
+++ b/app/data/view/base/payment/index_search.html
@@ -1,12 +1,6 @@
 <fieldset>
     <legend>条件搜索</legend>
     <form action="{:sysuri()}" autocomplete="off" class="layui-form layui-form-pane form-search" method="get" onsubmit="return false">
-        <div class="layui-form-item layui-inline">
-            <label class="layui-form-label">支付名称</label>
-            <label class="layui-input-inline">
-                <input class="layui-input" name="name" placeholder="请输入支付名称" value="{$get.name|default=''}">
-            </label>
-        </div>
 
         <div class="layui-form-item layui-inline">
             <label class="layui-form-label">支付编号</label>
@@ -15,12 +9,20 @@
             </label>
         </div>
 
+        <div class="layui-form-item layui-inline">
+            <label class="layui-form-label">支付名称</label>
+            <label class="layui-input-inline">
+                <input class="layui-input" name="name" placeholder="请输入支付名称" value="{$get.name|default=''}">
+            </label>
+        </div>
+
         <div class="layui-form-item layui-inline">
             <label class="layui-form-label">支付方式</label>
             <div class="layui-input-inline">
-                <select class="layui-select" name="type">
+                <select class="layui-select" name="ptype">
                     <option value="">-- 全部 --</option>
-                    {foreach $types as $k=>$v}{if !empty($v['bind'])}{if $k eq input('type')}
+                    {foreach $types as $k=>$v}{if !empty($v['bind'])}
+                    {if isset($get.ptype) and $k eq $get.ptype}
                     <option selected value="{$k}">{$v.name}</option>
                     {else}
                     <option value="{$k}">{$v.name}</option>
@@ -29,21 +31,6 @@
             </div>
         </div>
 
-        <div class="layui-form-item layui-inline">
-            <label class="layui-form-label">使用状态</label>
-            <div class="layui-input-inline">
-                <select class="layui-select" name="status">
-                    <option value="">-- 全部 --</option>
-                    {foreach ['已禁用的记录', '已激活的记录'] as $k=>$v}
-                    {if $k.'' eq input('status')}
-                    <option selected value="{$k}">{$v}</option>
-                    {else}
-                    <option value="{$k}">{$v}</option>
-                    {/if}{/foreach}
-                </select>
-            </div>
-        </div>
-
         <div class="layui-form-item layui-inline">
             <label class="layui-form-label">创建时间</label>
             <label class="layui-input-inline">