uniIM/components/MessageView.vue

<template>
  <zb-tooltip placement="bottom" ref="tooltip" content="信息提示" color="#ccc">
    <template #content>
      <view class="menu">
        <view class="menu-item" @tap="handleToOther">转发</view>
        <view class="menu-item"  @tap="handleQuote">引用</view>
        <view class="menu-item"  @tap="handleMultiple">多选</view>
        <view class="menu-item"  @tap="handleCollect">收藏</view>
		<view class="menu-item"  @tap="handleDelect">删除</view>
        <view class="menu-item"  v-if="item.messageType === MessageType.text" @tap="handleClipboard">复制</view>
        <view class="menu-item"  v-if="item.messageType === MessageType.file" @tap="handleOpen">打开</view>
        <view class="menu-item"  v-if="timeShow" @tap="messageBack">撤回</view>
        <view class="menu-item"  v-if="item.messageType === MessageType.image" @tap="handleDownload">下载</view>
      </view>
    </template>
    <!-- #ifndef MP-WEIXIN -->
    <component :is="useMessageComponent(item.messageType)" :message="item"></component>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <message-text v-if="item.messageType === MessageType.text" :message="item"></message-text>
    <message-image v-if="item.messageType === MessageType.image" :message="item"></message-image>
    <message-file v-if="item.messageType === MessageType.file" :message="item"></message-file>
    <message-voice v-if="item.messageType === MessageType.voice" :message="item"></message-voice>
    <message-video v-if="item.messageType === MessageType.video" :message="item"></message-video>
    <message-multiple-forward v-if="item.messageType === MessageType.forward" :message="item"></message-multiple-forward>
    <!-- #endif -->
  </zb-tooltip>
</template>

<script setup lang="ts">
import {ref } from "vue";
import MessageType from "@/utils/MessageType";
import {useChatStore} from "@/store/chatStore";
import CollectApi from "@/api/CollectApi";
import MessageUtils from "@/utils/MessageUtils";
import ZbTooltip from "@/uni_modules/zb-tooltip/components/zb-tooltip/zb-tooltip.vue";
import {useWsStore} from "@/store/WsStore";
import type Message from "@/mode/Message";
import type Collect from "@/mode/Collect";
// #ifndef MP-WEIXIN
import useMessageComponent from "@/hooks/useMessageComponent";
// #endif
import useClipboard from 'vue-clipboard3'
import {useMessageStore} from "@/store/messageStore";
import MessageText from '@/components/messages/MessageText.vue'
import MessageImage from '@/components/messages/MessageImage.vue'
import MessageFile from '@/components/messages/MessageFile.vue'
import MessageVoice from '@/components/messages/MessageVoice.vue'
import MessageVideo from '@/components/messages/MessageVideo.vue'
import MessageMultipleForward from "@/components/messages/MessageMultipleForward.vue";
const {toClipboard} = useClipboard()
const wsStore = useWsStore();
const chatStore = useChatStore();
const messageStore = useMessageStore();
const emit = defineEmits(['toOtherHandle'])
const tooltip = ref();

interface IProps {
  item: Message
}

let props = defineProps<IProps>();

//转发
const handleToOther = () => {
  tooltip.value.close();
  messageStore.setCheckList([props.item])
  uni.navigateTo({
    url: `/pages/chat/send-other`
  })
}

const handleClipboard = () => {
  tooltip.value.close();
  const message = props.item;
  
  uni.setClipboardData({
    data:message.content,
    success: function() {
      MessageUtils.message("复制成功");
    }
  })
  
  // toClipboard(message.content).then(() => {
  //   MessageUtils.message("复制成功");
  // })
}

const handleOpen = () => {
  tooltip.value.close();
  const message = props.item;
  const url = message.extend?.url
  if (url) {
    uni.downloadFile({
      url: url, //仅为示例，并非真实的资源
      success: (res) => {
        if (res.statusCode === 200) {
          uni.openDocument({
            filePath: res.tempFilePath,
            showMenu: true
          });
        }
      }
    })
  }
}


const handleDownload = () => {
  tooltip.value.close();
  const message = props.item;
  const url = message.extend?.url
  if (url) {
    uni.downloadFile({
      url: url, //仅为示例，并非真实的资源
      success: (res) => {
        if (res.statusCode === 200) {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              MessageUtils.message("已经成功下载到相册");
            }
          });
        }
      }
    });
  }
}



const handleDelect = () => {
	tooltip.value.close();
	const message = props.item;
	chatStore.deMessage(message);
	console.log(message);
	MessageUtils.message("删除成功");
}

//收藏
const handleCollect = () => {
  tooltip.value.close();
  const message = props.item;
  const collect: Collect = {
    fromId: message.fromId,
    content: message.content,
    messageType: message.messageType,
    extend: message.extend === undefined ? "" : JSON.stringify(message.extend),
    sendTime: message.timestamp,
  };
  CollectApi.save(collect).then(() => {
    MessageUtils.message("收藏成功");
  });
}

//引用
const handleQuote = () => {
  tooltip.value.close();
  chatStore.setQuoteMessage(props.item);
}
//多选
const handleMultiple = () => {
  tooltip.value.close();
  useMessageStore().setShowMultipleCheck(true)
}

const timeShow = ref(false);
const interval = setInterval(() => {
  if (props.item && props.item.timestamp && props.item.mine) {
    timeShow.value = props.item.mine && ((props.item.timestamp + 2 * 60 * 1000) > new Date().getTime())
    if (!timeShow.value) {
      clearInterval(interval);
    }
  }
}, 1000);


/**
 * 消息撤回
 */
const messageBack = () => {
  tooltip.value.close();
  const message = JSON.parse(JSON.stringify(props.item));
  message.messageType = MessageType.back;
  message.content = "该消息已被撤回";
  wsStore.sendMessage(message);
};

</script>

<style scoped lang="scss">
.menu {
  display: flex;
  flex-wrap: wrap;
  align-items:center;
  width: 40vw;
  .menu-item {
    padding: 5px;
	color:black;
	font-size: 32upx;
  }
}

</style>