<template>
|
<div class="body">
|
<div :style="pageConfig.width | setWidth">
|
<div class="web__main" ref="main">
|
<div
|
class="web__main-item"
|
v-for="(item, index) in list"
|
:key="loding(index)"
|
:class="{ 'web__main-item--mine': item.mine }"
|
>
|
<div class="web__main_content">
|
<div>
|
<img :src="item.img" />
|
</div>
|
<div class="web__main_Date">
|
<div>
|
<cite>
|
<div style="display: flex">
|
{{ item.name }}
|
|
<div style="margin-left: 10px" v-show="item.file">
|
<el-select
|
@change="(val) => setFileChange(val)"
|
v-model="item.file"
|
size="mini"
|
>
|
<el-option
|
v-for="(res, key) in item.fileList"
|
:key="key"
|
:label="res.name"
|
:value="res.url"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
|
<div>
|
{{ item.date }}
|
</div>
|
</cite>
|
</div>
|
<div v-show="item.markDown == true" class="web__main-text">
|
<VueMarkdown
|
class="web_Main_markDown"
|
:source="item.text.text"
|
></VueMarkdown>
|
</div>
|
<div v-show="item.markDown == false" class="web__main-text">
|
<div class="web__main-arrow"></div>
|
<span
|
v-html="handleDetail(item.text.text)"
|
ref="content"
|
></span>
|
<ul class="web__main-list" v-if="item.text.list">
|
<li
|
@click="handleItemMsg(citem)"
|
v-for="(citem, cindex) in item.text.list"
|
:key="cindex"
|
>
|
{{ citem.text }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog
|
:visible.sync="show"
|
width="40%"
|
append-to-body
|
:before-close="handleClose"
|
class="web__dialog"
|
>
|
<img :src="imgSrc" v-if="imgSrc" style="width: 100%; object-fit: cover" />
|
<video
|
:src="videoSrc"
|
v-if="videoSrc"
|
style="width: 100%; object-fit: cover"
|
controls="controls"
|
></video>
|
<audio
|
:src="audioSrc"
|
v-if="audioSrc"
|
style="width: 100%; object-fit: cover"
|
controls="controls"
|
></audio>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import emojiParser from "wechat-emoji-parser";
|
|
import VueMarkdown from "vue-markdown";
|
|
import axios from "axios";
|
import bus from "../../assets/js/bus";
|
export default {
|
name: "JwChat_list",
|
arr: [],
|
components: {
|
VueMarkdown
|
},
|
filters: {
|
setWidth(value) {
|
let width = value;
|
if (`${value}`.match(/^\d+$/)) {
|
width = value-30 + "px";
|
}
|
if(width=="100vh"){
|
return "99vh"
|
}
|
return width;
|
}
|
},
|
props: {
|
pageConfig: {
|
type: Object,
|
default: () => ({
|
width: "100vw"
|
})
|
},
|
list: {
|
type: Array,
|
default: () => []
|
}
|
},
|
data() {
|
return {
|
load: false,
|
show: false,
|
imgSrc: "",
|
videoSrc: "",
|
audioSrc: ""
|
};
|
},
|
watch: {
|
load(newval) {
|
if (newval) {
|
this.$emit("load", true);
|
this.$nextTick(() => {
|
this.load = false;
|
});
|
}
|
}
|
},
|
methods: {
|
setFileChange(res) {
|
if (res == "testUrl") return;
|
axios.get(res).then((response) => {
|
if (response.status == 200) {
|
bus.$emit("setInsertMarkDown", response.data);
|
}
|
});
|
},
|
loding(index) {
|
const size = this.list.length;
|
if (index == size - 1) {
|
setTimeout(() => {
|
this.load = true;
|
}, 200);
|
}
|
return index;
|
},
|
//处理排版
|
handleDetail(html = "") {
|
// console.log(html)
|
let result = html;
|
result = emojiParser(result).replace(
|
/(<img src)/g,
|
'<img data-class="iconBox" data-src'
|
);
|
setTimeout(() => {
|
const list = this.$refs.content;
|
list.forEach((ele) => {
|
for (let i = 0; i < ele.children.length; i++) {
|
const child = ele.children[i];
|
if (child.getAttribute("data-flag") != 0) {
|
child.setAttribute("data-flag", 0);
|
child.onclick = () => {
|
this.handleEvent(child);
|
};
|
if (child.tagName === "IMG") {
|
child.className = "web__msg--img";
|
const icon = child.getAttribute("data-class");
|
if (icon !== "iconBox") child.type = "IMG";
|
child.src = child.getAttribute("data-src");
|
} else if (child.tagName === "VIDEO") {
|
child.type = "VIDEO";
|
child.className = "web__msg--video";
|
child.src = child.getAttribute("data-src");
|
} else if (child.tagName === "AUDIO") {
|
child.type = "AUDIO";
|
child.className = "web__msg--audio";
|
child.controls = "controls";
|
child.src = child.getAttribute("data-src");
|
} else if (child.tagName === "FILE") {
|
child.type = "FILE";
|
child.className = "web__msg--file";
|
child.innerHTML = `<h2>File</h2><span>${child.getAttribute(
|
"data-name"
|
)}</span>`;
|
} else if (child.tagName === "MAP") {
|
child.type = "MAP";
|
child.className = "web__msg--file web__msg--map";
|
child.innerHTML = `<h2>Map</h2><span>${child.getAttribute(
|
"data-longitude"
|
)} , ${child.getAttribute(
|
"data-latitude"
|
)}<br />${child.getAttribute("data-address")}</span>`;
|
}
|
}
|
}
|
});
|
}, 0);
|
return result;
|
},
|
//处理事件
|
handleEvent(params) {
|
const callback = () => {
|
if (params.type === "IMG") {
|
this.imgSrc = params.src;
|
this.show = true;
|
} else if (params.type === "VIDEO") {
|
this.videoSrc = params.src;
|
this.show = true;
|
} else if (params.type === "AUDIO") {
|
this.audioSrc = params.src;
|
this.show = true;
|
} else if (params.type === "FILE") {
|
window.open(params.src);
|
}
|
};
|
if (typeof this.beforeOpen === "function") {
|
this.beforeOpen(params, callback);
|
} else {
|
callback();
|
}
|
},
|
handleClose(done) {
|
this.imgSrc = undefined;
|
this.videoSrc = undefined;
|
this.audioSrc = undefined;
|
done();
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.web__msg--img,
|
.web__msg--video,
|
.web__msg--file {
|
position: relative;
|
max-width: 700px;
|
min-width: 500px;
|
width: 100%;
|
margin: 10px 0;
|
border: 1px solid #eee;
|
overflow: hidden;
|
border-radius: 5px;
|
cursor: pointer;
|
display: block;
|
}
|
.web__msg--img[data-class="iconBox"] {
|
max-width: 24px;
|
min-width: unset;
|
border: none;
|
margin: 0;
|
vertical-align: bottom;
|
display: inline-block;
|
}
|
</style>
|
<style scoped>
|
.web__main-item {
|
position: relative;
|
font-size: 0;
|
margin-bottom: 30px;
|
/* padding-left: 60px; */
|
min-height: 68px;
|
text-align: left;
|
}
|
|
.web__main-user,
|
.web__main-text {
|
display: inline-block;
|
/* @css { * }display: inline;
|
@css { * }zoom: 1; */
|
vertical-align: top;
|
font-size: 20px;
|
background: #555555;
|
padding: 10px !important;
|
border-radius:10px !important;
|
margin-top:10px ;
|
|
}
|
|
.web__main-user {
|
width: 100%;
|
/* position: absolute; */
|
left: 3px;
|
}
|
|
.web__main-user img {
|
width: 40px;
|
height: 40px;
|
border-radius: 100%;
|
}
|
|
.web__main-user cite {
|
/* position: absolute; */
|
/* left: 60px;
|
top: -2px; */
|
line-height: 24px;
|
font-size: 18px;
|
white-space: nowrap;
|
color: #999;
|
text-align: left;
|
font-style: normal;
|
width: 100%;
|
font-family: "Arial", sans-serif;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.web__main-user cite i {
|
padding-left: 0px;
|
font-style: normal;
|
}
|
.citeTitle {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
}
|
.web__main-text {
|
/* max-width: 40%; */
|
width: 100%;
|
position: relative;
|
line-height: 22px;
|
/* margin-top: 25px; */
|
padding: 8px 0px;
|
/* background-color: #f3f3f3; */
|
border-radius: 3px;
|
/* border: 1px solid #f0f0f0; */
|
color: #f2f2f2;
|
font-family: "Arial", sans-serif;
|
font-size: 16px;
|
word-break: break-all;
|
}
|
.web__main_content {
|
width: calc(100% - 50px);
|
padding: 10px 0px;
|
display: flex;
|
}
|
.web__main_Date {
|
flex: 1;
|
padding: 0px 15px;
|
}
|
.web__main_Date cite {
|
line-height: 24px;
|
font-size: 14px;
|
white-space: nowrap;
|
color: #f2f2f2;
|
text-align: left;
|
font-style: normal;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
}
|
.web__main-arrow {
|
top: 6px;
|
left: -8px;
|
position: absolute;
|
display: block;
|
width: 0;
|
height: 0;
|
border-color: transparent;
|
border-style: solid;
|
border-width: 8px;
|
border-left-width: 0;
|
/* border-right-color: #ebeef5; */
|
font-family: Microsoft YaHei;
|
}
|
|
.web__main-arrow::after {
|
content: " ";
|
top: -7px;
|
left: 1px;
|
position: absolute;
|
display: block;
|
width: 0;
|
height: 0;
|
border-color: transparent;
|
border-style: solid;
|
border-width: 7px;
|
border-left-width: 0;
|
/* border-right-color: #ebeef5; */
|
}
|
|
.web__main-item--mine .web__main-text .web__main-arrow {
|
left: auto;
|
right: -5px;
|
border-color: transparent;
|
border-style: solid;
|
border-width: 8px;
|
border-right-width: 0;
|
/* border-left-color: #f3f3f3; */
|
}
|
|
.web__main-item--mine .web__main-text .web__main-arrow::after {
|
left: auto;
|
right: -2px;
|
border-color: transparent;
|
border-style: solid;
|
border-width: 7px;
|
border-right-width: 0;
|
/* border-left-color: #f3f3f3; */
|
}
|
|
.web__main-list {
|
margin: 10px 0;
|
}
|
|
.web__main-list li {
|
height: 30px;
|
color: #409eff;
|
line-height: 30px;
|
}
|
|
.web__main-item--mine {
|
text-align: right;
|
padding-left: 0;
|
padding-right: 60px;
|
}
|
|
.web__main-item--mine .web__main-user {
|
left: auto;
|
right: 3px;
|
}
|
|
.web__main-item--mine .web__main-user cite {
|
left: auto;
|
right: 60px;
|
text-align: right;
|
}
|
|
.web__main-item--mine .web__main-user cite i {
|
padding-left: 0;
|
padding-right: 0px;
|
}
|
|
.web__main-item--mine .web__main-text {
|
margin-left: 0;
|
text-align: right;
|
/* background-color: #f3f3f3; */
|
font-family: "Arial", sans-serif;
|
font-size: 16px;
|
color: #f2f2f2;
|
}
|
.web__main-text img {
|
max-width: 200px;
|
}
|
</style>
|
<style>
|
.parentBox {
|
height: 100%;
|
/* background: rgb(31, 31, 31); */
|
padding: 20px;
|
}
|
.loadBox .loaderContantBox {
|
color: white;
|
font-size: 40px;
|
overflow: hidden;
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
transform: translateZ(0);
|
/* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
|
animation: loadBox 1.7s infinite ease, round 1.7s infinite ease;
|
}
|
|
@keyframes loadBox {
|
0% {
|
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
|
0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
}
|
|
5%,
|
95% {
|
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
|
0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
}
|
|
10%,
|
59% {
|
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
|
-0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
|
-0.297em -0.775em 0 -0.477em;
|
}
|
|
20% {
|
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
|
-0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
|
-0.749em -0.34em 0 -0.477em;
|
}
|
|
38% {
|
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
|
-0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
|
-0.82em -0.09em 0 -0.477em;
|
}
|
|
100% {
|
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
|
0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
}
|
}
|
|
@keyframes round {
|
0% {
|
transform: rotate(0deg); /* 开始旋转 div 元素 */
|
}
|
|
100% {
|
transform: rotate(360deg); /* 结束旋转 div 元素 */
|
}
|
}
|
</style>
|
|
|
<style >
|
.web_Main_markDown h1 {
|
line-height: 30px !important;
|
font-size: 20px !important;
|
}
|
.web_Main_markDown h2 {
|
line-height: 25px !important;
|
font-size: 18px !important;
|
margin-left: 10px;
|
}
|
.web_Main_markDown h3 {
|
line-height: 25px !important;
|
font-size: 18px !important;
|
margin-left: 10px;
|
}
|
.web_Main_markDown li {
|
line-height: 20px !important;
|
font-size: 16px !important;
|
margin-left: 20px;
|
}
|
.web_Main_markDown p {
|
line-height: 20px !important;
|
font-size: 16px !important;
|
margin-left: 20px;
|
}
|
.web_Main_markDown {
|
background: #555555;
|
padding: 10px;
|
border-radius: 10px;
|
}
|
</style>
|
