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

<template>
  <view class="container">
    <view class="message-list">
      <view class="message-item" v-for="msg in messages" :key="msg.id" @click="openChat(msg)">
        <view class="message-avatar">
          <image :src="msg.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
          <view class="unread-badge" v-if="msg.unreadCount > 0">{{ msg.unreadCount }}</view>
        </view>
        <view class="message-content">
          <view class="message-header">
            <text class="sender-name">{{ msg.senderName }}</text>
            <text class="message-time">{{ msg.time }}</text>
          </view>
          <text class="message-preview">{{ msg.preview }}</text>
        </view>
      </view>
      <view class="empty-tip" v-if="messages.length === 0">
        <text>暂无消息</text>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      messages: []
    }
  },
  onLoad() {
    this.loadMessages()
  },
  methods: {
    async loadMessages() {
      try {
        const res = await getGuideMessages()
        if (res.data) {
          this.messages = res.data
        }
      } catch (e) {
        console.error(e)
      }
    },
    openChat(msg) {
      uni.navigateTo({
        url: `/pages/teacher/chat?conversationId=${msg.conversationId}&name=${msg.senderName}`
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.message-list {
  background: #fff;
  border-radius: 16rpx;
}

.message-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.message-item:last-child {
  border-bottom: none;
}

.message-avatar {
  position: relative;
  margin-right: 24rpx;
}

.message-avatar image {
  width: 90rpx;
  height: 90rpx;
  border-radius: 45rpx;
}

.unread-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background: #F56C6C;
  color: #fff;
  font-size: 20rpx;
  min-width: 36rpx;
  height: 36rpx;
  border-radius: 18rpx;
  text-align: center;
  line-height: 36rpx;
  padding: 0 8rpx;
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.sender-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.message-time {
  font-size: 24rpx;
  color: #999;
}

.message-preview {
  font-size: 26rpx;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 60rpx 0;
}
</style>