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 v-show="!iszk" src="@/static/images/arrowdownblue.png" alt="">
                <img v-show="iszk" src="@/static/images/arrowdownblueup.png" alt="">
            </div>
        </div>
        <div class="cont">
            {{content}}
        </div>
        <div class="bottom">
            <div class="date">{{date}}</div>
            <div style="display: flex">
                <div class="del" @click="del(replyid)">
                    {{lan.$t('shanchu')}}
                </div>
                <div class="reply" @click="reply(username)">{{lan.$t('huifu')}}</div>
            </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"  
            :info="i"
             @replying="replytow"
             @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;
        }
        .del{
            font-size: 10px;
            color:#D12C2D!important;
            flex-shrink: 0;
            margin-right: 28px;
        }
    }
      .huifu{
        border-top: solid 1px #eee;
        margin-left: 56px;
        margin-top: 30px;
    }
}
</style>
<script lang="ts">
import { delreply, getcommentlist } from '@/api';
import { useI18n } from '@/utils/i18n';
import { message } from 'ant-design-vue';
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)
        const iszk = ref(false) 
        const url = useRoute().path
        let type = 1;
        if(url == '/regime/livedetail'){
            type = 1;
        }else{
            type = 2;
        }
        // onMounted(async () => {
        //     reviewlist.value=await getcommentlist({type: type,id: videoid.value})
        // })

        async function refresh(e?: any){
            console.log("rekload")
            // reviewlist.value=await getcommentlist({type: type,id: videoid.value})
            replylist.value=await getcommentlist({type: 3,id: prop.replyid})
        }
        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,cid: prop.replyid,score: prop.score})
        }
        function replytow(e: any){
            console.log(1556)
            e.cid = prop.replyid
            context.emit("replying", e)
        }
        async function findall(e: number){
            console.log("all")
            if(iszk.value){
                iszk.value = false;
                 ifshow.value= false;
                return ;
            }
            iszk.value = true
            replylist.value =await getcommentlist({type: 3,id: e})
            ifshow.value = true;
        }
         async function reload() {
            if(iszk.value == true){
                console.log(iszk.value,121212)
                iszk.value = false;
                if(prop.replyid){
                    findall(prop.replyid)
                }
            }

        }
        async function del(e?: number){
            console.log(e,1212)
            const res=await delreply(e)
            if(res.code != 0){
                message.error(res.msg)
            }
            context.emit("reload")
            // reload()
            
        }

       

        return {
            stars,
            reply,
            findall,
            replylist,
            reviewlist,
            refresh,
            ifshow,
            lan,
            del,
            iszk,
            reload,
            replytow
        }
    }
})
</script>