<template>
|
<view class="uni-panel-log-item">
|
|
<view v-if="msgData.date" class="msg-whichday">
|
<view class="line-whichday-icon" />
|
<view class="left-bubble-date">{{msgData.date}}
|
<text class="bottomLevel"></text>
|
<text class="topLevel"></text>
|
</view>
|
</view>
|
<view class="log-detail clearfix">
|
<view class="uni-panel-log-other">
|
<view class="uni-panel-log-other-left">
|
<image class="uni-panel-log-user-image" :src="msgData.imgurl" mode="widthFix"
|
@error="imageUserError"></image>
|
</view>
|
<view class="uni-panel-log-other-right">
|
<view class="uni-panel-log-header">
|
<view class="log-username">
|
{{msgData.CreatorName}}
|
</view>
|
<view class="log-time">
|
{{msgData.time}}
|
</view>
|
</view>
|
<view class="left-bubble-msg "
|
:style="(msgData.isMedia && msgData.mediaType=='video')?'background-color: transparent':''">
|
<view class="log-content ">
|
<view v-if="msgData.isMedia && msgData.mediaType=='audio'" class="voice" @click="playVoice">
|
<view style="font-size: 18px; margin-right: 8px;"
|
:class="[{'play-other':(playMsgid==msgData.ID )},'fu-shengyin','play-icon']"></view>
|
<view>{{msgData.mediaLen? msgData.mediaLen + "''" :""}}</view>
|
</view>
|
<view v-else-if="msgData.isMedia && msgData.mediaType=='video'"
|
style="border: 1px solid #ccc;border-radius: 5px;">
|
<jvideo :poster="msgData.mediaPoster" :url="msgData.mediaSrc"
|
:width="msgData.mediaWidth+ 'px'" :height="msgData.mediaHeight+ 'px'"
|
:len="msgData.mediaLenn || 0" @play="playVideo"></jvideo>
|
<!-- <video show-play-btn="false" class="msg-video" :id="msgData.ID" :style="{'width':msgData.mediaWidth+ 'px','height':msgData.mediaHeight+ 'px'}" :src="msgData.mediaSrc" :poster="msgData.mediaPoster" @play="videoPlay" @fullscreenchange="fullscreenchange" @error="videoErrorCallback" /> -->
|
</view>
|
<rich-text v-for="(item,index) in contentUrl" :key="index" preview="true" @click="previewImage"
|
:data-nodes="[item]" :nodes="[item]"></rich-text>
|
<!-- <rich-text v-else @click="previewImage" :data-nodes="contentUrl" :nodes="contentUrl" ></rich-text> -->
|
</view>
|
<text v-if="(!msgData.isMedia || msgData.mediaType !='video')" class="bottomLevel"></text>
|
<text v-if="(!msgData.isMedia || msgData.mediaType !='video')" class="topLevel"></text>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import TaskInit from "@/common/extend.js"
|
import parseHtml from "@/common/htmlParse.js"
|
import circleProgressBar from '@/components/circle-progress-bar/circle-progress-bar.vue'
|
import jvideo from '@/components/j-video.vue'
|
import {
|
DOMParser
|
} from "xmldom"
|
export default {
|
name: "LogItem",
|
components: {
|
circleProgressBar,
|
jvideo
|
},
|
emits: ['playVideo','playVoice', 'previewImage'],
|
props: {
|
msgData: {
|
type: Object,
|
default () {
|
return {};
|
}
|
},
|
playMsgid: {
|
type: String,
|
default () {
|
return "";
|
}
|
},
|
failedMsg: {
|
type: Boolean,
|
default () {
|
return false;
|
}
|
},
|
},
|
data() {
|
return {}
|
},
|
computed: {
|
//格式化内容
|
contentUrl() {
|
if (this.msgData.isMedia)
|
return []
|
|
let content = this.msgData.Content
|
if (content) {
|
let arContent = parseHtml(content)
|
if (arContent.length != 1) {
|
return arContent
|
}
|
if (arContent[0].name == "p") {
|
let childrens = arContent[0].children
|
return childrens
|
}
|
return arContent
|
} else
|
return []
|
},
|
//格式化易读日期
|
msgTime() {
|
let date = this.msgData.CreateTime
|
return TaskInit.dateUtils.openinfo_formatter_ttime(date, "notime")
|
}
|
},
|
onReady() {
|
|
},
|
methods: {
|
setData: function(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
imageUserError() {
|
this.msgData.imgurl = getApp().globalData.defaultuserphoto
|
},
|
/**
|
* 播放语音触发
|
*/
|
playVoice() {
|
this.$emit('playVoice', this.msgData)
|
},
|
/**
|
* 播放视频
|
*/
|
playVideo() {
|
this.$emit('playVideo', this.msgData)
|
},
|
/**
|
* 预览图片触发
|
*/
|
previewImage(e) {
|
let nodes = e.currentTarget.dataset.nodes;
|
console.log("previewImage", nodes)
|
let srcImg = this.getPreviewNodeImage(nodes)
|
let arrImg = [];
|
if (this.msgData.Content) {
|
let sDesc = this.msgData.Content
|
sDesc = sDesc.replace(/ /g, "")
|
console.log("previewImg", sDesc)
|
let xmlDoc = new DOMParser().parseFromString(sDesc, "text/xml");
|
let finds = xmlDoc.getElementsByTagName('img'); //获取find节点
|
for (let i = 0; i < finds.length; i++) { //循环节点
|
let finder = finds[i];
|
let src = finder.getAttribute("src")
|
if (src)
|
arrImg.push(src)
|
}
|
if (arrImg.length > 0) {
|
if (srcImg == "") {
|
srcImg = arrImg[0]
|
}
|
console.log("arrImg:", arrImg.length, arrImg)
|
uni.previewImage({
|
current: srcImg,
|
urls: arrImg,
|
})
|
return;
|
}
|
}
|
if (srcImg != "") {
|
uni.previewImage({
|
current: srcImg,
|
urls: [srcImg],
|
})
|
}
|
},
|
getPreviewNodeImage(nodes) {
|
console.log("previewNodeImage", nodes)
|
//遍历标签拼拿到你的图片的src里面的内容放在我们数组中
|
let srcImg = ""
|
for (var j = 0; j < nodes.length; j++) {
|
if (nodes[j].name == "p") {
|
if (nodes[j].children) {
|
srcImg = this.getPreviewNodeImage(nodes[j].children)
|
if (srcImg != "") {
|
break;
|
}
|
}
|
} else if (nodes[j].name == "img") {
|
srcImg = nodes[j].attrs.src;
|
if (srcImg != "") {
|
break;
|
}
|
}
|
}
|
return srcImg
|
},
|
|
videoErrorCallback(e) {
|
uni.showModal({
|
content: e.target.errMsg,
|
showCancel: false
|
})
|
},
|
videoPlay(e) {
|
console.log("videoPlay", e)
|
|
|
},
|
fullscreenchange(e) {
|
console.log("fullscreenchange", e)
|
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.uni-panel-log-item {
|
display: flex;
|
width: 100%;
|
background-color: transparent;
|
flex-direction: column !important;
|
padding-top: 8px;
|
padding-bottom: 8px;
|
|
&::before {
|
content: '';
|
position: absolute;
|
top: 0;
|
bottom: 0px;
|
width: 2px;
|
background: #a3d9e8;
|
left: 10px;
|
margin-left: -3px;
|
}
|
|
.msg-whichday {
|
display: flex;
|
margin: 5px 0;
|
padding-left: 30px;
|
background-color: transparent;
|
position: relative;
|
}
|
|
.line-whichday-icon {
|
position: absolute;
|
left: 10px;
|
margin-top: 25rpx;
|
margin-left: -6px;
|
text-decoration: none;
|
text-align: center;
|
line-height: 8px !important;
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
box-shadow: 0 0 0 4px #ffffff, inset 0 2px 0 rgb(0 0 0 / 8%), 0 3px 0 4px rgb(0 0 0 / 5%);
|
background-color: #a3d9e8;
|
}
|
|
.msg-whichday-text {
|
// justify-content: center;
|
padding: 2px 8px;
|
// margin: auto;
|
color: #fff;
|
// background-color: #ccc;
|
// border-radius: 4px;
|
}
|
|
.log-detail {
|
position: relative;
|
padding: 0 0 10px 10px;
|
}
|
|
.clearfix {
|
content: " ";
|
box-sizing: border-box;
|
}
|
|
.uni-panel-log-other {
|
padding: 2px 8px;
|
display: flex;
|
min-height: 36px;
|
}
|
|
|
.uni-panel-log-progress {
|
display: flex;
|
align-items: flex-end;
|
margin-right: 5px;
|
margin-bottom: 5px;
|
}
|
|
|
.uni-panel-log-header {
|
width: 100%;
|
height: 50rpx;
|
font-size: 24rpx;
|
padding: 0 10rpx;
|
color: #999;
|
display: flex;
|
flex-direction: row;
|
|
.log-username {
|
display: flex;
|
flex: 1;
|
|
}
|
|
}
|
|
.uni-panel-log-user-image {
|
width: 80rpx;
|
border-radius: 100%;
|
}
|
|
.uni-panel-log-other-left {
|
margin-right: 15rpx;
|
flex-shrink: 0;
|
width: 80rpx;
|
height: 80rpx;
|
}
|
|
.uni-panel-log-other-right {
|
flex-wrap: wrap;
|
display: flex;
|
width: 100%;
|
}
|
|
.uni-panel-log-wrong {
|
display: flex;
|
font-size: 14px;
|
color: #aa0000;
|
width: 20px;
|
height: 100%;
|
position: relative;
|
}
|
|
.uni-panel-log-wrong-ico {
|
position: absolute;
|
bottom: 5px;
|
}
|
|
.left-bubble-msg {
|
background-color: #fff;
|
color: #333;
|
max-width: calc(100% - 20rpx);
|
min-height: 50rpx;
|
border-radius: 10rpx;
|
padding: 15rpx 20rpx;
|
display: flex;
|
align-items: center;
|
font-size: 32rpx;
|
word-break: break-word;
|
position: relative;
|
|
.bottomLevel {
|
position: absolute;
|
bottom: calc(100% - 18px);
|
left: -14px;
|
border: 7px solid #ddd;
|
border-bottom: 7px solid transparent;
|
border-left: 7px solid transparent;
|
border-top: 7px solid transparent;
|
}
|
|
.topLevel {
|
position: absolute;
|
bottom: calc(100% - 18px);
|
left: -13px;
|
border: 7px solid #ffffff;
|
border-bottom: 7px solid transparent;
|
border-left: 7px solid transparent;
|
border-top: 7px solid transparent;
|
}
|
}
|
|
.left-bubble-date {
|
background-color: #2db7f5;
|
color: #fff;
|
border-radius: 30rpx;
|
padding: 15rpx 30rpx;
|
display: flex;
|
align-items: center;
|
font-size: 32rpx;
|
word-break: break-word;
|
position: relative;
|
|
.bottomLevel {
|
position: absolute;
|
left: -14px;
|
border: 7px solid #ddd;
|
border-bottom: 7px solid transparent;
|
border-left: 7px solid transparent;
|
border-top: 7px solid transparent;
|
}
|
|
.topLevel {
|
position: absolute;
|
left: -13px;
|
border: 7px solid #2db7f5;
|
border-bottom: 7px solid transparent;
|
border-left: 7px solid transparent;
|
border-top: 7px solid transparent;
|
}
|
}
|
|
|
|
|
.log-content {
|
line-height: 50rpx;
|
font-size: 14px;
|
user-select: text;
|
min-height: 50rpx;
|
min-width: 50rpx;
|
align-items: center;
|
word-break: break-word;
|
}
|
|
@keyframes my-play {
|
0% {
|
transform: translateX(80%);
|
}
|
|
100% {
|
transform: translateX(0%); // rotate(180deg)
|
}
|
}
|
|
.play-my::after {
|
width: 50rpx;
|
height: 50rpx;
|
border-radius: 100%;
|
box-sizing: border-box;
|
position: absolute;
|
border-left: solid 10rpx rgba(0, 170, 255, .8);
|
animation: my-play 1s linear infinite;
|
content: " ";
|
}
|
|
@keyframes other-play {
|
0% {
|
transform: translateX(-80%);
|
}
|
|
100% {
|
transform: translateX(0%);
|
}
|
}
|
|
.play-icon {
|
display: flex;
|
align-items: center;
|
}
|
|
.play-other::after {
|
width: 50rpx;
|
height: 50rpx;
|
border-radius: 100%;
|
box-sizing: border-box;
|
position: absolute;
|
content: " ";
|
border-right: solid 10rpx rgba(255, 255, 255, .8);
|
animation: other-play 1s linear infinite;
|
|
}
|
|
.voice {
|
display: flex;
|
flex-direction: row;
|
}
|
|
.msg-video {
|
max-width: 100%;
|
max-height: 450px;
|
}
|
}
|
</style>
|
