A1300399510/PC-vote
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Details): 新增投票详情页管理功能和评论优化

Browse Source 
- 添加投票详情页的管理功能，包括隐藏、推荐、精华和删除操作
- 优化评论组件，支持多图上传和显示
- 新增投币功能组件
- 更新API接口调用方式，适配新后端接口
- 完善用户权限管理逻辑
- 修复样式问题和交互体验
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-11-11 19:05:46 +08:00
parent ad6d186301
commit 68000d7e43
14 changed files with 839 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
components/DetailsArea.vue
View File

@@ -14,33 +14,31 @@
</el-popover>
</div>
<div class="floor-left flexacenter">
<div class="item flexacenter" style="cursor: auto">
<img class="icon" src="@/assets/img/eye-icon-black.svg" />
<div>{{ info["views"] }}</div>
</div>
<div class="item flexacenter" @click="handleLike">
<img class="icon pitch" v-if="islike == 1" src="@/assets/img/like-red-pitch.png" />
<img class="icon" v-else src="@/assets/img/like-icon.png" />
<div>{{ info["likes"] || "" }}</div>
<div>{{ topicInfo["likes"] || "赞" }}</div>
</div>
<div class="item flexacenter" @click="handleCollect()">
<img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
<img class="icon" v-else src="@/assets/img/collect-icon.png" />
<div>{{ info["favs"] || "收藏" }}</div>
<div>{{ topicInfo["collections"] || "收藏" }}</div>
</div>
<div class="item flexacenter" style="cursor: auto">
<img class="icon" src="@/assets/img/discuss-icon.png" />
<div>{{ commentComments }}</div>
<div>{{ commentTotalCount || "讨论" }}</div>
</div>
<div class="item flexacenter" style="cursor: auto">
<img class="icon" src="@/assets/img/discuss-icon.png" />
<div>{{ commentComments }}</div>
<div class="item flexacenter" style="cursor: auto" @click="openBi()">
<img class="icon" src="@/assets/img/bi-black-icon.png" />
<div>{{ topicInfo.coins || "投币" }}</div>
</div>
<ClientOnly>
<el-popover placement="bottom" width="628px" trigger="click" popper-style="padding: 0;border-radius: 10px;" v-model:visible="transmitBoxState">
<template #reference>
<div class="item flexacenter" @click="handleShare"><img class="icon" src="@/assets/img/transmit-icon.png" />转发</div>
<div class="item flexacenter" @click="handleShare">
<img class="icon" src="@/assets/img/transmit-icon.png" />转发
</div>
</template>
<div class="transmit-box flexflex">
@@ -51,7 +49,9 @@
<div class="transmit-headline">{{ info["title"] }}</div>
<div class="transmit-url">{{ getFullUrl() }}</div>
</div>
<div class="transmit-web-btn flexcenter" @click="copyText(`${info['title']} + ${getFullUrl()}`)">复制链接</div>
<div class="transmit-web-btn flexcenter" @click="copyText(`${info['title']} + ${getFullUrl()}`)">
复制链接
</div>
</div>
<div class="transmit-right transmit-mini">
<div class="transmit-title">转发小程序版</div>
@@ -86,6 +86,8 @@
</div>
</div>
<Like v-if="isLikeGif"></Like>
<bi-card :coins="topicInfo.coins" :token="topicToken"></bi-card>
</template>
<script setup>
@@ -94,8 +96,11 @@ import { ElMessage } from "element-plus";
let props = defineProps({
ripostecount: Object,
commentComments: Number,
});
let topicInfo = inject("topicInfo");
const respondShowState = ref(false);
let openAttest = inject("openAttest");
@@ -110,6 +115,7 @@ let islike = inject("islike");
let iscollection = inject("iscollection");
let qrcode = inject("qrcode");
let token = inject("token");
let topicToken = inject("topicToken");
const topHeadRef = inject("topHeadRef");
const isLoaded = inject("isLoaded");
@@ -158,14 +164,14 @@ const handleCollect = () => {
topHeadRef.value.count = {};
operateCollectHttp({ token: token.value }).then((res) => {
operateCollectHttp({ token: topicToken.value }).then((res) => {
if (res.code != 200) {
ElMessage.error(res["message"]);
return;
}
let data = res.data;
info.value["favs"] = data["count"];
topicInfo.value["collections"] = data["collections"];
iscollection.value = data["status"];
ElMessage.success(res["message"]);
@@ -195,7 +201,7 @@ const handleLike = () => {
return;
}
operateLikeHttp({ token: token.value }).then((res) => {
operateLikeHttp({ token: topicToken.value }).then((res) => {
if (res.code != 200) {
ElMessage.error(res.message);
return;
@@ -204,7 +210,7 @@ const handleLike = () => {
let data = res.data;
const status = data["status"];
info.value["likes"] = data["count"];
topicInfo.value["likes"] = data["likes"];
islike.value = status;
ElMessage.success(res.message);
@@ -227,7 +233,7 @@ const emit = defineEmits(["closeDiscussInputFields"]);
// // 点击底部调用关闭讨论输入框
const closeDiscussInputFields = () => emit("closeDiscussInputFields");
onMounted(() => {});
onMounted(() => { });
watch(isLoaded, (newValue, oldValue) => {
if (newValue === true) {
@@ -262,6 +268,15 @@ onBeforeUnmount(() => {
const randomBottomEmojis = inject("randomBottomEmojis");
const selectEomji = inject("selectEomji");
const jointriposte = inject("jointriposte");
const openBi = () => {
if (isNeedLogin.value) {
goLogin();
return;
}
BiComponent.initComponent();
}
</script>
<style scoped lang="less">
@@ -281,12 +296,15 @@ const jointriposte = inject("jointriposte");
-webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
display: none;
&.show {
display: flex;
animation: animafloor 1s forwards;
animation-timing-function: cubic-bezier(0.98, -0.2, 0.55, 0.97); /* 先快后慢的时间曲线 */
animation-timing-function: cubic-bezier(0.98, -0.2, 0.55, 0.97);
/* 先快后慢的时间曲线 */
animation-fill-mode: both;
}
.floor-content {
width: 1200px;
height: 100%;
@@ -294,6 +312,7 @@ const jointriposte = inject("jointriposte");
padding: 0 30px;
display: flex;
justify-content: space-between;
.floor-left {
margin-left: 30px;
// flex: 1;
@@ -301,8 +320,8 @@ const jointriposte = inject("jointriposte");
.item {
cursor: pointer;
color: #aaaaaa;
font-size: 13px;
color: #333333;
font-size: 14px;
margin-right: 50px;
.icon {
@@ -316,9 +335,11 @@ const jointriposte = inject("jointriposte");
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
@@ -365,6 +386,7 @@ const jointriposte = inject("jointriposte");
border-radius: 152px;
background-color: #fff;
border: 1px solid rgba(215, 215, 215, 1);
.avatar {
width: 28px;
height: 28px;
@@ -378,6 +400,7 @@ const jointriposte = inject("jointriposte");
outline: none;
padding: 0 12px;
font-size: 14px;
/deep/ .el-input__wrapper {
box-shadow: none;
padding: 0;
@@ -390,6 +413,7 @@ const jointriposte = inject("jointriposte");
background-color: var(--main-color);
border-radius: 20px;
cursor: pointer;
.comment-btn-icon {
width: 14px;
height: 15px;
@@ -417,6 +441,7 @@ const jointriposte = inject("jointriposte");
.respond-box {
display: flex;
justify-content: space-around;
.respond-item {
font-family: "emojifont";
font-size: 18px;

248
components/DetailsComments.vue
View File

@@ -8,10 +8,11 @@
<div class="top flexflex">
<textarea ref="editInputRef" class="input-textarea flex1" maxlength="500" v-model="editInput" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
</div>
<div class="picture-box" v-if="editPicture.url">
<div class="picture">
<img class="close" @click="closeEditFileUpload()" src="@/assets/img/close-icon.png" />
<img class="img" @click="handleAnswerText" :src="editPicture.base64 || editPicture.url" />
<div class="picture-box flexacenter" v-if="editPicture.length != 0">
<div class="picture" v-for="(item, index) in editPicture" :key="item.url">
<img class="close" @click="closeEditFileUpload(item.aid)" src="@/assets/img/close-icon.png" />
<img class="img" @click="handleAnswerText" :src="item.url" />
</div>
</div>
@@ -61,10 +62,10 @@
<img class="avatar" v-if="userInfoWin.avatar" :src="userInfoWin.avatar" />
<textarea class="input-textarea flex1" maxlength="500" v-model="commentInputTop" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
</div>
<div class="picture-box" v-if="picture.url">
<div class="picture">
<img class="close" @click="closeFileUpload()" src="@/assets/img/close-icon.png" />
<img class="img" @click="handleAnswerText" :src="picture.base64 || picture.url" />
<div class="picture-box flexacenter" v-if="picture.length != 0">
<div class="picture" v-for="(item, index) in picture" :key="index">
<img class="close" @click="closePictureUpload(index)" src="@/assets/img/close-icon.png" />
<img class="img" @click="handleAnswerText" :src="item.url" />
</div>
</div>
<div class="bottom flexacenter">
@@ -98,15 +99,15 @@
<div class="comment-item flexflex" v-for="(item, index) in commentList" :key="item.id">
<el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false" v-model:visible="item['popoverState']">
<template #reference>
<img class="comment-avatar" :src="item['avatar']" />
<img class="comment-avatar" :src="item.avatar || item.user['avatar']" />
</template>
<div class="avatar-box flexflex" v-if="item['uin']">
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item['uin'])">
<div class="avatar-box flexflex" v-if="item.uin || item.user['uin'] || item.uid || item.user['uid']">
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item.uin || item.user['uin'], item.uid || item.user['uid'])">
<img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
发送信息
</a>
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item['uin'])">
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item.uin || item.user['uin'], item.uid || item.user['uid'])">
<img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
TA的主页
</a>
@@ -115,11 +116,10 @@
<div class="comment-content flex1">
<div class="comment-header flexacenter">
<div class="comment-header-left flexacenter">
<div class="comments-username" @click="openAvatarPopover(index)">{{ item["nickname"] }}</div>
<div class="comments-time">{{ item["timestampnow"] || handleDate(item["timestamp"]) }}</div>
<div class="comments-identity" v-if="item['isauthor']">作者</div>
<!-- <img class="comments-title" v-if="item['groupid'] === 14" src="@/assets/img/title.png" /> -->
<img class="comments-title" v-if="item['groupimage']" :src="item.groupimage" :alt="item.grouptitle" />
<div class="comments-username" @click="openAvatarPopover(index)">{{ item.nickname || item.user["nickname"] || "匿名用户" }}</div>
<div class="comments-time">{{ item["timestamp"] }}</div>
<div class="comments-identity" v-if="item['isauthor'] == 1">作者</div>
<img class="comments-title" v-if="item.groupimage || item?.user?.groupimage" :src="item.groupimage || item?.user?.groupimage" :alt="item?.user?.grouptitle" style="height: 18px" />
</div>
<div class="comment-header-right flexacenter">
<div class="menu-box flexacenter">
@@ -130,7 +130,6 @@
<div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(item['token'], index)">删除</div>
</div>
</div>
<!-- <img class="comment-icon" title="回复" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" /> -->
<img class="comment-icon" title="回复" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
<div class="flexacenter like-box" @click="commentLike(index)">
<img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-red-pitch.png" />
@@ -139,19 +138,22 @@
</div>
</div>
</div>
<!-- shutAnswerCommentsChild openAnswerCommentsChild -->
<div class="comment-text" v-if="item['content']" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()">{{ item["content"] }}</div>
<img class="comments-img" @click="handleAnswerText" :src="item.image?.base64 || item.image?.url" v-if="item.image?.url" />
<!-- <img class="comments-img" @click="handleAnswerText" :src="item.image?.base64 || item.image?.url" v-if="item.image?.url" /> -->
<div class="comments-img-box">
<img class="comments-img" v-for="(item, index) in item.attachments.images" @click="handleAnswerText" :src="item.thumb || item.url" />
</div>
<div class="alreadyVoted" v-if="item.voteoption">已投：{{ item.voteoption }}</div>
<div class="input-box" v-if="item['childState']">
<img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" />
<div class="top flexflex">
<textarea class="input-textarea flex1" maxlength="500" placeholder="说说你的想法或疑问…" v-model="item['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
</div>
<div class="picture-box" v-if="item.picture?.url">
<div class="picture">
<img class="close" @click="closeFileUpload(index)" src="@/assets/img/close-icon.png" />
<img class="img" @click="handleAnswerText" :src="item.picture?.base64 || item.picture.url" />
<div class="picture-box flexacenter" v-if="item?.picture?.length != 0" style="width: 440px;">
<div class="picture" v-for="it in item.picture" :key="it.url">
<img class="close" @click="closeFileUpload(it.aid, index)" src="@/assets/img/close-icon.png" />
<img class="img" @click="handleAnswerText" :src="it.url" />
</div>
</div>
<div class="bottom flexacenter">
@@ -176,30 +178,21 @@
<div class="btn" @click="submitAnswerComments(item['commentInput'], index)">发送</div>
</div>
</div>
<!-- <div class="comments-input-masking" @click="closeAnswerCommentsChild()" v-if="item['childState']"></div>
<div class="comments-input-box" :class="{ 'comments-input-box-show': item['childState'] }">
<div class="comments-input">
<el-input v-model="commentInput" type="textarea" placeholder="回复" :maxlength="500" show-word-limit></el-input>
<div class="operate-bottom flexacenter">
<div class="comments-btn comments-btn-cancel flexcenter" @click="closeAnswerCommentsChild()">取消</div>
<div class="comments-btn flexcenter" @click="submitAnswerComments(commentInput, index)">发送</div>
</div>
</div>
</div> -->
<!-- 子评论 -->
<div class="child-comments" v-if="item['child'].length > 0">
<div class="comment-item flexflex" v-for="(ite, i) in item['child']" :key="ite.id">
<el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false" v-model:visible="ite['popoverState']">
<template #reference>
<img class="comment-avatar" :src="ite['avatar']" />
<img class="comment-avatar" :src="ite.avatar || ite.user['avatar']" />
</template>
<div class="avatar-box flexflex" v-if="ite['uin']">
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(ite['uin'])">
<div class="avatar-box flexflex" v-if="ite.uin || ite.user['uin'] || ite.uid || ite.user['uid']">
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(ite.uin || ite.user['uin'], ite.uid || ite.user['uid'])">
<img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
发送信息
</a>
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(ite['uin'])">
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(ite.uin || ite.user['uin'], ite.uid || ite.user['uid'])">
<img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
TA的主页
</a>
@@ -208,10 +201,10 @@
<div class="comment-content flex1">
<div class="comment-header flexacenter">
<div class="comment-header-left flexacenter">
<div class="comments-username" @click="openAvatarPopover(index, i)">{{ ite["nickname"] }}</div>
<div class="comments-time">{{ ite["timestampnow"] || handleDate(ite["timestamp"]) }}</div>
<div class="comments-username" @click="openAvatarPopover(index, i)">{{ ite.nickname || ite.user["nickname"] || "匿名用户" }}</div>
<div class="comments-time">{{ ite["timestamp"] }}</div>
<div class="comments-identity" v-if="ite['isauthor']">作者</div>
<img class="comments-title" v-if="ite['groupimage']" :src="ite.groupimage" :alt="ite.grouptitle" />
<img class="comments-title" v-if="ite.groupimage || ite.user?.groupimage" :src="ite.groupimage || ite.user?.groupimage" :alt="ite?.user?.grouptitle" style="height: 18px" />
</div>
<div class="comment-header-right flexacenter">
<div class="menu-box flexacenter">
@@ -234,19 +227,24 @@
<div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite?.reply?.nickname }}</div>
{{ ite["content"] }}
</div>
<img class="comments-img" @click="handleAnswerText" :src="ite.image?.base64 || ite.image?.url" v-if="ite.image?.url" />
<!-- <img class="comments-img" @click="handleAnswerText" :src="ite.image?.base64 || ite.image?.url" v-if="ite.image?.url" /> -->
<div class="comments-img-box">
<img class="comments-img" v-for="(item, index) in ite.attachments.images" @click="handleAnswerText" :src="ite.thumb || ite.url" />
</div>
<div class="alreadyVoted" v-if="ite.voteoption">已投：{{ ite.voteoption }}</div>
<div class="input-box" v-if="ite['childState']">
<img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" />
<div class="top flexflex">
<textarea class="input-textarea flex1" maxlength="500" :placeholder="'回复“' + (ite['nickname'] || '匿名用户') + '”：'" v-model="ite['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
<textarea class="input-textarea flex1" maxlength="500" :placeholder="'回复“' + (ite['nickname'] || ite.user['nickname'] || '匿名用户') + '”：'" v-model="ite['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
</div>
<div class="picture-box" v-if="ite.picture?.url">
<div class="picture">
<img class="close" @click="closeFileUpload(index, i)" src="@/assets/img/close-icon.png" />
<img class="img" @click="handleAnswerText" :src="ite.picture.base64 || ite.picture.url" />
<div class="picture-box flexacenter" v-if="ite.picture?.length != 0" style="width: 408px;">
<div class="picture" v-for="it in ite.picture" :key="it.url">
<img class="close" @click="closeFileUpload(it.aid, index, i)" src="@/assets/img/close-icon.png" />
<img class="img" @click="handleAnswerText" :src="it.url" />
</div>
</div>
<div class="bottom flexacenter">
<div class="operate flexacenter">
<div class="item" :class="{ pitch: ite.emojiState }">
@@ -348,14 +346,7 @@ watch(
onMounted(() => window.addEventListener("scroll", handleScroll));
let permissions = ref([]);
onMounted(() => {
setTimeout(() => {
permissions.value = window["permissions"] || [];
// permissions.value = ["comment.edit", "comment.delete"]
}, 1000);
});
let permissions = inject("permissions");
const sendMessage = inject("sendMessage");
const TAHomePage = inject("TAHomePage");
@@ -378,7 +369,7 @@ const getCommentList = () => {
commentListHttp({
page: commentPage.value,
childlimit: 1,
childlimit: 3,
limit: 10,
token: props.token,
})
@@ -386,6 +377,21 @@ const getCommentList = () => {
if (res.code != 200) return;
let data = res.data;
data.data.forEach((element, index) => {
element.timestamp = strtimeago(element.created_at, 4);
element["picture"] = [];
element["isReplyBoxShow"] = 0;
if (element.child.length > 0) {
element.child.forEach((el) => {
el["picture"] = [];
el.timestamp = strtimeago(element.created_at, 4);
el["isReplyBoxShow"] = 0;
});
}
});
commentCount.value = data["count"];
if (data["count"] == 0) isEmptyState.value = true;
else isEmptyState.value = false;
@@ -431,10 +437,10 @@ const commentLike = (index, i) => {
if (i != null) {
targetCommentList[index]["child"][i].islike = status;
targetCommentList[index]["child"][i].likenum = data["likenum"];
targetCommentList[index]["child"][i].likenum = data["count"];
} else {
targetCommentList[index].islike = status;
targetCommentList[index].likenum = data["likenum"];
targetCommentList[index].likenum = data["count"];
}
ElMessage.success(res.message);
@@ -487,7 +493,7 @@ let openAttest = inject("openAttest");
const realname = inject("realname");
// 提交回答-评论
const submitAnswerComments = (content, index, i) => {
const submitAnswerComments = (content = "", index, i) => {
console.log("submitAnswerComments", submitAnswerComments);
if (realname.value == 0 && userInfoWin.value.uin > 0) {
@@ -521,12 +527,16 @@ const submitAnswerComments = (content, index, i) => {
// ElMessage.error("请填写评论内容")
// return
// }
const attachments = {
images: image,
};
detailsSubmitommentListHttp({
content,
token: props.token,
parentid,
image: image ? { aid: image.aid, url: image.url } : null,
replyid: parentid,
attachments,
}).then((res) => {
if (res.code != 200) {
ElMessage.error(res.message);
@@ -534,6 +544,7 @@ const submitAnswerComments = (content, index, i) => {
}
let data = res.data;
const timestamp = strtimeago(new Date());
if (i != null) {
// console.log("targetCommentList[index]", targetCommentList[index])
@@ -551,10 +562,13 @@ const submitAnswerComments = (content, index, i) => {
},
voteoption: haveVotedValue.value || null,
...data,
// ...data.data
timestampnow: "刚刚",
uin: data.data?.uin,
image,
attachments,
picture: [],
timestamp,
uin: userInfoWin.value.uin,
uid: userInfoWin.value.uid,
};
targetCommentList[index]["child"].unshift(targetData);
@@ -567,12 +581,12 @@ const submitAnswerComments = (content, index, i) => {
islike: 0,
likenum: 0,
...data,
// ...data.data,
timestampnow: "刚刚",
uin: data.data?.uin,
timestamp,
child: [],
voteoption: haveVotedValue.value || null,
image,
attachments,
uin: userInfoWin.value.uin,
uid: userInfoWin.value.uid,
};
if (index != null) {
targetCommentList[index]["commentInput"] = "";
@@ -597,7 +611,7 @@ const submitAnswerComments = (content, index, i) => {
closeAnswerCommentsChild();
picture.value = {};
picture.value = [];
if (bottomNavigationState) {
bottomNavigationState = false;
@@ -620,7 +634,7 @@ const alsoCommentsData = (index, ind) => {
let page = targetCommentItem["childPage"] ?? 1;
detailsChildCommentListHttp({
childlimit: 1,
childlimit: 3,
limit: 10,
page,
parentid,
@@ -628,22 +642,32 @@ const alsoCommentsData = (index, ind) => {
}).then((res) => {
if (res.code != 200) return;
let data = res.data;
let childData = targetCommentItem.child.concat(data.data);
const filteredData = childData.filter((obj, index, self) => {
// 检查当前对象在数组中的第一个索引是否与当前索引相等
return self.findIndex((item) => item.id == obj.id) == index;
});
data.data.forEach((element, index) => {
element.timestamp = strtimeago(element.created_at, 4);
element["isReplyBoxShow"] = 0;
element["picture"] = [];
})
// let childData = targetCommentItem.child.concat(data.data);
targetCommentItem.child = filteredData;
targetCommentItem["childnum"] = data.count;
// const filteredData = childData.filter((obj, index, self) => {
// // 检查当前对象在数组中的第一个索引是否与当前索引相等
// return self.findIndex((item) => item.id == obj.id) == index;
// });
if (targetCommentItem.child.length == data["count"]) page = 0;
else page++;
// targetCommentItem.child = filteredData;
// targetCommentItem["childnum"] = data.count;
targetCommentItem["childPage"] = page;
// if (targetCommentItem.child.length == data["count"]) page = 0;
// else page++;
commentList.value[index] = targetCommentItem;
// targetCommentItem["childPage"] = page;
let merged = [...commentList.value[index]["child"], ...data.data.filter((item2) => !commentList.value[index]["child"].find((item1) => item1.id == item2.id))];
commentList.value[index]["child"] = merged;
// commentList.value[index] = targetCommentItem;
});
};
@@ -740,12 +764,11 @@ const postCommentFocusBlur = () => {
}, 200);
};
let picture = ref({});
let picture = ref([]);
let emojiState = ref(false);
let emojiMaskState = ref(false);
// , "🤝", "🙏", "💪", "❤️", "💔", "🌹", "🥀", "🎉", "🎁", "🧧", "🌙", "⭐", "🌍", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹"];
const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😘", "🤥", "😪", "😵‍💫", "🤓", "🥺", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❎️", "✳️", "✴️", "❇️", "#️⃣", "*️⃣", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟", "🆗", "🈶", "🉐", "🉑", "🌹", "🥀", "🌸", "🌺", "🌷", "🌲", "☘️", "🍀", "🍁", "🌙", "⭐", "🌍", "☀️", "⭐️", "🌟", "☁️", "🌈", "☂️", "❄️", "☃️", "☄️", "🔥", "💧", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹", "🍒", "🥝", "🥒", "🥦", "🥨", "🌭", "🥘", "🍱", "🍢", "🥮", "🍩", "🍪", "🧁", "🍵", "🍶", "🍻", "🥂", "🧋", "🎉", "🎁", "🧧", "🎃", "🎄", "🧨", "✨️", "🎈", "🎊", "🎋", "🎍", "🎀", "🎖️", "🏆️", "🏅", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🔮", "🧸", "🀄️"];
// 打开 Emoji
@@ -844,6 +867,8 @@ const handleInputPaste = (event, index, ii) => {
}
}
};
const maxPicture = ref(10);
const handleFileUpload = (event, index, i) => {
closeEmoji();
@@ -859,19 +884,36 @@ const handleFileUpload = (event, index, i) => {
return;
}
let target = [];
if (editCommentState.value) target = editPicture.value;
else {
if (i != undefined) target = commentList.value[index].child[i]["picture"];
else if (index != undefined) target = commentList.value[index]["picture"];
else target = picture.value;
}
console.log("target", target);
if (target.length >= maxPicture.value) {
creationAlertBox("error", `最多只能上传 ${maxPicture.value} 张图片`);
return;
}
const reader = new FileReader();
reader.onload = (e) => {
const base64 = e.target.result;
uploadImg(file).then((res) => {
const obj = {
base64,
...res,
aid: res.aid || "",
url: res.url || "",
};
if (editCommentState.value) editPicture.value = obj;
target.push(obj);
if (editCommentState.value) editPicture.value = target;
else {
if (i != undefined) commentList.value[index].child[i]["picture"] = obj;
else if (index != undefined) commentList.value[index]["picture"] = obj;
else picture.value = obj;
if (i != undefined) commentList.value[index].child[i]["picture"] = target;
else if (index != undefined) commentList.value[index]["picture"] = target;
else picture.value = target;
}
ElMessage.success("上传成功");
});
@@ -880,12 +922,22 @@ const handleFileUpload = (event, index, i) => {
};
// 删除上传的图片
const closeFileUpload = (index, i) => {
if (i != undefined) commentList.value[index].child[i]["picture"] = {};
else if (index != undefined) commentList.value[index]["picture"] = {};
else picture.value = {};
const closeFileUpload = (aid, index, i) => {
let target = [];
if (i != undefined) target = [...commentList.value[index].child[i]["picture"]];
else if (index != undefined) target = [...commentList.value[index]["picture"]];
else target = [...picture.value];
let sub = target.findIndex((item) => item.aid == aid);
if (sub != -1) target.splice(sub, 1);
if (i != undefined) commentList.value[index].child[i]["picture"] = target;
else if (index != undefined) commentList.value[index]["picture"] = target;
else picture.value = target;
};
const closePictureUpload = (index) => picture.value.splice(index, 1);
// 上传图片 获取图片url
const uploadImg = (file) => {
return new Promise((resolve, reject) => {
@@ -1100,15 +1152,18 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption, reviewsComment, b
.automatic-reviews-popup {
border-radius: 10px !important;
padding: 0 !important;
.automatic-header {
padding: 20px;
border-bottom: 1px dotted #ebebeb;
.automatic-title {
font-weight: 650;
font-size: 18px;
color: #000000;
margin-bottom: 12px;
}
.automatic-have {
background-color: rgba(246, 246, 246, 1);
font-size: 12px;
@@ -1131,9 +1186,11 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption, reviewsComment, b
width: fit-content;
}
}
.automatic-bottom {
justify-content: flex-end;
padding: 0 10px 10px;
.automatic-send {
background-color: var(--main-color);
color: #fff;
@@ -1148,15 +1205,18 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption, reviewsComment, b
.emoji-popover {
box-sizing: border-box;
* {
box-sizing: border-box;
}
padding: 0px !important;
border-radius: 10px !important;
border: 1px solid #ebebeb !important;
.el-popper__arrow {
z-index: 1;
&:before {
background-color: #fff;
border-top-color: #fff !important;

1
components/Like.vue
View File

@@ -37,5 +37,6 @@ onUnmounted(() => {
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
z-index: 10;
}
</style>