Dining_Hall/pages/mine/announcement/index.vue

<template>
  <view class="message-page">
    <!-- 搜索框 -->
    <u-search
      v-model="searchText"
      placeholder="输入搜索关键词"
      :show-action="false"
      :clearabled="true"
      shape="round"
      bg-color="#f5f5f5"
    ></u-search>

    <!-- 标签页 -->
    <div style="margin-top: 4%;">
      <Tabs :tabList="tabList" @changeTab="handleTabChange" />
    </div>

    <!-- 消息列表 -->
    <view class="message-list">
      <view
        class="message-item"
        v-for="(item, index) in messageList"
        :key="index"
        @click="handleMessageClick(item)"
      >
        <!-- 左侧图标 -->
        <view class="icon-wrapper" :class="item.type">
          <u-icon
            :name="item.icon"
            color="#fff"
            size="24"
          ></u-icon>
        </view>

        <!-- 消息内容 -->
        <view class="content">
          <view class="title">{{ item.title }}</view>
          <view class="desc">{{ item.description }}</view>
        </view>

        <!-- 右侧信息 -->
        <view class="right-info">
          <view class="time">{{ item.time }}</view>
          <view v-if="!item.isRead" class="unread-dot"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import UTabs from '../../../uni_modules/uview-ui/components/u-tabs/u-tabs.vue'
import Tabs from '../../components/Tabs.vue'
import UIcon from '../../../uni_modules/uview-ui/components/u-icon/u-icon.vue'

export default {
  name: 'index',
  components: { UIcon, Tabs, UTabs },
  data() {
    return {
      searchText: '',
      currentTab: 0,
      tabList: ['全部', '已查看', '未查看'],
      messageList: [
        {
          type: 'upgrade',
          icon: 'arrow-upward',
          title: '升级通知',
          description: '系统维护将于明天下午4点进行，期间可能无法正常使用...',
          time: '10分钟前',
          isRead: false
        },
        {
          type: 'upgrade',
          icon: 'arrow-upward',
          title: '升级通知',
          description: '系统维护将于明天下午4点进行，期间可能无法正常使用...',
          time: '1小时前',
          isRead: false
        },
        {
          type: 'read',
          icon: 'warning',
          title: '故障通知',
          description: '系统维护将于明天下午4点进行，期间可能无法正常使用...',
          time: '2024/10/8',
          isRead: true
        },
        {
          type: 'read',
          icon: 'arrow-upward',
          title: '升级通知',
          description: '系统维护将于明天下午4点进行，期间可能无法正常使用...',
          time: '2024/10/8',
          isRead: true
        }
      ]
    }
  },
  methods: {
    handleTabChange(index) {
      console.log('🚀 ~ changeTab ~ index:', index)
      this.currentTab = index
    },

    handleMessageClick(item) {
      console.log('🚀 ~ handleMessageClick ~ ', item)
      uni.navigateTo({
        url: '/pages/mine/announcement/aDetails'
      })
    },
  }
}
</script>

<style scoped lang="scss">
  page {
    background: #fff;
  }
  .message-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    background: #fff;
    padding: 12px;
  }

  .message-list {
    padding: 12px 0;
  }

  .message-item {
    display: flex;
    align-items: flex-start;
    background-color: #ffffff;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 8px;
  }

  .icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
  }

  .upgrade {
    background-color: #2ed573;
  }

  .warning {
    background-color: #ff7f50;
  }

  .read {
    background-color: #b5bec9;
  }

  .content {
    flex: 1;
    margin-right: 12px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
  }

  .desc {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
  }

  .right-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .time {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
  }

  .unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ff0000;
  }
</style>