From 4c627e7f2694ddd84be12e7aa25ceb358e8ca052 Mon Sep 17 00:00:00 2001
From: van <van333@foxmail.com>
Date: Tue, 7 Apr 2026 17:40:44 +0800
Subject: [PATCH] 1

---
 src/views/system/jdorder/orderList.vue | 210 +++++++++++++++++++++----
 1 file changed, 179 insertions(+), 31 deletions(-)

diff --git a/src/views/system/jdorder/orderList.vue b/src/views/system/jdorder/orderList.vue
index 8c3d621..abb6424 100644
--- a/src/views/system/jdorder/orderList.vue
+++ b/src/views/system/jdorder/orderList.vue
@@ -168,7 +168,7 @@
 
       <!-- 表格区域 -->
       <template #table>
-        <div class="jd-order-table-page">
+        <div class="jd-order-table-page" :class="{ 'jd-order-table-page--mobile': isMobile }">
         <!-- 移动端卡片列表 -->
         <div v-if="isMobile" class="mobile-order-list" v-loading="loading">
           <div class="profit-summary-bar mobile-profit-summary">
@@ -179,20 +179,27 @@
             v-for="row in list" 
             :key="row.id" 
             class="mobile-order-card"
+            :class="{ 'is-expanded': mobileExpandedOrderId === row.id }"
           >
-            <!-- 卡片头部 -->
+            <!-- 卡片头部：点击左侧展开/收起详情 -->
             <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 class="header-left header-left--tappable" @click="toggleMobileOrderExpand(row)">
+                <i
+                  class="mobile-card-chevron el-icon-arrow-right"
+                  :class="{ 'is-open': mobileExpandedOrderId === row.id }"
+                  aria-hidden="true"
+                />
+                <div class="header-title-block">
+                  <div class="order-id">{{ row.remark || row.orderId }}</div>
+                  <el-tag 
+                    v-if="row.orderStatus != null"
+                    :type="getOrderStatusType(row.orderStatus)" 
+                    size="mini">
+                    {{ getOrderStatusText(row.orderStatus) }}
+                  </el-tag>
+                </div>
               </div>
-              <div class="header-right">
+              <div class="header-right" @click.stop>
                 <el-dropdown 
                   trigger="click" 
                   placement="left"
@@ -203,7 +210,8 @@
                     size="mini" 
                     icon="el-icon-more"
                     circle
-                    class="mobile-action-btn">
+                    class="mobile-action-btn"
+                    @click.stop>
                   </el-button>
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item 
@@ -274,9 +282,17 @@
                 </el-dropdown>
               </div>
             </div>
-            
-            <!-- 卡片内容 -->
-            <div class="card-content">
+
+            <div
+              v-show="mobileExpandedOrderId !== row.id"
+              class="card-summary-compact"
+              @click="toggleMobileOrderExpand(row)"
+            >
+              <span class="card-summary-line">{{ row.modelNumber || '—' }} · 付{{ toYuan(row.paymentAmount) }} · 返{{ toYuan(row.rebateAmount) }}<template v-if="row.distributionMark"> · {{ row.distributionMark }}</template></span>
+            </div>
+
+            <el-collapse-transition>
+            <div v-show="mobileExpandedOrderId === row.id" class="card-content">
               <div class="field-row">
                 <span class="field-label">订单号</span>
                 <span class="field-value">{{ row.orderId }}</span>
@@ -305,27 +321,31 @@
                 <span class="field-label">后返金额</span>
                 <span class="field-value amount">{{ toYuan(row.rebateAmount) }}</span>
               </div>
-              <div class="field-row" v-if="row.distributionMark === 'F'">
+              <div class="field-row field-row--pricing" v-if="row.distributionMark === 'F'">
                 <span class="field-label">售价渠道</span>
-                <span class="field-value">
-                  <el-select v-model="row.sellingPriceType" placeholder="渠道" size="mini" clearable style="width: 120px;" @change="onOrderSellingPriceTypeChange(row)">
+                <span class="field-value field-value--pricing-control">
+                  <el-select v-model="row.sellingPriceType" placeholder="渠道" size="small" clearable class="mobile-pricing-select" @change="onOrderSellingPriceTypeChange(row)">
                     <el-option label="直款" value="direct" />
                     <el-option label="闲鱼" value="xianyu" />
                   </el-select>
                 </span>
               </div>
-              <div class="field-row" v-if="row.distributionMark === 'F'">
+              <div class="field-row field-row--pricing" v-if="row.distributionMark === 'F'">
                 <span class="field-label">售价</span>
-                <span class="field-value">
-                  <el-input-number v-model="row.sellingPrice" :min="0" :step="1" :precision="2" size="mini" controls-position="right" style="width: 152px;" @change="onOrderSellingPriceChange(row)" />
-                  <el-tag v-if="row.sellingPriceManual === 1" type="info" size="mini" style="margin-left: 6px;">手填</el-tag>
+                <span class="field-value field-value--pricing-control">
+                  <div class="mobile-pricing-num-wrap">
+                    <el-input-number v-model="row.sellingPrice" :min="0" :step="1" :precision="2" size="small" controls-position="right" class="mobile-pricing-input" @change="onOrderSellingPriceChange(row)" />
+                    <el-tag v-if="row.sellingPriceManual === 1" type="info" size="mini" class="mobile-pricing-tag">手填</el-tag>
+                  </div>
                 </span>
               </div>
-              <div class="field-row" v-if="row.distributionMark === 'F' || row.distributionMark === 'H-TF'">
+              <div class="field-row field-row--pricing" v-if="row.distributionMark === 'F' || row.distributionMark === 'H-TF'">
                 <span class="field-label">利润</span>
