FarmingWx_V2_message/TUIKit/components/TUIChat/message-list/message-elements/message-file.vue

<template>
  <div
    class="file-message-montainer"
    :title="TUITranslateService.t('TUIChat.单击下载')"
    @click="filePreview(props.content.url)"
  >
    <Icon :file="files" class="file-icon" />
    <div>
      <div>{{ props.content.name }}</div>
      <div>{{ props.content.size }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { withDefaults } from "../../../../adapter-vue";
import {
  TUITranslateService,
  IMessageModel,
} from "@tencentcloud/chat-uikit-engine";
import Icon from "../../../common/Icon.vue";
import files from "../../../../assets/icon/files.png";
import type { IFileMessageContent } from "../../../../interface";

const props = withDefaults(
  defineProps<{
    content: IFileMessageContent;
    messageItem: IMessageModel;
  }>(),
  {
    content: () => ({} as IFileMessageContent),
    messageItem: () => ({} as IMessageModel),
  }
);

// 预览简历
const filePreview = (url) => {
  webUni.webView.navigateTo({
    url: "/subpages/my/addition/preview?url=" + url,
  });
};
</script>
<style lang="scss" scoped>
@import "../../../../assets/styles/common";

.file-message-montainer {
  display: flex;
  flex-direction: row;
  cursor: pointer;

  .file-icon {
    margin: auto 8px;
  }
}
</style>