You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
246 lines
4.6 KiB
246 lines
4.6 KiB
<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>
|