MTP20_WEB_GLOBAL/src/packages/mobile/views/news/detail/Index.vue

<template>
    <app-view class="news-details">
        <template #header>
            <app-navbar :title="$t('operation.details')">
                <!-- <template #right>
                    <div @click="sendShareMessage" v-if="plus.hasPlus()">
                        <Icon name="share" size="18px" />
                    </div>
                    <div :data-clipboard-text="getNewsShareUrl(newsId)" v-copy="onCopy" v-else>
                        <Icon name="share" size="18px" />
                    </div>
                </template> -->
            </app-navbar>
        </template>
        <section class="news-details__container" v-if="localizedDetails">
            <h1>{{ localizedDetails.title }}</h1>
            <h4>
                <span>{{ $t('news.source') }}</span>
                <img :src="getFileUrl(localizedDetails.srclogo)" v-if="localizedDetails.srclogo" />
                <span @click="openUrl(localizedDetails.srcurl)" style="color:dodgerblue"
                    v-if="localizedDetails.srcname">
                    {{ localizedDetails.srcname }}
                </span>
                <span>{{ formatDate(localizedDetails.publishdate, 'YYYY-MM-DD') }}</span>
                <span style="margin-left: auto;">{{ $t('news.numbers') }} {{ localizedDetails.hits }}</span>
            </h4>
            <HtmlContainer class="content" :context="formatHtmlString(localizedDetails.context)"
                v-if="localizedDetails.context" />
            <p class="footer" v-if="localizedDetails.author">{{ $t('news.author') }} {{ localizedDetails.author }}</p>
        </section>
        <template v-if="titleList.length">
            <Divider>{{ $t('news.hotnews') }}</Divider>
            <CellGroup class="news-details__list">
                <template v-for="(item, index) in titleList" :key="index">
                    <Cell class="article-item" title-class="article-item__title" value-class="article-item__time"
                        :title="item.title" :value="formatDate(item.publishdate, 'MM/DD')"
                        :to="{ name: 'news-detail', query: { id: item.id } }" replace />
                </template>
            </CellGroup>
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { CellGroup, Cell, Divider } from 'vant'
import { formatDate, getFileUrl, formatHtmlString } from '@/filters'
import { useNavigation } from '@mobile/router/navigation'
import { useRequest } from '@/hooks/request'
import { useNewsContent } from '@/business/news'
import { queryNewTitles, queryNewContents } from '@/services/api/news'
import plus from '@/utils/h5plus'
import HtmlContainer from '@mobile/components/base/html-container/index.vue'

const { getQueryString } = useNavigation()
const newsId = getQueryString('id')

const { details, localizedDetails } = useNewsContent()

const { dataList: titleList, run } = useRequest(queryNewTitles, {
    manual: true,
    defaultParams: {
        pagesize: 10,
    },
    onSuccess: (res) => {
        titleList.value = res.data.filter((e) => e.id.toString() !== newsId)
    }
})

useRequest(queryNewContents, {
    defaultParams: {
        ids: newsId
    },
    onSuccess: (res) => {
        details.value = res.data[0]
        run({ columnid: details.value?.columnid })
    }
})

// 跳转链接
const openUrl = (url?: string) => {
    if (url) {
        plus.openURL(url)
    }
}

// 分享消息
// const sendShareMessage = () => {
//     if (data.value) {
//         plus.systemShare({
//             title: data.value.title,
//             href: getNewsShareUrl(newsId),
//         }).catch((err) => {
//             showFailToast(err)
//         })
//     } else {
//         showFailToast('文章不存在，分享失败')
//     }
// }

// const onCopy = (status: boolean) => {
//     if (status) {
//         showToast({
//             message: '已复制，快去粘贴吧~',
//             position: 'bottom',
//         })
//     } else {
//         showFailToast('复制失败')
//     }
// }
</script>

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