137 lines
3.3 KiB
Vue
137 lines
3.3 KiB
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> |