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 class="flex items-center" @click="toList()">
        <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}">
        <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 { computed, ref, watch } from 'vue';
import api from '@/utils/api';

const props = defineProps({
  team: {
    type: Object,
    default: () => ({})
  }
})
const articles = ref([])

const qrcode = computed(() => {
  const qrcodes = props.team && Array.isArray(props.team.qrcodes) ? props.team.qrcodes : [];
  return qrcodes[0] || {}
})
const articleIds = computed(() => {
  const articles = qrcode.value && Array.isArray(qrcode.value.articles) ? qrcode.value.articles : [];
  const ids = articles.map(item => item._id).filter(i => typeof i === 'string' && i.trim());
  return qrcode.value.enableAnnounce === 'YES' ? ids : [];
})

function toList() {
  uni.navigateTo({ url: `/pages/article/article-list?corpId=${props.team.corpId}&ids=${articleIds.value.join()}` })
}

async function getArticles() {
  const res = await api('getArticleByIds', { corpId: props.team.corpId, ids: articleIds.value.join() });
  articles.value = res && Array.isArray(res.list) ? res.list : [];
}

watch(articleIds, n => {
  if (n.length) {
    getArticles()
  } else {
    articles.value = []
  }
}, { immediate: true })
</script>
<style scoped>
.article-container {
  margin: 0 30rpx;
  margin-top: 24rpx;
  padding-bottom: 40rpx;
}

.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;
}

.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>