添加查大图

.idea/.gitignore

+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/codeStyles/codeStyleConfig.xml

+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>
\ No newline at end of file

.idea/inspectionProfiles/Project_Default.xml

+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/qk_admin.iml" filepath="$PROJECT_DIR$/.idea/qk_admin.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/qk_admin.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

src/views/goods/components/CheckLargeImageDialog.vue

+<template>
+  <el-dialog
+    :visible.sync="showLargeDialog"
+    :before-close="handleClose">
+    <div >
+      <img :src="imageUrl" class="image" @click="handleClose">
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'CheckLargeImageDialog',
+  props: {
+    showLargeDialog: {
+      type: Boolean,
+      default: false
+    },
+    imageUrl: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('closeLargeDialog')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.image {
+  min-width: 400px;
+  max-width: 600px;
+  height: auto;
+}
+
+</style>

src/views/goods/infoSet.vue

@@ -15,7 +15,7 @@
         <div class="detail_image">
           <div class="detail_title">{{ `钱币图片：` }}</div>
           <div class="list">
-            <div v-for="(item, index) in goodsParams.images" :key="item + index" class="select_item">
+            <div v-for="(item, index) in goodsParams.images" :key="item + index" class="select_item" @click="handleShowLargeDialog(item)">
               <img :src="item" class="gallery">
             </div>
           </div>
@@ -195,6 +195,11 @@
       @closeDialog="dialogVisible = false"
       @selectSuccess="handleSelectSuccess"
       @imageBase64Str="handlerGetBase64" />
+    <CheckLargeImageDialog
+      :show-large-dialog="showLargeDialog"
+      :image-url="imageUrl"
+      @closeLargeDialog="showLargeDialog = false"
+    />
 
   </div>
 </template>
@@ -205,10 +210,11 @@ import { getToken } from '@/utils/auth'
 import SelectImageDialog from './components/selectImageDialog'
 import { listCategories } from '@/api/business/goods'
 import { detailGoods, editGoods } from '@/api/business/goodsNew'
+import CheckLargeImageDialog from './components/CheckLargeImageDialog'
 
 export default {
   name: 'InfoSet',
-  components: { SelectImageDialog, VuePictureCut, VuePictureCutMask, VuePictureCutMenu },
+  components: { CheckLargeImageDialog, SelectImageDialog, VuePictureCut, VuePictureCutMask, VuePictureCutMenu },
   data() {
     return {
       pictureCut: null,
@@ -241,7 +247,8 @@ export default {
       goodsParams: { images: [] },
       goodIdList: [],
       currentIndex: 0,
-      isDisabledNext: false
+      showLargeDialog: false,
+      imageUrl: ''
     }
   },
 
@@ -524,6 +531,10 @@ export default {
       } else {
         this.handleGetDetail('', 3)
       }
+    },
+    handleShowLargeDialog(imageUrl) {
+      this.imageUrl = imageUrl
+      this.showLargeDialog = true
     }
   }
 }