mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-06 17:36:45 +08:00
770 lines
20 KiB
Vue
770 lines
20 KiB
Vue
<template>
|
|
<div class="CommentReply">
|
|
<div class="reshead">
|
|
<div
|
|
style="
|
|
opacity: relative;
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
"
|
|
>
|
|
<div
|
|
class="reply"
|
|
:style="{
|
|
opacity: reply1Show ? 0 : 1,
|
|
zIndex: reply1Show ? 0 : 100,
|
|
}"
|
|
>
|
|
<UploadPostImg
|
|
:max="3"
|
|
v-model="commentSubmitFileList"
|
|
@fileUploadValue="uploadBack"
|
|
>
|
|
<img
|
|
style="width: 28px; height: 28px; margin-right: 5px"
|
|
src="@/assets/image/uploadImg2.png"
|
|
/>
|
|
</UploadPostImg>
|
|
<el-input
|
|
type="text"
|
|
v-model="disComment.content"
|
|
resize="none"
|
|
maxlength="200"
|
|
placeholder="写评论~"
|
|
style="width: calc(100% - 40px)"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="reply"
|
|
:style="{
|
|
opacity: reply1Show ? 1 : 0,
|
|
zIndex: reply1Show ? 100 : 0,
|
|
}"
|
|
>
|
|
<el-input
|
|
type="text"
|
|
v-model="replayComment.content"
|
|
resize="none"
|
|
maxlength="200"
|
|
:placeholder="replayComment.placeholder"
|
|
style="width: calc(100% - 40px)"
|
|
class="replyInp"
|
|
/>
|
|
<UploadPostImg
|
|
:max="3"
|
|
v-model="fileListCommentRelpay"
|
|
@fileUploadValue="uploadReplyBack"
|
|
>
|
|
<img
|
|
style="width: 28px; height: 28px; margin-left: 5px"
|
|
src="@/assets/image/uploadImg2.png"
|
|
/>
|
|
</UploadPostImg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="imgbtns">
|
|
<div style="display: flex">
|
|
<div
|
|
v-for="(v, i) in reply1Show
|
|
? fileListCommentRelpay
|
|
: fileListComment"
|
|
:key="i"
|
|
style="position: relative"
|
|
>
|
|
<img
|
|
:src="v.url"
|
|
style="width: 66px; height: 66px; margin-left: 5px"
|
|
/>
|
|
<div
|
|
class="cha"
|
|
@click="reply1Show ? removeImg(i) : removeCommentImg(i)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="btns">
|
|
<div class="btns1" @click="reply1Blur">取消</div>
|
|
<div class="btns2" @click="send">发布</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="linee"></div> -->
|
|
|
|
<div class="restorebox" v-for="(item, index) in commontList" :key="index">
|
|
<div class="restoremani">
|
|
<div class="rescon clearfix">
|
|
<div class="head">
|
|
<div>
|
|
<img class="headavator" :src="item.studentAvatar" />
|
|
</div>
|
|
<div class="namehead">
|
|
{{ item.createName }}
|
|
</div>
|
|
</div>
|
|
<div class="inner">
|
|
<div class="recon">{{ item.content }}</div>
|
|
<div
|
|
style="display: flex; margin-top: 6px; margin-bottom: 6px"
|
|
v-if="item.img"
|
|
>
|
|
<div
|
|
v-for="(rowimg, i) in item.img.split(',')"
|
|
:key="i"
|
|
style="width: 55px; height: 55px; margin-right: 5px"
|
|
>
|
|
<img
|
|
class="image"
|
|
style="width: 55px; height: 55px; border-radius: 4px"
|
|
:src="rowimg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="botto">
|
|
<div class="time">{{ item.createTime }}</div>
|
|
<div class="re" @click="commentComment(item)">回复</div>
|
|
<div class="right" @click="commentLike(item)">
|
|
<div class="good">
|
|
<img
|
|
v-if="item.praised"
|
|
src="../../assets/image/discuss/elsedianzan1.png"
|
|
/>
|
|
<img
|
|
v-else
|
|
src="../../assets/image/discuss/elsedianzan.png"
|
|
/>
|
|
</div>
|
|
<div class="gocount">{{ item.praiseNum || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="newre" v-if="item.children && item.children.length !== 0">
|
|
<div class="tri"></div>
|
|
<div class="reccon">
|
|
<div class="rec clearfix">
|
|
<div
|
|
class="it"
|
|
v-for="(itemc, key) in item.children"
|
|
:key="key"
|
|
:style="{
|
|
display:
|
|
spreadReply !== index && key == 0
|
|
? 'block'
|
|
: spreadReply == index
|
|
? 'block'
|
|
: 'none',
|
|
}"
|
|
>
|
|
<div class="ava">
|
|
<img class="avainner" :src="itemc.studentAvatar" />
|
|
<div class="rename">{{ itemc.studentName }}</div>
|
|
</div>
|
|
<div class="redetail">
|
|
<div class="rein">{{ itemc.content }}</div>
|
|
<div
|
|
style="display: flex; margin-top: 6px; margin-bottom: 6px"
|
|
v-if="itemc.img"
|
|
>
|
|
<div
|
|
v-for="(rowimg, i) in itemc.img.split(',')"
|
|
:key="i"
|
|
style="width: 55px; height: 55px; margin-right: 5px"
|
|
>
|
|
<img
|
|
class="image"
|
|
style="width: 55px; height: 55px; border-radius: 4px"
|
|
:src="rowimg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="detre">
|
|
<div class="day">{{ itemc.createTime }}</div>
|
|
<!-- <div class="huifu" @click="commentComment(itemc)">
|
|
回复
|
|
</div> -->
|
|
<div class="good" @click="commentLike(itemc)">
|
|
<img
|
|
v-if="itemc.praised"
|
|
class="gimg"
|
|
src="../../assets/image/discuss/elsedianzan1.png"
|
|
/>
|
|
<img
|
|
v-else
|
|
class="gimg"
|
|
src="../../assets/image/discuss/elsedianzan.png"
|
|
/>
|
|
<div class="gcou">
|
|
{{ itemc.praiseNum || 0 }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="line"></div> -->
|
|
<!-- <div
|
|
:class="index === newrestore.length - 1 ? null : 'line'"
|
|
></div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 查看更多 -->
|
|
<div
|
|
style="
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
"
|
|
v-if="item.children && item.children.length > 1"
|
|
>
|
|
<span
|
|
@click="lookMore(index)"
|
|
style="font-size: 14px; color: #2478ff"
|
|
>{{
|
|
index == spreadReply
|
|
? "收起"
|
|
: "查看全部" + item.children.length + "条评论"
|
|
}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btncon clearfix">
|
|
<button
|
|
class="btnn"
|
|
v-if="!noMorePost && hfPage.total > 10"
|
|
@click="handleCurrentChange"
|
|
>
|
|
点击加载更多~
|
|
</button>
|
|
<button class="btnn" v-else style="color: rgba(95, 109, 117, 1)">
|
|
已经到底啦~
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { reactive, ref, computed, defineProps } from "vue";
|
|
import ReturnHead from "@/components/ReturnHead.vue";
|
|
import px from "@/assets/image/discuss/px.jpg";
|
|
import { request, useRequest } from "@/api/request";
|
|
import {
|
|
PostDetails,
|
|
COMMENT_LIST,
|
|
DISCUSS_LIST,
|
|
COMMENT_PRAISE,
|
|
COMMENT_ADD,
|
|
} from "@/api/api";
|
|
import { useRoute, useRouter } from "vue-router/dist/vue-router";
|
|
import UploadPostImg from "@/components/img/UploadPostImg.vue";
|
|
import { ElMessage } from "element-plus";
|
|
import store from "@/store";
|
|
const props = defineProps({
|
|
type: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
faceId: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
});
|
|
const userInfo = computed(() => store.state.userInfo);
|
|
|
|
const disDetail = ref({});
|
|
const commontList = ref([]);
|
|
const spreadReply = ref(-1);
|
|
const hfPage = ref({
|
|
currentPage: 1,
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
});
|
|
|
|
const noMorePost = ref(false);
|
|
// 获取数据
|
|
const getData = () => {
|
|
// 获取帖子下的评论
|
|
request(COMMENT_LIST, {
|
|
id: props.faceId,
|
|
type: 3,
|
|
pageNo: hfPage.value.currentPage,
|
|
pageSize: 10,
|
|
})
|
|
.then((res) => {
|
|
console.log("我是获取当前帖子的评论", res);
|
|
commontList.value = commontList.value.concat(res.data.records);
|
|
hfPage.value.total = Number(res.data.total);
|
|
clearText();
|
|
if (res.data.records.length === 0 || res.data.records.length < 10) {
|
|
noMorePost.value = true;
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
getData();
|
|
|
|
// 查看更多-展开回复列表
|
|
function lookMore(i) {
|
|
i == spreadReply.value ? (spreadReply.value = -1) : (spreadReply.value = i);
|
|
}
|
|
// 清空回复及评论输入框
|
|
const clearText = () => {
|
|
disComment.value.content = "";
|
|
fileListComment.value = [];
|
|
fileListCommentRelpay.value = [];
|
|
replayComment.value.content = "";
|
|
};
|
|
|
|
// 评论分页
|
|
function handleCurrentChange(e, k) {
|
|
console.log("分页打印", e, k);
|
|
hfPage.value.currentPage = hfPage.value.currentPage + 1;
|
|
hfPage.value.pageNo = hfPage.value.pageNo + 1;
|
|
getData();
|
|
}
|
|
const commentSubmitFileList = ref([]);
|
|
|
|
const disComment = ref({
|
|
content: "",
|
|
});
|
|
const replayComment = ref({
|
|
placeholder: "",
|
|
content: "",
|
|
pid: "",
|
|
});
|
|
|
|
// 评论图片展示数组
|
|
const fileListComment = ref([]);
|
|
// 回复图片展示数组
|
|
const fileListCommentRelpay = ref([]);
|
|
|
|
// 上传图片成功返回的URL
|
|
const uploadBack = (e) => {
|
|
console.log("--------->", e);
|
|
fileListComment.value.push(e);
|
|
};
|
|
|
|
const uploadReplyBack = (e) => {
|
|
console.log("--------->", e);
|
|
fileListCommentRelpay.value.push(e);
|
|
};
|
|
|
|
function removeImg(i) {
|
|
fileListCommentRelpay.value.splice(i, 1);
|
|
}
|
|
|
|
function removeCommentImg(i) {
|
|
fileListComment.value.splice(i, 1);
|
|
}
|
|
|
|
function commentLike(obj) {
|
|
obj.praised
|
|
? (obj.praiseNum = Number(obj.praiseNum) - 1)
|
|
: (obj.praiseNum = Number(obj.praiseNum) + 1);
|
|
obj.praised = !obj.praised;
|
|
request(COMMENT_PRAISE, { targetId: obj.id, type: 1 });
|
|
}
|
|
|
|
const reply1Show = ref(false);
|
|
const autofocus = ref(false);
|
|
function commentComment(obj) {
|
|
reply1Show.value = true;
|
|
// autofocus.value = true;
|
|
replayComment.value.placeholder = "@ " + obj.createName;
|
|
replayComment.value.pid = obj.id;
|
|
if (document.getElementsByClassName("replyInp")[0]) {
|
|
document
|
|
.getElementsByClassName("replyInp")[0]
|
|
.querySelector("input")
|
|
.focus();
|
|
}
|
|
|
|
console.log("获得焦点", document.getElementsByClassName("replyInp")[0]);
|
|
}
|
|
function reply1Blur() {
|
|
reply1Show.value = false;
|
|
console.log("失去焦点");
|
|
}
|
|
// function reply1Focus() {
|
|
// reply1Show.value = true;
|
|
// autofocus.value = true;
|
|
// }
|
|
|
|
// 提交评论
|
|
function submitComment() {
|
|
console.log(disDetail.value, fileListComment.value);
|
|
let imgFileUrl = [];
|
|
for (let i = 0; i < fileListComment.value.length; i++) {
|
|
imgFileUrl.push(fileListComment.value[i].url);
|
|
}
|
|
console.table("帖子评论参数", {
|
|
id: disDetail.value.id,
|
|
targetId: disDetail.value.id,
|
|
content: disComment.value.content,
|
|
type: 1,
|
|
img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
|
|
});
|
|
if (!disComment.value.content && imgFileUrl.length === 0)
|
|
return ElMessage.success("请输入评论内容");
|
|
request(COMMENT_ADD, {
|
|
targetId: disDetail.value.id,
|
|
content: disComment.value.content,
|
|
type: 1,
|
|
img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
|
|
})
|
|
.then((res) => {
|
|
console.log("评论发表成功", res);
|
|
ElMessage.success("发布成功");
|
|
hfPage.value.pageNo = 1;
|
|
hfPage.value.currentPage = 1;
|
|
commontList.value = [];
|
|
getData();
|
|
})
|
|
.catch((err) => {
|
|
console.log("评论发表失败", err);
|
|
});
|
|
}
|
|
|
|
// 回复评论
|
|
function submitReplayComment() {
|
|
let imgFileUrl = [];
|
|
for (let i = 0; i < fileListCommentRelpay.value.length; i++) {
|
|
imgFileUrl.push(fileListCommentRelpay.value[i].url);
|
|
}
|
|
|
|
console.table("帖子回复评论参数", {
|
|
id: disDetail.value.id,
|
|
targetId: disDetail.value.id,
|
|
content: replayComment.value.content,
|
|
type: 1,
|
|
pid: replayComment.value.pid,
|
|
img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
|
|
});
|
|
if (!replayComment.value.content && imgFileUrl.length === 0)
|
|
return ElMessage.success("请输入回复内容");
|
|
request(COMMENT_ADD, {
|
|
targetId: disDetail.value.id,
|
|
content: replayComment.value.content,
|
|
type: 1,
|
|
pid: replayComment.value.pid,
|
|
img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
|
|
})
|
|
.then((res) => {
|
|
console.log("回复成功", res);
|
|
// getData();
|
|
ElMessage.success("回复成功");
|
|
for (let i = 0; i < commontList.value.length; i++) {
|
|
if (commontList.value[i].id === replayComment.value.pid) {
|
|
let obj = {
|
|
studentAvatar: userInfo.value.avatar,
|
|
studentName: userInfo.value.realName,
|
|
content: replayComment.value.content,
|
|
};
|
|
commontList.value[i].children.push(obj);
|
|
}
|
|
}
|
|
clearText();
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
//发布
|
|
function send() {
|
|
if (reply1Show.value) {
|
|
console.log("回复--------");
|
|
submitReplayComment();
|
|
} else {
|
|
console.log("评论--------");
|
|
submitComment();
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.CommentReply {
|
|
width: 100%;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
margin-top: 10px;
|
|
background: #fff;
|
|
.reshead {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
margin-bottom: 10px;
|
|
.headn {
|
|
width: 90%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.pl {
|
|
color: #0d233a;
|
|
font-size: 16px;
|
|
line-height: 50px;
|
|
}
|
|
.ts {
|
|
color: #6e7b84;
|
|
font-size: 13px;
|
|
line-height: 50px;
|
|
}
|
|
}
|
|
.reply {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 90%;
|
|
position: absolute;
|
|
}
|
|
.imgbtns {
|
|
width: 90%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
// margin-top: 10px;
|
|
.cha {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
// right: 0;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
background-image: url(../../assets/image/discuss/close.png);
|
|
background-size: 100%;
|
|
}
|
|
.btns {
|
|
display: flex;
|
|
}
|
|
.btns1 {
|
|
width: 50px;
|
|
height: 25px;
|
|
border: 1px solid #999999;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-right: 16px;
|
|
}
|
|
.btns2 {
|
|
width: 50px;
|
|
height: 25px;
|
|
background: #2478ff;
|
|
border: 1px solid #2478ff;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.linee {
|
|
height: 0;
|
|
width: 100%;
|
|
border-top: 1px solid #f1f2f3;
|
|
}
|
|
.restorebox {
|
|
width: 100%;
|
|
// height: 200px;
|
|
border-top: 1px solid #f1f2f3;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
.restoremani {
|
|
width: 90%;
|
|
margin-top: 17px;
|
|
position: relative;
|
|
.rescon {
|
|
position: relative;
|
|
width: 100%;
|
|
// height: 100px;
|
|
// background-color: #bfa;
|
|
.head {
|
|
display: flex;
|
|
width: 100%;
|
|
.headavator {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
}
|
|
.namehead {
|
|
margin-left: 5px;
|
|
color: #02172a;
|
|
font-size: 14px;
|
|
line-height: 36px;
|
|
}
|
|
}
|
|
.inner {
|
|
margin-top: 8px;
|
|
margin-left: 36px;
|
|
|
|
.recon {
|
|
margin-top: 7px;
|
|
color: #5f6d75;
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
}
|
|
.botto {
|
|
display: flex;
|
|
margin-top: 20px;
|
|
position: relative;
|
|
.time {
|
|
color: #5f6d75;
|
|
font-size: 14px;
|
|
margin-right: 16.5px;
|
|
}
|
|
.re {
|
|
color: #00152a;
|
|
font-size: 14px;
|
|
margin-top: -2px;
|
|
}
|
|
.right {
|
|
display: flex;
|
|
position: absolute;
|
|
right: 0;
|
|
.good {
|
|
margin-top: -2px;
|
|
}
|
|
.gocount {
|
|
color: #4e5e67;
|
|
font-size: 13px;
|
|
margin-left: 6.5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.newre {
|
|
margin-top: 7.5px;
|
|
padding-bottom: 20px;
|
|
.tri {
|
|
margin-left: 80px;
|
|
height: 0px;
|
|
width: 0px;
|
|
border-bottom: 10px solid #f0f3f6;
|
|
border-left: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
}
|
|
.reccon {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: right;
|
|
// padding-bottom: 20px;
|
|
.rec {
|
|
background-color: #f0f3f6;
|
|
border-radius: 13px;
|
|
width: 90%;
|
|
.it {
|
|
margin-left: 12.5px;
|
|
width: 92%;
|
|
// display: flex;
|
|
margin-top: 20px;
|
|
// margin-bottom: 20px;
|
|
.ava {
|
|
// margin-top: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
.avainner {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
}
|
|
.rename {
|
|
color: #02172a;
|
|
font-size: 14px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
.redetail {
|
|
width: 100%;
|
|
margin-left: 12.5px;
|
|
|
|
.rein {
|
|
color: #5f6d75;
|
|
font-size: 14px;
|
|
margin-top: 16.5px;
|
|
}
|
|
.detre {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
.day {
|
|
color: #5f6d75;
|
|
font-size: 14px;
|
|
margin-right: 14px;
|
|
}
|
|
.huifu {
|
|
color: #00152a;
|
|
font-size: 14px;
|
|
}
|
|
.good {
|
|
position: absolute;
|
|
right: 2px;
|
|
display: flex;
|
|
.gimg {
|
|
width: 14px;
|
|
height: 15px;
|
|
}
|
|
.gcou {
|
|
color: #4e5e67;
|
|
font-size: 13px;
|
|
margin-top: 2px;
|
|
margin-left: 7px;
|
|
}
|
|
}
|
|
}
|
|
.line {
|
|
// margin-top: 24.5px;
|
|
margin-left: -45px;
|
|
height: 0;
|
|
width: 117%;
|
|
border-top: 1px solid #dcdedf;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btncon {
|
|
width: 100%;
|
|
height: 60px;
|
|
position: relative;
|
|
.btnn {
|
|
margin-top: 30px;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
border: 0;
|
|
background-color: #fff;
|
|
color: #2478ff;
|
|
}
|
|
}
|
|
.reply1 {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
position: absolute;
|
|
bottom: 100px;
|
|
}
|
|
}
|
|
</style> |