613 lines
16 KiB
Vue
613 lines
16 KiB
Vue
<template>
|
|
<div class="leaveMessage" >
|
|
<h3>{{ $t(`message.messageBoard`) }}</h3>
|
|
<span class="wantMessage" @click="handelWantMessage" v-show="WantShow">
|
|
{{ $t(`message.message`) }}</span
|
|
>
|
|
<!-- 未留言 -->
|
|
<div class="inputContent" v-show="leaveShow">
|
|
<el-input
|
|
type="textarea"
|
|
:autosize="{ minRows: 2, maxRows: 5 }"
|
|
:placeholder="$t(`message.said`)"
|
|
v-model="textarea"
|
|
resize="none"
|
|
>
|
|
</el-input>
|
|
<el-button @click="handelPublish" class="publish">{{
|
|
$t(`message.publish`)
|
|
}}</el-button>
|
|
</div>
|
|
<!-- 已发表留言 -->
|
|
|
|
<div class="leaveContent" v-show="messageContentShow">
|
|
<!-- 用户名 -->
|
|
<el-row>
|
|
<el-col class="user" v-for="item in messageContent" :key="item.id">
|
|
<div class="picture">
|
|
<img
|
|
src="https://hbimg.huabanimg.com/94d26a8255b902cd27b98da5e4518217ebc437892616-RZJfHt_fw658"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<div class="name">
|
|
<!-- 留言第一层 -->
|
|
<div class="firstLayer">
|
|
<span>{{ item.userName }}</span>
|
|
<span>{{ item.id }} {{ $t(`message.building`) }}</span>
|
|
<!-- 留言内容 -->
|
|
<p>{{ item.userMsg }}</p>
|
|
<!-- 回复 -->
|
|
<div class="reply">
|
|
<span>{{handelTime(item.userDate)}}</span>
|
|
<span @click="handelReply(item)">{{
|
|
$t(`message.reply`)
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 回复留言层 -->
|
|
<div v-if="item.responList[0]">
|
|
<div v-for="replyItem in getData(item.responList)" :key="replyItem.id">
|
|
<div class="replyMessage" v-for="replySubItem in replyItem" :key="replySubItem.responid">
|
|
<div>
|
|
<img
|
|
src="https://hbimg.huabanimg.com/94d26a8255b902cd27b98da5e4518217ebc437892616-RZJfHt_fw658"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="replyContent" >
|
|
<span>{{replySubItem.responser}}</span>
|
|
<span>{{replySubItem.respon}}</span>
|
|
<p class="time">
|
|
{{ handelTime(replySubItem.responDate) }}
|
|
<span @click="handelReply(item)">{{
|
|
$t(`message.reply`)
|
|
}}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 回复留言下面的输入框 -->
|
|
<div class="replyInput" v-if="replyId == item.id">
|
|
<el-input
|
|
v-model="reply"
|
|
:placeholder="$t(`message.said1`)"
|
|
></el-input>
|
|
<el-button class="publish" @click="handelDefiniteReply">{{
|
|
$t(`message.determine`)
|
|
}}</el-button>
|
|
<el-button class="replyCancel" @click="handelCancelReply">{{
|
|
$t(`message.cancel`)
|
|
}}</el-button>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- 点赞分享 -->
|
|
<div class="praise">
|
|
<span>{{ $t(`message.help`) }} </span>
|
|
<span @click="handelPraise"
|
|
><i class="i iz-like"></i>{{ praiseNum }}</span
|
|
>
|
|
<span><i class="i icai" @click="handelPoor"></i> {{ poorNum }}</span>
|
|
<i class="i itwitter-fill bird" @click="handelTwitter"></i>
|
|
<i class="i ifacebookfacebook52 facebook" @click="handelFacebook"></i>
|
|
<i class="i itelegram bird" @click="handelTelegram"></i>
|
|
<i class="i ireddit Reddit" @click="handelReddit"></i>
|
|
|
|
|
|
<!-- <span @click="handelShare"> <i class="i ifenxiang"></i></span> -->
|
|
</div>
|
|
|
|
<el-dialog title="选择分享" :visible.sync="dialogVisibleShare" width="30%">
|
|
<div class="shareBox">
|
|
<p @click="handelTwitter">分享页面到 Twitter</p>
|
|
<p @click="handelFacebook">分享页面到 Facebook</p>
|
|
<p @click="handelTelegram">分享页面到 Telegram</p>
|
|
<p @click="handelReddit">分享页面到 Reddit</p>
|
|
<p>分享页面到 discord</p>
|
|
</div>
|
|
<!-- <div class="shareBtn">
|
|
<el-button @click="dialogVisibleShare = false">取 消</el-button>
|
|
<el-button type="primary" @click="dialogVisibleShare = false"
|
|
>确 定</el-button
|
|
>
|
|
</div> -->
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
fetchMessageBoard,
|
|
submitMessage,
|
|
responMsg,
|
|
getPraise,
|
|
getClickPraisePoor,
|
|
} from "../api/messageBoard";
|
|
export default {
|
|
data() {
|
|
return {
|
|
leaveShow: true,
|
|
textarea: "",
|
|
messageContent: [
|
|
// {
|
|
// id: 1,
|
|
// userMsg: "我是第一条留言",
|
|
// userName: "留言人",
|
|
// msgDate: "2009-01-09T08:00:00.000+00:00",
|
|
// responList: {
|
|
// responId: 3,
|
|
// respon: "管理员回复此留言的内容",
|
|
// responser: "管理员",
|
|
// toUser: "留言人",
|
|
// responDate: "2009-01-09T08:01:00.000+00:00",
|
|
// responList: {
|
|
// responId: 4,
|
|
// respon: "用户回复管理员答复的内容",
|
|
// responser: "留言人",
|
|
// toUser: "留言人",
|
|
// responDate: "2009-01-09T08:02:00.000+00:00",
|
|
// responList: null,
|
|
// },
|
|
// },
|
|
// },
|
|
// {
|
|
// id: 2,
|
|
// userMsg: "我是第二条留言",
|
|
// userName: "留言人",
|
|
// msgDate: "2009-01-09T09:00:00.000+00:00",
|
|
// responList: null,
|
|
// },
|
|
],
|
|
reply: "",
|
|
WantShow: false,
|
|
messageContentShow: false,
|
|
messageBoard: {
|
|
//请求历史留言
|
|
page: "",
|
|
coinType: "",
|
|
pageNum: 1,
|
|
pagesize: 10,
|
|
},
|
|
pagelabel: "",
|
|
submitMsg: {
|
|
//发表留言
|
|
message: "",
|
|
page: "",
|
|
coinType: "",
|
|
},
|
|
replyId: "",
|
|
responMsg: {
|
|
//回复留言
|
|
message: "",
|
|
msg_id: "",
|
|
},
|
|
praiseNum: 0,
|
|
praiseFlag: false,
|
|
poorNum: 0,
|
|
poorFlag: false,
|
|
dialogVisibleShare: false,
|
|
twitterURL:"",
|
|
pageUrl:"",//网站当前页面地址
|
|
telegramURL:"",
|
|
|
|
|
|
};
|
|
},
|
|
watch: {
|
|
pagelabel() {//跳转不同页面 请求不同页面数据
|
|
this.fetchDefaultMessage(this.messageBoard);
|
|
this.fetchPraise({page:this.messageBoard.page,coinType:this.messageBoard.coinType})
|
|
},
|
|
},
|
|
mounted() {
|
|
this.messageBoard.page =JSON.parse(localStorage.getItem("params")).label//当前所在页面
|
|
this.messageBoard.coinType = localStorage.getItem("radius"); //当前币种
|
|
this.fetchDefaultMessage(this.messageBoard);
|
|
this.fetchPraise({page:this.messageBoard.page,coinType:this.messageBoard.coinType})//请求点赞 踩的历史数量
|
|
this.pageUrl = window.location.href
|
|
//监听localstorage改变赋值
|
|
window.addEventListener("setItem", (e) => {
|
|
this.messageBoard.page =JSON.parse(localStorage.getItem("params")).label
|
|
this.messageBoard.coinType = localStorage.getItem("radius");
|
|
this.pagelabel = JSON.parse(localStorage.getItem("params")).label
|
|
});
|
|
|
|
|
|
},
|
|
methods: {
|
|
//请求历史留言
|
|
async fetchDefaultMessage(data) {
|
|
const list = await fetchMessageBoard(data);
|
|
|
|
|
|
this.messageContent = list.data.data.data
|
|
|
|
if (this.messageContent[0]) {//有留言数据的情况 默认发表留言框不显示
|
|
this.messageContentShow = true;
|
|
this.WantShow = true;
|
|
this.leaveShow = false;
|
|
}else{
|
|
this.leaveShow = true;
|
|
this.WantShow = false;
|
|
this.messageContentShow = false;
|
|
}
|
|
|
|
},
|
|
//发表留言请求
|
|
async fetchSubmitMessage(data) {
|
|
const list = await submitMessage(data);
|
|
//点击发表以后要重新请求所有留言数据
|
|
this.fetchDefaultMessage(this.messageBoard);
|
|
},
|
|
//回复留言
|
|
async fetchResponMsg(data) {
|
|
const list = await responMsg(data);
|
|
// 回复留言以后查询 所有留言重新渲染
|
|
this.fetchDefaultMessage(this.messageBoard);
|
|
|
|
},
|
|
//请求点赞 踩的历史数量
|
|
async fetchPraise(data){
|
|
const list = await getPraise(data)
|
|
|
|
this.praiseNum = list.data.data.likeNum
|
|
this.poorNum = list.data.data.choose
|
|
|
|
},
|
|
//点赞 点踩以后传送数据
|
|
async fetchClickNum(data){
|
|
const list = await getClickPraisePoor(data)
|
|
},
|
|
//点击顶部我要留言
|
|
handelWantMessage() {
|
|
this.leaveShow = true;
|
|
},
|
|
//点击发表留言
|
|
handelPublish() {
|
|
// let id = 1;
|
|
// let obj = {
|
|
// id: id++,
|
|
// message: this.textarea,
|
|
// };
|
|
// id = obj.id;
|
|
// this.messageContent.push(obj);
|
|
|
|
this.leaveShow = false;
|
|
this.WantShow = true;
|
|
// -------------------
|
|
this.submitMsg.message = this.textarea;
|
|
this.submitMsg.page = this.messageBoard.page;
|
|
this.submitMsg.coinType = this.messageBoard.coinType;
|
|
console.log(this.submitMsg,6621544561213);
|
|
this.fetchSubmitMessage(this.submitMsg);
|
|
this.textarea = "";
|
|
},
|
|
//点击回复留言
|
|
handelReply(data) {
|
|
this.replyId = data.id; //通过ID控制回复框是否显示
|
|
},
|
|
//取消回复留言
|
|
handelCancelReply() {
|
|
this.replyId = "";
|
|
},
|
|
//确定回复留言
|
|
handelDefiniteReply() {
|
|
this.responMsg.message = this.reply;
|
|
this.responMsg.msg_id = this.replyId;
|
|
this.fetchResponMsg(this.responMsg);
|
|
this.reply =""
|
|
},
|
|
//点赞
|
|
handelPraise() {
|
|
this.praiseFlag = !this.praiseFlag;
|
|
if (this.praiseFlag) {
|
|
this.praiseNum++;
|
|
this.fetchClickNum({page:this.messageBoard.page,coinType:this.messageBoard.coinType,choose:1})//发送点赞或踩的数据到后端
|
|
} else {
|
|
this.fetchClickNum({page:this.messageBoard.page,coinType:this.messageBoard.coinType,choose:0})
|
|
this.praiseNum--;
|
|
}
|
|
//请求所有历史点赞数量
|
|
this.fetchPraise({page:this.messageBoard.page,coinType:this.messageBoard.coinType})
|
|
},
|
|
//踩
|
|
handelPoor() {
|
|
this.poorFlag = !this.poorFlag;
|
|
if (this.poorFlag) {
|
|
this.poorNum++;
|
|
this.fetchClickNum({page:this.messageBoard.page,coinType:this.messageBoard.coinType,choose:2})
|
|
} else {
|
|
this.poorNum--;
|
|
this.fetchClickNum({page:this.messageBoard.page,coinType:this.messageBoard.coinType,choose:0})
|
|
}
|
|
//请求所有历史点赞 踩数量
|
|
this.fetchPraise({page:this.messageBoard.page,coinType:this.messageBoard.coinType})
|
|
},
|
|
//点击分享
|
|
handelShare(){
|
|
this.dialogVisibleShare =true
|
|
},
|
|
//分享到Twitter
|
|
handelTwitter(){
|
|
|
|
this.twitterURL=`http://twitter.com/share?text=${this.$t(this.messageBoard.page)}&url=${this.pageUrl}`
|
|
window.open(this.twitterURL)
|
|
},
|
|
//分享到Facebook
|
|
handelFacebook(){
|
|
|
|
|
|
this.facebookURL=`https://www.facebook.com/sharer.php?u=${this.pageUrl}`
|
|
window.open(this.facebookURL)
|
|
},
|
|
//分享到Telegram
|
|
handelTelegram(){
|
|
this.telegramURL= `https://t.me/share?url=${this.pageUrl}&text=${this.$t(this.messageBoard.page)}`
|
|
window.open(this.telegramURL)
|
|
},
|
|
//分享到Reddit
|
|
handelReddit(){
|
|
this.redditURL= `http://www.reddit.com/submit?url=${this.pageUrl}&title=${this.$t(this.messageBoard.page)}`
|
|
window.open(this.redditURL)
|
|
},
|
|
|
|
// 处理留言板嵌套数组
|
|
getData(data){
|
|
let newData =[]
|
|
this.handelArrList(data,newData)
|
|
|
|
return newData
|
|
},
|
|
// 处理留言板嵌套数组
|
|
handelArrList(data,newData) {
|
|
let newObj ={}
|
|
Object.keys(data).forEach(item=>{
|
|
newObj[item]=data[item]
|
|
})
|
|
|
|
newData.push(newObj)
|
|
if (!newObj.responList) return
|
|
this.handelArrList(newObj.responList,newData)
|
|
|
|
},
|
|
//处理时间格式
|
|
handelTime(time){
|
|
return `${time.split("T")[0]} ${time.split("T")[1].split(".")[0]}`
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
box-sizing: border-box;
|
|
}
|
|
.leaveMessage {
|
|
margin-top: 5px;
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 200px;
|
|
// height: 500px;
|
|
background: #e5e5e5;
|
|
padding: 0px 5px;
|
|
padding-bottom: 50px;
|
|
// background: rgba(247,147,26,0.1);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
// background: red;
|
|
// outline: 1px solid red;
|
|
h3 {
|
|
margin: 0px;
|
|
display: inline-block;
|
|
// border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
|
}
|
|
.wantMessage {
|
|
margin-left: 20px;
|
|
font-size: 14px;
|
|
color: #0098d8;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.leaveContent {
|
|
width: 100%;
|
|
padding: 10px 0px;
|
|
// background: papayawhip;
|
|
margin-top: 10px;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
.user {
|
|
// outline: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
padding: 10px 0px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
margin-top: 5px;
|
|
.picture {
|
|
padding: 10px;
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
}
|
|
.name {
|
|
flex: 1;
|
|
// outline: 1px solid red;
|
|
font-size: 13px;
|
|
padding: 0px 20px;
|
|
.firstLayer{
|
|
// outline: 1px solid red;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
padding: 10px 0px;
|
|
}
|
|
span:nth-of-type(1) {
|
|
color: #0098d8;
|
|
}
|
|
span:nth-of-type(2) {
|
|
color: rgba(0, 0, 0, 0.6);
|
|
margin-left: 20px;
|
|
font-size: 13px;
|
|
}
|
|
p {
|
|
min-height: 20px; // outline: 1px solid red;
|
|
font-size: 13px;
|
|
margin-top: 10px;
|
|
}
|
|
.reply {
|
|
font-size: 12px;
|
|
span:nth-of-type(1) {
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
span:nth-of-type(2) {
|
|
color: #0098d8;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.praise {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
padding: 0px 10px;
|
|
|
|
color: rgba(0, 0, 0, 0.6);
|
|
// outline: 1px solid red;
|
|
span {
|
|
display: inline-block;
|
|
line-height: 30px;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
// outline: 1px solid red;
|
|
}
|
|
i {
|
|
margin-left: 20px;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
// 默认状态
|
|
.inputContent {
|
|
// outline: 1px solid red;
|
|
// border: 1PX solid #ccc;
|
|
margin-top: 5px;
|
|
.publish {
|
|
padding: 5px 20px;
|
|
margin-top: 10px;
|
|
background: #7b8c9e;
|
|
color: #fff;
|
|
}
|
|
}
|
|
// 回复留言
|
|
.replyMessage {
|
|
// outline: 1px solid red;
|
|
// height: 70px;
|
|
padding: 5px;
|
|
display: flex;
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.replyContent {
|
|
padding: 0px 10px;
|
|
span:nth-of-type(2) {
|
|
color: rgba(0, 0, 0, 1);
|
|
font-size: 14px;
|
|
}
|
|
.time {
|
|
color: rgba(0, 0, 0, 0.6);
|
|
height: 20px;
|
|
// margin: 0;
|
|
span {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// .replyMessageBox{
|
|
|
|
// }
|
|
// 回复留言的输入框
|
|
.replyInput {
|
|
margin-top: 10px;
|
|
width: 60%;
|
|
.publish {
|
|
padding: 5px 10px;
|
|
margin-top: 10px;
|
|
background: #7b8c9e;
|
|
color: #fff;
|
|
}
|
|
.replyCancel {
|
|
padding: 5px 10px;
|
|
margin-top: 10px;
|
|
background: #7b8c9e;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.passwordBox {
|
|
/* background: #b3c0d1; */
|
|
width: 70%;
|
|
margin: 0 auto;
|
|
z-index: 99998 !important;
|
|
}
|
|
|
|
// 选择分享
|
|
.shareBox{
|
|
// border: 1px solid red;
|
|
display: flex;
|
|
flex-direction: column;
|
|
p{
|
|
width: 100%;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
height: 40px;
|
|
margin-top: 5px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
cursor: pointer;
|
|
}
|
|
p:hover{
|
|
color:cadetblue;
|
|
background: floralwhite;
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.shareBtn{
|
|
// border: 1px solid red;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
height: 30px;
|
|
justify-content: right;
|
|
.el-button{
|
|
// border: 1px solid red;
|
|
width: 80px;
|
|
}
|
|
}
|
|
.bird{
|
|
// border:1px solid red;
|
|
color:#1d9bf0;
|
|
font-size: 20px !important;
|
|
|
|
|
|
}
|
|
.facebook{
|
|
color:#1d9bf0;
|
|
font-size: 20px !important;
|
|
|
|
}
|
|
.Reddit{
|
|
color:#ff4500;
|
|
font-size: 20px !important;
|
|
}
|
|
</style> |