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

uniapp 仿微信聊天页面和消息列表

作者：凡人多烦事01 | 2024-05-05 11:32:06

赞

踩

uniapp 仿微信聊天页面和消息列表

1 消息列表

  1.  <!-- 底部消息列表 -->
  2.  <template>
  3.  	<view class="chatList">
  4.  		<view v-if="chatList.length>0">
  5.  			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in chatList" :key="item.ChatId"
  6.  				@click="click(index)" :options="options" @content-click="toChat(item.ChatId)">
  7.  				<view class="item u-border-bottom">
  8.  					<view class="left">
  9.  						<view class="photo">
  10.  							<image :src="item.HeadIcon?$t.img(item.HeadIcon):image"></u-image>
  11.  								<u-badge type="error" :offset="[0,0]" :count="item.UnRead"></u-badge>
  12.  						</view>
  13.  						<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
  14.  						<view class="center">
  15.  							<!-- <view class="title-wrap">
  16.  										<text class="title u-line-2">{{ item.userName }}</text>
  17.  									</view> -->
  18.  							<view class="title">
  19.  								{{ item.UserName }}
  20.  							</view>
  21.  							<view class="note  u-line-1">
  22.  								{{ item.note||'' }}
  23.  							</view>
  24.  						</view>
  25.  					</view>
  26.  					<view class="right">
  27.  						{{changeTime(item.LastChatDate)}}
  28.  					</view>
  29.  				</view>
  30.  			</u-swipe-action>
  31.  		</view>
  32.  		<view v-else class="nomore">
  33.  			<u-image width="620" height="400" mode="scaleToFill" :src="noData" />
  34.  			<u-loadmore status="nomore" />
  35.  		</view>
  36.  	</view>
  37.  
  38.  </template>
  39.  
  40.  <script>
  41.  	import dateTime from '@/commons/dateTime.js';
  42.  	export default {
  43.  		data() {
  44.  			return {
  45.  				chatList: [],
  46.  				options: [{
  47.  					text: '删除',
  48.  					style: {
  49.  						backgroundColor: '#dd524d'
  50.  					}
  51.  				}],
  52.  				disabled: false,
  53.  				btnWidth: 180,
  54.  				show: false,
  55.  				noData: this.$t.imgPath('noData.png'),
  56.  				image: this.$t.imgPath('man.png'),
  57.  			}
  58.  		},
  59.  		methods: {
  60.  			getList() {
  61.  				this.$api.chat.GetChatList({
  62.  					ChatType: 1
  63.  				}).then(res => {
  64.  					this.chatList = res.response
  65.  					this.chatList.forEach(item => {
  66.  						item.show = false
  67.  					})
  68.  				})
  69.  			},
  70.  			changeTime(date) {
  71.  				return dateTime.dateTime(date);
  72.  			},
  73.  			toChat(chatId) {
  74.  				this.$u.route({
  75.  					url: '/chatPage/chat',
  76.  					params: {
  77.  						chatId
  78.  					}
  79.  				})
  80.  			},
  81.  			click(index) {
  82.  				this.$api.chat.DeleteChat({
  83.  					chatId: this.chatList[index].ChatId
  84.  				}).then(res => {
  85.  					const {
  86.  						success,
  87.  						response
  88.  					} = res
  89.  					if (success) {
  90.  						this.$u.toast(`已结束对话`);
  91.  						this.getList()
  92.  					}
  93.  				})
  94.  			},
  95.  
  96.  		},
  97.  		onShow() {
  98.  			this.getList()
  99.  		}
  100.  	}
  101.  </script>
  102.  
  103.  <style lang="scss" scoped>
  104.  	.chatList {
  105.  		.item {
  106.  			display: flex;
  107.  			padding: 20rpx;
  108.  			justify-content: space-between;
  109.  
  110.  			.left {
  111.  				display: flex;
  112.  				justify-content: start;
  113.  
  114.  				.photo {
  115.  					margin-right: 10rpx;
  116.  					position: relative;
  117.  
  118.  					image {
  119.  						width: 100rpx;
  120.  						flex: 0 0 10rpx;
  121.  						height: 100rpx;
  122.  						margin-right: 20rpx;
  123.  						border-radius: 50rpx;
  124.  					}
  125.  				}
  126.  
  127.  				.center {
  128.  					width: 400rpx;
  129.  					overflow: hidden;
  130.  
  131.  					.title {
  132.  						font-size: 30rpx;
  133.  						font-weight: 500;
  134.  						color: #333333;
  135.  						margin-top: 0;
  136.  						margin-bottom: 20rpx;
  137.  					}
  138.  
  139.  					.note {
  140.  						font-size: 24rpx;
  141.  						color: darkgrey;
  142.  
  143.  					}
  144.  				}
  145.  
  146.  			}
  147.  
  148.  			.right {
  149.  				font-size: 24rpx;
  150.  				color: darkgrey;
  151.  			}
  152.  		}
  153.  
  154.  		.nomore {
  155.  			padding-top: 300rpx;
  156.  
  157.  			::v-deep .u-image {
  158.  				margin: 0 auto 30rpx;
  159.  			}
  160.  		}
  161.  
  162.  	}
  163.  </style>

