feat(h5): previewImage add close btn and add navigation

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,

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"
             ]
         ]
     ],

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) {

src/platforms/h5/components/app/index.vue

@@ -27,6 +27,11 @@
       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"

src/platforms/h5/components/app/popup/index.js

 import Toast from './toast'
 import Modal from './modal'
 import ActionSheet from './actionSheet'
+import PreviewImage from './preview-image'
 
 export default {
   Toast,
   Modal,
-  ActionSheet
+  ActionSheet,
+  PreviewImage
 }

src/platforms/h5/components/app/popup/mixins/preview-image.js

+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
+    }
+  }
+}

src/platforms/h5/components/system-routes/preview-image/index.vue → src/platforms/h5/components/app/popup/preview-image/index.vue

 <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"
+        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>
 
@@ -23,36 +29,54 @@
 import imageView from './image-view'
 
 export default {
-  name: 'SystemPreviewImage',
+  name: 'PreviewImage',
   components: {
     imageView
   },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    urls: {
+      type: Array,
+      default: () => []
+    },
+    current: {
+      type: [String, Number],
+      default: 0
+    }
+  },
   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)
+  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.$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.$el.addEventListener('mouseup', event => {
+      if (
+        Math.abs(event.clientX - x) > MAX_MOVE ||
+        Math.abs(event.clientY - y) > MAX_MOVE
+      ) {
         this.preventDefault = true
       }
     })
@@ -60,7 +84,7 @@ export default {
   methods: {
     _click () {
       if (!this.preventDefault) {
-        getApp().$router.back()
+        this.$emit('close')
       }
     }
   }
@@ -75,7 +99,7 @@ export default {
   width: 100%;
   height: 100%;
   z-index: 999;
-  background: rgba(0,0,0,0.8);
+  background: rgba(0, 0, 0, 0.8);
 }
 .uni-system-preview-image-swiper {
   position: absolute;
@@ -84,4 +108,18 @@ export default {
   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>

src/platforms/h5/components/system-routes/index.js

 import ChooseLocation from './choose-location'
 import OpenLocation from './open-location'
-import PreviewImage from './preview-image'
 
 export default {
   ChooseLocation,
-  OpenLocation,
-  PreviewImage
+  OpenLocation
 }

src/platforms/h5/service/api/media/preview-image.js

 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'
   })
-  }
 }