devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp评论列表插件获取_hb-comment

作者：从前慢现在也慢 | 2024-04-28 06:36:18

赞

踩

hb-comment

从评论列表，回复，点赞，删除，留言板 - DCloud 插件市场里导入，并使用。

代码样式优化及接入如下：

  1. <template>
  2. 	<view class="hb-comment">
  3. 		<!-- 阅读数-start -->
  4. 		<view v-if="false">
  5. 			<img style="width: 14px; height: 14px;"
  6. 				src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA0tJREFUWEftVk2IHUUQ/qp311NOksRT8JBDkARCfrxEDyLK+pe/DQkmJpBlZ7ofDwQ15iRocjYSSWAzU/OWd4hCMJiQH43xBz2YXCRivIgHQQ8SRPGUU/btfNLPnuU5O7OZlWz2kobh8aq/qvq6qrq6BEu8ZIn94wGBBUWg3W6v6vV62wFsILlGRNYA6AH4AcCPJH8mebPT6dxomtpGBJxz4wD2kny2oWHN81ybEJmXQKvVWpfn+VsAXi45vgPgj/D5rUfC91AJ54m83el0PLZy1RKw1u4GkAB4OGj+LSJXRORMkiSXq6xFUfSUiHi93SKyImB+BeBU9fMqnUoCcRy/IiIfFAoicp7kYVX9pUkKrLWrReRdkjsLvNfPsuxYWX8OAWvtOwCODACPqOrRJo7LmApbe1T17CDuPwSccy2SpwZYj2VZdr7K+fj4+IqRkZFVIjJD8ndV/asKdzcSswTiON4iIlcBLPOGROTFNE0/rTHqQ3motHdWVffU1YYx5utizxjzXJIk3te/nbDdbi/r9XpesCWAasNureV86VDVurqKRUSD7k8zMzPPT01N/dYHW2uPA3gtnDxL09TWnPwjX+F+j+Q1EfkCwC0ALwHYGnTeU9U3q/Sdc0oyDnvnVHWXOOdeIPlJEN4E8ExVPq21ywH8GXCXVHXboJM4jr8VkSe8bHp6emW32y2ws7Bg40sA68NhD3gCXZIHA2q07r4659aT9C3XL3+vi3D2BaVi26Sq31dFIY7jgyLSDXs3xFp7rci9MebJJEn8/zlrMQj00+ic20/ydAjJhTRNd9Tk/56ngOT2ogg/BjAWHB9X1TfuQxG+r6qv9wlMTEw8OjQ0dAXAY8HxYl/D68PDw6OTk5O3Z+9sq9UazfP8s+Lki9iIbpMczbLsej/tg6F2zr1K8kQhI3n/WnHhdDEfI5L7syz7cPDQlW2zHIl78RwDqCzu2oEkiqKnjTFfDbD9vwOJb9vHsiw7XHWz5h3JoijaZIzxz/PjJeVGIxnJb4wxJ9M0PVflfE4R1oGcc2Mk9wHYVYcpyS8BuKiqnbvhG03FhRHn3GaSG0muM8as9b8AjB/HRcR/35G8oKr+hWy0FkSgkcUFgh4QWPII/ANy0cUvD9WbkgAAAABJRU5ErkJggg==" />
  7. 			<span class="top-read">{{commentData.readNumer}}</span>
  8. 		</view>
  9. 		<!-- 阅读数-end -->
  10. 		<!-- 阅读数下边那条线-start -->
  11. 		<view class="seg_line_box">
  12. 			<view class="seg_line"></view>
  13. 			<view class="seg_dot"></view>
  14. 			<view class="seg_line"></view>
  15. 		</view>
  16. 		<!-- 阅读数下边那条线-end -->
  17. 		<!-- 评论主体-start -->
  18. 		<view class="comment-list" v-if="commentData.comment.length != 0">
  19. 			<!-- 评论主体-顶部数量及发表评论按钮-start -->
  20. 			<view class="comment-num">
  21. 				<view>共 {{commentData.commentSize}} 条评论</view>
  22. 				<view class="add-btn">
  23. 					<button class="publishcomment" type="primary" size="mini" @click="commentInput(true)">发表评论</button>
  24. 				</view>
  25. 			</view>
  26. 			<!-- 评论主体-顶部数量及发表评论按钮-end -->
  27. 			<!-- 评论列表-start -->
  28. 			<view class="comment-box" v-for="(item, index) in commentData.comment">
  29. 				<view class="comment-box-item">
  30. 					<view>
  31. 						<image :src="baseUrl+item.avatar || emptyAvatar" mode="aspectFill" class="avatar"></image>
  32. 					</view>
  33. 					<view class="comment-main">
  34. 						<!-- 父评论体-start -->
  35. 						<view class="comment-main-top">
  36. 							<view class="nick-name-box">
  37. 								<view class="comLogo com1" v-if="index == 0">沙发</view>
  38. 								<view class="comLogo com2" v-if="index == 1">板凳</view>
  39. 								<view class="comLogo com3" v-if="index == 2">地板</view>
  40. 								<view class="comLogo com4" v-if="index > 2">{{index + 1}}楼</view>
  41. 								<view class="nick-name">{{item.nickName}}</view>
  42. 							</view>
  43. 							<view  v-if="false" class="zan-box" @click="like(item.id)">
  44. 								<span :class="item.hasLike ? 'isLike' : 'notLike'">{{item.likeNum == 0 ? '抢首赞' : item.likeNum}}</span>
  45. 								<img style="width: 14px; height: 14px;" v-if="!item.hasLike"
  46. 									src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLY+ftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN9+8fe+toMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw+3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJC+GOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc+4CpAkyUpWht3fI/m+UfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0h+SxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwB+AeggWUzVAVV1ABTAK5L7l+0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII=" />
  47. 								<img style="width: 14px; height: 14px;" v-else
  48. 									src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZt+b7+e9mTfzlqD5Ic36SATw+OPJQP2ft+ABJwQ+VFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzm+tC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g+1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9A+AKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t+6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0P+T8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg==" />
  49. 							</view>
  50. 						</view>
  51. 						<view class="comment-main-content">
  52. 							{{item.content.length > 60 ? item.content.slice(0, 59) : item.content}}
  53. 							<span v-if="item.content.length > 60">
  54. 								{{item.hasShowMore ? item.content.slice(59) : '...'}}
  55. 								<span class="foot-btn" @click="showMore(item.id)">
  56. 									{{item.hasShowMore ? '收起' : '展开'}}
  57. 								</span>
  58. 							</span>
  59. 						</view>
  60. 						<view class="comment-main-foot">
  61. 							<view class="foot-time">{{item.createTime}}</view>
  62. 							<view class="foot-btn" @click="reply(item.nickName,item.nickName,item.id)">回复</view>
  63. 							<view class="foot-btn" v-if="item.owner" @click="confirmDelete(item.id)">删除</view>
  64. 						</view>
  65. 						<!-- 父评论体-end -->
  66. 						<!-- 子评论列表-start -->
  67. 						<view class="comment-sub-box">
  68. 							<view class="comment-sub-item" v-for="each in item.children">
  69. 								<view>
  70. 									<image :src="baseUrl+each.avatar || emptyAvatar" mode="aspectFill" class="avatar">
  71. 									</image>
  72. 								</view>
  73. 								<view class="comment-main">
  74. 									<view class="sub-comment-main-top">
  75. 										<view class="nick-name">{{each.nickName}}</view>
  76. 										<view  v-if="false" class="zan-box" @click="like(each.id)">
  77. 											<span :class="each.hasLike ? 'isLike' : 'notLike'">{{each.likeNum == 0 ? '抢首赞' : each.likeNum}}</span>
  78. 											<img style="width: 14px; height: 14px;" v-if="!each.hasLike"
  79. 												src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLY+ftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN9+8fe+toMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw+3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJC+GOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc+4CpAkyUpWht3fI/m+UfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0h+SxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwB+AeggWUzVAVV1ABTAK5L7l+0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII=" />
  80. 											<img style="width: 14px; height: 14px;" v-else
  81. 												src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZt+b7+e9mTfzlqD5Ic36SATw+OPJQP2ft+ABJwQ+VFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzm+tC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g+1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9A+AKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t+6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0P+T8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg==" />
  82. 										</view>
  83. 									</view>
  84. 									<view class="comment-main-content">
  85. 										{{each.content.length > 60 ? each.content.slice(0, 59) : each.content}}
  86. 										<span v-if="each.content.length > 60">
  87. 											{{each.hasShowMore ? each.content.slice(59) : '...'}}
  88. 											<span class="foot-btn" @click="showMore(each.id)">
  89. 												{{each.hasShowMore ? '收起' : '展开'}}
  90. 											</span>
  91. 										</span>
  92. 									</view>
  93. 									<view class="comment-main-foot">
  94. 										<view class="foot-time">{{each.createTime}}</view>
  95. 										<view class="foot-btn" @click="reply(item.nickName,each.nickName,item.id)">
  96. 											回复</view>
  97. 										<view class="foot-btn" v-if="each.owner" @click="confirmDelete(each.id)">删除
  98. 										</view>
  99. 									</view>
  100. 								</view>
  101. 							</view>
  102. 						</view>
  103. 						<!-- 子评论列表-end -->
  104. 					</view>
  105. 				</view>
  106. 			</view>
  107. 			<!-- 评论列表-end -->
  108. 		</view>
  109. 		<!-- 评论主体-end -->
  110. 		<!-- 无评论-start -->
  111. 		<view class="comment-none" v-else>
  112. 			暂无评论，<span @click="commentInput(true)" style="color: #007AFF;">抢沙发</span>
  113. 		</view>
  114. 		<!-- 无评论-end -->
  115. 		<!-- 新增评论-start -->
  116. 		<view class="comment-submit-box" v-if="submit" @click="closeInput">
  117. 			<!-- 下边的click.stop.prevent用于让上边的click不传下去，以防点到下边的空白处触发closeInput方法 -->
  118. 			<view class="comment-add" @click.stop.prevent="stopPrevent" :style="'bottom:' + KeyboardHeight + 'px'">
  119. 				<view class="comment-submit">
  120. 					<view class="btn-click cancel" @click="closeInput">取消</view>
  121. 					<view>
  122. 						<view class="replayTag" v-show="showTag">
  123. 							<view v-if="pUser">回复在 {{pUser}} 的评论下</view>
  124. 							<view v-else>发表评论</view>
  125. 							<view @click="tagClose" v-if="false" class="replyTagClose">×</view>
  126. 						</view>
  127. 					</view>
  128. 					<view>
  129. 						<view class="btn-click" @click="add">发布</view>
  130. 					</view>
  131. 				</view>
  132. 				<textarea class="textarea" v-model="commentReq.content" :placeholder="placeholder" :adjust-position="false" :show-confirm-bar="false"
  133. 					@blur="blur" @focus="focusOn" :focus="focus" maxlength="800"></textarea>
  134. 			</view>
  135. 		</view>
  136. 		<!-- 新增评论-end -->
  137. 	</view>
  138. </template>
  139.  
  140. <script>
  141. 	import config from '@/config'
  142. 	export default {
  143. 		name: 'hb-comment',
  144. 		props: {
  145. 			cmData: {
  146. 				type: Object,
  147. 				default: () => {
  148. 					return null;
  149. 				}
  150. 			},
  151. 			deleteTip: {
  152. 				type: String,
  153. 				default: () => {
  154. 					return '操作不可逆，如果评论下有子评论，也将被一并删除，确认？';
  155. 				}
  156. 			},
  157. 		},
  158. 		watch: {
  159. 			cmData: {
  160. 				handler: function(newVal, oldVal) {
  161. 					this.init(newVal);
  162. 				},
  163. 				immediate: true
  164. 			}
  165. 		},
  166. 		data() {
  167. 			return {
  168. 				"emptyAvatar": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABF5JREFUWEfFl11oHFUUx//nbmKwxdJ9qFL7YPEhRJC2gljjF60WG0WsoNkWfSnZ7Jy7FVPF0AoKpmBFqyIG3Jk7G1iIQXHbBz+KbbGtRfBbMe2LseKjiVDoiqIhwZ0jV3fb3cnM7kQCuU+7M+ec/+9+nHPPEJZ50DLrY1EApVJp9fz8/BYRuZ2INgDYWJvAWRE5R0RnZmZmPh4ZGZlPOrFEAMVi8e4gCPYSUZ+IXGGFgiCYIaJpKyQi1yql1orIFgAXARxRSvm5XO67diBtAYwxRQCDAE4RUUkpdWxwcNCKLBiu665TSj0kIpqIbgTgMzO3gmgJYIz5CMB9AIaZ+bXGQMVi8RoRuZeI/lZKHc1ms3/U34+Pj6+cnZ3dC+AggGPMfH8cRCyAMUZqThlmPlwPUCgU0qlUyq7Kww1BrbjHzPsahYwx/QDK9hkzR2pFPjTGnAWwIexkjOkRkRIR3Rozo5Miskdr/VMIxE7mHDPXD+2l1wsA6nseBMHmfD7/dSjQOwB2tTlYC/bddd1blFJfARhj5lyjfxNA7bSfitpz3/d3iYgFaDuUUjeHM8AY8zSAV5VS9+RyudP1IE0Axpj3Aaxk5m1hFc/zPiWiO9uq/2dwiJn3h22NMScB/MnMOxYAjI6Orurq6rpgU0hrXYpw/hFAd0KAD5n5wbCt7/t7ROT1ubm5NUNDQ7/b95dWwHXd7Uqp452dnVcPDAxciACwDlclAbAFynGcdRGr2EtEnwdB0JfP5080ARhjDhLRbY7jbI0SMcZUAKxOAgDgN2ZOx8SxGfEiMz/bBOD7/lgQBCu01o/GOH4PYFNCgElmvinK1vf9X2xxchzHVtfLW2CMOQpgipmHYwBeBtBUaOJgRKSgtX48Js63AH5l5geaADzPe1cpddFxnHyM42YAXyZYAXt+epn557iVFJHzWuudYYDnlFJ9juPcESfi+35JRHa3gdjPzIfibIwxNtPe0Fq/EAZ4hIhcZl4T5+y67nql1CcA1kfZENFnrSZQ6ycqItKvtT4SBthIRJMdHR092WzW5nzk8H1/WEReiQHY4TjOB3G+nuf9qyEim7TW9r65fAjL5fKVlUrlPICXmPnNFquwWym1oFBZ+yAItubz+TMtAJ4gon3pdLo7k8nMNgHYP7ZeE5EWkbuYeaYx0NjY2HXValUDeApAV4zIJIADzPxe+H2hULg+lUp9U6sBl3qLprugXC6nKpXKF0R02nGcZ2wQ3/e3ichOEckQ0aoEWQDbsgF4a3p6eqLeH3qeN0FE3el0ujeTyVTrcaKuY1uIjIg8CaCfiLYnEW1hY4WPi8gEgMeY+e1G27iGxHYxtptZynGYmTPhgK1asqWEiBRfcAjDdMaYpYCIFW8LUMuM54nIsb3/YvbDXskiYtuzA6382n4X1CDWAnCSgNSFa98ETakcWbwWMytjzAoAPUEQ3JBKpXrs75r/VLVanVJK/VC7Uf9KGjfRCiQN9n/slh3gHz9i4jC+FVL5AAAAAElFTkSuQmCC",
  169. 				"commentData": null,
  170. 				"placeholder": "请输入评论",
  171. 				"commentReq": {
  172. 					"pId": null, // 评论父id
  173. 					"content": null // 评论内容
  174. 				},
  175. 				"pUser": null, // 标签-回复人
  176. 				"showTag": false, // 标签展示与否
  177. 				"focus": false, // 输入框自动聚焦
  178. 				"submit": false, // 弹出评论
  179. 				"KeyboardHeight": 0 ,// 键盘高度
  180. 				baseUrl:config.baseUrl,
  181. 			};
  182. 		},
  183. 		mounted: function() {
  184. 			uni.onKeyboardHeightChange(res => {
  185. 				this.KeyboardHeight = res.height;
  186. 			})
  187. 		},
  188. 		methods: {
  189. 			// 初始化评论
  190. 			init(cmData) {
  191. 				// for (var i in cmData.comment) {
  192. 				// 	cmData.comment[i].hasShowMore = false;
  193. 				// 	for (var j in cmData.comment[i].children) {
  194. 				// 		cmData.comment[i].children[j].hasShowMore = false;
  195. 				// 	}
  196. 				// }
  197. 				this.commentData = cmData;
  198. 			},
  199. 			// 没用的方法，但不要删
  200. 			stopPrevent() {},
  201. 			// 回复评论
  202. 			reply(pUser, reUser, pId) {
  203. 				this.pUser = pUser;
  204. 				this.commentReq.pId = pId;
  205. 				if (reUser) {
  206. 					this.commentReq.content = '@' + reUser + ' ';
  207. 				} else {
  208. 					this.commentReq.content = '';
  209. 				}
  210. 				this.showTag = true;
  211. 				this.commentInput(false);
  212. 			},
  213. 			// 删除评论前确认
  214. 			confirmDelete(commentId) {
  215. 				var that = this;
  216. 				uni.showModal({
  217. 					title: '警告',
  218. 					content: that.deleteTip,
  219. 					confirmText: '确认删除',
  220. 					success: function(res) {
  221. 						if (res.confirm) {
  222. 							that.$emit('del', commentId);
  223. 						}
  224. 					}
  225. 				});
  226. 			},
  227. 			// 新增评论
  228. 			add() {
  229. 				if (this.commentReq.content == null || this.commentReq.content.length < 2) {
  230. 					uni.showToast({
  231. 						title: '评论内容过短',
  232. 						duration: 2000
  233. 					});
  234. 					return
  235. 				}
  236. 				this.$emit('add', this.commentReq);
  237. 			},
  238. 			// 点赞评论
  239. 			like(commentId) {
  240. 				this.$emit('like', commentId);
  241. 			},
  242. 			// 新增完成
  243. 			addComplete() {
  244. 				this.commentReq.content = null;
  245. 				this.tagClose();
  246. 				this.closeInput();
  247. 			},
  248. 			// 点赞完成-本地修改点赞结果
  249. 			likeComplete(commentId) {
  250. 				for (var i in this.commentData.comment) {
  251. 					if (this.commentData.comment[i].id == commentId) {
  252. 						this.commentData.comment[i].hasLike ? this.commentData.comment[i].likeNum-- : this.commentData
  253. 							.comment[i].likeNum++;
  254. 						this.commentData.comment[i].hasLike = !this.commentData.comment[i].hasLike;
  255. 						return
  256. 					}
  257. 					for (var j in this.commentData.comment[i].children) {
  258. 						if (this.commentData.comment[i].children[j].id == commentId) {
  259. 							this.commentData.comment[i].children[j].hasLike ? this.commentData.comment[i].children[j]
  260. 								.likeNum-- : this.commentData.comment[i].children[j].likeNum++;
  261. 							this.commentData.comment[i].children[j].hasLike = !this.commentData.comment[i].children[j]
  262. 								.hasLike;
  263. 							return
  264. 						}
  265. 					}
  266. 				}
  267. 			},
  268. 			// 删除完成-本地删除评论
  269. 			deleteComplete(commentId) {
  270. 				for (var i in this.commentData.comment) {
  271. 					for (var j in this.commentData.comment[i].children) {
  272. 						if (this.commentData.comment[i].children[j].id == commentId) {
  273. 							this.commentData.comment[i].children.splice(Number(j), 1);
  274. 							return
  275. 						}
  276. 					}
  277. 					if (this.commentData.comment[i].id == commentId) {
  278. 						this.commentData.comment.splice(Number(i), 1);
  279. 						return
  280. 					}
  281. 				}
  282. 			},
  283. 			// 展开评论
  284. 			showMore(commentId) {
  285. 				for (var i in this.commentData.comment) {
  286. 					if (this.commentData.comment[i].id == commentId) {
  287. 						this.commentData.comment[i].hasShowMore = !this.commentData.comment[i].hasShowMore;
  288. 						this.$forceUpdate();
  289. 						return
  290. 					}
  291. 					for (var j in this.commentData.comment[i].children) {
  292. 						if (this.commentData.comment[i].children[j].id == commentId) {
  293. 							this.commentData.comment[i].children[j].hasShowMore = !this.commentData.comment[i].children[j]
  294. 								.hasShowMore;
  295. 							this.$forceUpdate();
  296. 							return
  297. 						}
  298. 					}
  299. 				}
  300. 			},
  301. 			// 输入框失去焦点
  302. 			blur() {
  303. 				this.focus = false;
  304. 			},
  305. 			// 输入框聚焦
  306. 			focusOn() {
  307. 				this.$emit('focusOn');
  308. 			},
  309. 			// 标签关闭
  310. 			tagClose() {
  311. 				this.showTag = false;
  312. 				this.pUser = null;
  313. 				this.commentReq.pId = null;
  314. 			},
  315. 			// 输入评论
  316. 			commentInput(data) {
  317. 				if(data){
  318. 					this.commentReq = {
  319. 						"pId": null, // 评论父id
  320. 						"content": null // 评论内容
  321. 					};
  322. 				}
  323. 				// TODO 调起键盘方法
  324. 				this.submit = true;
  325. 				setTimeout(() => {
  326. 					this.focus = true;
  327. 				}, 50)
  328. 			},
  329. 			// 关闭输入评论
  330. 			closeInput() {
  331. 				this.focus = false;
  332. 				this.submit = false;
  333. 			}
  334. 		}
  335. 	};
  336. </script>
  337.  
  338. <style lang="scss" scoped>
  339. 	.hb-comment {
  340. 		padding: 10rpx;
  341. 		background-color: #f4ffff;
  342. 		width: 95%;
  343. 		border-radius: 5px;
  344. 		border-color: lightskyblue;
  345. 		padding-left: 5px;
  346. 		margin-left: 10px;
  347. 	}
  348.  
  349. 	.top-read {
  350. 		font-size: 28rpx;
  351. 		padding-left: 10rpx;
  352. 		color: #999999;
  353. 	}
  354.  
  355. 	.seg_line_box {
  356. 		display: flex;
  357. 		height: 5rpx;
  358. 		justify-content: space-between;
  359. 		margin: 5rpx 0;
  360. 	}
  361.  
  362. 	.seg_line {
  363. 		width: 45%;
  364. 		border-bottom: 1rpx solid #e1e1e1;
  365. 	}
  366.  
  367. 	.seg_dot {
  368. 		width: 8%;
  369. 		border-bottom: 5rpx dotted #dbdbdb;
  370. 	}
  371.  
  372. 	.comment-num {
  373. 		display: flex;
  374. 		justify-content: space-between;
  375. 		align-items: center;
  376. 		padding: 20rpx 0;
  377. 		.publishcomment{
  378. 			background-color: lightgreen;
  379. 		}
  380. 	}
  381.  
  382. 	.comment-box {
  383. 		padding: 10rpx 0;
  384. 	}
  385.  
  386. 	.comment-box-item {
  387. 		display: flex;
  388. 	}
  389.  
  390. 	.comment-main {
  391. 		padding-left: 20rpx;
  392. 	}
  393.  
  394. 	.comment-main-top {
  395. 		width: 600rpx;
  396. 		padding-top: 6rpx;
  397. 		display: flex;
  398. 		justify-content: space-between;
  399. 	}
  400.  
  401. 	.sub-comment-main-top {
  402. 		width: 510rpx;
  403. 		padding-top: 6rpx;
  404. 		display: flex;
  405. 		justify-content: space-between;
  406. 	}
  407.  
  408. 	.avatar {
  409. 		width: 70rpx;
  410. 		height: 70rpx;
  411. 		border-radius: 50%;
  412. 	}
  413.  
  414. 	.nick-name-box {
  415. 		display: flex;
  416. 		align-items: center;
  417. 	}
  418.  
  419. 	.comLogo {
  420. 		margin-right: 18rpx;
  421. 		font-size: 22rpx;
  422. 		border-radius: 10rpx;
  423. 		padding: 5rpx 15rpx;
  424. 		color: #FFFFFF;
  425. 	}
  426.  
  427. 	.com1 {
  428. 		background-color: #d218b1;
  429. 	}
  430.  
  431. 	.com2 {
  432. 		background-color: #f19c0b;
  433. 	}
  434.  
  435. 	.com3 {
  436. 		background-color: #c8da85;
  437. 	}
  438.  
  439. 	.com4 {
  440. 		background-color: #bfd0da;
  441. 	}
  442.  
  443. 	.nick-name {
  444. 		color: #2d8cf0;
  445. 	}
  446.  
  447. 	.isLike {
  448. 		font-size: 28rpx;
  449. 		padding-right: 10rpx;
  450. 		color: #2d8cf0;
  451. 	}
  452.  
  453. 	.notLike {
  454. 		font-size: 28rpx;
  455. 		padding-right: 10rpx;
  456. 		color: #999999;
  457. 	}
  458.  
  459. 	.comment-main-content {
  460. 		padding: 10rpx 10rpx 10rpx 0;
  461. 	}
  462.  
  463. 	.comment-main-foot {
  464. 		display: flex;
  465. 		font-size: 22rpx;
  466. 	}
  467.  
  468. 	.replayTag {
  469. 		color: #909399;
  470. 		margin-bottom: 5px;
  471. 		border: 1px solid #c8c9cc;
  472. 		background-color: #f4f4f5;
  473. 		border-radius: 3px;
  474. 		display: flex;
  475. 		justify-content: space-between;
  476. 		align-items: center;
  477. 		font-size: 16rpx;
  478. 		padding: 5px 10px;
  479. 	}
  480.  
  481. 	.replyTagClose {
  482. 		font-size: 20px;
  483. 		line-height: 12px;
  484. 		padding: 0 0 2px 5px;
  485. 	}
  486.  
  487. 	.foot-btn {
  488. 		padding-left: 10rpx;
  489. 		color: #007AFF;
  490. 	}
  491.  
  492. 	.comment-sub-box {
  493. 		padding: 20rpx 0;
  494. 	}
  495.  
  496. 	.comment-sub-item {
  497. 		display: flex;
  498. 	}
  499.  
  500. 	.comment-none {
  501. 		padding: 20rpx;
  502. 		width: 100%;
  503. 		text-align: center;
  504. 		color: #999999;
  505. 	}
  506.  
  507. 	.comment-submit-box {
  508. 		position: fixed;
  509. 		display: flex;
  510. 		align-items: flex-end;
  511. 		z-index: 9900;
  512. 		left: 0;
  513. 		top: var(--window-top);
  514. 		bottom: 0;
  515. 		background-color: rgba($color: #000000, $alpha: 0.5);
  516. 		width: 100%;
  517. 	}
  518.  
  519. 	.comment-add {
  520. 		position: fixed;
  521. 		background-color: #FFFFFF;
  522. 		width: 100%;
  523. 		padding: 5rpx;
  524. 		border: 1px solid #ddd;
  525. 		transition: .3s;
  526. 		-webkit-transition: .3s;
  527. 	}
  528.  
  529. 	.btn-click {
  530. 		color: #007AFF;
  531. 		font-size: 28rpx;
  532. 		padding: 10rpx;
  533. 	}
  534.  
  535. 	.cancel {
  536. 		color: #606266;
  537. 	}
  538.  
  539. 	.textarea {
  540. 		height: 100px;
  541. 		padding: 16rpx;
  542. 		width: 100%;
  543. 	}
  544.  
  545. 	.comment-submit {
  546. 		padding: 5rpx 20rpx 0 20rpx;
  547. 		border-bottom: 1px dashed #ddd;
  548. 		width: calc(100% - 40rpx);
  549. 		display: flex;
  550. 		justify-content: space-between;
  551. 		align-items: center;
  552. 	}
  553. </style>

页面接入：

  1. <view class="comment">
  2. 		   <hb-comment ref="hbComment" @add="sendComment" @del="delcomment" @like="like" @focusOn="focusOn" :deleteTip="'确认删除？'"
  3. 		       :cmData="commentData" v-if="commentData"></hb-comment>
  4. 	   </view>
  5.  
  6. getTree(data) {
  7. 			    let result = [];
  8. 			    let map = {};
  9. 			    data.forEach(item => {
  10. 			        map[item.id] = item;
  11. 			    });
  12. 			    data.forEach(item => {
  13. 			        let parent = map[item.parentId];
  14. 			        if (parent) {
  15. 			            (parent.children || (parent.children = [])).push(item);
  16. 			        } else {
  17. 			            result.push(item);
  18. 			        }
  19. 			    });
  20. 			    return result;
  21. 			},
  22. 			bindTextAreaBlur: function (e) {
  23. 				console.log(e.detail.value)
  24. 			},
  25. 			focusOn(){
  26. 				this.$refs.hbComment.focusOn();
  27. 			},
  28. 			sendComment(data){
  29. 				var type=0
  30. 				if(data.pId){
  31. 					type = 1;
  32. 				}
  33. 				var form = {"content":data.content,"blogId":this.item.id,"type":type,"parentId":data.pId};
  34. 				addCommentBlog(form).then(response=>{
  35. 					this.$refs.hbComment.closeInput();
  36. 					this.getCommentList();
  37. 				})
  38. 			},
  39. 			delcomment(data){
  40. 				delcomment(data).then(response=>{
  41. 					this.getCommentList();
  42. 				})
  43. 			},
  44. 			getCommentList(){
  45. 				listCommentBlogMinApp({"blogId":this.item.id}).then(res=>{
  46. 					// res.readNumer = 193;
  47. 					res.commentList=res.data.rows;
  48. 					this.commentData = {
  49. 					    "readNumer": res.readNumer,
  50. 					    "commentSize": res.commentList.length,
  51. 					    "comment": this.getTree(res.commentList)
  52. 					}
  53. 				})
  54. 			},

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/500870
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号