2.聊天页面

  1. <template>
  2. 	<view class="chat">
  3. 		<scroll-view :style="{height: `${windowHeight-inputHeight}rpx`}" id="scrollview" scroll-y="true"
  4. 			:scroll-top="scrollTop" class="scroll-view">
  5. 			<!-- 聊天主体 -->
  6. 			<view id="msglistview" class="chat-body">
  7. 				<!-- 聊天记录 -->
  8. 				<view v-for="(item,index) in msgList" :key="index">
  9. 					<!-- 自己发的消息 -->
  10. 					<view class="chat-time" v-if="item.CreateDate != ''">{{changeTime(item.CreateDate)}}</view>
  11. 					<view class="item self" v-if="item.MessageType == 2">
  12. 						<!-- 文字内容 -->
  13. 						<view class="content right">
  14. 							{{item.Message}}
  15. 						</view>
  16.  
  17. 					</view>
  18. 					<!-- 机器人发的消息 -->
  19. 					<view class="item Ai" v-if="item.MessageType == 1">
  20. 						<!-- 文字内容 -->
  21. 						<view class="content left">
  22. 							{{item.Message}}
  23. 						</view>
  24. 					</view>
  25. 				</view>
  26. 			</view>
  27. 		</scroll-view>
  28. 		<!-- 底部消息发送栏 -->
  29. 		<!-- 用来占位，防止聊天消息被发送框遮挡 -->
  30. 		<view class="chat-bottom" :style="{height: `${inputHeight}rpx`}">
  31. 			<view class="send-msg" :style="{bottom:`${keyboardHeight}rpx`}">
  32. 				<view class="uni-textarea">
  33. 					<textarea v-model="chatMsg" maxlength="300" confirm-type="send" @confirm="handleSend"
  34. 						:show-confirm-bar="false" :adjust-position="false" @linechange="sendHeight" @focus="focus"
  35. 						@blur="blur" auto-height :hold-keyboard="true"></textarea>
  36. 				</view>
  37. 				<button @click="handleSend" class="send-btn">发送</button>
  38. 			</view>
  39. 		</view>
  40. 	</view>
  41. </template>
  42. <script>
  43. 	import dateTime from '@/commons/dateTime.js';
  44. 	export default {
  45. 		data() {
  46. 			return {
  47. 				//键盘高度
  48. 				keyboardHeight: 0,
  49. 				//底部消息发送高度
  50. 				bottomHeight: 0,
  51. 				//滚动距离
  52. 				scrollTop: 0,
  53. 				userId: '',
  54. 				//发送的消息
  55. 				chatMsg: "",
  56. 				msgList: [],
  57. 				autoRefreshId: 1, // 判断自动刷新 1 刷新，0 停止
  58. 				theTime: '',
  59. 				unshiftmsg: [],
  60. 				oldTime: new Date(),
  61. 			}
  62. 		},
  63. 		updated() {
  64. 			//页面更新时调用聊天消息定位到最底部
  65. 			this.scrollToBottom();
  66. 		},
  67. 		computed: {
  68. 			windowHeight() {
  69. 				return this.rpxTopx(uni.getSystemInfoSync().windowHeight)
  70. 			},
  71. 			// 键盘弹起来的高度+发送框高度
  72. 			inputHeight() {
  73. 				return this.bottomHeight + this.keyboardHeight
  74. 			}
  75. 		},
  76. 		onLoad(data) {
  77. 			console.log(data);
  78. 			this.chatId = data.chatId
  79. 			this.getChatInfo()
  80. 			uni.onKeyboardHeightChange(res => {
  81. 				//这里正常来讲代码直接写
  82. 				//this.keyboardHeight=this.rpxTopx(res.height)就行了
  83. 				//但是之前界面ui设计聊天框的高度有点高,为了不让键盘和聊天输入框之间距离差太大所以我改动了一下。
  84. 				this.keyboardHeight = this.rpxTopx(res.height - 30)
  85. 				if (this.keyboardHeight < 0) this.keyboardHeight = 0;
  86. 			})
  87. 		},
  88. 		onUnload() {
  89. 			uni.offKeyboardHeightChange()
  90. 			this.autoRefreshId = 0; // 同时改变autoRefreshId 数值
  91. 			clearInterval(this.theTime) // 清除指定的定时
  92. 			clearInterval() // 清除所有
  93. 		},
  94. 		onHide() {
  95. 			this.autoRefreshId = 0; // 同时改变autoRefreshId 数值
  96. 			clearInterval(this.theTime) // 清除指定的定时
  97. 			clearInterval() // 清除所有
  98. 		},
  99. 		onShow() {
  100.  
  101. 			let that = this
  102. 			if (that.autoRefreshId == 1) {
  103. 				that.theTime = setInterval(() => {
  104. 					this.getChatInfo()
  105. 				}, 5000);
  106. 			} else {
  107. 				clearInterval(that.theTime)
  108. 			}
  109. 		},
  110. 		methods: {
  111. 			getChatInfo() {
  112. 				this.$api.chat.ChatInfo({
  113. 					ChatId: this.chatId
  114. 				}).then(res => {
  115. 					const {
  116. 						success,
  117. 						response
  118. 					} = res
  119. 					if (success) {
  120. 						this.msgList = response.reverse()
  121. 						// // 数组倒叙 主要是应对后端传过来的数据
  122. 						// for (var i = 0; i < this.msgList.length; i++) {
  123. 						// 	//时间间隔处理
  124. 						// 	if (i < this.msgList.length - 1) { //这里表示头部时间还是显示一下
  125. 						// 		let t = dateTime.spaceTime(this.oldTime, this.msgList[i].createDate);
  126. 						// 		if (t) {
  127. 						// 			this.oldTime = t;
  128. 						// 		}
  129. 						// 		this.msgList[i].createDate = t;
  130. 						// 	}
  131.  
  132. 						// 	this.unshiftmsg.unshift(this.msgList[i]);
  133. 						// }
  134. 					}
  135. 				})
  136. 			},
  137. 			focus() {
  138. 				this.scrollToBottom()
  139. 			},
  140. 			blur() {
  141. 				this.scrollToBottom()
  142. 			},
  143. 			// px转换成rpx
  144. 			rpxTopx(px) {
  145. 				let deviceWidth = wx.getSystemInfoSync().windowWidth
  146. 				let rpx = (750 / deviceWidth) * Number(px)
  147. 				return Math.floor(rpx)
  148. 			},
  149. 			// 监视聊天发送栏高度
  150. 			sendHeight() {
  151. 				setTimeout(() => {
  152. 					let query = uni.createSelectorQuery();
  153. 					query.select('.send-msg').boundingClientRect()
  154. 					query.exec(res => {
  155. 						this.bottomHeight = this.rpxTopx(res[0].height)
  156. 					})
  157. 				}, 10)
  158. 			},
  159. 			// 滚动至聊天底部
  160. 			scrollToBottom(e) {
  161. 				setTimeout(() => {
  162. 					let query = uni.createSelectorQuery().in(this);
  163. 					query.select('#scrollview').boundingClientRect();
  164. 					query.select('#msglistview').boundingClientRect();
  165. 					query.exec((res) => {
  166. 						if (res[1].height > res[0].height) {
  167. 							this.scrollTop = this.rpxTopx(res[1].height - res[0].height)
  168. 						}
  169. 					})
  170. 				}, 15)
  171. 			},
  172. 			// 发送消息
  173. 			handleSend() {
  174. 				//如果消息不为空
  175. 				if (!this.$u.test.isEmpty(this.chatMsg)) {
  176. 					this.$api.chat.AnswerChat({
  177. 						chatId: this.chatId,
  178. 						message: this.chatMsg,
  179. 					}).then(res => {
  180. 						if (res.success) {
  181. 							this.getChatInfo()
  182. 							this.chatMsg = '';
  183. 							this.scrollToBottom()
  184. 						} else {
  185. 							this.$u.toast('发送失败')
  186. 						}
  187. 					})
  188. 				} else {
  189. 					this.$u.toast('不能发送空白消息')
  190. 				}
  191. 			},
  192. 			changeTime(date) {
  193. 				return dateTime.dateTime1(date);
  194. 			},
  195. 		}
  196. 	}
  197. </script>
  198. <style lang="scss" scoped>
  199. 	view,
  200. 	button,
  201. 	text,
  202. 	input,
  203. 	textarea {
  204. 		margin: 0;
  205. 		padding: 0;
  206. 		box-sizing: border-box;
  207. 	}
  208.  
  209. 	/* 聊天消息 */
  210. 	.chat {
  211. 		.scroll-view {
  212. 			::-webkit-scrollbar {
  213. 				display: none;
  214. 				width: 0 !important;
  215. 				height: 0 !important;
  216. 				-webkit-appearance: none;
  217. 				background: transparent;
  218. 				color: transparent;
  219. 			}
  220.  
  221. 			// background-color: orange;
  222. 			background-color: #F6F6F6;
  223.  
  224. 			.chat-body {
  225. 				display: flex;
  226. 				flex-direction: column;
  227. 				padding-top: 23rpx;
  228.  
  229. 				// background-color:skyblue;
  230. 				.chat-time {
  231. 					font-size: 24rpx;
  232. 					color: rgba(39, 40, 50, 0.3);
  233. 					line-height: 34rpx;
  234. 					padding: 10rpx 0rpx;
  235. 					text-align: center;
  236. 				}
  237.  
  238.  
  239. 				.self {
  240. 					justify-content: flex-end;
  241. 				}
  242.  
  243. 				.item {
  244. 					display: flex;
  245. 					padding: 23rpx 30rpx;
  246. 					// background-color: greenyellow;
  247.  
  248. 					.right {
  249. 						background-color: #EF7F25;
  250. 						color: #FFFFFF;
  251. 						border-radius: 30rpx 30rpx 5rpx 30rpx;
  252. 					}
  253.  
  254. 					.left {
  255. 						background-color: rgba(239, 127, 37, 0.1);
  256. 						border: 3rpx solid #EF7F25;
  257. 						color: #9e9e9e;
  258. 						border-radius: 30rpx 30rpx 30rpx 5rpx;
  259. 					}
  260.  
  261. 					// // 聊天消息的三角形
  262. 					// .right::after {
  263. 					// 	position: absolute;
  264. 					// 	display: inline-block;
  265. 					// 	content: '';
  266. 					// 	width: 0;
  267. 					// 	height: 0;
  268. 					// 	left: 100%;
  269. 					// 	top: 10px;
  270. 					// 	border: 12rpx solid transparent;
  271. 					// 	border-left: 12rpx solid #EF7F25;
  272. 					// }
  273.  
  274. 					// .left::after {
  275. 					// 	position: absolute;
  276. 					// 	display: inline-block;
  277. 					// 	content: '';
  278. 					// 	width: 0;
  279. 					// 	height: 0;
  280. 					// 	top: 10px;
  281. 					// 	right: 100%;
  282. 					// 	border: 12rpx solid transparent;
  283. 					// 	border-right: 12rpx solid #FFFFFF;
  284. 					// }
  285.  
  286. 					.content {
  287. 						position: relative;
  288. 						max-width: 486rpx;
  289. 						word-wrap: break-word;
  290. 						padding: 24rpx 24rpx;
  291. 						margin: 0 24rpx;
  292. 						font-size: 32rpx;
  293. 						font-family: PingFang SC;
  294. 						font-weight: 500;
  295. 						line-height: 42rpx;
  296. 					}
  297.  
  298.  
  299. 				}
  300. 			}
  301. 		}
  302.  
  303. 		/* 底部聊天发送栏 */
  304. 		.chat-bottom {
  305. 			width: 100%;
  306. 			height: 177rpx;
  307. 			background: #F4F5F7;
  308. 			transition: all 0.1s ease;
  309.  
  310.  
  311. 			.send-msg {
  312. 				display: flex;
  313. 				align-items: flex-end;
  314. 				padding: 16rpx 30rpx;
  315. 				width: 100%;
  316. 				min-height: 177rpx;
  317. 				position: fixed;
  318. 				bottom: 0;
  319. 				background: #EDEDED;
  320. 				transition: all 0.1s ease;
  321. 			}
  322.  
  323. 			.uni-textarea {
  324. 				padding-bottom: 70rpx;
  325.  
  326. 				textarea {
  327. 					width: 537rpx;
  328. 					min-height: 75rpx;
  329. 					max-height: 500rpx;
  330. 					background: #FFFFFF;
  331. 					border-radius: 8rpx;
  332. 					font-size: 32rpx;
  333. 					font-family: PingFang SC;
  334. 					color: #333333;
  335. 					line-height: 43rpx;
  336. 					padding: 5rpx 8rpx;
  337. 				}
  338. 			}
  339.  
  340. 			.send-btn {
  341. 				display: flex;
  342. 				align-items: center;
  343. 				justify-content: center;
  344. 				margin-bottom: 70rpx;
  345. 				margin-left: 25rpx;
  346. 				width: 128rpx;
  347. 				height: 75rpx;
  348. 				background: #EF7F25;
  349. 				border-radius: 30rpx;
  350. 				font-size: 28rpx;
  351. 				font-family: PingFang SC;
  352. 				font-weight: 500;
  353. 				color: #FFFFFF;
  354. 				line-height: 28rpx;
  355. 			}
  356. 		}
  357. 	}
  358. </style>

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