feat:添加预览

src/views/sale/itemList.vue

@@ -35,7 +35,15 @@
       <el-table-column align="center" min-width="100px" prop="id" label="商品ID" />
       <el-table-column align="center" label="封面图" prop="itemImg">
         <template slot-scope="scope">
-          <img v-if="scope.row.images" :src="scope.row.images.split(';')[0]" width="60px" height="60px">
+          <!--          <img v-if="scope.row.images" :src="scope.row.images.split(';')[0]" width="60px" height="60px" @click="handleShowPreview(scope.row.images)">-->
+          <div class="image_preivew">
+            <el-image
+              :preview-src-list="scope.row.images.split(';')"
+              :src="scope.row.images.split(';')[0]"
+              class="table-td-thumb"
+            />
+          </div>
+
         </template>
       </el-table-column>
 
@@ -95,6 +103,9 @@
       :page.sync="listQuery.page"
       :limit.sync="listQuery.limit"
       @pagination="getList" />
+    <ImagePreview
+      v-if="isShowPreview"
+      :imglist="imagesPreviewList"/>
 
   </div>
 </template>
@@ -146,7 +157,9 @@ export default {
       finishSettlementDialogShow: false,
       // 取消
       cancelConsignDialogShow: false,
-      currentSaleId: ''
+      isShowPreview: false,
+      currentSaleId: '',
+      imagesPreviewList: []
     }
   },
   created() {
@@ -172,6 +185,12 @@ export default {
           })
         })
     },
+    handleShowPreview(images) {
+      if (images) {
+        this.imagesPreviewList = images.split(';')
+        this.isShowPreview = true
+      }
+    },
     handleCreate() {
       this.$router.push({ path: '/sale/saleAdd' })
     },
@@ -288,6 +307,12 @@ export default {
 .page_consignList {
   padding: 20px;
 
+  .image_preivew {
+    width: 60px;
+    height: 60px;
+    align-content: center;
+    justify-content: center;
+  }
   .filter-container {
     display: flex;
     flex-direction: row;