151 lines
3.8 KiB
Vue
151 lines
3.8 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">
|
|
<ReviewItem v-for="(i,j) in reviewlist"
|
|
:key="j"
|
|
:photo="i.img"
|
|
:username="i.name"
|
|
:score="i.score"
|
|
:content="i.content"
|
|
:date="i.created_at"
|
|
:memberid="i.memberid"
|
|
@replying="reply"></ReviewItem>
|
|
<!-- <div class="huifu">
|
|
<ReviewItemtwo></ReviewItemtwo>
|
|
<ReviewItemtwo></ReviewItemtwo>
|
|
</div> -->
|
|
|
|
</div>
|
|
|
|
<div class="reply">
|
|
@{{uinfo.name}}
|
|
<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 } from '@/api';
|
|
import { defineComponent, ref, toRaw } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import ReviewItem from "./ReviewItem.vue"
|
|
// import ReviewItemtwo from "./ReviewItemtwo.vue"
|
|
export default defineComponent({
|
|
components:{
|
|
ReviewItem,
|
|
// ReviewItemtwo
|
|
},
|
|
props:{
|
|
reviewlist:{
|
|
type:Array
|
|
},
|
|
videoid:{
|
|
type:Number
|
|
}
|
|
},
|
|
setup(prop){
|
|
const commentval=ref<string>('')
|
|
const uinfo=ref<any>({})
|
|
console.log(useRoute().query)
|
|
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=prop.videoid
|
|
// 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))
|
|
|
|
}
|
|
const reply: (val: number) => void = (val: number) => {
|
|
console.log("收到子组件事件", val)
|
|
uinfo.value=val
|
|
}
|
|
console.log(1)
|
|
return {
|
|
commentval,
|
|
send,
|
|
reply,
|
|
uinfo
|
|
|
|
|
|
}
|
|
}
|
|
})
|
|
</script> |