feat:添加查看大图

src/views/goods/list.vue

@@ -16,7 +16,7 @@
         <template slot-scope="props">
           <el-form label-position="left" class="table-expand">
             <el-form-item label="钱币图片">
-              <img v-for="pic in props.row.imageList" :src="pic" :key="pic" class="gallery">
+              <img v-for="pic in props.row.imageList" :src="pic" :key="pic" class="gallery" @click="handleShowLargeDialog(pic)">
             </el-form-item>
             <el-form-item label="钱币价格">
               <span>{{ props.row.price }}</span>
@@ -38,7 +38,7 @@
 
       <el-table-column align="center" property="iconUrl" label="图片">
         <template slot-scope="scope">
-          <img v-if="scope.row.topImage" :src="scope.row.topImage" width="100%">
+          <img v-if="scope.row.topImage" :src="scope.row.topImage" width="100%" @click="handleShowLargeDialog(scope.row.topImage)">
         </template>
       </el-table-column>
 
@@ -79,6 +79,11 @@
     <el-tooltip placement="top" content="返回顶部">
       <back-to-top :visibility-height="100" />
     </el-tooltip>
+    <CheckLargeImageDialog
+      :show-large-dialog="showLargeDialog"
+      :image-url="imageUrl"
+      @closeLargeDialog="showLargeDialog = false"
+    />
 
   </div>
 </template>
@@ -110,10 +115,11 @@ import { listGoods, deleteGoods } from '@/api/business/goods'
 import BackToTop from '@/components/BackToTop'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 import Line2Hidden from '@/components/line2Hidden'
+import CheckLargeImageDialog from './components/CheckLargeImageDialog'
 
 export default {
   name: 'GoodsList',
-  components: { BackToTop, Pagination, Line2Hidden },
+  components: { CheckLargeImageDialog, BackToTop, Pagination, Line2Hidden },
   data() {
     return {
       list: [],
@@ -128,13 +134,19 @@ export default {
       },
       goodsDetail: '',
       detailDialogVisible: false,
-      downloadLoading: false
+      downloadLoading: false,
+      imageUrl: '',
+      showLargeDialog: false
     }
   },
   created() {
     this.getList()
   },
   methods: {
+    handleShowLargeDialog(imageUrl) {
+      this.imageUrl = imageUrl
+      this.showLargeDialog = true
+    },
     getList() {
       this.listLoading = true
       listGoods(this.listQuery).then(response => {