Merge branch 'dev-phase1-0111' of...

Merge branch 'dev-phase1-0111' of 192.168.110.53:com.pica.cloud.education.frontend/pica-admin-IM into dev-phase1-0111

* 'dev-phase1-0111' of 192.168.110.53:com.pica.cloud.education.frontend/pica-admin-IM:
  滚动添加节流
  上下翻页调接口

src/views/IM/search-message/detail.vue

 
 <template>
-	<!--  v-infinite-scroll="getDeatailData(0)" -->
+	<!--  v-infinite-scroll="getDeatailData(0)" getHistoryData(0)-->
   <div class="search-msg-detail">
     <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :jumPathThird="jumPathThird"></bread-crumb>
     <div class="detail-content">
-		<div v-loadmore="getHistoryData(0)">
-			<div id="screenSet" class="message-content scroll-box">
+		<div id="scroll-set">
 			<div v-for="(item, index) in detailData" :key="index">
 				<div class="split-line" v-if="item.sessionFlag">本次会话结束</div>
-					<div class="msg-container" :class="{'has-line': !item.sessionFlag}">
-						<div class="msg-item-img" v-if="item.content.bizType != -1">
+				<div v-if="item.content.bizType != -1" class="msg-container" :class="{'has-line': !item.sessionFlag}">
+					<div class="msg-item-img">
 						<img v-if="item.fromAccId == picakfAccId" src="../../../assets/image/IM/kf-avatar.png" alt />
 						<img v-else :src="userAvatar" />
 					</div>
 					<div class="msg-content">
-							<div class="info" v-if="item.content.bizType != -1">
+						<div class="info">
 							<span v-if="item.fromAccId == picakfAccId">客服</span>
 							<span v-else>{{userName}}</span>
 							<span class="mid-time">{{item.timestamp}}</span>	
@@ -51,7 +50,6 @@
 		</div>	
     </div>
   </div>
-  </div>
 </template>
 <script>
 import BreadCrumb from "@/components/breadcrumb.vue";
