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

uniapp 微信小程序仿抖音评论区功能，支持展开收起_类似于抖音的评论区功能

作者：AllinToyou | 2024-06-07 01:58:35

赞

踩

类似于抖音的评论区功能

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

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

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

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

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

  

闽ICP备14008679号