beelink/src/components/VideoReview.vue

<template>
    <div class="review" v-if="reviewlist.data.length != 0">
        <div class="top">
            <div class="title">
                {{lan.$t('shipinpingjia')}}
                <span>{{videoinfo}}{{lan.$t('fen')}}</span>
            </div>
            <div class="score">{{videoinfo}}{{lan.$t('fen')}}</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"
            :ref="el => {list[j] = el}"
             ></ReviewItem>
            
           
        </div>
       
        <div class="reply">
            <span v-if="uinfo.name">@{{uinfo.name}}</span>
            <a-textarea v-model:value="commentval" :placeholder="lan.$t('shuruliuyan')" :rows="4" />
            <div class="send" @click="send">{{lan.$t('fabiaoliuyan')}}</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;
            cursor: pointer;
            font-size: 9px;
            // &:hover{
            //     background-color: #;
            // }

        }
    }
    .huifu{
        margin-left: 56px;
    }
    
}
</style>
<script lang="ts">
import { addcomment, getcommentlist, videodetail } from '@/api';
import store from '@/store';
import { useI18n } from '@/utils/i18n';
import { message } from 'ant-design-vue';
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
        },
        videoinfo: {
            type: String
        }
    },
    setup(prop,context){
        const lan: any = useI18n();
        const reviewlist=ref<any>({data: []})
        const commentval=ref<string>('')
        const uinfo=ref<any>({})
        const replylist =ref({})
        const videoid=ref(useRoute().query.id)
        const url = useRoute().path
        const list = ref<any>([])
        onMounted(async () => {
            let type = 1;
            if(url == '/regime/livedetail'){
                type = 1;
            }else{
                type = 2;
            }
            reviewlist.value=await getcommentlist({type: type,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)
            if(uinfo.value.name){
                addcomment(toRaw(data.value)).then(()=>{
                    for(const i in list.value){
                        list.value[i].reload()
                    }
                })
                
            }else{
                message.error(lan.$t('xuanzehuifuxuesheng'))
            }
            // 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,
            lan,
            list

            
        }
    }
})
</script>