```

feat(shopro_wechat_trade): 微信同步页面优化及数据格式化功能

- 新增formatListItem方法对同步记录数据进行格式化处理，
  包括同步类型、状态、发货模式和错误信息的中文映射
- 实现统计项点击筛选功能，添加高亮状态指示器
- 重构前端JavaScript代码，使用预格式化数据字段提升显示性能
- 添加详情弹窗功能，支持查看完整的同步请求响应内容
- 优化重试按钮交互，增加确认提示防止误操作
- 更新页面布局样式，改善用户界面体验
```

addons/shopro_wechat_trade/application/admin/controller/shopro_wechat_trade/Sync.php

@@ -40,6 +40,49 @@ class Sync extends Backend
         return $stats;
     }
 
+    protected function formatListItem(array $row)
+    {
+        $typeMap = [
+            'shipping' => '发货同步',
+            'confirm'  => '确认收货同步',
+        ];
+        $row['sync_type_text'] = $typeMap[$row['sync_type'] ?? ''] ?? ($row['sync_type'] ?? '-');
+
+        $status = $row['status'] ?? '';
+        $retryCount = intval($row['retry_count'] ?? 0);
+        if ($status === 'success') {
+            $row['status_text'] = '成功';
+        } elseif ($status === 'failed') {
+            $row['status_text'] = '失败';
+        } elseif ($status === 'pending') {
+            $row['status_text'] = $retryCount > 0 ? '待重试' : '处理中';
+        } else {
+            $row['status_text'] = $status ?: '-';
+        }
+
+        if (($row['sync_type'] ?? '') !== 'shipping') {
+            $row['delivery_mode_text'] = '-';
+        } else {
+            $modeMap = [1 => '统一发货', 2 => '分拆发货'];
+            $row['delivery_mode_text'] = $modeMap[intval($row['delivery_mode'] ?? 0)] ?? ('模式' . $row['delivery_mode']);
+        }
+
+        if ($status === 'success') {
+            $row['error_text'] = '-';
+        } else {
+            $parts = [];
+            if ($row['errcode'] !== null && $row['errcode'] !== '') {
+                $parts[] = '[' . $row['errcode'] . ']';
+            }
+            if (!empty($row['errmsg'])) {
+                $parts[] = $row['errmsg'];
+            }
+            $row['error_text'] = $parts ? implode(' ', $parts) : '-';
+        }
+
+        return $row;
+    }
+
     public function index()
     {
         if ($this->request->isAjax()) {
@@ -52,6 +95,9 @@ class Sync extends Backend
             $query = $this->buildQuery($status, $syncType, $orderSn)->order('id', 'desc');
             $total = (clone $query)->count();
             $list = $query->page($page, $limit)->select();
+            foreach ($list as $key => $row) {
+                $list[$key] = $this->formatListItem($row);
+            }
 
             return json(['total' => $total, 'rows' => $list]);
         }
@@ -67,7 +113,7 @@ class Sync extends Backend
         if (!$row) {
             $this->error('记录不存在');
         }
-        $this->success('', null, $row);
+        $this->success('', null, $this->formatListItem($row));
     }
 
     public function retry()

addons/shopro_wechat_trade/application/admin/view/shopro_wechat_trade/sync/index.html

@@ -24,7 +24,11 @@
         font-size: 13px;
         background: #f5f7fa;
         color: #606266;
+        cursor: pointer;
+        border: 1px solid transparent;
+        user-select: none;
     }
