58 lines
2.0 KiB
Plaintext
58 lines
2.0 KiB
Plaintext
<template>
|
|
<view :class="['mt-topic-detail', isLargeScreen ? 'large' : 'small']">
|
|
<image :src="topic.cover_image_url" class="mt-topic-cover" />
|
|
<text class="mt-topic-title">{{ topic.title }}</text>
|
|
<text class="mt-topic-desc">{{ topic.description }}</text>
|
|
<view class="mt-topic-actions">
|
|
<button @tap="onSubscribe">{{ t('mt.topic.subscribe') }}</button>
|
|
<button @tap="onFavorite">{{ t('mt.topic.favorite') }}</button>
|
|
<button @tap="onShare">{{ t('mt.topic.share') }}</button>
|
|
</view>
|
|
<view class="mt-topic-contents">
|
|
<text class="mt-topic-section">{{ t('mt.topic.contents') }}</text>
|
|
<view v-for="item in topic.contents" :key="item.id" class="mt-topic-content-item" @tap="goToDetail(item.id)">
|
|
<text>{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script lang="uts">
|
|
import { ref, onLoad } from 'uni-app'
|
|
import { t } from '@/i18n/mt'
|
|
import { isLargeScreen } from '@/utils/responsive'
|
|
import { getTopicDetail } from '@/composables/use-topics'
|
|
|
|
const topic = ref({ contents: [] })
|
|
|
|
onLoad((params) => {
|
|
if (params.id) {
|
|
getTopicDetail(params.id).then(res => { topic.value = res })
|
|
}
|
|
})
|
|
|
|
function onSubscribe() {
|
|
// 订阅逻辑
|
|
}
|
|
function onFavorite() {
|
|
// 收藏逻辑
|
|
}
|
|
function onShare() {
|
|
// 分享逻辑
|
|
}
|
|
function goToDetail(id: string) {
|
|
uni.navigateTo({ url: `/pages/mt/detail.uvue?id=${id}` })
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.mt-topic-detail {
|
|
padding: 24rpx;
|
|
&.large { max-width: 900rpx; margin: 0 auto; }
|
|
.mt-topic-cover { width: 100%; height: 240rpx; border-radius: 16rpx; margin-bottom: 24rpx; }
|
|
.mt-topic-title { font-size: 40rpx; font-weight: bold; margin-bottom: 12rpx; }
|
|
.mt-topic-desc { color: #888; font-size: 28rpx; margin-bottom: 24rpx; }
|
|
.mt-topic-actions { display: flex; gap: 16rpx; margin-bottom: 24rpx; }
|
|
.mt-topic-section { font-size: 32rpx; font-weight: 500; margin-bottom: 12rpx; }
|
|
.mt-topic-content-item { padding: 12rpx 0; border-bottom: 1px solid #eee; }
|
|
}
|
|
</style>
|