-                <span class="field-value">
-                  <el-input-number v-model="row.profit" :step="0.01" :precision="2" size="mini" controls-position="right" style="width: 120px;" @change="onOrderProfitChange(row)" />
-                  <el-tag v-if="row.profitManual === 1" type="warning" size="mini" style="margin-left: 6px;">手填</el-tag>
+                <span class="field-value field-value--pricing-control">
+                  <div class="mobile-pricing-num-wrap">
+                    <el-input-number v-model="row.profit" :step="0.01" :precision="2" size="small" controls-position="right" class="mobile-pricing-input" @change="onOrderProfitChange(row)" />
+                    <el-tag v-if="row.profitManual === 1" type="warning" size="mini" class="mobile-pricing-tag">手填</el-tag>
+                  </div>
                 </span>
               </div>
               <div class="field-row" v-else-if="row.profit != null && row.profit !== ''">
@@ -417,6 +437,7 @@
                 <span class="field-value">{{ row.status }}</span>
               </div>
             </div>
+            </el-collapse-transition>
           </div>
           
           <el-empty v-if="!loading && list.length === 0" description="暂无数据" :image-size="100" />
@@ -1153,7 +1174,9 @@ export default {
       // 选中的行数据
       selectedRows: [],
       // 列表加载后自动同步利润（防快速翻页乱序）
-      syncAutoProfitSeq: 0
+      syncAutoProfitSeq: 0,
+      /** 移动端卡片：当前展开的订单 id（null 表示全部收起，同时只展开一条） */
+      mobileExpandedOrderId: null
     }
   },
   computed: {
@@ -1320,6 +1343,13 @@ export default {
       const list = (res.rows || res.data || [])
       this.list = list.map(item => this.normalizeOrderListItem(item))
       this.total = res.total || 0
+      if (this.isMobile) {
+        this.mobileExpandedOrderId = null
+      }
+    },
+    toggleMobileOrderExpand(row) {
+      if (!row || row.id == null) return
+      this.mobileExpandedOrderId = this.mobileExpandedOrderId === row.id ? null : row.id
     },
     /** 本页数据与库中规则对齐：仅未锁定利润的订单可能写库；有更新则静默拉一次列表（不再递归同步） */
     runSyncAutoProfitAfterListLoad() {
@@ -3391,6 +3421,22 @@ export default {
   flex-shrink: 0;
 }
 
+/* 移动端：表格区占满中间高度，列表在内部滚动，避免只能看到极少卡片 */
+.jd-order-table-page--mobile {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.jd-order-table-page--mobile .mobile-order-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* 移动端卡片列表样式 */
 .mobile-order-list {
   padding: 12px;
@@ -3423,19 +3469,42 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
-  padding-bottom: 12px;
+  margin-bottom: 0;
+  padding-bottom: 10px;
   border-bottom: 1px solid #f0f0f0;
 }
 
-.mobile-order-card .header-left {
+.mobile-order-card .header-left.header-left--tappable {
   flex: 1;
   display: flex;
   align-items: center;
+  gap: 10px;
+  min-width: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+}
+
+.mobile-order-card .header-title-block {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
   flex-wrap: wrap;
   gap: 8px;
 }
 
+.mobile-order-card .mobile-card-chevron {
+  flex-shrink: 0;
+  font-size: 15px;
+  color: #909399;
+  transition: transform 0.2s ease;
+}
+
+.mobile-order-card .mobile-card-chevron.is-open {
+  transform: rotate(90deg);
+}
+
 .mobile-order-card .order-id {
   font-size: 16px;
   font-weight: 600;
@@ -3447,12 +3516,35 @@ export default {
   margin-left: 12px;
 }
 
+.mobile-order-card .card-summary-compact {
+  padding: 10px 0 2px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+}
+
+.mobile-order-card .card-summary-line {
+  display: block;
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .mobile-order-card .card-content {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
+.mobile-order-card.is-expanded .card-content {
+  margin-top: 10px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
 .mobile-order-card .field-row {
   display: flex;
   justify-content: space-between;
@@ -3485,6 +3577,62 @@ export default {
   color: #e6a23c;
 }
 
+/* 移动端卡片：售价渠道 / 售价 / 利润 纵向全宽，便于点选 */
+.mobile-order-card .field-row--pricing {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  min-height: 0;
+  padding: 4px 0 12px;
+}
+
+.mobile-order-card .field-row--pricing .field-label {
+  margin-right: 0;
+  min-width: 0;
+  text-align: left;
+  font-weight: 500;
+  color: #606266;
+}
+
+.mobile-order-card .field-row--pricing .field-value--pricing-control {
+  text-align: left;
+  flex: none;
+  width: 100%;
+}
+
+.mobile-order-card .mobile-pricing-select {
+  width: 100%;
+}
+
+.mobile-order-card .mobile-pricing-select ::v-deep .el-input__inner {
+  height: 38px;
+  line-height: 38px;
+  font-size: 15px;
+}
+
+.mobile-order-card .mobile-pricing-num-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.mobile-order-card .mobile-pricing-num-wrap ::v-deep .mobile-pricing-input.el-input-number {
+  flex: 1;
+  min-width: 0;
+  width: auto !important;
+}
+
+.mobile-order-card .mobile-pricing-num-wrap ::v-deep .mobile-pricing-input .el-input__inner {
+  height: 38px;
+  line-height: 38px;
+  font-size: 15px;
+}
+
+.mobile-order-card .mobile-pricing-tag {
+  flex-shrink: 0;
+}
+
 .mobile-order-card .refund-status .field-value {
   display: flex;
   flex-wrap: wrap;