hn-hlw-app/pages/article/article-list.vue

<template>
  <full-page pageStyle="background:#f5f5f5">
    <view class="article-page" :style="elderVarStyle">
      <!-- 分类标签 -->
      <scroll-view class="cate-scroll" scroll-x enable-flex>
        <view class="cate-list">
          <view
            :class="[elderMode ? 'elder-cate-item' : 'cate-item', { active: activeCateId === '' }]"
            @click="handleCateChange('')"
          >
            全部
          </view>
          <view
            v-for="cate in cateList"
            :key="cate._id"
            :class="[elderMode ? 'elder-cate-item' : 'cate-item', { active: activeCateId === cate._id }]"
            @click="handleCateChange(cate._id)"
          >
            {{ cate.label }}
          </view>
        </view>
      </scroll-view>

      <!-- 文章列表 -->
      <scroll-view
        class="article-scroll"
        :scroll-y="articleList.length > 0"
        @scrolltolower="loadMore"
        :refresher-enabled="true"
        :refresher-triggered="refreshing"
        @refresherrefresh="onRefresh"
      >
        <view class="article-list">
          <view
            v-for="article in articleList"
            :key="article._id"
            :class="elderMode ? 'elder-article-item' : 'article-item'"
            @click="gotoDetail(article)"
          >
            <view class="article-content">
              <view :class="elderMode ? 'elder-article-title' : 'article-title'">{{ article.title }}</view>
              <!-- <view class="article-summary">{{ article.summary || '暂无简介' }}</view> -->
              <view class="article-meta">
                <text :class="elderMode ? 'elder-article-time' : 'article-time'">{{ formatTime(article.createTime) }}</text>
              </view>
            </view>
            <image
              :class="elderMode ? 'elder-article-cover' : 'article-cover'"
              :src="article.cover || '/static/home/design/article-pic.png'"
              mode="aspectFill"
            />
          </view>
        </view>

        <!-- 加载状态 -->
        <view class="load-status" v-if="articleList.length > 0">
          <uni-load-more :status="loadStatus" />
        </view>

        <!-- 空状态 -->
        <view v-if="!loading && articleList.length === 0" class="article-empty">
          <image src="/static/empty.svg" mode="widthFix" style="width: 240rpx; height: 240rpx; margin-bottom: 20rpx;" />
          <text>精彩健康科普内容即将上线</text>
        </view>
      </scroll-view>
    </view>
  </full-page>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import fullPage from "@/components/full-page.vue";
import empty from "@/components/empty.vue";
import useElder from "@/hooks/useElder";
import { getArticleCateList, getArticleList } from "@/utils/api";

const { elderMode, elderVarStyle } = useElder();

// 分类相关
const cateList = ref([]);
const activeCateId = ref("");

// 文章列表相关
const articleList = ref([]);
const page = ref(1);
const pageSize = 10;
const total = ref(0);
const loading = ref(false);
const refreshing = ref(false);
const loadStatus = ref("more"); // more | loading | noMore

onLoad((options) => {
  if (options.cateId) {
    activeCateId.value = options.cateId;
  }
  init();
});

async function init() {
  await fetchCateList();
  await fetchArticleList(true);
}

// 获取分类列表
async function fetchCateList() {
  try {
    const res = await getArticleCateList();
    if (res.success) {
      // 只显示一级分类
      cateList.value = (res.list || []).filter(item => item.level === 1);
    }
  } catch (e) {
    console.error("获取分类失败", e);
  }
}

// 获取文章列表
async function fetchArticleList(reset = false) {
  if (loading.value) return;
  
  if (reset) {
    page.value = 1;
    articleList.value = [];
  }

  loading.value = true;
  loadStatus.value = "loading";

  try {
    const params = {
      page: page.value,
      pageSize,
    };
    
    if (activeCateId.value) {
      // 获取该分类及其子分类的ID
      const cateIds = getCateIds(activeCateId.value);
      params.cateIds = cateIds;
    }

    const res = await getArticleList(params);
    
    if (res.success) {
      if (reset) {
        articleList.value = res.list || [];
      } else {
        articleList.value = [...articleList.value, ...(res.list || [])];
      }
      total.value = res.total || 0;
      
      // 更新加载状态
      if (articleList.value.length >= total.value) {
        loadStatus.value = "noMore";
      } else {
        loadStatus.value = "more";
      }
    }
  } catch (e) {
    console.error("获取文章列表失败", e);
    loadStatus.value = "more";
  } finally {
    loading.value = false;
    refreshing.value = false;
  }
}

