<!--留言-->
|
<template>
|
<div class="boxliuyan" @scroll.passive="getScroll($event)">
|
<div class="message" v-for="(item, index) in messageData" :key="index">
|
<!-- 头部个人信息区域 -->
|
<div class="info">
|
<img
|
class="img"
|
src="https://img1.baidu.com/it/u=732125282,3277481018&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300"
|
/>
|
<div class="infoin">
|
<p class="name">{{item.userDept}}{{item.userName=="匿名用户"?"匿名用户":"("+item.userName+")"}}</p>
|
<p class="time">发布时间:{{item.updateTime}}</p>
|
</div>
|
</div>
|
<!-- 文案区域 -->
|
<p class="con">{{item.content}}</p>
|
<!-- 图片展示区域 -->
|
<p class="picshow" v-if="item.imageUrls.length!=0">
|
<img
|
@click="previewImages(item.imageUrls,indexin)"
|
v-for="(image, indexin) in item.imageUrls"
|
:src="image"
|
:key="indexin"
|
alt="Image"
|
:class="{active:item.imageUrls.length === 4}"
|
/>
|
</p>
|
<!-- 评论区域 -->
|
<div class="comment">
|
<div class="box">
|
<p v-for="(conin, indexcon) in item.children" :key="indexcon">
|
<span
|
class="name"
|
>{{conin.userDept}}{{conin.userName=="匿名用户"?"匿名用户":"("+conin.userName+")"}}：</span>
|
<img
|
:src="conpic"
|
v-for="(conpic, indexpic) in conin.imageUrls"
|
:key="indexpic"
|
@click="previewImages(conin.imageUrls,indexpic)"
|
/>
|
<span class="comin">{{conin.content}}</span>
|
</p>
|
</div>
|
<div class="tocomment">
|
<div class="imgurl">
|
<span v-for="(itemup,indexpic) in item.imageDatatoup" :key="indexpic">
|
<img :src="itemup" class="toimg" />
|
<img src="images/close.png" class="close" @click="closeimg(index,indexpic)" />
|
</span>
|
</div>
|
<div class="tocomment_in">
|
<van-field v-model="item.inputValue" placeholder="说点什么吧" />
|
<van-uploader :after-read="(file) => afterread(file, index)" multiple>
|
<img src="images/pic.png" class="pic" />
|
</van-uploader>
|
<img src="images/anonymous.png" class="anonymous" @click="SubmitComment(1,item,index)" />
|
<div class="notanonymous" v-show="isshownotnm" @click="SubmitComment(2,item,index)">
|
<img src="images/notanonymous.png" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="not" v-show="messageData.length==0">
|
<img src="images/notdata.png" />
|
<p>暂无数据</p>
|
</div>
|
<img src="images/outlogin.png" class="Addmessage_out" @click="OutLogin()" />
|
<img src="images/Addmessage.png" class="Addmessage" @click="Addmessage()" />
|
<div class="Stay">
|
<img src="images/jqqd.png" v-show="messageData.length!=0" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { endpoint, leaveWordslist, leaveWords } from "@/api/hfiveget/index.js";
|
import { ImagePreview } from "vant";
|
import store from "../../store/index";
|
import { setToken, getToken } from "@/utils/auth.js";
|
import { Loginto } from "@/api/hfiveget/index.js";
|
export default {
|
data() {
|
return {
|
isshownotnm: true,
|
messageData: [],
|
pageswitch: { current: 1, size: 5, descs: "update_time" },
|
scrollBottom: "",
|
lastscrollBottom: ""
|
};
|
},
|
beforeCreate() {
|
Loginto(JSON.parse(localStorage.getItem("refreshdatabaocun"))).then(res => {
|
setToken(res.data.refresh_token);
|
});
|
setInterval(() => {
|
Loginto(JSON.parse(localStorage.getItem("refreshdatabaocun"))).then(
|
res => {
|
setToken(res.data.refresh_token);
|
}
|
);
|
}, 60 * 60 * 1000);
|
},
|
computed: {},
|
created() {
|
if (localStorage.getItem("tokensave") == null) {
|
this.$router.push("/discrimination");
|
}
|
store.commit("updatelogintopath", "/message");
|
this.isshownotnm =
|
localStorage.getItem("tokensave") == "111" ? false : true;
|
if (localStorage.getItem("tokensave") != null) {
|
this.getmessagelist();
|
}
|
},
|
mounted() {},
|
methods: {
|
getScroll(event) {
|
this.scrollBottom =
|
event.target.scrollHeight -
|
event.target.scrollTop -
|
event.target.clientHeight;
|
if (this.scrollBottom < 200) {
|
if (this.lastscrollBottom > this.scrollBottom) {
|
this.pageswitch.current += 1;
|
this.getmessagelist();
|
}
|
}
|
this.lastscrollBottom = this.scrollBottom;
|
},
|
// 获取数据
|
getmessagelist() {
|
leaveWordslist(this.pageswitch).then(res => {
|
res.data.data.records.forEach((item, indexto) => {
|
if (item.imageUrls != "") {
|
item.imageUrls = item.imageUrls.split(",");
|
}
|
if (item.children != undefined) {
|
item.children.forEach((childitem, indexpic) => {
|
if (childitem.imageUrls != "") {
|
childitem.imageUrls = childitem.imageUrls.split(",");
|
}
|
});
|
}
|
});
|
const mergedArray = this.messageData.concat(res.data.data.records);
|
this.messageData = mergedArray;
|
let kehuarray = [];
|
if (localStorage.getItem("tokensave") == "111") {
|
this.messageData.forEach((item, indexto) => {
|
if (item.userName == "匿名用户") {
|
let childitemdata = [];
|
item.children = item.children || [];
|
item.children.forEach((itemsss, indexsss) => {
|
if (itemsss.userName == "匿名用户") {
|
childitemdata.push(itemsss);
|
}
|
});
|
item.children = childitemdata;
|
kehuarray.push(item);
|
}
|
});
|
this.messageData = kehuarray;
|
}
|
});
|
},
|
// 提交评论：1匿名提交，2不匿名提交
|
SubmitComment(key, item, index) {
|
if (
|
(item.inputValue == undefined || item.inputValue == "") &&
|
(item.imageDatatoup == undefined || item.imageDatatoup.length == 0)
|
) {
|
this.$toast.fail("请输入留言内容");
|
} else {
|
let toData = {
|
parentId: item.id,
|
userName: "匿名用户",
|
content: item.inputValue,
|
imageUrls:
|
item.imageDatatoup == undefined
|
? undefined
|
: item.imageDatatoup.toString()
|
};
|
if (key == 2) {
|
toData.userName = localStorage.getItem("nick_name");
|
toData.userDept = localStorage.getItem("dept_name");
|
toData.userPost = localStorage.getItem("post_name");
|
}
|
leaveWords(toData).then(res => {
|
if (res.data.code == 200) {
|
this.$toast.success("评论成功");
|
let linshiData = [];
|
this.messageData[index].children =
|
this.messageData[index].children || [];
|
linshiData = this.messageData[index];
|
toData.imageUrls = item.imageDatatoup || [];
|
linshiData.children.push(toData);
|
this.$set(this.messageData, index, linshiData);
|
this.messageData[index].inputValue = "";
|
this.messageData[index].imageDatatoup = [];
|
}
|
});
|
}
|
},
|
// 删除图片
|
closeimg(index, indexpic) {
|
this.messageData[index].imageDatatoup.splice(indexpic, 1);
|
},
|
// 图片上传
|
afterread(event, indexto) {
|
let temporary = [];
|
if (event.length == undefined) {
|
const formdata = new FormData();
|
formdata.append("file", event.file);
|
endpoint(formdata).then(res => {
|
if (res.data.code == 200) {
|
temporary.push(res.data.data.link);
|
}
|
});
|
} else {
|
event.forEach((element, index) => {
|
const formdata = new FormData();
|
formdata.append("file", element.file);
|
endpoint(formdata).then(res => {
|
if (res.data.code == 200) {
|
temporary.push(res.data.data.link);
|
}
|
});
|
});
|
}
|
this.$set(this.messageData[indexto], "imageDatatoup", temporary);
|
},
|
// 图片预览
|
previewImages(arr, index) {
|
ImagePreview({
|
images: arr,
|
startPosition: index
|
});
|
},
|
// 添加留言
|
Addmessage() {
|
this.$router.push({
|
path: "/Addmessage"
|
});
|
},
|
OutLogin() {
|
localStorage.clear();
|
store.commit("updatelogintopath", "/message");
|
setTimeout(() => {
|
this.$router.push({
|
path: "/discrimination"
|
});
|
}, 1000);
|
this.$toast.success("请重新登录");
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.boxliuyan {
|
height: 100vh;
|
overflow: auto;
|
.Stay {
|
width: 100%;
|
img {
|
width: 100%;
|
}
|
}
|
}
|
.Addmessage {
|
position: absolute;
|
right: 10px;
|
bottom: 170px;
|
width: 70px;
|
height: 70px;
|
}
|
.Addmessage_out {
|
position: absolute;
|
right: 10px;
|
bottom: 250px;
|
width: 70px;
|
height: 70px;
|
}
|
|
.message {
|
padding: 20px 20px 0px;
|
position: relative;
|
.info {
|
display: flex;
|
align-items: center;
|
.img {
|
width: 60px;
|
height: 60px;
|
border-radius: 100px;
|
}
|
.infoin {
|
margin-left: 10px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
.name {
|
font-size: 20px;
|
margin-bottom: 7px;
|
}
|
.time {
|
font-size: 14px;
|
color: #666666;
|
}
|
}
|
}
|
.con {
|
font-size: 18px;
|
margin: 10px 0px 0px;
|
line-height: 30px;
|
}
|
.picshow {
|
img {
|
width: 30%;
|
aspect-ratio: 1 / 1;
|
margin: 5px;
|
}
|
.active {
|
width: 35%;
|
}
|
}
|
.tocomments {
|
display: flex;
|
margin: 10px 0px;
|
p {
|
margin-left: auto;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
img {
|
width: 20px;
|
height: 20px;
|
margin: 5px;
|
}
|
span {
|
font-size: 16px;
|
}
|
}
|
.comment {
|
padding: 0px 0px 10px;
|
font-size: 16px;
|
.box {
|
p {
|
margin: 5px 0px;
|
.name {
|
color: #4a80ea;
|
}
|
img {
|
width: 40px;
|
height: 40px;
|
margin: 15px 5px 0px;
|
}
|
}
|
}
|
|
.tocomment {
|
margin-top: 10px;
|
background: #f4f5f7;
|
.imgurl {
|
span {
|
width: 60px;
|
height: 60px;
|
margin: 0px 4px 4px 0px;
|
display: inline-block;
|
position: relative;
|
.toimg {
|
width: 60px;
|
height: 60px;
|
}
|
.close {
|
width: 20px;
|
height: 20px;
|
position: absolute;
|
top: -5px;
|
right: -5px;
|
}
|
}
|
}
|
.tocomment_in {
|
display: flex;
|
align-items: center;
|
padding: 5px;
|
}
|
|
.van-cell {
|
background: none;
|
font-size: 20px;
|
padding: 10px 5px;
|
}
|
.pic {
|
width: 25px;
|
height: 25px;
|
margin-right: 2px;
|
}
|
.anonymous {
|
width: 40px;
|
height: 40px;
|
}
|
.notanonymous {
|
width: 50px;
|
height: 30px;
|
border-radius: 100px;
|
background: #017bfc;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
img {
|
width: 20px;
|
height: 20px;
|
}
|
}
|
}
|
}
|
}
|
.not {
|
img {
|
margin-top: 30px;
|
width: 100%;
|
}
|
p {
|
font-size: 20px;
|
color: #999999;
|
text-align: center;
|
}
|
}
|
</style>
|
|
