cfc/cfc-frontend/components/FamilyFeed.vue

<template>
  <view class="family-feed">
    <!-- 单条轮播行：标题 + 从下往上翻动 -->
    <view class="feed-row" v-if="visibleList.length > 0">
      <view class="feed-header" v-if="showHeader">
        <text class="feed-title">动态</text>
        <text class="feed-icon animate-spin">📢</text>
      </view>
      <view class="feed-viewport"
            @touchstart="onTouchStart"
            @touchend="onTouchEnd"
            @touchcancel="onTouchEnd">
        <view class="feed-item"
              :class="itemClass"
              :style="itemInlineStyle"
              @click="onItemTap(currentItem)">
          <text class="feed-item-text">{{ currentItem.text }}</text>
          <view class="feed-item-dot" v-if="currentItem.unread"></view>
        </view>
      </view>
      <text class="feed-count" v-if="visibleList.length > 1">{{ visibleList.length }} 条</text>
    </view>
    <view v-else class="feed-empty">
      <text class="feed-empty-text">暂无动态</text>
    </view>

    <!-- 详情弹层 -->
    <view class="feed-detail-mask" v-if="detailVisible" @click="closeDetail">
      <view class="feed-detail-card" @click.stop>
        <view class="feed-detail-head">
          <view class="feed-detail-icon-wrap">
            <text class="feed-detail-icon">{{ detailIcon }}</text>
          </view>
          <view class="feed-detail-head-texts">
            <text class="feed-detail-type">{{ detailTypeLabel }}</text>
            <text class="feed-detail-time" v-if="detailTime">{{ detailTime }}</text>
          </view>
          <text class="feed-detail-close" @click="closeDetail">×</text>
        </view>
        <text class="feed-detail-title">{{ detailTitle }}</text>
        <text class="feed-detail-content">{{ detailContent }}</text>
        <view class="feed-detail-amount" v-if="detailAmount">
          <text class="feed-detail-amount-text">{{ detailAmount }}</text>
        </view>
        <view class="feed-detail-btn" @click="closeDetail">
          <text class="feed-detail-btn-text">知道了</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var TYPE_META = {
  energy:       { icon: '⚡', label: '能量变动' },
  points:       { icon: '🪙', label: '积分变动' },
  cf:           { icon: '💰', label: 'CF 值变动' },
  task:         { icon: '✅', label: '任务完成' },
  notice:       { icon: '📢', label: '家庭公告' },
  notification: { icon: '📬', label: '系统通知' },
  feed:         { icon: '📣', label: '家庭动态' }
}
var DEFAULT_META = { icon: '📣', label: '消息' }

