视频详情

src/api/index.ts

@@ -197,14 +197,34 @@ interface VideoDetail{
     deleted_at: null;
     created_at: string;
     updated_at: string;
+    share:number,
+    watch:number
 }
 
 export async function videodetail(data?:any) {
     const res=await get<VideoDetail>('video/'+data)
-    return res.data
+    console.log(res,"lllk")
+    return {
+        videoid: res.data.videoid,
+        memberid: res.data.memberid,
+        title: res.data.title,
+        img: res.data.img,
+        fileid: res.data.fileid,
+        fileurl: res.data.fileurl,
+        fileduration: res.data.fileduration,
+        status: res.data.status,
+        desc: res.data.desc,
+        deleted_at: res.data.deleted_at,
+        created_at: res.data.created_at,
+        updated_at: res.data.updated_at,
+        watch:res.data.watch,
+        share:res.data.share
+    }
    
 }
 
+
+
 /**
  * 删除视频
  */

src/components/VideoCont.vue

@@ -3,18 +3,20 @@
     <div class="title">视频数据</div>
     <div class="info">
       <div class="item">
-                <img src="" alt="">
+        <img src="@/static/images/livewatch.png" alt="" />
-                <span>sdasjdkasfklasjkfjakl</span>
+        <span> 上传时间： </span>
+        {{date}}
       </div>
       <div class="item">
-                <img src="" alt="">
+        <img src="@/static/images/watch.png" alt="" />
-                <span>sdasjdkasfklasjkfjakl</span>
+        <span>播放量</span>
+        {{watch}}
       </div>
       <div class="item">
-                <img src="" alt="">
+        <img src="@/static/images/share.png" alt="" />
-                <span>sdasjdkasfklasjkfjakl</span>
+        <span>转发量</span>
+        {{share}}
       </div>
-            
     </div>
     <div class="button">
       <div class="modify">修改该视频</div>
@@ -23,44 +25,44 @@
   </div>
 </template>
 <style lang="scss" scoped>
-.cont{
+.cont {
   width: 316px;
   height: 563px;
   background-color: #fff;
   border-radius: 17px;
   padding: 0 28px;
   position: relative;
-    .title{
+  .title {
     padding: 23px 0 11px 0;
     font-size: 13px;
     color: #111;
     line-height: 1;
     border-bottom: 1px solid #eee;
   }
-    .info{
+  .info {
-       .item{
+    .item {
       display: flex;
       align-content: center;
       margin-top: 23px;
-            >img{
+      > img {
         width: 24px;
         height: 24px;
         background-color: #0f0;
       }
-            >span{
+      > span {
         font-size: 11px;
         color: #666;
         margin-left: 10px;
       }
     }
   }
-    .button{
+  .button {
     position: absolute;
     width: 260px;
     bottom: 28px;
     display: flex;
     justify-content: space-between;
-        >div{
+    > div {
       width: 114px;
       height: 23px;
       border-radius: 3px;
@@ -69,19 +71,29 @@
       line-height: 23px;
       text-align: center;
     }
-        .modify{
+    .modify {
-            background-color: #08AE98;
+      background-color: #08ae98;
     }
-        .del{
+    .del {
-            background-color: #D12C2E;
+      background-color: #d12c2e;
     }
   }
 }
 </style>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
 export default defineComponent({
-
+    props:{
-})
+        date:{
+            type:String
+        },
+        watch:{
+            type:Number
+        },
+        share:{
+            type:Number
+        }
+    }
+});
 </script>

src/components/VideoPlay.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="video">
-        <video src=""></video>
+        
+        <video :src="url" :controls="true"></video>
     </div>
 </template>
 <style lang="scss" scoped>
@@ -8,7 +9,8 @@
     width: 976px;
     height: 563px;
     border-radius: 17px;
-    background-color: #0f0;
+    background: white;
+    // background-color: #0f0;
     overflow: hidden;
     >video{
         width: 100%;
@@ -20,6 +22,11 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
+    props:{
+        url:{
+            type:String
+        }
+    },
     setup(){
         console.log(1)
     }

src/views/regime/VideoInfo.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="videoinfo">
         <div class="info">
-            <VideoPlay></VideoPlay>
+            <VideoPlay :url="result.fileurl"></VideoPlay>
-            <VideoCont></VideoCont>
+            <VideoCont :date="result.created_at" :watch="result.watch" :share="result.share"></VideoCont>
         </div>
-        <VideoReview class="review"></VideoReview>
+        <VideoReview class="review" ></VideoReview>
     </div>
 </template>
 <style lang="scss" scoped>
@@ -21,7 +21,7 @@
 }
 </style>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 import VideoPlay from "@/components/VideoPlay.vue"
 import VideoCont from "@/components/VideoCont.vue"
 import VideoReview from "@/components/VideoReview.vue"
@@ -37,8 +37,14 @@ export default defineComponent({
     setup(){
         // console.log(1)
         console.log(useRoute().query)
-       const result= videodetail(useRoute().query.id)
+        const result=ref({})
-       console.log(result,46546)
+          onMounted(async () => {
+             result.value= await videodetail(useRoute().query.id)
+        })
+    
+       return {
+           result
+       }
         
     }
 })