• uniapp 微信小程序仿抖音评论区功能，支持展开收起

    最近需要写一个评论区功能，所以打算仿照抖音做一个评论功能，支持展开和收起，

    首先我们需要对功能做一个拆解，评论区功能，两个模块，一个是发表评论模块，一个是评论展示区。接下来对这两个模块进行详细描述。

    使用到的技术 uniapp  uview2.0   文章最后我会贴上全部源码

    一、发表评论模块

    这个模块使用uview的两个组件来完成分别是u-popup弹出层和u-input输入框

    下面是代码和展示图：

    1. <u-popup :show="talkShow" mode="bottom" :customStyle="{'width':'100%','border-radius':'8rpx'}" @close="popclosed" @open="keyboard=true" :safeAreaInsetBottom="true">
    2. 			<view class="flex justify-between align-center" style="padding: 32rpx;">
    3. 				<div class="cirbOX padding-left padding-right-sm">
    4. 					<u--form labelPosition="left" :model="talkData" :rules="Rules" ref="Form" :borderBottom="false">
    5. 						<u-form-item label=" " prop="txt" :borderBottom="false" ref="item1" labelWidth='0'>
    6. 							<u--input :focus="keyboard" v-model="talkData.txt" cursorSpacing="30" maxlength="100" :placeholder="pinglunHolder" border="none" clearable>u--input>
    7. 						u-form-item>
    8. 					u--form>
    9. 				div>
    10. 				<div class="submitpinglun" @click="submit">发布div>
    11. 			view>
    12. 		u-popup>

    这部分需要注意两点

    1.input组件的focus属性的设置：

    在弹出层弹出的时候 在open事件中对input的focus属性布尔值设置为true，close时候设置focus为false。这样做的目的是在弹出输入评论的弹窗时会拉起小键盘，这个交互方式是模仿的微信朋友圈发布评论的形式。

    2.input的cursorSpacing属性（输入框聚焦时底部与键盘的距离）设置：

    当键盘拉起时候整个输入框因为设置了cursorSpacing="30"，故整体页面会被小键盘托起。 当收起小键盘时候，输入框有回归到手机底部，因为我们popup设置的是底部的弹出层。这样是和微信朋友圈发布评论是对标的。

    二、展示评论区的功能

    这一部分我封装成了组件，因为需求的要求需要下拉加载评论故在组件外部循环一级评论，组件内部展示一级评论和二级评论，其中二级评论是在组件内部去循环,

    循环一级评论的时候需要注意，因为后续要获取pinglun组件的实例，所以在ref的设置上面起初我按照for循环提供的index来拼的字符串，这也导致后续bug的出现埋下伏笔，所以我后续调整了，选择了id这个唯一值作为组件实例的ref名字，这个很关键！

    1. <div v-for="(item,index) in onePagePinglunList" :key="item.id" class="margin-bottom">
    2. 				<pinglun :ref="`pinglun-${item.levelOneCommentVo.id}`" :caseIdData="caseId" :data="item" :indexxx="index" @comment="goComment" @noLogin="sonNoLogin">pinglun>
    3. 			div>

    组件代码：

    1. <template>
    2. 	<div>
    3. 		
    4. 		<div class="flex justify-start align-start margin-bottom-sm">
    5. 			<div class="margin-right-xs">
    6. 				<d-image :dSrc="onePageList.levelOneCommentVo.userAvatar" dMode="aspectFit" dWidth="72rpx" dHeight="72rpx">d-image>
    7. 			div>
    8. 			<div class="flex-sub">
    9. 				<div class="flex justify-start align-center">
    10. 					<div class="name margin-right-sm">{{onePageList.levelOneCommentVo.userName}}div>
    11. 					<div class="zuozhe flex justify-center align-center" v-if="onePageList.levelOneCommentVo.belongAuthor===1">作者div>
    12. 				div>
    13. 				<div class="flex justify-between align-center" @click="goPinglun(1,onePageList.levelOneCommentVo.id,onePageList.levelOneCommentVo.userName,onePageList.levelOneCommentVo.id)">
    14. 					<div class="content flex-sub">{{onePageList.levelOneCommentVo.content}}div>
    15. 					<div class="flex flex-direction align-center" style="width: 68rpx;" @click.stop="likepinglun(1,'',onePageList.levelOneCommentVo.id)">
    16. 						<div class="margin-bottom-xs">
    17. 							<div v-show="onePageList.levelOneCommentVo.isCurrentUserLike===0">
    18. 								<u-icon name="heart" color="#667286" size="34rpx">u-icon>
    19. 							div>
    20. 							<div v-show="onePageList.levelOneCommentVo.isCurrentUserLike===1">
    21. 								<u-icon name="heart-fill" color="red" size="34rpx">u-icon>
    22. 							div>
    23. 						div>
    24. 						<div class="likeNum">{{onePageList.levelOneCommentVo.likeCount}}div>
    25. 					div>
    26. 				div>
    27. 				<div class="time">{{ $u.timeFrom(new Date(onePageList.levelOneCommentVo.createTime).getTime())}}div>
    28. 			div>
    29. 		div>
    30. 		
    31. 		<div class="erpinglunBox" :style="{'height':`${pingjiaBoxMaxHeight}px`,'opacity':pinglunOpcity,}">
    32. 			<div class="pinglunDom">
    33. 				<div v-for="(item,index) in onePageList.twoLevelpinglun" :key="item.id" class="margin-bottom-sm">
    34. 					<div class="flex justify-start align-start">
    35. 						<div class="margin-right-xs">
    36. 							<d-image :dSrc="item.userAvatar" dMode="aspectFit" dWidth="72rpx" dHeight="72rpx">d-image>
    37. 						div>
    38. 						<div class="flex-sub">
    39. 							<div class="flex justify-start align-center">
    40. 								<div class="name margin-right-sm">{{item.userName}}div>
    41. 								<div class="zuozhe flex justify-center align-center margin-right-sm" v-if="item.belongAuthor===1">作者div>
    42. 								<div class="name" v-if="item.isReplayTwoComment===1">回复 {{item.replayLevelTwoCommentUser.userName}}div>
    43. 							div>
    44. 							<div class="flex justify-between align-center" @click="goPinglun(2,item.id,item.userName,onePageList.levelOneCommentVo.id)">
    45. 								<div class="content flex-sub">{{item.content}}div>
    46. 								<div class="flex flex-direction align-center" style="width: 68rpx;" @click.stop="likepinglun(2,index,item.id)">
    47. 									<div class="margin-bottom-xs">
    48. 										<div v-show="item.isCurrentUserLike===0">
    49. 											<u-icon name="heart" color="#667286" size="34rpx">u-icon>
    50. 										div>
    51. 										<div v-show="item.isCurrentUserLike===1">
    52. 											<u-icon name="heart-fill" color="red" size="34rpx">u-icon>
    53. 										div>
    54. 									div>
    55. 									<div class="likeNum">{{item.likeCount}}div>
    56. 								div>
    57. 							div>
    58. 							<div class="time">{{ $u.timeFrom(new Date(item.createTime).getTime())}}div>
    59. 						div>
    60. 					div>
    61. 				div>
    62. 			div>
    63. 		div>
    64. 		
    65. 		<div class="flex justify-start align-center" style="padding-left: 84rpx;">
    66. 			<div class="seeMore padding-top-sm padding-bottom flex align-center" v-if="onePageList.levelTwoCommentCount > 0&¶ms.current <= totalPage" @click="$u.throttle(getTwoLevelPinglun, 1000,true)">
    67. 				<div class="margin-right-xs">查看更多回复div>
    68. 				<u-icon name="arrow-down" color="#00875A" size="28rpx" :bold="true">u-icon>
    69. 			div>
    70. 			<div class="seeMore retract padding-top-sm padding-bottom margin-left flex justify-center align-center" v-if="params.current > 1" @click="$u.throttle(retract, 1000,true)">
    71. 				<div class="margin-right-xs">收起div>
    72. 				<u-icon name="arrow-up" color="#00875A" size="28rpx" :bold="true">u-icon>
    73. 			div>
    74. 		div>
    75. 	div>
    76. template>

    感觉唯一的难点在于因为展开收缩使用的过渡动画，大家应该都知道，想使用这个过渡必须设置有效值，也就是说比如我给高度写过渡动画，从一个高度到一个高度，都需要是具体的值，atuo这种被内容撑开的高度是不作数的。

    这里拿高度，需要注意的是需要等待渲染完毕再去获取高度，不然拿到的值就是不准确的。

    下面是我写的获取高度的函数。如果一个nexttick也获取不到准确高度，那么就再加个延时器，就差不多可以获取到准确高度了。

    1. 	updatHeight() {
    2. 				let that = this
    3. 				this.$nextTick(() => {
    4. 					// this.timer = setTimeout(() => {
    5. 					this.createSelectorQuery().select(".pinglunDom").boundingClientRect(function(rect) {
    6. 						// console.log(rect);
    7. 						that.pingjiaBoxMaxHeight = rect.height
    8. 						that.pinglunOpcity = 1
    9. 					}).exec();
    10. 					// }, 0)
    11. 				})
    12. 			},

    还有一个需要注意的点，就是在一级评论发布之后，需要拿到所有pinglu组件的实例去调用这个方法，重置所有二级评论的高度。调用这个方法的前提也必须是一级评论的渲染完毕，不然还是不起作用

    以下是代码：

    1. this.$forceUpdate();
    2. 	this.$nextTick(() => {
    3. 		for (let i = 0; i < this.onePagePinglunList.length; i++) {
    4. 			this.$refs[`pinglun-${this.onePagePinglunList[i].levelOneCommentVo.id}`][0].updatHeight() 
    5. 			if (this.onePagePinglunList[i].twoLevelpinglun.length === 0) {
    6. 	        this.$refs[`pinglun-${this.onePagePinglunList[i].levelOneCommentVo.id}`][0].params.current = 1
    7. 			}
    8. 		}
    9. 	})

    至此应该就没什么需要注意的地方了

    可能也是第一次写这个功能，还有很多可以优化的地方。希望对各位有所帮助，接下来我把评论功能所有源码贴在下面。

    因为我的评论功能是在案例详情里面的，所以有两个文件，一个是案例详情，一个就是封装的评论组件 

    案例详情：

    1. <template>
    2. 	<div :style="{'padding-bottom':`${(safeAreaBottom*2)+144}`+'rpx'}">
    3. 		<div style="padding: 32rpx 32rpx 50rpx;">
    4. 			<div class="margin-bottom-sm txt-1">成功蜕变历程div>
    5. 			<div class="toplicheng flex justify-center align-center margin-bottom-sm">
    6. 				<div class="flex flex-direction align-center">
    7. 					<div class="flex align-center">
    8. 						<d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/caseDetailIcON2.png" dMode="aspectFit" dWidth="32rpx" dHeight="32rpx">d-image>
    9. 						<div class="toptxt1 margin-left-xs">体重div>
    10. 					div>
    11. 					<div class="toptxt2 margin-top-xs">{{topweightcha||0}}kgdiv>
    12. 				div>
    13. 				<div class="midBox flex flex-direction align-center">
    14. 					<div class="xmonth flex justify-center align-center margin-bottom-xs">逆糖3个月div>
    15. 					<div class="topshuxian">div>
    16. 				div>
    17. 				<div class="flex flex-direction align-center">
    18. 					<div class="flex align-center">
    19. 						<d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/caseDetailIcON1.png" dMode="aspectFit" dWidth="32rpx" dHeight="32rpx">d-image>
    20. 						<div class="toptxt1 margin-left-xs">空腹血糖div>
    21. 					div>
    22. 					<div class="toptxt2 margin-top-xs">{{topxuetangcha||0}}mmol/Ldiv>
    23. 				div>
    24. 			div>
    25. 			
    26. 			<div class="caseBox">
    27. 				<div class="case-head-box flex justify-between align-center">
    28. 					<div class="head-left-box flex">
    29. 						<div class="avatarBox">
    30. 							<u-avatar :src="detailData.userInfoVo.userAvatar || 'https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/healthy.png'" size="72rpx" mode="aspectFill">u-avatar>
    31. 						div>
    32. 						<div>
    33. 							<div class="txt-1 margin-bottom-xs">{{detailData.userInfoVo.userName||'暂无昵称'}}div>
    34. 							<div class="txt-2">{{detailData.isExistServicePack?detailData.servicePackVo.servicePackName:'暂无服务包'}}div>
    35. 						div>
    36. 					div>
    37. 					<div class=" flex justify-center align-center" style="width: 80rpx;height: 80rpx;">
    38. 						<u-icon name="share-square" color="" size="34rpx">u-icon>
    39. 					div>
    40. 				div>
    41. 				<div class="caseBoxContentBox">
    42. 					<u-row justify="space-start">
    43. 						<u-col span="4">
    44. 							<view class="txt-4 margin-bottom">项目view>
    45. 						u-col>
    46. 						<u-col span="4">
    47. 							<view class="txt-4 margin-bottom">管理前view>
    48. 						u-col>
    49. 						<u-col span="4">
    50. 							<view class="txt-4 margin-bottom">管理后view>
    51. 						u-col>
    52. 					u-row>
    53. 					<u-row justify="space-start">
    54. 						<u-col span="4">
    55. 							<view>
    56. 								<div class="txt-3">服务时间div>
    57. 							view>
    58. 						u-col>
    59. 						<u-col span="4">
    60. 							<view>
    61. 								<div class="startTime">
    62. 									{{detailData.managementInfoVo.managementStartTime||'--'}}
    63. 								div>
    64. 							view>
    65. 						u-col>
    66. 						<u-col span="4">
    67. 							<view>
    68. 								<div class="endTime">
    69. 									{{detailData.managementInfoVo.managementEndTime||'--'}}
    70. 								div>
    71. 							view>
    72. 						u-col>
    73. 					u-row>
    74. 					<div class="line">div>
    75. 					<u-row justify="space-start">
    76. 						<u-col span="4">
    77. 							<view>
    78. 								<div class="txt-3">体重div>
    79. 								<div class="txt-7">kgdiv>
    80. 							view>
    81. 						u-col>
    82. 						<u-col span="4">
    83. 							<view>
    84. 								<div class="yellow-box flex justify-center align-center" style="position: relative;">
    85. 									{{detailData.managementInfoVo.beforeManagementWeight||'--'}}
    86. 									<div class="jiantou" v-if="detailData.managementInfoVo.beforeManagementFastingSugarBloodTrend===3">
    87. 										<d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/redUp.png" dMode="aspectFit" dWidth="24rpx" dHeight="24rpx">d-image>
    88. 									div>
    89. 									<div class="jiantou" v-else-if="detailData.managementInfoVo.beforeManagementFastingSugarBloodTrend===1">
    90. 										<d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/greenDown.png" dMode="aspectFit" dWidth="24rpx" dHeight="24rpx">d-image>
    91. 									div>
    92. 								div>
    93. 							view>
    94. 						u-col>
    95. 						<u-col span="4">
    96. 							<view>
    97. 								<div class="green-box flex justify-center align-center">{{detailData.managementInfoVo.afterManagementWeight||'--'}}div>
    98. 							view>
    99. 						u-col>
    100. 					u-row>
    101. 					<div class="line">div>
    102. 					<u-row justify="space-start">
    103. 						<u-col span="4">
    104. 							<view>
    105. 								<div class="txt-3">空腹血糖div>
    106. 								<div class="txt-7">mmol/Ldiv>
    107. 							view>
    108. 						u-col>
    109. 						<u-col span="4">
    110. 							<view>
    111. 								<div class="yellow-box flex justify-center align-center" style="position: relative;">
    112. 									{{detailData.managementInfoVo.beforeManagementFastingSugarBlood||'--'}}
    113. 									<div class="jiantou"
    114. 										v-if="detailData.managementInfoVo.beforeManagementWeightTrend===3||detailData.managementInfoVo.beforeManagementWeightTrend===4||detailData.managementInfoVo.beforeManagementWeightTrend===5">
    115. 										<d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/redUp.png" dMode="aspectFit" dWidth="24rpx" dHeight="24rpx">d-image>
    116. 									div>
    117. 									<div class="jiantou" v-else-if="detailData.managementInfoVo.beforeManagementWeightTrend===1">
    118. 										<d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/greenDown.png" dMode="aspectFit" dWidth="24rpx" dHeight="24rpx">d-image>
    119. 									div>
    120. 								div>
    121. 							view>
    122. 						u-col>
    123. 						<u-col span="4">
    124. 							<view>
    125. 								<div class="green-box flex justify-center align-center">
    126. 									{{detailData.managementInfoVo.afterManagementFastingSugarBlood||'--'}}
    127. 								div>
    128. 							view>
    129. 						u-col>
    130. 					u-row>
    131. 					<div class="line">div>
    132. 					<u-row justify="space-start">
    133. 						<u-col span="4">
    134. 							<view>
    135. 								<div class="txt-3">用药数量div>
    136. 							view>
    137. 						u-col>
    138. 						<u-col span="4">
    139. 							<view>
    140. 								<div class="yellow-box flex justify-center align-center">
    141. 									{{detailData.managementInfoVo.beforeManagementMedicationCount||'0'}}
    142. 								div>
    143. 							view>
    144. 						u-col>
    145. 						<u-col span="4">
    146. 							<view>
    147. 								<div class="green-box flex justify-center align-center">
    148. 									{{detailData.managementInfoVo.afterManagementMedicationCount||'0'}}
    149. 								div>
    150. 							view>
    151. 						u-col>
    152. 					u-row>
    153. 					<div class="line">div>
    154. 					<u-row justify="space-start">
    155. 						<u-col span="4">
    156. 							<view>
    157. 								<div class="txt-3">对比照片div>
    158. 							view>
    159. 						u-col>
    160. 						<u-col span="4">
    161. 							<view>
    162. 								<div class="margin-bottom-sm">
    163. 									<div>
    164. 										<div v-if="detailData.managementInfoVo.beforeManagementImagePhoto===''" class="noPicBox flex justify-center align-center">暂无div>
    165. 										<div v-else>
    166. 											<d-image :dSrc="detailData.managementInfoVo.beforeManagementImagePhoto" dMode="aspectFit" dWidth="140rpx" dHeight="140rpx">
    167. 											d-image>
    168. 										div>
    169. 									div>
    170. 								div>
    171. 							view>
    172. 						u-col>
    173. 						<u-col span="4">
    174. 							<view>
    175. 								<div class="margin-bottom-sm">
    176. 									<div>
    177. 										<div v-if="detailData.managementInfoVo.afterManagementImagePhoto===''" class="noPicBox flex justify-center align-center">暂无div>
    178. 										<div v-else>
    179. 											<d-image :dSrc="detailData.managementInfoVo.afterManagementImagePhoto" dMode="aspectFit" dWidth="140rpx" dHeight="140rpx">
    180. 											d-image>
    181. 										div>
    182. 									div>
    183. 								div>
    184. 							view>
    185. 						u-col>
    186. 					u-row>
    187. 				div>
    188. 			div>
    189. 			
    190. 			<div class="evaluateBox margin-top-sm margin-bottom-sm">
    191. 				<div class="margin-bottom-sm txt-1">健康评价div>
    192. 				<div class="margin-top-sm flex flex-wrap pingjiaBox">
    193. 					<view class="pingjiaDom">
    194. 						<div v-for="(item,index) in defaultPingjia" :key="item.id" class="flex ">
    195. 							<div class="tag margin-right-sm flex align-center margin-bottom-sm" :style="{'background':item.styleBg}">
    196. 								<div style="height: 100%; " class="flex align-start margin-right-sm">
    197. 									<d-image :dSrc="item.styleIcon" dMode="aspectFit" dWidth="26rpx" dHeight="26rpx">
    198. 									d-image>
    199. 								div>
    200. 								<text :style="{'max-width': '544rpx','word-break': 'break-all','color':item.styleColor}">{{item.content}}text>
    201. 							div>
    202. 						div>
    203. 					view>
    204. 				div>
    205. 			div>
    206. 			
    207. 			
    208. 		div>
    209. 		
    210. 		<div style="padding: 0 32rpx 56rpx;background: #FFFFFF;">
    211. 			<div class="flex justify-between align-center">
    212. 				<div class="pingluntitle">{{detailData.interActionVo.commentCount||'0'}} 评论div>
    213. 				<div>div>
    214. 			div>
    215. 			<div v-for="(item,index) in onePagePinglunList" :key="item.id" class="margin-bottom">
    216. 				<pinglun :ref="`pinglun-${item.levelOneCommentVo.id}`" :caseIdData="caseId" :data="item" :indexxx="index" @comment="goComment" @noLogin="sonNoLogin" @shouqi="shouqiTwoPinglun">pinglun>
    217. 			div>
    218. 		div>
    219. 		<div class="contentB">- 让每个人都能从知识中获得健康 -div>
    220. 		
    221. 		<div class="pingjialikeBox flex justify-between align-center" :style="{'bottom':`${(safeAreaBottom*2)}`+'rpx'}">
    222. 			<div class="talksomething flex justify-center align-center" @click="openPinglun">说点什么吧div>
    223. 			<div class="flex justify-around" style="width: 428rpx;">
    224. 				<div class="flex align-center btn" @click="$u.throttle(clickLike, 500,true)">
    225. 					<div v-show="detailData.interActionVo.isCurrentUserLike===0">
    226. 						<u-icon name="heart" color="" size="34rpx">u-icon>
    227. 					div>
    228. 					<div v-show="detailData.interActionVo.isCurrentUserLike===1">
    229. 						<u-icon name="heart-fill" color="red" size="34rpx">u-icon>
    230. 					div>
    231. 					<text class="margin-left-xs">{{detailData.interActionVo.likeCount||'0'}}text>
    232. 				div>
    233. 				<div class="flex align-center btn" @click="$u.throttle(clickCollect, 500,true)">
    234. 					<div v-show="detailData.interActionVo.isCurrentUserCollection===0">
    235. 						<u-icon name="star" color="" size="34rpx">u-icon>
    236. 					div>
    237. 					<div v-show="detailData.interActionVo.isCurrentUserCollection===1">
    238. 						<u-icon name="star-fill" color="#ff991f" size="34rpx">u-icon>
    239. 					div>
    240. 					<text class="margin-left-xs">{{detailData.interActionVo.collectionCount||'0'}}text>
    241. 				div>
    242. 				<div class=" flex align-center btn">
    243. 					<u-icon name="chat" color="" size="34rpx">u-icon>
    244. 					<text class="margin-left-xs">{{detailData.interActionVo.commentCount||'0'}}text>
    245. 				div>
    246. 			div>
    247. 		div>
    248. 		<u-popup :show="talkShow" mode="bottom" :customStyle="{'width':'100%','border-radius':'8rpx'}" @close="popclosed" @open="keyboard=true" :safeAreaInsetBottom="true">
    249. 			<view class="flex justify-between align-center" style="padding: 32rpx;">
    250. 				<div class="cirbOX padding-left padding-right-sm">
    251. 					<u--form labelPosition="left" :model="talkData" :rules="Rules" ref="Form" :borderBottom="false">
    252. 						<u-form-item label=" " prop="txt" :borderBottom="false" ref="item1" labelWidth='0'>
    253. 							<u--input :focus="keyboard" v-model="talkData.txt" cursorSpacing="30" maxlength="100" :placeholder="pinglunHolder" border="none" clearable>u--input>
    254. 						u-form-item>
    255. 					u--form>
    256. 				div>
    257. 				<div class="submitpinglun" @click="submit">发布div>
    258. 			view>
    259. 		u-popup>
    260. 		<u-modal title="确认登录" :show="show1" width="608rpx" content="为了您的良好体验,建议您先确认登录 ~" :closeOnClickOverlay="true" @close="show1=false">
    261. 			<u-button slot="confirmButton" text="确定" shape="circle" color="#00875A" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :customStyle="{'width':'264rpx','height':'68rpx'}">u-button>
    262. 		u-modal>
    263. 		<u-toast ref="uToast">u-toast>
    264. 	div>
    265. template>
    266.  
    267. <script>
    268. 	import { mapState } from 'vuex';
    269. 	import detailChart from "./detailEchart.vue"
    270. 	import pinglun from "./pinglun.vue"
    271. 	import { sub } from '@/utils/tool.js'
    272. 	import { getDetail, getCurveModule, collection, like, savecomment, getLevelOnePage } from '@/api/case/case.js'
    273. 	export default {
    274. 		data() {
    275. 			return {
    276. 				show1: false,
    277. 				keyboard: false,
    278. 				pinglunHolder: '说点什么吧',
    279. 				Rules: {
    280. 					'txt': [{
    281. 							required: true,
    282. 							type: 'any',
    283. 							message: '评论不能为空',
    284. 							trigger: ['blur', 'change']
    285. 						},
    286. 						{
    287. 							validator: (rule, value, callback) => {
    288. 								return value.length < 100;
    289. 							},
    290. 							message: '您评论的字数超过100,请调整您的字数~',
    291. 							trigger: ['blur', 'change']
    292. 						}
    293. 					],
    294. 				},
    295. 				talkShow: false,
    296. 				talkData: { //弹框form值 评论
    297. 					txt: ""
    298. 				},
    299. 				caseId: null,
    300. 				echartList: [],
    301. 				detailData: {},
    302. 				defaultPingjia: [],
    303. 				topweightcha: null,
    304. 				topxuetangcha: null,
    305. 				pinglunForm: { //接口参数
    306. 					caseId: null,
    307. 					caseLevelOneCommentId: '', //对一级评论进行回复时不可为空
    308. 					caseLevelTwoCommentId: '', //对二级评论进行回复时不可为空
    309. 					content: null,
    310. 					userId: null,
    311. 				},
    312. 				params: {
    313. 					current: 1,
    314. 					limit: 5,
    315. 					likeSort: 2, //点赞数排序 1：升序 2：降序
    316. 					timeSort: 2, //创建时间排序 1：升序 2：降序
    317. 				},
    318. 				totalPage: 1,
    319. 				onePagePinglunList: [],
    320. 				pinglunType: null, //判断用户评论的类型是案例评论（3）还是一级评论（1）还是二级评论（2）
    321. 				erpinglunIndex: 0, //暂存二级评论发送给父级组件给的一级评论的index
    322. 			}
    323. 		},
    324. 		components: { detailChart, pinglun },
    325. 		computed: {
    326. 			...mapState(["hasLogin", "safeAreaBottom", "userInfo", ])
    327. 		},
    328. 		// 发送给朋友
    329. 		onShareAppMessage(res) {
    330. 			return {
    331. 				title: '妙智健康案例',
    332. 				path: `/pages-caseStory/caseDetail/index?caseId=${this.caseId}&title=${this.detailData.userInfoVo.userName}`
    333. 			}
    334. 		},
    335. 		//分享到朋友圈
    336. 		onShareTimeline(res) {
    337. 			return {
    338. 				title: '妙智健康案例',
    339. 				query: `caseId=${this.caseId}&title=${this.detailData.userInfoVo.userName}`,
    340. 				path: `/pages-caseStory/caseDetail/index` //自定义路径拼参数会导致接收参数会失败
    341. 			}
    342. 		},
    343. 		onReady() {},
    344. 		onLoad(option) {
    345. 			this.$refs.Form.setRules(this.Rules)
    346. 			this.caseId = option?.caseId
    347. 			uni.setNavigationBarTitle({
    348. 				title: `${option.title||''}案例`
    349. 			});
    350. 			this.getdetailData()
    351. 			this.getLevelOnePageData()
    352. 		},
    353. 		onUnload() {
    354. 			// this.$store.commit('set_caseShareEchartPicList', [])
    355. 		},
    356. 		onShow() {
    357.  
    358. 		},
    359. 		methods: {
    360. 			sub,
    361. 			async getPhoneNumber(e) {
    362. 				// console.log("获取手机号code", e) //获取手机号已经不需要先进行wx.login（最新文档）
    363. 				if (!e.detail.code) {
    364. 					uni.showToast({
    365. 						title: '登录需要获取您的手机号',
    366. 						icon: 'none',
    367. 						duration: 2500
    368. 					})
    369. 					return
    370. 				}
    371. 				let resss = await this.$store.dispatch("loginFn", e) //能同步拿到vux中mutaion的resolve，然后给fourDataNum赋值（登录后数据更新）
    372. 				console.log(resss);
    373. 				if (resss.state === 1) { //登录成功
    374. 					this.show1 = false
    375. 				}
    376. 			},
    377. 			async getdetailData() {
    378. 				uni.showLoading({
    379. 					title: '加载中...'
    380. 				})
    381. 				try {
    382. 					let res = await getDetail({
    383. 						caseId: this.caseId,
    384. 						userId: this.hasLogin ? this.userInfo?.userId : ''
    385. 					})
    386.  
    387. 					let echarRes = await getCurveModule({
    388. 						caseId: this.caseId,
    389. 					})
    390. 					if (res.state === 1) {
    391. 						this.detailData = res.content
    392. 						this.defaultPingjia = res.content.personnelEvaluationVoList
    393. 						this.topweightcha = this.sub(this.detailData.managementInfoVo.afterManagementWeight, this.detailData.managementInfoVo.beforeManagementWeight)
    394. 						this.topxuetangcha = this.sub(this.detailData.managementInfoVo.afterManagementFastingSugarBlood, this.detailData.managementInfoVo.beforeManagementFastingSugarBlood)
    395. 					}
    396. 					if (echarRes.state === 1) {
    397. 						this.echartList = echarRes.content.map(item => {
    398. 							let obj = {
    399. 								title: item.caseCurveType === 1 ? '硅基' : (item.caseCurveType === 2 ? "微策" : "体重"),
    400. 								defaultTime: item.caseCurveType === 1 ? item.curveStartDate : [item.curveStartDate, item.curveEndDate],
    401. 								userId: res.content.userInfoVo.userId
    402. 							}
    403. 							return obj
    404. 						})
    405. 					}
    406. 					uni.hideLoading();
    407. 				} catch (e) {
    408. 					uni.hideLoading();
    409. 					uni.$u.toast(e)
    410. 				}
    411. 			},
    412. 			async clickLike(item, index) {
    413. 				if (!this.hasLogin) {
    414. 					this.show1 = true
    415. 					return
    416. 				}
    417. 				try {
    418. 					let res = await like({
    419. 						userId: this.userInfo?.userId,
    420. 						caseId: this.caseId,
    421. 					})
    422. 					if (res.state === 1) {
    423. 						if (this.detailData.interActionVo.isCurrentUserLike === 1) {
    424. 							this.detailData.interActionVo.isCurrentUserLike = 0
    425. 							this.detailData.interActionVo.likeCount--
    426. 						} else if (this.detailData.interActionVo.isCurrentUserLike === 0) {
    427. 							this.detailData.interActionVo.isCurrentUserLike = 1
    428. 							this.detailData.interActionVo.likeCount++
    429. 						}
    430. 					}
    431. 				} catch (e) {
    432. 					uni.$u.toast(e)
    433. 				}
    434. 			},
    435. 			async clickCollect(item) {
    436. 				if (!this.hasLogin) {
    437. 					this.show1 = true
    438. 					return
    439. 				}
    440. 				try {
    441. 					let res = await collection({
    442. 						userId: this.userInfo?.userId,
    443. 						caseId: this.caseId,
    444. 					})
    445. 					if (res.state === 1) {
    446. 						if (this.detailData.interActionVo.isCurrentUserCollection === 1) {
    447. 							this.detailData.interActionVo.isCurrentUserCollection = 0
    448. 							this.detailData.interActionVo.collectionCount--
    449. 						} else if (this.detailData.interActionVo.isCurrentUserCollection === 0) {
    450. 							this.detailData.interActionVo.isCurrentUserCollection = 1
    451. 							this.detailData.interActionVo.collectionCount++
    452. 						}
    453. 					}
    454. 				} catch (e) {
    455. 					uni.$u.toast(e)
    456. 				}
    457. 			},
    458. 			popclosed() {
    459. 				this.talkData.txt = ''
    460. 				this.keyboard = false
    461. 				this.talkShow = false
    462. 				console.log(this.keyboard);
    463. 			},
    464. 			async getLevelOnePageData() {
    465. 				uni.showLoading({
    466. 					title: '加载中...'
    467. 				})
    468. 				try {
    469. 					let res = await getLevelOnePage({ userId: this.hasLogin ? this.userInfo?.userId : '', caseId: Number(this.caseId), ...this.params })
    470.  
    471. 					if (res.state === 1) {
    472. 						for (let i = 0; i < res.content.records.length; i++) {
    473. 							res.content.records[i].twoLevelpinglun = []
    474. 							if (this.onePagePinglunList.some(item => item.levelOneCommentVo.id === res.content.records[i].levelOneCommentVo.id)) { //删除重复项
    475. 								res.content.records.splice(i, 1)
    476. 							}
    477. 						}
    478. 						this.onePagePinglunList = [...this.onePagePinglunList, ...res.content.records]
    479. 						this.totalPage = Math.ceil(res.content.total / this.params.limit) //总页数=总数量/每页数量
    480. 					}
    481. 					uni.hideLoading();
    482. 				} catch (e) {
    483. 					uni.hideLoading();
    484. 					uni.$u.toast(e)
    485. 				}
    486. 			},
    487. 			openPinglun() {
    488. 				if (!this.hasLogin) {
    489. 					this.show1 = true
    490. 					return
    491. 				}
    492. 				this.pinglunType = 3 //案例评论
    493. 				this.pinglunHolder = '说点什么吧'
    494. 				this.pinglunForm.caseLevelOneCommentId = '' //不回复一二级评论时候置空该字段
    495. 				this.pinglunForm.caseLevelTwoCommentId = '' //不回复一二级评论时候置空该字段
    496.  
    497. 				this.talkShow = true
    498. 				// this.keyboard = true
    499. 			},
    500. 			goComment(e) { //处理回复一级二级评论  案例的顶级评论在openPinglun()函数中
    501. 				console.log(e);
    502. 				this.pinglunType = e.type //评论类型
    503. 				console.log('this.pinglunType', this.pinglunType);
    504. 				if (e.type === 1) { //一级评论
    505. 					this.pinglunForm.caseLevelOneCommentId = e.id
    506. 					this.erpinglunIndex = e.index
    507. 					this.pinglunHolder = `回复 @${e.replyName}`
    508. 				} else if (e.type === 2) { //二级评论
    509. 					this.pinglunForm.caseLevelTwoCommentId = e.id
    510. 					this.erpinglunIndex = e.index
    511. 					this.pinglunHolder = `回复 @${e.replyName}`
    512. 				}
    513. 				console.log("点击的item", this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList);
    514. 				this.talkShow = true
    515. 				// this.keyboard = true
    516. 				console.log(this.keyboard);
    517. 			},
    518. 			async submit() {
    519. 				this.pinglunForm.userId = this.userInfo.userId
    520. 				this.pinglunForm.content = this.talkData.txt
    521. 				this.pinglunForm.caseId = this.caseId
    522. 				// let form = {
    523. 				// 	caseId: this.caseId,
    524. 				// 	caseLevelOneCommentId: '', //对一级评论进行回复时不可为空
    525. 				// 	caseLevelTwoCommentId: '', //对二级评论进行回复时不可为空
    526. 				// 	content: this.talkData.txt,
    527. 				// 	userId: this.userInfo.userId,
    528. 				// }
    529. 				try {
    530. 					let res = await savecomment(this.pinglunForm)
    531. 					if (res.state === 1) {
    532.  
    533. 						if (this.pinglunType === 3) { //案例评论
    534. 							this.onePagePinglunList.unshift({
    535. 								twoLevelpinglun: [],
    536. 								...res.content.caseCommentHomeVo
    537. 							})
    538. 							this.$forceUpdate();
    539. 							this.$nextTick(() => {
    540. 								for (let i = 0; i < this.onePagePinglunList.length; i++) {
    541. 									this.$refs[`pinglun-${this.onePagePinglunList[i].levelOneCommentVo.id}`][0].updatHeight() //重置子组件内部height 不管新增一级还是二级都需要全部重置高度不然会出现bug
    542. 									if (this.onePagePinglunList[i].twoLevelpinglun.length === 0) {
    543. 										this.$refs[`pinglun-${this.onePagePinglunList[i].levelOneCommentVo.id}`][0].params.current = 1
    544. 									}
    545. 								}
    546. 								console.log(this.$refs[`pinglun-${127}`][0].onePageList);
    547. 							})
    548. 							this.$forceUpdate();
    549. 						} else if (this.pinglunType === 1 || this.pinglunType === 2) { //回复一级评论或二级评论  push完需要注意的是在获取分页数据时候去重，因为这个push操作是模拟更新数据，后端并不知晓所以后端未做去重
    550. 							console.log(this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList.twoLevelpinglun);
    551. 							this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList.twoLevelpinglun.push({
    552. 								...res.content.caseLevelTwoCommentVo
    553. 							})
    554. 							console.log(this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList.twoLevelpinglun);
    555. 							let indxx;
    556. 							for (let i = 0; i < this.onePagePinglunList.length; i++) {
    557. 								if (this.onePagePinglunList[i].levelOneCommentVo.id === this.erpinglunIndex) {
    558. 									indxx = i
    559. 									break
    560. 								}
    561. 							}
    562. 							// 目的是防止发表一级评论之后父级向下重新注入数据，会触发pinglun组件内部的watch，导致会重置组件内部的twoLevelpinglun为[],
    563. 							this.onePagePinglunList[indxx].twoLevelpinglun = this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList.twoLevelpinglun
    564. 							this.onePagePinglunList[indxx].levelTwoCommentCount++
    565.  
    566. 							this.$refs[`pinglun-${this.erpinglunIndex}`][0].updatHeight() //重置子组件内部height
    567.  
    568. 						}
    569. 						this.talkData.txt = '' //重置评论
    570. 						this.keyboard = false //自动聚焦设为false
    571. 						this.talkShow = false //关闭弹窗
    572. 						this.updatePinglunNum() //更新评论数量
    573. 						console.log(this.keyboard);
    574. 						this.$refs.uToast.show({
    575. 							type: 'success',
    576. 							message: "已发送评论~",
    577. 							duration: 1200,
    578. 						})
    579. 					}
    580. 				} catch (e) {
    581. 					uni.$u.toast(e)
    582. 				}
    583. 			},
    584. 			sonNoLogin(e) {
    585. 				console.log(e);
    586. 				if (!this.hasLogin) {
    587. 					this.show1 = true
    588. 					return
    589. 				}
    590. 			},
    591. 			async updatePinglunNum() {
    592. 				try {
    593. 					let res = await getDetail({
    594. 						caseId: this.caseId,
    595. 						userId: this.hasLogin ? this.userInfo?.userId : ''
    596. 					})
    597. 					if (res.state === 1) {
    598. 						this.detailData = res.content
    599. 					}
    600. 				} catch (e) {
    601. 					uni.$u.toast(e)
    602. 				}
    603. 			},
    604. 			//因为每次发表二级评论都会往父级的twoLevelpinglun添加属性，也就是submit函数里面的565行代码，会导致一个bug 就是发布二级评论后，
    605. 			// 因为同时给父级也赋值了，故收起二级评论后，再发表一级评论，重置了了渲染，会将父级被赋值的twoLevelpinglun同步到二级评论的twoLevelpinglun，相当于之前收起操作白重置了twoLevelpinglun
    606. 			shouqiTwoPinglun(index) {
    607. 				let indxx;
    608. 				for (let i = 0; i < this.onePagePinglunList.length; i++) {
    609. 					if (this.onePagePinglunList[i].levelOneCommentVo.id === index) {
    610. 						indxx = i
    611. 						break
    612. 					}
    613. 				}
    614. 				this.onePagePinglunList[indxx].twoLevelpinglun = []
    615. 			},
    616. 		},
    617. 		// 上拉加载
    618. 		async onReachBottom() {
    619. 			if (this.params.current > this.totalPage) {
    620. 				this.$refs.uToast.show({
    621. 					type: 'warning',
    622. 					message: "已经到底啦~",
    623. 					duration: 1200,
    624. 				})
    625. 				return
    626. 			}
    627. 			this.params.current += 1
    628. 			await this.getLevelOnePageData()
    629. 			uni.stopPullDownRefresh() //停止上拉加载
    630. 		},
    631. 		// 下拉刷新触发
    632. 		async onPullDownRefresh() {
    633. 			this.params.current = 1 //重置页码
    634. 			this.onePagePinglunList = []
    635. 			await this.getLevelOnePageData()
    636. 			this.$refs.uToast.show({
    637. 				type: 'success',
    638. 				message: "刷新成功",
    639. 				duration: 1200,
    640. 			})
    641. 			uni.stopPullDownRefresh() //停止下拉刷新
    642. 		},
    643.  
    644. 	}
    645. script>
    646.  
    647. <style lang="scss" scoped>
    648. 	@import '@/pages-caseStory/style/caseCommon.scss';
    649.  
    650. 	.pingluntitle {
    651. 		font-size: 28rpx;
    652. 		font-family: PingFangSC;
    653. 		color: #1F3253;
    654. 		height: 90rpx;
    655. 		line-height: 90rpx;
    656. 	}
    657.  
    658. 	.contentB {
    659. 		margin: 42rpx 0;
    660. 		font-size: 24rpx;
    661. 		font-weight: 400;
    662. 		color: #667286;
    663. 		text-align: center;
    664. 	}
    665.  
    666. 	.pingjialikeBox {
    667. 		padding: 32rpx;
    668. 		width: 100%;
    669. 		height: 144rpx;
    670. 		background: #FFFFFF;
    671. 		position: fixed;
    672. 		left: 0;
    673.  
    674. 		.btn {
    675. 			height: 70rpx;
    676. 			width: 78rpx;
    677. 		}
    678. 	}
    679.  
    680. 	.toplicheng {
    681. 		height: 160rpx;
    682. 		background: linear-gradient(47deg, rgba(23, 144, 109, 0.84) 0%, #5DC063 100%);
    683. 		border-radius: 12rpx;
    684. 	}
    685.  
    686. 	.topshuxian {
    687. 		width: 1rpx;
    688. 		height: 80rpx;
    689. 		opacity: 0.5;
    690. 		border: 2rpx solid #FFFFFF;
    691. 	}
    692.  
    693. 	.xmonth {
    694. 		width: 156rpx;
    695. 		height: 47rpx;
    696. 		background: #FFFFFF;
    697. 		border-radius: 0rpx 0rpx 14rpx 14rpx;
    698. 		opacity: 0.8;
    699. 		font-size: 24rpx;
    700. 		font-weight: 400;
    701. 		color: #00875A;
    702. 	}
    703.  
    704. 	.toptxt1 {
    705. 		font-size: 28rpx;
    706. 		font-weight: 400;
    707. 		color: #FFFFFF;
    708. 	}
    709.  
    710. 	.toptxt2 {
    711. 		font-size: 36rpx;
    712. 		font-weight: bold;
    713. 		color: #E2FFF5;
    714. 	}
    715.  
    716. 	.midBox {
    717. 		width: 156rpx;
    718. 		height: 160rpx;
    719. 		margin-left: 70rpx;
    720. 		margin-right: 23rpx;
    721. 	}
    722.  
    723. 	.noPicBox {
    724. 		width: 140rpx;
    725. 		height: 140rpx;
    726. 		background: #E7EFF6;
    727. 	}
    728.  
    729. 	.jiantou {
    730. 		position: absolute;
    731. 		top: 0;
    732. 		right: 0;
    733. 	}
    734.  
    735. 	.evaluateBox {
    736. 		background: #FFFFFF;
    737. 		border-radius: 12rpx;
    738. 		padding: 40rpx 32rpx 78rpx;
    739.  
    740. 		.tag {
    741. 			background: #FFF6E9;
    742. 			border-radius: 30rpx;
    743. 			padding: 20rpx 30rpx 20rpx 20rpx;
    744. 			vertical-align: center;
    745.  
    746. 		}
    747. 	}
    748.  
    749. 	.talksomething {
    750. 		width: 248rpx;
    751. 		height: 80rpx;
    752. 		background: #F4F5F7;
    753. 		border-radius: 40rpx;
    754. 		font-size: 28rpx;
    755. 		font-weight: 400;
    756. 		color: #697588;
    757. 	}
    758.  
    759. 	.cirbOX {
    760. 		width: 600rpx;
    761. 		height: 80rpx;
    762. 		background: #F4F5F7;
    763. 		border-radius: 40rpx;
    764. 	}
    765.  
    766. 	.submitpinglun {
    767. 		height: 80rpx;
    768. 		width: 64rpx;
    769. 		font-size: 32rpx;
    770. 		font-weight: 500;
    771. 		color: #00875A;
    772. 		line-height: 80rpx;
    773. 	}
    774. style>

    pinglun组件：

    1. <template>
    2. 	<div>
    3. 		
    4. 		<div class="flex justify-start align-start margin-bottom-sm">
    5. 			<div class="margin-right-xs">
    6. 				<d-image :dSrc="onePageList.levelOneCommentVo.userAvatar" dMode="aspectFit" dWidth="72rpx" dHeight="72rpx">d-image>
    7. 			div>
    8. 			<div class="flex-sub">
    9. 				<div class="flex justify-start align-center">
    10. 					<div class="name margin-right-sm">{{onePageList.levelOneCommentVo.userName}}div>
    11. 					<div class="zuozhe flex justify-center align-center" v-if="onePageList.levelOneCommentVo.belongAuthor===1">作者div>
    12. 				div>
    13. 				<div class="flex justify-between align-center" @click="goPinglun(1,onePageList.levelOneCommentVo.id,onePageList.levelOneCommentVo.userName,onePageList.levelOneCommentVo.id)">
    14. 					<div class="content flex-sub">{{onePageList.levelOneCommentVo.content}}div>
    15. 					<div class="flex flex-direction align-center" style="width: 68rpx;" @click.stop="likepinglun(1,'',onePageList.levelOneCommentVo.id)">
    16. 						<div class="margin-bottom-xs">
    17. 							<div v-show="onePageList.levelOneCommentVo.isCurrentUserLike===0">
    18. 								<u-icon name="heart" color="#667286" size="34rpx">u-icon>
    19. 							div>
    20. 							<div v-show="onePageList.levelOneCommentVo.isCurrentUserLike===1">
    21. 								<u-icon name="heart-fill" color="red" size="34rpx">u-icon>
    22. 							div>
    23. 						div>
    24. 						<div class="likeNum">{{onePageList.levelOneCommentVo.likeCount}}div>
    25. 					div>
    26. 				div>
    27. 				<div class="time">{{ $u.timeFrom(new Date(onePageList.levelOneCommentVo.createTime).getTime())}}div>
    28. 			div>
    29. 		div>
    30. 		
    31. 		<div class="erpinglunBox" :style="{'height':`${pingjiaBoxMaxHeight}px`,'opacity':pinglunOpcity,}">
    32. 			<div class="pinglunDom">
    33. 				<div v-for="(item,index) in onePageList.twoLevelpinglun" :key="item.id" class="margin-bottom-sm">
    34. 					<div class="flex justify-start align-start">
    35. 						<div class="margin-right-xs">
    36. 							<d-image :dSrc="item.userAvatar" dMode="aspectFit" dWidth="72rpx" dHeight="72rpx">d-image>
    37. 						div>
    38. 						<div class="flex-sub">
    39. 							<div class="flex justify-start align-center">
    40. 								<div class="name margin-right-sm">{{item.userName}}div>
    41. 								<div class="zuozhe flex justify-center align-center margin-right-sm" v-if="item.belongAuthor===1">作者div>
    42. 								<div class="name" v-if="item.isReplayTwoComment===1">回复 {{item.replayLevelTwoCommentUser.userName}}div>
    43. 							div>
    44. 							<div class="flex justify-between align-center" @click="goPinglun(2,item.id,item.userName,onePageList.levelOneCommentVo.id)">
    45. 								<div class="content flex-sub">{{item.content}}div>
    46. 								<div class="flex flex-direction align-center" style="width: 68rpx;" @click.stop="likepinglun(2,index,item.id)">
    47. 									<div class="margin-bottom-xs">
    48. 										<div v-show="item.isCurrentUserLike===0">
    49. 											<u-icon name="heart" color="#667286" size="34rpx">u-icon>
    50. 										div>
    51. 										<div v-show="item.isCurrentUserLike===1">
    52. 											<u-icon name="heart-fill" color="red" size="34rpx">u-icon>
    53. 										div>
    54. 									div>
    55. 									<div class="likeNum">{{item.likeCount}}div>
    56. 								div>
    57. 							div>
    58. 							<div class="time">{{ $u.timeFrom(new Date(item.createTime).getTime())}}div>
    59. 						div>
    60. 					div>
    61. 				div>
    62. 			div>
    63. 		div>
    64. 		
    65. 		<div class="flex justify-start align-center" style="padding-left: 84rpx;">
    66. 			<div class="seeMore padding-top-sm padding-bottom flex align-center" v-if="onePageList.levelTwoCommentCount > 0&¶ms.current <= totalPage" @click="$u.throttle(getTwoLevelPinglun, 1000,true)">
    67. 				<div class="margin-right-xs">查看更多回复div>
    68. 				<u-icon name="arrow-down" color="#00875A" size="28rpx" :bold="true">u-icon>
    69. 			div>
    70. 			<div class="seeMore retract padding-top-sm padding-bottom margin-left flex justify-center align-center" v-if="params.current > 1" @click="$u.throttle(retract, 1000,true)">
    71. 				<div class="margin-right-xs">收起div>
    72. 				<u-icon name="arrow-up" color="#00875A" size="28rpx" :bold="true">u-icon>
    73. 			div>
    74. 		div>
    75. 	div>
    76. template>
    77.  
    78. <script>
    79. 	import { mapState } from 'vuex';
    80. 	import { commentlike, getLevelOnePage, getLevelTwoPage } from '@/api/case/case.js'
    81. 	export default {
    82. 		data() {
    83. 			return {
    84. 				caseId: null,
    85. 				indexxxx: null, //一级评论的index
    86. 				params: {
    87. 					current: 1,
    88. 					limit: 5,
    89. 					timeSort: 1, //创建时间排序 1：升序 2：降序
    90. 				},
    91. 				totalPage: 1,
    92. 				onePageList: {},
    93. 				pingjiaBoxMaxHeight: 0,
    94. 				pinglunOpcity: 0,
    95. 				timer: null,
    96. 				timer1: null,
    97. 			}
    98. 		},
    99. 		props: {
    100. 			caseIdData: {
    101. 				type: Number,
    102. 				// 定义是否必须传
    103. 				required: true,
    104. 				// 定义默认值
    105. 				default: 0
    106. 			},
    107. 			data: {
    108. 				type: Object,
    109. 				// 定义是否必须传
    110. 				required: true,
    111. 				// 定义默认值
    112. 				default: {}
    113. 			},
    114. 			indexxx: {
    115. 				type: Number,
    116. 				// 定义是否必须传
    117. 				required: true,
    118. 				// 定义默认值
    119. 				default: 0
    120. 			}
    121. 		},
    122. 		watch: {
    123. 			caseIdData: {
    124. 				immediate: true,
    125. 				handler(val) {
    126. 					this.caseId = val;
    127. 				}
    128. 			},
    129. 			data: {
    130. 				immediate: true,
    131. 				handler(val) {
    132. 					this.onePageList = val;
    133. 				}
    134. 			},
    135. 			indexxx: {
    136. 				immediate: true,
    137. 				handler(val) {
    138. 					this.indexxxx = val;
    139. 				}
    140. 			}
    141. 		},
    142. 		components: {},
    143. 		computed: {
    144. 			...mapState(["hasLogin", "userInfo"])
    145. 		},
    146. 		mounted() {},
    147. 		beforeDestroy() {
    148. 			clearTimeout(this.timer)
    149. 			clearTimeout(this.timer1)
    150. 		},
    151. 		methods: {
    152. 			async likepinglun(type, index, id) {
    153. 				if (!this.hasLogin) {
    154. 					this.$emit('noLogin', '一二级评论点赞未登录')
    155. 					return
    156. 				}
    157.  
    158. 				let form = {};
    159. 				if (type === 1) {
    160. 					form.caseLevelOneCommentId = id
    161. 				} else if (type === 2) {
    162. 					form.caseLevelTwoCommentId = id
    163. 				}
    164. 				try {
    165. 					let res = await commentlike({ ...form, userId: this.userInfo?.userId })
    166. 					if (res.state === 1) { //如果接口回调成功
    167. 						if (type === 1) { //如果点击的是一级评论的点赞
    168. 							if (this.onePageList.levelOneCommentVo.isCurrentUserLike === 0) { //判断点赞之前是0还是1 然后取反  并且对应点赞数量同步加减
    169. 								this.onePageList.levelOneCommentVo.isCurrentUserLike = 1
    170. 								this.onePageList.levelOneCommentVo.likeCount++
    171. 							} else if (this.onePageList.levelOneCommentVo.isCurrentUserLike === 1) {
    172. 								this.onePageList.levelOneCommentVo.isCurrentUserLike = 0
    173. 								this.onePageList.levelOneCommentVo.likeCount--
    174. 							}
    175. 						} else if (type === 2) { //如果点击的是二级评论的点赞
    176. 							if (this.onePageList.twoLevelpinglun[index].isCurrentUserLike === 0) {
    177. 								this.onePageList.twoLevelpinglun[index].isCurrentUserLike = 1
    178. 								this.onePageList.twoLevelpinglun[index].likeCount++
    179. 							} else if (this.onePageList.twoLevelpinglun[index].isCurrentUserLike === 1) {
    180. 								this.onePageList.twoLevelpinglun[index].isCurrentUserLike = 0
    181. 								this.onePageList.twoLevelpinglun[index].likeCount--
    182. 							}
    183. 						}
    184. 					}
    185. 				} catch (e) {
    186. 					uni.$u.toast(e)
    187. 				}
    188. 			},
    189. 			goPinglun(e, id, name, indexx) {
    190. 				if (e === 1) { //一级评论
    191. 					this.$emit('comment', {
    192. 						type: e,
    193. 						id: id,
    194. 						// index: this.indexxxx,
    195. 						index: indexx,
    196. 						replyName: name, //点击的谁的评论进行回复，用于在输入框的placeholder回显
    197. 					})
    198. 				} else if (e === 2) { //二级评论
    199. 					this.$emit('comment', {
    200. 						type: e,
    201. 						id: id,
    202. 						// index: this.indexxxx,
    203. 						index: indexx,
    204. 						replyName: name, //点击的谁的评论进行回复，用于在输入框的placeholder回显
    205. 					})
    206. 				}
    207. 			},
    208. 			async getTwoLevelPinglun() {
    209. 				try {
    210. 					let res = await getLevelTwoPage({ userId: this.hasLogin ? this.userInfo?.userId : '', caseLevelOneCommentId: this.onePageList.levelOneCommentVo.id, ...this.params })
    211. 					if (res.state === 1) {
    212. 						for (let i = 0; i < res.content.records.length; i++) {
    213. 							res.content.records[i].twoLevelpinglun = []
    214. 							if (this.onePageList.twoLevelpinglun.some(item => item.id === res.content.records[i].id)) { //删除重复项
    215. 								res.content.records.splice(i, 1)
    216. 								console.log("发现重复项，删除他！！！");
    217. 							}
    218. 						}
    219.  
    220. 						this.onePageList.twoLevelpinglun = [...this.onePageList.twoLevelpinglun, ...res.content.records]
    221. 						this.totalPage = Math.ceil(res.content.total / this.params.limit) //总页数=总数量/每页数量
    222. 						this.params.current += 1
    223. 						this.updatHeight()
    224. 					}
    225. 				} catch (e) {
    226. 					uni.$u.toast(e)
    227. 				}
    228. 			},
    229. 			retract() {
    230. 				this.pingjiaBoxMaxHeight = 0
    231. 				this.pinglunOpcity = 0
    232. 				this.params.current = 1
    233. 				this.onePageList.twoLevelpinglun = []
    234. 				this.timer1 = setTimeout(() => { //因为展开动画需要1s 故 在收起的时候延迟置空数组，
    235. 					console.log(this.onePageList);
    236. 					this.$emit('shouqi', this.onePageList.levelOneCommentVo.id)
    237. 				}, 800)
    238. 			},
    239. 			updatHeight() {
    240. 				let that = this
    241. 				this.$nextTick(() => {
    242. 					// this.timer = setTimeout(() => {
    243. 					this.createSelectorQuery().select(".pinglunDom").boundingClientRect(function(rect) {
    244. 						// console.log(rect);
    245. 						that.pingjiaBoxMaxHeight = rect.height
    246. 						that.pinglunOpcity = 1
    247. 					}).exec();
    248. 					// }, 0)
    249. 				})
    250. 			},
    251. 		}
    252. 	}
    253. script>
    254.  
    255. <style lang="scss" scoped>
    256. 	.name {
    257. 		font-size: 24rpx;
    258. 		font-weight: 400;
    259. 		color: #667286;
    260. 	}
    261.  
    262. 	.content {
    263. 		font-size: 28rpx;
    264. 		font-weight: 400;
    265. 		color: #1F3253;
    266. 	}
    267.  
    268. 	.time {
    269. 		font-size: 20rpx;
    270. 		font-weight: 400;
    271. 		color: #AFAFAF;
    272. 	}
    273.  
    274. 	.likeNum {
    275. 		font-size: 20rpx;
    276. 		font-weight: 400;
    277. 		color: #667286;
    278. 	}
    279.  
    280. 	.zuozhe {
    281. 		width: 60rpx;
    282. 		height: 28rpx;
    283. 		background: #FFFFFF;
    284. 		border-radius: 18rpx;
    285. 		border: 1rpx solid #00875A;
    286. 		font-size: 20rpx;
    287. 		font-weight: 400;
    288. 		color: #00875A;
    289. 	}
    290.  
    291. 	.seeMore {
    292. 		font-size: 24rpx;
    293. 		font-weight: 400;
    294. 		color: #00875A;
    295. 	}
    296.  
    297. 	.retract {
    298. 		width: 150rpx;
    299. 		text-align: center;
    300. 	}
    301.  
    302. 	.erpinglunBox {
    303. 		padding-left: 84rpx;
    304. 		transition: height 1s, opacity 2s;
    305. 		overflow: hidden;
    306. 	}
    307. style>

    案例详情引入的scss文件：

    1. 	.font-20 {
    2. 		font-size: 20rpx;
    3. 		font-weight: 400;
    4. 	}
    5.  
    6. 	.font-24 {
    7. 		font-size: 24rpx;
    8. 		font-weight: 400;
    9. 	}
    10.  
    11.  
    12. 	.txt-1 {
    13. 		font-size: 28rpx;
    14. 		font-weight: 500;
    15. 		color: #0F2C50;
    16. 	}
    17.  
    18. 	.txt-2 {
    19. 		@extend .font-20;
    20. 		color: #667286;
    21. 	}
    22.  
    23. 	.txt-3 {
    24. 		@extend .font-24;
    25. 		color: #667286;
    26. 	}
    27.  
    28. 	.txt-4 {
    29. 		font-size: 24rpx;
    30. 		font-weight: 500;
    31. 		color: #667286;
    32. 	}
    33.  
    34. 	.txt-5 {
    35. 		font-size: 36rpx;
    36. 		font-weight: bold;
    37. 	}
    38.  
    39. 	.txt-6 {
    40. 		@extend .font-24;
    41. 		color: #9CADC6;
    42. 	}
    43.  
    44. 	.txt-7 {
    45. 		@extend .font-20;
    46. 		color: #B7BCC3;
    47. 	}
    48.  
    49. 	.txt-8 {
    50. 		@extend .font-24;
    51. 		color: #fff;
    52. 	}
    53. 	.txt-9 {
    54. 		@extend .font-24;
    55. 		color: #0F2C50;
    56. 	}
    57. 	.txt-10 {
    58. 		font-size: 28rpx;
    59. 		font-weight: 400;
    60. 		color: #667286;
    61. 	}
    62.  
    63. 	.yell-green-base {
    64. 		width: 140rpx;
    65. 		height: 52rpx;
    66. 		border-radius: 2rpx;
    67. 		font-size: 36rpx;
    68. 		font-weight: bold;
    69. 	}
    70.  
    71. 	.yellow-box {
    72. 		@extend .yell-green-base;
    73. 		background-color: #FFF4CD;
    74. 		color: #FF991F;
    75. 	}
    76.  
    77. 	.green-box {
    78. 		@extend .yell-green-base;
    79. 		background: #E2FFEE;
    80. 		color: #00875A;
    81. 	}
    82. 	.timeFont{
    83. 		font-size: 32rpx;
    84. 		font-family: DINAlternate-Bold, DINAlternate;
    85. 		font-weight: bold;
    86. 	}
    87.   .startTime{
    88. 		@extend .timeFont;
    89. 		color: #FF991F;
    90.   }
    91.   .endTime{
    92. 		@extend .timeFont;
    93. 		color: #00875A;
    94.   }
    95. 	.line {
    96. 		height: 1rpx;
    97. 		border: 1rpx solid #E6E6E6;
    98. 		margin: 16rpx 0;
    99. 	}
    100. .caseBox {
    101. 		background: #FFFFFF;
    102. 		border-radius: 12rpx;
    103. 		margin-top: 20rpx;
    104. 		padding: 0 32rpx;
    105.  
    106. 		.case-head-box {
    107. 			height: 140rpx;
    108. 		}
    109.  
    110. 		.avatarBox {
    111. 			width: 72rpx;
    112. 			height: 72rpx;
    113. 			margin-right: 16rpx;
    114. 		}
    115.  
    116. 		.caseDetailBtn {
    117. 			width: 100rpx;
    118. 			height: 44rpx;
    119. 			background: #00875A;
    120. 			border-radius: 22rpx;
    121. 		}
    122.  
    123. 		.rateBox {
    124. 			height: 80rpx;
    125. 		}
    126.  
    127. 		.mar-80 {
    128. 			margin-right: 80rpx;
    129. 		}
    130. 	}

  • 相关阅读:
    Tapdata 与 Apache Doris 完成兼容性互认证，共建新一代数据架构
    ping回显间隔长或第一个包很久才显示是怎么回事？
    Vue组件化开发-插槽的使用详解
    15：00面试，15：08就出来了，问的问题有点变态。。。
    学习二十大奋进新征程线上知识答题小程序登录技术点分析与实现
    初高（重要的是高中）中数学知识点综合（持续更新）
    JAVA:实现SquareRootBinarySearch平方根二分搜索算法(附完整源码)
    mysql8-基于docker搭建主从同步
    Java最强大的技术之一：反射
    django-haystack使用小结
  • 原文地址：https://blog.csdn.net/m0_57033755/article/details/132603278