yijianbao_user_uniapp/pages_im/pages/conversation/chating/components/MessageItem/FaceMessageRender.vue

<template>
  <view class="media_message_container" @click="clickMediaItem">
    <u--image :showLoading="true" width="200" :height="maxHeight" mode="widthFix"
      :src="getImgUrl" @click="clickMediaItem">
      <template v-slot:loading>
        <u-loading-icon color="red"></u-loading-icon>
      </template>
    </u--image>
  </view>
</template>

<script>
export default {
  name: "FaceMessageRender",
  props: {
    message: Object,
  },
  data() {
    return {
      faceElem: {}
    };
  },
  mounted() {
    this.faceElem = JSON.parse(this.message.faceElem.data)
  },
  computed: {
    getImgUrl() {
      return this.faceElem.url;
    },
    maxHeight() {
	  const aspectRatio = this.faceElem.height / this.faceElem.width;
	  return 200 * aspectRatio;
    },
  },
  methods: {
    clickMediaItem() {
      const list = [this.faceElem.url];
      const idx = 0;
      uni.previewImage({
        current: 0,
        urls: [this.faceElem.url],
        longPressActions: {
          itemList: ['保存图片'],
          success(data) {
            uni.downloadFile({
              url: list[idx],
              success(res) {
                console.log(res)
                let url = res.tempFilePath
                uni.saveImageToPhotosAlbum({
                  filePath: url,
                  success() {
                    uni.showToast({
                      title: '已保存到系统相册',
                      icon: "none"
                    })
                  },
                  fail(err) {
                    uni.showToast({
                      title: '保存失败',
                      icon: "none"
                    })
                  }
                })
              }
            })
          }
        },
        fail(err) {
          console.log(err);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.media_message_container {
  position: relative;
  border-radius: 16rpx;
  overflow: hidden;

  .play_icon {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .video_duration {
    position: absolute;
    bottom: 12rpx;
    right: 24rpx;
    color: #fff;
  }
}
</style>