1

src/views/system/jdorder/components/TencentDocPushMonitor.vue

@@ -2,10 +2,12 @@
   <el-dialog
     title="腾讯文档推送监控"
     :visible.sync="visible"
-    width="1200px"
+    :width="isMobile ? '100%' : '1200px'"
     :close-on-click-modal="false"
     @close="handleClose"
-    top="5vh"
+    :top="isMobile ? '0' : '5vh'"
+    :fullscreen="isMobile"
+    :custom-class="isMobile ? 'mobile-push-monitor-dialog' : ''"
   >
     <div class="push-monitor">
       <!-- 倒计时和状态卡片 -->
@@ -57,6 +59,7 @@
               type="primary" 
               icon="el-icon-upload2" 
               :loading="pushing"
+              :size="isMobile ? 'small' : 'default'"
               @click="handleTriggerPushNow"
             >
               立即推送
@@ -65,12 +68,14 @@
               type="warning" 
               icon="el-icon-close" 
               :disabled="!pushStatus.isScheduled"
+              :size="isMobile ? 'small' : 'default'"
               @click="handleCancelPush"
             >
               取消推送
             </el-button>
             <el-button 
               icon="el-icon-refresh" 
+              :size="isMobile ? 'small' : 'default'"
               @click="loadPushStatus"
             >
               刷新状态
@@ -232,6 +237,17 @@ export default {
       refreshTimer: null
     }
   },
