From 08bf6a1e7e1473eaf8fdc5916324b2d4375e099e Mon Sep 17 00:00:00 2001
From: qiang <guoshengqiang@live.com>
Date: Tue, 25 Aug 2020 17:50:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20H5=20=E7=AB=AF=20uni.previewImage=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=89=8B=E5=8A=BF?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE=20close=20#1170?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/manifest.js                             |   2 +
 .../preview-image/image-view.vue              | 107 ++++++++++++++++++
 .../system-routes/preview-image/index.vue     |  26 ++---
 3 files changed, 119 insertions(+), 16 deletions(-)
 create mode 100644 src/platforms/h5/components/system-routes/preview-image/image-view.vue

diff --git a/build/manifest.js b/build/manifest.js
index e6ab74460..7cdeffd07 100644
--- a/build/manifest.js
+++ b/build/manifest.js
@@ -33,6 +33,8 @@ const DEPS = {
   previewImage: [
     ['/core/view/components/swiper/index.vue', 'Swiper'],
     ['/core/view/components/swiper-item/index.vue', 'SwiperItem'],
+    ['/core/view/components/movable-area/index.vue', 'MovableArea'],
+    ['/core/view/components/movable-view/index.vue', 'MovableView'],
     ['/platforms/h5/components/system-routes/preview-image/index.vue', 'PreviewImage']
   ],
   showToast: TOAST_DEPS,
diff --git a/src/platforms/h5/components/system-routes/preview-image/image-view.vue b/src/platforms/h5/components/system-routes/preview-image/image-view.vue
new file mode 100644
index 000000000..e1952dc64
--- /dev/null
+++ b/src/platforms/h5/components/system-routes/preview-image/image-view.vue
@@ -0,0 +1,107 @@
+<template>
+  <v-uni-movable-area
+    class="image-view-area"
+    @touchstart.native="onTouchStart"
+    @touchmove.native="checkDirection"
+    @touchend.native="onTouchEnd"
+  >
+    <v-uni-movable-view
+      class="image-view-view"
+      :direction="direction"
+      inertia
+      scale
+      scale-min="1"
+      scale-max="4"
+      @scale="onScale"
+    >
+      <img
+        :src="src"
+        class="image-view-img"
+        @load="onImgLoad"
+      >
+    </v-uni-movable-view>
+  </v-uni-movable-area>
+</template>
+
+<script>
+export default {
+  name: 'ImageView',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      direction: 'none'
+    }
+  },
+  created () {
+    this.scale = 1
+    this.imgWidth = 0
+    this.imgHeight = 0
+    this.width = 0
+    this.height = 0
+  },
+  methods: {
+    onScale ({ detail: { scale } }) {
+      this.scale = scale
+    },
+    onImgLoad (event) {
+      const target = event.target
+      const rect = target.getBoundingClientRect()
+      this.imgWidth = rect.width
+      this.imgHeight = rect.height
+    },
+    onTouchStart (event) {
+      const $el = this.$el
+      const rect = $el.getBoundingClientRect()
+      this.width = rect.width
+      this.height = rect.height
+      this.checkDirection(event)
+    },
+    onTouchEnd (event) {
+      const scale = this.scale
+      const horizontal = scale * this.imgWidth > this.width
+      const vertical = scale * this.imgHeight > this.height
+      if (horizontal && vertical) {
+        this.direction = 'all'
+      } else if (horizontal) {
+        this.direction = 'horizontal'
+      } else if (vertical) {
+        this.direction = 'vertical'
+      } else {
+        this.direction = 'none'
+      }
+      this.checkDirection(event)
+    },
+    checkDirection (event) {
+      // 避免水平滑动和 swiper 冲突
+      const direction = this.direction
+      if (direction === 'all' || direction === 'horizontal') {
+        event.stopPropagation()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.image-view-area,
+.image-view-view {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.image-view-img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  max-height: 100%;
+  max-width: 100%;
+}
+</style>
diff --git a/src/platforms/h5/components/system-routes/preview-image/index.vue b/src/platforms/h5/components/system-routes/preview-image/index.vue
index 40caad428..63307de2f 100644
--- a/src/platforms/h5/components/system-routes/preview-image/index.vue
+++ b/src/platforms/h5/components/system-routes/preview-image/index.vue
@@ -1,30 +1,32 @@
 <template>
   <div
     class="uni-system-preview-image"
-    @click="_click"
+    @click="_click"
   >
     <v-uni-swiper
       :current.sync="index"
       :indicator-dots="false"
       :autoplay="false"
-      class="uni-swiper"
+      class="uni-system-preview-image-swiper"
     >
       <v-uni-swiper-item
         v-for="(src,key) in urls"
-        :key="key"
+        :key="key"
       >
-        <img
-          :src="src"
-          class="uni-preview-image"
-        >
+        <image-view :src="src" />
       </v-uni-swiper-item>
     </v-uni-swiper>
   </div>
 </template>
 
 <script>
+import imageView from './image-view'
+
 export default {
   name: 'SystemPreviewImage',
+  components: {
+    imageView
+  },
   data () {
     const {
       urls,
@@ -74,19 +76,11 @@ export default {
   height: 100%;
   background: black;
 }
-.uni-swiper {
+.uni-system-preview-image-swiper {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
 }
-.uni-preview-image {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  max-height: 100%;
-  max-width: 100%;
-}
 </style>
-- 
GitLab