From f9066bcdf11edfc2bd8f82efc64187c2ce1e20de Mon Sep 17 00:00:00 2001
From: asd <374367073@qq.com>
Date: Wed, 14 Oct 2020 16:27:24 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts               |  22 ++++-
 src/components/VideoCont.vue   | 160 ++++++++++++++++++---------------
 src/components/VideoPlay.vue   |  11 ++-
 src/views/regime/VideoInfo.vue |  18 ++--
 4 files changed, 128 insertions(+), 83 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 493ab4f..61ff106 100644
--- a/src/api/index.ts
+++ b/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
+    }
    
 }
 
+
+
 /**
  * 删除视频
  */
diff --git a/src/components/VideoCont.vue b/src/components/VideoCont.vue
index 4f99382..5c62d20 100644
--- a/src/components/VideoCont.vue
+++ b/src/components/VideoCont.vue
@@ -1,87 +1,99 @@
 <template>
-    <div class="cont">
-        <div class="title">视频数据</div>
-        <div class="info">
-            <div class="item">
-                <img src="" alt="">
-                <span>sdasjdkasfklasjkfjakl</span>
-            </div>
-            <div class="item">
-                <img src="" alt="">
-                <span>sdasjdkasfklasjkfjakl</span>
-            </div>
-            <div class="item">
-                <img src="" alt="">
-                <span>sdasjdkasfklasjkfjakl</span>
-            </div>
-            
-        </div>
-        <div class="button">
-            <div class="modify">修改该视频</div>
-            <div class="del">删除该视频</div>
-        </div>
+  <div class="cont">
+    <div class="title">视频数据</div>
+    <div class="info">
+      <div class="item">
+        <img src="@/static/images/livewatch.png" alt="" />
+        <span> 上传时间： </span>
+        {{date}}
+      </div>
+      <div class="item">
+        <img src="@/static/images/watch.png" alt="" />
+        <span>播放量</span>
+        {{watch}}
+      </div>
+      <div class="item">
+        <img src="@/static/images/share.png" alt="" />
+        <span>转发量</span>
+        {{share}}
+      </div>
     </div>
+    <div class="button">
+      <div class="modify">修改该视频</div>
+      <div class="del">删除该视频</div>
+    </div>
+  </div>
 </template>
 <style lang="scss" scoped>
-.cont{
-    width: 316px;
-    height: 563px;
-    background-color: #fff;
-    border-radius: 17px;
-    padding: 0 28px;
-    position: relative;
-    .title{
-        padding: 23px 0 11px 0;
-        font-size: 13px;
-        color: #111;
-        line-height: 1;
-        border-bottom: 1px solid #eee;
+.cont {
+  width: 316px;
+  height: 563px;
+  background-color: #fff;
+  border-radius: 17px;
+  padding: 0 28px;
+  position: relative;
+  .title {
+    padding: 23px 0 11px 0;
+    font-size: 13px;
+    color: #111;
+    line-height: 1;
+    border-bottom: 1px solid #eee;
+  }
+  .info {
+    .item {
+      display: flex;
+      align-content: center;
+      margin-top: 23px;
+      > img {
+        width: 24px;
+        height: 24px;
+        background-color: #0f0;
+      }
+      > span {
+        font-size: 11px;
+        color: #666;
+        margin-left: 10px;
+      }
     }
-    .info{
-       .item{
-            display: flex;
-            align-content: center;
-            margin-top: 23px;
-            >img{
-                width: 24px;
-                height: 24px;
-                background-color: #0f0;
-            }
-            >span{
-                font-size: 11px;
-                color: #666;
-                margin-left: 10px;
-            }
-       }
+  }
+  .button {
+    position: absolute;
+    width: 260px;
+    bottom: 28px;
+    display: flex;
+    justify-content: space-between;
+    > div {
+      width: 114px;
+      height: 23px;
+      border-radius: 3px;
+      font-size: 10px;
+      color: #fff;
+      line-height: 23px;
+      text-align: center;
     }
-    .button{
-        position: absolute;
-        width: 260px;
-        bottom: 28px;
-        display: flex;
-        justify-content: space-between;
-        >div{
-            width: 114px;
-            height: 23px;
-            border-radius: 3px;
-            font-size: 10px;
-            color: #fff;
-            line-height: 23px;
-            text-align: center;
-        }
-        .modify{
-            background-color: #08AE98;
-        }
-        .del{
-            background-color: #D12C2E;
-        }
+    .modify {
+      background-color: #08ae98;
     }
+    .del {
+      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>
\ No newline at end of file
diff --git a/src/components/VideoPlay.vue b/src/components/VideoPlay.vue
index 3446a3d..13e12cf 100644
--- a/src/components/VideoPlay.vue
+++ b/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)
     }
diff --git a/src/views/regime/VideoInfo.vue b/src/views/regime/VideoInfo.vue
index 6c63835..9166db7 100644
--- a/src/views/regime/VideoInfo.vue
+++ b/src/views/regime/VideoInfo.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="videoinfo">
         <div class="info">
-            <VideoPlay></VideoPlay>
-            <VideoCont></VideoCont>
+            <VideoPlay :url="result.fileurl"></VideoPlay>
+            <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)
-       console.log(result,46546)
+        const result=ref({})
+          onMounted(async () => {
+             result.value= await videodetail(useRoute().query.id)
+        })
+    
+       return {
+           result
+       }
         
     }
 })