+  computed: {
+    isMobile() {
+      if (this.$store?.getters?.device === 'mobile') {
+        return true
+      }
+      if (typeof window !== 'undefined' && window.innerWidth < 768) {
+        return true
+      }
+      return false
+    }
+  },
   watch: {
     value(val) {
       this.visible = val
@@ -809,5 +825,141 @@ export default {
 .no-logs i {
   font-size: 18px;
 }
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .push-monitor {
+    gap: 12px;
+  }
+
+  .countdown-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 12px;
+  }
+
+  .countdown-header .header-left {
+    font-size: 16px;
+  }
+
+  .countdown-header .header-left i {
+    font-size: 20px;
+  }
+
+  .countdown-content {
+    padding: 20px 12px 12px;
+    gap: 15px;
+  }
+
+  .countdown-display {
+    font-size: 32px;
+    gap: 10px;
+  }
+
+  .time-box {
+    min-width: 60px;
+    padding: 8px 12px;
+  }
+
+  .time-value {
+    font-size: 32px;
+  }
+
+  .time-separator {
+    font-size: 24px;
+  }
+
+  .countdown-info {
+    gap: 8px;
+  }
+
+  .info-item {
+    font-size: 12px;
+    padding: 6px 12px;
+    flex-wrap: wrap;
+  }
+
+  .countdown-actions {
+    flex-direction: column;
+    width: 100%;
+    gap: 8px;
+  }
+
+  .countdown-actions .el-button {
+    width: 100%;
+    margin: 0;
+  }
+
+  .records-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .records-header .header-left {
+    font-size: 14px;
+  }
+
+  .record-summary {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .summary-left,
+  .summary-right {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .record-stats {
+    font-size: 12px;
+  }
+
+  .trigger-source,
+  .record-range,
+  .record-duration {
+    font-size: 12px;
+  }
+}
+
+/* 移动端全屏弹窗样式 */
+::v-deep .mobile-push-monitor-dialog {
+  margin: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+}
+
+::v-deep .mobile-push-monitor-dialog .el-dialog {
+  margin: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  border-radius: 0 !important;
+  display: flex;
+  flex-direction: column;
+}
+
+::v-deep .mobile-push-monitor-dialog .el-dialog__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  -webkit-overflow-scrolling: touch;
+}
+
+::v-deep .mobile-push-monitor-dialog .el-dialog__header {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e4e7ed;
+  flex-shrink: 0;
+}
+
+::v-deep .mobile-push-monitor-dialog .el-dialog__title {
+  font-size: 16px;
+}
 </style>
 

src/views/system/jdorder/orderList.vue

@@ -104,7 +104,191 @@
 
       <!-- 表格区域 -->
       <template #table>
-        <el-table 
+        <!-- 移动端卡片列表 -->
+        <div v-if="isMobile" class="mobile-order-list" v-loading="loading">
+          <div 
+            v-for="row in list" 
+            :key="row.id" 
+            class="mobile-order-card"
+          >
+            <!-- 卡片头部 -->
+            <div class="card-header">
+              <div class="header-left">
+                <div class="order-id">{{ row.remark || row.orderId }}</div>
+                <el-tag 
+                  v-if="row.orderStatus != null"
+                  :type="getOrderStatusType(row.orderStatus)" 
+                  size="mini"
+                  style="margin-left: 8px;">
+                  {{ getOrderStatusText(row.orderStatus) }}
+                </el-tag>
+              </div>
+              <div class="header-right">
+                <el-dropdown 
+                  trigger="click" 
+                  placement="left"
+                  @command="handleActionCommand"
+                  :popper-class="'mobile-action-dropdown'">
+                  <el-button 
+                    type="primary" 
+                    size="mini" 
+                    icon="el-icon-more"
+                    circle
+                    class="mobile-action-btn">
+                  </el-button>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item 
+                      :command="{action: 'copyOrderId', row: row}"
+                      icon="el-icon-copy-document">
+                      复制订单号
+                    </el-dropdown-item>
+                    <el-dropdown-item 
+                      v-if="row.thirdPartyOrderNo"
+                      :command="{action: 'copyThirdParty', row: row}"
+                      icon="el-icon-copy-document">
+                      复制第三方单号
+                    </el-dropdown-item>
+                    <el-dropdown-item 
+                      :command="{action: 'copyAddress', row: row}"
+                      icon="el-icon-copy-document">
+                      复制地址
+                    </el-dropdown-item>
+                    <el-dropdown-item 
+                      v-if="row.logisticsLink"
+                      :command="{action: 'copyLogistics', row: row}"
+                      icon="el-icon-copy-document">
+                      复制物流链接
+                    </el-dropdown-item>
+                    <el-dropdown-item 
+                      :command="{action: 'copyReturn', row: row}"
+                      icon="el-icon-document-copy">
+                      退货复制
+                    </el-dropdown-item>
+                    <el-dropdown-item 
+                      :command="{action: 'copyExcel', row: row}"
+                      icon="el-icon-document-copy"
+                      :class="{'is-copied': isExcelTextCopied(row.id)}">
+                      {{ isExcelTextCopied(row.id) ? '✓ 录单格式（已复制）' : '录单格式' }}
+                    </el-dropdown-item>
+                    <el-dropdown-item 
+                      :command="{action: 'copyRebate', row: row}"
+                      icon="el-icon-document-copy">
+                      后返录表
+                    </el-dropdown-item>
+                    <el-dropdown-item 
+                      :command="{action: 'fetchLogistics', row: row}"
+                      icon="el-icon-truck"
+                      style="color: #67C23A;">
+                      获取物流
+                    </el-dropdown-item>
+                    <el-dropdown-item divided>
+                      <div style="display: flex; align-items: center; justify-content: space-between; padding: 0 10px;">
+                        <span>统计</span>
+                        <el-switch
+                          v-model="row.isCountEnabled"
+                          :active-value="1"
+                          :inactive-value="0"
+                          @change="handleCountEnabledChange(row)"
+                          size="mini"
+                          style="margin-left: 10px;">
+                        </el-switch>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item 
+                      :command="{action: 'delete', row: row}"
+                      icon="el-icon-delete"
+                      divided
+                      style="color: #f56c6c;">
+                      删除
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+            </div>
+            
+            <!-- 卡片内容 -->
+            <div class="card-content">
+              <div class="field-row">
+                <span class="field-label">订单号</span>
+                <span class="field-value">{{ row.orderId }}</span>
+              </div>
+              <div class="field-row" v-if="row.thirdPartyOrderNo">
+                <span class="field-label">第三方单号</span>
+                <span class="field-value">{{ row.thirdPartyOrderNo }}</span>
+              </div>
+              <div class="field-row">
+                <span class="field-label">标记</span>
+                <span class="field-value">{{ row.distributionMark || '-' }}</span>
+              </div>
+              <div class="field-row">
+                <span class="field-label">型号</span>
+                <span class="field-value">{{ row.modelNumber || '-' }}</span>
+              </div>
+              <div class="field-row">
+                <span class="field-label">地址</span>
+                <span class="field-value address-text">{{ row.address || '-' }}</span>
+              </div>
+              <div class="field-row">
+                <span class="field-label">付款金额</span>
+                <span class="field-value amount">{{ toYuan(row.paymentAmount) }}</span>
+              </div>
+              <div class="field-row">
+                <span class="field-label">后返金额</span>
+                <span class="field-value amount">{{ toYuan(row.rebateAmount) }}</span>
+              </div>
+              <div class="field-row">
+                <span class="field-label">下单人</span>
+                <span class="field-value">{{ row.buyer || '-' }}</span>
+              </div>
+              
+              <!-- 退款状态 -->
+              <div class="field-row refund-status">
+                <span class="field-label">退款状态</span>
+                <div class="field-value status-tags">
+                  <el-tag 
+                    :type="row.isRefunded === 1 ? 'warning' : 'info'" 
+                    size="mini"
+                    @click.native="toggleRefunded(row)"
+                    style="cursor: pointer; margin-right: 8px;">
+                    {{ row.isRefunded === 1 ? '已退款' : '未退款' }}
+                  </el-tag>
+                  <el-tag 
+                    :type="row.isRefundReceived === 1 ? 'success' : 'info'" 
+                    size="mini"
+                    @click.native="toggleRefundReceived(row)"
+                    style="cursor: pointer; margin-right: 8px;">
+                    {{ row.isRefundReceived === 1 ? '退款到账' : '未到账' }}
+                  </el-tag>
+                  <el-tag 
+                    :type="row.isRebateReceived === 1 ? 'success' : 'info'" 
+                    size="mini"
+                    @click.native="toggleRebateReceived(row)"
+                    style="cursor: pointer;">
+                    {{ row.isRebateReceived === 1 ? '后返到账' : '未到账' }}
+                  </el-tag>
+                </div>
+              </div>
+              
+              <div class="field-row">
+                <span class="field-label">创建时间</span>
+                <span class="field-value">{{ parseTime(row.createTime) }}</span>
+              </div>
+              <div class="field-row" v-if="row.finishTime">
+                <span class="field-label">完成时间</span>
+                <span class="field-value">{{ parseTime(row.finishTime) }}</span>
+              </div>
+              <div class="field-row" v-if="row.status">
+                <span class="field-label">备注/状态</span>
+                <span class="field-value">{{ row.status }}</span>
+              </div>
+            </div>
+          </div>
+          
+          <el-empty v-if="!loading && list.length === 0" description="暂无数据" :image-size="100" />
+        </div>
+        
+        <!-- 桌面端表格 -->
+        <el-table v-else 
           :data="list" 
           v-loading="loading" 
           border 
@@ -666,7 +850,13 @@ export default {
       return false
     },
     actionButtons() {
-      // 移动端按钮组，不包含批量复制相关按钮
+      // 移动端只保留推送监控按钮
+      if (this.isMobile) {
+        return [
+          { key: 'monitor', label: '推送监控', type: 'info', icon: 'el-icon-monitor', handler: () => { this.showPushMonitor = true } }
+        ]
+      }
+      // 桌面端显示所有按钮
       return [
         { key: 'export', label: '导出', type: 'warning', icon: 'el-icon-download', handler: () => this.handleExport() },
         { key: 'config', label: '腾峰文档配置', type: 'success', icon: 'el-icon-setting', handler: () => { this.showAutoWriteConfig = true } },
@@ -2046,6 +2236,115 @@ export default {
   box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
 }
 
+/* 移动端卡片列表样式 */
+.mobile-order-list {
+  padding: 12px;
+  background: #f5f5f5;
+  min-height: 300px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mobile-order-card {
+  background: #fff;
+  border-radius: 12px;
+  margin-bottom: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.mobile-order-card:active {
+  transform: scale(0.98);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+}
+
+.mobile-order-card:last-child {
+  margin-bottom: 0;
+}
+
+.mobile-order-card .card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.mobile-order-card .header-left {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.mobile-order-card .order-id {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.mobile-order-card .header-right {
+  flex-shrink: 0;
+  margin-left: 12px;
+}
+
+.mobile-order-card .card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mobile-order-card .field-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  min-height: 24px;
+}
+
+.mobile-order-card .field-label {
+  font-size: 13px;
+  color: #909399;
+  min-width: 80px;
+  flex-shrink: 0;
+  margin-right: 12px;
+}
+
+.mobile-order-card .field-value {
+  flex: 1;
+  font-size: 14px;
+  color: #303133;
+  text-align: right;
+  word-break: break-all;
+}
+
+.mobile-order-card .field-value.address-text {
+  font-weight: 500;
+}
+
+.mobile-order-card .field-value.amount {
+  font-weight: 600;
+  color: #e6a23c;
+}
+
+.mobile-order-card .refund-status .field-value {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+  align-items: center;
+}
+
+.mobile-order-card .status-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: flex-end;
+}
+
 /* 移动端操作按钮样式 - 只在移动端生效 */
 @media (max-width: 768px) {
   .mobile-action-wrapper {
@@ -2096,6 +2395,11 @@ export default {
   .order-table ::v-deep .el-table__fixed-right-patch {
     width: 60px !important;
   }
+  
+  /* 隐藏桌面端表格 */
+  .order-table {
+    display: none;
+  }
 }
 
 /* 桌面端操作按钮优化布局 - 所有按钮一行显示 */