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

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

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
-    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%;
+<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%;
-}
-</style>
+  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>

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