pinglun

src/api/index.ts

@@ -482,6 +482,21 @@ export async function getcommentlist(data?:any) {
     const res=await get<CommentlData>('comments',data)
     return res
 }
+
+/**
+ * 发布评论
+ */
+interface SendData{
+    type?:number,
+    cid?:number,
+    teacherid?:number,
+    score?:number,
+    content?:string
+}
+export async function addcomment(data?:any):Promise<void> {
+    const res=await post<SendData>('comments',data)
+
+}
 /**
  * 发送验证码 
  * @param phone 手机号 

src/components/ReviewItem.vue

@@ -1,25 +1,25 @@
 <template>
     <div class="reviewitem">
         <div class="top">
-            <img src="" alt="">
-            <div class="name">qweqw</div>
+            <img :src="photo" alt="">
+            <div class="name">{{username}}</div>
             <div class="lv">
                 <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 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 class="num">8.0</div>
+                    
+                </div>
+                <div class="num">{{(score+'').split('.')[1]?score:score+'.0'}}分</div>
             </div>
         </div>
         <div class="cont">
-            dafjkldashfjksdhjkhfgjkdshjkfgsdhjkghjkshgjsjkhg
+            {{content}}
         </div>
         <div class="bottom">
-            <div class="date">2020-10-10</div>
-            <div class="reply">回复</div>
+            <div class="date">{{date}}</div>
+            <div class="reply" @click="reply(username)">回复</div>
         </div>
     </div>
 </template>
@@ -88,11 +88,60 @@
 }
 </style>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
-    setup(){
-        console.log(1)
+    props:{
+        photo:{
+            type:String
+        },
+        username:{
+            type:String
+        },
+        score:{
+            type:Number,
+        },
+        content:{
+            type:String
+        },
+        date:{
+            type:String
+        },
+        memberid:{
+            type:Number
+        }
+    },
+    setup(prop,context){
+        // console.log(1)
+        const stars=ref<Array<number>>([])
+        console.log(prop.score)
+        let 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,memberid:prop.memberid,score:prop.score})
+        }
+       
+        return {
+            stars,
+            reply
+        }
     }
 })
 </script>

src/components/VideoReview.vue

@@ -9,16 +9,24 @@
         </div>
         
         <div class="list">
-            <ReviewItem></ReviewItem>
-            <ReviewItem></ReviewItem>
-            <div class="huifu">
+            <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>
 
         <div class="reply">
+            @{{uinfo.name}}
             <a-textarea v-model:value="commentval" placeholder="Basic usage" :rows="4" />
             <div class="send" @click="send">发表留言</div>
         </div>
@@ -85,23 +93,57 @@
 }
 </style>
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+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"
+// import ReviewItemtwo from "./ReviewItemtwo.vue"
 export default defineComponent({
     components:{
         ReviewItem,
-        ReviewItemtwo
+        // ReviewItemtwo
     },
-    setup(){
+    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(){
-            console.log(commentval.value,2221)
+            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
+            send,
+            reply,
+            uinfo
+
             
         }
     }

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" ></VideoReview>
+        <VideoReview class="review" :reviewlist="commentlist.data" :videoid="videoid"></VideoReview>
     </div>
 </template>
 <style lang="scss" scoped>
@@ -45,7 +45,9 @@ export default defineComponent({
         })
     
        return {
-           result
+           result,
+           commentlist,
+           videoid
        }
         
     }