im-uniapp/pages/conversation/chating/components/MessageItem/FileMessageRender.vue

<template>
  <view class="file-message" @click="downloadFile">
    <image
      :src="fileIcon"
      class="file-icon"
      mode="aspectFit"
    />
    <view class="file-info">
      <text class="file-name">{{ fileName }}</text>
      <text class="file-size">{{ fileSizeText }}</text>
    </view>
    <image
      :src="downloadIcon"
      class="download-icon"
      mode="aspectFit"
    />
  </view>
</template>

<script>
export default {
  props: {
    source: {
      type: Object,
      required: true
    }
  },
  computed: {
    fileName: function() {
      return this.source && this.source.fileElem && this.source.fileElem.fileName || '未知文件';
    },
    fileSizeText: function() {
      const size = this.source && this.source.fileElem && this.source.fileElem.fileSize;
      if (!size) return '';
      if (size < 1024) {
        return size + ' B';
      } else if (size < 1024 * 1024) {
        return (size / 1024).toFixed(1) + ' KB';
      } else {
        return (size / (1024 * 1024)).toFixed(1) + ' MB';
      }
    },
    fileIcon: function() {
      const fileName = this.fileName.toLowerCase();
      if (fileName.endsWith('.pdf')) {
        return '/static/images/file_message/file_pdf.png';
      } else if (fileName.endsWith('.doc') || fileName.endsWith('.docx')) {
        return '/static/images/file_message/file_word.png';
      } else if (fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {
        return '/static/images/file_message/file_excel.png';
      } else if (fileName.endsWith('.ppt') || fileName.endsWith('.pptx')) {
        return '/static/images/file_message/file_ppt.png';
      } else if (fileName.endsWith('.zip') || fileName.endsWith('.rar') || fileName.endsWith('.7z')) {
        return '/static/images/file_message/file_zip.png';
      } else if (fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || fileName.endsWith('.png') || fileName.endsWith('.gif')) {
        return '/static/images/file_message/file_image.png';
      } else {
        return '/static/images/file_message/file_unknown.png';
      }
    }
  },
  data() {
    return {
      downloadIcon: '/static/images/file_message/file_download.png'
    };
  },
  methods: {
    getFixedSourceUrl: function(url) {
      // 如果 url 以 http://49.232.154.205/api/object/ 开头，则替换为带端口的
      if (typeof url === 'string' && url.startsWith('http://49.232.154.205/api/object/')) {
        return url.replace('http://49.232.154.205/api/object/', 'http://49.232.154.205:10006/api/object/');
      }
			else if (typeof url === 'string' && url.startsWith('http://47.117.71.33/api/object/')) {
				return url.replace('http://47.117.71.33/api/object/', 'http://49.232.154.205:10006/api/object/');
			}
      return url;
    },
    downloadFile: function() {
      const sourceUrl = this.source && this.source.fileElem && this.source.fileElem.sourceUrl;
      if (!sourceUrl) {
        uni.showToast({
          title: '文件链接无效',
          icon: 'none'
        });
        return;
      }
      
      const fixedUrl = this.getFixedSourceUrl(sourceUrl);
      
      // 在APP环境下直接下载
      // #ifdef APP-PLUS
      uni.downloadFile({
        url: fixedUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveFile({
              tempFilePath: res.tempFilePath,
              success: (saveRes) => {
                uni.showToast({
                  title: '文件已保存',
                  icon: 'success'
                });
              },
              fail: () => {
                uni.showToast({
                  title: '保存失败',
                  icon: 'none'
                });
              }
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          });
        }
      });
      // #endif
      
      // 在其他环境下打开链接
      // #ifndef APP-PLUS
      uni.showModal({
        title: '提示',
        content: '是否打开文件链接？',
        success: (res) => {
          if (res.confirm) {
            // #ifdef H5
            window.open(fixedUrl);
            // #endif
            // #ifdef MP-WEIXIN
            uni.setClipboardData({
              data: fixedUrl,
              success: () => {
                uni.showToast({
                  title: '链接已复制',
                  icon: 'success'
                });
              }
            });
            // #endif
          }
        }
      });
      // #endif
    }
  }
};
</script>

<style scoped>
.file-message {
  display: flex;
  align-items: center;
  background: #f5f6fa;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 4px 0;
  min-width: 200px;
  max-width: 300px;
}

.file-icon {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.file-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}

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

.download-icon {
  width: 24px;
  height: 24px;
  margin-left: 8px;
}
</style>