chat-app/src/pages/chooseChat/index.vue

<template>
  <div class="outer-layer">
    <div>
      <tm-navbar :hideBack="true" hideHome :leftWidth="320">
        <template v-slot:left>
          <div @click="handleClose" class="ml-[48rpx] text-[34rpx] leading-[40rpx]">
            关闭
          </div>
        </template>
        <template v-slot:default>
          <div class="text-[34rpx] font-bold ml-[-80rpx] leading-[40rpx]">
            选择一个聊天
          </div>
        </template>
        <template v-slot:right>
          <div v-if="!isMultiSelect" @click="isMultiSelect = true" class="mr-[36rpx] text-[34rpx] leading-[40rpx]">
            多选
          </div>
          <div v-else class="mr-[36rpx] btnBox">
            <tm-button @click="handleFinish" color="#5B3FB1" :fontSize="34" :disabled="!selectItems.length"
              :margin="[10]" :shadow="0" size="small" :width="selectItems.length ? 162 : 116"
              :label="selectItems.length ? `完成(${selectItems.length})` : '完成'">
            </tm-button>
          </div>
        </template>
      </tm-navbar>
    </div>
    <div class="root">
      <div class="searchRoot">
        <tm-input placeholder="请输入…" color="#F9F9FD" :round="1" prefix="tmicon-search" prefixColor="#46299D"></tm-input>
      </div>
      <div class="contentRoot">
        <chatItem v-for="(item, index) in items" :key="item.index_name" :index="index" :data="item"
          :isMultiSelect="isMultiSelect" @itemClick="itemClick" />
      </div>
    </div>
    <tm-modal v-model:show="showWin" :height="forwardModalHeight" :round="4" okColor="#FFFFFF" @ok="handleOk"
      @cancel="handleCancel">
      <template v-slot:title>
        <div class="w-full pl-[30rpx] leading-[48rpx] mt-[30rpx] font-bold text-[32rpx]">
          发送给:
        </div>
      </template>
      <template v-slot:default>
        <div class="pl-[22rpx] pr-[32rpx] pt-[10rpx] flex items-center justify-start flex-wrap">
          <div v-if="selectItemsModal.length > 1" v-for="item in selectItemsModal"
            class="w-1/4 mt-[20rpx] flex flex-col items-center justify-center">
            <div class="w-[96rpx] h-[96rpx] rounded-[60rpx] flex-center">
              <tm-image :width="96" :height="96" :round="12" :src="item.avatar"></tm-image>
            </div>
            <div class="mt-[8rpx] text-[#666666] text-[24rpx] w-[94rpx] truncate">{{ item.name }}</div>
          </div>
          <div v-else class="w-full flex items-center justify-start">
            <div class="w-[96rpx] h-[96rpx] rounded-[60rpx] flex-center">
              <tm-image :width="96" :height="96" :round="12" :src="selectItemsModal[0].avatar"></tm-image>
            </div>
            <div class="ml-[16rpx] text-[#161616] text-[32rpx] font-bold ">{{ selectItemsModal[0].name }}</div>
          </div>
        </div>
      </template>
    </tm-modal>
  </div>
</template>
<script setup>
import { ref, watch, computed, onMounted, onUnmounted } from 'vue';
import { onShow, onLoad } from "@dcloudio/uni-app";
import { useChatList } from "@/store/chatList/index.js";
import { useAuth } from "@/store/auth";
import { useTalkStore, useUserStore, useDialogueStore } from '@/store'
import chatItem from './components/chatItem.vue';
import addCircle from "@/static/image/chatList/addCircle.png";
import lodash from 'lodash'

const talkStore = useTalkStore()
const userStore = useUserStore()
const { userInfo } = useAuth()
const dialogueStore = useDialogueStore()

const isMultiSelect = ref(false)
const showWin = ref(false)
const forwardModalHeight = ref(402)

const topItems = computed(() => talkStore.topItems)
const items = ref([])
// const items = computed(() => {
//   return lodash.cloneDeep(talkStore.talkItems)
// })

const selectItems = computed(() => {
  return items.value.filter(item => item.isCheck)
})

const selectItemsModal = ref([])

const itemClick = (item) => {
  console.log(item);
  if (isMultiSelect.value) {
    item.isCheck = !item.isCheck
    return false
  }
  selectItemsModal.value = [item]
  forwardModalHeight.value = 402
  showWin.value = true
}

const handleFinish = () => {
  console.log(selectItems.value);
  selectItemsModal.value = selectItems.value
  if (selectItemsModal.value.length > 4) {
    forwardModalHeight.value = 560
  } else {
    forwardModalHeight.value = 402
  }
  showWin.value = true
}

const handleClose = () => {
  dialogueStore.setForwardType('')
  dialogueStore.setForwardMessages([])
  uni.navigateBack()
}

const handleOk = () => {
  let msg_ids = dialogueStore.forwardMessages.map((item) => item.msg_id)


  let user_ids = []
  let group_ids = []

  for (let o of selectItemsModal.value) {
    if (o.talk_type == 1) {
      user_ids.push(o.receiver_id)
    } else {
      group_ids.push(o.receiver_id)
    }
  }

  dialogueStore.ApiForwardRecord({
    mode: dialogueStore.forwardType,
    message_ids: msg_ids,
    uids: user_ids,
    gids: group_ids
  })

  uni.navigateBack()
}

const handleCancel = () => {
  console.log('cancel');
}

watch(() => talkStore, (newValue, oldValue) => {
  console.log(talkStore);

}, { deep: true, immediate: true })

onMounted(() => {
  talkStore.loadTalkList()
  items.value = lodash.cloneDeep(talkStore.talkItems)
})
onUnmounted(() => {
  dialogueStore.setForwardType('')
  dialogueStore.setForwardMessages([])
})
</script>
<style scoped lang="scss">
uni-page-body,
page {
  height: 100%;
}

.outer-layer {
  overflow-y: auto;
  flex: 1;
  background-image: url("@/static/image/clockIn/z3280@3x.png");
  background-size: cover;
  padding: 0 32rpx 20rpx 32rpx;
  display: flex;
  flex-direction: column;
}

.root {
  flex: 1;
  padding: 20rpx 0;
}

.searchRoot {
  background-color: #fff;
  padding: 22rpx 18rpx;
}

.contentRoot {
  margin-top: 20rpx;
  background-color: #fff;
}

.btnBox {
  :deep(.button) {
    &[disabled="true"] {
      background-color: #F3F3F3 !important;
      color: #BABABA !important;
    }
  }
}

:deep(.noNvueBorder.round-bl-4) {
  border-top: 1rpx solid #E7E7E7 !important;
  background-color: #FFFFFF !important;

  uni-text {
    color: #1A1A1A !important;
    font-size: 32rpx !important;
    line-height: 48rpx !important;
  }
}

:deep(.noNvueBorder.round-br-4) {
  border-top: 1rpx solid #E7E7E7 !important;
  border-left: 1rpx solid #E7E7E7 !important;
  background-color: #FFFFFF !important;

  uni-text {
    font-weight: bold;
    color: #46299D !important;
    font-size: 32rpx !important;
    line-height: 48rpx !important;
  }
}
</style>