// 获取分类及其子分类的ID
function getCateIds(parentId) {
  const ids = [parentId];
  const children = cateList.value.filter(item => item.parentId === parentId);
  children.forEach(child => {
    ids.push(child._id);
    // 获取孙子分类
    const grandchildren = cateList.value.filter(item => item.parentId === child._id);
    grandchildren.forEach(gc => ids.push(gc._id));
  });
  return ids;
}

// 切换分类
function handleCateChange(cateId) {
  if (activeCateId.value === cateId) return;
  activeCateId.value = cateId;
  fetchArticleList(true);
}

// 下拉刷新
function onRefresh() {
  refreshing.value = true;
  fetchArticleList(true);
}

// 加载更多
function loadMore() {
  if (loadStatus.value === "noMore" || loading.value) return;
  page.value++;
  fetchArticleList();
}

// 跳转详情
function gotoDetail(article) {
  if (article.link) {
    // 如果有外链，使用 webview 打开
    uni.navigateTo({
      url: `/pages/article/article-webview?url=${encodeURIComponent(article.link)}&title=${encodeURIComponent(article.title)}&id=${article._id}`,
    });
  } else {
    // 否则跳转到详情页
    uni.navigateTo({
      url: `/pages/article/article-detail?id=${article._id}`,
    });
  }
}

// 格式化时间
function formatTime(timestamp) {
  if (!timestamp) return "";
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}
</script>

<style lang="scss" scoped>
.article-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cate-scroll {
  flex-shrink: 0;
  background: #fff;
  white-space: nowrap;
}

.cate-list {
  display: flex;
  padding: 20rpx 30rpx;
}

.cate-item {
  flex-shrink: 0;
  padding: 10rpx 24rpx;
  margin-right: 16rpx;
  font-size: 28rpx;
  color: #834829;
  background: transparent;
  border: 1px solid #834829;
  border-radius: 8rpx;
  transition: all 0.3s;

  &.active {
    background: #834829;
    /* 实现选中状态下的四角内凹（缺口）效果 */
    background:
      radial-gradient(circle at 0 50%, transparent 6rpx, #834829 7rpx),
      radial-gradient(circle at 100% 50%, transparent 6rpx, #834829 7rpx);
    background-size: 51% 100%;
    background-position: left, right;
    background-repeat: no-repeat;
    color: #fff;
    border-color: transparent;
  }
}

.article-scroll {
  flex: 1;
  height: 0;
  position: relative;
}

.article-list {
  padding: 20rpx 30rpx;
}

.article-item {
  display: flex;
  padding: 24rpx;
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.article-content {
  flex: 1;
  min-width: 0;
  margin-right: 20rpx;
}

.article-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.article-summary {
  margin-top: 12rpx;
  font-size: var(--text-sm);
  color: #999;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.article-meta {
  margin-top: 16rpx;
}

.article-time {
  font-size: 28rpx;
  color: #bbb;
}

.article-cover {
  flex-shrink: 0;
  width: 200rpx;
  height: 150rpx;
  border-radius: 12rpx;
  background: #f5f5f5;
}

.load-status {
  padding: 20rpx 0;
}

.article-empty {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 28rpx;
  padding: 0;
}

/* Elder Mode Styles */
.elder-cate-item {
  flex-shrink: 0;
  padding: 14rpx 32rpx;
  margin-right: 16rpx;
  font-size: 32rpx;
  color: #834829;
  background: transparent;
  border: 2rpx solid #834829;
  border-radius: 12rpx;
  transition: all 0.3s;

  &.active {
    background: #834829;
    /* 实现选中状态下的四角内凹（缺口）效果 */
    background:
      radial-gradient(circle at 0 50%, transparent 6rpx, #834829 7rpx),
      radial-gradient(circle at 100% 50%, transparent 6rpx, #834829 7rpx);
    background-size: 51% 100%;
    background-position: left, right;
    background-repeat: no-repeat;
    color: #fff;
    border-color: transparent;
  }
}

.elder-article-item {
  display: flex;
  padding: 30rpx;
  margin-bottom: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(139, 101, 56, 0.1);
  border: 1px solid #f0e6d8;
}

.elder-article-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.5;
  margin-bottom: 16rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.elder-article-time {
  font-size: 30rpx;
  color: #999;
}

.elder-article-cover {
  flex-shrink: 0;
  width: 220rpx;
  height: 165rpx;
  border-radius: 12rpx;
  background: #f5f5f5;
}
</style>