交换订单优化

src/views/order/ChangeOrderDetailnew.vue

@@ -59,12 +59,12 @@
           <el-form-item label="订单编号：">
             <div>{{ itemContent && itemContent.userCommitOrderInfo.distributionOrderId || '-' }}</div>
           </el-form-item>
-          <el-form-item label="商品ID：">
+          <!--          <el-form-item label="商品ID：">
             <div>{{ itemContent && itemContent.userCommitOrderInfo.itemVoList[0].itemId || '-' }}</div>
           </el-form-item>
           <el-form-item label="商品名称：">
             <div>{{ itemContent && itemContent.userCommitOrderInfo.itemVoList[0].name || '-' }}</div>
-          </el-form-item>
+          </el-form-item>-->
         </el-form>
         <el-form ref="addInviteRef" label-width="140px" style="width: 30%">
           <el-form-item label="用户昵称：">
@@ -76,9 +76,9 @@
           <el-form-item label="用户寄出物流信息：">
             <div>{{ itemContent && itemContent.userCommitOrderInfo.fromWaybill|| '-' }}</div>
           </el-form-item>
-          <el-form-item label="商品价格：">
+          <!--          <el-form-item label="商品价格：">
             <div>{{ itemContent && itemContent.userCommitOrderInfo.itemVoList[0].distributionPrice || '-' }}</div>
-          </el-form-item>
+          </el-form-item>-->
         </el-form>
         <el-form ref="addInviteRef" label-width="140px" style="width: 30%">
           <el-form-item label="订单生成时间：">
@@ -90,20 +90,11 @@
           <el-form-item label="平台寄出物流信息：">
             <div>{{ itemContent && itemContent.userCommitOrderInfo.waybill || '-' }}</div>
           </el-form-item>
-          <el-form-item label="官方估价：">
-            <div>{{ itemContent && itemContent.userCommitOrderInfo.itemVoList[0].officialEstimatedPrice || '-' }}</div>
-          </el-form-item>
         </el-form>
 
       </div>
-      <div class="user_info flex" >
-        <el-form ref="addInviteRef" label-width="120px" >
-          <el-form-item label="商品详情：">
-            <div>{{ itemContent && itemContent.userCommitOrderInfo.itemVoList[0].description || '-' }}</div>
-          </el-form-item>
-
-          <el-form-item label="商品图片/视频："/>
-        </el-form>
+      <div v-if="itemContent && itemContent.userCommitOrderInfo.itemVoList" class="user_info flex" >
+        <ExchangeItemListView :item-list="itemContent.userCommitOrderInfo.itemVoList"/>
       </div>
     </el-card>
 
@@ -134,12 +125,6 @@
           <el-form-item label="订单编号：">
             <div>{{ itemContent && itemContent.receiveTargetOrderInfo.distributionOrderId || '-' }}</div>
           </el-form-item>
-          <el-form-item label="商品ID：">
-            <div>{{ itemContent && itemContent.receiveTargetOrderInfo.itemVoList[0].itemId || '-' }}</div>
-          </el-form-item>
-          <el-form-item label="商品名称：">
-            <div>{{ itemContent && itemContent.receiveTargetOrderInfo.itemVoList[0].name || '-' }}</div>
-          </el-form-item>
         </el-form>
         <el-form ref="addInviteRef" label-width="140px" style="width: 30%">
           <el-form-item label="用户昵称：">
@@ -151,9 +136,6 @@
           <el-form-item label="用户寄出物流信息：">
             <div>{{ itemContent && itemContent.receiveTargetOrderInfo.fromWaybill|| '-' }}</div>
           </el-form-item>
-          <el-form-item label="商品价格：">
-            <div>{{ itemContent && itemContent.receiveTargetOrderInfo.itemVoList[0].distributionPrice || '-' }}</div>
-          </el-form-item>
         </el-form>
         <el-form ref="addInviteRef" label-width="140px" style="width: 30%">
           <el-form-item label="订单生成时间：">
@@ -165,26 +147,11 @@
           <el-form-item label="平台寄出物流信息：">
             <div>{{ itemContent && itemContent.receiveTargetOrderInfo.waybill || '-' }}</div>
           </el-form-item>