export default {
  name: 'FamilyFeed',
  props: {
    items: { type: Array, default: function() { return [] } },
    notices: { type: Array, default: function() { return [] } },
    showHeader: { type: Boolean, default: true },
    interval: { type: Number, default: 3000 }
  },
  data: function() {
    return {
      // state: 'entering' | 'visible' | 'leaving'
      // entering: jump to translateY(100%), next frame animates to 0
      // visible: displayed for interval ms, then animates out
      // leaving: animates to translateY(-100%), then advance to next item
      state: 'entering',
      currentIndex: 0,
      _touchPaused: false,
      detail: null,
      detailVisible: false,
      _timer: null
    }
  },
  computed: {
    visibleList: function() {
      var list = [], seen = {}, i
      var items = this.items || []
      for (i = 0; i < items.length; i++) {
        var it = items[i]
        if (!it) continue
        var key = it._feedKey || ''
        if (key && seen[key]) continue
        if (key) seen[key] = true
        list.push(it)
      }
      var notices = this.notices || []
      for (i = 0; i < notices.length; i++) {
        var n = notices[i]
        if (!n) continue
        var raw = n.notice || n
        var nkey = 'notice-' + (raw.id !== undefined ? raw.id : '')
        if (nkey !== 'notice-' && seen[nkey]) continue
        if (nkey !== 'notice-') seen[nkey] = true
        list.push({
          text: n.text || raw.title || '',
          time: n.time || '',
          type: 'notice',
          title: raw.title || '公告',
          content: raw.content || '',
          amount: '',
          unread: false,
          _feedKey: nkey,
          _srcId: raw.id
        })
      }
      return list
    },
    currentItem: function() {
      var list = this.visibleList
      if (!list || list.length === 0) return null
      return list[this.currentIndex % list.length]
    },
    itemClass: function() {
      if (this.state === 'visible') return 'feed-item-visible'
      if (this.state === 'leaving') return 'feed-item-leaving'
      return 'feed-item-entering'
    },
    itemInlineStyle: function() {
      // leaving 时保持 transition:none，防止从顶部跳到下一条时产生反向动画
      // entering 时也保持 none，让下一帧再恢复 transition 做入场动画
      if (this.state === 'entering' || this.state === 'leaving') {
        return { transition: 'none' }
      }
      return {}
    },
    detailMeta: function() {
      var type = (this.detail && this.detail.type) || ''
      return TYPE_META[type] || DEFAULT_META
    },
    detailIcon:        function() { return this.detailMeta.icon },
    detailTypeLabel:   function() { return this.detailMeta.label },
    detailTitle:       function() { return (this.detail && this.detail.title) || '消息详情' },
    detailContent:     function() { return (this.detail && this.detail.content) || (this.detail && this.detail.text) || '暂无详细内容' },
    detailTime:        function() { return (this.detail && this.detail.time) || '' },
    detailAmount:      function() { return (this.detail && this.detail.amount) || '' }
  },
  watch: {
    visibleList: function(newList) {
      if (!newList || newList.length === 0) {
        this._stopAutoPlay()
        return
      }
      if (this.currentIndex >= newList.length) { this.currentIndex = 0 }
      this.state = 'entering'
      this._startAutoPlay()
    }
  },
  mounted: function() { this._startAutoPlay() },
  beforeDestroy: function() { this._stopAutoPlay() },
  methods: {
    _startAutoPlay: function() {
      this._stopAutoPlay()
      var self = this
      this._timer = setTimeout(function() { self._tick() }, 50)
    },
    _stopAutoPlay: function() {
      if (this._timer) { clearTimeout(this._timer); this._timer = null }
    },
    _tick: function() {
      var self = this
      if (self.visibleList.length === 0) return
      if (self._touchPaused || self.detailVisible) {
        self._timer = setTimeout(function() { self._tick() }, 200)
        return
      }
      if (self.state === 'entering') {
        self._timer = setTimeout(function() {
          if (self._touchPaused || self.detailVisible) { self._tick(); return }
          self.state = 'visible'
          self._timer = setTimeout(function() { self._tick() }, 400)
        }, 50)
      } else if (self.state === 'visible') {
        self._timer = setTimeout(function() {
          if (self._touchPaused || self.detailVisible) { self._tick(); return }
          self.state = 'leaving'
          self._timer = setTimeout(function() { self._tick() }, 400)
        }, self.interval)
      } else if (self.state === 'leaving') {
        self._timer = setTimeout(function() {
          if (self._touchPaused || self.detailVisible) { self._tick(); return }
          self.currentIndex = (self.currentIndex + 1) % (self.visibleList.length || 1)
          self.state = 'entering'
          self._tick()
        }, 400)
      }
    },
    onTouchStart: function() { this._touchPaused = true; this._stopAutoPlay() },
    onTouchEnd:   function() { this._touchPaused = false; this._startAutoPlay() },
    onItemTap:    function(item) {
      if (!item) return
      this.detail = item
      this.detailVisible = true
      this._touchPaused = false
      this._stopAutoPlay()
      this.$emit('viewed', item)
    },
    closeDetail:  function() {
      this.detailVisible = false
      this.detail = null
      this._startAutoPlay()
    }
  }
}
</script>

<style>
.family-feed {
  margin: 12rpx 30rpx 0;
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  overflow: hidden;
}

