cfc/cfc-frontend/components/RecommendedFeed.vue

<template>
  <view class="section">
    <view class="section-header">
      <text class="section-title">🔥 发现好物</text>
      <text class="section-more" @click="$emit('more')">更多 ›</text>
    </view>
    <view class="feed-list">
      <!-- 无数据时显示占位 -->
      <template v-if="(!items || items.length === 0) && !loading">
        <view class="feed-card feed-placeholder" v-for="i in 4" :key="i">
          <view class="feed-img-placeholder"></view>
          <view class="feed-info">
            <text class="feed-title-placeholder line-clamp-2">精彩内容即将上线</text>
            <text class="feed-sub-placeholder">--</text>
          </view>
        </view>
      </template>
      <!-- 混合信息流 -->
      <template v-else>
        <view
          class="feed-card"
          v-for="item in displayItems"
          :key="item.id + '-' + item.type"
          @click="$emit('itemClick', item)"
        >
          <!-- 商品卡片 -->
          <template v-if="item.type === 'product'">
            <image class="feed-img" :src="item.coverImage || '/static/default-product.png'" mode="aspectFill" />
            <view class="feed-info">
              <view class="feed-tag-row">
                <text class="feed-type-badge product-badge">🛍️ 商品</text>
              </view>
              <text class="feed-title line-clamp-2">{{ item.name }}</text>
              <text class="feed-price" v-if="item.priceLabel">{{ item.priceLabel }}</text>
              <text class="feed-price fee-free" v-else-if="item.price == null || item.price === 0">免费</text>
              <text class="feed-price" v-else>{{ formatPrice(item) }}</text>
            </view>
          </template>
          <!-- 活动卡片 -->
          <template v-else-if="item.type === 'activity'">
            <image class="feed-img" :src="item.coverImage || '/static/default-activity.png'" mode="aspectFill" />
            <view class="feed-info">
              <view class="feed-tag-row">
                <text class="feed-type-badge activity-badge">🔥 活动</text>
                <text v-if="item.statusText" class="feed-status-badge" :class="item.statusClass">{{ item.statusText }}</text>
              </view>
              <text class="feed-title line-clamp-2">{{ item.title }}</text>
              <view class="feed-meta-row">
                <text class="feed-price" v-if="item.priceLabel">{{ item.priceLabel }}</text>
                <text class="feed-price" v-else-if="item.price && item.price > 0">{{ formatPrice(item) }}</text>
                <text class="feed-price fee-free" v-else>免费</text>
                <text class="feed-date" v-if="item.startTime">{{ item.startTime }}</text>
              </view>
            </view>
          </template>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    products: { type: Array, default: function() { return [] } },
    activities: { type: Array, default: function() { return [] } },
    maxItems: { type: Number, default: 6 },
    loading: { type: Boolean, default: false }
  },
  computed: {
    displayItems: function() {
      var productItems = (this.products || []).slice(0, 3).map(function(p) {
        return {
          id: p.id,
          type: 'product',
          name: p.name,
          coverImage: p.coverImage,
          price: p.price,
          priceLabel: p.priceLabel,
          source: p
        }
      })
      var activityItems = (this.activities || []).slice(0, 3).map(function(a) {
        return {
          id: a.id,
          type: 'activity',
          title: a.title,
          coverImage: a.coverImage,
          price: a.price,
          priceLabel: a.priceLabel,
          startTime: a.startTime,
          statusText: this.getStatusText(a.status),
          statusClass: this.getStatusClass(a.status),
          source: a
        }
      }.bind(this))
      // 交替合并：商品、活动、商品、活动...
      var merged = []
      var pi = 0, ai = 0
      var toggle = 0
      while ((pi < productItems.length || ai < activityItems.length) && merged.length < this.maxItems) {
        if (toggle % 2 === 0 && pi < productItems.length) {
          merged.push(productItems[pi++])
        } else if (ai < activityItems.length) {
          merged.push(activityItems[ai++])
        } else if (pi < productItems.length) {
          merged.push(productItems[pi++])
        }
        toggle++
      }
      return merged
    }
  },
  methods: {
    formatPrice: function(item) {
      var price = item.price
      if (price == null || price === 0) return '免费'
      return '¥' + (Number(price) / 100).toFixed(0)
    },
    getStatusText: function(status) {
      var map = { upcoming: '即将开始', ongoing: '进行中', ended: '已结束', cancelled: '已取消' }
      return map[status] || '即将开始'
    },
    getStatusClass: function(status) {
      var map = { upcoming: 'status-upcoming', ongoing: 'status-ongoing', ended: 'status-ended' }
      return map[status] || ''
    }
  }
}
</script>

<style scoped>
.section {
  margin: 20rpx 20rpx;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.section-more {
  font-size: 24rpx;
  color: #999;
}
.feed-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16rpx;
}
.feed-card {
  width: calc(50% - 8rpx);
  background: #fff;
  border-radius: 16rpx;
  padding: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  box-sizing: border-box;
}
.feed-card:active {
  opacity: 0.8;
}
.feed-img {
  width: 100%;
  height: 200rpx;
  border-radius: 12rpx;
  background: #f0f0f0;
  display: block;
  margin-bottom: 12rpx;
}
.feed-img-placeholder {
  width: 100%;
  height: 200rpx;
  border-radius: 12rpx;
  background: linear-gradient(135deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 12rpx;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.feed-info {
  display: flex;
  flex-direction: column;
}
.feed-tag-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 6rpx;
}
.feed-type-badge {
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 6rpx;
  font-weight: 500;
}
.product-badge {
  background: #FFF0E6;
  color: #F97316;
}
.activity-badge {
  background: #FEF2E6;
  color: #EA580C;
}
.feed-status-badge {
  font-size: 18rpx;
  padding: 2rpx 8rpx;
  border-radius: 6rpx;
}
.status-upcoming { background: #DBEAFE; color: #2563EB; }
.status-ongoing { background: #D1FAE5; color: #16A34A; }
.status-ended { background: #F3F4F6; color: #9CA3AF; }
.feed-title {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 6rpx;
  min-height: 36rpx;
  line-height: 1.4;
}
.feed-title-placeholder {
  font-size: 26rpx;
  color: #ccc;
  display: block;
  margin-bottom: 6rpx;
  min-height: 36rpx;
}
.feed-price {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 600;
}
.fee-free {
  color: #22C55E;
}
.feed-meta-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-top: 4rpx;
}
.feed-date {
  font-size: 20rpx;
  color: #bbb;
}
.feed-sub-placeholder {
  font-size: 24rpx;
  color: #ccc;
}
.line-clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>