优化订单列表的界面显示效果

src/views/qw/companyCustomer/index.vue

@@ -125,7 +125,7 @@
 
     <!-- ========== 新增/编辑/详情 弹窗 ========== -->
     <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body :close-on-click-modal="false">
-      <!-- 内容不变，省略... -->
+      <!-- 内容不变-->
       <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="small">
         <!-- 第一行 -->
         <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px;">
@@ -331,7 +331,7 @@
             <el-button plain type="primary" icon="el-icon-plus" @click="handleAddGiftProduct">添加赠品</el-button>
           </div>
           <el-table border width="100%" style="margin-top:5px;" :data="giftProducts">
-            <!-- 赠品表格列省略... -->
+            <!-- 赠品表格列-->
             <el-table-column label="商品编号" align="center" prop="barCode" />
             <el-table-column label="商品图片" align="center" width="100">
               <template slot-scope="scope">
@@ -391,10 +391,13 @@
       <product-select ref="GiftDetails" @selectProduct="selectGiftProduct" />
     </el-dialog>
 
-    <!-- ========== 新增：客户订单列表弹窗 ========== -->
-    <el-dialog title="客户订单列表" :visible.sync="orderListDialogVisible" width="1200px" append-to-body :close-on-click-modal="false" @close="orderListClose">
+    <!-- 客户订单列表弹窗 -->
+    <el-dialog title="客户订单列表" :visible.sync="orderListDialogVisible" width="1400px" append-to-body :close-on-click-modal="false" @close="orderListClose">
       <!-- 搜索栏 -->
       <el-form :model="orderQueryParams" ref="orderQueryForm" :inline="true" label-width="80px" size="small">
+        <el-form-item label="订单号" prop="orderCode">
+          <el-input v-model="orderQueryParams.orderCode" placeholder="请输入订单号" clearable @keyup.enter.native="handleOrderQuery" />
+        </el-form-item>
         <el-form-item label="商品名称" prop="productName">
           <el-input v-model="orderQueryParams.productName" placeholder="请输入商品名称" clearable @keyup.enter.native="handleOrderQuery" />
         </el-form-item>
@@ -406,6 +409,18 @@
 
       <el-table v-loading="orderListLoading" :data="orderList" border>
         <el-table-column label="订单号" align="center" prop="orderCode" width="180" />
+        <el-table-column label="商品信息" align="center" min-width="280">
+          <template slot-scope="scope">
+            <div v-for="(item, idx) in scope.row.parsedItems" :key="idx" style="display: flex; align-items: center; margin-bottom: 8px;">
+              <el-popover placement="right" title="商品图片" trigger="hover">
+                <img :src="item.image" style="max-width: 120px; max-height: 120px;" />
+                <img slot="reference" :src="item.image" style="width: 40px; height: 40px; border-radius: 4px; margin-right: 8px; cursor: pointer;" />
+              </el-popover>
+              <span>{{ item.productName }} x {{ item.num }}</span>
+            </div>
+            <div v-if="!scope.row.parsedItems || scope.row.parsedItems.length === 0">-</div>
+          </template>
+        </el-table-column>
         <el-table-column label="订单状态" align="center" prop="status" width="100">
           <template slot-scope="scope">
             <span>{{ orderStatusFormat(scope.row.status) }}</span>
@@ -427,7 +442,7 @@
         </el-table-column>
         <el-table-column label="操作" align="center" width="120" fixed="right">
           <template slot-scope="scope">
-            <el-button size="mini" type="text" icon="el-icon-qrcode" v-if="scope.row.payType==='1'&&scope.row.paid===0" @click="handleGetQrCode(scope.row)">获取二维码</el-button>
+            <el-button size="mini" type="text" icon="el-icon-qrcode" v-if="scope.row.payType==='1' && scope.row.paid===0" @click="handleGetQrCode(scope.row)">获取二维码</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -591,6 +606,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
         companyCustomerId: null,
+        orderCode: null,
         productName: null
       },
       // 订单状态映射（根据后端 FsStoreOrderVO.status 字段）
@@ -1195,6 +1211,7 @@ export default {
       this.getOrderList();
     },
 
+    /** 获取订单列表 */
     /** 获取订单列表 */
     getOrderList() {
       this.orderListLoading = true;
@@ -1206,7 +1223,30 @@ export default {
         }
       });
       getOrderList(params).then(response => {
-        this.orderList = response.rows || [];
+        let rows = response.rows || [];
+        // 预处理每个订单的商品信息
+        rows = rows.map(order => {
+          let parsedItems = [];
+          if (order.items && order.items.length) {
+            parsedItems = order.items.map(item => {
+              let jsonInfo = {};
+              try {
+                jsonInfo = typeof item.jsonInfo === 'string' ? JSON.parse(item.jsonInfo) : item.jsonInfo;
+              } catch(e) {
+                console.warn('解析jsonInfo失败', e);
+              }
+              return {
+                productName: jsonInfo.productName || '未知商品',
+                image: jsonInfo.image || '',
+                num: item.num || 1,
+                sku: jsonInfo.sku || '',
+                price: jsonInfo.price || 0
+              };
+            });
+          }
+          return { ...order, parsedItems };
+        });
+        this.orderList = rows;
         this.orderTotal = response.total || 0;
         this.orderListLoading = false;
       }).catch(() => {
@@ -1224,6 +1264,7 @@ export default {
 
     /** 重置订单列表查询 */
     resetOrderQuery() {
+      this.orderQueryParams.orderCode = '';
       this.orderQueryParams.productName = '';
       this.handleOrderQuery();
     },