+    .wx-sync-page .stat-item:hover { opacity: 0.85; }
     .wx-sync-page .stat-item .num {
         font-weight: 600;
         margin-left: 4px;
@@ -32,15 +36,19 @@
     .wx-sync-page .stat-success { background: #f0f9eb; color: #67c23a; }
     .wx-sync-page .stat-pending { background: #fdf6ec; color: #e6a23c; }
     .wx-sync-page .stat-failed { background: #fef0f0; color: #f56c6c; }
-    .wx-sync-page .toolbar-row {
+    .wx-sync-page .stat-item-active {
+        border-color: currentColor;
+        box-shadow: 0 0 0 1px currentColor inset;
+    }
+    .wx-sync-page .filter-bar {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: 8px;
         margin-bottom: 10px;
     }
-    .wx-sync-page .toolbar-row .form-control { width: auto; min-width: 140px; }
-    .wx-sync-page .toolbar-row .order-sn-input { min-width: 220px; }
+    .wx-sync-page .filter-bar .form-control { width: auto; min-width: 140px; }
+    .wx-sync-page .filter-bar .order-sn-input { min-width: 220px; }
     .wx-sync-detail pre {
         max-height: 280px;
         overflow: auto;
@@ -70,34 +78,34 @@
     <div class="panel-body">
         <div class="page-tip">
             <strong>说明：</strong>本页展示商城向微信「发货信息管理服务」同步的记录，包括
-            <strong>发货同步</strong>（upload_shipping_info）与<strong>确认收货同步</strong>（notify_confirm_receive）。
+            <strong>发货同步</strong>与<strong>确认收货同步</strong>。
             「同步成功」仅表示微信接口返回成功，<strong>不代表</strong>商城订单状态；订单实际状态请到「订单管理」查看。
             失败记录会按配置自动重试，也可在此手动重试。
         </div>
 
         <div class="stats-bar">
-            <span class="stat-item">全部<span class="num">{$stats.total|default=0}</span></span>
-            <span class="stat-item stat-success">成功<span class="num">{$stats.success|default=0}</span></span>
-            <span class="stat-item stat-pending">待重试/处理中<span class="num">{$stats.pending|default=0}</span></span>
-            <span class="stat-item stat-failed">失败<span class="num">{$stats.failed|default=0}</span></span>
+            <span class="stat-item stat-all stat-item-active" data-status="">全部<span class="num">{$stats.total|default=0}</span></span>
+            <span class="stat-item stat-success" data-status="success">成功<span class="num">{$stats.success|default=0}</span></span>
+            <span class="stat-item stat-pending" data-status="pending">待重试/处理中<span class="num">{$stats.pending|default=0}</span></span>
+            <span class="stat-item stat-failed" data-status="failed">失败<span class="num">{$stats.failed|default=0}</span></span>
         </div>
 
-        <div id="toolbar" class="toolbar toolbar-row">
-            <select id="status-filter" class="form-control">
+        <div id="wx-sync-filter-bar" class="filter-bar">
+            <select id="wx-sync-status-filter" class="form-control">
                 <option value="">全部状态</option>
                 <option value="success">成功</option>
                 <option value="pending">待重试/处理中</option>
                 <option value="failed">失败</option>
             </select>
-            <select id="type-filter" class="form-control">
+            <select id="wx-sync-type-filter" class="form-control">
                 <option value="">全部类型</option>
                 <option value="shipping">发货同步</option>
                 <option value="confirm">确认收货同步</option>
             </select>
-            <input type="text" id="order-sn-filter" class="form-control order-sn-input" placeholder="搜索订单号">
-            <button type="button" class="btn btn-primary btn-search"><i class="fa fa-search"></i> 搜索</button>
-            <button type="button" class="btn btn-default btn-reset">重置</button>
-            <button type="button" class="btn btn-warning btn-filter-failed">仅看失败</button>
+            <input type="text" id="wx-sync-order-sn-filter" class="form-control order-sn-input" placeholder="搜索订单号">
+            <button type="button" id="wx-sync-btn-search" class="btn btn-primary"><i class="fa fa-search"></i> 搜索</button>
+            <button type="button" id="wx-sync-btn-reset" class="btn btn-default">重置</button>
+            <button type="button" id="wx-sync-btn-failed" class="btn btn-warning">仅看失败</button>
         </div>
         <table id="table" class="table table-striped table-bordered table-hover" width="100%"></table>
     </div>

addons/shopro_wechat_trade/public/assets/js/backend/shopro_wechat_trade/sync.js

@@ -13,55 +13,44 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
         return $('<div/>').text(text == null ? '' : text).html();
     }
 
-    function formatSyncType(value) {
-        var text = SYNC_TYPE_MAP[value] || value || '-';
-        if (value === 'shipping') {
-            return '<span class="label label-info">' + text + '</span>';
+    function formatSyncTypeBadge(row) {
+        var key = row.sync_type || '';
+        var text = row.sync_type_text || SYNC_TYPE_MAP[key] || key || '-';
+        if (key === 'shipping') {
+            return '<span class="label label-info">' + escapeHtml(text) + '</span>';
         }
-        if (value === 'confirm') {
-            return '<span class="label label-primary">' + text + '</span>';
+        if (key === 'confirm') {
+            return '<span class="label label-primary">' + escapeHtml(text) + '</span>';
         }
-        return text;
+        return escapeHtml(text);
     }
 
-    function formatStatus(row) {
-        var status = row.status;
+    function formatStatusBadge(row) {
+        var text = row.status_text || '';
+        var status = row.status || '';
+        if (!text) {
             var retryCount = parseInt(row.retry_count, 10) || 0;
             if (status === 'success') {
-            return '<span class="label label-success">成功</span>';
+                text = '成功';
+            } else if (status === 'failed') {
+                text = '失败';
+            } else if (status === 'pending') {
+                text = retryCount > 0 ? '待重试' : '处理中';
+            } else {
+                text = status || '-';
+            }
+        }
+        if (status === 'success') {
+            return '<span class="label label-success">' + escapeHtml(text) + '</span>';
         }
         if (status === 'failed') {
-            return '<span class="label label-danger">失败</span>';
+            return '<span class="label label-danger">' + escapeHtml(text) + '</span>';
         }
         if (status === 'pending') {
-            if (retryCount > 0) {
-                return '<span class="label label-warning">待重试</span>';
+            var pendingClass = (parseInt(row.retry_count, 10) || 0) > 0 ? 'label-warning' : 'label-default';
+            return '<span class="label ' + pendingClass + '">' + escapeHtml(text) + '</span>';
         }
-            return '<span class="label label-default">处理中</span>';
-        }
-        return status || '-';
-    }
-
-    function formatDeliveryMode(value, row) {
-        if (row.sync_type !== 'shipping') {
-            return '<span class="text-muted">-</span>';
-        }
-        var text = DELIVERY_MODE_MAP[value] || ('模式' + value);
-        return text;
-    }
-
-    function formatErrorInfo(value, row) {
-        if (row.status === 'success') {
-            return '<span class="text-muted">-</span>';
-        }
-        var parts = [];
-        if (row.errcode !== null && row.errcode !== undefined && row.errcode !== '') {
-            parts.push('[' + row.errcode + ']');
-        }
-        if (row.errmsg) {
-            parts.push(row.errmsg);
-        }
-        return parts.length ? escapeHtml(parts.join(' ')) : '<span class="text-muted">-</span>';
+        return escapeHtml(text);
     }
 
     function formatJsonText(raw) {
@@ -81,6 +70,11 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
 
     var Controller = {
         index: function () {
+            var $page = $('.wx-sync-page');
+            var $statusFilter = $('#wx-sync-status-filter');
+            var $typeFilter = $('#wx-sync-type-filter');
+            var $orderSnFilter = $('#wx-sync-order-sn-filter');
+
             Table.api.init({
                 extend: {
                     index_url: 'shopro_wechat_trade/sync/index',
@@ -88,7 +82,22 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                 }
             });
 
-            var table = $("#table");
+            var table = $('#table');
+
+            function highlightStat(status) {
+                $page.find('.stat-item').removeClass('stat-item-active');
+                $page.find('.stat-item[data-status="' + (status || '') + '"]').addClass('stat-item-active');
+            }
+
+            function refreshTable() {
+                table.bootstrapTable('refresh', { pageNumber: 1 });
+            }
+
+            function applyStatusFilter(status) {
+                $statusFilter.val(status || '');
+                highlightStat(status || '');
+                refreshTable();
+            }
 
             table.bootstrapTable({
                 url: $.fn.bootstrapTable.defaults.extend.index_url,
@@ -99,9 +108,9 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                 commonSearch: false,
                 showExport: false,
                 queryParams: function (params) {
-                    params.status = $('#status-filter').val();
-                    params.sync_type = $('#type-filter').val();
-                    params.order_sn = $.trim($('#order-sn-filter').val());
+                    params.status = $statusFilter.val();
+                    params.sync_type = $typeFilter.val();
+                    params.order_sn = $.trim($orderSnFilter.val());
                     return params;
                 },
                 columns: [
@@ -120,31 +129,39 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                         }
                     },
                     {
-                        field: 'sync_type',
-                        title: '同步类型',
-                        formatter: function (value) {
-                            return formatSyncType(value);
-                        }
-                    },
-                    {
-                        field: 'status',
-                        title: '同步状态',
+                        field: 'sync_type_text',
+                        title: '类型',
+                        escape: false,
                         formatter: function (value, row) {
-                            return formatStatus(row);
+                            return formatSyncTypeBadge(row);
                         }
                     },
                     {
-                        field: 'delivery_mode',
+                        field: 'status_text',
+                        title: '状态',
+                        escape: false,
+                        formatter: function (value, row) {
+                            return formatStatusBadge(row);
+                        }
+                    },
+                    {
+                        field: 'delivery_mode_text',
                         title: '发货模式',
                         formatter: function (value, row) {
-                            return formatDeliveryMode(value, row);
+                            if ((row.sync_type || '') !== 'shipping') {
+                                return '<span class="text-muted">-</span>';
+                            }
+                            return escapeHtml(value || '-');
                         }
                     },
                     {
-                        field: 'errmsg',
+                        field: 'error_text',
                         title: '错误信息',
                         formatter: function (value, row) {
-                            return formatErrorInfo(value, row);
+                            if (row.status === 'success' || value === '-') {
+                                return '<span class="text-muted">-</span>';
+                            }
+                            return escapeHtml(value || '-');
                         }
                     },
                     {
@@ -167,6 +184,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                         field: 'operate',
                         title: '操作',
                         width: 140,
+                        escape: false,
                         table: table,
                         events: Table.api.events.operate,
                         formatter: function (value, row) {
@@ -181,36 +199,46 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                 ]
             });
 
-            function refreshTable() {
-                table.bootstrapTable('refresh');
-            }
+            $page.on('click', '.stat-item', function () {
+                applyStatusFilter($(this).data('status') || '');
+            });
 
-            $('#status-filter, #type-filter').on('change', refreshTable);
+            $statusFilter.on('change', function () {
+                highlightStat($(this).val() || '');
+                refreshTable();
+            });
 
-            $('.btn-search').on('click', refreshTable);
+            $typeFilter.on('change', refreshTable);
 
-            $('#order-sn-filter').on('keypress', function (e) {
+            $page.on('click', '#wx-sync-btn-search', function (e) {
+                e.preventDefault();
+                refreshTable();
+            });
+
+            $page.on('click', '#wx-sync-btn-reset', function (e) {
+                e.preventDefault();
+                $statusFilter.val('');
+                $typeFilter.val('');
+                $orderSnFilter.val('');
+                highlightStat('');
+                refreshTable();
+            });
+
+            $page.on('click', '#wx-sync-btn-failed', function (e) {
+                e.preventDefault();
+                applyStatusFilter('failed');
+                $typeFilter.val('');
+            });
+
+            $orderSnFilter.on('keypress', function (e) {
                 if (e.which === 13) {
+                    e.preventDefault();
                     refreshTable();
                 }
             });
 
-            $('.btn-reset').on('click', function () {
-                $('#status-filter').val('');
-                $('#type-filter').val('');
-                $('#order-sn-filter').val('');
-                refreshTable();
-            });
-
-            $('.btn-filter-failed').on('click', function () {
-                $('#status-filter').val('failed');
-                $('#type-filter').val('');
-                refreshTable();
-            });
-
             table.on('click', '.btn-order', function () {
-                var orderId = $(this).data('id');
-                Fast.api.open('shopro/order/order/detail?id=' + orderId, '订单详情');
+                Fast.api.open('shopro/order/order/detail?id=' + $(this).data('id'), '订单详情');
             });
 
             table.on('click', '.btn-retry', function () {
@@ -235,10 +263,10 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                     var $tpl = $('#sync-detail-template').clone().removeAttr('id').removeClass('hide');
                     $tpl.find('.detail-id').text(row.id || '-');
                     $tpl.find('.detail-order-sn').text(row.order_sn || '-');
-                    $tpl.find('.detail-sync-type').html(formatSyncType(row.sync_type));
-                    $tpl.find('.detail-status').html(formatStatus(row));
+                    $tpl.find('.detail-sync-type').html(formatSyncTypeBadge(row));
+                    $tpl.find('.detail-status').html(formatStatusBadge(row));
                     if (row.sync_type === 'shipping') {
-                        $tpl.find('.detail-delivery-mode').text(DELIVERY_MODE_MAP[row.delivery_mode] || ('模式' + row.delivery_mode));
+                        $tpl.find('.detail-delivery-mode').text(row.delivery_mode_text || DELIVERY_MODE_MAP[row.delivery_mode] || '-');
                         $tpl.find('.detail-delivery-mode-row').show();
                     } else {
                         $tpl.find('.detail-delivery-mode-row').hide();
@@ -247,14 +275,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                     if (row.status === 'success') {
                         $tpl.find('.detail-error-row').hide();
                     } else {
-                        var errParts = [];
-                        if (row.errcode !== null && row.errcode !== undefined && row.errcode !== '') {
-                            errParts.push('[' + row.errcode + ']');
-                        }
-                        if (row.errmsg) {
-                            errParts.push(row.errmsg);
-                        }
-                        $tpl.find('.detail-error').text(errParts.join(' ') || '-');
+                        $tpl.find('.detail-error').text(row.error_text && row.error_text !== '-' ? row.error_text : '-');
                         $tpl.find('.detail-error-row').show();
                     }
                     $tpl.find('.detail-create').text(formatDatetime(row.createtime));

application/admin/controller/shopro_wechat_trade/Sync.php

@@ -40,6 +40,49 @@ class Sync extends Backend
         return $stats;
     }
 
+    protected function formatListItem(array $row)
+    {
+        $typeMap = [
+            'shipping' => '发货同步',
+            'confirm'  => '确认收货同步',
+        ];
+        $row['sync_type_text'] = $typeMap[$row['sync_type'] ?? ''] ?? ($row['sync_type'] ?? '-');
+
+        $status = $row['status'] ?? '';
+        $retryCount = intval($row['retry_count'] ?? 0);
+        if ($status === 'success') {
+            $row['status_text'] = '成功';
+        } elseif ($status === 'failed') {
+            $row['status_text'] = '失败';
+        } elseif ($status === 'pending') {
+            $row['status_text'] = $retryCount > 0 ? '待重试' : '处理中';
+        } else {
+            $row['status_text'] = $status ?: '-';
+        }
+
+        if (($row['sync_type'] ?? '') !== 'shipping') {
+            $row['delivery_mode_text'] = '-';
+        } else {
+            $modeMap = [1 => '统一发货', 2 => '分拆发货'];
+            $row['delivery_mode_text'] = $modeMap[intval($row['delivery_mode'] ?? 0)] ?? ('模式' . $row['delivery_mode']);
+        }
+
+        if ($status === 'success') {
+            $row['error_text'] = '-';
+        } else {
+            $parts = [];
+            if ($row['errcode'] !== null && $row['errcode'] !== '') {
+                $parts[] = '[' . $row['errcode'] . ']';
+            }
+            if (!empty($row['errmsg'])) {
+                $parts[] = $row['errmsg'];
+            }
+            $row['error_text'] = $parts ? implode(' ', $parts) : '-';
+        }
+
+        return $row;
+    }
+
     public function index()
     {
         if ($this->request->isAjax()) {
@@ -52,6 +95,9 @@ class Sync extends Backend
             $query = $this->buildQuery($status, $syncType, $orderSn)->order('id', 'desc');
             $total = (clone $query)->count();
             $list = $query->page($page, $limit)->select();
+            foreach ($list as $key => $row) {
+                $list[$key] = $this->formatListItem($row);
+            }
 
             return json(['total' => $total, 'rows' => $list]);
         }
@@ -67,7 +113,7 @@ class Sync extends Backend
         if (!$row) {
             $this->error('记录不存在');
         }
-        $this->success('', null, $row);
+        $this->success('', null, $this->formatListItem($row));
     }
 
     public function retry()

application/admin/view/shopro_wechat_trade/sync/index.html

@@ -24,7 +24,11 @@
         font-size: 13px;
         background: #f5f7fa;
         color: #606266;
+        cursor: pointer;
+        border: 1px solid transparent;
+        user-select: none;
     }
+    .wx-sync-page .stat-item:hover { opacity: 0.85; }
     .wx-sync-page .stat-item .num {
         font-weight: 600;
         margin-left: 4px;
@@ -32,15 +36,19 @@
     .wx-sync-page .stat-success { background: #f0f9eb; color: #67c23a; }
     .wx-sync-page .stat-pending { background: #fdf6ec; color: #e6a23c; }
     .wx-sync-page .stat-failed { background: #fef0f0; color: #f56c6c; }
-    .wx-sync-page .toolbar-row {
+    .wx-sync-page .stat-item-active {
+        border-color: currentColor;
+        box-shadow: 0 0 0 1px currentColor inset;
+    }
+    .wx-sync-page .filter-bar {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: 8px;
         margin-bottom: 10px;
     }
-    .wx-sync-page .toolbar-row .form-control { width: auto; min-width: 140px; }
-    .wx-sync-page .toolbar-row .order-sn-input { min-width: 220px; }
+    .wx-sync-page .filter-bar .form-control { width: auto; min-width: 140px; }
+    .wx-sync-page .filter-bar .order-sn-input { min-width: 220px; }
     .wx-sync-detail pre {
         max-height: 280px;
         overflow: auto;
@@ -70,34 +78,34 @@
     <div class="panel-body">
         <div class="page-tip">
             <strong>说明：</strong>本页展示商城向微信「发货信息管理服务」同步的记录，包括
-            <strong>发货同步</strong>（upload_shipping_info）与<strong>确认收货同步</strong>（notify_confirm_receive）。
+            <strong>发货同步</strong>与<strong>确认收货同步</strong>。
             「同步成功」仅表示微信接口返回成功，<strong>不代表</strong>商城订单状态；订单实际状态请到「订单管理」查看。
             失败记录会按配置自动重试，也可在此手动重试。
         </div>
 
         <div class="stats-bar">
-            <span class="stat-item">全部<span class="num">{$stats.total|default=0}</span></span>
-            <span class="stat-item stat-success">成功<span class="num">{$stats.success|default=0}</span></span>
-            <span class="stat-item stat-pending">待重试/处理中<span class="num">{$stats.pending|default=0}</span></span>
-            <span class="stat-item stat-failed">失败<span class="num">{$stats.failed|default=0}</span></span>
+            <span class="stat-item stat-all stat-item-active" data-status="">全部<span class="num">{$stats.total|default=0}</span></span>
+            <span class="stat-item stat-success" data-status="success">成功<span class="num">{$stats.success|default=0}</span></span>
+            <span class="stat-item stat-pending" data-status="pending">待重试/处理中<span class="num">{$stats.pending|default=0}</span></span>
+            <span class="stat-item stat-failed" data-status="failed">失败<span class="num">{$stats.failed|default=0}</span></span>
         </div>
 
-        <div id="toolbar" class="toolbar toolbar-row">
-            <select id="status-filter" class="form-control">
+        <div id="wx-sync-filter-bar" class="filter-bar">
+            <select id="wx-sync-status-filter" class="form-control">
                 <option value="">全部状态</option>
                 <option value="success">成功</option>
                 <option value="pending">待重试/处理中</option>
                 <option value="failed">失败</option>
             </select>
-            <select id="type-filter" class="form-control">
+            <select id="wx-sync-type-filter" class="form-control">
                 <option value="">全部类型</option>
                 <option value="shipping">发货同步</option>
                 <option value="confirm">确认收货同步</option>
             </select>
-            <input type="text" id="order-sn-filter" class="form-control order-sn-input" placeholder="搜索订单号">
-            <button type="button" class="btn btn-primary btn-search"><i class="fa fa-search"></i> 搜索</button>
-            <button type="button" class="btn btn-default btn-reset">重置</button>
-            <button type="button" class="btn btn-warning btn-filter-failed">仅看失败</button>
+            <input type="text" id="wx-sync-order-sn-filter" class="form-control order-sn-input" placeholder="搜索订单号">
+            <button type="button" id="wx-sync-btn-search" class="btn btn-primary"><i class="fa fa-search"></i> 搜索</button>
+            <button type="button" id="wx-sync-btn-reset" class="btn btn-default">重置</button>
+            <button type="button" id="wx-sync-btn-failed" class="btn btn-warning">仅看失败</button>
         </div>
         <table id="table" class="table table-striped table-bordered table-hover" width="100%"></table>
     </div>

public/assets/js/backend/shopro_wechat_trade/sync.js

@@ -1,6 +1,80 @@
 define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
+    var SYNC_TYPE_MAP = {
+        shipping: '发货同步',
+        confirm: '确认收货同步'
+    };
+
+    var DELIVERY_MODE_MAP = {
+        1: '统一发货',
+        2: '分拆发货'
+    };
+
+    function escapeHtml(text) {
+        return $('<div/>').text(text == null ? '' : text).html();
+    }
+
+    function formatSyncTypeBadge(row) {
+        var key = row.sync_type || '';
+        var text = row.sync_type_text || SYNC_TYPE_MAP[key] || key || '-';
+        if (key === 'shipping') {
+            return '<span class="label label-info">' + escapeHtml(text) + '</span>';
+        }
+        if (key === 'confirm') {
+            return '<span class="label label-primary">' + escapeHtml(text) + '</span>';
+        }
+        return escapeHtml(text);
+    }
+
+    function formatStatusBadge(row) {
+        var text = row.status_text || '';
+        var status = row.status || '';
+        if (!text) {
+            var retryCount = parseInt(row.retry_count, 10) || 0;
+            if (status === 'success') {
+                text = '成功';
+            } else if (status === 'failed') {
+                text = '失败';
+            } else if (status === 'pending') {
+                text = retryCount > 0 ? '待重试' : '处理中';
+            } else {
+                text = status || '-';
+            }
+        }
+        if (status === 'success') {
+            return '<span class="label label-success">' + escapeHtml(text) + '</span>';
+        }
+        if (status === 'failed') {
+            return '<span class="label label-danger">' + escapeHtml(text) + '</span>';
+        }
+        if (status === 'pending') {
+            var pendingClass = (parseInt(row.retry_count, 10) || 0) > 0 ? 'label-warning' : 'label-default';
+            return '<span class="label ' + pendingClass + '">' + escapeHtml(text) + '</span>';
+        }
+        return escapeHtml(text);
+    }
+
+    function formatJsonText(raw) {
+        if (!raw) {
+            return '（无）';
+        }
+        try {
+            return JSON.stringify(JSON.parse(raw), null, 2);
+        } catch (e) {
+            return raw;
+        }
+    }
+
+    function formatDatetime(value) {
+        return value ? Table.api.formatter.datetime(value) : '-';
+    }
+
     var Controller = {
         index: function () {
+            var $page = $('.wx-sync-page');
+            var $statusFilter = $('#wx-sync-status-filter');
+            var $typeFilter = $('#wx-sync-type-filter');
+            var $orderSnFilter = $('#wx-sync-order-sn-filter');
+
             Table.api.init({
                 extend: {
                     index_url: 'shopro_wechat_trade/sync/index',
@@ -8,56 +82,214 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                 }
             });
 
-            var table = $("#table");
+            var table = $('#table');
+
+            function highlightStat(status) {
+                $page.find('.stat-item').removeClass('stat-item-active');
+                $page.find('.stat-item[data-status="' + (status || '') + '"]').addClass('stat-item-active');
+            }
+
+            function refreshTable() {
+                table.bootstrapTable('refresh', { pageNumber: 1 });
+            }
+
+            function applyStatusFilter(status) {
+                $statusFilter.val(status || '');
+                highlightStat(status || '');
+                refreshTable();
+            }
+
             table.bootstrapTable({
                 url: $.fn.bootstrapTable.defaults.extend.index_url,
                 pk: 'id',
                 sortName: 'id',
                 sortOrder: 'desc',
+                search: false,
+                commonSearch: false,
+                showExport: false,
                 queryParams: function (params) {
-                    params.status = $('#status-filter').val();
+                    params.status = $statusFilter.val();
+                    params.sync_type = $typeFilter.val();
+                    params.order_sn = $.trim($orderSnFilter.val());
                     return params;
                 },
                 columns: [
-                    { field: 'id', title: 'ID' },
-                    { field: 'order_sn', title: '订单号' },
-                    { field: 'sync_type', title: '类型' },
-                    { field: 'status', title: '状态' },
-                    { field: 'delivery_mode', title: '发货模式' },
-                    { field: 'errcode', title: 'errcode' },
-                    { field: 'errmsg', title: 'errmsg' },
-                    { field: 'retry_count', title: '重试次数' },
+                    { field: 'id', title: 'ID', width: 70 },
+                    {
+                        field: 'order_sn',
+                        title: '订单号',
+                        formatter: function (value, row) {
+                            if (!value) {
+                                return '-';
+                            }
+                            if (row.order_id) {
+                                return '<a href="javascript:;" class="btn-link btn-order" data-id="' + row.order_id + '">' + escapeHtml(value) + '</a>';
+                            }
+                            return escapeHtml(value);
+                        }
+                    },
+                    {
+                        field: 'sync_type_text',
+                        title: '类型',
+                        escape: false,
+                        formatter: function (value, row) {
+                            return formatSyncTypeBadge(row);
+                        }
+                    },
+                    {
+                        field: 'status_text',
+                        title: '状态',
+                        escape: false,
+                        formatter: function (value, row) {
+                            return formatStatusBadge(row);
+                        }
+                    },
+                    {
+                        field: 'delivery_mode_text',
+                        title: '发货模式',
+                        formatter: function (value, row) {
+                            if ((row.sync_type || '') !== 'shipping') {
+                                return '<span class="text-muted">-</span>';
+                            }
+                            return escapeHtml(value || '-');
+                        }
+                    },
+                    {
+                        field: 'error_text',
+                        title: '错误信息',
+                        formatter: function (value, row) {
+                            if (row.status === 'success' || value === '-') {
+                                return '<span class="text-muted">-</span>';
+                            }
+                            return escapeHtml(value || '-');
+                        }
+                    },
+                    {
+                        field: 'retry_count',
+                        title: '重试次数',
+                        width: 90,
+                        formatter: function (value, row) {
+                            if (row.status === 'success') {
+                                return '<span class="text-muted">-</span>';
+                            }
+                            return value || 0;
+                        }
+                    },
                     {
                         field: 'createtime',
                         title: '创建时间',
-                        formatter: function (value) {
-                            return value ? Table.api.formatter.datetime(value) : '';
-                        }
+                        formatter: formatDatetime
                     },
                     {
                         field: 'operate',
                         title: '操作',
+                        width: 140,
+                        escape: false,
                         table: table,
                         events: Table.api.events.operate,
                         formatter: function (value, row) {
-                            if (row.status === 'success') {
-                                return '-';
+                            var html = [];
+                            html.push('<a href="javascript:;" class="btn btn-xs btn-info btn-detail" data-id="' + row.id + '">详情</a>');
+                            if (row.status !== 'success') {
+                                html.push(' <a href="javascript:;" class="btn btn-xs btn-warning btn-retry" data-id="' + row.id + '">重试</a>');
                             }
-                            return '<a href="javascript:;" class="btn btn-xs btn-warning btn-retry" data-id="' + row.id + '">重试</a>';
+                            return html.join('');
                         }
                     }
                 ]
             });
 
-            $('#status-filter').on('change', function () {
-                table.bootstrapTable('refresh');
+            $page.on('click', '.stat-item', function () {
+                applyStatusFilter($(this).data('status') || '');
+            });
+
+            $statusFilter.on('change', function () {
+                highlightStat($(this).val() || '');
+                refreshTable();
+            });
+
+            $typeFilter.on('change', refreshTable);
+
+            $page.on('click', '#wx-sync-btn-search', function (e) {
+                e.preventDefault();
+                refreshTable();
+            });
+
+            $page.on('click', '#wx-sync-btn-reset', function (e) {
+                e.preventDefault();
+                $statusFilter.val('');
+                $typeFilter.val('');
+                $orderSnFilter.val('');
+                highlightStat('');
+                refreshTable();
+            });
+
+            $page.on('click', '#wx-sync-btn-failed', function (e) {
+                e.preventDefault();
+                applyStatusFilter('failed');
+                $typeFilter.val('');
+            });
+
+            $orderSnFilter.on('keypress', function (e) {
+                if (e.which === 13) {
+                    e.preventDefault();
+                    refreshTable();
+                }
+            });
+
+            table.on('click', '.btn-order', function () {
+                Fast.api.open('shopro/order/order/detail?id=' + $(this).data('id'), '订单详情');
             });
 
             table.on('click', '.btn-retry', function () {
                 var id = $(this).data('id');
+                Layer.confirm('将重新向微信发起同步请求，是否继续？', { icon: 3, title: '确认重试' }, function (index) {
+                    Layer.close(index);
                     $.post('shopro_wechat_trade/sync/retry', { id: id }, function (ret) {
                         Backend.api.toastr[ret.code === 1 ? 'success' : 'error'](ret.msg);
-                    table.bootstrapTable('refresh');
+                        refreshTable();
+                    });
+                });
+            });
+
+            table.on('click', '.btn-detail', function () {
+                var id = $(this).data('id');
+                $.get('shopro_wechat_trade/sync/detail', { id: id }, function (ret) {
+                    if (ret.code !== 1) {
+                        Backend.api.toastr.error(ret.msg || '加载失败');
+                        return;
+                    }
+                    var row = ret.data || {};
+                    var $tpl = $('#sync-detail-template').clone().removeAttr('id').removeClass('hide');
+                    $tpl.find('.detail-id').text(row.id || '-');
+                    $tpl.find('.detail-order-sn').text(row.order_sn || '-');
+                    $tpl.find('.detail-sync-type').html(formatSyncTypeBadge(row));
+                    $tpl.find('.detail-status').html(formatStatusBadge(row));
+                    if (row.sync_type === 'shipping') {
+                        $tpl.find('.detail-delivery-mode').text(row.delivery_mode_text || DELIVERY_MODE_MAP[row.delivery_mode] || '-');
+                        $tpl.find('.detail-delivery-mode-row').show();
+                    } else {
+                        $tpl.find('.detail-delivery-mode-row').hide();
+                    }
+                    $tpl.find('.detail-retry').text(row.retry_count || 0);
+                    if (row.status === 'success') {
+                        $tpl.find('.detail-error-row').hide();
+                    } else {
+                        $tpl.find('.detail-error').text(row.error_text && row.error_text !== '-' ? row.error_text : '-');
+                        $tpl.find('.detail-error-row').show();
+                    }
+                    $tpl.find('.detail-create').text(formatDatetime(row.createtime));
+                    $tpl.find('.detail-update').text(formatDatetime(row.updatetime));
+                    $tpl.find('.detail-request').text(formatJsonText(row.request_payload));
+                    $tpl.find('.detail-response').text(formatJsonText(row.response_payload));
+
+                    Layer.open({
+                        type: 1,
+                        title: '同步记录详情 #' + row.id,
+                        area: ['720px', '80%'],
+                        shadeClose: true,
+                        content: $tpl.prop('outerHTML')
+                    });
                 });
             });