heshanApp/pages_im/pages/conversation/chating/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" class="file_icon" alt="" srcset="" />
      <image v-if="!localPath" class="mask"
        src="@/pages_im/static/images/file_message/file_mask.png" alt="" srcset="" />
      <image class="mask download" v-if="currentFileIsDownloading" src="@/pages_im/static/images/file_message/file_suspend.png" alt="" srcset="" />
      <image v-if="!currentFileIsDownloading && !localPath" class="download"
        src="@/pages_im/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'
			  })
			},
		  });
    },
	getFileIcon(fileName){
		  const fileType = getFileType(fileName);
		  const wordType = ["doc", "docx", "docm", "dot"];
		  const pdfType = ["pdf"];
		  const pptType = ["pptx", "pptm", "ppt"];
		  const excelType = ["xlsx", "xlsm", "xlsb", "xltx"];
		  const zipType = ["zip", "rar", "tar", "gz"];
		  if (wordType.includes(fileType)) {
			  return word;
		  }
		  if (pdfType.includes(fileType)) {
			  return pdf;
		  }
		  if (pptType.includes(fileType)) {
			  return ppt;
		  }
		  if (excelType.includes(fileType)) {
			  return excel;
		  }
		  if (zipType.includes(fileType)) {
			  return zip;
		  }
		  return unknown;
	},
	checkFileIsExist({ key, path }){
	  return new Promise((resolve) => {
	    if (!path) {
	      resolve("");
	      return;
	    }
	    plus.io.resolveLocalFileSystemURL(
	      path,
	      (res) => {
	        resolve(path);
	      },
	      (err) => {
	        console.log(err);
	        getStore().dispatch("user/deleteCacheData", key);
	        resolve("");
	      },
	    );
	  });
	}

  },
};
</script>

<style lang="scss" scoped>
.file_message_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 24rpx 32rpx;
  background-color: #fff;
  justify-content: space-between;
  width: 380rpx;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 12rpx;
  border-width: 1px;
  border-style: solid;
  border-color: #ececec;
}

.file_info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 44px;
  margin-right: 24rpx;
  max-width: 280rpx;
}

.file_name {
  lines: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
  color: #333;
}

.file_size {
  color: #999;
  font-size: 12px;
}

.file_icon {
  width: 38px;
  height: 44px;
}

.mask {
  top: 0;
  left: 0;
  position: absolute;
  width: 38px;
  height: 44px;
}

.download {
  width: 44rpx;
  height: 44rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -22rpx;
  margin-left: -22rpx;
}
</style>