Skip to content

P
pica-admin-IM
提交 89936c07 编写于 作者: huangwensu's avatar huangwensu
浏览文件
操作

上下翻页调接口

上级 9b0b64ed
隐藏空白字符变更
内嵌 并排
正在显示 包含 81 行增加 和 73 行删除
src/views/IM/search-message/detail.vue
浏览文件 @ 89936c07
<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 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">
<img v-if="item.fromAccId == picakfAccId" src="../../../assets/image/IM/kf-avatar.png" alt />
<img v-else :src="userAvatar" />
<div id="scroll-set">
<div v-for="(item, index) in detailData" :key="index">
<div class="split-line" v-if="item.sessionFlag">本次会话结束</div>
<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">
<span v-if="item.fromAccId == picakfAccId">客服</span>
<span v-else>{{userName}}</span>
<span class="mid-time">{{item.timestamp}}</span>
</div>
<div class="msg-content">
<div class="info" v-if="item.content.bizType != -1">
<span v-if="item.fromAccId == picakfAccId">客服</span>
<span v-else>{{userName}}</span>
<span class="mid-time">{{item.timestamp}}</span>
</div>
<div v-if="item.type == 'TEXT'" class="text-content">
<div>{{item.content}}</div>
</div>
<div v-if="item.type == 'PICTURE'" class="img-content" v-viewer>
<img :src="item.content.url" />
</div>
<div v-if="item.type == 'CUSTOM'">
<div v-if="item.content.bizType == 18" class="file-content">
<div class="file-con" @click="downPDF(item.content.url)">
<div class="file-left">
<span class="name">{{item.content.name}}</span>
<span class="size">{{fileSizeChange(item.content.size)}}</span>
</div>
<div class="file-right">
<img src="../../../assets/image/IM/icon-pdf.png" alt />
</div>
<div v-if="item.type == 'TEXT'" class="text-content">
<div>{{item.content}}</div>
</div>
<div v-if="item.type == 'PICTURE'" class="img-content" v-viewer>
<img :src="item.content.url" />
</div>
<div v-if="item.type == 'CUSTOM'">
<div v-if="item.content.bizType == 18" class="file-content">
<div class="file-con" @click="downPDF(item.content.url)">
<div class="file-left">
<span class="name">{{item.content.name}}</span>
<span class="size">{{fileSizeChange(item.content.size)}}</span>
</div>
<div class="file-right">
<img src="../../../assets/image/IM/icon-pdf.png" alt />
</div>
</div>
<div v-if="item.content.bizType == 19" class="link-content">
<div class="link-text">{{item.content.content}}</div>
</div>
<div v-if="item.content.bizType != -1 && item.content.bizType != 19 && item.content.bizType != 18" class="text-content pc-no-support">
<img src="../../../assets/image/IM/icon-warning-circle.png" alt />
<span>该消息类型PC端暂不支持</span>
</div>
</div>
<div v-if="item.content.bizType == 19" class="link-content">
<div class="link-text">{{item.content.content}}</div>
</div>
<div v-if="item.content.bizType != -1 && item.content.bizType != 19 && item.content.bizType != 18" class="text-content pc-no-support">
<img src="../../../assets/image/IM/icon-warning-circle.png" alt />
<span>该消息类型PC端暂不支持</span>
</div>
</div>
</div>
......@@ -72,7 +70,7 @@ export default {
picakfAccId: '',
lastMsgTime: '',
doctorAccId: '',
detailData: {},
detailData: [],
userAvatar: '',
userName: '',
scroll: true,
......@@ -92,18 +90,34 @@ 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);
// let el = document.querySelector(".scroll-box");
// if(this.hasSearchDate) {
// el.scrollTop = el.scrollHeight - 100;
// }
_this.getElmByID('scroll-set').style.height = _this.containerHeight - 152 + "px";
if(_this.hasSearchDate) { // 有查询日期 滚动条最顶部
el.scrollTop = 10;
el.addEventListener('scroll', function() {
let allH, sh;
allH = el.scrollTop + el.clientHeight;
sh = el.scrollHeight;
if(el.scrollTop < 1 && _this.hasHistoryData) {
_this.getHistoryData(0);
}
if((sh - allH <= 1) && _this.hasForwardData) {
_this.getDeatailData(0);
}
})
}else {
el.scrollTop = el.scrollHeight;
el.addEventListener('scroll', function() {
if(el.scrollTop < 5 && _this.hasHistoryData) {
_this.getHistoryData(0);
}
})
}
},100);
},
methods: {
// 获取元素
......@@ -112,7 +126,6 @@ export default {
},
// 获取详情数据以及下拉加载历史数据
getDeatailData(param) {
if(!this.hasForwardData) return;
let url = '/im/msg/forward';
let req = {
doctorAccId: this.doctorAccId,
......@@ -124,32 +137,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);
if(res.data.length > 0) {
this.hasForwardData = true;
this.lastMsgTime = res.data[res.data.length - 1].timestamp;
arr = this.dataconcatHandle(res.data);
this.detailData.push(...arr);
}else {
if(res.data.length > 0) {
this.hasForwardData = true;
this.lastMsgTime = res.data[res.data.length - 1].timestamp;
let arr = 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;
});
this.hasForwardData = false;
}
// 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 +175,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 +226,7 @@ export default {
margin: 80px 20px 0;
padding: 0 20px;
background: #fff;
.message-content {
#scroll-set {
overflow: scroll;
}
.split-line {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或