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

<template>
    <app-view class="news-details">
        <template #header>
            <app-navbar title="资讯详情">
                <!-- <template #right>
                    <div @click="sendShareMessage" v-if="plus.hasPlus()">
                        <Icon name="share" size=".36rem" />
                    </div>
                    <div :data-clipboard-text="getNewsShareUrl(newsId)" v-copy="onCopy" v-else>
                        <Icon name="share" size=".36rem" />
                    </div>
                </template> -->
            </app-navbar>
        </template>
        <section class="news-details__container" v-if="data">
            <h1>{{ data.title }}</h1>
            <h4>
                <span>来源:</span>
                <img :src="getFileUrl(data.srclogo)" v-if="data.srclogo" />
                <span @click="openUrl(data?.srcurl)" style="color:dodgerblue" v-if="data.srcname">{{ data.srcname }}</span>
                <span>{{ formatDate(data.publishdate, 'YYYY-MM-DD') }}</span>
                <span style="margin-left: auto;">阅览数: {{ data.hits }}</span>
            </h4>
            <HtmlContainer :context="formatHtmlString(data.context)" v-if="data.context" />
            <p style="color: #999;margin-top: .24rem;font-size: .24rem;" v-if="data.author">作者: {{ data.author }}</p>
        </section>
        <template v-if="dataList.length">
            <Divider>热门资讯</Divider>
            <CellGroup class="news-details__list">
                <template v-for="(item, index) in dataList" :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-details', query: { id: item.id } }" replace />
                </template>
            </CellGroup>
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { CellGroup, Cell, Divider, showFailToast, showToast, Icon } from 'vant'
import { formatDate, getFileUrl, getNewsShareUrl, formatHtmlString } from '@/filters'
import { useNavigation } from '@/hooks/navigation'
import { useRequest } from '@/hooks/request'
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 { dataList, run } = useRequest(queryNewTitles, {
    manual: true,
    params: {
        pagesize: 10,
    },
    onSuccess: (res) => {
        dataList.value = res.data.filter((e) => e.id.toString() !== newsId)
    }
})

const { data } = useRequest(queryNewContents, {
    params: {
        ids: newsId
    },
    onSuccess: (res) => {
        if (res.data.length) {
            const details = res.data[0]
            data.value = details
            run({ columnid: details.columnid })
        } else {
            run()
        }
    }
})

// 跳转链接
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>