From c24cdefa42c9fd20c413e33d5936b52e79f320b9 Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Mon, 19 Sep 2022 15:37:32 +0800
Subject: [PATCH] feat(h5): previewImage add close btn and add navigation

---
 build/manifest.js                             |   9 +-
 packages/uni-h5/manifest.json                 |   6 +-
 .../lib/platforms/h5.js                       |  26 ----
 src/platforms/h5/components/app/index.vue     |  57 ++++----
 .../h5/components/app/popup/index.js          |   4 +-
 .../app/popup/mixins/preview-image.js         |  32 +++++
 .../popup}/preview-image/image-view.vue       |   0
 .../app/popup/preview-image/index.vue         | 125 ++++++++++++++++++
 .../h5/components/system-routes/index.js      |   6 +-
 .../system-routes/preview-image/index.vue     |  87 ------------
 .../h5/service/api/media/preview-image.js     |  29 +---
 11 files changed, 211 insertions(+), 170 deletions(-)
 create mode 100644 src/platforms/h5/components/app/popup/mixins/preview-image.js
 rename src/platforms/h5/components/{system-routes => app/popup}/preview-image/image-view.vue (100%)
 create mode 100644 src/platforms/h5/components/app/popup/preview-image/index.vue
 delete mode 100644 src/platforms/h5/components/system-routes/preview-image/index.vue

diff --git a/build/manifest.js b/build/manifest.js
index e60c76936..d757622b4 100644
--- a/build/manifest.js
+++ b/build/manifest.js
@@ -46,7 +46,14 @@ const DEPS = {
     ['/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']
+    [
+      '/platforms/h5/components/app/popup/preview-image/index.vue',
+      'PreviewImage'
+    ],
+    [
+      '/platforms/h5/components/app/popup/mixins/preview-image.js',
+      'PreviewImageMixin'
+    ]
   ],
   showToast: TOAST_DEPS,
   hideToast: TOAST_DEPS,
diff --git a/packages/uni-h5/manifest.json b/packages/uni-h5/manifest.json
index 740525ce9..f50bb092f 100644
--- a/packages/uni-h5/manifest.json
+++ b/packages/uni-h5/manifest.json
@@ -383,8 +383,12 @@
                 "MovableView"
             ],
             [
-                "/platforms/h5/components/system-routes/preview-image/index.vue",
+                "/platforms/h5/components/app/popup/preview-image/index.vue",
                 "PreviewImage"
+            ],
+            [
+                "/platforms/h5/components/app/popup/mixins/preview-image.js",
+                "PreviewImageMixin"
             ]
         ]
     ],