@@ -65,14 +63,14 @@ export default {
   },
   data() {
 		return {
-			hasSearchDate: true,
+			hasSearchDate: false,
 			jumPathThird: '/search-message-list',
 			curmbFirst:'消息查询',
 			curmbSecond:'消息详情',
 			picakfAccId: '',
 			lastMsgTime: '',
 			doctorAccId: '',
-			detailData: {},
+			detailData: [],
 			userAvatar: '',
 			userName: '',
 			scroll: true,
@@ -92,18 +90,93 @@ export default {
 		this.picakfAccId = getPicaKFAccid();
 	},
 	mounted() {
+		this.getDeatailData(1);
 		let _this = this;
-		this.$nextTick(() => {
+		setTimeout(() => {
+			let el = _this.getElmByID('scroll-set');
 			_this.containerHeight = _this.getElmByID('slidebar-container').getBoundingClientRect().height - 15;
-			_this.getElmByID('screenSet').style.height = _this.containerHeight - 152 + "px";
-			console.log('=======scrollHeight========',document.querySelector(".scroll-box").scrollHeight)
-		});
-		this.getDeatailData(1);
+			_this.getElmByID('scroll-set').style.height = _this.containerHeight - 152 + "px";
+			if(_this.hasSearchDate) { // 有查询日期 滚动条最顶部
+				el.scrollTop = 10;
+			}else { // 没有查询日期 滚动条最底部
+				el.scrollTop = el.scrollHeight;
+			}
+			let flag = true, timeoutId = null, downflag = true, downtimeoutId = null;
+			el.addEventListener('scroll', function() {
+				let allH, sh;
+				allH = el.scrollTop + el.clientHeight;
+				sh = el.scrollHeight;
+				if(el.scrollTop < 1 && _this.hasHistoryData) {
+					if(flag) {
+						flag = false;
+						timeoutId && clearTimeout(timeoutId);
+						timeoutId = setTimeout( () => {
+							_this.getHistoryData(0);
+							flag = true;
+						}, 150)
+					}
+				}
+				if((sh - allH < 1) && _this.hasForwardData && _this.hasSearchDate) {
+					if(downflag) {
+						downflag = false;
+						downtimeoutId && clearTimeout(downtimeoutId);
+						downtimeoutId = setTimeout( () => {
+							_this.getDeatailData(0);
+							downflag = true;
+						}, 150)
+					}
+				}
+			})
+			 
+
+			
+			// if(_this.hasSearchDate) { // 有查询日期 滚动条最顶部
+			// 	el.scrollTop = 10;
+			// 	let flag = true, timeoutId = null;
+			// 	el.addEventListener('scroll', function() {
+			// 		let allH, sh;
+			// 		allH = el.scrollTop + el.clientHeight;
+			// 		sh = el.scrollHeight;
+			// 		if(el.scrollTop < 1 && _this.hasHistoryData) {
+			// 			if(flag) {
+			// 				flag = false;
+			// 				timeoutId && clearTimeout(timeoutId);
+			// 				timeoutId = setTimeout( () => {
+			// 					_this.getHistoryData(0);
+			// 					flag = true;
+			// 				}, 150)
+			// 			}
+			// 		}
+			// 		if((sh - allH < 1) && _this.hasForwardData) {
+			// 			if(flag) {
+			// 				flag = false;
+			// 				timeoutId && clearTimeout(timeoutId);
+			// 				timeoutId = setTimeout( () => {
+			// 					_this.getDeatailData(0);
+			// 					flag = true;
+			// 				}, 150)
+			// 			}
 						
-		// let el = document.querySelector(".scroll-box");
-		// if(this.hasSearchDate) {
-		// 	el.scrollTop = el.scrollHeight - 100;
 			// 		}
+					
+			// 	})
+			// }else { // 没有查询日期 滚动条最底部
+			// 	el.scrollTop = el.scrollHeight;
+			// 	let flag = true, timeoutId = null;
+			// 	el.addEventListener('scroll', function() {
+			// 		if(el.scrollTop < 1 && _this.hasHistoryData) {
+			// 			if(flag) {
+			// 				flag = false;
+			// 				timeoutId && clearTimeout(timeoutId);
+			// 				timeoutId = setTimeout( () => {
+			// 					_this.getHistoryData(0);
+			// 					flag = true;
+			// 				}, 150)
+			// 			}	
+			// 		}
+			// 	})
+			// }	
+		},100);	
 	},
   	methods: {
 		// 获取元素
@@ -112,7 +185,6 @@ export default {
 		},
 		// 获取详情数据以及下拉加载历史数据
 		getDeatailData(param) {
-			if(!this.hasForwardData) return;
 			let url = '/im/msg/forward';
 			let req = {
 				doctorAccId: this.doctorAccId,
@@ -124,32 +196,27 @@ export default {
 			}
 			this.POST(url, req).then((res) => {
 				if(res.code == '000000') {
+					let arr = [];
 					this.historyTime = res.data[0].timestamp;
-					if(param == 1) {
-						this.detailData = this.dataconcatHandle(res.data);
-					}else {
 					if(res.data.length > 0) {
 						this.hasForwardData = true;
 						this.lastMsgTime = res.data[res.data.length - 1].timestamp;
-							let arr = res.data;
+						arr = this.dataconcatHandle(res.data);
 						this.detailData.push(...arr);
-							this.detailData = this.dataconcatHandle(this.detailData);
 					}else {
 						this.hasForwardData = false;
 					}
-					}
-					if(this.hasSearchDate) { // 查询条件不包含日期
-						this.$nextTick(() => {
-							var element = document.querySelector(".scroll-box");
-							element.scrollTop = element.scrollHeight;
-						});
-					}
+					// if(this.hasSearchDate) { // 查询条件不包含日期
+					// 	this.$nextTick(() => {
+					// 		var element = document.querySelector(".scroll-box");
+					// 		element.scrollTop = element.scrollHeight;
+					// 	});
+					// }
 				}
 			})
 		},
 		// 上翻查看最新消息
 		getHistoryData(param) {
-			if(!this.hasHistoryData) return;
  			let url = '/im/msg/history';
 			let req = {
 				doctorAccId: this.doctorAccId,
@@ -167,10 +234,10 @@ export default {
 						let arr = res.data;
 						this.detailData.unshift(...arr);
 						this.detailData = this.dataconcatHandle(this.detailData);
-						this.$nextTick(() => {
-							const scrollBoxDom = document.querySelector(".scroll-box");
-							scrollBoxDom.scrollTop = 1000;
-						});
+						setTimeout(() => {
+							const scrollBoxDom = document.getElementById("scroll-set");
+							scrollBoxDom.scrollTop = 200;
+						},100);
 					}else {
 						this.hasHistoryData = false;
 					}
@@ -218,7 +285,7 @@ export default {
 		margin: 80px 20px 0;
 		padding: 0 20px;
 		background: #fff;
-		.message-content {
+		#scroll-set {
 			overflow: scroll;
 		}
 		.split-line {

src/views/IM/search-message/list.vue

@@ -88,7 +88,7 @@ export default {
       totalRows: 0,
       tableData: [],
       loading: false,
-      hasSearchDate: true  // 查询条件不包含日期
+      hasSearchDate: false  // 查询条件不包含日期
     };
   },
   computed: {},
@@ -131,7 +131,7 @@ export default {
 
     // 查看消息详情
     edit(row) {
-      if(this.searchParam.chooseDate) this.hasSearchDate = false;
+      if(this.searchParam.chooseDate) this.hasSearchDate = true;
       this.$router.push({
         path: `/search-message-detail`,
         query: {