小说小程序前端代码仓库(小程序)
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.
 
 
 

118 lines
2.0 KiB

<template>
<view class="comment-card">
<uv-avatar :src="item.hanHaiMember.headImage" size="44" shape="circle" class="avatar" />
<view class="comment-main">
<view class="comment-header">
<text class="username">{{ item.hanHaiMember.nickName }}</text>
<text class="from">来自{{ item.commonShop.name }}</text>
</view>
<view class="comment-content">{{ item.comment }}</view>
<view class="comment-footer">
<text class="comment-time">{{ item.createTime }}</text>
<view class="reply-btn-wrap" @click="goToReply(item)">
<text class="reply-btn">回复</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: ['item'],
data() {
return {
}
},
methods: {
goToReply(item) {
// this.$fetch('updateCommentRead', {
// commentId : item.id,
// })
uni.navigateTo({
url: '/pages_order/comment/respondComments?id=' + item.id
})
},
}
}
</script>
<style scoped lang="scss">
.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;
margin-left: 10rpx;
}
.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>