diff --git a/packages/webpack-uni-pages-loader/lib/platforms/h5.js b/packages/webpack-uni-pages-loader/lib/platforms/h5.js
index 72feaf423..99de71e4c 100644
--- a/packages/webpack-uni-pages-loader/lib/platforms/h5.js
+++ b/packages/webpack-uni-pages-loader/lib/platforms/h5.js
@@ -257,32 +257,6 @@ const genSystemRoutes = function () {
   return [
     `
 {
-path: '/preview-image',
-component: {
-  render (createElement) {
-    return createElement(
-      'Page',
-      {
-        props:{
-          navigationStyle:'custom'
-        }
-      },
-      [
-        createElement('system-preview-image', {
-          slot: 'page'
-        })
-      ]
-    )
-  }
-},
-meta:{
-  name:'preview-image',
-  pagePath:'/preview-image'
-}
-}
-    `,
-    `
-{
 path: '/choose-location',
 component: {
   render (createElement) {
diff --git a/src/platforms/h5/components/app/index.vue b/src/platforms/h5/components/app/index.vue
index 1cd663a6f..9e64526bf 100644
--- a/src/platforms/h5/components/app/index.vue
+++ b/src/platforms/h5/components/app/index.vue
@@ -1,37 +1,42 @@
 <template>
   <uni-app :class="{'uni-app--showtabbar':showTabBar,'uni-app--maxwidth':showMaxWidth}">
-    <layout
-      ref="layout"
-      :router-key="key"
-      :keep-alive-include="keepAliveInclude"
+    <layout
+      ref="layout"
+      :router-key="key"
+      :keep-alive-include="keepAliveInclude"
       @maxWidth="onMaxWidth"
-      @layout="onLayout"
+      @layout="onLayout"
     />
-    <tab-bar
-      v-if="hasTabBar"
-      v-show="showTabBar"
-      ref="tabBar"
-      v-bind="tabBarOptions"
+    <tab-bar
+      v-if="hasTabBar"
+      v-show="showTabBar"
+      ref="tabBar"
+      v-bind="tabBarOptions"
     />
-    <toast
-      v-if="$options.components.Toast"
-      v-bind="showToast"
+    <toast
+      v-if="$options.components.Toast"
+      v-bind="showToast"
     />
-    <action-sheet
-      v-if="$options.components.ActionSheet"
-      v-bind="showActionSheet"
-      @close="_onActionSheetClose"
+    <action-sheet
+      v-if="$options.components.ActionSheet"
+      v-bind="showActionSheet"
+      @close="_onActionSheetClose"
     />
-    <modal
-      v-if="$options.components.Modal"
-      v-bind="showModal"
-      @close="_onModalClose"
+    <modal
+      v-if="$options.components.Modal"
+      v-bind="showModal"
+      @close="_onModalClose"
+    />
+    <preview-image
+      v-if="$options.components.PreviewImage"
+      v-bind="previewImage"
+      @close="_onPreviewClose"
     />
     <template v-if="sysComponents&&sysComponents.length">
-      <component
-        :is="item"
-        v-for="(item, index) in sysComponents"
-        :key="index"
+      <component
+        :is="item"
+        v-for="(item, index) in sysComponents"
+        :key="index"
       />
     </template>
   </uni-app>
@@ -165,4 +170,4 @@ export default {
     width: 100%;
     height: 100%;
   }
-</style>
+</style>
diff --git a/src/platforms/h5/components/app/popup/index.js b/src/platforms/h5/components/app/popup/index.js
index 7b791bd61..6fb5e6735 100644
--- a/src/platforms/h5/components/app/popup/index.js
+++ b/src/platforms/h5/components/app/popup/index.js
@@ -1,9 +1,11 @@
 import Toast from './toast'
 import Modal from './modal'
 import ActionSheet from './actionSheet'
+import PreviewImage from './preview-image'
 
 export default {
   Toast,
   Modal,
-  ActionSheet
+  ActionSheet,
+  PreviewImage
 }
diff --git a/src/platforms/h5/components/app/popup/mixins/preview-image.js b/src/platforms/h5/components/app/popup/mixins/preview-image.js
new file mode 100644
index 000000000..a63b8982b
--- /dev/null
+++ b/src/platforms/h5/components/app/popup/mixins/preview-image.js
@@ -0,0 +1,32 @@
+import {
+  isFn
+} from 'uni-shared'
+
+export default {
+  data () {
+    return {
+      previewImage: {
+        visible: false
+      }
+    }
+  },
+  created () {
+    UniServiceJSBridge.on('onShowPreviewImage', (args, callback) => {
+      this.previewImage = Object.assign({}, args, { visible: true })
+      isFn(callback) && this.$nextTick(callback)
+    })
+    UniServiceJSBridge.on('onClosePreviewImage', (callback) => {
+      this._onPreviewClose()
+      isFn(callback) && this.$nextTick(callback)
+    })
+    UniServiceJSBridge.on('onHidePopup', _ => {
+      this.previewImage.visible = false
+    })
+  },
+  methods: {
+    // 处理 preview-image close 回调
+    _onPreviewClose (res) {
+      this.previewImage.visible = false
+    }
+  }
+}
diff --git a/src/platforms/h5/components/system-routes/preview-image/image-view.vue b/src/platforms/h5/components/app/popup/preview-image/image-view.vue
similarity index 100%
rename from src/platforms/h5/components/system-routes/preview-image/image-view.vue
rename to src/platforms/h5/components/app/popup/preview-image/image-view.vue
diff --git a/src/platforms/h5/components/app/popup/preview-image/index.vue b/src/platforms/h5/components/app/popup/preview-image/index.vue
new file mode 100644
index 000000000..03a5a7779
--- /dev/null
+++ b/src/platforms/h5/components/app/popup/preview-image/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div
+    v-if="visible"
+    class="uni-system-preview-image"
+    @click="_click"
+  >
+    <v-uni-swiper
+      navigation="auto"
+      :current.sync="index"
+      :indicator-dots="false"
+      :autoplay="false"
+      class="uni-system-preview-image-swiper"
+    >
+      <v-uni-swiper-item
+        v-for="(src, key) in urls"
+        :key="key"
+      >
+        <image-view :src="src" />
+      </v-uni-swiper-item>
+    </v-uni-swiper>
+
+    <div class="nav-btn-back">
+      <i class="uni-btn-icon">&#xe650;</i>
+    </div>
+  </div>
+</template>
+
+<script>
+import imageView from './image-view'
+
+export default {
+  name: 'PreviewImage',
+  components: {
+    imageView
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    urls: {
+      type: Array,
+      default: () => []
+    },
+    current: {
+      type: [String, Number],
+      default: 0
+    }
+  },
+  data () {
+    return {
+      index: 0
+    }
+  },
+  watch: {
+    visible (val) {
+      if (val) {
+        const index =
+          typeof this.current === 'number'
+            ? this.current
+            : this.urls.indexOf(this.current)
+        this.index = index < 0 ? 0 : index
+      }
+    }
+  },
+  mounted () {
+    const MAX_MOVE = 20
+    let x = 0
+    let y = 0
+    this.$el.addEventListener('mousedown', event => {
+      this.preventDefault = false
+      x = event.clientX
+      y = event.clientY
+    })
+    this.$el.addEventListener('mouseup', event => {
+      if (
+        Math.abs(event.clientX - x) > MAX_MOVE ||
+        Math.abs(event.clientY - y) > MAX_MOVE
+      ) {
+        this.preventDefault = true
+      }
+    })
+  },
+  methods: {
+    _click () {
+      if (!this.preventDefault) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+<style>
+.uni-system-preview-image {
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.8);
+}
+.uni-system-preview-image-swiper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.uni-system-preview-image .nav-btn-back {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: 44px;
+  height: 44px;
+  padding: 6px;
+  line-height: 32px;
+  font-size: 26px;
+  color: white;
+  text-align: center;
+  cursor: pointer;
+}
+</style>
diff --git a/src/platforms/h5/components/system-routes/index.js b/src/platforms/h5/components/system-routes/index.js
index e3c90930e..41decc80e 100644
--- a/src/platforms/h5/components/system-routes/index.js
+++ b/src/platforms/h5/components/system-routes/index.js
@@ -1,9 +1,7 @@
 import ChooseLocation from './choose-location'
 import OpenLocation from './open-location'
-import PreviewImage from './preview-image'
 
 export default {
   ChooseLocation,
-  OpenLocation,
-  PreviewImage
-}
+  OpenLocation
+}
diff --git a/src/platforms/h5/components/system-routes/preview-image/index.vue b/src/platforms/h5/components/system-routes/preview-image/index.vue
deleted file mode 100644
index 7ed12d78c..000000000
--- a/src/platforms/h5/components/system-routes/preview-image/index.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <div
-    class="uni-system-preview-image"
-    @click="_click"
-  >
-    <v-uni-swiper
-      :current.sync="index"
-      :indicator-dots="false"
-      :autoplay="false"
-      class="uni-system-preview-image-swiper"
-    >
-      <v-uni-swiper-item
-        v-for="(src,key) in urls"
-        :key="key"
-      >
-        <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,
-      current
-    } = this.$route.params
-    return {
-      urls: urls || [],
-      current,
-      index: 0
-    }
-  },
-  created () {
-    const index = typeof this.current === 'number' ? this.current : this.urls.indexOf(this.current)
-    this.index = index < 0 ? 0 : index
-  },
-  mounted () {
-    const MAX_MOVE = 20
-    let x = 0
-    let y = 0
-    this.$el.addEventListener('mousedown', (event) => {
-      this.preventDefault = false
-      x = event.clientX
-      y = event.clientY
-    })
-    this.$el.addEventListener('mouseup', (event) => {
-      if (Math.abs(event.clientX - x) > MAX_MOVE || Math.abs(event.clientY - y) > MAX_MOVE) {
-        this.preventDefault = true
-      }
-    })
-  },
-  methods: {
-    _click () {
-      if (!this.preventDefault) {
-        getApp().$router.back()
-      }
-    }
-  }
-}
-</script>
-<style>
-.uni-system-preview-image {
-  display: block;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  background: rgba(0,0,0,0.8);
-}
-.uni-system-preview-image-swiper {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/src/platforms/h5/service/api/media/preview-image.js b/src/platforms/h5/service/api/media/preview-image.js
index b50842450..0f78fe7e7 100644
--- a/src/platforms/h5/service/api/media/preview-image.js
+++ b/src/platforms/h5/service/api/media/preview-image.js
@@ -1,39 +1,20 @@
 const {
+  emit,
   invokeCallbackHandler: invoke
 } = UniServiceJSBridge
 
-export function previewImage ({
-  urls,
-  current
-}, callbackId) {
-  getApp().$router.push({
-    type: 'navigateTo',
-    path: '/preview-image',
-    params: {
-      urls,
-      current
-    }
-  }, function () {
+export function previewImage (args, callbackId) {
+  emit('onShowPreviewImage', args, function (res) {
     invoke(callbackId, {
       errMsg: 'previewImage:ok'
     })
-  }, function () {
-    invoke(callbackId, {
-      errMsg: 'previewImage:fail'
-    })
   })
 }
 
 export function closePreviewImage (_, callbackId) {
-  const $router = getApp().$router
-  if ($router.history.current.path === '/preview-image') {
-    $router.back()
+  emit('onClosePreviewImage', function () {
     invoke(callbackId, {
       errMsg: 'closePreviewImage:ok'
     })
-  } else {
-    invoke(callbackId, {
-      errMsg: 'closePreviewImage:fail'
-    })
-  }
+  })
 }
-- 
GitLab