.feed-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 48rpx;
  line-height: 48rpx;
  overflow: hidden;
}

.feed-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4rpx;
  flex-shrink: 0;
  margin-right: 12rpx;
}

.feed-title { font-size: 24rpx; font-weight: bold; color: #333; }
.feed-icon  { font-size: 20rpx; }

@keyframes spin {
  0%, 100% { transform: rotate(0deg); }
  25%  { transform: rotate(-15deg); }
  75%  { transform: rotate(15deg); }
}
.animate-spin {
  display: inline-block;
  animation: spin 1.2s ease-in-out infinite;
}

/* 视口：固定一行高度，溢出裁剪 */
.feed-viewport {
  flex: 1;
  min-width: 0;
  height: 48rpx;
  overflow: hidden;
  position: relative;
}

/* 条目：绝对定位叠放，CSS transition 驱动翻转 */
.feed-item {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48rpx;
  line-height: 48rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: transform 0.4s ease-in-out;
}

.feed-item-entering { transform: translateY(100%); }
.feed-item-visible  { transform: translateY(0); }
.feed-item-leaving  { transform: translateY(-100%); }

.feed-item-text {
  flex: 1; min-width: 0;
  font-size: 24rpx; color: #666;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.feed-item-dot {
  width: 12rpx; height: 12rpx;
  border-radius: 50%; background: #EF4444;
  margin-left: 8rpx; flex-shrink: 0;
}

.feed-count {
  flex-shrink: 0; margin-left: 12rpx;
  font-size: 20rpx; color: #F97316;
  background: rgba(249,115,22,0.1);
  border-radius: 999rpx; padding: 2rpx 12rpx; line-height: 1.4;
}

.feed-empty {
  height: 48rpx; line-height: 48rpx; text-align: center;
}
.feed-empty-text { font-size: 24rpx; color: #ccc; }

/* ===== 详情弹层 ===== */
.feed-detail-mask {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 0 60rpx;
}

.feed-detail-card {
  width: 100%; max-height: 80vh; overflow-y: auto;
  background: #fff; border-radius: 24rpx;
  padding: 32rpx 28rpx 24rpx;
  animation: feedDetailIn 0.25s ease;
}

@keyframes feedDetailIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.feed-detail-head { display: flex; flex-direction: row; align-items: center; }

.feed-detail-icon-wrap {
  width: 64rpx; height: 64rpx; border-radius: 20rpx;
  background: rgba(249,115,22,0.1);
  display: flex; align-items: center; justify-content: center;
  margin-right: 16rpx; flex-shrink: 0;
}
.feed-detail-icon { font-size: 34rpx; }

.feed-detail-head-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.feed-detail-type { font-size: 26rpx; font-weight: bold; color: #333; }
.feed-detail-time { font-size: 20rpx; color: #999; margin-top: 4rpx; }
.feed-detail-close { font-size: 40rpx; color: #bbb; line-height: 1; padding: 0 8rpx; flex-shrink: 0; }

.feed-detail-title {
  display: block; font-size: 30rpx; font-weight: bold; color: #333;
  line-height: 1.4; margin-top: 24rpx;
}
.feed-detail-content {
  display: block; font-size: 26rpx; color: #666; line-height: 1.6; margin-top: 12rpx;
}
.feed-detail-amount {
  display: inline-block; margin-top: 16rpx;
  background: linear-gradient(135deg, #F97316, #FB923C);
  border-radius: 999rpx; padding: 6rpx 20rpx;
}
.feed-detail-amount-text { font-size: 24rpx; color: #fff; font-weight: bold; }
.feed-detail-btn {
  margin-top: 28rpx; height: 76rpx; border-radius: 38rpx;
  background: linear-gradient(135deg, #F97316, #FB923C);
  display: flex; align-items: center; justify-content: center;
}
.feed-detail-btn-text { font-size: 28rpx; color: #fff; font-weight: bold; }
</style>