2020-10-14 10:53:56 +00:00
5 changed files with 220 additions and 99 deletions
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -3,7 +3,7 @@ import store from '@/store';
 import { LiveList, LoginData, UserInfo, VideoInfo } from '@/types';
 import { saveValue } from '@/utils/common';
 import { message } from 'ant-design-vue';
-import { get, post, setToken } from './base'
+import { del, get, post, setToken } from './base'


 /**
@ -178,6 +178,9 @@ export async function liveadd(data:any) {
 */
 export async function videoadd(data:any) {
    const res=await post<Liveaddrule>('video',data)
+    if(res.code==0){
+        message.success("发布成功")
+    }
 }

 /**
@ -197,19 +200,56 @@ interface VideoDetail{
    deleted_at: null;
    created_at: string;
    updated_at: string;
+    share:number,
+    watch:number
 }

-export async function videodetail(data?:any) {
+export async function videodetail(data?:any,ifupdate?:number) {
    const res=await get<VideoDetail>('video/'+data)
-    return res.data
+    if(ifupdate){
+        console.log(111)
+        return{
+            title: res.data.title,
+            img: res.data.img,
+            fileid: res.data.fileid,
+            fileurl: res.data.fileurl,
+            fileduration: res.data.fileduration,
+            desc:res.data.desc,
+            video:[res.data.fileurl],
+        }
+    }else{
+        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
+        }
+    }
+
   
 }

+
+
 /**
 * 删除视频
 */
 export async function videodel(data:any) {
-    const res = await post<Liveaddrule>('live',data);
+    const res = await del<Liveaddrule>('video/'+data);
+    if(res.code==0){
+        message.success("删除成功")
+    }
+   
    console.log(res)
 }

--- a/src/components/VideoCont.vue
+++ b/src/components/VideoCont.vue
@ -1,87 +1,147 @@
 <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 class="cont">
+    <div class="title">视频数据</div>
+    <div class="info">
+      <div class="item">
+        <img src="@/static/images/livewatch.png" alt="" />
+        <span> 上传时间： </span>
+        <span>{{date}}</span>
+        
+      </div>
+      <div class="item">
+        <img src="@/static/images/watch.png" alt="" />
+        <span>播放量</span>
+        <span> {{watch}}</span>
+       
+      </div>
+      <div class="item">
+        <img src="@/static/images/share.png" alt="" />
+        <span>转发量</span>
+        <span>{{share}}</span>
+      </div>
+      <div class="item item1" v-if="status==0">
+        <span>状态</span>
+            <span class="status">正在审核中，情耐心等待</span>
        </div>
-        <div class="button">
-            <div class="modify">修改该视频</div>
-            <div class="del">删除该视频</div>
+        <div class="item item1" v-if="status==2">
+            <span>状态</span>
+            <span class="status1">审核未通过</span>
        </div>
+        <div class="item item1" v-if="status==1">
+            <span style="flex-shrink:0">原因</span>
+            <span class="status">您的视频中含有大量敏感词汇，请修改后再次上传，感谢您对Beelink的技术支持 </span>
+      </div>
    </div>
+    <div class="button">
+      <div class="modify" @click="update(videoid)">修改该视频</div>
+      <div class="del" @click="drop(videoid)">删除该视频</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 {
+      .item1{
+          position: relative;
+          left:-12px
+      }
+      .status{
+          color: #07AD97!important;
+        //   font-weight: bold;
+      }
+      .status1{
+          color: #D12C2D!important;
+      }
+    .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 { videodel } from '@/api';
+import router from '@/router';
+import { defineComponent } from "vue";
+import { useRoute } from 'vue-router';

 export default defineComponent({
-
-})
+    props:{
+        date:{
+            type:String
+        },
+        watch:{
+            type:Number
+        },
+        share:{
+            type:Number
+        },
+        status:{
+            type:Number
+        },
+        videoid:{
+            type:Number
+        }
+    },
+    setup(){
+        console.log(1)
+        function drop(e: number){
+            console.log(e)
+            videodel(e)
+        }
+        function update(e: number) {
+             router.push("/mine/video?id="+e)
+        }
+        return{
+            drop,
+            update
+        }
+    }
+});
 </script>
