uniapp-im-shop/TUIKit/components/TUIConversation/conversation-header/index.vue

<template>
  <div :ref="convHeaderRef" class="tui-conversation-header">
    <Navigation
      :title="`消息${props.topCount ? `(${props.topCount})` : ''}`"
    >
      <template #right>
        <div v-show="!isGlobalSearching" class="menu-container">
          <ul v-if="menuList.length > 0" class="list">
            <li
              v-for="(item, index) in menuList"
              :key="index"
              class="list-item"
            >
              <main class="list-item-item" @click.stop="handleMenu(item)">
                <Icon
                  v-if="item.icon"
                  class="list-item-icon"
                  :file="item.icon"
                />
              </main>
            </li>
          </ul>
          <ul
            v-if="showChildren.length > 0"
            class="menu-container-children list"
          >
            <li
              v-for="(childrenItem, childrenIndex) in showChildren"
              :key="childrenIndex"
              class="list-item top-right_box"
              @click="handleMenu(childrenItem)"
            >
              <Icon
                v-if="childrenItem.icon"
                class="list-item-icon"
                :file="childrenItem.icon"
              />
              <h1 class="list-item-title">
                {{ childrenItem.text }}
              </h1>
            </li>
          </ul>
        </div>
      </template>
    </Navigation>
    <slot />
  </div>
</template>
<script lang="ts" setup>
  import {
    StoreName,
    TUIStore
  } from '@tencentcloud/chat-uikit-engine-lite'
  import {
    computed,
    ref,
    onMounted,
    onUnmounted
  } from '../../../adapter-vue'
  import Icon from '../../common/Icon.vue'
  import Navigation from '../../common/Navigation/index.vue'
  import Server, { IMenuItem } from './server'
  import type { ISearchingStatus } from '../../TUISearch/type'
  import { navigateTo } from '../../../../utils/router'
  import { useUI } from '../../../../utils/use-ui'

  const { showDialog } = useUI()

  const props = defineProps({
    topCount: {
      type: String,
      default: ''
    }
  })

  const showChildren = ref<IMenuItem[]>([])
  const convHeaderRef = ref<HTMLElement | undefined>()
  const isGlobalSearching = ref(false)

  const menuList = computed(() => {
    return Server.getInstance().getMenu()
  })

  const onCurrentSearchingStatusChange = (data: ISearchingStatus) => {
    isGlobalSearching.value =
      data.searchType === 'global' && data.isSearching
    if (isGlobalSearching.value) {
      closeChildren()
    }
  }

  onMounted(() => {
    showChildren.value = []
    TUIStore.watch(StoreName.SEARCH, {
      currentSearchingStatus: onCurrentSearchingStatusChange
    })
  })

  onUnmounted(() => {
    TUIStore.unwatch(StoreName.SEARCH, {
      currentSearchingStatus: onCurrentSearchingStatusChange
    })
  })

  const handleMenu = (item: IMenuItem) => {
    const {
      data: { children },
      listener = { onClicked: () => {} }
    } = item
    if (children) {
      const addUserItem = {
        data: { name: 'isAddUser' },
        icon: '/TUIKit/assets/icon/user-add.svg',
        text: '添加好友',
        listener: {
          onClicked: () => {}
        }
      }
      let listData = [
        addUserItem,
        ...children.filter(c => c.data.name !== 'isC2C')
      ]

      // #ifdef APP-PLUS
      // 扫一扫
      const scanItem = {
        data: { name: 'isScan' },
        icon: '/TUIKit/assets/icon/scan.svg',
        text: '扫一扫',
        listener: {
          onClicked: () => {}
        }
      }
      listData = [scanItem, ...listData]
      // #endif

      showChildren.value = showChildren.value.length > 0 ? [] : listData
    } else {
      if (item.data.name === 'isScan') {
        // 扫一扫
        uni.scanCode({
          onlyFromCamera: false,
          scanType: ['qrCode'],
          success: (res: any) => {
            navigateTo(res.result)
          }
        })
      } else if (item.data.name === 'isAddUser') {
        console.log('添加好友')
        showDialog('提示', '开发中...')
      } else {
        listener.onClicked(item)
      }
      closeChildren()
    }
  }

  const closeChildren = () => {
    showChildren.value = []
  }

  defineExpose({
    closeChildren
  })
</script>
<style lang="scss" scoped>
  .menu-container {
    position: relative;
  }
</style>

<style lang="scss" scoped src="../style/index.scss"></style>
<style lang="scss" scoped>
  .top-right_box {
    width: 180rpx;
    display: flex;
  }
</style>