From 6e07a26a7b17e3ac375f132583c0e8178a8c3f4d Mon Sep 17 00:00:00 2001
From: helang <630039906@qq.com>
Date: Sun, 15 Dec 2024 17:03:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=81=8A=E5=A4=A9=E6=A8=A1=E6=9D=BF=20?=
 =?UTF-8?q?v1.1.1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 uniapp-extend/pages/template/talk.vue         | 279 +++++++++---------
 .../request/template-talk/history-msg.js      |  36 +++
 2 files changed, 170 insertions(+), 145 deletions(-)
 create mode 100644 uniapp-extend/request/template-talk/history-msg.js

diff --git a/uniapp-extend/pages/template/talk.vue b/uniapp-extend/pages/template/talk.vue
index 30f1a76..e99f70c 100644
--- a/uniapp-extend/pages/template/talk.vue
+++ b/uniapp-extend/pages/template/talk.vue
@@ -1,169 +1,138 @@
 <template>
-	<view>
-		<view class="tips color-fff size_12 align-c" :class="{ 'show':ajax.loading }" @tap="getHistoryMsg">{{ajax.loadText}}</view>
-		<view class="box-1" id="list-box">
-			<view class="talk-list">
-				<view 
-					v-for="(item,index) in talkList" 
-					:key="item.id" 
-					:id="'msg-'+item.id"
-				>
-					<view class="item flex-col" :class=" item.type == 1 ? 'push':'pull' ">
-						<image :src="item.pic" mode="aspectFill" class="pic"></image>
-						<view class="content">{{item.content}}</view>
+	<view class="container" :style="pageHeight">
+		<view class="box-1">
+			<scroll-view 
+				scroll-y 
+				refresher-background="transparent"
+				style="height: 100%;" 
+				@refresherrefresh="refresherrefresh"
+				:refresher-enabled="true"
+				:scroll-with-animation="false"
+				:refresher-triggered="scrollView.refresherTriggered"
+				:scroll-into-view="scrollView.intoView"
+			>
+				<view class="talk-list">
+					<view 
+						v-for="(item,index) in talkList" 
+						:key="item.id" 
+						:id="'msg-'+item.id"
+					>
+						<view class="item flex-col" :class=" item.type == 1 ? 'push':'pull' ">
+							<image :src="item.pic" mode="aspectFill" class="pic"></image>
+							<view class="content">
+								<template v-if="item.contentType === 'image'">
+									<image :src="item.content" mode="widthFix" style="width: 400rpx;"></image>
+								</template>
+								<template v-else>
+									{{item.content}}
+								</template>
+							</view>
+						</view>
 					</view>
+					
 				</view>
-			</view>
+			</scroll-view>
 		</view>
 		<view class="box-2">
 			<view class="flex-col">
+				<view style="margin-right: 20rpx;">
+					<uni-icons type="image" size="24" color="#42b983" @tap="handleImageClick"></uni-icons>
+				</view>
 				<view class="flex-grow">
 					<input type="text" class="content" v-model="content" placeholder="请输入聊天内容" placeholder-style="color:#DDD;" :cursor-spacing="6">
 				</view>
