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

<template>
  <view class="my-comment-page">
    <navbar title="我的评论" :leftClick="true" @leftClick="goBack" />
    <view class="comment-section">
      <view class="section-title">未读评论·{{ unreadComments.length }}</view>
      <view v-for="(item, idx) in unreadComments" :key="'unread-' + idx" class="comment-card">
        <uv-avatar :src="item.avatar" size="44" shape="circle" class="avatar" />
        <view class="comment-main">
          <view class="comment-header">
            <text class="username">{{ item.username }}</text>
            <text class="from">来自《{{ item.bookTitle }}》</text>
          </view>
          <view class="comment-content">{{ item.content }}</view>
          <view class="comment-footer">
            <text class="comment-time">{{ item.time }}</text>
            <view class="reply-btn-wrap" @click="goToReply(item)">
            
              <text class="reply-btn">回复</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="comment-section history-section">
      <view class="section-title">历史评论</view>
      <view v-for="(item, idx) in historyComments" :key="'history-' + idx" class="comment-card">
        <uv-avatar :src="item.avatar" size="44" shape="circle" class="avatar" />
        <view class="comment-main">
          <view class="comment-header">
            <text class="username">{{ item.username }}</text>
            <text class="from">来自《{{ item.bookTitle }}》</text>
          </view>
          <view class="comment-content">{{ item.content }}</view>
          <view class="comment-footer">
            <text class="comment-time">{{ item.time }}</text>
            <view class="reply-btn-wrap" @click="goToReply(item)">
            
              <text class="reply-btn">回复</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

<style scoped lang="scss">
.my-comment-page {
  min-height: 100vh;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
}
.comment-section {
  background: #fff;
  margin: 24rpx 24rpx 0 24rpx;
  border-radius: 16rpx;
  padding: 24rpx 24rpx 0 24rpx;
  margin-bottom: 24rpx;
}
.section-title {
  color: #222;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 16rpx;
}
.comment-card {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32rpx;
}
.avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.comment-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.comment-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 4rpx;
}
.username {
  font-size: 26rpx;
  color: #222;
  font-weight: 500;
}
.from {
  font-size: 22rpx;
  color: #bdbdbd;
}
.comment-content {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 12rpx;
}
.comment-footer {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #bdbdbd;
  justify-content: space-between;
  padding-right: 8rpx;
}
.comment-time {
  color: #bdbdbd;
}
.reply-btn-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.reply-btn {
  color: #223a6b;
  font-weight: 500;
  margin-left: 0;
  font-size: 24rpx;
}
.history-section {
  margin-top: 24rpx;
}
</style>