chat-pc/src/views/message/inner/panel/MultiSelectFooter.vue

<script lang="ts" setup>
import { ref } from 'vue'
import { useDialogueStore } from '@/store'
import { Share, ShareThree, Delete, Close } from '@icon-park/vue-next'

import ContactModal from '@/components/user/ContactModal.vue'

const dialogueStore = useDialogueStore()
const isShowContactModal = ref(false)
const forwardMode = ref(0)

const onShowContactModal = (type: number) => {
  forwardMode.value = type
  isShowContactModal.value = true
}

const onClose = () => {
  dialogueStore.closeMultiSelect()
}

const onMergeForward = () => {
  if (dialogueStore.selectItems.length) {
    onShowContactModal(2)
  }
}

const onSingleForward = () => {
  if (dialogueStore.selectItems.length) {
    onShowContactModal(1)
  }
}

const onMultiDelete = () => {
  // 批量删除
  let msgIds = dialogueStore.selectItems.map((item: any) => item.msg_id)

  if (!msgIds.length) return

  dialogueStore.ApiDeleteRecord(msgIds)
}

const onContactModal = (data: { receiver_id: number; talk_type: number }[]) => {
  let msg_ids = dialogueStore.selectItems.map((item: any) => item.msg_id)

  let user_ids: number[] = []
  let group_ids: number[] = []

  for (let o of data) {
    if (o.talk_type == 1) {
      user_ids.push(o.receiver_id)
    } else {
      group_ids.push(o.receiver_id)
    }
  }
  console.log('user_ids',user_ids)
  dialogueStore.ApiForwardRecord({
    mode: forwardMode.value,
    message_ids: msg_ids,
    uids: user_ids,
    gids: group_ids
  })

  isShowContactModal.value = false
}
</script>

<template>
  <section class="section bdr-t">
    <div class="multi-title">
      <span>已选中：{{ dialogueStore.selectItems.length }} 条消息</span>
    </div>
    <div class="flex items-center relative">
      <div class="multi-groups">
      <div class="btn-group mr-156px">
        <div class="multi-icon pointer flex-center" @click="onMergeForward">
          <!-- <n-icon :size="22" :component="Share" /> -->
           <img src="@/assets/image/zu6299@2x.png" class="w-72px h-72px" alt="">
        </div>
        <p>合并转发</p>
      </div>
      <div class="btn-group mr-156px">
        <div class="multi-icon pointer flex-center" @click="onSingleForward">
          <!-- <n-icon :size="22" :component="ShareThree" /> -->
           <img class="w-72px h-72px" src="@/assets/image/zu6300@2x.png">
        </div>
        <p>逐条转发</p>
      </div>
      <div class="btn-group ">
        <div class="multi-icon pointer flex-center" @click="onMultiDelete">
          <!-- <n-icon :size="22" :component="Delete" /> -->
          <img class="w-72px h-72px" src="@/assets/image/zu6302@2x.png">
        </div>
        <p>批量删除</p>
      </div>
      <!-- <div class="btn-group">
        <div class="multi-icon pointer flex-center" @click="onClose">
         
        </div>
        <p>关闭</p>
      </div> -->
  
    </div>
    <div class="pointer absolute right-150px top-50% translate-y-[-50%]"  @click="onClose">
      <img class="w-30px h-30px" src="@/assets/image/zu6306@2x.png" alt="">
    </div>
    </div>
 
  </section>

  <ContactModal
  v-model:show="isShowContactModal"
    v-on:close="isShowContactModal = false"
    v-on:on-submit="onContactModal"
    :forward-mode="forwardMode"
  />
</template>
<style lang="less" scoped>
.section {
  height: 100%;
  width: 100%;
  box-sizing: border-box;

  .multi-title {
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #878484;
    font-size: 14px;
  }

  .multi-groups {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn-group {
      .multi-icon {
        width: 72px;
        height: 72px;
        background-color: var(--im-active-bg-color);
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

        img {
          transition: filter 0.3s ease;
        }

        &:hover {
          background-color: #ff5722;
          color: #fff;
          transform: translateY(-5px) scale(1.05);
          box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
          
          img {
            filter: brightness(1.2) contrast(0.9);
          }
        }
      }

      p {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        text-align: center;
        transition: all 0.3s ease;
      }

    
    }
  }
  
  .pointer {
    img {
      transition: all 0.5s ease;
      
      &:hover {
        filter: brightness(0.8) drop-shadow(0 0 2px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));


      }
    }
  }
}
</style>