xyy-m/src/components/NavigationBar/index.client.vue

<template>
  <div class="h-50 bg-white justify-between w-full fixed z-[999] border-b box-border">
    <audio
      class="fixed top-0 left-0"
      ref="audioRef"
      :src="audioTips"
      style="opacity: 0; z-index: -1"
    ></audio>
    <NuxtLink to="/" class="absolute top-1/2 -translate-y-1/2 left-15">
      <img src="~/assets/img/logo.png" class="h-30 object-contain" />
    </NuxtLink>

    <div class="absolute right-15 top-1/2 -translate-y-1/2 flex items-center space-x-20">
      <div v-if="token" class="flex items-center space-x-10">
        <NuxtLink to="/profile" class="flex items-center">
          <van-image :src="userInfo.headImageUrl || defaultAvatar" round height="26" width="26" />
        </NuxtLink>
        <NuxtLink to="/profile/my-news" class="max-w-70 truncate text-black-6">
          <van-badge :dot="showDot" :offset="[-4, 5]">消息</van-badge>
        </NuxtLink>
        <NuxtLink to="/profile" class="max-w-70 truncate text-black-6">订单</NuxtLink>
      </div>

      <NuxtLink
        v-else-if="!token"
        :to="`/login?redirect=${route.fullPath}`"
        class="flex items-center text-black-6 space-x-5"
      >
        <div
          class="w-26 h-26 rounded-full bg-[#d9d9d9] text-black-6 flex items-center justify-center"
        >
          <span class="iconfont icon-profile"></span>
        </div>
        <span class="text-base">请登录</span>
      </NuxtLink>
      <img @click="handleClickMenu" src="~/assets/img/navbar/nav_menu.png" class="w-24 h-24" />
    </div>

    <van-popup v-model:show="isMenuShow" position="left" :style="{ height: '100%', width: '70%' }">
      <NavigationBarLeftMenu
        v-if="isMenuShow"
        v-model:visible="isMenuShow"
        @on-hide="isMenuShow = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
const chatsStore = useChatsStore()
const { chatList, chatListLoading } = storeToRefs(chatsStore)
import { XYWebSocket } from '@/utils/XYWebSocket.ts'
import defaultAvatar from '~/assets/img/default_avatar.png'
import audioTips from '@/assets/audio/message.mp3'
const audioRef = ref(null)

const isMenuShow = ref(false)

function handleClickMenu() {
  isMenuShow.value = true
}

const route = useRoute()

const authStore = useAuthStore()
const { token } = storeToRefs(authStore)

const userInfoStore = useUserInfoStore()
const { userInfo } = storeToRefs(userInfoStore)

watch(
  token,
  () => {
    if (token.value) {
      userInfoStore.getUserInfo()
    }
  },
  { immediate: true }
)

// 监听Socket
onMounted(() => {
  chatsStore.getChatList()
  XYWebSocket.SocketEventsBus.on(XYWebSocket.SocketEvents.chatEvent, () => {
    chatsStore.getChatList()
    audioRef.value && audioRef.value.play()
  })
})

// 卸载Socket
onUnmounted(() => {
  XYWebSocket.SocketEventsBus.off(XYWebSocket.SocketEvents.chatEvent)
})

// 是否有消息显示红点
const showDot = computed(() => {
  let newTatol = chatList.value.reduce((sum, item) => sum + item?.unreadMessageCount, 0)

  if (newTatol) {
    return true
  } else {
    return false
  }
})
</script>

<style lang="scss" scoped></style>