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="load-toolbar pointer">
          <span v-if="loadConfig.status == 0"> 正在加载数据中 ... </span>
          <span v-else-if="loadConfig.status == 1" @click="onRefreshLoad"> 查看更多消息 ... </span>
          <span v-else class="no-more"> 没有更多消息了 </span>
        </div>
        <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 v-else class="message-box record-box" :class="{
            'direction-rt': item.float == 'right',
            'multi-select': dialogueStore.isOpenMultiSelect,
            'multi-select-check': item.isCheck
          }">
            <!-- 多选按钮 -->
            <aside v-if="dialogueStore.isOpenMultiSelect" class="checkbox-column">
              <n-checkbox size="small" :checked="item.isCheck" @update:checked="item.isCheck = !item.isCheck" />
            </aside>

            <!-- 头像信息 -->
            <aside class="avatar-column">
              <im-avatar class="pointer" :src="item.avatar" :size="80" :username="item.nickname"
                @click="showUserInfoModal(item.user_id)" />
            </aside>

            <!-- 主体信息 -->
            <main class="main-column">
              <div class="talk-title">
                <span class="nickname pointer" v-show="talk_type == 2 && item.float == 'left'"
                  @click="onClickNickname(item)">
                  <span class="at">@</span>{{ item.nickname }}
                </span>
                <span>{{ parseTime(item.created_at, '{m}/{d} {h}:{i}') }}</span>
              </div>

              <div class="talk-content" :class="{ pointer: dialogueStore.isOpenMultiSelect }" @click="onRowClick(item)">
                <component :is="MessageComponents[item.msg_type] || 'unknown-message'" :extra="item.extra" :data="item"
                  :max-width="true" :source="'panel'" @contextmenu.prevent="onContextMenu($event, item)" />

                <div class="talk-tools">
                  <template v-if="talk_type == 1 && item.float == 'right'">
                    <loading theme="outline" size="19" fill="#000" :strokeWidth="1" class="icon-rotate"
                      v-show="item.send_status == 1" />

                    <span v-show="item.send_status == 1"> 正在发送... </span>
                    <!-- <span v-show="item.send_status != 1"> 已送达 </span> -->
                  </template>

                </div>
              </div>

              <div v-if="item.extra.reply" class="talk-reply pointer" @click="onJumpMessage(item.extra?.reply?.msg_id)">
                <n-icon :component="ToTop" size="14" class="icon-top" />
                <span class="ellipsis">
                  回复 {{ item.extra?.reply?.nickname }}:
                  {{ item.extra?.reply?.content }}
                </span>
              </div>
            </main>
          </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 { formatTime, parseTime } from '@/utils/datetime'
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="less">
.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%;
}

.load-toolbar {
  height: 38px;
  color: #409eff;
  text-align: center;
  line-height: 38px;
  font-size: 13px;

  .no-more {
    color: #b9b3b3;
  }
}

.message-item {
  &.border {
    border-radius: 10px;
    border: 1px solid var(--im-primary-color);
  }
}

.message-box {
  width: 100%;
  min-height: 30px;
  margin-bottom: 5px;
}

.datetime {
  height: 30px;
  line-height: 30px;
  color: #ccc9c9;
  font-size: 12px;
  text-align: center;
  margin: 5px 0;
}

.record-box {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  .checkbox-column {
    display: flex;
    justify-content: center;
    width: 35px;
    order: 1;
    user-select: none;
    padding-top: 12px;
  }

  .avatar-column {
    width: 80rpx;
    display: flex;
    align-items: center;
    order: 2;
    user-select: none;
    margin-top: 16rpx;
    flex-direction: column;
  }

  .main-column {
    flex: 1 auto;
    order: 3;
    position: relative;
    box-sizing: border-box;
    padding: 16rpx 20rpx 14rpx 20rpx;
    overflow: hidden;
    min-height: 30px;

    .talk-title {
      display: flex;
      align-items: center;
      margin-bottom: 6rpx;
      font-size: 24rpx;
      user-select: none;
      color: #BABABA;
      opacity: 1;

      &.show {
        opacity: 1;
      }

      .nickname {
        color: var(--im-text-color);
        margin-right: 5px;

        .at {
          display: none;
        }

        &:hover {
          color: var(--im-primary-color);

          .at {
            display: inline-block;
          }
        }
      }

      span {
        transform: scale(0.88);
        transform-origin: left center;
      }
    }

    .talk-content {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;

      box-sizing: border-box;
      width: 100%;

      .talk-tools {
        display: flex;
        margin: 0 8px;
        color: #a79e9e;
        font-size: 12px;
        user-select: none;
        align-items: center;
        justify-content: space-around;

        .more-tools {
          visibility: hidden;
          margin-left: 5px;
        }
      }
    }

    .talk-reply {
      display: flex;
      align-items: flex-start;
      align-items: center;
      width: fit-content;
      padding: 4px;
      margin-top: 3px;
      margin-right: auto;
      font-size: 12px;
      color: #8f8f8f;
      word-break: break-all;
      background-color: var(--im-message-left-bg-color);
      border-radius: 5px;
      max-width: 300px;
      overflow: hidden;
      user-select: none;

      .icon-top {
        margin-right: 3px;
      }

      .ellipsis {
        display: -webkit-inline-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }

    &:hover {
      .talk-title {
        opacity: 1;
      }

      .more-tools {
        visibility: visible !important;
      }
    }
  }

  &.direction-rt {
    .avatar-column {
      order: 3;
    }

    .main-column {
      order: 2;

      .talk-title {
        justify-content: flex-end;

        span {
          transform-origin: right center;
        }
      }

      .talk-content {
        flex-direction: row-reverse;
      }

      .talk-reply {
        margin-right: 0;
        margin-left: auto;
      }
    }
  }

  &.multi-select {
    border-radius: 5px;

    &:hover,
    &.multi-select-check {
      background-color: var(--im-active-bg-color);
    }
  }
}
</style>