114 lines
2.2 KiB
Vue
114 lines
2.2 KiB
Vue
<template>
|
|
<view class="diss-box">
|
|
<view class="discussionsBox-bxo"
|
|
v-for="(item, index) in list" :key="index"
|
|
>
|
|
<DiscussionsBox :data="item" @clickHf="addComment"></DiscussionsBox>
|
|
</view>
|
|
</view>
|
|
<InputBox v-if="inputVisible" @submit="submitNote" @blurCom="blurCom"></InputBox>
|
|
<view class="input-di">
|
|
<view class="input-di-button" @click="addComment()">发表讨论</view>
|
|
</view>
|
|
<view class="di"></view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import CommentItem from './CommentItem.vue';
|
|
import {getDiscussionList ,addDiscussion}from'@/apis/discussion.js'
|
|
const list=ref([]);
|
|
const inputVisible=ref(false);
|
|
//是否可以开启输入框
|
|
const iskDk=ref(true)
|
|
//当前回复id
|
|
const currId=ref(null);
|
|
const getDiscussionListData=async()=>{
|
|
let res=await getDiscussionList();
|
|
if(res.code==200){
|
|
list.value=res.data;
|
|
}
|
|
}
|
|
//添加评论
|
|
const submitNote=async(val)=>{
|
|
let res=await addDiscussion({
|
|
parentId:currId.value,
|
|
content:val
|
|
});
|
|
getDiscussionListData();
|
|
inputVisible.value=false;
|
|
iskDk.value=false;
|
|
setTimeout(()=>{
|
|
iskDk.value=true;
|
|
},4000);
|
|
currId.value=null;
|
|
}
|
|
//关闭输入框
|
|
const blurCom=()=>{
|
|
inputVisible.value=false;
|
|
}
|
|
const addComment=(id)=>{
|
|
if(!iskDk.value){
|
|
return ;
|
|
}
|
|
if(id!=undefined){
|
|
currId.value=id;
|
|
}
|
|
inputVisible.value=true;
|
|
}
|
|
onMounted(()=>{
|
|
getDiscussionListData();
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.diss-box{
|
|
display: flex;
|
|
flex-flow: column;
|
|
// background-color: #000000;
|
|
|
|
}
|
|
.discussionsBox-bxo{
|
|
width: 95%;
|
|
// height: 90vh;
|
|
// background-color: #000;
|
|
margin: 90rpx auto;
|
|
}
|
|
.input-di {
|
|
display: flex;
|
|
position: fixed;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
bottom: 0;
|
|
height: 10vh;
|
|
width: 100%;
|
|
background-color: #A8E6CF;
|
|
border-radius: 20rpx 20rpx 10rpx 10rpx;
|
|
}
|
|
.di {
|
|
height: 10vh;
|
|
width: 100%;
|
|
}
|
|
|
|
.input-di-ico {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 30%;
|
|
}
|
|
|
|
.input-di-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 50%;
|
|
width: 30%;
|
|
margin-right: 20rpx;
|
|
// margin-left: auto;
|
|
background-color: #000;
|
|
color: #fff;
|
|
border-radius: 40rpx;
|
|
margin: auto;
|
|
}
|
|
</style>
|