cfc/cfc-frontend/pages/notification/index.vue

<template>
  <view class="nt-wrap">
    <view class="nt-loading" v-if="loading">加载中...</view>

    <view class="nt-empty" v-else-if="list.length === 0">
      <text class="nt-empty-icon">🔔</text>
      <text class="nt-empty-text">暂无通知</text>
    </view>

    <view class="nt-list" v-else>
      <view class="nt-item" v-for="item in list" :key="getKey(item)" @click="onTap(item)">
        <view class="nt-item-icon">
          <text class="nt-icon">{{ getIcon(item.type) }}</text>
          <view class="nt-unread" v-if="item.is_read === 0 || item.isRead === 0"></view>
        </view>
        <view class="nt-item-body">
          <view class="nt-item-top">
            <text class="nt-item-title">{{ item.title }}</text>
            <text class="nt-item-time">{{ formatTime(item.created_at || item.createdAt) }}</text>
          </view>
          <text class="nt-item-content">{{ item.content }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getNotificationList } from '../../utils/api.js'
import { readNotification } from '../../utils/api.js'
import { parseDate } from '../../utils/format.js'

export default {
  data() {
    return {
      list: [],
      loading: false
    }
  },
  onLoad() {
    this.loadList()
    this._onLoadFired = true
  },
  onShow() {
    if (this._onLoadFired) {
      this._onLoadFired = false
    } else {
      this.loadList()
    }
  },
  onPullDownRefresh() {
    this.loadList()
  },
  methods: {
    getKey(item) {
      return item.id || Math.random()
    },
    getIcon(type) {
      if (type === 'report_ready') return '📋'
      if (type === 'reward_granted') return '🎁'
      return '🔔'
    },
    formatTime(dateStr) {
      var d = parseDate(dateStr)
      if (!d) return dateStr || ''
      var y = d.getFullYear()
      var m = d.getMonth() + 1
      var day = d.getDate()
      var h = d.getHours()
      var min = d.getMinutes()
      return y + '-' + pad(m) + '-' + pad(day) + ' ' + pad(h) + ':' + pad(min)
    },
    loadList() {
      var self = this
      self.loading = true
      uni.showLoading({ title: '加载中...', mask: true })
      getNotificationList().then(function(res) {
        uni.hideLoading()
        self.loading = false
        uni.stopPullDownRefresh()
        var data = res && res.data
        self.list = Array.isArray(data) ? data : []
      }).catch(function() {
        uni.hideLoading()
        self.loading = false
        uni.stopPullDownRefresh()
        self.list = []
        uni.showToast({ title: '加载失败', icon: 'none' })
      })
    },
    onTap(item) {
      var self = this
      var isRead = item.is_read === 0 || item.isRead === 0
      if (isRead) {
        // 标记已读
        readNotification({ id: item.id }).then(function() {
          item.is_read = 1
          item.isRead = 1
          self.$forceUpdate()
        }).catch(function() {})
      }
      // 导航
      var refType = item.ref_type || item.refType || ''
      var refId = item.ref_id || item.refId
      if (refType === 'task') {
        uni.navigateTo({ url: '/pages/tasks/tasks' })
      }
    }
  }
}

function pad(n) {
  return n < 10 ? '0' + n : '' + n
}
</script>

<style scoped>
.nt-wrap {
  min-height: 100vh;
  background: #FFF7ED;
  padding: 20rpx 0;
  box-sizing: border-box;
}

.nt-loading {
  text-align: center;
  font-size: 28rpx;
  color: #999;
  padding: 80rpx 0;
}

.nt-empty {
  text-align: center;
  padding: 120rpx 0;
}

.nt-empty-icon {
  font-size: 80rpx;
  display: block;
}

.nt-empty-text {
  display: block;
  font-size: 32rpx;
  color: #999;
  margin-top: 20rpx;
}

.nt-item {
  display: flex;
  align-items: flex-start;
  background: #fff;
  padding: 28rpx 32rpx;
  margin-bottom: 2rpx;
}

.nt-item:active {
  background: #F9FAFB;
}

.nt-item-icon {
  position: relative;
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
  background: rgba(249, 115, 22, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.nt-icon {
  font-size: 32rpx;
}

.nt-unread {
  position: absolute;
  top: -2rpx;
  right: -2rpx;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #EF4444;
  border: 2rpx solid #fff;
}

.nt-item-body {
  flex: 1;
}

.nt-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.nt-item-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
}

.nt-item-time {
  font-size: 22rpx;
  color: #999;
  margin-left: 12rpx;
  flex-shrink: 0;
}

.nt-item-content {
  display: block;
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}
</style>