fjrcloud-community-app/pages/commission/message.vue

<!-- 消息中心 -->
<template>
  <s-layout title="消息" navbar="inner">
    <view class="msg-page">
      <!-- 消息列表 -->
      <scroll-view scroll-y class="msg-scroll">
        <view class="msg-list">
          <view 
            v-for="(item, index) in msgList" 
            :key="item.id"
            class="msg-item"
            @tap="handleMsgTap(item)"
          >
            <view class="msg-avatar">
              <image :src="item.avatar" mode="aspectFill" />
              <view v-if="item.unread" class="unread-dot"></view>
            </view>
            <view class="msg-content">
              <view class="msg-header">
                <text class="msg-name">{{ item.name }}</text>
                <text class="msg-time">{{ item.time }}</text>
              </view>
              <view class="msg-body">
                <text class="msg-text">{{ item.content }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

      <!-- 空状态（无数据时显示） -->
      <view v-if="msgList.length === 0" class="empty-state">
        <text class="empty-text">暂无消息</text>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref } from 'vue';

// 模拟消息数据
const msgList = ref([
  { id: 1, name: '系统通知', avatar: '/static/img/login_img.png', content: '您的佣金已到账', time: '10:30', unread: true },
  { id: 2, name: '推广助手', avatar: '/static/img/login_img.png', content: '您有新的团队成员加入', time: '昨天', unread: false },
  { id: 3, name: '订单通知', avatar: '/static/img/login_img.png', content: '您推广的商品已成功下单', time: '01-08', unread: false }
]);

// 点击消息
function handleMsgTap(item) {
  console.log('查看消息:', item);
}
</script>

<style lang="scss" scoped>
.msg-page {
  min-height: 100vh;
  background-color: #F5F5F5;
}

/* 滚动区域 */
.msg-scroll {
  height: calc(100vh - 88rpx);
}

/* 消息列表 */
.msg-list {
  padding: 16rpx 24rpx;
}

/* 单条消息 */
.msg-item {
  display: flex;
  align-items: flex-start;
  padding: 24rpx;
  margin-bottom: 20rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;

  /* 头像 */
  .msg-avatar {
    position: relative;
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;

    image {
      width: 100%;
      height: 100%;
    }

    /* 未读红点 */
    .unread-dot {
      position: absolute;
      top: 0;
      right: 0;
      width: 18rpx;
      height: 18rpx;
      background-color: #FA7E49;
      border-radius: 50%;
      border: 4rpx solid #FFFFFF;
    }
  }

  /* 内容 */
  .msg-content {
    flex: 1;
    margin-left: 20rpx;
    overflow: hidden;
  }
}

/* 头部：名称 + 时间 */
.msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;

  .msg-name {
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
  }

  .msg-time {
    font-size: 24rpx;
    color: #999999;
    flex-shrink: 0;
    margin-left: 16rpx;
  }
}

/* 消息内容 */
.msg-body {
  .msg-text {
    font-size: 26rpx;
    color: #888888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
}

/* 空状态 */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;

  .empty-text {
    font-size: 28rpx;
    color: #999999;
  }
}
</style>