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

78 lines
2.2 KiB
Vue
Raw Normal View History

2026-01-19 18:52:18 +08:00
<template>
<view v-if="articles.length" class="mt-12 px-15 flex items-center justify-between">
<view class="text-lg font-semibold text-dark">健康宣教</view>
<view class="flex items-center" @click="toList()">
<view class="mr-5 text-base text-gray">更多</view>
<uni-icons type="right" color="#999"></uni-icons>
</view>
</view>
<view class="px-15 mt-10">
<view class="shadow-lg bg-white rounded">
<view v-for="article in articles" :key="article._id"
class="flex px-15 py-12 border-b border-solid border-gray-200">
<image class="flex-shrink-0 mr-10 cover" :src="article.cover || '/static/book.svg'" />
<view class="w-0 flex-grow">
<view class="text-base leading-normal font-semibold truncate mb-5">
{{ article.title }}
</view>
<view v-if="article.summary" class="text-base text-gray 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>
.cover {
width: 128rpx;
height: 128rpx;
}
.min-w-120 {
min-width: 240rpx;
}
.w-80 {
width: 160rpx;
}
</style>