agri-app/pages/news/index.vue

<template>
  <view >
<!--    <view class="nav-list">
      <view class="nav-item" v-for="(item, index) in navItems" :key="index" @tap="switchTab(index)">
        <image :src="item.icon" mode="aspectFit" class="nav-icon"></image>
        <text :class="['nav-text', { 'active': currentTab === index }]">{{ item.title }}</text>
        <view v-if="item.count > 0" class="nav-badge">{{ item.count }}</view>
      </view>
    </view>-->

    <scroll-view scroll-y class="message-list" @scrolltolower="loadMore">
      <view v-for="(msg, index) in filteredMessages" :key="index" class="message-item" @tap="onMessageTap(msg)">
        <image :src="msg.avatar" class="avatar" mode="aspectFill"></image>
        <view class="message-content">
          <view class="message-header">
            <text class="sender">{{ msg.sender }}</text>
            <text class="time">{{ msg.time }}</text>
          </view>
          <text class="preview" :class="{ 'unread': msg.unread }">{{ msg.preview }}</text>
        </view>
        <view v-if="msg.unread" class="unread-badge">
          <text>{{ msg.unreadCount }}</text>
        </view>
      </view>
      <view v-if="isLoading" class="loading">
        <uni-icons type="spinner-cycle" size="24" color="#007AFF"></uni-icons>
        <text>加载中...</text>
      </view>
    </scroll-view>


    <view v-if="filteredMessages.length === 0" class="empty-state">
      <uni-icons type="inbox" size="64" color="#999"></uni-icons>
      <text>暂无消息</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      navItems: [{
        title: '评论',
        icon: 'https://www.zenkuai.com/attachment/demo/1.png',
        count: 5
      },
        {
          title: '粉丝',
          icon: 'https://www.zenkuai.com/attachment/demo/2.png',
          count: 2
        },
        {
          title: '点赞',
          icon: 'https://www.zenkuai.com/attachment/demo/2.png',
          count: 10
        }
      ],
      searchText: '',
      messages: [
        {
        id: 1,
        sender: '系统通知',
        avatar: '/static/news.png',
        preview: '您有一条新的系统通知，请查看',
        time: '10:30',
        unread: true,
        unreadCount: 1
      },
        {
          id: 2,
          sender: '告警中心',
          avatar: '/static/alarm.png',
          preview: '您有一条新告警->',
          time: '昨天',
          unread: false,
          unreadCount: 0
        },
        {
          id: 3,
          sender: '客服小美',
          avatar: '/static/cs.png',
          preview: '您好，请问有什么可以帮到您的吗？',
          time: '昨天',
          unread: false,
          unreadCount: 0
        },
        // 可以添加更多消息数据
      ],
      isLoading: false
    }
  },
  computed: {
    filteredMessages() {
      return this.messages.filter(msg =>
          msg.sender.toLowerCase().includes(this.searchText.toLowerCase()) ||
          msg.preview.toLowerCase().includes(this.searchText.toLowerCase())
      )
    }
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
      // 这里可以根据选中的标签加载相应的消息数据
      console.log('Switched to tab:', this.navItems[index].title);
    },
    onMessageTap(msg) {
      console.log('Message tapped:', msg)
      uni.navigateTo({
        url: `/pages/message-detail/message-detail?id=${msg.id}`
      })
    },
    loadMore() {
      if (this.isLoading) return
      this.isLoading = true
      // 模拟加载更多消息
      setTimeout(() => {
        // 这里应该是从服务器加载更多消息的逻辑
        this.messages.push(...[{
          id: this.messages.length + 1,
          sender: '新消息',
          avatar: 'https://www.zenkuai.com/attachment/demo/1.png',
          preview: '这是一条新加载的消息',
          time: '刚刚',
          unread: true,
          unreadCount: 1
        }])
        this.isLoading = false
      }, 1000)
    }
  }
}
</script>

<style scoped>

.msg-center {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}


.header {
  background-color: #ffffff;
  padding: 40rpx 20rpx 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}


.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.nav-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.nav-text {
  font-size: 24rpx;
  color: #666;
}

.nav-text.active {
  color: #007AFF;
  font-weight: bold;
}

.nav-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background-color: #FF3B30;
  color: #ffffff;
  border-radius: 20rpx;
  padding: 2rpx 10rpx;
  font-size: 20rpx;
}

.message-list {
  flex: 1;
  margin: 30rpx 20rpx;
}
.message-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  width: 94%;
  height: 150rpx;
}

.message-item:active {
  transform: scale(0.98);
}

.avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.message-content {
  flex: 1;
  margin-right: 20rpx;
}

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

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

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

.preview {
  font-size: 26rpx;
  color: #666;
}

.preview.unread {
  font-weight: bold;
  color: #333;
}

.unread-badge {
  background-color: #007AFF;
  color: #ffffff;
  border-radius: 20rpx;
  padding: 4rpx 12rpx;
  font-size: 24rpx;
}


.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.empty-state text {
  margin-top: 20rpx;
  font-size: 28rpx;
}


.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
}

.loading text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #007AFF;
}
</style>