|
|
- <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" v-if="comment.hanHaiMember">
- <view class="comment-header">
- <image class="avatar" :src="comment.hanHaiMember.headImage" mode="aspectFill" />
- <view class="user-info">
- <text class="username">{{ comment.hanHaiMember.nickName }}</text>
- </view>
- </view>
- <view class="comment-content">{{ comment.comment }}</view>
- <view class="comment-footer">
- <text class="comment-time">{{ comment.createTime }}</text>
- </view>
- </view>
- <!-- 全部评论列表 -->
- <view class="all-reply-area">
- <view class="all-reply-header">回复 · {{ comment.children.length }}</view>
- <view class="reply-list">
- <view class="reply-item" v-for="(item, idx) in comment.children" :key="idx">
- <image class="reply-avatar" :src="item.hanHaiMember.headImage" mode="aspectFill" />
- <view class="reply-main">
- <view class="reply-username">{{ item.hanHaiMember.nickName }}</view>
- <view class="reply-content">{{ item.comment }}</view>
- <view class="reply-time">{{ item.createTime }}</view>
- </view>
- </view>
- <uv-empty mode="list" v-if="comment.children.length == 0"></uv-empty>
- </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: {},
- id : 0,
- }
- },
- onLoad({id}) {
- this.id = id
- },
- onShow() {
- this.getData()
- },
- methods: {
- async getData(){
- this.comment = await this.$fetch('getCommentDetail', {
- commentId : this.id,
- })
- this.bookTitle = this.comment.commonShop.name
- },
- goToRespond() {
- uni.navigateTo({
- url: '/pages_order/comment/respondComments?id=' + this.id
- })
- },
- }
- }
- </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: 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;
- padding-bottom: 20rpx;
- }
-
- .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>
|