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">
        <!--
          单元素 + @keyframes 关键帧动画：方向由 keyframes 的 from/to 固定，
          不依赖 CSS transition 的起点推导，换条时用 cycleKey 强制重建元素(动画必然从 from 重播)。
          - feed-anim-in  : from translateY(100%)(底部) → to translateY(0)（从下往上进入）
          - feed-anim-out : from translateY(0) → to translateY(-100%)(顶部)（向上翻出）
        -->
        <view
          :key="cycleKey"
          class="feed-item"
          :class="phase === 'out' ? 'feed-anim-out' : 'feed-anim-in'"
          :style="animPauseStyle"
          @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: '消息' }

// 入场/出场动画时长(ms)，需与 CSS keyframes 的 duration 保持一致
var ANIM_MS = 400

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 {
      // phase: 'in' | 'show' | 'out'
      // in   : 正在从底部翻入（feed-anim-in 动画中）
      // show : 已翻入到中间，停留 interval 毫秒
      // out  : 正在向上翻出（feed-anim-out 动画中）
      phase: 'in',
      // 切条时 +1 强制重建元素，保证 keyframes 动画从 from 重播
      cycleKey: 0,
      currentIndex: 0,
      _touchPaused: false,
      detail: null,
      detailVisible: false,
      _timer: null
    }
  },
  computed: {
    // 合并 items + notices，去重（父页已通过 feedItems 过滤已查看项）
    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]
    },
    // 触摸/弹层打开时暂停动画，避免后台空转
    animPauseStyle: function() {
      if (this._touchPaused || this.detailVisible) {
        return { animationPlayState: 'paused' }
      }
      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.cycleKey++
      this.phase = 'in'
      this._startAutoPlay()
    }
  },
  mounted: function() { this._startAutoPlay() },
  beforeDestroy: function() { this._stopAutoPlay() },
  methods: {
    // ─── 状态机（定时器链驱动） ───────────────────────────────────
    // 元素动画由 keyframes 自行播放；这里只在正确时机切换 phase
    _startAutoPlay: function() {
      this._stopAutoPlay()
      var self = this
      this._timer = setTimeout(function() { self._tick() }, ANIM_MS + 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.phase === 'in') {
        // 翻入动画结束，进入展示期
        self.phase = 'show'
        self._timer = setTimeout(function() { self._tick() }, self.interval)
      } else if (self.phase === 'show') {
        // 展示期结束，开始向上翻出
        self.phase = 'out'
        self._timer = setTimeout(function() { self._tick() }, ANIM_MS + 50)
      } else if (self.phase === 'out') {
        // 翻出结束：切到下一条，重建元素重新翻入
        self.currentIndex = (self.currentIndex + 1) % (self.visibleList.length || 1)
        self.cycleKey++
        self.phase = 'in'
        self._startAutoPlay()
      }
    },
    // ─── 用户交互 ───────────────────────────────────────────────────
    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 lang="scss">
.family-feed {
  margin: 12rpx 30rpx 0;
  background: $app-surface;
  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: $facade-text-strong; }
.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;
}

/* 条目基础样式：绝对定位，占满视口一行 */
.feed-item {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48rpx;
  line-height: 48rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/*
  关键帧动画方向固定，不受初始样式影响：
  - 入场（从下往上）：底部 translateY(100%) → 中间 translateY(0)
  - 出场（向上翻出）：中间 translateY(0) → 顶部 translateY(-100%)
  forwards 保持动画结束后的位置（元素停在 translateY(0) / translateY(-100%)）
*/
.feed-anim-in {
  animation: feedSlideUpIn 0.4s ease-in-out forwards;
}

.feed-anim-out {
  animation: feedSlideUpOut 0.4s ease-in-out forwards;
}

@keyframes feedSlideUpIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes feedSlideUpOut {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

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

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

.feed-count {
  flex-shrink: 0; margin-left: 12rpx;
  font-size: 20rpx; color: $brand-primary;
  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: $facade-text-ghost; }

/* ===== 消息详情弹层 ===== */
.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: $app-surface; 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: $facade-text-strong; }
.feed-detail-time { font-size: 20rpx; color: $facade-text-muted; margin-top: 4rpx; }
.feed-detail-close { font-size: 40rpx; color: $facade-text-ghost-light; line-height: 1; padding: 0 8rpx; flex-shrink: 0; }

.feed-detail-title {
  display: block; font-size: 30rpx; font-weight: bold; color: $facade-text-strong;
  line-height: 1.4; margin-top: 24rpx;
}
.feed-detail-content {
  display: block; font-size: 26rpx; color: $facade-text-body; line-height: 1.6; margin-top: 12rpx;
}
.feed-detail-amount {
  display: inline-block; margin-top: 16rpx;
  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
  border-radius: 999rpx; padding: 6rpx 20rpx;
}
.feed-detail-amount-text { font-size: 24rpx; color: $app-surface; font-weight: bold; }
.feed-detail-btn {
  margin-top: 28rpx; height: 76rpx; border-radius: 38rpx;
  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
  display: flex; align-items: center; justify-content: center;
}
.feed-detail-btn-text { font-size: 28rpx; color: $app-surface; font-weight: bold; }
</style>