xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:修复评论的一系列问题

Browse Source
This commit is contained in:
Xwen
2023-12-16 11:15:28 +08:00
parent 3d451824f3
commit 49c5a7289c
2 changed files with 129 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Yi.Bbs.Vue3/src/apis/commentApi.js
View File

@@ -15,9 +15,10 @@ export function add(data) {
});
}
export function del(ids) {
export function del(data) {
return request({
url: `/comment/${ids}`,
url: `/comment`,
method: "delete",
data: data,
});
}

198
Yi.Bbs.Vue3/src/components/CommentInfo.vue
View File

@@ -5,22 +5,30 @@
</el-tabs>
<div class="total">
<div style="align-self: center;"> 共{{total}}个评论</div>
<div> <el-radio-group v-model="selectRadio">
<div style="align-self: center">共{{ total }}个评论</div>
<div>
<el-radio-group v-model="selectRadio">
<el-radio-button label="new" name="new">最新</el-radio-button>
<el-radio-button label="host" name="host">最热</el-radio-button>
</el-radio-group></div>
</el-radio-group>
</div>
</div>
<el-divider />
<div v-hasPer="['bbs:comment:add']">
<el-input
v-model="topContent"
placeholder="发表一个友善的评论吧~"
:rows="5"
type="textarea"
></el-input>
<el-button @click="addTopComment" type="primary" class="btn-top-comment"
>发表评论</el-button
>
<el-button class="btn-top-comment">其他</el-button>
<el-divider />
<div v-hasPer="['bbs:comment:add']">
<el-input v-model="topContent" placeholder="发表一个友善的评论吧~" :rows="5" type="textarea"></el-input>
<el-button @click="addTopComment" type="primary" class="btn-top-comment" >发表评论</el-button>
<el-button class="btn-top-comment">其他</el-button>
<el-divider />
</div>
<el-divider />
</div>
<!-- 开始评论主体 -->
@@ -30,72 +38,123 @@
{{ item.content }}
</div>
<span class="time"> {{ item.creationTime }} </span>
<span class="pointer"><el-icon>
<span class="pointer"
><el-icon>
<Pointer />
</el-icon> 0</span>
<el-button type="primary" @click="replay(item.createUser.nick, item.id, item.id)" size="large" text v-hasPer="['bbs:comment:add']">回复</el-button>
<el-button type="danger" @click="delComment(item.id)" size="large" text v-hasPer="['bbs:comment:remove']">删除</el-button>
</el-icon>
0</span
>
<el-button
type="primary"
@click="replay(item.createUser.nick, item.id, item.id)"
size="large"
text
v-hasPer="['bbs:comment:add']"
>回复</el-button
>
<el-button
type="danger"
@click="delComment(item.id)"
size="large"
text
v-hasPer="['bbs:comment:remove']"
>删除</el-button
>
<div v-show="replayId == item.id" class="input-reply">
<el-input v-model="form.content" :placeholder="placeholder" :rows="3" type="textarea"></el-input>
<el-input
v-model="form.content"
:placeholder="placeholder"
:rows="3"
type="textarea"
></el-input>
<div class="btn-reply">
<el-button @click="addComment" type="primary" v-hasPer="['bbs:comment:add']">回复</el-button>
<el-button
@click="addComment"
type="primary"
v-hasPer="['bbs:comment:add']"
>回复</el-button
>
</div>
</div>
<!-- 开始子评论主体 -->
<div v-for="children in item.children" :key="children.id" class="comment2">
<div style="display: flex ;">
<div style="display: flex">
<AvatarInfo :userInfo="children.createUser" />
<span style="align-self: center;color:#606266;"> 回复@{{ children.commentedUser.nick }}</span>
<span style="align-self: center; color: #606266">
回复@{{ children.commentedUser.nick }}</span
>
</div>
<div class="content">
{{ children.content }}
</div>
<span class="time">{{ children.creationTime }} </span>
<span class="pointer"> <el-icon>
<Pointer />
</el-icon>0</span>
<el-button type="primary" @click="replay(children.createUser.nick, children.id, item.id)" size="large" text v-hasPer="['bbs:comment:add']">回复</el-button>
<el-button type="danger" @click="delComment(children.id)" size="large" text v-hasPer="['bbs:comment:remove']">删除</el-button>
<span class="pointer">
<el-icon> <Pointer /> </el-icon>0</span
>
<el-button
type="primary"
@click="replay(children.createUser.nick, children.id, item.id)"
size="large"
text
v-hasPer="['bbs:comment:add']"
>回复</el-button
>
<el-button
type="danger"
@click="delComment(children.id)"
size="large"
text
v-hasPer="['bbs:comment:remove']"
>删除</el-button
>
<div v-show="replayId == children.id" class="input-reply">
<el-input v-model="form.content" :placeholder="placeholder" :rows="3" type="textarea"></el-input>
<div class="btn-reply">
<el-button @click="addComment" type="primary" v-hasPer="['bbs:comment:add']">回复</el-button>
<el-input
v-model="form.content"
:placeholder="placeholder"
:rows="3"
type="textarea"
></el-input>
<div class="btn-reply">
<el-button
@click="addComment"
type="primary"
v-hasPer="['bbs:comment:add']"
>回复</el-button
>
</div>
</div>
</div>
</div>
<el-divider />
</div>
<el-empty v-show="commentList.length<=0" description="评论空空如也，快来抢占沙发~" />
<el-empty
v-show="commentList.length <= 0"
description="评论空空如也，快来抢占沙发~"
/>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getListByDiscussId, add ,del} from "@/apis/commentApi.js";
import AvatarInfo from './AvatarInfo.vue';
import { getListByDiscussId, add, del } from "@/apis/commentApi.js";
import AvatarInfo from "./AvatarInfo.vue";
//数据定义
const route = useRoute();
const router = useRouter();
const commentList = ref([]);
const query = reactive({});
const topContent=ref('');
const topContent = ref("");
//当前回复id
const replayId = ref('');
const replayId = ref("");
//回复文本框
const placeholder = ref('')
const placeholder = ref("");
//选择类型：评论
const activeName = ref('comment');
const activeName = ref("comment");
//选择 最新
const selectRadio = ref('new');
const selectRadio = ref("new");
//评论总数
const total=ref(0);
const total = ref(0);
const form = reactive({
content: "",
discussId: route.params.discussId,
@@ -107,57 +166,53 @@ onMounted(async () => {
await loadComment();
});
const loadComment = async () => {
topContent.value='';
form.content = '';
topContent.value = "";
form.content = "";
const response = await getListByDiscussId(route.params.discussId, query);
commentList.value = response.data.items;
total.value=response.data.total
total.value = response.data.total;
};
const addTopComment = async () => {
form.parentId = 0;
form.rootId = 0;
form.content=topContent.value;
form.parentId = "00000000-0000-0000-0000-000000000000";
form.rootId = "00000000-0000-0000-0000-000000000000";
form.content = topContent.value;
await addComment();
}
};
const addComment = async () => {
if(form.content.length<=0)
{
ElMessage.error('输入评论不能为空!')
return
if (form.content.length <= 0) {
ElMessage.error("输入评论不能为空!");
return;
}
await add(form);
await loadComment();
ElMessage({
message: '评论发表成功!',
type: 'success',
})
message: "评论发表成功!",
type: "success",
});
};
const delComment=async(ids)=>{
const delComment = async (ids) => {
ElMessageBox.confirm(`确定是否删除编号[${ids}]的评论吗?`, "警告", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
}).then(async () => {
await del(ids);
await loadComment();
ElMessage({
message: '评论已删除!',
type: 'success',
})
await del({ id: [ids] });
await loadComment();
ElMessage({
message: "评论已删除!",
type: "success",
});
});
}
};
const replay = async (parentUserName, parentId, rootId) => {
replayId.value = parentId;
form.parentId = parentId;
form.rootId = rootId;
placeholder.value = `回复@${parentUserName}`;
}
};
//切换 评论、相关内容
const handleClick = () => { }
const handleClick = () => {};
</script>
<style scoped>
.input-reply {
@@ -175,7 +230,7 @@ const handleClick = () => { }
}
.time {
color: #8C8C8C;
color: #8c8c8c;
}
.content {
@@ -186,7 +241,6 @@ const handleClick = () => { }
display: flex;
justify-content: space-between;
}
.comment2 {
@@ -201,4 +255,4 @@ const handleClick = () => { }
margin-top: 0.5rem;
margin-right: 1rem;
}
</style>
</style>