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
                 v-for="(image, index) in photoTipsImages" 
59
                 v-for="(image, index) in photoTipsImages" 
60
                 :key="index" 
60
                 :key="index" 
61
                 class="image-item"
61
                 class="image-item"
62
+                @click="previewPhotoTips(image)"
62
               >
63
               >
63
                 <image :src="image" mode="aspectFill" class="image-thumb" />
64
                 <image :src="image" mode="aspectFill" class="image-thumb" />
64
               </view>
65
               </view>
@@ -93,6 +94,7 @@
93
                 v-for="(image, index) in faceToFaceImages" 
94
                 v-for="(image, index) in faceToFaceImages" 
94
                 :key="index" 
95
                 :key="index" 
95
                 class="image-item"
96
                 class="image-item"
97
+                @click="previewFaceToFace(image)"
96
               >
98
               >
97
                 <image :src="image" mode="aspectFill" class="image-thumb" />
99
                 <image :src="image" mode="aspectFill" class="image-thumb" />
98
               </view>
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
     async handleNext() {
429
     async handleNext() {
@@ -528,6 +550,12 @@ export default {
528
   height: 120rpx;
550
   height: 120rpx;
529
   border-radius: 8rpx;
551
   border-radius: 8rpx;
530
   overflow: hidden;
552
   overflow: hidden;
553
+  cursor: pointer;
554
+  transition: opacity 0.2s;
555
+  
556
+  &:active {
557
+    opacity: 0.7;
558
+  }
531
 }
559
 }
532
 
560
 
533
 .image-thumb {
561
 .image-thumb {