MTP20_WEB_GLOBAL/src/packages/mobile/components/modules/article/index.vue

<template>
    <app-block class="app-article">
        <h4 class="app-article__title">
            <span>{{ title }}</span>
            <span @click="$router.push({ name: 'news-list' })">
                {{ $t('common.more') }}
                <Icon name="arrow" />
            </span>
        </h4>
        <section class="app-article__section" v-for="(group, i) in newsGroup" :key="i">
            <dl class="news-list">
                <dt class="news-list__date">
                    <time class="news-list__time">{{ group.time }}</time>
                </dt>
                <dd class="news-list__item" v-for="(item, n) in group.list" :key="n">
                    <div class="news-item" @click="$router.push({ name: 'news-detail', query: { id: item.id } })">
                        <div class="news-item__content">
                            <div class="news-item__title">{{ item.title }}</div>
                            <div class="news-item__meta">
                                <span class="news-item__time">{{ formatDate(item.publishdate, 'HH:mm') }}</span>
                                <span class="news-item__author" v-if="item.author">{{ item.author }}</span>
                            </div>
                        </div>
                        <div class="news-item__image" v-if="item.coverimage">
                            <Image class="news-item__img" fit="cover" :src="item.coverimage" :width="68" :height="60"
                                :radius="4" />
                        </div>
                    </div>
                </dd>
            </dl>
        </section>
    </app-block>
</template>

<script lang="ts" setup>
import { Image, Icon } from 'vant'
import { formatDate } from '@/filters'
import { useRequest } from '@/hooks/request'
import { useNewsTitle } from '@/business/news'
import { queryNewTitles } from '@/services/api/news'

defineProps({
    title: {
        type: String,
        default: '新闻资讯'
    }
})

useRequest(queryNewTitles, {
    defaultParams: {
        pagesize: 20
    },
    onSuccess: (res) => {
        appendData(res.data)
    },
})

const { appendData, newsGroup } = useNewsTitle()
</script>

<style lang="less">
@import "./index.less";
</style>