网站建设创客,商城类网站功能,网站策划书编写,西宁做网站君博领衔从评论列表#xff0c;回复#xff0c;点赞#xff0c;删除#xff0c;留言板 - DCloud 插件市场里导入#xff0c;并使用。
代码样式优化及接入如下#xff1a;
templateview classhb-comment!-- 阅读数-start --view v-if回复点赞删除留言板 - DCloud 插件市场里导入并使用。
代码样式优化及接入如下
templateview classhb-comment!-- 阅读数-start --view v-iffalseimg stylewidth: 14px; height: 14px;srcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA0tJREFUWEftVk2IHUUQ/qp311NOksRT8JBDkARCfrxEDyLKpe/DQkmJpBlZ7ofDwQ15iRocjYSSWAzU/OWd4hCMJiQH43xBz2YXCRivIgHQQ8SRPGUU/btfNLPnuU5O7OZlWz2kobh8aq/qvq6qrq6BEu8ZIn94wGBBUWg3W6v6vV62wFsILlGRNYA6AH4AcCPJH8mebPT6dxomtpGBJxz4wD2kny2oWHN81ybEJmXQKvVWpfnVsAXi45vgPgj/D5rUfC91AJ54m83el0PLZy1RKw1u4GkAB4OGjLSJXRORMkiSXq6xFUfSUiHi93SKyImBBeBU9fMqnUoCcRy/IiIfFAoicp7kYVX9pUkKrLWrReRdkjsLvNfPsuxYWX8OAWvtOwCODACPqOrRJo7LmApbe1T17CDuPwSccy2SpwZYj2VZdr7Kfj4IqRkZFVIjJD8ndV/asKdzcSswTiON4iIlcBLPOGROTFNE0/rTHqQ3motHdWVffU1YYx5utizxjzXJIk3te/nbDdbi/r9XpesCWAasNureV86VDVurqKRUSD7k8zMzPPT01N/dYHW2uPA3gtnDxL09TWnPwjXFjQ1EfkCwC0ALwHYGnTeU9U3q/Sdc0oyDnvnVHWXOOdeIPlJEN4E8ExVPq21ywH8GXCXVHXboJM4jr8VkSe8bHp6emW32y2ws7Bg40sA68NhD3gCXZIHA2q07r4659aT9C3XL3vi3D2BaVi26Sq31dFIY7jgyLSDXs3xFp7rci9MebJJEn8/zlrMQj00ic20/ydAjJhTRNd9Tk/56ngOT2ogg/BjAWHB9X1TfuQxGr6qv9wlMTEw8OjQ0dAXAY8HxYl/D68PDw6OTk5O3Z9sq9UazfP8sLki9iIbpMczbLsej/tg6F2zr1K8kQhI3n/WnHhdDEfI5L7syz7cPDQlW2zHIl78RwDqCzu2oEkiqKnjTFfDbD9vwOJb9vHsiw7XHWz5h3JoijaZIzxz/PjJeVGIxnJb4wxJ9M0PVflfE4R1oGcc2Mk9wHYVYcpyS8BuKiqnbvhG03FhRHn3GaSG0muM8as9b8AjB/HRcR/35G8oKrhWy0FkSgkcUFgh4QWPII/ANy0cUvD9WbkgAAAABJRU5ErkJggg /span classtop-read{{commentData.readNumer}}/span/view!-- 阅读数-end --!-- 阅读数下边那条线-start --view classseg_line_boxview classseg_line/viewview classseg_dot/viewview classseg_line/view/view!-- 阅读数下边那条线-end --!-- 评论主体-start --view classcomment-list v-ifcommentData.comment.length ! 0!-- 评论主体-顶部数量及发表评论按钮-start --view classcomment-numview共 {{commentData.commentSize}} 条评论/viewview classadd-btnbutton classpublishcomment typeprimary sizemini clickcommentInput(true)发表评论/button/view/view!-- 评论主体-顶部数量及发表评论按钮-end --!-- 评论列表-start --view classcomment-box v-for(item, index) in commentData.commentview classcomment-box-itemviewimage :srcbaseUrlitem.avatar || emptyAvatar modeaspectFill classavatar/image/viewview classcomment-main!-- 父评论体-start --view classcomment-main-topview classnick-name-boxview classcomLogo com1 v-ifindex 0沙发/viewview classcomLogo com2 v-ifindex 1板凳/viewview classcomLogo com3 v-ifindex 2地板/viewview classcomLogo com4 v-ifindex 2{{index 1}}楼/viewview classnick-name{{item.nickName}}/view/viewview v-iffalse classzan-box clicklike(item.id)span :classitem.hasLike ? isLike : notLike{{item.likeNum 0 ? 抢首赞 : item.likeNum}}/spanimg stylewidth: 14px; height: 14px; v-if!item.hasLikesrcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLYftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN98fetoMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJCGOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc4CpAkyUpWht3fI/mUfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0hSxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwBAeggWUzVAVV1ABTAK5L7l0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII /img stylewidth: 14px; height: 14px; v-elsesrcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZtb7e9mTfzlqD5Ic36SATwOPJQP2ftABJwQVFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzmtC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9AAKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0PT8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg //view/viewview classcomment-main-content{{item.content.length 60 ? item.content.slice(0, 59) : item.content}}span v-ifitem.content.length 60{{item.hasShowMore ? item.content.slice(59) : ...}}span classfoot-btn clickshowMore(item.id){{item.hasShowMore ? 收起 : 展开}}/span/span/viewview classcomment-main-footview classfoot-time{{item.createTime}}/viewview classfoot-btn clickreply(item.nickName,item.nickName,item.id)回复/viewview classfoot-btn v-ifitem.owner clickconfirmDelete(item.id)删除/view/view!-- 父评论体-end --!-- 子评论列表-start --view classcomment-sub-boxview classcomment-sub-item v-foreach in item.childrenviewimage :srcbaseUrleach.avatar || emptyAvatar modeaspectFill classavatar/image/viewview classcomment-mainview classsub-comment-main-topview classnick-name{{each.nickName}}/viewview v-iffalse classzan-box clicklike(each.id)span :classeach.hasLike ? isLike : notLike{{each.likeNum 0 ? 抢首赞 : each.likeNum}}/spanimg stylewidth: 14px; height: 14px; v-if!each.hasLikesrcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLYftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN98fetoMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJCGOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc4CpAkyUpWht3fI/mUfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0hSxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwBAeggWUzVAVV1ABTAK5L7l0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII /img stylewidth: 14px; height: 14px; v-elsesrcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZtb7e9mTfzlqD5Ic36SATwOPJQP2ftABJwQVFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzmtC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9AAKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0PT8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg //view/viewview classcomment-main-content{{each.content.length 60 ? each.content.slice(0, 59) : each.content}}span v-ifeach.content.length 60{{each.hasShowMore ? each.content.slice(59) : ...}}span classfoot-btn clickshowMore(each.id){{each.hasShowMore ? 收起 : 展开}}/span/span/viewview classcomment-main-footview classfoot-time{{each.createTime}}/viewview classfoot-btn clickreply(item.nickName,each.nickName,item.id)回复/viewview classfoot-btn v-ifeach.owner clickconfirmDelete(each.id)删除/view/view/view/view/view!-- 子评论列表-end --/view/view/view!-- 评论列表-end --/view!-- 评论主体-end --!-- 无评论-start --view classcomment-none v-else暂无评论span clickcommentInput(true) stylecolor: #007AFF;抢沙发/span/view!-- 无评论-end --!-- 新增评论-start --view classcomment-submit-box v-ifsubmit clickcloseInput!-- 下边的click.stop.prevent用于让上边的click不传下去以防点到下边的空白处触发closeInput方法 --view classcomment-add click.stop.preventstopPrevent :stylebottom: KeyboardHeight pxview classcomment-submitview classbtn-click cancel clickcloseInput取消/viewviewview classreplayTag v-showshowTagview v-ifpUser回复在 {{pUser}} 的评论下/viewview v-else发表评论/viewview clicktagClose v-iffalse classreplyTagClose×/view/view/viewviewview classbtn-click clickadd发布/view/view/viewtextarea classtextarea v-modelcommentReq.content :placeholderplaceholder :adjust-positionfalse :show-confirm-barfalseblurblur focusfocusOn :focusfocus maxlength800/textarea/view/view!-- 新增评论-end --/view
/templatescriptimport config from /configexport default {name: hb-comment,props: {cmData: {type: Object,default: () {return null;}},deleteTip: {type: String,default: () {return 操作不可逆如果评论下有子评论也将被一并删除确认;}},},watch: {cmData: {handler: function(newVal, oldVal) {this.init(newVal);},immediate: true}},data() {return {emptyAvatar: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABF5JREFUWEfFl11oHFUUx//nbmKwxdJ9qFL7YPEhRJC2gljjF60WG0WsoNkWfSnZ7Jy7FVPF0AoKpmBFqyIG3Jk7G1iIQXHbBzKbbGtRfBbMe2LseKjiVDoiqIhwZ0jV3fb3cnM7kQCuU7Mec/9nHPPEJZ50DLrY1EApVJp9fz8/BYRuZ2INgDYWJvAWRE5R0RnZmZmPh4ZGZlPOrFEAMVi8e4gCPYSUZIXGGFgiCYIaJpKyQi1yql1orIFgAXARxRSvm5XO67diBtAYwxRQCDAE4RUUkpdWxwcNCKLBiu665TSj0kIpqIbgTgMzO3gmgJYIz5CMB9AIaZbXGQMVi8RoRuZeI/lZKHc1ms3/U34Pj6cnZ3dCAggGPMfH8cRCyAMUZqThlmPlwPUCgU0qlUyq7Kww1BrbjHzPsahYwx/QDK9hkzR2pFPjTGnAWwIexkjOkRkRIR3Rozo5Miskdr/VMIxE7mHDPXD2l1wsA6nseBMHmfD7/dSjQOwB2tTlYC/bddd1blFJfARhj5lyjfxNA7bSfitpz3/d3iYgFaDuUUjeHM8AY8zSAV5VS9RyudP1IE0Axpj3Aaxk5m1hFc/zPiWiO9uq/2dwiJn3h22NMScB/MnMOxYAjI6Orurq6rpgU0hrXYpw/hFAd0KAD5n5wbCt7/t7ROT1ubm5NUNDQ7/b95dWwHXd7Uqp452dnVcPDAxciACwDlclAbAFynGcdRGr2EtEnwdB0JfP5080ARhjDhLRbY7jbI0SMcZUAKxOAgDgN2ZOx8SxGfEiMz/bBOD7/lgQBCu01o/GOH4PYFNCgElmvinK1vf9X2xxchzHVtfLW2CMOQpgipmHYwBeBtBUaOJgRKSgtX48Js63AH5l5geaADzPe1cpddFxnHyM42YAXyZYAXtepn557iVFJHzWuudYYDnlFJ9juPcESfi35JRHa3gdjPzIfibIwxNtPe0Fq/EAZ4hIhcZl4T5y67nql1CcA1kfZENFnrSZQ6ycqItKvtT4SBthIRJMdHR092WzW5nzk8H1/WEReiQHY4TjOB3Gnuf9qyEim7TW9r65fAjL5fKVlUrlPICXmPnNFquwWym1oFBZyAItubzTMtAJ4gon3pdLo7k8nMNgHYP7ZeE5EWkbuYeaYx0NjY2HXValUDeApAV4zIJIADzPxeH2hULglUp9U6sBl3qLprugXC6nKpXKF0R02nGcZ2wQ3/e3ichOEckQ0aoEWQDbsgF4a3p6eqLeH3qeN0FE3el0ujeTyVTrcaKuY1uIjIg8CaCfiLYnEW1hY4WPi8gEgMeYe1G27iGxHYxtptZynGYmTPhgK1asqWEiBRfcAjDdMaYpYCIFW8LUMuM54nIsb3/YvbDXskiYtuzA6382n4X1CDWAnCSgNSFa98ETakcWbwWMytjzAoAPUEQ3JBKpXrs75r/VLVanVJK/VC7Uf9KGjfRCiQN9n/slh3gHz9i4jCFVL5AAAAAElFTkSuQmCC,commentData: null,placeholder: 请输入评论,commentReq: {pId: null, // 评论父idcontent: null // 评论内容},pUser: null, // 标签-回复人showTag: false, // 标签展示与否focus: false, // 输入框自动聚焦submit: false, // 弹出评论KeyboardHeight: 0 ,// 键盘高度baseUrl:config.baseUrl,};},mounted: function() {uni.onKeyboardHeightChange(res {this.KeyboardHeight res.height;})},methods: {// 初始化评论init(cmData) {// for (var i in cmData.comment) {// cmData.comment[i].hasShowMore false;// for (var j in cmData.comment[i].children) {// cmData.comment[i].children[j].hasShowMore false;// }// }this.commentData cmData;},// 没用的方法但不要删stopPrevent() {},// 回复评论reply(pUser, reUser, pId) {this.pUser pUser;this.commentReq.pId pId;if (reUser) {this.commentReq.content reUser ;} else {this.commentReq.content ;}this.showTag true;this.commentInput(false);},// 删除评论前确认confirmDelete(commentId) {var that this;uni.showModal({title: 警告,content: that.deleteTip,confirmText: 确认删除,success: function(res) {if (res.confirm) {that.$emit(del, commentId);}}});},// 新增评论add() {if (this.commentReq.content null || this.commentReq.content.length 2) {uni.showToast({title: 评论内容过短,duration: 2000});return}this.$emit(add, this.commentReq);},// 点赞评论like(commentId) {this.$emit(like, commentId);},// 新增完成addComplete() {this.commentReq.content null;this.tagClose();this.closeInput();},// 点赞完成-本地修改点赞结果likeComplete(commentId) {for (var i in this.commentData.comment) {if (this.commentData.comment[i].id commentId) {this.commentData.comment[i].hasLike ? this.commentData.comment[i].likeNum-- : this.commentData.comment[i].likeNum;this.commentData.comment[i].hasLike !this.commentData.comment[i].hasLike;return}for (var j in this.commentData.comment[i].children) {if (this.commentData.comment[i].children[j].id commentId) {this.commentData.comment[i].children[j].hasLike ? this.commentData.comment[i].children[j].likeNum-- : this.commentData.comment[i].children[j].likeNum;this.commentData.comment[i].children[j].hasLike !this.commentData.comment[i].children[j].hasLike;return}}}},// 删除完成-本地删除评论deleteComplete(commentId) {for (var i in this.commentData.comment) {for (var j in this.commentData.comment[i].children) {if (this.commentData.comment[i].children[j].id commentId) {this.commentData.comment[i].children.splice(Number(j), 1);return}}if (this.commentData.comment[i].id commentId) {this.commentData.comment.splice(Number(i), 1);return}}},// 展开评论showMore(commentId) {for (var i in this.commentData.comment) {if (this.commentData.comment[i].id commentId) {this.commentData.comment[i].hasShowMore !this.commentData.comment[i].hasShowMore;this.$forceUpdate();return}for (var j in this.commentData.comment[i].children) {if (this.commentData.comment[i].children[j].id commentId) {this.commentData.comment[i].children[j].hasShowMore !this.commentData.comment[i].children[j].hasShowMore;this.$forceUpdate();return}}}},// 输入框失去焦点blur() {this.focus false;},// 输入框聚焦focusOn() {this.$emit(focusOn);},// 标签关闭tagClose() {this.showTag false;this.pUser null;this.commentReq.pId null;},// 输入评论commentInput(data) {if(data){this.commentReq {pId: null, // 评论父idcontent: null // 评论内容};}// TODO 调起键盘方法this.submit true;setTimeout(() {this.focus true;}, 50)},// 关闭输入评论closeInput() {this.focus false;this.submit false;}}};
/scriptstyle langscss scoped.hb-comment {padding: 10rpx;background-color: #f4ffff;width: 95%;border-radius: 5px;border-color: lightskyblue;padding-left: 5px;margin-left: 10px;}.top-read {font-size: 28rpx;padding-left: 10rpx;color: #999999;}.seg_line_box {display: flex;height: 5rpx;justify-content: space-between;margin: 5rpx 0;}.seg_line {width: 45%;border-bottom: 1rpx solid #e1e1e1;}.seg_dot {width: 8%;border-bottom: 5rpx dotted #dbdbdb;}.comment-num {display: flex;justify-content: space-between;align-items: center;padding: 20rpx 0;.publishcomment{background-color: lightgreen;}}.comment-box {padding: 10rpx 0;}.comment-box-item {display: flex;}.comment-main {padding-left: 20rpx;}.comment-main-top {width: 600rpx;padding-top: 6rpx;display: flex;justify-content: space-between;}.sub-comment-main-top {width: 510rpx;padding-top: 6rpx;display: flex;justify-content: space-between;}.avatar {width: 70rpx;height: 70rpx;border-radius: 50%;}.nick-name-box {display: flex;align-items: center;}.comLogo {margin-right: 18rpx;font-size: 22rpx;border-radius: 10rpx;padding: 5rpx 15rpx;color: #FFFFFF;}.com1 {background-color: #d218b1;}.com2 {background-color: #f19c0b;}.com3 {background-color: #c8da85;}.com4 {background-color: #bfd0da;}.nick-name {color: #2d8cf0;}.isLike {font-size: 28rpx;padding-right: 10rpx;color: #2d8cf0;}.notLike {font-size: 28rpx;padding-right: 10rpx;color: #999999;}.comment-main-content {padding: 10rpx 10rpx 10rpx 0;}.comment-main-foot {display: flex;font-size: 22rpx;}.replayTag {color: #909399;margin-bottom: 5px;border: 1px solid #c8c9cc;background-color: #f4f4f5;border-radius: 3px;display: flex;justify-content: space-between;align-items: center;font-size: 16rpx;padding: 5px 10px;}.replyTagClose {font-size: 20px;line-height: 12px;padding: 0 0 2px 5px;}.foot-btn {padding-left: 10rpx;color: #007AFF;}.comment-sub-box {padding: 20rpx 0;}.comment-sub-item {display: flex;}.comment-none {padding: 20rpx;width: 100%;text-align: center;color: #999999;}.comment-submit-box {position: fixed;display: flex;align-items: flex-end;z-index: 9900;left: 0;top: var(--window-top);bottom: 0;background-color: rgba($color: #000000, $alpha: 0.5);width: 100%;}.comment-add {position: fixed;background-color: #FFFFFF;width: 100%;padding: 5rpx;border: 1px solid #ddd;transition: .3s;-webkit-transition: .3s;}.btn-click {color: #007AFF;font-size: 28rpx;padding: 10rpx;}.cancel {color: #606266;}.textarea {height: 100px;padding: 16rpx;width: 100%;}.comment-submit {padding: 5rpx 20rpx 0 20rpx;border-bottom: 1px dashed #ddd;width: calc(100% - 40rpx);display: flex;justify-content: space-between;align-items: center;}
/style页面接入
view classcommenthb-comment refhbComment addsendComment deldelcomment likelike focusOnfocusOn :deleteTip确认删除:cmDatacommentData v-ifcommentData/hb-comment/viewgetTree(data) {let result [];let map {};data.forEach(item {map[item.id] item;});data.forEach(item {let parent map[item.parentId];if (parent) {(parent.children || (parent.children [])).push(item);} else {result.push(item);}});return result;},bindTextAreaBlur: function (e) {console.log(e.detail.value)},focusOn(){this.$refs.hbComment.focusOn();},sendComment(data){var type0if(data.pId){type 1;}var form {content:data.content,blogId:this.item.id,type:type,parentId:data.pId};addCommentBlog(form).then(response{this.$refs.hbComment.closeInput();this.getCommentList();})},delcomment(data){delcomment(data).then(response{this.getCommentList();})},getCommentList(){listCommentBlogMinApp({blogId:this.item.id}).then(res{// res.readNumer 193;res.commentListres.data.rows;this.commentData {readNumer: res.readNumer,commentSize: res.commentList.length,comment: this.getTree(res.commentList)}})},
