menduner-uniapp/pagesA/chart/index.vue

<template>
  <view class="box">
    <view class="box-top">
      {{ info.name }}
      <text class="subText">
        {{ info.postName }}
        <text v-if="info.postName && info.enterpriseName" class="gun">|</text>
        {{ info.enterpriseName }}
      </text>
    </view>
    <view class="box-main"  ref="chatRef">
      <view v-for="val in items" :key="val.id">
        <view class="box-main-time">{{ timesTampChange(+(val.timestamp.padEnd(13, '0'))) }}</view>
        <view :class="['message-view_item', val.from_uid === IM.uid ? 'is-self' : 'is-other']">
          <view class="image">
            
            <image
              class="header"
              :src="(val.from_uid === IM.uid ? mAvatar : getUserAvatar(info.avatar, info.sex)) || 'https://minio.citupro.com/dev/menduner/7.png'"
            ></image>
          </view>
          <view class="message-text" :class="{ active: val.from_uid === IM.uid}">
            {{ val.payload?.content }}
          </view>
        </view>
      </view>
    </view>
    <view class="box-bottom">
      <textarea
        auto-height
        confirm-type="send"
        @confirm="handleSend"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { useIMStore } from '@/store/im'
import { userStore } from '@/store/user'
import { timesTampChange } from '@/utils/date'
import { getUserAvatar } from '@/utils/avatar'
import { initConnect, send, initChart, getMoreMessages, checkConversation } from '@/hooks/useIM'
import { onLoad } from '@dcloudio/uni-app'

const useUserStore = userStore()
const IM = useIMStore()
const mAvatar = getUserAvatar(useUserStore.baseInfo?.avatar, useUserStore.baseInfo?.sex)
const info = ref({})
const chatRef = ref()
const items = ref([])


async function init(userId, enterpriseId) {
  const { channel, list, more } = await initChart(userId, enterpriseId)
  console.log(channel.value, list.value, more)
  items.value = list.value
  setTimeout(() => {
    scrollBottom()
    console.log('滚动')
  }, 1500)
}

function handleSend () {
  console.log('发送')
}

function scrollBottom () {
  const chat = chatRef.value
  if (chat) {
    nextTick(function () {
      console.log(chat.scrollHeight)
      chat.scrollTop = chat.scrollHeight
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    })
  }
}

onLoad((options) => {
  info.value = options
  init(options.id, options.enterpriseId)
})
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: calc(100vh - 88rpx);
  display: flex;
  flex-direction: column;
  &-top {
    padding: 0 60rpx;
    box-sizing: border-box;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    // text-align: center;
    border-bottom: 2rpx solid #EEE;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .subText {
      font-size: .85em;
      color: #999;
      .gun {
        padding: 0 10rpx;
      }
    }
  }

  &-main {
    flex: 1;
    height: 0;
    padding: 40rpx;
    overflow-y: auto;
    &-time {
      user-select: none;
      position: relative;
      top: 16rpx;
      margin: 40rpx 0;
      text-align: center;
      max-height: 40rpx;
      text-align: center;
      font-weight: 400;
      font-size: .85em;
      color: #999;
    }
    .message-view_item {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      margin: 16rpx 0;
      position: relative;
      .image {
        width: 60rpx;
        height: 60rpx;
        border-radius: 180rpx;
        // flex-grow: 1;
        // flex-shrink: 0;
        overflow: hidden;
        .header {
          width: 60rpx;
          height: 60rpx;
        }
      }
      .message-text {
        overflow-wrap: break-word;
        background-color: #f0f2f5;
        border-radius: 12rpx;
        max-width: 80%;
        padding: 20rpx;
        &.active {
          background: #d5e6e8;
        }
      }
    }
    .is-self {
      flex-direction: row-reverse;
      display: flex;
      .message-text {
        margin-right: 20rpx;
      }
    }
    .is-other {
      .message-text {
        margin-left: 20rpx;
      }
    }
  }
  &-bottom {
    max-height: 300rpx;
    border-top: 2rpx solid #EEE;
    textarea {
      width: 100%;
      min-height: 40rpx;
      padding: 20rpx;
      background: rgba(211, 211, 211, 0.05);
    }
  }
}
</style>