heshanApp/pages_im/pages/conversation/chating1/components/MessageItem/FileMessageRender.vue

<template>
  <view class="file_message_container" @click="openFile">
    <view class="file_info">
      <text class="file_name">{{ message.fileElem.fileName }}</text>
      <text class="file_size">{{ getSizeStr }}</text>
    </view>
    <view style="position: relative;">
      <image :src="getIcon" alt="" srcset="" />
      <image v-if="!localPath" class="mask"
        src="../../../../../static/images/file_message/file_mask.png" alt="" srcset="" />
      <image class="mask download" v-if="currentFileIsDownloading" src="../../../../../static/images/file_message/file_suspend.png" alt="" srcset="" />
      <image v-if="!currentFileIsDownloading && !localPath" class="download"
        src="../../../../../static/images/file_message/file_download.png" alt="" srcset="" />
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { bytesToSize } from "../../../../../util/imCommon";
import { getFileIcon, checkFileIsExist } from "../../../../../util/common";
export default {
  name: "",
  props: {
    message: Object,
  },
  data() {
    return {
      localPath: ""
    };
  },
  computed: {
    ...mapGetters([
      "storeCacheMap"
    ]),
    getSizeStr() {
      return bytesToSize(this.message.fileElem.fileSize);
    },
    getIcon() {
      return getFileIcon(this.message.fileElem.fileName);
    },
    currentFileIsDownloading() {
      return this.storeCacheMap[this.message.clientMsgID]?.state === "pending";
    }
  },
  watch: {
    storeCacheMap: {
      async handler(newVal) {
        const path = newVal[this.message.clientMsgID]?.path;
        this.localPath = await checkFileIsExist({
          key: this.message.clientMsgID,
          path
        });
      },
    },
  },
  mounted() {
    checkFileIsExist({
      key: this.message.clientMsgID,
      path: this.storeCacheMap[this.message.clientMsgID]?.path
    })
	.then(path =>this.localPath = path);
  },
  methods: {
    download() {
      if (!this.message.fileElem.sourceUrl) {
        this.$u.toast("无效的链接");
        return;
      }

      if (this.currentFileIsDownloading) return;
      this.$store.dispatch("user/addCacheTask", {
        key: this.message.clientMsgID,
        url: this.message.fileElem.sourceUrl,
      });
    },
    openFile() {
      if(!this.localPath) {
        this.download()
        return
      }
      
      uni.openDocument({
        filePath: this.localPath,
        fail: () => {
          uni.showToast({
            title: '文件打开失败，请前往文件管理器打开',
            icon: 'none'
          })
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.file_message_container {
  @include vCenterBox();
  padding: 24rpx 32rpx;
  background: #fff;
  justify-content: space-between;
  width: 380rpx;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 12rpx;
  border: 1px solid #ececec;

  .file_info {
    @include colBox(true);
    height: 44px;
    margin-right: 24rpx;
    max-width: 280rpx;

    .file_name {
      @include nomalEllipsis();
    }

    .file_size {
      color: #999;
      font-size: 24rpx;
    }
  }

  image {
    width: 38px;
    height: 44px;
  }

  .mask {
    top: 0;
    left: 0;
    position: absolute;
  }

  .download {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>