1.单击预览图可关闭预览 2.调高z-index

ghsApp/src/components/RichMediaViewer/index.vue

@@ -83,6 +83,7 @@
 
         <!-- 图片展示区域 -->
         <view class="preview-content">
+          <!-- 多张图片预览 -->
           <swiper
             v-if="currentImageList.length > 1"
             :current="currentImageIndex"
@@ -121,6 +122,7 @@
                       @error="onPreviewImageError(index)"
                       @load="onPreviewImageLoad(index)"
                       @longpress="saveImage"
+                      @click="closeImagePreview"
                     />
                   </view>
                 </movable-view>
@@ -148,6 +150,7 @@
                   @error="onPreviewImageError(0)"
                   @load="onPreviewImageLoad(0)"
                   @longpress="saveImage"
+                  @click="closeImagePreview"
                 />
               </view>
             </movable-view>
@@ -390,9 +393,9 @@ export default {
 
     // 点击遮罩层关闭预览
     handleMaskClick() {
-      if (this.currentScale === 1) {
-        this.closeImagePreview();
-      }
+      if (this.currentScale === 1) {}
+
+      this.closeImagePreview();
     },
 
     // 关闭图片预览
@@ -534,7 +537,7 @@ export default {
 }
 
 .content-block {
-  margin-bottom: 40rpx;
+  margin-bottom: 25rpx;
 
   &:last-child {
     margin-bottom: 0;
@@ -684,7 +687,7 @@ export default {
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.9);
-  z-index: 9999;
+  z-index: 999999;
   display: flex;
   flex-direction: column;
 }

hdApp/src/components/RichMediaViewer/index.vue

@@ -121,6 +121,7 @@
                       @error="onPreviewImageError(index)"
                       @load="onPreviewImageLoad(index)"
                       @longpress="saveImage"
+                      @click="closeImagePreview"
                     />
                   </view>
                 </movable-view>
@@ -148,6 +149,7 @@
                   @error="onPreviewImageError(0)"
                   @load="onPreviewImageLoad(0)"
                   @longpress="saveImage"
+                  @click="closeImagePreview"
                 />
               </view>
             </movable-view>
@@ -392,8 +394,9 @@ export default {
     // 点击遮罩层关闭预览
     handleMaskClick() {
       if (this.currentScale === 1) {
-        this.closeImagePreview();
       }
+
+      this.closeImagePreview();
     },
 
     // 关闭图片预览
@@ -535,7 +538,7 @@ export default {
 }
 
 .content-block {
-  margin-bottom: 40rpx;
+  margin-bottom: 25rpx;
 
   &:last-child {
     margin-bottom: 0;
@@ -685,7 +688,7 @@ export default {
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.9);
-  z-index: 9999;
+  z-index: 999999;
   display: flex;
   flex-direction: column;
 }

mallApp/src/components/RichMediaViewer/index.vue

@@ -120,6 +120,7 @@
                       class="preview-image"
                       @error="onPreviewImageError(index)"
                       @load="onPreviewImageLoad(index)"
+                      @click="closeImagePreview"
                     />
                   </view>
                 </movable-view>
@@ -146,6 +147,7 @@
                   class="preview-image single"
                   @error="onPreviewImageError(0)"
                   @load="onPreviewImageLoad(0)"
+                  @click="closeImagePreview"
                 />
               </view>
             </movable-view>
@@ -490,7 +492,7 @@ export default {
 }
 
 .content-block {
-  margin-bottom: 40rpx;
+  margin-bottom: 25rpx;
 
   &:last-child {
     margin-bottom: 0;
@@ -640,7 +642,7 @@ export default {
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.9);
-  z-index: 9999;
+  z-index: 999999;
   display: flex;
   flex-direction: column;
 }