xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/system-messages.vue

<template>
  <view class="matchmaker-system-page">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack"></view>
      <text class="header-title">系统通知</text>
      <view class="placeholder">
        <button class="read-all-btn" @click.stop="markAllRead" size="mini">一键已读</button>
      </view>
    </view>

    <!-- 列表区域 -->
    <scroll-view scroll-y class="content" @scrolltolower="loadMore">
      <view v-if="loading && list.length === 0" class="loading-container">
        <text>加载中...</text>
      </view>

      <view v-else-if="list.length === 0" class="empty-container">
        <text>暂无系统通知</text>
      </view>

      <view v-else>
        <view
          v-for="item in list"
          :key="item.id"
          class="system-item"
          @click="openDetail(item)"
        >
          <view class="item-left">
            <view class="icon-wrapper">
              <text class="icon">📢</text>
              <view v-if="item.isRead === 0" class="dot"></view>
            </view>
          </view>
          <view class="item-body">
            <view class="item-title-row">
              <text class="item-title">{{ item.title || '系统通知' }}</text>
              <text class="item-time">{{ formatTime(item.createdAt || item.created_at) }}</text>
            </view>
            <text class="item-content">{{ item.content }}</text>
          </view>
        </view>

        <view class="load-more" v-if="hasMore">
          {{ loading ? '加载中...' : '上拉加载更多' }}
        </view>
        <view class="load-more" v-else>没有更多了</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import api from '@/utils/api.js'

export default {
  data() {
    return {
      userId: null,
      list: [],
      pageNum: 1,
      pageSize: 20,
      hasMore: true,
      loading: false
    }
  },
  onLoad() {
    this.userId = uni.getStorageSync('userId')
    this.loadList()
  },
  methods: {
    async loadList() {
      if (this.loading || !this.hasMore) return
      this.loading = true
      try {
        const res = await api.message.getSystemList(this.userId, this.pageNum, this.pageSize)
        const data = (res && (res.list || res.data?.list)) || []
        this.list = this.list.concat(data)
        const total = (typeof res.total === 'number') ? res.total : (res.data?.total || this.list.length)
        this.hasMore = this.list.length < total
        this.pageNum++
      } catch (e) {
        console.log('红娘系统通知加载失败', e)
      } finally {
        this.loading = false
      }
    },
    loadMore() {
      this.loadList()
    },
    async markAllRead() {
      if (!this.userId) return
      try {
        await api.message.markAllSystemRead(this.userId)
        // 本地列表全部置为已读
        this.list.forEach(item => {
          item.isRead = 1
        })
        uni.showToast({ title: '已全部标记为已读', icon: 'success' })
      } catch (e) {
        console.log('一键已读失败', e)
        uni.showToast({ title: '操作失败，请稍后重试', icon: 'none' })
      }
    },
    async openDetail(item) {
      try {
        const data = await api.message.getSystemDetail(item.id)
        if (item.isRead === 0) {
          try {
            await api.message.markSystemRead(item.id)
            item.isRead = 1
          } catch (e) {}
        }
        uni.showModal({
          title: data.title || '系统通知',
          content: (data.content || '').replace(/\n/g, '\n'),
          showCancel: false
        })
      } catch (e) {
        uni.showToast({ title: '获取详情失败', icon: 'none' })
      }
    },
    formatTime(t) {
      if (!t) return ''
      const d = new Date(t)
      const month = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      const hour = String(d.getHours()).padStart(2, '0')
      const minute = String(d.getMinutes()).padStart(2, '0')
      return `${month}-${day} ${hour}:${minute}`
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.matchmaker-system-page {
  min-height: 100vh;
  /* 与红娘消息页保持一致：顶部淡粉 -> 中部淡紫 -> 底部趋近白色 */
  background: linear-gradient(180deg, #fff1f7 0%, #f6ebff 45%, #fbf7ff 75%, #ffffff 100%);
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  padding-top: calc(25rpx + env(safe-area-inset-top));
  background: transparent;
  border-bottom-width: 0;

  .back-btn {
    width: 70rpx;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 240, 240, 0.5);
    border-radius: 50%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');
    background-size: 40rpx 40rpx;
    background-repeat: no-repeat;
    background-position: center;
  }

  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .placeholder {
    min-width: 120rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .read-all-btn {
      min-width: 96rpx;
      height: 48rpx;
      line-height: 48rpx;
      padding: 0 12rpx;
      font-size: 22rpx;
      color: #666;
      background: #ffffff;
      border-radius: 999rpx;
      border: 1rpx solid #e5e5e5;
      box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.04);
      text-align: center;
    }
  }
}

.content {
  flex: 1;
  padding: 20rpx 20rpx 120rpx;
}

.system-item {
  display: flex;
  padding: 26rpx 24rpx;
  margin-bottom: 20rpx;
  border-radius: 24rpx;
  background: #FFFFFF;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
}

.item-left {
  margin-right: 20rpx;

  .icon-wrapper {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #b39ddb 0%, #ce93d8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .icon {
      font-size: 32rpx;
    }

    .dot {
      position: absolute;
      top: -6rpx;
      right: -6rpx;
      width: 18rpx;
      height: 18rpx;
      border-radius: 50%;
      background: #FF4444;
      border: 2rpx solid #FFFFFF;
    }
  }
}

.item-body {
  flex: 1;
  min-width: 0;

  .item-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8rpx;

    .item-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
    }

    .item-time {
      font-size: 24rpx;
      color: #b0a6c5;
      margin-left: 20rpx;
      flex-shrink: 0;
    }
  }

  .item-content {
    font-size: 26rpx;
    color: #777;
    line-height: 1.5;
  }
}

.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}

.load-more {
  text-align: center;
  padding: 20rpx 0 40rpx;
  color: #999;
  font-size: 24rpx;
}
</style>