60 lines
1.6 KiB
Plaintext
60 lines
1.6 KiB
Plaintext
<template>
|
|
<view :class="['mt-detail', isLargeScreen ? 'large' : 'small']">
|
|
<!-- 标题 -->
|
|
<text class="mt-title">{{ t('mt.detail.title') }}</text>
|
|
<!-- 内容区 -->
|
|
<scroll-view>
|
|
<view class="mt-content">
|
|
<!-- 资讯内容渲染区域 -->
|
|
<text>{{ newsDetail.title }}</text>
|
|
<rich-text :nodes="newsDetail.content" />
|
|
</view>
|
|
<!-- 评论入口 -->
|
|
<button @tap="goToComments">{{ t('mt.detail.comments') }}</button>
|
|
</scroll-view>
|
|
<!-- 收藏/转发/点赞等操作栏 -->
|
|
<view class="mt-actions">
|
|
<button @tap="onFavorite">{{ t('mt.detail.favorite') }}</button>
|
|
<button @tap="onShare">{{ t('mt.detail.share') }}</button>
|
|
<button @tap="onLike">{{ t('mt.detail.like') }}</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script lang="uts">
|
|
import { ref, onLoad } from 'uni-app'
|
|
import { isLargeScreen } from '@/utils/responsive'
|
|
import { getNewsDetail } from '@/composables/use-news'
|
|
|
|
const newsDetail = ref({})
|
|
|
|
onLoad((params) => {
|
|
if (params.id) {
|
|
getNewsDetail(params.id).then(res => {
|
|
newsDetail.value = res
|
|
})
|
|
}
|
|
})
|
|
|
|
function goToComments() {
|
|
uni.navigateTo({ url: `/pages/mt/comments.uvue?id=${newsDetail.value.id}` })
|
|
}
|
|
function onFavorite() {
|
|
// 收藏逻辑
|
|
}
|
|
function onShare() {
|
|
// 转发逻辑
|
|
}
|
|
function onLike() {
|
|
// 点赞逻辑
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.mt-detail {
|
|
padding: 24rpx;
|
|
&.large { max-width: 900rpx; margin: 0 auto; }
|
|
.mt-title { font-size: 40rpx; font-weight: bold; margin-bottom: 24rpx; }
|
|
.mt-content { margin-bottom: 32rpx; }
|
|
.mt-actions { display: flex; gap: 24rpx; justify-content: flex-end; }
|
|
}
|
|
</style>
|