消息

TUIKit/components/common/ImagePreviewer/index.vue

@@ -0,0 +1,678 @@
+<template>
+  <div
+    class="image-previewer"
+    :class="[isMobile && 'image-previewer-h5']"
+  >
+    <div
+      ref="image"
+      class="image-wrapper"
+      @touchstart.stop="handleTouchStart"
+      @touchmove.stop="handleTouchMove"
+      @touchend.stop="handleTouchEnd"
+      @touchcancel.stop="handleTouchCancel"
+      @wheel.stop="handleWheel"
+    >
+      <ul
+        ref="ulRef"
+        class="image-list"
+        :style="{
+          width: `${imageList.length * 100}%`,
+          transform: `translateX(-${
+            (currentImageIndex * 100) / imageList.length
+          }%)`,
+          transition: '0.5s',
+        }"
+      >
+        <li
+          v-for="(item, index) in imageList"
+          :key="index"
+          class="image-item"
+        >
+          <ImageItem
+            :zoom="zoom"
+            :rotate="rotate"
+            :src="getImageUrl(item)"
+            :messageItem="item"
+            :class="[isUniFrameWork ? 'image-item' : '']"
+          />
+        </li>
+      </ul>
+    </div>
+    <div
+      v-show="isPC"
+      class="icon icon-close"
+      @click="close"
+    >
+      <Icon
+        :file="iconClose"
+        width="16px"
+        height="16px"
+      />
+    </div>
+    <div
+      v-if="isPC && currentImageIndex > 0"
+      class="image-button image-button-left"
+      @click="goPrev"
+    >
+      <Icon :file="iconArrowLeft" />
+    </div>
+    <div
+      v-if="isPC && currentImageIndex < imageList.length - 1"
+      class="image-button image-button-right"
+      @click="goNext"
+    >
+      <Icon :file="iconArrowLeft" />
+    </div>
+    <div :class="['actions-bar', isMobile && 'actions-bar-h5']">
+      <div
+        v-if="isPC"
+        class="icon-zoom-in"
+        @click="zoomIn"
+      >
+        <Icon
+          :file="iconZoomIn"
+          width="27px"
+          height="27px"
+        />
+      </div>
+      <div
+        v-if="isPC"
+        class="icon-zoom-out"
+        @click="zoomOut"
+      >
+        <Icon
+          :file="iconZoomOut"
+          width="27px"
+          height="27px"
+        />
+      </div>
+      <div
+        v-if="isPC"
+        class="icon-refresh-left"
+        @click="rotateLeft"
+      >
+        <Icon
+          :file="iconRotateLeft"
+          width="27px"
+          height="27px"
+        />
+      </div>
+      <div
+        v-if="isPC"
+        class="icon-refresh-right"
+        @click="rotateRight"
+      >
+        <Icon
+          :file="iconRotateRight"
+          width="27px"
+          height="27px"
+        />
+      </div>
+      <span class="image-counter">
+        {{ currentImageIndex + 1 }} / {{ imageList.length }}
+      </span>
+    </div>
+    <div
+      class="save"
+      @click.stop.prevent="save"
+    >
+      <Icon
+        :file="iconDownload"
+        width="20px"
+        height="20px"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect, onMounted, onUnmounted, withDefaults } from '../../../adapter-vue';
+import { IMessageModel, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal, getPlatform } from '@tencentcloud/universal-api';
+import Icon from '../../common/Icon.vue';
+import iconClose from '../../../assets/icon/icon-close.svg';
+import iconArrowLeft from '../../../assets/icon/icon-arrow-left.svg';
+import iconZoomIn from '../../../assets/icon/zoom-in.svg';
+import iconZoomOut from '../../../assets/icon/zoom-out.svg';
+import iconRotateLeft from '../../../assets/icon/rotate-left.svg';
+import iconRotateRight from '../../../assets/icon/rotate-right.svg';
+import iconDownload from '../../../assets/icon/download.svg';
+import ImageItem from './image-item.vue';
+import { Toast, TOAST_TYPE } from '../../common/Toast/index';
+import { isPC, isMobile, isUniFrameWork } from '../../../utils/env';
+
+interface touchesPosition {
+  pageX1?: number;
+  pageY1?: number;
+  pageX2?: number;
+  pageY2?: number;
+}
+
+const props = withDefaults(
+  defineProps<{
+    imageList: IMessageModel[];
+    currentImage: IMessageModel;
+  }>(),
+  {
+    imageList: () => ([] as IMessageModel[]),
+    messageItem: () => ({} as IMessageModel),
+  },
+);
+
+const imageFormatMap = new Map([
+  [1, 'jpg'],
+  [2, 'gif'],
+  [3, 'png'],
+  [4, 'bmp'],
+]);
+
+const emit = defineEmits(['close']);
+const zoom = ref(1);
+const rotate = ref(0);
+const minZoom = ref(0.1);
+const currentImageIndex = ref(0);
+const image = ref();
+const ulRef = ref();
+// touch
+let startX = 0;
+const touchStore = {} as touchesPosition;
+let moveFlag = false;
+let twoTouchesFlag = false;
+let timer: number | null = null;
+
+watchEffect(() => {
+  currentImageIndex.value = props.imageList.findIndex((message: any) => {
+    return message.ID === props?.currentImage?.ID;
+  });
+});
+
+const isNumber = (value: any) => {
+  return typeof value === 'number' && isFinite(value);
+};
+
+const handleTouchStart = (e: any) => {
+  e.preventDefault();
+  moveInit(e);
+  twoTouchesInit(e);
+};
+
+const handleTouchMove = (e: any) => {
+  e.preventDefault();
+  moveFlag = true;
+  if (e.touches && e.touches.length === 2) {
+    twoTouchesFlag = true;
+    handleTwoTouches(e);
+  }
+};
+
+const handleTouchEnd = (e: any) => {
+  e.preventDefault();
+  e.stopPropagation();
+  let moveEndX = 0;
+  let X = 0;
+  if (twoTouchesFlag) {
+    if (!timer) {
+      twoTouchesFlag = false;
+      delete touchStore.pageX2;
+      delete touchStore.pageY2;
+      timer = setTimeout(() => {
+        timer = null;
+      }, 200);
+    }
+    return;
+  }
+  // H5 touch move to left to go to prev image
+  // H5 touch move to right to go to next image
+  if (timer === null) {
+    switch (moveFlag) {
+      // touch event
+      case true:
+        moveEndX = e?.changedTouches[0]?.pageX;
+        X = moveEndX - startX;
+        if (X > 100) {
+          goPrev();
+        } else if (X < -100) {
+          goNext();
+        }
+        break;
+      // click event
+      case false:
+        close();
+        break;
+    }
+    timer = setTimeout(() => {
+      timer = null;
+    }, 200);
+  }
+};
+
+const handleTouchCancel = () => {
+  twoTouchesFlag = false;
+  delete touchStore.pageX1;
+  delete touchStore.pageY1;
+};
+
+const handleWheel = (e: any) => {
+  e.preventDefault();
+  if (Math.abs(e.deltaX) !== 0 && Math.abs(e.deltaY) !== 0) return;
+  let scale = zoom.value;
+  scale += e.deltaY * (e.ctrlKey ? -0.01 : 0.002);
+  scale = Math.min(Math.max(0.125, scale), 4);
+  zoom.value = scale;
+};
+
+const moveInit = (e: any) => {
+  startX = e?.changedTouches[0]?.pageX;
+  moveFlag = false;
+};
+
+const twoTouchesInit = (e: any) => {
+  const touch1 = e?.touches[0];
+  const touch2 = e?.touches[1];
+  touchStore.pageX1 = touch1?.pageX;
+  touchStore.pageY1 = touch1?.pageY;
+  if (touch2) {
+    touchStore.pageX2 = touch2?.pageX;
+    touchStore.pageY2 = touch2?.pageY;
+  }
+};
+
+const handleTwoTouches = (e: any) => {
+  const touch1 = e?.touches[0];
+  const touch2 = e?.touches[1];
+  if (touch2) {
+    if (!isNumber(touchStore.pageX2)) {
+      touchStore.pageX2 = touch2.pageX;
+    }
+    if (!isNumber(touchStore.pageY2)) {
+      touchStore.pageY2 = touch2.pageY;
+    }
+  }
+  const getDistance = (
+    startX: number,
+    startY: number,
+    stopX: number,
+    stopY: number,
+  ) => {
+    return Math.hypot(stopX - startX, stopY - startY);
+  };
+  if (
+    !isNumber(touchStore.pageX1)
+    || !isNumber(touchStore.pageY1)
+    || !isNumber(touchStore.pageX2)
+    || !isNumber(touchStore.pageY2)
+  ) {
+    return;
+  }
+  const touchZoom
+    = getDistance(touch1.pageX, touch1.pageY, touch2.pageX, touch2.pageY)
+    / getDistance(
+      touchStore.pageX1 as number,
+      touchStore.pageY1 as number,
+      touchStore.pageX2 as number,
+      touchStore.pageY2 as number,
+    );
+  zoom.value = Math.min(Math.max(0.5, zoom.value * touchZoom), 4);
+};
+
+onMounted(() => {
+  // web: close on esc keydown
+  document?.addEventListener
+  && document?.addEventListener('keydown', handleEsc);
+});
+
+const handleEsc = (e: any) => {
+  e.preventDefault();
+  if (e?.keyCode === 27) {
+    close();
+  }
+};
+const zoomIn = () => {
+  zoom.value += 0.1;
+};
+const zoomOut = () => {
+  zoom.value
+    = zoom.value - 0.1 > minZoom.value ? zoom.value - 0.1 : minZoom.value;
+};
+const close = () => {
+  emit('close');
+};
+const rotateLeft = () => {
+  rotate.value -= 90;
+};
+const rotateRight = () => {
+  rotate.value += 90;
+};
+const goNext = () => {
+  currentImageIndex.value < props.imageList.length - 1
+  && currentImageIndex.value++;
+  initStyle();
+};
+const goPrev = () => {
+  currentImageIndex.value > 0 && currentImageIndex.value--;
+  initStyle();
+};
+const initStyle = () => {
+  zoom.value = 1;
+  rotate.value = 0;
+};
+
+const getImageUrl = (message: IMessageModel) => {
+  if (isPC) {
+    return message?.payload?.imageInfoArray[0]?.url;
+  } else {
+    return message?.payload?.imageInfoArray[2]?.url;
+  }
+};
+
+const save = () => {
+  const imageMessage = props.imageList[
+    currentImageIndex.value
+  ] as IMessageModel;
+  const imageSrc = imageMessage?.payload?.imageInfoArray[0]?.url;
+  if (!imageSrc) {
+    Toast({
+      message: TUITranslateService.t('component.图片 url 不存在'),
+      type: TOAST_TYPE.ERROR,
+    });
+    return;
+  }
+  switch (getPlatform()) {
+    case 'wechat':
+      // Get the user's current settings and get the album permissions
+      TUIGlobal.getSetting({
+        success: (res: any) => {
+          if (!res?.authSetting['scope.writePhotosAlbum']) {
+            TUIGlobal.authorize({
+              scope: 'scope.writePhotosAlbum',
+              success() {
+                downloadImgInUni(imageSrc);
+              },
+              fail() {
+                TUIGlobal.showModal({
+                  title: '您已拒绝获取相册权限',
+                  content: '是否进入权限管理，调整授权？',
+                  success: (res: any) => {
+                    if (res.confirm) {
+                      // Call up the client applet settings interface and return the operation results set by the user.
+                      // Ask the user to authorize again.
+                      TUIGlobal.openSetting({
+                        success: (res: any) => {
+                          console.log(res.authSetting);
+                        },
+                      });
+                    } else if (res.cancel) {
+                      return Toast({
+                        message: TUITranslateService.t('component.已取消'),
+                        type: TOAST_TYPE.ERROR,
+                      });
+                    }
+                  },
+                });
+              },
+            });
+          } else {
+            // If you already have album permission, save directly to the album
+            downloadImgInUni(imageSrc);
+          }
+        },
+        fail: () => {
+          Toast({
+            message: TUITranslateService.t('component.获取权限失败'),
+            type: TOAST_TYPE.ERROR,
+          });
+        },
+      });
+      break;
+    case 'app':
+      downloadImgInUni(imageSrc);
+      break;
+    default:
+      downloadImgInWeb(imageSrc);
+      break;
+  }
+};
+
+const downloadImgInUni = (src: string) => {
+  TUIGlobal.showLoading({
+    title: '大图提取中',
+  });
+  TUIGlobal.downloadFile({
+    url: src,
+    success: function (res: any) {
+      TUIGlobal.hideLoading();
+      TUIGlobal.saveImageToPhotosAlbum({
+        filePath: res.tempFilePath,
+        success: () => {
+          Toast({
+            message: TUITranslateService.t('component.已保存至相册'),
+            type: TOAST_TYPE.SUCCESS,
+          });
+        },
+      });
+    },
+    fail: function () {
+      TUIGlobal.hideLoading();
+      Toast({
+        message: TUITranslateService.t('component.图片下载失败'),
+        type: TOAST_TYPE.ERROR,
+      });
+    },
+  });
+};
+
+const downloadImgInWeb = (src: string) => {
+  const option: any = {
+    mode: 'cors',
+    headers: new Headers({
+      'Content-Type': 'application/x-www-form-urlencoded',
+    }),
+  };
+  const imageMessage = props.imageList[
+    currentImageIndex.value
+  ] as IMessageModel;
+  const imageFormat: number = imageMessage?.payload?.imageFormat;
+  if (!imageFormatMap.has(imageFormat)) {
+    Toast({
+      message: TUITranslateService.t('component.暂不支持下载此类型图片'),
+      type: TOAST_TYPE.ERROR,
+    });
+    return;
+  }
+  // If the browser supports fetch, use blob to download, so as to avoid the browser clicking the a tag and jumping to the preview of the new page
+  if ((window as any).fetch) {
+    fetch(src, option)
+      .then(res => res.blob())
+      .then((blob) => {
+        const a = document.createElement('a');
+        const url = window.URL.createObjectURL(blob);
+        a.href = url;
+        a.download = url + '.' + imageFormatMap.get(imageFormat);
+        a.click();
+      });
+  } else {
+    const a = document.createElement('a');
+    a.href = src;
+    a.target = '_blank';
+    a.download = src + '.' + imageFormatMap.get(imageFormat);
+    a.click();
+  }
+};
+
+onUnmounted(() => {
+  document?.removeEventListener
+  && document?.removeEventListener('keydown', handleEsc);
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../../assets/styles/common";
+
+.actions-bar {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  position: absolute;
+  bottom: 5%;
+  padding: 12px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.8);
+
+  &-h5 {
+    padding: 6px;
+  }
+
+  .icon {
+    position: static;
+    font-size: 24px;
+    cursor: pointer;
+    width: 27px;
+    height: 27px;
+    margin: 5px;
+  }
+
+  .icon-zoom-in,
+  .icon-zoom-out,
+  .icon-refresh-left,
+  .icon-refresh-right {
+    cursor: pointer;
+    user-select: none;
+    padding: 5px;
+  }
+}
+
+.image-previewer {
+  position: fixed;
+  z-index: 101;
+  width: 100%;
+  height: 100%;
+  background: rgba(#000, 0.3);
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  user-select: none;
+
+  .image-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .image-list {
+    position: absolute;
+    height: 100%;
+    left: 0;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+    place-content: center center;
+
+    .image-item {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+  }
+
+  .image-preview {
+    max-width: 100%;
+    max-height: 100%;
+    transition: transform 0.1s ease 0s;
+    pointer-events: auto;
+  }
+
+  .image-button {
+    display: flex;
+    flex-direction: column;
+    min-width: auto;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    top: calc(50% - 20px);
+    background: rgba(255, 255, 255, 0.8);
+
+    &-left {
+      left: 10px;
+    }
+
+    &-right {
+      right: 10px;
+      transform: rotate(180deg);
+    }
+
+    .icon {
+      position: absolute;
+      bottom: 0;
+      top: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      line-height: 40px;
+      display: flex;
+      flex-direction: column;
+      min-width: auto;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .icon-close {
+    position: absolute;
+    cursor: pointer;
+    border-radius: 50%;
+    top: 3%;
+    right: 3%;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.8);
+    display: flex;
+
+    &::before,
+    &::after {
+      background-color: #444;
+    }
+  }
+}
+
+.image-previewer-h5 {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  display: flex;
+  flex-direction: column;
+}
+
+.save {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  position: absolute;
+  bottom: 5%;
+  right: 5%;
+  padding: 12px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.image-counter {
+  background: rgba(20, 18, 20, 0.53);
+  padding: 3px 5px;
+  margin: 5px;
+  border-radius: 3px;
+  color: #fff;
+}
+</style>