fashion-ssr-vue3/pages/account/messages.vue

<script lang='ts' setup>
import { useMessage } from '@/components/business/account/message/useMessage'

const props = defineProps({
  isUseContact: {
    type: Boolean,
    default: true,
  },
  refer: {
    type: String,
  },
  option: {
    type: Object || null,
  },
})
const {
  contacts,
  selectedContact,
  messageList,
  getContactList,
  getContactMessages,
  createBrandConversation,
  createServer,
  setRoundNewMessage,
  timer,
  isScrollBottom,
} = useMessage()
async function asyncData() {
  if (props.isUseContact) {
    isScrollBottom.value = false
    if (props.refer === 'contact')
      await createServer()
    await getContactList()
    selectedContact.value = contacts.value[0]
    await getContactMessages()
    isScrollBottom.value = true
    setRoundNewMessage()
  }
  else {
    isScrollBottom.value = false
    // 先根据品牌id，创建一个会话
    await createBrandConversation(props.option?.id)
    selectedContact.value.sessionType = '2'
    selectedContact.value.brandInfo = props.option
    await getContactMessages()
    isScrollBottom.value = true
    setRoundNewMessage()
  }
}
asyncData()
onUnmounted(() => {
  clearInterval(timer.value)
  messageList.value = []
})
</script>

<template>
  <div>
    <div v-if="isUseContact" class="py-18px px-24px bg-#FAFAFA b-rd-10px text-#000 text-20px fw-500 mb-20px">
      Messages
    </div>
    <el-container :class=" isUseContact ? 'h-850px' : 'h-640px' ">
      <el-aside v-if="isUseContact" class="w-364px bg-#FAFAFA !overflow-y-hidden">
        <business-account-message-contact-list />
      </el-aside>
      <el-container>
        <el-header class=" bg-#C58C64/6 custom-header">
          <business-account-message-contact-head />
        </el-header>
        <el-main class="bg-#C58C64/6 !p-20px !pt-0">
          <business-account-message-chat-window :is-use-contact="isUseContact" />
          <business-account-message-chat-input />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang='less' scoped>
.custom-header {
  box-shadow: unset !important;
  padding: 20px !important;
}
</style>