Pārlūkot izejas kodu

feat(PageTwo): 添加图片预览功能,支持师傅拍图技巧和客户面对面图片的预览

Yannay 2 mēneši atpakaļ
vecāks
revīzija
bc354c5cb0
1 mainītis faili ar 28 papildinājumiem un 0 dzēšanām
  1. 28 0
      pages/orderDetailRefactored/components/PageTwo.vue

+ 28 - 0
pages/orderDetailRefactored/components/PageTwo.vue

@@ -59,6 +59,7 @@
59 59
                 v-for="(image, index) in photoTipsImages" 
60 60
                 :key="index" 
61 61
                 class="image-item"
62
+                @click="previewPhotoTips(image)"
62 63
               >
63 64
                 <image :src="image" mode="aspectFill" class="image-thumb" />
64 65
               </view>
@@ -93,6 +94,7 @@
93 94
                 v-for="(image, index) in faceToFaceImages" 
94 95
                 :key="index" 
95 96
                 class="image-item"
97
+                @click="previewFaceToFace(image)"
96 98
               >
97 99
                 <image :src="image" mode="aspectFill" class="image-thumb" />
98 100
               </view>
@@ -402,6 +404,26 @@ export default {
402 404
     },
403 405
 
404 406
     /**
407
+     * 预览师傅拍图技巧图片
408
+     */
409
+    previewPhotoTips(src) {
410
+      uni.previewImage({
411
+        urls: this.photoTipsImages,
412
+        current: src
413
+      })
414
+    },
415
+
416
+    /**
417
+     * 预览到达客户面对面图片
418
+     */
419
+    previewFaceToFace(src) {
420
+      uni.previewImage({
421
+        urls: this.faceToFaceImages,
422
+        current: src
423
+      })
424
+    },
425
+
426
+    /**
405 427
      * 下一步
406 428
      */
407 429
     async handleNext() {
@@ -528,6 +550,12 @@ export default {
528 550
   height: 120rpx;
529 551
   border-radius: 8rpx;
530 552
   overflow: hidden;
553
+  cursor: pointer;
554
+  transition: opacity 0.2s;
555
+  
556
+  &:active {
557
+    opacity: 0.7;
558
+  }
531 559
 }
532 560
 
533 561
 .image-thumb {