cfc/cfc-frontend/pages/teacher/chat.vue

<template>
  <view class="chat-container">
    <view class="chat-header">
      <text class="chat-title">{{ chatName }}</text>
    </view>

    <scroll-view class="chat-messages" scroll-y :scroll-into-view="scrollInto">
      <view
        class="message-item"
        :class="{ mine: msg.isMine }"
        v-for="(msg, index) in messages"
        :key="index"
        :id="'msg-' + index"
      >
        <view class="message-time">{{ msg.time }}</view>
        <view class="message-bubble">
          {{ msg.content }}
        </view>
      </view>
    </scroll-view>

    <view class="chat-input">
      <input
        class="input-field"
        v-model="inputText"
        placeholder="输入消息..."
        @confirm="sendMessage"
      />
      <button class="send-btn" @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script>
import { getGuideMessages } from '../../utils/api.js'
import config from '@/config.js'

export default {
  data() {
    return {
      conversationId: '',
      chatName: '',
      messages: [],
      inputText: '',
      scrollInto: ''
    }
  },
  onLoad(options) {
    this.conversationId = options.conversationId || ''
    this.chatName = options.name || '聊天'
    this.loadMessages()
  },
  methods: {
    async loadMessages() {
      try {
        const res = await getGuideMessages()
        if (res && res.code === 200 && res.data && res.data.records) {
          this.messages = res.data.records.map((m) => {
            var t = m.repliedAt || m.createdAt || ''
            return {
              content: m.replyContent || m.content,
              time: t.slice(0, 19).replace('T', ' '),
              isMine: !!(m.replyContent && m.replyContent.trim())
            }
          })
        }
      } catch (e) {
        console.error(e)
        this.messages = [
          { content: '老师，孩子今天的任务完成了', time: '2024-01-15 10:20', isMine: false },
          { content: '好的，我看一下', time: '2024-01-15 10:25', isMine: true },
          { content: '谢谢老师', time: '2024-01-15 10:30', isMine: false }
        ]
      }
      this.$nextTick(() => {
        this.scrollToBottom()
      })
    },
    async sendMessage() {
      if (!this.inputText.trim()) return

      const newMessage = {
        content: this.inputText,
        time: new Date().toLocaleString(),
        isMine: true
      }
      this.messages.push(newMessage)
      this.inputText = ''

      this.$nextTick(() => {
        this.scrollToBottom()
      })

      try {
        await uni.request({
          url: `${config.API_BASE_URL}/api/guide/messages/list`,
          method: 'POST',
          header: { Authorization: `Bearer ${uni.getStorageSync('token')}` },
          data: {
            conversationId: this.conversationId,
            content: newMessage.content
          }
        })
      } catch (e) {
        console.error(e)
      }
    },
    scrollToBottom() {
      const len = this.messages.length
      if (len > 0) {
        this.scrollInto = 'msg-' + (len - 1)
      }
    }
  }
}
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
}

.chat-header {
  background: #fff;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #eee;
}

.chat-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.chat-messages {
  flex: 1;
  padding: 30rpx;
  overflow-y: auto;
}

.message-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 30rpx;
}

.message-item.mine {
  align-items: flex-end;
}

.message-time {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.message-bubble {
  max-width: 70%;
  padding: 20rpx 30rpx;
  background: #fff;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #333;
  word-wrap: break-word;
}

.message-item.mine .message-bubble {
  background: #667eea;
  color: #fff;
}

.chat-input {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
}

.input-field {
  flex: 1;
  padding: 20rpx 30rpx;
  background: #f5f5f5;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.send-btn {
  margin-left: 20rpx;
  padding: 20rpx 40rpx;
  background: #667eea;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style>