Skip to content

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

会话结束样式

上级 169b1f7d
隐藏空白字符变更
内嵌 并排
正在显示 包含 123 行增加 和 45 行删除
src/views/IM/chain-history/detail.vue
浏览文件 @ 33547c92
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb> <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="component-content screenSet" id="screenSet"> <div class="component-content screenSet" id="screenSet">
<div class="title">群发标题：<span>{{detailData.title}}</span></div> <div class="title">群发标题：<span>{{detailData.title}}</span></div>
<div class="user-list">目标用户：<span>{{detailData.fileName}}</span></div> <div class="user-list">目标用户：<span @click="downFile">{{detailData.fileName}}</span></div>
<div class="msg-container" v-for="(item, index) in detailData.contentModelList" :key="index"> <div class="msg-container" v-for="(item, index) in detailData.contentModelList" :key="index">
<div v-if="item.type == 0" class="text-content"> <div v-if="item.type == 0" class="text-content">
<div>{{item.info}}</div> <div>{{item.info}}</div>
...@@ -70,6 +70,12 @@ export default { ...@@ -70,6 +70,12 @@ export default {
} }
}); });
}, },
// 下载目标文件
downFile() {
let a = document.createElement('a');
a.setAttribute('href', this.detailData.fileUrl);
a.click();
}
} }
}; };
</script> </script>
......
src/views/IM/search-message/detail.vue
浏览文件 @ 33547c92
...@@ -2,42 +2,51 @@ ...@@ -2,42 +2,51 @@
<template> <template>
<div class="search-msg-detail"> <div class="search-msg-detail">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :jumPathThird="jumPathThird"></bread-crumb> <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :jumPathThird="jumPathThird"></bread-crumb>
<div ref="msg-container" class="detail-content screenSet" id="screenSet"> <div class="detail-content screenSet" id="screenSet">
<div class="msg-container" v-for="(item, index) in detailData" :key="index"> <div class="scroll-box" v-loadmore="getHistoryData(0)">
<div class="msg-item-img"> <div v-for="(item, index) in detailData" :key="index">
<img v-if="item.fromAccId == picakfAccId" src="../../../assets/image/IM/kf-avatar.png" alt /> <div class="split-line" v-if="item.sessionFlag">本次会话结束</div>
<img v-else :src="userAvatar" /> <div class="msg-container" :class="{'has-line': !item.sessionFlag}">
</div> <div class="msg-item-img">
<div class="msg-content"> <img v-if="item.fromAccId == picakfAccId" src="../../../assets/image/IM/kf-avatar.png" alt />
<div class="info"> <img v-else :src="userAvatar" />
<span v-if="item.fromAccId == picakfAccId">客服</span> </div>
<span v-else>{{userName}}</span> <div class="msg-content">
<span class="mid-time">{{timeChange(item.timestamp)}}</span> <div class="info">
</div> <span v-if="item.fromAccId == picakfAccId">客服</span>
<div v-if="item.type == 'TEXT'" class="text-content"> <span v-else>{{userName}}</span>
<div>{{item.content}}</div> <span class="mid-time">{{item.timestamp}}</span>
</div> </div>
<div v-if="item.type == 'PICTURE'" class="img-content" v-viewer> <div v-if="item.type == 'TEXT'" class="text-content">
<img :src="typeChange(item.content).url" /> <div>{{item.content}}</div>
</div> </div>
<div v-if="item.type == 'CUSTOM'"> <div v-if="item.type == 'PICTURE'" class="img-content" v-viewer>
<div v-if="typeChange(item.content).bizType == 18" class="file-content"> <img :src="item.content.url" />
<div class="file-con" @click="downPDF(typeChange(item.content).url)"> </div>
<div class="file-left"> <div v-if="item.type == 'CUSTOM'">
<span class="name">{{typeChange(item.content).name}}</span> <div v-if="item.content.bizType == 18" class="file-content">
<span class="size">{{fileSizeChange(typeChange(item.content).size)}}</span> <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> </div>
<div class="file-right"> <div v-if="item.content.bizType == 19" class="link-content">
<img src="../../../assets/image/IM/icon-pdf.png" alt /> <div class="link-text">{{item.content.content}}</div>
</div>
<div v-if="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> </div>
</div> </div>
<div v-if="typeChange(item.content).bizType == 19" class="link-content">
<div class="link-text">{{typeChange(item.content).content}}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
...@@ -46,6 +55,7 @@ import BreadCrumb from "@/components/breadcrumb.vue"; ...@@ -46,6 +55,7 @@ import BreadCrumb from "@/components/breadcrumb.vue";
import { doUpload, getFilePath } from "@/utils/qiniu-util"; import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, betaHandle, timeHandle } from "@/utils/utils"; import { openLoading, closeLoading, betaHandle, timeHandle } from "@/utils/utils";
import { getPicaKFAccid } from "@/utils"; import { getPicaKFAccid } from "@/utils";
import * as commonUtil from "@/utils/utils";
export default { export default {
components: { components: {
BreadCrumb BreadCrumb
...@@ -62,7 +72,9 @@ export default { ...@@ -62,7 +72,9 @@ export default {
userAvatar: '', userAvatar: '',
userName: '', userName: '',
scroll: true, scroll: true,
ele: '' ele: '',
topFlag: false,
hasHistoryData: true,
}; };
}, },
created() { created() {
...@@ -72,10 +84,9 @@ export default { ...@@ -72,10 +84,9 @@ export default {
this.userName = this.$route.query.userName; this.userName = this.$route.query.userName;
}, },
mounted() { mounted() {
commonUtil.resizeHeight();
this.picakfAccId = getPicaKFAccid(); this.picakfAccId = getPicaKFAccid();
this.getDeatailData(1); this.getDeatailData(1);
//this.getHistoryData(0);
}, },
methods: { methods: {
// 获取详情数据以及下拉加载历史数据 // 获取详情数据以及下拉加载历史数据
...@@ -91,13 +102,14 @@ export default { ...@@ -91,13 +102,14 @@ export default {
} }
this.POST(url, req).then((res) => { this.POST(url, req).then((res) => {
if(res.code == '000000') { if(res.code == '000000') {
this.detailData = res.data; this.detailData = this.dataconcatHandle(res.data);
} }
}) })
}, },
// 上翻查看最新消息 // 上翻查看最新消息
getHistoryData(param) { getHistoryData(param) {
let url = '/im/msg/history'; if(!this.hasHistoryData) return;
let url = '/im/msg/history';
let req = { let req = {
doctorAccId: this.doctorAccId, doctorAccId: this.doctorAccId,
includeFlag: param, includeFlag: param,
...@@ -108,19 +120,45 @@ export default { ...@@ -108,19 +120,45 @@ export default {
} }
this.POST(url, req).then((res) => { this.POST(url, req).then((res) => {
if(res.code == '000000') { if(res.code == '000000') {
this.detailData = res.data.reverse(); if(res.data.length > 0) {
this.hasHistoryData = true;
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;
});
}else {
this.hasHistoryData = false;
}
} }
}) })
}, },
// 数据合并转换
dataconcatHandle(data) {
let currentTaskId = '';
data.forEach((element, index) => {
element.timestamp = this.timeChange(element.timestamp);
element.sessionFlag = false;
if(index > 0) {
currentTaskId = data[index - 1].taskLogId;
if(element.taskLogId !== currentTaskId) {
element.sessionFlag = true;
}
}
this.$set(element, index, 'sessionFlag');
console.log("=================",data)
if(element.type == 'CUSTOM') {
element.content = JSON.parse(element.content);
}
});
return data;
},
// 时间格式转换 // 时间格式转换
timeChange(data) { timeChange(data) {
return timeHandle(data) return timeHandle(data)
}, },
// PDF和链接类型处理
typeChange(data) {
let obj = JSON.parse(data);
return obj;
},
// 文件大小单位转换 // 文件大小单位转换
fileSizeChange(val) { fileSizeChange(val) {
return betaHandle(val) return betaHandle(val)
...@@ -138,10 +176,34 @@ export default { ...@@ -138,10 +176,34 @@ export default {
.detail-content { .detail-content {
padding: 0 20px; padding: 0 20px;
background: #fff; background: #fff;
.split-line {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin: 15px 0;
font-size: 14px;
color: #999999;
&::before {
flex: 1;
content: '';
height: 1px;
margin-right: 18px;
background: #f0f1f2;
}
&::after {
flex: 1;
content: '';
height: 1px;
margin-left: 18px;
background: #f0f1f2;
}
}
.msg-container { .msg-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-top: 12px; padding-top: 12px;
border: none;
.msg-item-img { .msg-item-img {
width: 32px; width: 32px;
height: 32px; height: 32px;
...@@ -161,11 +223,19 @@ export default { ...@@ -161,11 +223,19 @@ export default {
.text-content { .text-content {
padding: 16px 0; padding: 16px 0;
color: #333333; color: #333333;
border-bottom: 1px solid #F0F1F2; //border-bottom: 1px solid #F0F1F2;
}
.text-content.pc-no-support {
img {
float: left;
padding-top: 3px;
padding-right: 5px;
width: 14px;
height: 14px;
}
} }
.img-content { .img-content {
padding: 16px 0; padding: 16px 0;
border-bottom: 1px solid #F0F1F2;
cursor: pointer; cursor: pointer;
& > img { & > img {
width: 170px; width: 170px;
...@@ -175,7 +245,6 @@ export default { ...@@ -175,7 +245,6 @@ export default {
} }
.file-content { .file-content {
padding: 16px 0; padding: 16px 0;
border-bottom: 1px solid #F0F1F2;
.file-con { .file-con {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -216,6 +285,9 @@ export default { ...@@ -216,6 +285,9 @@ export default {
} }
} }
} }
.msg-container.has-line {
border-bottom: 1px solid #F0F1F2;
}
} }
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或