fashion-ssr-vue3/components/business/account/message/ChatWindow.vue

<!-- @format -->

<script setup>
import dayjs from 'dayjs'
import { useMessage } from './useMessage'
import { useUserStore } from '@/stores/modules/user'

const props = defineProps({
  isUseContact: {
    type: Boolean,
    default: true,
  },
})

defineEmits(['scroll-top'])

const {
  onScrollTop,
  loading,
  noMore,
  selectedContact,
  messageList,
  isScrollBottom,
} = useMessage()

const userStore = useUserStore()
const { avatar } = storeToRefs(userStore)

const chatContainer = ref(null)
const isScrolledToTop = ref(false)
const status = computed(() => {
  return loading.value ? '加载中...' : noMore.value ? '没有更多了~' : ''
})

function scrollToBottom() {
  nextTick(() => {
    if (chatContainer.value) {
      const timer = setTimeout(() => {
        clearTimeout(timer)
        chatContainer.value.scrollTop = chatContainer.value.scrollHeight
      }, 300)
    }
  })
}
async function handleScroll(event) {
  if (!chatContainer.value)
    return
  const scrollTop = event.target.scrollTop
  const previousScrollHeight = chatContainer.value.scrollHeight
  isScrolledToTop.value = scrollTop <= 0
  if (isScrolledToTop.value && !loading.value) {
    await onScrollTop()
    chatContainer.value.scrollTop = (chatContainer.value.scrollHeight - previousScrollHeight)
  }
}
watch(
  () => isScrollBottom.value,
  (val) => {
    !!val && scrollToBottom()
  },
  {
    immediate: true,
  },
)
</script>

<template>
  <div
    ref="chatContainer"
    class="space-y-4 overflow-y-auto scroll-custom pb-30px"
    :class="isUseContact ? 'h-530px' : 'h-355px'"
    @scroll="handleScroll"
  >
    <div class="text-center text-#999 text-14px">
      {{ status }}
    </div>
    <div v-for="message in messageList" :key="message.id">
      <div v-if="message.senderType === '1'" class="flex items-center">
        <img
          v-if="selectedContact.sessionType === '2'"
          :src="selectedContact.brandInfo?.brandLogo"
          class="w-40px h-40px object-cover b-rd-50%"
        >
        <img
          v-if="selectedContact.sessionType === '1'"
          src="@/assets/images/avatar.png"
          class="b-rd-50% w-40px h-40px b-rd-50%"
          alt=""
          srcset=""
        >
        <div
          class="ml-20px flex items-center w-60% "
        >
          <div v-if="message.type === '1'" class=" p-10px bg-#fff b-rd-20px b-rd-tl-0 w-full">
            {{ message.content }}
          </div>
          <div v-if="message.type === '2'" class="w-200px h-200px">
            <img :src="message.imageUrl" class="w-100% h-100% object-cover" alt="" srcset="">
          </div>
        </div>
        <div
          class="text-14px text-#999 ml-20px"
        >
          {{ dayjs(message.sendTime).format("YYYY/MM/DD HH:MM") }}
        </div>
      </div>
      <div v-if="message.senderType === '2'" class="flex justify-end items-center">
        <div
          class="text-14px text-#999 mr-20px"
        >
          {{ dayjs(message.sendTime).format("YYYY/MM/DD HH:MM") }}
        </div>
        <div
          class="w-60% mr-20px"
          :class="{ 'flex justify-end': message.type === '2' }"
        >
          <div v-if="message.type === '1'" class="py-10px  b-rd-20px b-rd-tr-0 px-20px bg-#CDA98F text-#fff">
            {{ message.content }}
          </div>
          <div v-if="message.type === '2'" class="w-200px h-200px">
            <img :src="message.imageUrl" class="w-100% h-100% object-cover" alt="" srcset="">
          </div>
        </div>
        <img v-if="avatar" :src="avatar" class="w-40px h-40px">
        <img v-else src="@/assets/images/avatar.png" class="w-40px h-40px">
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.scroll-custom {
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>