From ab57f32eff756bea37473636e74230e6ad696f22 Mon Sep 17 00:00:00 2001 From: mehaotian <490272692@qq.com> Date: Wed, 23 Jun 2021 17:37:38 +0800 Subject: [PATCH] feat(App): previewImage --- .../uni-app-plus/src/service/api/index.ts | 1 + .../src/service/api/media/previewImage.ts | 98 +++++++++++++++++++ 2 files changed, 99 insertions(+) create mode 100644 packages/uni-app-plus/src/service/api/media/previewImage.ts diff --git a/packages/uni-app-plus/src/service/api/index.ts b/packages/uni-app-plus/src/service/api/index.ts index 92a255b59..232117e0d 100644 --- a/packages/uni-app-plus/src/service/api/index.ts +++ b/packages/uni-app-plus/src/service/api/index.ts @@ -7,6 +7,7 @@ export * from './device/accelerometer' export * from './media/getImageInfo' export * from './media/getVideoInfo' +export * from './media/previewImage' export * from './keyboard/keyboard' diff --git a/packages/uni-app-plus/src/service/api/media/previewImage.ts b/packages/uni-app-plus/src/service/api/media/previewImage.ts new file mode 100644 index 000000000..270d27858 --- /dev/null +++ b/packages/uni-app-plus/src/service/api/media/previewImage.ts @@ -0,0 +1,98 @@ +import { + API_PREVIEW_IMAGE, + API_TYPE_PREVIEW_IMAGE, + defineAsyncApi, + PreviewImageProtocol, + PreviewImageOptions, +} from '@dcloudio/uni-api' + +import { getRealPath } from '@dcloudio/uni-platform' + +import { isPlainObject } from '@vue/shared' + +import { initI18nChooseImageMsgsOnce, useI18n } from '@dcloudio/uni-core' + +export const previewImage = defineAsyncApi( + API_PREVIEW_IMAGE, + ( + { current = 0, indicator = 'number', loop = false, urls, longPressActions }, + { resolve, reject } + ) => { + initI18nChooseImageMsgsOnce() + const { t } = useI18n() + + urls = urls.map((url) => getRealPath(url)) + + const index = Number(current) + if (isNaN(index)) { + current = urls.indexOf(getRealPath(current as string)) + current = current < 0 ? 0 : current + } else { + current = index + } + + plus.nativeUI.previewImage(urls, { + current, + indicator, + loop, + onLongPress: function (res: any) { + let itemList = [] + let itemColor = '' + + const hasLongPressActions = + longPressActions && isPlainObject(longPressActions) + + if (!hasLongPressActions) { + itemList = [t('uni.previewImage.button.save')] + itemColor = '#000000' + } else { + itemList = longPressActions!.itemList + ? longPressActions!.itemList + : [] + itemColor = longPressActions!.itemColor + ? longPressActions!.itemColor + : '#000000' + } + + const options = { + buttons: itemList.map((item) => ({ + title: item, + color: itemColor, + })), + cancel: t('uni.previewImage.cancel'), + } + + plus.nativeUI.actionSheet(options, (e) => { + if (e.index > 0) { + if (hasLongPressActions) { + typeof longPressActions!.success === 'function' && + longPressActions!.success({ + tapIndex: e.index - 1, + index: res.index, + }) + + return + } + plus.gallery.save( + res.url, + () => { + plus.nativeUI.toast(t('uni.previewImage.save.success')) + }, + function () { + plus.nativeUI.toast(t('uni.previewImage.save.fail')) + } + ) + } else if (hasLongPressActions) { + typeof longPressActions!.fail === 'function' && + longPressActions!.fail({ + errMsg: 'showActionSheet:fail cancel', + }) + } + }) + }, + }) + resolve() + }, + PreviewImageProtocol, + PreviewImageOptions +) -- GitLab