-          <el-form-item label="官方估价：">
-            <div>{{ itemContent && itemContent.receiveTargetOrderInfo.itemVoList[0].officialEstimatedPrice || '-' }}</div>
-          </el-form-item>
         </el-form>
 
       </div>
-      <div class="user_info flex" >
-        <el-form ref="addInviteRef" label-width="120px" >
-          <el-form-item label="商品详情：">
-            <div>{{ itemContent && itemContent.receiveTargetOrderInfo.itemVoList[0].description || '-' }}</div>
-          </el-form-item>
-          <el-form-item label="商品图片/视频：">
-            <div v-if="itemContent && itemContent.imagelist && (typeof itemContent.imagelist === 'object')" class="image">
-              <div v-for="item in itemContent.receiveTargetOrderInfo.imagelist" :key="item.url" class="image_item" @click="handleShowLargeDialog(item.type, item.url, item.videoUrl)">
-                <img :src="item.url" class="image_item_content" >
-                <img v-if="item.type === 1" class="image_content_video_icon" src="https://cdn.wanwudezhi.com/static/web-static/image/10651432d8c28651da81753c260d81b3_120x120.png">
-              </div>
-            </div>
-          </el-form-item>
-        </el-form>
+      <div v-if="itemContent && itemContent.receiveTargetOrderInfo.itemVoList" class="user_info flex" >
+        <ExchangeItemListView :item-list="itemContent.receiveTargetOrderInfo.itemVoList"/>
       </div>
     </el-card>
     <NoPassIdentifyDialog

src/views/order/components/exchangeItemListView.vue

 <template>
-  <div/>
+  <div class="exchange_list">
+    <el-table :data="itemList" size="small" border fit highlight-current-row>
+      <el-table-column type="expand">
+        <template slot-scope="props">
+          <el-form label-position="left" class="table-expand">
+            <el-form-item v-if="props.row.images" label="藏品图片">
+              <div class="image_list">
+                <div v-for="pic in props.row.images.split(';')" :key="pic">
+                  <el-image
+                    :preview-src-list="[pic]"
+                    :src="pic"
+                    class="table-td-thumb"
+                  />
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item label="详情">
+              <span>{{ props.row.description }}</span>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" min-width="200" label="商品ID" prop="itemId"/>
+      <el-table-column align="center" min-width="200" label="名称" prop="name">
+        <template slot-scope="scope" >
+          <Line2Hidden :text="scope.row.name" />
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" property="homePageImage" label="图片">
+        <template slot-scope="scope">
+          <div v-if="scope.row.images && scope.row.images.split(';').length > 0" class="image_preview">
+            <el-image
+              :preview-src-list="[scope.row.images.split(';')[0]]"
+              :src="scope.row.images.split(';')[0]"
+              class="table-td-thumb"
+            />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="售价" min-width="200" prop="distributionPrice">
+        <template slot-scope="scope">
+          <span class="tooltip-span">{{ `${scope.row.distributionPrice ? `¥ ${scope.row.distributionPrice}` : '-'}` }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="官方估价" min-width="200" prop="officialEstimatedPrice">
+        <template slot-scope="scope">
+          <span class="tooltip-span">{{ `${scope.row.officialEstimatedPrice ? `¥ ${scope.row.officialEstimatedPrice}` : '-'}` }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 
 </template>
 
 <script>
+import Line2Hidden from '@/components/line2Hidden'
 export default {
   name: 'ExchangeItemListView',
+  components: {
+    Line2Hidden
+  },
   props: {
     itemList: {
       type: Array,
@@ -13,10 +68,39 @@ export default {
         return []
       }
     }
+  },
+  data() {
+    return {
+      imageUrl: '',
+      showLargeDialog: false
+    }
+  },
+  methods: {
+    handleShowLargeDialog(imageUrl) {
+      this.imageUrl = imageUrl
+      this.showLargeDialog = true
+    }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.exchange_list {
+  padding: 10px;
+  margin-left: 20px;
+}
+.table-expand {
+  margin-left: 10px;
+}
+.image_list {
+  display: flex;
+  flex-direction: row;
+}
+
+.table-td-thumb {
+  width: 60px;
+  height: 60px;
+  margin-right: 10px;
+}
 
 </style>