uniIM/components/MultipleForward.vue

<template>
  <view class="flex forward">
    <view class="flex-sub" @tap="handleCloseMultiple">
      <text class="cuIcon-close text-xxl"></text>
      <view>取消</view>
    </view>
    <view class="flex-sub" @tap="sendMultiple">
      <text class="cuIcon-forward text-xxl"></text>
      <view>合并转发</view>
    </view>
    <view class="flex-sub" @tap="sendSingle">
      <text class="cuIcon-forwardfill text-xxl"></text>
      <view>逐条转发</view>
    </view>
    <view class="flex-sub" @tap="storeMessage">
      <text class="cuIcon-favor text-xxl"></text>
      <view>收藏</view>
    </view>
  </view>
</template>
<script setup lang="ts">
import {useMessageStore} from "@/store/messageStore";
import {storeToRefs} from "pinia";
import MessageUtils from "@/utils/MessageUtils";
import type Collect from "@/mode/Collect";
import CollectApi from "@/api/CollectApi";
import {onUnload} from "@dcloudio/uni-app";

const messageStore = useMessageStore()

const { checkList } = storeToRefs(messageStore)
/**
 * 关闭多选
 */
const handleCloseMultiple = () => {
  messageStore.setShowMultipleCheck(false)
  messageStore.setCheckList([])
}

/**
 * 组件销毁，清空选中
 */
onUnload(() => {
  handleCloseMultiple()
})

/**
 * 合并转发
 */
const sendMultiple = (): void => {
  if (checkList.value.length > 0) {
    uni.navigateTo({
      url: `/pages/chat/send-other?multiple=true`
    })
  } else {
    MessageUtils.message('请选择转发的消息')
  }
}

/**
 * 逐条转发
 */
const sendSingle = (): void => {
  if (checkList.value.length > 0) {
    uni.navigateTo({
      url: `/pages/chat/send-other`
    })
  } else {
    MessageUtils.message('请选择转发的消息')
  }
}

const storeMessage = (): void => {
  checkList.value.forEach((message) => {
    const collect: Collect = {
      fromId: message.fromId,
      content: message.content,
      messageType: message.messageType,
      extend: message.extend == null ? '' : JSON.stringify(message.extend),
      sendTime: message.timestamp
    }
    CollectApi.save(collect)
  })
  messageStore.setCheckList([])
  handleCloseMultiple()
  MessageUtils.message('收藏成功')
}

</script>


<style scoped lang="scss">
.forward{
  display: flex;
  width: 100vw;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999999;
  background-color: #ffffff;
  padding: 10px;
  view{
    color: #999999;
    text-align: center;
    font-size: 24upx;
    .text-xxl{
      font-size: 40upx;
    }
  }
}
</style>