cfc/cfc-frontend/pages/article-center/index.vue

<template>
  <view class="ac-container">
    <!-- Tab 导航 -->
    <view class="ac-tabs">
      <scroll-view scroll-x enable-flex show-scrollbar="false" class="tab-scroll">
        <view
          v-for="tab in tabList"
          :key="tab.code"
          :class="['tab-item', currentTab === tab.code ? 'active' : '']"
          :style="currentTab === tab.code ? 'color:' + tab.color + ';border-bottom-color:' + tab.color : ''"
          @click="onTabChange(tab.code)"
        >
          {{ tab.name }}
        </view>
      </scroll-view>
    </view>

    <!-- 文章列表 -->
    <scroll-view scroll-y class="ac-list" @scrolltolower="onLoadMore">
      <!-- 骨架屏 -->
      <view v-if="loading && articles.length === 0" class="ac-skeleton">
        <view v-for="n in 3" :key="n" class="skeleton-card">
          <view class="skeleton-cover"></view>
          <view class="skeleton-body">
            <view class="skeleton-line skeleton-title"></view>
            <view class="skeleton-line skeleton-summary"></view>
            <view class="skeleton-line skeleton-summary short"></view>
            <view class="skeleton-line skeleton-meta"></view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else-if="articles.length === 0" class="ac-empty">
        <image class="empty-img" src="/static/empty-article.png" mode="aspectFit"></image>
        <text class="empty-text">暂无文章</text>
      </view>

      <!-- 文章列表 -->
      <view v-else class="article-list">
        <view
          v-for="item in articles"
          :key="item.id"
          class="article-card"
          @click="goDetail(item.id)"
        >
          <image
            class="card-cover"
            :src="item.coverImage || '/static/default-article.png'"
            mode="aspectFill"
          />
          <view class="card-body">
            <view class="card-tags">
              <text class="card-category">{{ item.categoryName || '' }}</text>
              <text class="card-readtime">{{ item.readTime || 3 }}分钟</text>
            </view>
            <text class="card-title">{{ item.title }}</text>
            <text class="card-summary">{{ item.summary || '' }}</text>
            <view class="card-footer">
              <text class="card-author">{{ item.author || '浠艾福' }}</text>
              <text class="card-date">{{ formatDate(item.publishedAt) }}</text>
              <text class="card-fav">收藏 {{ item.favCount || 0 }}</text>
            </view>
            <!-- 五维彩条 -->
            <view v-if="item.relatedDimensions" class="card-dimensions">
              <view
                v-for="dim in parseDimensions(item.relatedDimensions)"
                :key="dim.code"
                class="dim-dot"
                :style="'background:' + dim.color"
              ></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view v-if="loadingMore" class="loading-more">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-if="noMore && articles.length > 0" class="no-more">
        <text class="no-more-text">— 没有更多了 —</text>
      </view>
      <!-- 底部占位 -->
      <view class="bottom-spacer"></view>
    </scroll-view>

    <!-- 浮动发布按钮 -->
    <view class="ac-fab" @click="goEdit">
      <text class="fab-icon">+</text>
    </view>
  </view>
</template>

<script>
import { getArticleList } from '@/utils/api.js'
export default {
  data() {
    return {
      tabList: [
        { code: '', name: '全部推荐', color: '#F97316' },
        { code: 'body', name: '身', color: '#FF8C42' },
        { code: 'mind', name: '智', color: '#6366F1' },
        { code: 'wisdom', name: '心', color: '#FF6B9D' },
        { code: 'action', name: '行', color: '#10B981' },
        { code: 'wealth', name: '富', color: '#F59E0B' }
      ],
      currentTab: '',
      articles: [],
      page: 1,
      size: 10,
      total: 0,
      loading: false,
      loadingMore: false,
      noMore: false
    }
  },
  onLoad() {
    this.loadArticles()
  },
  methods: {
    async loadArticles(isLoadMore) {
      if (!isLoadMore) {
        if (this.loading) return
        this.loading = true
      } else {
        if (this.loadingMore || this.noMore) return
        this.loadingMore = true
      }
      try {
        var params = { page: this.page, size: this.size }
        if (this.currentTab) {
          params.dimensionCode = this.currentTab
        }
        var res = await getArticleList(params)
        if (res.code === 200 && res.data) {
          var list = res.data.records || []
          if (this.page === 1) {
            this.articles = list
          } else {
            this.articles = this.articles.concat(list)
          }
          this.total = res.data.total || 0
          this.noMore = this.articles.length >= this.total
        }
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
        this.loadingMore = false
      }
    },
    onTabChange(code) {
      if (this.currentTab === code) return
      this.currentTab = code
      this.page = 1
      this.articles = []
      this.noMore = false
      this.loadArticles()
    },
    onLoadMore() {
      if (this.noMore || this.loading || this.loadingMore) return
      this.page++
      this.loadArticles(true)
    },
    goDetail(id) {
      uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
    },
    goEdit() {
      uni.navigateTo({ url: '/pages/article-center/article-edit' })
    },
    formatDate(dateStr) {
      if (!dateStr) return ''
      return dateStr.slice(0, 10)
    },
    parseDimensions(str) {
      if (!str) return []
      var dimMap = {
        body: { code: 'body', color: '#FF8C42', name: '身' },
        mind: { code: 'mind', color: '#6366F1', name: '智' },
        wisdom: { code: 'wisdom', color: '#FF6B9D', name: '心' },
        action: { code: 'action', color: '#10B981', name: '行' },
        wealth: { code: 'wealth', color: '#F59E0B', name: '富' }
      }
      var codes = str.split(',').map(function(s) { return s.trim().toLowerCase() })
      return codes.filter(function(c) { return dimMap[c] }).map(function(c) { return dimMap[c] })
    }
  }
}
</script>