--- 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)
    }
--- a/src/views/mine/ReleaseVideo.vue
+++ b/src/views/mine/ReleaseVideo.vue
@ -103,13 +103,14 @@
  </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, Ref, ref, toRaw } from "vue";
+import { defineComponent, onMounted, reactive, Ref, ref, toRaw } from "vue";
 import { PlaySquareOutlined, PlusOutlined } from "@ant-design/icons-vue";
 import NavBottom from "@/components/NavBottom.vue";
 import { previewCover } from "@/utils/common";
 import { FromSend, ImgInfo, VideoInfo } from "@/types";
 import { uploadflie } from "@/utils/vod";
-import { videoadd } from "@/api";
+import { videoadd, videodetail } from "@/api";
+import { useRoute } from 'vue-router';

 export default defineComponent({
  name: "ReleaseWebcast",
@ -125,7 +126,7 @@ export default defineComponent({
    const fileList: Array<FileItem> = [];

    // 表单数据
-    const form = reactive({
+    const form = ref<any>({
      title: "",
      img: "",
      fileid: "",
@ -134,6 +135,14 @@ export default defineComponent({
      desc: "",
      video:[""],
    });
+    onMounted(async () => {
+      if(useRoute().query.id){
+        console.log(useRoute().query.id)
+        form.value = await videodetail(useRoute().query.id,1)
+        console.log(form.value,"fornm")
+      }
+    })
+    
    // 是否显示封面预览 封面的路径
    const viewCover: Ref<boolean> = ref(false),
      previewImage: Ref<string> = ref("");
@ -169,9 +178,9 @@ export default defineComponent({
     * @param index 删除文件的索引
     */
    function removeFile(index: number): void {
-      const newFileList = form.video.slice();
+      const newFileList = form.value.video.slice();
      newFileList.splice(index, 1);
-      form.video = newFileList;
+      form.value.video = newFileList;
    }

    /**
@ -191,7 +200,7 @@ export default defineComponent({
        uploadpicprogress.value = info.percent.toFixed(2) * 100;
      });
      console.log(res);
-      form.img = res.video.url;
+      form.value.img = res.video.url;
    }

    /**
@ -200,12 +209,12 @@ export default defineComponent({
    const uploadprogress: Ref<number> = ref(0);
    async function uploads(file: AntUpload) {
        uploadprogress.value=0
-        form.video=[""]
+        form.value.video=[""]
        console.log(file);
        videofile.value = file.file;
        videos.value[0].addEventListener("durationchange", () => {
        console.log(videos.value[0].duration);
-        form.fileduration = videos.value[0].duration;
+        form.value.fileduration = videos.value[0].duration;
      });
      let res = await uploadflie(file.file, (info: any) => {
        console.log(info);
@ -213,9 +222,9 @@ export default defineComponent({
      });
      console.log(res);

-      form.fileid = res.fileId;
-      form.fileurl = res.video.url;
-      form.video[0]=res.video.url
+      form.value.fileid = res.fileId;
+      form.value.fileurl = res.video.url;
+      form.value.video[0]=res.video.url
    }

    /**
@ -223,8 +232,8 @@ export default defineComponent({
     */
    const onSubmit = async (e: FromSend) => {
      e.preventDefault();
-      console.log(toRaw(form), 111);
-      videoadd(toRaw(form));
+      console.log(toRaw(form.value), 111);
+      // videoadd(toRaw(form));
    };

    return {
--- 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 :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" ></VideoReview>
    </div>
 </template>
 <style lang="scss" scoped>
@ -21,11 +21,10 @@
 }
 </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"
-import router from '@/router';
+import VideoReview from "@/components/VideoReview.vue";
 import { videodetail } from '@/api';
 import { useRoute } from 'vue-router';
 export default defineComponent({
@ -37,8 +36,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
+       }
        
    }
 })