beelink/src/components/ReviewItem.vue

<template>
    <div class="reviewitem">
        <div class="top">
            <img :src="photo" alt="">
            <div class="name">{{username}}</div>
            <div class="lv">
                <div class="img">
                    <div v-for="(i,j) in stars" :key="j">
                        <img src="@/static/images/starred.png" alt=""   :key="j" v-if="i==1">
                        <img src="@/static/images/star.png" alt="" v-else>
                    </div>
                    
                </div>
                <div class="num">{{(score+'').split('.')[1]?score:score+'.0'}} {{lan.$t('fen')}}</div>
            </div>
            <div class="all" @click="findall(replyid)" >
                <span>{{lan.$t('suoyouhuifu')}}</span>
                <img src="@/static/images/arrowdownblue.png" alt="">
            </div>
        </div>
        <div class="cont">
            {{content}}
        </div>
        <div class="bottom">
            <div class="date">{{date}}</div>
            <div class="reply" @click="reply(username)">{{lan.$t('huifu')}}</div>
        </div>
 
         <div class="huifu" v-if="ifshow">
            <ReviewItemtwo v-for="(i,j) in replylist.data" :key="j" 
             :photo="i.img" 
            :username="i.name" 
            :score="i.score" 
            :content="i.content" 
            :date="i.created_at"
            :memberid="i.memberid"
            :replyid="i.commentid"  
             @replying="reply"
             @reload="refresh"
            ></ReviewItemtwo>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.reviewitem{
    width: 100%;
    margin-bottom: 50px;
    .top{
        display: flex;
        align-items: center;
        position: relative;
        .all{
            color: #2581D0;
            font-size: 11px;
            position: absolute;
            right: 0;
            cursor: pointer;
            >img{
                margin-left: 6px;
            }
        }
        >img{
            width: 57px;
            height: 57px;
            border-radius: 50%;
            // background-color: #0f0;

        }
        .name{
            font-size: 13px;
            color: #111;
            margin-left: 10px;

        }
        .lv{
            display: flex;
            align-items: center;
            .img{
                display: flex;
                align-items: center;
                >img{
                    width: 12px;
                    height: 12px;
                    // background-color: #0f0;
                    margin-left: 3px;
                }
            }
            .num{
                font-size: 11px;
                color: #D12C2E;
                margin-left: 3px;
            }
        }
    }
    .cont{
        margin-left: 67px;
        font-size: 11px;
        line-height: 1.2;

    }
    .bottom{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 67px;
        margin-top: 25px;
        .date{
            font-size: 10px;
            color: #999;

        }
        .reply{
            font-size: 10px;
            color: #08AE98;
        }
    }
      .huifu{
        margin-left: 56px;
        margin-top: 30px;
    }
}
</style>
<script lang="ts">
import { getcommentlist } from '@/api';
import { useI18n } from '@/utils/i18n';
import { defineComponent, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import ReviewItemtwo from "./ReviewItemtwo.vue"
export default defineComponent({
    components:{
        ReviewItemtwo
    },
    props:{
        photo:{
            type:String
        },
        username:{
            type:String
        },
        score:{
            type:Number,
        },
        content:{
            type:String
        },
        date:{
            type:String
        },
        memberid:{
            type:Number
        },
        replyid:{
            type:Number
        }
    },
    setup(prop,context){
        // console.log(1)
        const lan = useI18n()
        const replylist =ref({})
        const reviewlist=ref({})
        const videoid=ref(useRoute().query.id)
        const ifshow=ref(false)
        onMounted(async () => {
            reviewlist.value=await getcommentlist({type: 2,id: videoid.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 stars=ref<Array<number>>([])
        console.log(prop.score)
        const score1=ref<any>(prop.score)
        // console.log(score1)
        if(score1.value==5){
            for(let i=0;i < score1.value ; i++){
            // console.log(i)
                stars.value.push(1)
            }
        }else{
            for(let i=0;i < 5 ; i++){
            // console.log(i)
                stars.value.push(0)
            }
            for(let i=0;i < score1.value ; i++){
            // console.log(i)
                stars.value[i]=1
            }
        }

        function reply(e?: string){
            console.log(155)
            context.emit("replying",{name: e,replyid: prop.replyid,score: prop.score})
        }
        async function findall(e: number){
            console.log("all")
            replylist.value =await getcommentlist({type: 3,id: e})
            ifshow.value=ifshow.value==false?true:false
        }
        return {
            stars,
            reply,
            findall,
            replylist,
            reviewlist,
            refresh,
            ifshow,
            lan
        }
    }
})
</script>