Skip to content

P
pica-admin-consultation
提交 3c2b7ac2 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

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:
  滚动添加节流
  上下翻页调接口
上级 238301ee 93adf98d
显示空白字符变更
内嵌 并排
正在显示 包含 143 行增加 和 76 行删除
src/views/IM/search-message/detail.vue
浏览文件 @ 3c2b7ac2
<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
浏览文件 @ 3c2b7ac2
......@@ -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: {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或