<style scoped>
.ac-container {
  min-height: 100vh;
  background: #f5f7fa;
  position: relative;
}
.ac-tabs {
  background: #fff;
  padding: 16rpx 0 12rpx;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
}
.tab-scroll {
  white-space: nowrap;
  padding: 0 20rpx;
}
.tab-item {
  display: inline-block;
  padding: 8rpx 24rpx;
  font-size: 26rpx;
  color: #666;
  margin-right: 12rpx;
  border-bottom: 3rpx solid transparent;
  flex-shrink: 0;
}
.tab-item.active {
  font-weight: bold;
}
.ac-list {
  height: calc(100vh - 100rpx);
}
/* 骨架屏 */
.ac-skeleton { padding: 20rpx 24rpx; }
.skeleton-card {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}
.skeleton-cover { height: 280rpx; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.skeleton-body { padding: 20rpx; }
.skeleton-line { height: 24rpx; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; border-radius: 4rpx; margin-bottom: 12rpx; }
.skeleton-title { width: 60%; }
.skeleton-summary { width: 90%; }
.skeleton-summary.short { width: 50%; }
.skeleton-meta { width: 40%; height: 18rpx; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
/* 空状态 */
.ac-empty { display: flex; flex-direction: column; align-items: center; padding-top: 200rpx; }
.empty-img { width: 200rpx; height: 200rpx; margin-bottom: 24rpx; }
.empty-text { font-size: 28rpx; color: #999; }
/* 文章卡片 */
.article-list { padding: 20rpx 24rpx; }
.article-card {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.card-cover { width: 100%; height: 280rpx; background: #f0f0f0; }
.card-body { padding: 20rpx; }
.card-tags { display: flex; align-items: center; margin-bottom: 10rpx; }
.card-category { font-size: 20rpx; color: #5B9BD5; background: rgba(91,155,213,0.1); padding: 2rpx 12rpx; border-radius: 8rpx; margin-right: 12rpx; }
.card-readtime { font-size: 20rpx; color: #999; }
.card-title { display: block; font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-summary { display: block; font-size: 24rpx; color: #666; line-height: 1.5; margin-bottom: 12rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-footer { display: flex; align-items: center; font-size: 20rpx; color: #999; }
.card-author { margin-right: 16rpx; color: #5B9BD5; }
.card-date { margin-right: 16rpx; }
.card-fav { margin-left: auto; }
/* 五维彩条 */
.card-dimensions { display: flex; margin-top: 10rpx; gap: 8rpx; }
.dim-dot { width: 20rpx; height: 20rpx; border-radius: 50%; }
/* 加载更多 */
.loading-more, .no-more { text-align: center; padding: 30rpx; }
.loading-text { font-size: 24rpx; color: #999; }
.no-more-text { font-size: 24rpx; color: #ccc; }
.bottom-spacer { height: 120rpx; }
/* 浮动按钮 */
.ac-fab {
  position: fixed;
  right: 40rpx;
  bottom: 100rpx;
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(249,115,22,0.4);
  z-index: 100;
}
.fab-icon { font-size: 48rpx; font-weight: bold; line-height: 1; }
</style>