novel-front-app/pages_order/novel/comments.vue

<template>
    <view class="comments-page">
		<navbar title="评论详情" leftClick @leftClick="$utils.navigateBack" />
        <!-- 书本名称 -->
        <view class="book-title-area">
            <view class="book-title-label">书本名称</view>
            <view class="book-title">《{{ bookTitle }}》</view>
        </view>
        <!-- 主评论卡片 -->
        <view class="comment-card">
            <view class="comment-header">
                <image class="avatar" :src="comment.avatar" mode="aspectFill" />
                <view class="user-info">
                    <text class="username">{{ comment.username }}</text>
                </view>
            </view>
            <view class="comment-content">{{ comment.content }}</view>
            <view class="comment-footer">
                <text class="comment-time">{{ comment.time }}</text>
            </view>
        </view>
        <!-- 全部评论列表 -->
        <view class="all-reply-area">
            <view class="all-reply-header">全部评论·{{ comment.replyCount }}</view>
            <view class="reply-list">
                <view class="reply-item" v-for="(item, idx) in replies" :key="idx">
                    <image class="reply-avatar" :src="item.avatar" mode="aspectFill" />
                    <view class="reply-main">
                        <view class="reply-username">{{ item.username }}</view>
                        <view class="reply-content">{{ item.content }}</view>
                        <view class="reply-time">{{ item.time }}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 底部回复按钮 -->
        <view class="reply-footer">
            <button class="submit-btn" @click="goToRespond">回复评论</button>
        </view>
    </view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'
export default {
    components: { navbar },
    data() {
        return {
            bookTitle: '这游戏也太真实了',
            comment: {
                avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
                username: '方香橙',
                content: '我是本书的作者方香橙，这是一本甜文爽文哒！请放心入坑，五星好评！女主又美有个性可爱，绝对不圣母，不傻白！男主身心干净深情独宠媳妇儿一个人...',
                time: '2024.07.09',
                replyCount: 17
            },
            replies: [
                {
                    avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
                    username: '方香橙',
                    content: '我是本书的作者方香橙，这是一本甜文爽文哒！请放心入坑，五星好评！女主又美有个性可爱，绝对不圣母，不傻白！男主身心干净深情独宠媳妇儿一个人...',
                    time: '2024.07.09'
                },
                {
                    avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
                    username: '战斗世界',
                    content: '这本书打破了我看甜文套路之前的观念女主真的太可爱太有趣和以往看过的一个NPC介绍有很大不同',
                    time: '2024.07.09'
                }
            ]
        }
    },
    methods: {
        goToRespond() {
            uni.navigateTo({ url: '/pages_order/novel/Respondcomments' })
        },
        submitReply() {
            uni.showToast({ title: '功能开发中', icon: 'none' })
        }
    }
}
</script>

<style scoped lang="scss">
.comments-page {
    min-height: 100vh;
    background: #f8f8f8;
    display: flex;
    flex-direction: column;
}

.book-title-area {
    background: #fff;
    margin: 24rpx 24rpx 0 24rpx;
    border-radius: 16rpx;
    padding: 24rpx 24rpx 0 24rpx;
}

.book-title-label {
    color: #bdbdbd;
    font-size: 24rpx;
    margin-bottom: 4rpx;
}

.book-title {
    font-size: 28rpx;
    color: #222;
    margin-bottom: 16rpx;
    border-bottom: 1px solid #ededed;
    padding-bottom: 8rpx;
}

.comment-card {
    background: #fff;
    margin: 0 24rpx 0 24rpx;
    border-radius: 16rpx;
    padding: 24rpx 24rpx 0 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    margin-bottom: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;
}

.avatar {
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
    margin-right: 16rpx;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.username {
    font-size: 26rpx;
    color: #222;
    font-weight: 500;
}

.comment-content {
    font-size: 26rpx;
    color: #333;
    margin-bottom: 12rpx;
}

.comment-footer {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    color: #bdbdbd;
}

.comment-time {
    color: #bdbdbd;
    margin-top: 18rpx;
}

.all-reply-area {
    background: #fff;
    margin: 0 24rpx 0 24rpx;
    border-radius: 16rpx;
    padding: 24rpx 24rpx 16rpx 24rpx;
    margin-top: 24rpx;
}

.all-reply-header {
    color: #222;
    font-size: 28rpx;
    font-weight: 500;
    margin-bottom: 16rpx;
}

.reply-list {
    margin-top: 40rpx;
    display: flex;
    flex-direction: column;
    gap: 50rpx;
}

.reply-item {

    display: flex;
    align-items: flex-start;
}

.reply-avatar {
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
    margin-right: 16rpx;
    flex-shrink: 0;

}

.reply-main {

    flex: 1;
    display: flex;
    flex-direction: column;

}

.reply-username {
    font-size: 24rpx;
    color: #222;
    font-weight: 500;
    margin-bottom: 4rpx;

}

.reply-content {
    font-size: 24rpx;
    color: #333;
    margin-bottom: 6rpx;
    word-break: break-all;
}

.reply-time {
    font-size: 20rpx;
    color: #bdbdbd;
}

.reply-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 90rpx;
    background: #fff;
    padding: 24rpx 32rpx 32rpx 32rpx;
    box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.03);
    z-index: 10;
}

.submit-btn {
    width: 100%;
    height: 80rpx;
    background: #0a225f;
    color: #fff;
    font-size: 30rpx;
    border-radius: 40rpx;
    font-weight: 500;
    letter-spacing: 2rpx;
}
</style>