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

<template>
  <div class="choose-chat-page">
    <ZPaging ref="zPaging" :show-scrollbar="false">
      <template #top>
        <customNavbar
          :title="$t('pageTitle.select.shareChat')"
          :hideBack="true"
        >
          <template #left>
            <div
              @click="handleClose"
              class="ml-[42rpx] text-[34rpx] leading-[48rpx] font-regular"
            >
              {{ $t('button.text.close') }}
            </div>
          </template>
          <template #right>
            <div
              v-if="!isMultiSelect"
              @click="isMultiSelect = true"
              class="mr-[36rpx] text-[34rpx] leading-[48rpx] font-regular"
            >
              {{ $t('button.multiple.choice') }}
            </div>
            <div v-else class="mr-[36rpx] btnBox">
              <customBtn
                :btnText="
                  selectItems.length
                    ? $t('button.text.done') + `(${selectItems.length})`
                    : $t('button.text.done')
                "
                :disabled="!selectItems.length"
                @clickBtn="handleFinish"
              ></customBtn>
            </div>
          </template>
        </customNavbar>
      </template>
      <div class="choose-chat">
        <div class="searchRoot">
          <customInput></customInput>
        </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"
        :okText="'发送'"
      >
        <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"
              >
                <span>{{ item.name }}</span>
              </div>
            </div>
            <div v-else class="w-full flex items-center justify-start">
              <avatarModule
                :mode="2"
                :avatar="selectItemsModal[0].avatar"
                :groupType="selectItemsModal[0].group_type"
                :customStyle="{ width: '96rpx', height: '96rpx' }"
              ></avatarModule>
              <div class="ml-[16rpx] text-[#161616] text-[32rpx] font-bold">
                {{ selectItemsModal[0].name }}
                <span v-if="selectItemsModal[0].talk_type === 2">（{{ selectItemsModal[0].group_member_num }}）</span>
                <span v-if="selectItemsModal[0].group_type === 2" class="depTag tag">
                  部门
                </span>
                <span v-if="selectItemsModal[0].group_type === 3" class="projectTag tag">
                  项目
                </span>
                <span v-if="selectItemsModal[0].group_type === 4" class="companyTag tag">
                  公司
                </span>
              </div>
            </div>
          </div>
        </template>
      </tm-modal>
    </ZPaging>
  </div>
</template>
<script setup>
import customInput from '@/components/custom-input/custom-input.vue'
import avatarModule from '@/components/avatar-module/index.vue'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import customBtn from '@/components/custom-btn/custom-btn.vue'
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()
  console.log(talkStore.talkItems)
  items.value = lodash.cloneDeep(talkStore.talkItems)
})
onUnmounted(() => {
  dialogueStore.setForwardType('')
  dialogueStore.setForwardMessages([])
})
</script>
<style scoped lang="scss">
::v-deep .zp-paging-container-content {
  height: 100%;
  display: flex;
}

.choose-chat {
  flex: 1;
  padding: 20rpx 32rpx;
  display: flex;
  flex-direction: column;
  background-image: url('@/static/image/clockIn/z3280@3x.png');
  background-size: cover;
  background-position: bottom center;
  background-attachment: fixed;
}

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

.contentRoot {
  margin-top: 20rpx;
  background-color: #fff;
}
.tag{
  display: inline-flex;
  align-items: center;
  text-align: center;
  // margin-left: 10rpx;
  margin-top: 4rpx;
  vertical-align: top;
  height: 38rpx;
  line-height: 38rpx;
  padding: 0 10rpx;
  font-size: 24rpx;
  border-radius: 6rpx;
  font-weight: bold;
}
.companyTag {
	border: 1px solid #7a58de;
	color: #7a58de;
}
.depTag {
	border: 1px solid #377ec6;
	color: #377ec6;
}
.projectTag {
	border: 1px solid #c1681c;
	color: #c1681c;
}
.btnBox {
  ::v-deep .custom-btn-class {
    padding: 6rpx 24rpx !important;
    width: unset !important;
    min-width: unset !important;
    height: unset !important;
  }
  ::v-deep .wd-button__text {
    font-size: 34rpx !important;
    font-weight: 400 !important;
    line-height: 48rpx !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>