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

<template>
  <div class="outer-layer">
    <div>
      <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220" >
        <div class="flex flex-col items-center justify-center" >
          <div class="text-[34rpx] font-bold" >{{ talkParams.username }}</div>
          <div v-if="true" class="text-[24rpx] text-[#999999]" >公司群</div>
        </div>
        <template v-slot:right>
          <div class="mr-[36rpx]">
            <tm-icon color="rgb(51, 51, 51)" :font-size="36" name="tmicon-gengduo"></tm-icon>
          </div>
			</template>
      </tm-navbar>
    </div>
    <div class="root">
      <div class="dialogBox" >
        <!-- <div v-if="loadConfig.status == 0" class="h-[240rpx] flex items-center justify-center flex-col" >
          <wd-loading />
          <div class="text-[#959598] mt-[20rpx] text-[28rpx]" > 正在加载中... </div>
        </div>
        <div v-else-if="loadConfig.status == 1"  @click="onRefreshLoad" >查看更多消息 ...</div>
        <span v-else class="no-more"> 没有更多消息了 </span> -->
        <div
          class="message-item"
          v-for="(item, index) in records"
          :key="item.msg_id"
          :id="item.msg_id"
        >
          <!-- 系统消息 -->
          <div v-if="item.msg_type >= 1000" class="message-box">
            <component
              :is="MessageComponents[item.msg_type] || 'unknown-message'"
              :extra="item.extra"
              :data="item"
            />
          </div>
          <!-- 撤回消息 -->
        <div v-else-if="item.is_revoke == 1" class="message-box">
          <revoke-message
            :login_uid="uid"
            :user_id="item.user_id"
            :nickname="item.nickname"
            :talk_type="item.talk_type"
            :datetime="item.created_at"
          />
        </div>

        </div>
      </div>
    </div>
    <div class="footBox" >
      <div class="mt-[16rpx] ml-[32rpx] mr-[32rpx] flex items-center justify-between" >
        <div class="w-[534rpx]" >
          <tm-input :height="72" placeholder=""    ></tm-input>
        </div>
        <tm-image :width="52" :height="52" :round="12" :src="smile"></tm-image>
        <tm-image :width="52" :height="52" :round="12" :src="addCircleGray"></tm-image>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref,reactive,watch,computed,onMounted } from 'vue';
import { useChatList } from "@/store/chatList/index.js";
import {useAuth} from "@/store/auth";
import { useUserStore, useDialogueStore, useUploadsStore } from '@/store'
import addCircleGray from "@/static/image/chatList/addCircleGray.png";
import { MessageComponents, ForwardableMessageType } from '@/constant/message'
import smile from "@/static/image/chatList/smile@2x.png";
import { useInject, useTalkRecord } from '@/hooks'

const userStore = useUserStore()
const dialogueStore = useDialogueStore()

const talkParams = reactive({
  uid: computed(() => userStore.uid),
  index_name: computed(() => dialogueStore.index_name),
  type: computed(() => dialogueStore.talk.talk_type),
  receiver_id: computed(() => dialogueStore.talk.receiver_id),
  username: computed(() => dialogueStore.talk.username),
  online: computed(() => dialogueStore.online),
  keyboard: computed(() => dialogueStore.keyboard),
  num: computed(() => dialogueStore.members.length)
})

const { loadConfig, records, onLoad, onRefreshLoad, onJumpMessage } = useTalkRecord(talkParams.uid)
watch(() => records, (newValue, oldValue) => {
  console.log(newValue);

},{deep:true,immediate:true})

watch(() => talkParams.uid, (newValue, oldValue) => {
  let objT = {
    uid: talkParams.uid,
    talk_type: talkParams.type,
    receiver_id: talkParams.receiver_id,
    index_name: talkParams.index_name
  }
  onLoad({ ...objT, limit: 30 })
},{immediate:true})

onMounted(() => {
  let objT = {
    uid: talkParams.uid,
    talk_type: talkParams.type,
    receiver_id: talkParams.receiver_id,
    index_name: talkParams.index_name
  }
  onLoad({ ...objT, limit: 30 })
})

</script>
<style scoped lang="scss">
.outer-layer {
  overflow-y: auto;
  flex: 1;
  background-image: url("@/static/image/clockIn/z3280@3x.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
}
.root {
  flex: 1;
  padding: 20rpx 32rpx;
}
.searchRoot {
  background-color: #fff;
  padding: 22rpx 18rpx;
}
.contentRoot {
  margin-top: 20rpx;
  background-color: #fff;
}
.footBox {
  height: 162rpx;
  background-color: #fff;
}
.dialogBox{
  height: 100%;
}

</style>