70 lines
2.4 KiB
Plaintext
70 lines
2.4 KiB
Plaintext
<template>
|
|
<view :class="['mt-comments', isLargeScreen ? 'large' : 'small']">
|
|
<text class="mt-title">{{ t('mt.comments.title') }}</text>
|
|
<scroll-view>
|
|
<view v-for="comment in comments" :key="comment.id" class="mt-comment-item">
|
|
<view class="mt-comment-header">
|
|
<image :src="comment.author_avatar" class="mt-comment-avatar" />
|
|
<text class="mt-comment-author">{{ comment.author_name }}</text>
|
|
<text class="mt-comment-date">{{ comment.created_at }}</text>
|
|
</view>
|
|
<text class="mt-comment-content">{{ comment.content }}</text>
|
|
<view class="mt-comment-actions">
|
|
<button @tap="onLike(comment)">{{ t('mt.comments.like') }}</button>
|
|
<button @tap="onReply(comment)">{{ t('mt.comments.reply') }}</button>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="mt-comment-input">
|
|
<input v-model="input" :placeholder="t('mt.comments.input')" @confirm="onSend" />
|
|
<button @tap="onSend">{{ t('mt.comments.send') }}</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script lang="uts">
|
|
import { ref, onLoad } from 'uni-app'
|
|
import { t } from '@/i18n/mt'
|
|
import { isLargeScreen } from '@/utils/responsive'
|
|
import { getComments, sendComment } from '@/composables/use-comments'
|
|
|
|
const comments = ref([])
|
|
const input = ref('')
|
|
const targetId = ref('')
|
|
|
|
onLoad((params) => {
|
|
if (params.id) {
|
|
targetId.value = params.id
|
|
getComments(params.id).then(res => { comments.value = res })
|
|
}
|
|
})
|
|
|
|
function onSend() {
|
|
if (!input.value) return
|
|
sendComment(targetId.value, input.value).then(res => {
|
|
comments.value.push(res)
|
|
input.value = ''
|
|
})
|
|
}
|
|
function onLike(comment) {
|
|
// 点赞逻辑
|
|
}
|
|
function onReply(comment) {
|
|
// 回复逻辑
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.mt-comments {
|
|
padding: 24rpx;
|
|
&.large { max-width: 900rpx; margin: 0 auto; }
|
|
.mt-title { font-size: 40rpx; font-weight: bold; margin-bottom: 24rpx; }
|
|
.mt-comment-item { border-bottom: 1px solid #eee; padding: 16rpx 0; }
|
|
.mt-comment-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 8rpx; }
|
|
.mt-comment-avatar { width: 48rpx; height: 48rpx; border-radius: 50%; }
|
|
.mt-comment-author { font-weight: 500; margin-right: 8rpx; }
|
|
.mt-comment-date { color: #aaa; font-size: 22rpx; }
|
|
.mt-comment-content { margin-bottom: 8rpx; }
|
|
.mt-comment-actions { display: flex; gap: 16rpx; }
|
|
.mt-comment-input { display: flex; gap: 12rpx; padding: 16rpx; border-top: 1px solid #eee; }
|
|
}
|
|
</style>
|