ykt-team-wxapp/pages/home/article-list.vue

<template>
  <view v-if="articles.length" class="article-container">
    <view class="flex items-center justify-between">
      <view class="module-title">健康宣教</view>
      <view v-if="total > 3" class="flex items-center" @click="toMorePage()">
        <view class="mr-5 text-base text-gray">更多</view>
        <image class="arrow-icon" src="/static/home/arrow-right-gray.png" mode="aspectFit"></image>
      </view>
    </view>

    <view class="mt-10">
      <view
        v-for="(article, index) in articles"
        :key="article._id"
        class="article-card flex"
        :class="{ 'mb-15': index < articles.length - 1 }"
        @click="goToDetail(article)"
      >
        <image
          class="flex-shrink-0 cover"
          :src="article.cover || '/static/home/health-education.png'"
          mode="aspectFill"
        />
        <view class="w-0 flex-grow">
          <view class="article-title truncate mb-10">
            {{ article.title }}
          </view>
          <view v-if="article.summary" class="article-summary line-clamp-2">
            {{ article.summary }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, watch } from "vue";
import api from '@/utils/api';

const props = defineProps({
  team: {
    type: Object,
    default: () => ({})
  }
})

const articles = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(3);
const loading = ref(false);

function goToDetail(article) {
  if (!article?._id) return;
  uni.navigateTo({ url: `/pages/article/article-detail?id=${article._id}` });
}

const loadArticles = async (reset = false) => {
  const corpId = props.team?.corpId || "";
  if (!corpId || loading.value) return;
  if (reset) {
    page.value = 1;
    articles.value = [];
    total.value = 0;
  }
  loading.value = true;
  try {
    const params = {
      corpId,
      page: page.value,
      pageSize: pageSize.value,
      enable: true,
    };
    const res = await api("getArticleList", params, false);
    const list = res && Array.isArray(res.list) ? res.list : [];
    total.value = Number(res?.total) || 0;
    if (page.value === 1) articles.value = list;
    else articles.value = [...articles.value, ...list];
  } catch (err) {
    console.error("loadArticles failed:", err);
  } finally {
    loading.value = false;
  }
};

function toMorePage() {
  const corpId = props.team?.corpId || "";
  if (!corpId) return;
  uni.navigateTo({ url: `/pages/article/article-cate-list?corpId=${corpId}` });
}

watch(
  () => props.team?.corpId,
  async (corpId) => {
    if (!corpId) {
      articles.value = [];
      total.value = 0;
      page.value = 1;
      pageSize.value = 3;
      return;
    }
    pageSize.value = 3;
    await loadArticles(true);
  },
  { immediate: true }
);
</script>
<style scoped>
.article-container {
  margin: 0 30rpx;
  margin-top: 24rpx;
  padding-bottom: 40rpx;
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.arrow-icon {
  width: 32rpx;
  height: 32rpx;
}

.module-title {
  color: #000000;
  font-size: 36rpx;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.article-card {
  background: white;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 10rpx 0 rgba(60, 169, 145, 0.06);
  transition: all 0.3s;
  min-height: 188rpx;
  padding: 20rpx;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.article-card:active {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.cover {
  width: 272rpx;
  height: 151rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
  object-fit: cover;
}

.mb-15 {
  margin-bottom: 20rpx;
}

.article-title {
  color: #333333;
  font-size: 32rpx;
  font-weight: 500;
  line-height: normal;
}

.article-summary {
  max-width: 402rpx;
  color: #666666;
  text-align: justify;
  font-size: 28rpx;
  font-weight: 400;
  line-height: normal;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
}
</style>