....

src/api/index.ts

@@ -478,9 +478,31 @@ interface CommentlData{
     msg: string;
     total: number;
 }
+interface ReplylistData{
+    data: CommentList[];
+    code: number;
+    msg: string;
+    score?:string,
+    total: number;
+}
 export async function getcommentlist(data?:any) {
-    const res=await get<CommentlData>('comments',data)
+    console.log(data.type==2)
-    return res
+   
+    if(data.type==2){
+        const res=await get<CommentlData>('comments',data)
+        return res
+    }else{
+        const res=await get<ReplylistData>('comments',data)
+        console.log(res)
+        return res
+    }
+    
+    // if(data.type==2){
+    //     return res
+    // }
+    
+    
+  
 }
 
 /**
@@ -495,8 +517,22 @@ interface SendData{
 }
 export async function addcomment(data?:any):Promise<void> {
     const res=await post<SendData>('comments',data)
-
+    if(res.code==0){
+        message.success("发布成功")
+    }
 }
+
+/**
+ * 删除评论
+ */
+
+ export async function delreply(data?:any) {
+    const res = await del<Liveaddrule>('comments/'+data);
+    if(res.code==0){
+        message.success("删除成功")
+    }
+    return res
+ }
 /**
  * 发送验证码 
  * @param phone 手机号 

src/components/ReviewItem.vue

@@ -13,6 +13,10 @@
                 </div>
                 <div class="num">{{(score+'').split('.')[1]?score:score+'.0'}}分</div>
             </div>
+            <div class="all" @click="findall(replyid)" >
+                <span>查看所有回复</span>
+                <img src="@/static/images/arrowdownblue.png" alt="">
+            </div>
         </div>
         <div class="cont">
             {{content}}
@@ -21,6 +25,20 @@
             <div class="date">{{date}}</div>
             <div class="reply" @click="reply(username)">回复</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>
@@ -30,6 +48,17 @@
     .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;
@@ -85,12 +114,21 @@
             color: #08AE98;
         }
     }
+      .huifu{
+        margin-left: 56px;
+        margin-top: 30px;
+    }
 }
 </style>
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { getcommentlist } from '@/api';
-
+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
@@ -109,10 +147,26 @@ export default defineComponent({
         },
         memberid:{
             type:Number
+        },
+        replyid:{
+            type:Number
         }
     },
     setup(prop,context){
         // console.log(1)
+        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)
         let score1=ref<any>(prop.score)
@@ -135,12 +189,21 @@ export default defineComponent({
 
         function reply(e?:string){
             console.log(155)
-            context.emit("replying",{name:e,memberid:prop.memberid,score:prop.score})
+            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
+            reply,
+            findall,
+            replylist,
+            reviewlist,
+            refresh,
+            ifshow
         }
     }
 })

src/components/ReviewItemtwo.vue

@@ -1,27 +1,22 @@
 <template>
     <div class="reviewitem">
         <div class="top">
-            <img src="" alt="">
+            <img :src="photo" alt="">
-            <div class="name">qweqw</div>
+            <div class="name myname" v-if="parseInt(memberid)==myid">{{username}}</div>
-            <!-- <div class="lv">
+             <div class="name" v-else>{{username}}</div>
-                <div class="img">
-                    <img src="@/static/images/starred.png" alt="">
-                    <img src="@/static/images/starred.png" alt="">
-                    <img src="@/static/images/starred.png" alt="">
-                    <img src="@/static/images/star.png" alt="">
-                    <img src="@/static/images/star.png" alt="">
-                </div>
-                <div class="num">8.0</div>
-            </div> -->
         </div>
         <div class="cont">
-            dafjkldashfjksdhjkhfgjkdshjkfgsdhjkghjkshgjsjkhg
+            {{content}}
         </div>
         <div class="bottom">
-            <div class="date">2020-10-10</div>
+            <div class="date">{{date}}</div>
-            <div class="reply">
+            <div class="operate">
-                回复
+                <div class="reply" @click="reply(username)">
-                <span class="reply del">删除</span>
+                    回复
+                </div>
+                <div class="del" @click="del(replyid)" v-if="parseInt(memberid)==myid">
+                    删除
+                </div>
             </div>
          
         </div>
@@ -47,6 +42,9 @@
             margin-left: 10px;
 
         }
+        .myname{
+            color: #08AE98;
+        }
         .lv{
             display: flex;
             align-items: center;
@@ -79,6 +77,9 @@
         justify-content: space-between;
         margin-left: 67px;
         margin-top: 25px;
+        .operate{
+            display: flex;
+        }
         .date{
             font-size: 10px;
             color: #999;
@@ -96,11 +97,55 @@
 }
 </style>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { delreply } from '@/api';
+import store from '@/store';
+import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
-    setup(){
+    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){
+        const myid=ref<number>(store.state.userinfo.memberid)
+        function reply(e?:string){
+            console.log(155)
+            context.emit("replying",{name:e,replyid:prop.replyid,score:prop.score})
+        }
         console.log(1)
+        async function del(e?: number){
+            console.log(e)
+            let res=await delreply(e)
+            if(res.code==0){
+                 context.emit("reload",prop.replyid)
+            }
+            console.log(res)
+            
+        } 
+        return {
+            reply,
+            myid,
+            del
+        }
     }
 })
 </script>

src/components/VideoReview.vue

@@ -7,26 +7,24 @@
             </div>
             <div class="score">8.0分</div>
         </div>
-        
+        <div class="list" v-for="(i,j) in reviewlist.data"  :key="j"  >
-        <div class="list">
+            <ReviewItem  
-            <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>
+            :replyid="i.commentid"
-            <!-- <div class="huifu">
+            @replying="reply"
-                <ReviewItemtwo></ReviewItemtwo>
+            @findall="findreply"
-                <ReviewItemtwo></ReviewItemtwo>
+             ></ReviewItem>
-            </div> -->
+            
            
         </div>
        
         <div class="reply">
-            @{{uinfo.name}}
+            <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>
@@ -93,28 +91,33 @@
 }
 </style>
 <script lang="ts">
-import { addcomment } from '@/api';
+import { addcomment, getcommentlist, videodetail } from '@/api';
-import { defineComponent, ref, toRaw } from 'vue';
+import store from '@/store';
+import { defineComponent, onMounted, ref, toRaw } from 'vue';
 import { useRoute } from 'vue-router';
 import ReviewItem from "./ReviewItem.vue"
-// import ReviewItemtwo from "./ReviewItemtwo.vue"
+ 
 export default defineComponent({
     components:{
-        ReviewItem,
+        ReviewItem
-        // ReviewItemtwo
+ 
     },
     props:{
-        reviewlist:{
-            type:Array
-        },
         videoid:{
             type:Number
         }
     },
-    setup(prop){
+    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,
@@ -125,7 +128,7 @@ export default defineComponent({
         function send(){
             const data = ref<SendData>({})
             data.value.type=3;
-            data.value.cid=prop.videoid
+            data.value.cid=uinfo.value.replyid
             // data.value.teacherid=uinfo.value.memberid
             // data.value.score=uinfo.value.score
             data.value.content=commentval.value
@@ -133,16 +136,31 @@ export default defineComponent({
             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)
+            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
+            uinfo,
+            findreply,
+            replylist,
+            haslist,
+            reviewlist,
+            refresh
 
             
         }

src/views/regime/VideoInfo.vue

@@ -4,7 +4,7 @@
             <VideoPlay :url="result.fileurl"></VideoPlay>
             <VideoCont :videoid="result.videoid"  :date="result.created_at" :watch="result.watch" :share="result.share" :status="result.status"></VideoCont>
         </div>
-        <VideoReview class="review" :reviewlist="commentlist.data" :videoid="videoid"></VideoReview>
+        <VideoReview class="review"></VideoReview>
     </div>
 </template>
 <style lang="scss" scoped>
@@ -41,7 +41,7 @@ export default defineComponent({
         const videoid=ref(useRoute().query.id)
           onMounted(async () => {
             result.value= await videodetail(useRoute().query.id)
-            commentlist.value=await getcommentlist({type:2,id:videoid.value})
+            // commentlist.value=await getcommentlist({type:2,id:videoid.value})
         })
     
        return {