feat：添加快捷标签

.hbuilderx/launch.json

@@ -1,16 +1,24 @@
-{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
-  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
-    "version": "0.0",
-    "configurations": [{
-     	"app-plus" : 
-     	{
-     		"launchtype" : "local"
-     	},
-     	"default" : 
-     	{
-     		"launchtype" : "local"
-     	},
-     	"type" : "uniCloud"
-     }
+{
+    // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+    // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version" : "0.0",
+    "configurations" : [
+        {
+            "app-plus" : {
+                "launchtype" : "local"
+            },
+            "default" : {
+                "launchtype" : "local"
+            },
+            "type" : "uniCloud"
+        },
+        {
+            "openVueDevtools" : false,
+            "type" : "uni-app:app-ios"
+        },
+        {
+            "openVueDevtools" : false,
+            "type" : "uni-app:app-android"
+        }
     ]
 }

components/styleChange.vue

@@ -0,0 +1,9 @@
+<template>
+</template>
+
+<script setup>
+	
+</script>
+
+<style>
+</style>

pages/index15/index15.vue

@@ -1,9 +1,10 @@
 <template>
 	<view id='app'>
-		<view class="head">
-			<text>睿宝AI</text>
+		<view class="head" :style="{backgroundColor:styleData.color}">
+			<text :style="{color:styleData.fontColor}">睿宝AI</text>
+			<switch @change="styleChange(styleData)" />
 		</view>
-		<view class="pageView">
+		<view class="pageView" :style="{backgroundColor:styleData.color}">
 			<view class="sidebar-left"></view>
 			<view class="body">
 				<view class="list-wrap">
@@ -14,7 +15,7 @@
 								<!-- user方-聊天内容 -->
 								<view class="item self" v-if="item.userContent != ''">
 									<image class="avtar" src="../../static/user-avatar.png" mode="aspectFit"></image>
-									<view class="content right" disabled>{{ item.userContent }}</view>
+									<view class="content right" disabled :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">{{ item.userContent }}</view>
 								</view>
 								<!-- ai方-聊天内容 -->
 								<view class="item other">
@@ -22,7 +23,7 @@
 										<view class="loadingPoint" v-if='msgList.isloading[index]'>
 											<loadingPointsVue></loadingPointsVue>
 										</view>
-										<view class="content left" v-if='!msgList.isloading[index]'>
+										<view class="content left" v-if='!msgList.isloading[index]' :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
 											{{ msgList.otherChatList[index] }}</view>
 									</view>
 									<image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image>
@@ -33,13 +34,16 @@
 				</view>
 
 				<view class="chat-bottom">
+					<view class="uni-label">
+						<label v-for="(item,index) in labelList" :key="index" @click="shortcuts(msgList,item)" :style="{backgroundColor:styleData.labelColor,color:styleData.fontColor}">{{item}}</label>
+					</view>
 					<view class="send-msg">
 						<view class="uni-textarea">
 							<textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
-								confirm-type="send" @confirm="handleSend" maxlength="300" />
+								confirm-type="send" @confirm="handleSend(msgList)" maxlength="300" />
 						</view>
 						<view class="uni-button">
-							<button class="send-btn" @click="handleSend" type="primary" :disabled="msgList.isClick">发送</button>
+							<button class="send-btn" @click="handleSend(msgList)" type="primary" :disabled="msgList.isClick" :style="{backgroundColor:styleData.btnColor}">发送</button>
 						</view>
 					</view>
 				</view>
@@ -55,6 +59,7 @@
 	import {
 		nextTick,
 		reactive,
+		ref,
 		watch
 	} from 'vue';
 
@@ -64,6 +69,7 @@
 
 	import axios from 'axios';
 	import loadingPointsVue from '../../components/loadingPoints.vue';
+	import {styleChange,handleSend,scrollToBottom,shortcuts} from "../../until/fun.js"
 
 	const msgList = reactive({
 		// 输入框
@@ -85,90 +91,33 @@
 		isloading: [],
 		isClick:false
 	})
-
-	// 发送消息
-	const handleSend = async () => {
-		msgList.isClick = !msgList.isClick
-		const data = {
-			AppId: '0c8ff06b-91d9-43f7-b61e-ca5da1db15d4',
-			AId: 'TK1234',
-			content: ''
-		}
-		if (msgList.chatMsg != '') {
-			msgList.isloading[msgList.len] = true
-			msgList.len++
-			let obj = {
-				otherContent: '',
-				userContent: '',
-				image: ""
-			}
-			data.content = msgList.chatMsg
-			obj.userContent = msgList.chatMsg
-			msgList.chatList.push(obj)
-
-			obj.otherContent = await GetNewsList(data)
-			// await sleep(16000);
-			getChatContent(obj.otherContent, msgList.len)
-		}
+	
+	const styleData = reactive({
+		value:false,
+		color:'#f5f5f5',
+		fontColor:"black",
+		btnColor:"blue",
+		contentColor:"#fff"
 		
-	}
+	})
 
+	const labelList = ref([
+		"我要加油",
+		"92号",
+		"95号",
+		"98号",
+		"加油卡",
+		"易捷加油"
+	])
 
-	// 滚动条回到最底部
-	const scrollToBottom = (() => {
-		nextTick(() => {
-			const query = uni.createSelectorQuery();
-			query.select("#content-box").boundingClientRect()
-			query.select("#content-overflow").boundingClientRect()
-			query.exec(res => {
-				const scrollViewHeight = res[0].height
-				const scrollContentHeight = res[1].height
-				if (scrollViewHeight < scrollContentHeight) {
-					const scrollTop = scrollContentHeight - scrollViewHeight
-					msgList.scrollTop = scrollTop
-				}
-			})
-		})
-	})
 	//滚动至聊天底部
 	watch([msgList.otherChatList,msgList.chatList], (newVal) => {
-		scrollToBottom()
+		scrollToBottom(msgList)
 	})
 
-	// 调用数据接口
-	const GetNewsList = async (data) => {
-		msgList.chatMsg = ''
-		var res = await getDataList(data)
-		console.log(res)
-		return res
-	}
-
-	// ------- 聊天逐字输出 -----------
-	// 延时函数
-	// const sleep = ((delaytime = 10000) => {
-	// 	return new Promise(resolve => setTimeout(resolve, delaytime));
-	// })
-
-	// 逐字显示内容
-	const getChatContent = ((text, index) => {
-		msgList.timer = setInterval(() => {
-			msgList.textCount++;
-			if (msgList.textCount == text.length + 1) {
-				msgList.otherChatList[index - 1] = text;
-				clearInterval(msgList.timer);
-			} else {
-				// 取字符串子串
-				let nowStr = text.substring(0, msgList.textCount);
-				msgList.otherChatList[index - 1] = nowStr;
-			}
-
-		}, 50);
-		msgList.textCount = 0
-		msgList.isloading[index - 1] = false
-		msgList.isClick = !msgList.isClick
-	})
 </script>
 
 <style>
 	@import url("../../theme/chat15.css");
+	@import url("../../theme/public.css");
 </style>

pages/index32/index32.vue

@@ -1,10 +1,12 @@
 <template>
-	<view id='app'>
+	<view id='app' style="bottom: {{KeyBoardHeight}}px;">
 		<view class="placeholder"></view>
-		<view class="head">
-			<text>睿宝AI</text>
+		<view class="head" :style="{backgroundColor:styleData.color}">
+			<text :style="{color:styleData.fontColor}">睿宝AI</text>
+			<switch @change="styleChange(styleData)" />
 		</view>
-		<view class="pageView">
+		
+		<view class="pageView" :style="{backgroundColor:styleData.color}">
 			<view class="sidebar-left"></view>
 			<view class="body">
 				<view class="list-wrap">
@@ -15,7 +17,7 @@
 								<!-- user方-聊天内容 -->
 								<view class="item self" v-if="item.userContent != ''">
 									<image class="avtar" src="../../static/user-avatar.png" mode="aspectFit"></image>
-									<view class="content right" disabled>{{ item.userContent }}</view>
+									<view class="content right" disabled :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">{{ item.userContent }}</view>
 								</view>
 								<!-- ai方-聊天内容 -->
 								<view class="item other">
@@ -23,7 +25,7 @@
 										<view class="loadingPoint" v-if='msgList.isloading[index]'>
 											<loadingPointsVue></loadingPointsVue>
 										</view>
-										<view class="content left" v-if='!msgList.isloading[index]'>
+										<view class="content left" v-if='!msgList.isloading[index]' :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
 											{{ msgList.otherChatList[index] }}
 										</view>
 									</view>
@@ -35,18 +37,23 @@
 				</view>
 
 				<view class="chat-bottom">
+					<view class="uni-label">
+						<label v-for="(item,index) in labelList" :key="index" @click="shortcuts(msgList,item)" :style="{backgroundColor:styleData.labelColor,color:styleData.fontColor}">{{item}}</label>
+					</view>
 					<view class="send-msg">
 						<view class="uni-textarea">
+							<!-- bindkeyboardheightchange='getKeyBoardHeight'    - 添加键盘弹起触发属性 -->
 							<textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
-								confirm-type="send" @confirm="handleSend" maxlength="300" />
+								confirm-type="send" @confirm="handleSend(msgList)" maxlength="300" />
 						</view>
 						<view class="uni-button">
-							<button class="send-btn" @click="handleSend" type="primary">发送</button>
+							<button class="send-btn" @click="handleSend(msgList)" type="primary" :disabled="msgList.isClick" :style="{backgroundColor:styleData.btnColor}">发送</button>
 						</view>
 					</view>
-				</view>
+				</view>s
 			</view>
 			<view class="sidebar-right">
+				
 				<image src="../../static/logo.png" mode="aspectFit"></image>
 			</view>
 		</view>
@@ -57,6 +64,7 @@
 	import {
 		nextTick,
 		reactive,
+		ref,
 		watch
 	} from 'vue';
 
@@ -66,6 +74,7 @@
 
 	import axios from 'axios';
 	import loadingPointsVue from '../../components/loadingPoints.vue';
+	import {styleChange,handleSend,scrollToBottom,shortcuts} from "../../until/fun.js"
 
 	const msgList = reactive({
 		// 输入框
@@ -81,98 +90,40 @@
 		otherChatList: [],
 		len: 0,
 		isloading: [],
-		isClick: false
+		isClick: false,
+		// 键盘弹起高度
+		KeyBoardHeight:0
 	})
-
-	// 发送消息
-	const handleSend = async () => {
-		msgList.isClick = !msgList.isClick
-		const data = {
-			AppId: '0c8ff06b-91d9-43f7-b61e-ca5da1db15d4',
-			AId: 'TK1234',
-			content: ''
-		}
-		if (msgList.chatMsg != '') {
-			msgList.isloading[msgList.len] = true
-			msgList.len++
-			let obj = {
-				otherContent: '',
-				userContent: '',
-				image: ""
-			}
-			data.content = msgList.chatMsg
-			obj.userContent = msgList.chatMsg
-			msgList.chatList.push(obj)
-
-			obj.otherContent = await GetNewsList(data)
-
-			// await sleep(16000);
-			getChatContent(obj.otherContent, msgList.len)
-
-
-		}
-
-		msgList.otherContent = ''
-	}
-
-	// 滚动条回到最底部
-	const scrollToBottom = (() => {
-		nextTick(() => {
-			const query = uni.createSelectorQuery();
-			query.select("#content-box").boundingClientRect()
-			query.select("#content-overflow").boundingClientRect()
-			query.exec(res => {
-				const scrollViewHeight = res[0].height
-				const scrollContentHeight = res[1].height
-				if (scrollViewHeight < scrollContentHeight) {
-					const scrollTop = scrollContentHeight - scrollViewHeight
-					msgList.scrollTop = scrollTop
-				}
-			})
-		})
+	
+	const styleData = reactive({
+		value:false,
+		color:'#f5f5f5',
+		fontColor:"black",
+		btnColor:"rgb(30,144,255)",
+		contentColor:"#fff",
+		labelColor:"#fff"
+		
 	})
+	
+	const labelList = ref([
+		"我要加油",
+		"92号",
+		"95号",
+		"98号",
+		"加油卡",
+		"易捷加油"
+	])
 
 	//滚动至聊天底部
 	watch([msgList.otherChatList, msgList.chatList], (newVal) => {
-		scrollToBottom()
+		scrollToBottom(msgList)
 	})
+	
 
-	// 调用数据接口
-	const GetNewsList = async (data) => {
-		msgList.chatMsg = ''
-		var res = await getDataList(data)
-		console.log(res)
-		return res
-	}
-
-	// ------- 聊天逐字输出 -----------
-	// 延时函数
-	const sleep = ((delaytime = 10000) => {
-		return new Promise(resolve => setTimeout(resolve, delaytime));
-	})
-
-	// 逐字显示内容
-	const getChatContent = ((text, index) => {
-		console.log(index)
-		msgList.timer = setInterval(() => {
-			msgList.textCount++;
-			if (msgList.textCount == text.length + 1) {
-				msgList.otherChatList[index - 1] = text;
-				clearInterval(msgList.timer);
-			} else {
-				// 取字符串子串
-				let nowStr = text.substring(0, msgList.textCount);
-				msgList.otherChatList[index - 1] = nowStr;
-			}
-
-		}, 50);
-		console.log(msgList.timer)
-		msgList.textCount = 0
-		msgList.isloading[index - 1] = false
-		msgList.isClick = !msgList.isClick
-	})
+	
 </script>
 
 <style>
 	@import url("../../theme/chat32.css");
+	@import url("../../theme/public.css");
 </style>

theme/chat15.css

@@ -1,58 +1,58 @@
 /* 15寸 大屏样式 */
 
 /* --- 标题 --- */
-.head {
+/* .head {
 	height: 5vh;
 	text-align: center;
 	line-height: 5vh;
 	background-color: #f5f5f5;
 	font-size: 18px;
-}
+} */
 
 .pageView {
 	height: 95%;
-	display: flex;
-	background-color: #f5f5f5;
+/* 	display: flex;
+	background-color: #f5f5f5; */
 }
 
 .body {
-	display: flex;
-	flex-direction: column;
+/* 	display: flex;
+	flex-direction: column; */
 	height: 95vh;
 	width: 75%;
 }
 
 
 /* --- 主内容区 --- */
-.list-wrap {
+/* .list-wrap {
 	flex-grow: 1;
 	position: relative;
-}
+} */
 
-.list-wrap .scrollview {
+/* .list-wrap .scrollview {
 	position: absolute;
 	height: 100%;
-}
+} */
 
-.list-wrap .scrollview .scrollview-item {
+/* .list-wrap .scrollview .scrollview-item {
 	display: flex;
 	flex-direction: column;
-}
+} */
 
-.list-wrap .scrollview .scrollview-item .item {
+/* .list-wrap .scrollview .scrollview-item .item {
 	display: flex;
 	margin: 0 24rpx 50rpx;
-}
+} */
 
-.list-wrap .scrollview .scrollview-item .item .avtar {
+/* .list-wrap .scrollview .scrollview-item .item .avtar {
 	display: flex;
 	width: 78rpx;
 	height: 78rpx;
 	border-radius: 50rpx;
 	overflow: hidden;
-}
+} */
 
-.list-wrap .scrollview .scrollview-item .item .content {
+/* .list-wrap .scrollview .scrollview-item .item .content {
 	position: relative;
 	max-width: 1050rpx;
 	background-color: #fff;
@@ -62,29 +62,29 @@
 	line-height: 42rpx;
 	padding: 24rpx;
 	word-wrap: break-word;
-}
+} */
 
-.list-wrap .scrollview .scrollview-item .other {
+/* .list-wrap .scrollview .scrollview-item .other {
 	justify-content: flex-end;
-}
+} */
 
 
 /* 底部发送框 */
-.chat-bottom {
+/* .chat-bottom {
 	height: 300rpx;
 	margin: 50rpx;
 	position: relative;
-}
+} */
 
-.chat-bottom .send-msg {
+/* .chat-bottom .send-msg {
 	display: flex;
 }
 
 .chat-bottom .send-msg .uni-textarea {
 	flex: 1;
-}
+} */
 
-.chat-bottom .send-msg .send-btn {
+/* .chat-bottom .send-msg .send-btn {
 	align-items: center;
 	justify-content: center;
 	width: 320rpx;
@@ -105,16 +105,16 @@
 	padding: 25rpx;
 	right: 50rpx;
 	background-color: #fff;
-}
+} */
 
-.chat-bottom .send-msg .uni-textarea textarea ::-webkit-scrollbar {
+/* .chat-bottom .send-msg .uni-textarea textarea ::-webkit-scrollbar {
 	display: none;
-}
+} */
 
 /* --- 左右两边占位调节、图片占位 --- */
-.sidebar-left {
+/* .sidebar-left {
 	width: 5%;
-}
+} */
 
 .sidebar-right {
 	width: 20%;
@@ -127,12 +127,12 @@
 }
 
 /* 去除导航条 */
-.scrollview ::-webkit-scrollbar {
+/* .scrollview ::-webkit-scrollbar {
 	display: none;
-}
+} */
 
 
 /* 聊天框数据加载 图标距离头像的间距 */
-.loadingPoint{
+/* .loadingPoint{
 	margin-right: 30px;
-}
+} */

theme/chat32.css

@@ -1,26 +1,31 @@
 /* 32寸 大屏样式 */
 
+#app{
+	bottom:0
+}
 .placeholder {
 	height: 40vh;
 
 }
 
 /* --- 标题 --- */
-.head {
+/* .head {
 	height: 5vh;
 	background-color: #f5f5f5;
 	text-align: center;
 	line-height: 5vh;
-}
+} */
 
 .pageView {
-	display: flex;
-	background-color: #f5f5f5;
+/* 	display: flex;
+	background-color: #f5f5f5; */
+	/* rgb(0,0,0,0.8)  -- 黑色 */
+	/* #f5f5f5; -- 灰色 */
 }
 
 .body {
-	display: flex;
-	flex-direction: column;
+/* 	display: flex;
+	flex-direction: column; */
 	height: 55vh;
 	width: 70%;
 	/* background-color: #f5f5f5; */
@@ -29,35 +34,38 @@
 
 
 /* --- 主内容区 --- */
-.list-wrap {
+.pageView{
+	padding-top: 30px;
+}
+/* .list-wrap {
 	flex-grow: 1;
 	position: relative;
-}
+} */
 
-.list-wrap .scrollview {
+/* .list-wrap .scrollview {
 	position: absolute;
 	height: 100%;
-}
+} */
 
-.list-wrap .scrollview .scrollview-item {
+/* .list-wrap .scrollview .scrollview-item {
 	display: flex;
 	flex-direction: column;
-}
+} */
 
-.list-wrap .scrollview .scrollview-item .item {
+/* .list-wrap .scrollview .scrollview-item .item {
 	display: flex;
 	margin: 0 24rpx 50rpx;
-}
+} */
 
-.list-wrap .scrollview .scrollview-item .item .avtar {
+/* .list-wrap .scrollview .scrollview-item .item .avtar {
 	display: flex;
 	width: 78rpx;
 	height: 78rpx;
 	border-radius: 50rpx;
 	overflow: hidden;
-}
+} */
 
-.list-wrap .scrollview .scrollview-item .item .content {
+/* .list-wrap .scrollview .scrollview-item .item .content {
 	position: relative;
 	max-width: 1050rpx;
 	background-color: #fff;
@@ -67,29 +75,29 @@
 	line-height: 42rpx;
 	padding: 24rpx;
 	word-wrap: break-word;
-}
+} */
 
-.list-wrap .scrollview .scrollview-item .other {
+/* .list-wrap .scrollview .scrollview-item .other {
 	justify-content: flex-end;
-}
+} */
 
 
 /* 底部发送框 */
-.chat-bottom {
+/* .chat-bottom {
 	height: 300rpx;
 	margin: 50rpx;
 	position: relative;
-}
+} */
 
-.chat-bottom .send-msg {
+/* .chat-bottom .send-msg {
 	display: flex;
 }
 
 .chat-bottom .send-msg .uni-textarea {
 	flex: 1;
-}
+} */
 
-.chat-bottom .send-msg .send-btn {
+/* .chat-bottom .send-msg .send-btn {
 	align-items: center;
 	justify-content: center;
 	width: 320rpx;
@@ -110,16 +118,16 @@
 	padding: 25rpx;
 	right: 50rpx;
 	background-color: #fff;
-}
+} */
 
-.chat-bottom .send-msg .uni-textarea textarea ::-webkit-scrollbar {
+/* .chat-bottom .send-msg .uni-textarea textarea ::-webkit-scrollbar {
 	display: none;
-}
+} */
 
 /* --- 左右两边占位调节、图片占位 --- */
-.sidebar-left {
+/* .sidebar-left {
 	width: 5%;
-}
+} */
 
 .sidebar-right {
 	width: 25%;
@@ -135,11 +143,11 @@
 }
 
 /* 去除导航条 */
-.scrollview ::-webkit-scrollbar {
+/* .scrollview ::-webkit-scrollbar {
 	display: none;
-}
+} */
 
 /* 聊天框数据加载 图标距离头像的间距 */
-.loadingPoint{
+/* .loadingPoint{
 	margin-right: 30px;
-}
+} */

theme/public.css

@@ -0,0 +1,154 @@
+/* 15寸和32寸 公共样式*/
+
+/* --- 标题 --- */
+.head {
+	display: flex;
+	height: 5vh;
+	text-align: end;
+	line-height: 5vh;
+	background-color: #f5f5f5;
+	font-size: 18px;
+	justify-content: center;
+}
+.head text{
+	flex: 1;
+}
+
+.head switch{
+	padding-right: 100rpx;
+	flex: 1;
+} 
+
+
+.pageView {
+	display: flex;
+	background-color: #f5f5f5;
+}
+
+.body {
+	display: flex;
+	flex-direction: column;
+}
+
+
+/* --- 主内容区 --- */
+.list-wrap {
+	flex-grow: 1;
+	position: relative;
+}
+
+.list-wrap .scrollview {
+	position: absolute;
+	height: 100%;
+}
+
+.list-wrap .scrollview .scrollview-item {
+	display: flex;
+	flex-direction: column;
+}
+
+.list-wrap .scrollview .scrollview-item .item {
+	display: flex;
+	margin: 0 24rpx 50rpx;
+}
+
+.list-wrap .scrollview .scrollview-item .item .avtar {
+	display: flex;
+	width: 78rpx;
+	height: 78rpx;
+	border-radius: 50rpx;
+	overflow: hidden;
+}
+
+.list-wrap .scrollview .scrollview-item .item .content {
+	position: relative;
+	max-width: 1050rpx;
+	background-color: #fff;
+	margin: 40rpx 24rpx 0;
+	border-radius: 5px;
+	font-size: 32rpx;
+	line-height: 42rpx;
+	padding: 24rpx;
+	word-wrap: break-word;
+}
+
+.list-wrap .scrollview .scrollview-item .other {
+	justify-content: flex-end;
+}
+
+/* 底部发送框 */
+.chat-bottom {
+	/* height: 300rpx; */
+	margin: 50rpx;
+	margin-left: 0;
+	position: relative;
+}
+
+/* 快捷标签输入 */
+.chat-bottom .uni-label{
+	display: flex;
+	height: 100rpx;
+	margin-bottom: 20rpx;
+}
+
+.chat-bottom .uni-label label{
+	flex: 1;
+	text-align: center;
+	line-height: 100rpx;
+	border-radius: 100rpx;
+	background-color: #fff;
+	margin-right: 10rpx;
+}
+
+.chat-bottom .send-msg {
+	display: flex;
+}
+
+.chat-bottom .send-msg .uni-textarea {
+	flex: 1;
+}
+
+.chat-bottom .send-msg .send-btn {
+	align-items: center;
+	justify-content: center;
+	width: 320rpx;
+	height: 320rpx;
+	border-radius: 50rpx;
+	font-size: 35rpx;
+	font-weight: 500;
+	color: #fff;
+	line-height: 320rpx;
+	z-index: 1;
+}
+
+.chat-bottom .send-msg .uni-textarea textarea {
+	width: 96%;
+	height: 270rpx;
+	border-radius: 40rpx;
+	line-height: 1.5;
+	padding: 25rpx;
+	right: 50rpx;
+	background-color: #fff;
+	margin-left: 50rpx;
+}
+
+.chat-bottom .send-msg .uni-textarea textarea ::-webkit-scrollbar {
+	display: none;
+}
+
+/* --- 左右两边占位调节、图片占位 --- */
+.sidebar-left {
+	width: 5%;
+}
+
+
+/* 去除导航条 */
+.scrollview ::-webkit-scrollbar {
+	display: none;
+}
+
+/* 聊天框数据加载 图标距离头像的间距 */
+.loadingPoint{
+	margin-right: 30px;
+}
+

until/fun.js

@@ -0,0 +1,121 @@
+/** 将15寸和32寸共同用到的 函数内容，封装成一个js文件 */ 
+	
+	
+	import {
+		nextTick,
+		reactive,
+		watch
+	} from 'vue';
+	import { getDataList } from '../api/ChatApp';
+	
+	
+	// 发送消息
+	const handleSend = async (msgList) => {
+		msgList.isClick = !msgList.isClick
+		const data = {
+			AppId: '0c8ff06b-91d9-43f7-b61e-ca5da1db15d4',
+			AId: 'TK1234',
+			content: ''
+		}
+		if (msgList.chatMsg != '') {
+			msgList.isloading[msgList.len] = true
+			msgList.len++
+			let obj = {
+				otherContent: '',
+				userContent: '',
+				image: ""
+			}
+			data.content = msgList.chatMsg
+			obj.userContent = msgList.chatMsg
+			msgList.chatList.push(obj)
+
+			obj.otherContent = await GetNewsList(msgList,data)
+
+			// await sleep(16000);
+			getChatContent(obj.otherContent, msgList.len)
+
+
+		}
+
+		msgList.otherContent = ''
+	}
+	
+	// 调用数据接口
+	const GetNewsList = async (msgList,data) => {
+		msgList.chatMsg = ''
+		var res = await getDataList(data)
+		console.log(res)
+		return res
+	}
+	
+	// 逐字显示内容
+	const getChatContent = ((msgList,text, index) => {
+		console.log(index)
+		msgList.timer = setInterval(() => {
+			msgList.textCount++;
+			if (msgList.textCount == text.length + 1) {
+				msgList.otherChatList[index - 1] = text;
+				clearInterval(msgList.timer);
+			} else {
+				// 取字符串子串
+				let nowStr = text.substring(0, msgList.textCount);
+				msgList.otherChatList[index - 1] = nowStr;
+			}
+	
+		}, 50);
+		console.log(msgList.timer)
+		msgList.textCount = 0
+		msgList.isloading[index - 1] = false
+		msgList.isClick = !msgList.isClick
+	})
+	
+	// 滚动条回到最底部
+	const scrollToBottom = ((msgList) => {
+		nextTick(() => {
+			const query = uni.createSelectorQuery();
+			query.select("#content-box").boundingClientRect()
+			query.select("#content-overflow").boundingClientRect()
+			query.exec(res => {
+				const scrollViewHeight = res[0].height
+				const scrollContentHeight = res[1].height
+				if (scrollViewHeight < scrollContentHeight) {
+					const scrollTop = scrollContentHeight - scrollViewHeight
+					msgList.scrollTop = scrollTop
+				}
+			})
+		})
+	})
+
+
+	// 背景颜色变换
+	const styleChange = ((styleData)=>{
+		styleData.value = !styleData.value
+		if(styleData.value == true){
+			styleData.color = "rgb(0,0,0,0.8)"
+			styleData.fontColor = "#fff"
+			styleData.btnColor = "#ccc"
+			styleData.contentColor = "rgb(0,0,0,0.5)"
+			styleData.labelColor = "rgb(105,105,105)"
+			
+		}else{
+			styleData.color = "#f5f5f5"
+			styleData.fontColor = "black"
+			styleData.btnColor = "rgb(30,144,255)"
+			styleData.contentColor = "#fff"
+			styleData.labelColor = "#fff"
+		}	
+		
+	})
+	
+	//快捷键输入
+	const shortcuts = ((msgList,item)=>{
+		msgList.chatMsg = item
+		handleSend(msgList)
+	})
+	
+	export {
+		handleSend,
+		styleChange,
+		scrollToBottom,
+		shortcuts
+	}