Browse Source

封面图点击时,将点击的图像放到第一张展示

cxmo 1 year ago
parent
commit
0532cf896d

+ 3 - 3
src/views/system_manage/components/imgThumbnail.vue

@@ -1,6 +1,6 @@
 <template>
     <ul class="img-thumbanail-wrap">
-        <li class="img-item" v-for="(img,index) in _.cloneDeep(this.imgList).reverse()" :key="index" @click="showImage">
+        <li class="img-item" v-for="(img,index) in _.cloneDeep(this.imgList).reverse()" :key="index" @click="showImage(img)">
             <img :src="img" />
             <span class="mask">
                 <span
@@ -34,8 +34,8 @@ export default {
             const index = this.imgList.findIndex(i=>i===img)||0
             this.$emit('deleteImg',index)
         },
-        showImage(){
-            this.$emit('showImage',this.imgList)
+        showImage(img){
+            this.$emit('showImage',{list:this.imgList,item:img})
         }
     },
 };

+ 10 - 4
src/views/system_manage/etaBaseConfig.vue

@@ -45,13 +45,13 @@
                         <div class="input-line" style="display:flex;">
                             <ImgUpload 
                                 :imgUrl="formData.CnPptCoverImgs.length===3?formData.CnPptCoverImgs[2]:''"
-                                @showImage="showImage(formData.CnPptCoverImgs)"
+                                @showImage="(arr)=>{showImageOrder({list:formData.CnPptCoverImgs,item:arr[0]})}"
                                 @upload="(file)=>handleUploadImage(file,'CnPptCoverImgs')"
                                 @remove="deleteFormImg('CnPptCoverImgs',formData.CnPptCoverImgs.length-1)"
                                 />
                             <ImgThumbnail 
                                 :imgList="formData.CnPptCoverImgs.length===3?formData.CnPptCoverImgs.slice(0,2):formData.CnPptCoverImgs"
-                                @showImage="showImage(formData.CnPptCoverImgs)"
+                                @showImage="({item})=>{showImageOrder({list:formData.CnPptCoverImgs,item})}"
                                 @deleteImg="(index)=>{deleteFormImg('CnPptCoverImgs',index)}"/>
                         </div>
                         <ConfigAnnotation picName="pptCoverList" @showImage="previewImage"
@@ -83,13 +83,13 @@
                         <div class="input-line" style="display:flex;">
                             <ImgUpload 
                                 :imgUrl="formData.EnPptCoverImgs.length===3?formData.EnPptCoverImgs[2]:''"
-                                @showImage="showImage(formData.EnPptCoverImgs)"
+                                @showImage="(arr)=>{showImageOrder({list:formData.EnPptCoverImgs,item:arr[0]})}"
                                 @upload="(file)=>handleUploadImage(file,'EnPptCoverImgs')"
                                 @remove="deleteFormImg('EnPptCoverImgs',formData.EnPptCoverImgs.length-1)"
                                 />
                             <ImgThumbnail 
                                 :imgList="formData.EnPptCoverImgs.length===3?formData.EnPptCoverImgs.slice(0,2):formData.EnPptCoverImgs"
-                                @showImage="showImage(formData.EnPptCoverImgs)"
+                                @showImage="({item})=>{showImageOrder({list:formData.EnPptCoverImgs,item})}"
                                 @deleteImg="(index)=>{deleteFormImg('EnPptCoverImgs',index)}"/>
                         </div>
                         <ConfigAnnotation picName="pptCoverList" @showImage="previewImage"
@@ -308,6 +308,12 @@ export default {
             this.picShowList = imgList||[]
             this.picShowList.length&&(this.showViewer = true)
         },
+        showImageOrder({list,item}){
+            //改变list的顺序,当前点击的为第一个
+            const index = list.findIndex(img=>img===item)
+            this.picShowList = [...list.slice(index),...list.slice(0,index)]
+            this.picShowList.length&&(this.showViewer = true)
+        },
         getBaseConfig(){
             //获取WatermarkChart的值,赋值checkList
             //获取UseXf的值,赋值Iflytek