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

245 lines
4.6 KiB

  1. <template>
  2. <view class="comments-page">
  3. <navbar title="评论详情" leftClick @leftClick="$utils.navigateBack" />
  4. <!-- 书本名称 -->
  5. <view class="book-title-area">
  6. <view class="book-title-label">书本名称</view>
  7. <view class="book-title">{{ bookTitle }}</view>
  8. </view>
  9. <!-- 主评论卡片 -->
  10. <view class="comment-card" v-if="comment.hanHaiMember">
  11. <view class="comment-header">
  12. <image class="avatar" :src="comment.hanHaiMember.headImage" mode="aspectFill" />
  13. <view class="user-info">
  14. <text class="username">{{ comment.hanHaiMember.nickName }}</text>
  15. </view>
  16. </view>
  17. <view class="comment-content">{{ comment.comment }}</view>
  18. <view class="comment-footer">
  19. <text class="comment-time">{{ comment.createTime }}</text>
  20. </view>
  21. </view>
  22. <!-- 全部评论列表 -->
  23. <view class="all-reply-area">
  24. <view class="all-reply-header">回复 · {{ comment.children.length }}</view>
  25. <view class="reply-list">
  26. <view class="reply-item" v-for="(item, idx) in comment.children" :key="idx">
  27. <image class="reply-avatar" :src="item.hanHaiMember.headImage" mode="aspectFill" />
  28. <view class="reply-main">
  29. <view class="reply-username">{{ item.hanHaiMember.nickName }}</view>
  30. <view class="reply-content">{{ item.comment }}</view>
  31. <view class="reply-time">{{ item.createTime }}</view>
  32. </view>
  33. </view>
  34. <uv-empty mode="list" v-if="comment.children.length == 0"></uv-empty>
  35. </view>
  36. </view>
  37. <!-- 底部回复按钮 -->
  38. <view class="reply-footer">
  39. <button class="submit-btn" @click="goToRespond">回复评论</button>
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. import navbar from '@/components/base/navbar.vue'
  45. export default {
  46. components: {
  47. navbar
  48. },
  49. data() {
  50. return {
  51. bookTitle: '',
  52. comment: {},
  53. id : 0,
  54. }
  55. },
  56. onLoad({id}) {
  57. this.id = id
  58. },
  59. onShow() {
  60. this.getData()
  61. },
  62. methods: {
  63. async getData(){
  64. this.comment = await this.$fetch('getCommentDetail', {
  65. commentId : this.id,
  66. })
  67. this.bookTitle = this.comment.commonShop.name
  68. },
  69. goToRespond() {
  70. uni.navigateTo({
  71. url: '/pages_order/comment/respondComments?id=' + this.id
  72. })
  73. },
  74. }
  75. }
  76. </script>
  77. <style scoped lang="scss">
  78. .comments-page {
  79. min-height: 100vh;
  80. background: #f8f8f8;
  81. display: flex;
  82. flex-direction: column;
  83. }
  84. .book-title-area {
  85. background: #fff;
  86. margin: 24rpx 24rpx 0 24rpx;
  87. border-radius: 16rpx;
  88. padding: 24rpx 24rpx 0 24rpx;
  89. }
  90. .book-title-label {
  91. color: #bdbdbd;
  92. font-size: 24rpx;
  93. margin-bottom: 4rpx;
  94. }
  95. .book-title {
  96. font-size: 28rpx;
  97. color: #222;
  98. margin-bottom: 16rpx;
  99. border-bottom: 1px solid #ededed;
  100. padding-bottom: 8rpx;
  101. }
  102. .comment-card {
  103. background: #fff;
  104. margin: 24rpx;
  105. border-radius: 16rpx;
  106. padding: 24rpx 24rpx 0 24rpx;
  107. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  108. margin-bottom: 0;
  109. }
  110. .comment-header {
  111. display: flex;
  112. align-items: center;
  113. margin-bottom: 8rpx;
  114. }
  115. .avatar {
  116. width: 56rpx;
  117. height: 56rpx;
  118. border-radius: 50%;
  119. margin-right: 16rpx;
  120. }
  121. .user-info {
  122. display: flex;
  123. flex-direction: column;
  124. }
  125. .username {
  126. font-size: 26rpx;
  127. color: #222;
  128. font-weight: 500;
  129. }
  130. .comment-content {
  131. font-size: 26rpx;
  132. color: #333;
  133. margin-bottom: 12rpx;
  134. }
  135. .comment-footer {
  136. display: flex;
  137. align-items: center;
  138. font-size: 22rpx;
  139. color: #bdbdbd;
  140. padding-bottom: 20rpx;
  141. }
  142. .comment-time {
  143. color: #bdbdbd;
  144. margin-top: 18rpx;
  145. }
  146. .all-reply-area {
  147. background: #fff;
  148. margin: 0 24rpx 0 24rpx;
  149. border-radius: 16rpx;
  150. padding: 24rpx 24rpx 16rpx 24rpx;
  151. margin-top: 24rpx;
  152. }
  153. .all-reply-header {
  154. color: #222;
  155. font-size: 28rpx;
  156. font-weight: 500;
  157. margin-bottom: 16rpx;
  158. }
  159. .reply-list {
  160. margin-top: 40rpx;
  161. display: flex;
  162. flex-direction: column;
  163. gap: 50rpx;
  164. }
  165. .reply-item {
  166. display: flex;
  167. align-items: flex-start;
  168. }
  169. .reply-avatar {
  170. width: 44rpx;
  171. height: 44rpx;
  172. border-radius: 50%;
  173. margin-right: 16rpx;
  174. flex-shrink: 0;
  175. }
  176. .reply-main {
  177. flex: 1;
  178. display: flex;
  179. flex-direction: column;
  180. }
  181. .reply-username {
  182. font-size: 24rpx;
  183. color: #222;
  184. font-weight: 500;
  185. margin-bottom: 4rpx;
  186. }
  187. .reply-content {
  188. font-size: 24rpx;
  189. color: #333;
  190. margin-bottom: 6rpx;
  191. word-break: break-all;
  192. }
  193. .reply-time {
  194. font-size: 20rpx;
  195. color: #bdbdbd;
  196. }
  197. .reply-footer {
  198. position: fixed;
  199. left: 0;
  200. right: 0;
  201. bottom: 90rpx;
  202. background: #fff;
  203. padding: 24rpx 32rpx 32rpx 32rpx;
  204. box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.03);
  205. z-index: 10;
  206. }
  207. .submit-btn {
  208. width: 100%;
  209. height: 80rpx;
  210. background: #0a225f;
  211. color: #fff;
  212. font-size: 30rpx;
  213. border-radius: 40rpx;
  214. font-weight: 500;
  215. letter-spacing: 2rpx;
  216. }
  217. </style>