-				<button class="send" @tap="send">发送</button>
+				<button class="send" @tap="handleSendClick">发送</button>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
+	import { getHistoryMsg } from "@/request/template-talk/history-msg.js";
 	export default {
 		data() {
 			return {
+				// 滚动容器
+				scrollView:{
+					refresherTriggered:false,
+					intoView:"",
+					safeAreaHeight:0
+				},
+				// 聊天列表数据
 				talkList:[],
+				// 请求参数
 				ajax:{
 					rows:20,	//每页数量
 					page:1,	//页码
 					flag:true,	// 请求开关
-					loading:true,	// 加载中
-					loadText:'正在获取消息'
 				},
-				content:''
+				// 发送内容
+				content:'',
 			}
 		},
-		mounted() {
-			this.$nextTick(()=>{
-				this.getHistoryMsg();
-			});
-		},
-		onPageScroll(e){
-			if(e.scrollTop<5){
-				this.getHistoryMsg();
+		computed:{
+			// 页面高度
+			pageHeight(){
+				const safeAreaHeight = this.scrollView.safeAreaHeight;
+				if(safeAreaHeight > 0){
+					return `height: calc(${safeAreaHeight}px - var(--window-top));`
+				}
+				return "";
 			}
 		},
+		onLoad() {
+			// #ifdef H5
+			this.scrollView.safeAreaHeight = uni.getSystemInfoSync().safeArea.height;
+			// #endif
+			
+			this.getMessage();
+		},
 		methods: {
+			// 下拉刷新
+			refresherrefresh(e){
+				this.getMessage();
+				this.scrollView.refresherTriggered = true;
+			},
 			// 获取历史消息
-			getHistoryMsg(){
+			getMessage(){
 				if(!this.ajax.flag){
-					return; //
+					return;
 				}
 				
 				// 此处用到 ES7 的 async/await 知识，为使代码更加优美。不懂的请自行学习。
 				let get = async ()=>{
-					this.hideLoadTips();
 					this.ajax.flag = false;
-					let data = await this.joinHistoryMsg();
-					
-					console.log('----- 模拟数据格式，供参考 -----');
-					console.log(data);	// 查看请求返回的数据结构 
+					let data = await getHistoryMsg({
+						page:this.ajax.page,
+						rows:this.ajax.rows
+					});
+					this.scrollView.refresherTriggered = false;
 					
-					// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用
-					let selector = '';
-										
-					if(this.ajax.page>1){
-						// 非第一页，则取历史消息数据的第一条信息元素
-						selector = `#msg-${this.talkList[0].id}`;
-					}else{
-						// 第一页，则取当前消息数据的最后一条信息元素
-						selector = `#msg-${data[data.length-1].id}`;
-					}
+					// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用。取当前消息数据的第一条信息元素
+					const selector = `msg-${data?.[0]?.id}`;;
 					
 					// 将获取到的消息数据合并到消息数组中
-					this.talkList = [...data,...this.talkList];	
+					this.talkList = this.talkList.concat(data);	
 					
 					// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
 					this.$nextTick(()=>{
 						// 设置当前滚动的位置
-						this.setPageScrollTo(selector);
-						
-						this.hideLoadTips(true);
-												
+						this.scrollView.intoView = selector;
+																		
 						if(data.length < this.ajax.rows){
 							// 当前消息数据条数小于请求要求条数时，则无更多消息，不再允许请求。
 							// 可在此处编写无更多消息数据时的逻辑
 						}else{
+							this.ajax.flag = true;
 							this.ajax.page ++;
-							
-							// 延迟 200ms ，以保证设置窗口滚动已完成
-							setTimeout(()=>{
-								this.ajax.flag = true;
-							},200)
 						}
 						
 					})
 				}
 				get();
 			},
-			// 拼接历史记录消息，正式项目可替换为请求历史记录接口
-			joinHistoryMsg(){
-				let join = ()=>{
-					let arr = [];
-					
-					//通过当前页码及页数，模拟数据内容
-					let startIndex = (this.ajax.page-1) * this.ajax.rows;
-					let endIndex = startIndex + this.ajax.rows;
-					for(let i = startIndex; i < endIndex; i++){
-						arr.push({
-							"id":i,	// 消息的ID
-							"content":`这是历史记录的第${i+1}条消息`,	// 消息内容
-							"type":Math.random() > 0.5 ? 1 : 0	,// 此为消息类别，设 1 为发出去的消息，0 为收到对方的消息,
-							"pic":"/static/logo.png"	// 头像
-						})
-					}
-					
-					/*
-						颠倒数组中元素的顺序。将最新的数据排在本次接口返回数据的最后面。
-						后端接口按 消息的时间降序查找出当前页的数据后，再将本页数据按消息时间降序排序返回。
-						这是数据的重点，因为页面滚动条和上拉加载历史的问题。
-					 */
-					arr.reverse();
-					
-					return arr;
-				}
-				
-				// 此处用到 ES6 的 Promise 知识，不懂的请自行学习。
-				return new Promise((done,fail)=>{
-					// 无数据请求接口，由 setTimeout 模拟，正式项目替换为 ajax 即可。
-					setTimeout(()=>{
-						let data = join();
-						done(data);
-					},1500);
-				})
-			},
-			// 设置页面滚动位置
-			setPageScrollTo(selector){
-				let view = uni.createSelectorQuery().in(this).select(selector);
-				view.boundingClientRect((res) => {
-					uni.pageScrollTo({
-					    scrollTop:res.top - 30,	// -30 为多显示出大半个消息的高度，示意上面还有信息。
-					    duration: 0
-					});
-				}).exec();
-			},
-			// 隐藏加载提示
-			hideLoadTips(flag){
-				if(flag){
-					this.ajax.loadText = '消息获取成功';
-					setTimeout(()=>{
-						this.ajax.loading = false;
-					},300);
-				}else{
-					this.ajax.loading = true;
-					this.ajax.loadText = '正在获取消息';
-				}
-			},
 			// 发送信息
-			send(){
+			handleSendClick(){
 				if(!this.content){
 					uni.showToast({
 						title:'请输入有效的内容',
@@ -171,31 +140,33 @@
 					})
 					return;
 				}
+				this.sendMessage(this.content,'text');
 				
-				uni.showLoading({
-					title:'正在发送'
-				})
-				setTimeout(()=>{
-					uni.hideLoading();
-					
-					// 将当前发送信息 添加到消息列表。
-					let data = {
-						"id":new Date().getTime(),
-						"content":this.content,
-						"type":1,
-						"pic":"/static/logo.png"
+				// 清空内容框中的内容
+				this.content = '';
+			},
+			// 处理图片点击
+			handleImageClick(){
+				uni.chooseImage({
+					count: 1, //默认9
+					sizeType: ['original'],
+					sourceType: ['album','camera'],
+					success: (res)=> {
+						const imageUrl = res.tempFilePaths[0];
+						this.sendMessage(imageUrl,'image');
 					}
-					this.talkList.push(data);
-					
-					this.$nextTick(()=>{
-						// 清空内容框中的内容
-						this.content = '';
-						uni.pageScrollTo({
-						    scrollTop: 999999,	// 设置一个超大值，以保证滚动条滚动到底部
-						    duration: 0
-						});
-					})
-				},1500);
+				});
+			},
+			sendMessage(content,contentType = 'text'){
+				// 将当前发送信息 添加到消息列表。
+				let data = {
+					"id":new Date().getTime(),
+					content,
+					contentType,
+					"type":1,
+					"pic":"/static/logo.png"
+				}
+				this.talkList.unshift(data);
 			}
 		}
 	}
@@ -207,6 +178,15 @@
 		background-color: #F3F3F3;
 		font-size: 28rpx;
 	}
+	.container{
+		height: calc(100vh - var(--window-top));
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		align-content: center;
+		justify-content: space-between;
+		align-items: stretch;
+	}
 	
 	/* 加载数据提示 */
 	.tips{
@@ -228,20 +208,11 @@
 	
 	.box-1{
 		width: 100%;
-		height: auto;
-		padding-bottom: 100rpx;
+		height: 0;
+		flex: 1 0 auto;
 		box-sizing: content-box;
-		
-		/* 兼容iPhoneX */
-		margin-bottom: 0;  
-		margin-bottom: constant(safe-area-inset-bottom);  
-		margin-bottom: env(safe-area-inset-bottom);  
 	}
 	.box-2{
-		position: fixed;
-		left: 0;
-		width: 100%;
-		bottom: 0;
 		height: auto;
 		z-index: 2;
 		border-top: #e5e5e5 solid 1px;
@@ -284,6 +255,24 @@
 	
 	.talk-list{
 		padding-bottom: 20rpx;
+		display: flex;
+		flex-direction: column-reverse;
+		flex-wrap: nowrap;
+		align-content: flex-start;
+		justify-content: flex-end;
+		align-items: stretch;
+		
+		// 添加弹性容器，让内容自动在顶部
+		&::before{
+			content: '.';
+			display: inline;
+			visibility: hidden;
+			line-height: 0;
+			font-size: 0;
+			flex: 1 0 auto;
+			height: 1px;
+		}
+		
 		
 		/* 消息项，基础类 */
 		.item{
diff --git a/uniapp-extend/request/template-talk/history-msg.js b/uniapp-extend/request/template-talk/history-msg.js
new file mode 100644
index 0000000..8c668de
--- /dev/null
+++ b/uniapp-extend/request/template-talk/history-msg.js
@@ -0,0 +1,36 @@
+export const getHistoryMsg = (params)=>{
+	const { page = 1,rows = 10 } = params ?? {};
+	let join = ()=>{
+		let arr = [];
+		
+		//通过当前页码及页数，模拟数据内容
+		let startIndex = (page-1) * rows;
+		let endIndex = startIndex + rows;
+		for(let i = startIndex; i < endIndex; i++){
+			arr.push({
+				"id":i,	// 消息的ID
+				"content":`这是历史记录的第${i+1}条消息，第${page}页`,	// 消息内容
+				"type":Math.random() > 0.5 ? 1 : 0	,// 此为消息类别，设 1 为发出去的消息，0 为收到对方的消息,
+				"pic":"/static/logo.png"	// 头像
+			})
+		}
+		
+		/*
+			颠倒数组中元素的顺序。将最新的数据排在本次接口返回数据的最后面。
+			后端接口按 消息的时间降序查找出当前页的数据后，再将本页数据按消息时间降序排序返回。
+			这是数据的重点，因为页面滚动条和上拉加载历史的问题。
+		 */
+		// arr.reverse();
+		
+		return arr;
+	}
+	
+	// 此处用到 ES6 的 Promise 知识，不懂的请自行学习。
+	return new Promise((done,fail)=>{
+		// 无数据请求接口，由 setTimeout 模拟，正式项目替换为 ajax 即可。
+		setTimeout(()=>{
+			let data = join();
+			done(data);
+		},1000);
+	})
+}
\ No newline at end of file
-- 
Gitee