169 lines
4.6 KiB
Vue
169 lines
4.6 KiB
Vue
<template>
|
|
<div class="review">
|
|
<div class="top">
|
|
<div class="title">
|
|
该视频评价
|
|
<span>8.0分</span>
|
|
</div>
|
|
<div class="score">8.0分</div>
|
|
</div>
|
|
<div class="list" v-for="(i,j) in reviewlist.data" :key="j" >
|
|
<ReviewItem
|
|
:photo="i.img"
|
|
:username="i.name"
|
|
:score="i.score"
|
|
:content="i.content"
|
|
:date="i.created_at"
|
|
:memberid="i.memberid"
|
|
:replyid="i.commentid"
|
|
@replying="reply"
|
|
@findall="findreply"
|
|
></ReviewItem>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="reply">
|
|
<span v-if="uinfo.name">@{{uinfo.name}}</span>
|
|
<a-textarea v-model:value="commentval" placeholder="Basic usage" :rows="4" />
|
|
<div class="send" @click="send">发表留言</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.review{
|
|
width: 1320px;
|
|
background-color: #fff;
|
|
padding: 0 28px 56px 28px;
|
|
border-radius: 17px;
|
|
.top{
|
|
padding: 28px 0 18px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #ededed;
|
|
margin-bottom: 20px;
|
|
.title{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: #111;
|
|
>span{
|
|
width: 56px;
|
|
height: 17px;
|
|
background-color: #F9D5D6;
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
line-height: 17px;
|
|
text-align: center;
|
|
margin-left: 6px;
|
|
color: #D12B2D;
|
|
}
|
|
}
|
|
.score{
|
|
font-size: 12px;
|
|
color: #D12B2D;
|
|
|
|
}
|
|
}
|
|
.reply{
|
|
padding-top: 28px;
|
|
border-top: 1px solid #ededed;
|
|
::v-deep(.ant-input){
|
|
font-size: 11px;
|
|
}
|
|
.send{
|
|
width: 62px;
|
|
height: 22px;
|
|
margin-top: 30px;
|
|
background-color: #07AD97;
|
|
text-align: center;
|
|
line-height: 22px;
|
|
color: #fff;
|
|
font-size: 9px;
|
|
|
|
}
|
|
}
|
|
.huifu{
|
|
margin-left: 56px;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
<script lang="ts">
|
|
import { addcomment, getcommentlist, videodetail } from '@/api';
|
|
import store from '@/store';
|
|
import { defineComponent, onMounted, ref, toRaw } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import ReviewItem from "./ReviewItem.vue"
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
ReviewItem
|
|
|
|
},
|
|
props: {
|
|
videoid: {
|
|
type: Number
|
|
}
|
|
},
|
|
setup(prop,context){
|
|
const reviewlist=ref({})
|
|
const commentval=ref<string>('')
|
|
const uinfo=ref<any>({})
|
|
const replylist =ref({})
|
|
const videoid=ref(useRoute().query.id)
|
|
onMounted(async () => {
|
|
reviewlist.value=await getcommentlist({type: 2,id: videoid.value})
|
|
})
|
|
console.log(useRoute().query)
|
|
console.log(store.state.userinfo.memberid,"userifno")
|
|
interface SendData{
|
|
type?: number;
|
|
cid?: number;
|
|
teacherid?: number;
|
|
score?: number;
|
|
content?: string;
|
|
}
|
|
function send(){
|
|
const data = ref<SendData>({})
|
|
data.value.type=3;
|
|
data.value.cid=uinfo.value.replyid
|
|
// data.value.teacherid=uinfo.value.memberid
|
|
// data.value.score=uinfo.value.score
|
|
data.value.content=commentval.value
|
|
console.log(data.value,2221)
|
|
addcomment(toRaw(data.value))
|
|
|
|
}
|
|
async function refresh(e?: any){
|
|
console.log("rekload")
|
|
reviewlist.value=await getcommentlist({type: 2,id: videoid.value})
|
|
replylist.value=await getcommentlist({type: 3,id: e})
|
|
}
|
|
const reply: (val: number) => void = (val: number) => {
|
|
console.log("收到子组件事件", val)
|
|
uinfo.value=val
|
|
}
|
|
const haslist=ref([])
|
|
const findreply: (e: any) => void = async (e: any) => {
|
|
console.log("收到子组件事件", e)
|
|
replylist.value=await getcommentlist({type: 3,id: e})
|
|
}
|
|
console.log(1)
|
|
return {
|
|
commentval,
|
|
send,
|
|
reply,
|
|
uinfo,
|
|
findreply,
|
|
replylist,
|
|
haslist,
|
|
reviewlist,
|
|
refresh
|
|
|
|
|
|
}
|
|
}
|
|
})
|
|
</script> |