chat/src/components/index.vue

@@ -127,7 +127,7 @@
 				<!-- 人工会话模版 -->
 				<div v-if="link_success">
 					<!--历史消息-->
-					<div v-if="showHistory" v-for="item in hisSviceChat">
+					<div v-if="showHistory" v-for="(item, index) in hisSviceChat" :key="index">
 						<!-- 客服信息 -->
 						<div v-if="item.from_id.startsWith('KF')">
 							<div style="width: 100%;text-align: center;">
@@ -365,6 +365,7 @@
 						placeholder="请输入你的问题："
 						maxlength="450"
 						@keyup ='keyup_maxlength()'
+						@focus="keyup_maxlength()"
 						 :style="{height:iboxheight}" 
 				>
 				</textarea>
@@ -554,11 +555,22 @@
 				comtSuccess:false,
 				hisLength:0,
 				trueImg:false,
+				innerHeight: 0, // 可视区域高度，不包括键盘
+				areaHeight: 0, // textarea高度
 			};
 		},
+		created() {
+			this.getInnerHeight();
+		},
 		// 方法
 		methods: {
-			// 退出聊天
+			// 获取初始的可视高度
+			getInnerHeight() {
+				console.log('当前高度：', window.innerHeight)
+				this.innerHeight = window.innerHeight;
+			},
+			// 光标
+			// // 退出聊天
 			is_exit() {
 				this.webTime = ''
 				this.socket_send(JSON.stringify({
@@ -1286,12 +1298,22 @@
 			scrollMain() {
 				let main = document.getElementById('main')
 				let footer = document.getElementById('input_box')
+				main.style.bottom = 0;
 				main.style.paddingBottom = (footer.offsetHeight - 30) + 'px'
 			},
-			/** 监听滚动高度，并给textarea高度赋值*/
+			/** 监听输入框滚动高度，并给textarea高度赋值*/
 			keyup_maxlength(){
 				let area = document.getElementById('textarea')
+				this.areaHeight = area.scrollHeight > 36 ? area.scrollHeight : 36;
+				let main = document.getElementById('main')
 				this.makeExpandingArea(area)
+				console.log('screen:', window.screen.height, 'inner:', window.innerHeight)
+				// main.style.bottom = this.needScrollTop + 'px'
+				// console.log('foucus', this.needScrollTop)
+				// this.automaticRolling();
+			},
+			focus_maxlength() {
+				this.automaticRolling();
 			},
 			/** 兼容处理 */
 			makeExpandingArea(el) {
@@ -1550,7 +1572,17 @@
 			},
 			iboxheight(){
 				return this.ibox_height;
-			}
+			},
+			// 需要额外滚动的高度，大小为键盘高度加上输入框的高度
+			needScrollTop: function () {
+				if(this.innerHeight > 0) {
+					// return (this.innerHeight > window.innerHeight ? this.innerHeight : innerHeight ) 
+					// - window.innerHeight + this.areaHeight -36
+					return window.screen.height - window.innerHeight + this.areaHeight -36
+				} else {
+					return 0;
+				}
+			},
 		},
 		// 监听
 		watch: {},
@@ -1663,6 +1695,8 @@
 	}
 
 	.main {
+		position: relative;
+		box-sizing: border-box;
 		height: 83vh;
 		overflow-x: hidden;
 		overflow-y: auto;