Merge pull request 'zj' (#41) from zj into master

Reviewed-on: http://git.luyuan.tk/luyuan/beelink/pulls/41

src/api/index.ts

@@ -1,6 +1,6 @@
 import router from '@/router';
 import store from '@/store';
-import { LiveList, LoginData, UserInfo } from '@/types';
+import { LiveList, LoginData, UserInfo, VideoInfo } from '@/types';
 import { saveValue } from '@/utils/common';
 import { message } from 'ant-design-vue';
 import { get, post, setToken } from './base'
@@ -19,7 +19,7 @@ export async function loginpass(phone: string, password: string){
         message.error(res.msg)
     }else{
         console.log(res.data)
-        if(!saveValue("token", res.data?.api_token) && !saveValue("memberid", res.data?.memberid) ){
+        if(!saveValue("token", res.data.api_token) && !saveValue("memberid", res.data.memberid) ){
             message.error("存储错误, 请允许网页使用本地存储！")
         }else{
             setToken();
@@ -35,30 +35,30 @@ export async function loginpass(phone: string, password: string){
  */
 export async function userinfo(){
     const user =  await get<UserInfo>('personalInfo');
-    // console.log(user.data?.img)
+    // console.log(user.data.img)
     if(user.code == 1001){
         // router.push("/")
         return '未登录';
     }
     return {
-        head: user.data?.img,
+        head: user.data.img,
-        username: user.data?.name,
+        username: user.data.name,
-        language: user.data?.language,
+        language: user.data.language,
-        currency: user.data?.currency,
+        currency: user.data.currency,
-        zoneStr: user.data?.zoneStr,
+        zoneStr: user.data.zoneStr,
-        memberid: user.data?.memberid,
+        memberid: user.data.memberid,
-        country: user.data?.country,
+        country: user.data.country,
-        live: user.data?.live,
+        live: user.data.live,
-        mtongue: user.data?.mtongue,
+        mtongue: user.data.mtongue,
-        tlanguage: user.data?.tlanguage,
+        tlanguage: user.data.tlanguage,
-        willsay: user.data?.willsay,
+        willsay: user.data.willsay,
-        interest: user.data?.interest,
+        interest: user.data.interest,
-        mobile: user.data?.mobile,
+        mobile: user.data.mobile,
-        email: user.data?.email,
+        email: user.data.email,
-        birthday: user.data?.birthday,
+        birthday: user.data.birthday,
-        video: user.data?.video,
+        video: user.data.video,
-        desc: user.data?.desc,
+        desc: user.data.desc,
-        money: user.data?.money
+        money: user.data.money
     }
 }
 
@@ -123,9 +123,10 @@ interface VideoList{
     statusname: string;
 }
 
-export async function getvideolist() {
+export async function getvideolist(): Promise<VideoList[]> {
     const res = await get<Array<VideoList>>('video')
     console.log(res)
+    return res.data
 }
 
 /**
@@ -134,7 +135,7 @@ export async function getvideolist() {
 
 
 
-export async function getlivelist(data?:any) {
+export async function getlivelist(data?:any):Promise<LiveList[]> {
     const res = await get<Array<LiveList>>('live',data);
     // console.log(res);
     return res.data
@@ -154,9 +155,9 @@ export async function getstatisticlist() {
     const res = await get<StatisticList>('statistics');
     // console.log(res)
     return {
-        liveInfo: res.data?.liveInfo,
+        liveInfo: res.data.liveInfo,
-        videoInfo:res.data?.videoInfo,
+        videoInfo:res.data.videoInfo,
-        studentInfo:res.data?.studentInfo
+        studentInfo:res.data.studentInfo
     }
 }
 
@@ -170,6 +171,47 @@ interface Liveaddrule{
 export async function liveadd(data:any) {
     const res = await post<Liveaddrule>('live',data);
     console.log(res)
+ }
+
+/**
+ * 发布视频
+ */
+export async function videoadd(data:any) {
+    const res=await post<Liveaddrule>('video',data)
+}
+
+/**
+ * 视频详情
+ */
+
+interface VideoDetail{
+    videoid: number;
+    memberid: number;
+    title: string;
+    img: string;
+    fileid: string;
+    fileurl: string;
+    fileduration: string;
+    status: number;
+    desc: string;
+    deleted_at: null;
+    created_at: string;
+    updated_at: string;
+}
+
+export async function videodetail(data?:any) {
+    const res=await get<VideoDetail>('video/'+data)
+    return res.data
+   
+}
+
+/**
+ * 删除视频
+ */
+export async function videodel(data:any) {
+    const res = await post<Liveaddrule>('live',data);
+    console.log(res)
+ }
 }
 
 

src/components/VideoItem.vue

@@ -1,34 +1,35 @@
 <template>
-    <div class="videoitem" @click="navto()">
+    <div class="videoitem" @click="navto(videoid)">
-        <img src="" alt="" class="cover">
+       
+        <img :src="img" alt="" class="cover">
         <img src="@/static/images/play.png" alt="" class="play">
         <div class="title">
-            sadghaskghdfjkaghjkfha
+            {{title}} {{videoid}}
-            <span class="lv">7.3分</span>
+            <span class="lv">{{score}}分</span>
         </div>
         <div class="info">
             <div class="datetime">
-                <span>2020-09-11</span>
+                <span>{{date.split(" ")[0]}}</span>
-                <span class="time">09:30</span>
+                <span class="time">{{date.split(" ")[1]}}</span>
             </div>
             <div class="feature">
                 <div>
                     <img src="@/static/images/watch.png" alt="">
-                    <span>123</span>
+                    <span>{{watch}}</span>
                 </div>
                 <div>
                     <img src="@/static/images/share.png" alt="">
-                    <span>3</span>
+                    <span>{{share}}</span>
                 </div>
             </div>
         </div>
-        <div class="state audit" v-if="type==1">
+        <div class="state audit" v-if="status==0">
             审核中
         </div>
-         <div class="state audit fail" v-if="type==2">
+         <div class="state audit fail" v-if="status==2">
             未通过
         </div>
-         <div class="state audit" v-if="type==3">
+         <div class="state audit" v-if="status==1">
              已发布
         </div>
     </div>
@@ -133,18 +134,45 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
     props:{
+        videoid:{
+            type:Number
+        },
         type: {
             type: Number,
             default:1
+        },
+        img:{
+            type:String
+        },
+        title:{
+            type:String
+        },
+        score:{
+            type:String
+        },
+        date:{
+            type:String
+        },
+        takehour:{
+            type:String
+        },
+        watch:{
+            type:Number
+        },
+        share:{
+            type:Number
+        },
+        status:{
+            type:Number
         }
     },
     setup() {
-        function navto(){
+        function navto(e: number){
-            router.push("/regime/videoinfo")
+            router.push("/regime/videoinfo?id="+e)
         }
 
         return {
-            navto
+            navto,
         }
     }
 })

src/types/index.d.ts

@@ -8,8 +8,8 @@ import * as axios from 'axios';
 declare module 'axios' {
     export interface CustomSuccessData<T> {
         code: number;
-        msg?: string;
+        msg: string;
-        data?: T;
+        data: T;
         [keys: string]: any;
     }
 }

src/views/mine/ReleaseVideo.vue

@@ -1,301 +1,406 @@
 <template>
-    <div class="upload-video">
+  <div class="upload-video">
-        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
+    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
-            <div class="title">上传视频</div>
+      <div class="title">上传视频</div>
-            <a-form-item label="视频标题">
+      <a-form-item label="视频标题">
-                <a-input size="small" v-model:value="form.title" placeholder="请输入您的视频标题" />
+        <a-input
-            </a-form-item>
+          size="small"
-            <a-form-item label="视频封面" class="video-cover">
+          v-model:value="form.title"
-                <a-upload
+          placeholder="请输入您的视频标题"
-                    list-type="picture"
+        />
-                    @change="coverChange"
+      </a-form-item>
-                >
+      <a-form-item label="视频封面" class="video-cover">
-                    <div class="upload-image" v-if="!viewCover">
+        <a-upload list-type="picture" :customRequest="uploadspic">
-                        <PlusOutlined style="fontSize: 22px;" />
+          <div class="upload-image" v-if="!viewCover && form.img.length == 0">
-                    </div>
+            <PlusOutlined
-                    <div class="preview-image" v-else>
+              style="fontsize: 22px"
-                        <img style="width: 100%" :src="previewImage" />
+              v-if="uploadpicprogress == 0"
-                    </div>
+            />
-                </a-upload>
+            <a-progress
-            </a-form-item>
+              type="circle"
-            <a-form-item label="选择视频" class="video-introduction">
+              :percent="uploadpicprogress"
-                <div class="upload-container">
+              :width="80"
-                    <a-upload :beforeUpload="beforeVideoUpload">
+              v-else
-                        <div class="upload-image">
+            />
-                            <PlaySquareOutlined style="fontSize: 22px;" />
+          </div>
-                        </div>
+          <div class="upload-image" v-else>
-                    </a-upload>
+            <img style="width: 100%; height: 100%" :src="form.img" />
-                    <!-- 文件列表 -->
+          </div>
-                    <div v-for="(item, index) in form.video" :key="index" class="video-list">
+        </a-upload>
-                        <img src="@/static/images/link.png" class="link" />
+      </a-form-item>
-                        <span class="one-line-hide">{{ item.name }}</span>
+      <a-form-item label="选择视频" class="video-introduction">
-                        <img src="@/static/images/delete.png" @click="removeFile(index)" class="del" />
+        <div class="upload-container">
-                    </div>
+          <a-upload list-type="picture" :customRequest="uploads"  :beforeUpload="beforeVideoUpload">
-                </div>
+            <div class="upload-image">
-                <div class="demand">
+              <PlaySquareOutlined
-                    <p class="one-line-hide">视频要求：</p>
+                style="fontsize: 22px"
-                    <p class="one-line-hide">1.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…</p>
+                v-if="uploadprogress == 0"
-                </div>
+              />
-            </a-form-item>
+              <a-progress
-            <a-form-item label="视频简介" class="brief">
+                type="circle"
-                <a-textarea v-model:value="form.brief" :autoSize="true" class="brief-textarea" :maxlength="200" placeholder="请输入您的视频简介" />
+                :percent="uploadprogress"
-                <span class="words-number">{{ form.brief.length }}/200</span>
+                :width="80"
-            </a-form-item>
+                v-else
-            <a-form-item :wrapper-col="{ span: 4, offset: 0 }">
+              />
-                <a-button @click="onSubmit">上传视频</a-button>
+              <video style="display: none" :src="videofile"></video>
-            </a-form-item>
+            </div>
-        </a-form>
+            <div
-        <nav-bottom></nav-bottom>
+              class="upload-image upload"
-    </div>
+              style="position: relative"
+              v-show="false"
+            >
+              <video
+                :src="form.fileurl"
+                :ref="
+                  (el) => {
+                    videos[0] = el;
+                  }
+                "
+                class="upload"
+              ></video>
+              <!-- <a-progress type="circle" :percent="100" :width="80" style="position:absolute;right:35%"/> -->
+            </div>
+          </a-upload>
+          <!-- 文件列表 -->
+            <div v-if="form.video[0].length">
+                  <div
+            v-for="(item, index) in form.video"
+            :key="index"
+            class="video-list"
+          >
+            <img src="@/static/images/link.png" class="link" />
+            <span class="one-line-hide">{{ item.split('/')[item.split('/').length-1] }}</span>
+            <img
+              src="@/static/images/delete.png"
+              @click="removeFile(0)"
+              class="del"
+            />
+          </div>
+            </div>
+        </div>
+        <div class="demand">
+          <p class="one-line-hide">视频要求：</p>
+          <p class="one-line-hide">
+            1.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…
+          </p>
+        </div>
+      </a-form-item>
+      <a-form-item label="视频简介" class="brief">
+        <a-textarea
+          v-model:value="form.desc"
+          :autoSize="true"
+          class="brief-textarea"
+          :maxlength="200"
+          placeholder="请输入您的视频简介"
+        />
+        <span class="words-number">{{ form.desc.length }}/200</span>
+      </a-form-item>
+      <a-form-item :wrapper-col="{ span: 4, offset: 0 }">
+        <a-button @click="onSubmit">上传视频</a-button>
+      </a-form-item>
+    </a-form>
+    <nav-bottom></nav-bottom>
+  </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, Ref, ref } from 'vue';
+import { defineComponent, reactive, Ref, ref, toRaw } from "vue";
-import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { PlaySquareOutlined, PlusOutlined } from "@ant-design/icons-vue";
-import NavBottom from '@/components/NavBottom.vue';
+import NavBottom from "@/components/NavBottom.vue";
-import { previewCover } from '@/utils/common';
+import { previewCover } from "@/utils/common";
-import { FromSend, ImgInfo, VideoInfo } from '@/types';
+import { FromSend, ImgInfo, VideoInfo } from "@/types";
+import { uploadflie } from "@/utils/vod";
+import { videoadd } from "@/api";
 
 export default defineComponent({
-    name: 'ReleaseWebcast',
+  name: "ReleaseWebcast",
-    components: {
+  components: {
-        PlaySquareOutlined,
+    PlaySquareOutlined,
-        PlusOutlined,
+    PlusOutlined,
-        NavBottom,
+    NavBottom,
-    },
+  },
-    setup() {
+  setup() {
-        interface FileItem{
+    interface FileItem {
-            uid: string;
+      video:Array<string>,
-            name: string;
-        }
-        const fileList: Array<FileItem> = [];
-        
-        // 表单数据
-        const form = reactive({
-            title: '',
-            cover: '',
-            brief: '',
-            video: fileList,
-        });
-        // 是否显示封面预览 封面的路径
-        const viewCover: Ref<boolean> = ref(false),
-            previewImage: Ref<string> = ref('');
-        /**
-         * 封面改变触发事件
-         */
-        function coverChange(info: ImgInfo): void {
-            // console.log(info);
-            // 获取预览图片
-            previewCover(info.file).then(url => previewImage.value = url);
-            viewCover.value = true;
-            // form.cover = fileList;
-        }
-        /**
-         * 删除视频列表
-         * @param index 删除文件的索引
-         */
-        function removeFile(index: number): void {
-            const newFileList = form.video.slice();
-            newFileList.splice(index, 1);
-            form.video = newFileList;
-        }
-        /**
-         * 上传封面之前的钩子
-         * @param file 上传的文件
-         */
-        const beforeCoverUpload = (file: File): boolean => {
-            console.log(file);
-            return false;
-        }
-        /**
-         * 删除封面
-         */
-        function cancelCover(file: number): void {
-            console.log(file);
-            
-        }
-        /**
-         * 上传文件之前的钩子
-         * @param file 上传的文件
-         */
-        const beforeVideoUpload = (file: VideoInfo): boolean => {
-            console.log(file);
-            if(file.type != '') {
-                // handleRemove(file);
-            }
-            form.video = [...fileList, file];
-            return false;
-        }
-        /**
-         * 表单提交
-         */
-        const onSubmit = (e: FromSend) => {
-            e.preventDefault();
-        };
-        
-        return {
-            labelCol: { span: 4 },
-            wrapperCol: { span: 14 },
-            form,
-            viewCover,
-            previewImage,
-            removeFile,
-            previewCover,
-            coverChange,
-            cancelCover,
-            beforeCoverUpload,
-            beforeVideoUpload,
-            onSubmit,
-        }
     }
-})
+    const fileList: Array<FileItem> = [];
+
+    // 表单数据
+    const form = reactive({
+      title: "",
+      img: "",
+      fileid: "",
+      fileurl: "",
+      fileduration: "",
+      desc: "",
+      video:[""],
+    });
+    // 是否显示封面预览 封面的路径
+    const viewCover: Ref<boolean> = ref(false),
+      previewImage: Ref<string> = ref("");
+    /**
+     * 封面改变触发事件
+     */
+    function coverChange(info: ImgInfo): void {
+      // console.log(info);
+      // 获取预览图片
+      previewCover(info.file).then((url) => (previewImage.value = url));
+      viewCover.value = true;
+      // form.cover = fileList;
+    }
+
+    /**
+     * 上传封面之前的钩子
+     * @param file 上传的文件
+     */
+    const beforeCoverUpload = (file: File): boolean => {
+      console.log(file);
+      return false;
+    };
+
+
+    /**
+     * 删除封面
+     */
+    function cancelCover(file: number): void {
+      console.log(file);
+    }
+    /**
+     * 删除视频列表
+     * @param index 删除文件的索引
+     */
+    function removeFile(index: number): void {
+      const newFileList = form.video.slice();
+      newFileList.splice(index, 1);
+      form.video = newFileList;
+    }
+
+    /**
+     * 上传图片
+     */
+    const uploadpicprogress: Ref<number> = ref(0);
+    const videofile = ref<File>();
+    const videos = ref<Array<any>>([]);
+    interface AntUpload {
+      action: string;
+      data: unknown;
+      file: File;
+    }
+    async function uploadspic(file: AntUpload) {
+      let res = await uploadflie(file.file, (info: any) => {
+        console.log(info);
+        uploadpicprogress.value = info.percent.toFixed(2) * 100;
+      });
+      console.log(res);
+      form.img = res.video.url;
+    }
+
+    /**
+     * 上传视频
+     */
+    const uploadprogress: Ref<number> = ref(0);
+    async function uploads(file: AntUpload) {
+        uploadprogress.value=0
+        form.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;
+      });
+      let res = await uploadflie(file.file, (info: any) => {
+        console.log(info);
+        uploadprogress.value = info.percent.toFixed(2) * 100;
+      });
+      console.log(res);
+
+      form.fileid = res.fileId;
+      form.fileurl = res.video.url;
+      form.video[0]=res.video.url
+    }
+
+    /**
+     * 表单提交
+     */
+    const onSubmit = async (e: FromSend) => {
+      e.preventDefault();
+      console.log(toRaw(form), 111);
+      videoadd(toRaw(form));
+    };
+
+    return {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      form,
+      viewCover,
+      previewImage,
+      previewCover,
+      coverChange,
+      cancelCover,
+      beforeCoverUpload,
+      onSubmit,
+      uploadpicprogress,
+      uploadspic,
+      uploadprogress,
+      uploads,
+      videofile,
+      videos,
+      removeFile
+    };
+  },
+});
 </script>
 <style lang="scss" scoped>
+.upload {
+  width: 171px;
+  height: 96px;
+  display:none
+}
 .upload-video {
-    width: 100%;
+  width: 100%;
-    min-width: 700px;
+  min-width: 700px;
-    background-color: #ffffff;
+  background-color: #ffffff;
-    padding: 46px;
+  padding: 46px;
-    border-radius: 17px;
+  border-radius: 17px;
-    position: relative;
+  position: relative;
-    ::v-deep(.ant-form) {
+  ::v-deep(.ant-form) {
-        .title {
+    .title {
-            font-size: 12px;
+      font-size: 12px;
-            font-weight: bold;
+      font-weight: bold;
-            color: #111111;
+      color: #111111;
-            margin-bottom: 28px;
+      margin-bottom: 28px;
-        }
-        .ant-row {
-            .ant-form-item-label {
-                width: 60px;
-                margin: 0 30px 0 17px;
-                > label {
-                    font-size: 12px;
-                    font-weight: 500;
-                    color: #808080;
-                    &::after {
-                        content: '';
-                    }
-                }
-            }
-            .upload-image {
-                width: 171px;
-                height: 96px;
-                border: 1px solid #DCDFE0;
-                border-radius: 3px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                margin-right: 17px;
-            }
-            .ant-input {
-                width: 171px;
-                padding: 6px 11px;
-                border-radius: 3px;
-                border: 1px solid #DCDFE0;
-                font-size: 11px;
-                color: #3F3F3F;
-                &::-webkit-input-placeholder{
-                    font-size: 12px;
-                    color: #808080;
-                }
-            }
-            .ant-select {
-                font-size: 12px;
-                color: #3F3F3F;
-            }
-            .ant-select-dropdown {
-                font-size: 12px;
-            }
-            .ant-upload-list {
-                display: none;
-            }
-            .ant-btn {
-                padding: 0;
-                width: 63px;
-                height: 23px;
-                background: #08AE98;
-                border-radius: 3px;
-                font-size: 10px;
-                font-weight: 500;
-                color: #FFFFFF;
-            }
-        }
-        .video-cover {
-            .preview-image {
-                width: 171px;
-                height: 96px;
-            }
-        }
-        .video-introduction {
-            .ant-form-item-control-wrapper {
-                .ant-form-item-children {
-                    display: flex;
-                    // align-items: center;
-                    .demand {
-                        height: 94px;
-                        font-size: 10px;
-                        font-weight: 500;
-                        color: #808080;
-                        width: 134px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: center;
-                        > p {
-                            line-height: 17px;
-                            margin: 0;
-                        }
-                    }
-                }
-            }
-            .video-list {
-                display: flex;
-                align-items: center;
-                .link {
-                    width: 11px;
-                    height: 11px;
-                    margin-right: 4px;
-                }
-                > span {
-                    font-size: 9px;
-                    font-weight: 500;
-                    color: #07AD97;
-                    max-width: 150px;
-                }
-                .del {
-                    width: 11px;
-                    height: 11px;
-                    margin-left: auto;
-                    cursor: pointer;
-                }
-            }
-        }
-        .duration {
-            .unit {
-                margin-left: 18px;
-                font-size: 12px;
-                font-weight: 500;
-                color: #808080;
-            }
-        }
-        .brief {
-            position: relative;
-            .ant-input {
-                width: 359px;
-            }
-            .brief-textarea {
-                min-height: 85px;
-                padding-bottom: 30px;
-            }
-            .words-number {
-                position: absolute;
-                right: 11px;
-                bottom: -11px;
-                font-size: 11px;
-                font-weight: 500;
-                color: #7F7F7F;
-                user-select: none;
-            }
-        }
     }
+    .ant-row {
+      .ant-form-item-label {
+        width: 60px;
+        margin: 0 30px 0 17px;
+        > label {
+          font-size: 12px;
+          font-weight: 500;
+          color: #808080;
+          &::after {
+            content: "";
+          }
+        }
+      }
+      .upload-image {
+        width: 171px;
+        height: 96px;
+        border: 1px solid #dcdfe0;
+        border-radius: 3px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 17px;
+      }
+      .ant-input {
+        width: 171px;
+        padding: 6px 11px;
+        border-radius: 3px;
+        border: 1px solid #dcdfe0;
+        font-size: 11px;
+        color: #3f3f3f;
+        &::-webkit-input-placeholder {
+          font-size: 12px;
+          color: #808080;
+        }
+      }
+      .ant-select {
+        font-size: 12px;
+        color: #3f3f3f;
+      }
+      .ant-select-dropdown {
+        font-size: 12px;
+      }
+      .ant-upload-list {
+        display: none;
+      }
+      .ant-btn {
+        padding: 0;
+        width: 63px;
+        height: 23px;
+        background: #08ae98;
+        border-radius: 3px;
+        font-size: 10px;
+        font-weight: 500;
+        color: #ffffff;
+      }
+    }
+    .video-cover {
+      .preview-image {
+        width: 171px;
+        height: 96px;
+      }
+    }
+    .video-introduction {
+      .ant-form-item-control-wrapper {
+        .ant-form-item-children {
+          display: flex;
+          // align-items: center;
+          .demand {
+            height: 94px;
+            font-size: 10px;
+            font-weight: 500;
+            color: #808080;
+            width: 134px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            > p {
+              line-height: 17px;
+              margin: 0;
+            }
+          }
+        }
+      }
+      .video-list {
+        display: flex;
+        align-items: center;
+        .link {
+          width: 11px;
+          height: 11px;
+          margin-right: 4px;
+        }
+        > span {
+          font-size: 9px;
+          font-weight: 500;
+          color: #07ad97;
+          max-width: 150px;
+        }
+        .del {
+          width: 11px;
+          height: 11px;
+          margin-left: auto;
+          cursor: pointer;
+        }
+      }
+    }
+    .duration {
+      .unit {
+        margin-left: 18px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #808080;
+      }
+    }
+    .brief {
+      position: relative;
+      .ant-input {
+        width: 359px;
+      }
+      .brief-textarea {
+        min-height: 85px;
+        padding-bottom: 30px;
+      }
+      .words-number {
+        position: absolute;
+        right: 11px;
+        bottom: -11px;
+        font-size: 11px;
+        font-weight: 500;
+        color: #7f7f7f;
+        user-select: none;
+      }
+    }
+  }
 }
 </style>

src/views/regime/Live.vue

@@ -146,9 +146,9 @@ export default defineComponent({
   setup() {
     const page = ref(1);
     const tabindex = ref(1);
-    const livelist=ref<Array<LiveList>>()
+    const livelist=ref<LiveList[]>()
     onMounted(async ()=>{
-      livelist.value= await getlivelist()
+      livelist.value = await getlivelist();
     })
      function tabchange(e: number): void {
          tabindex.value=e

src/views/regime/Video.vue

@@ -2,51 +2,85 @@
   <div class="video">
     <div class="nav">
       <div class="tabs">
-        <div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">全部视频</div>
+        <div :class="tabindex == 4 ? 'on' : ''" @click="tabchange(4)">
-        <div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">审核中</div>
+          全部视频
-        <div :class="tabindex == 3 ? 'on' : ''" @click="tabchange(3)">未通过</div>
+        </div>
-        <div :class="tabindex == 4 ? 'on' : ''" @click="tabchange(4)">已发布</div>
+        <div :class="tabindex == 0 ? 'on' : ''" @click="tabchange(0)">
+          审核中
+        </div>
+        <div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">
+          未通过
+        </div>
+        <div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">
+          已发布
+        </div>
       </div>
       <div class="sel">
         <img src="@/static/images/sousuo.png" alt="" class="icon" />
         <input type="text" />
       </div>
     </div>
-    <div class="list" v-if="tabindex==1">
+    <div class="list" v-if="tabindex == 4">
-      <VideoItem></VideoItem>
+      <VideoItem
-      <VideoItem></VideoItem>
+        v-for="(i, j) in videolist"
-      <VideoItem></VideoItem>
+        :key="j"
-      <VideoItem></VideoItem>
+        :videoid="i.videoid"
-      <VideoItem></VideoItem>
+        :img="i.img"
-      <VideoItem></VideoItem>
+        :title="i.title"
-      <VideoItem></VideoItem>
+        :score="i.score"
-      <VideoItem></VideoItem>
+        :date="i.created_at"
-      <VideoItem></VideoItem>
+        :takehour="i.fileduration"
-      <VideoItem></VideoItem>
+        :livenum="i.statusname"
+        :status="i.status"
+        :watch="i.watch"
+        :share="i.share"
+      ></VideoItem>
     </div>
 
-       <div class="list" v-if="tabindex==2">
+    <div class="list" v-if="tabindex == 0">
-      <VideoItem ></VideoItem>
+      <VideoItem
-      <VideoItem></VideoItem>
+        v-for="(i, j) in videolist"
-      <VideoItem></VideoItem>
+        :key="j"
-      <VideoItem></VideoItem>
+        :img="i.img"
-      <VideoItem></VideoItem>
+        :title="i.title"
-      <VideoItem></VideoItem>
+        :score="i.score"
+        :date="i.created_at"
+        :takehour="i.fileduration"
+        :livenum="i.statusname"
+        :status="i.status"
+        :watch="i.watch"
+        :share="i.share"
+      ></VideoItem>
     </div>
-          <div class="list" v-if="tabindex==3">
+    <div class="list" v-if="tabindex == 1">
-      <VideoItem :type="2"></VideoItem>
+      <VideoItem
-      <VideoItem :type="2"></VideoItem>
+        v-for="(i, j) in videolist"
-      <VideoItem :type="2"></VideoItem>
+        :key="j"
-      <VideoItem :type="2"></VideoItem>
+        :img="i.img"
+        :title="i.title"
+        :score="i.score"
+        :date="i.created_at"
+        :takehour="i.fileduration"
+        :livenum="i.statusname"
+        :status="i.status"
+        :watch="i.watch"
+        :share="i.share"
+      ></VideoItem>
     </div>
-        <div class="list" v-if="tabindex==4">
+    <div class="list" v-if="tabindex == 2">
-      <VideoItem :type="3"></VideoItem>
+      <VideoItem
-      <VideoItem :type="3"></VideoItem>
+        v-for="(i, j) in videolist"
-      <VideoItem :type="3"></VideoItem>
+        :key="j"
-      <VideoItem :type="3"></VideoItem>
+        :img="i.img"
-      <VideoItem  :type="3"></VideoItem>
+        :title="i.title"
-      <VideoItem :type="3"></VideoItem>
+        :score="i.score"
- 
+        :date="i.created_at"
+        :takehour="i.fileduration"
+        :livenum="i.statusname"
+        :status="i.status"
+        :watch="i.watch"
+        :share="i.share"
+      ></VideoItem>
     </div>
     <div class="pages">
       <a-pagination v-model:current="page" :total="500" :showLessItems="true" />
@@ -154,24 +188,53 @@
 }
 </style>
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent, onMounted, reactive, ref, UnwrapRef } from "vue";
 import VideoItem from "@/components/VideoItem.vue";
-import { getvideolist } from '@/api';
+import { getvideolist } from "@/api";
+import { useRoute } from 'vue-router';
 export default defineComponent({
   components: {
     VideoItem,
   },
   setup() {
     const page = ref(6);
-    const tabindex = ref(1);
+    const tabindex = ref(4);
-    getvideolist()
+    interface VideoList {
-     function tabchange(e: number): void {
+      videoid: number;
-         tabindex.value=e
+      memberid: number;
+      title: string;
+      img: string;
+      fileid: string;
+      fileurl: string;
+      fileduration: string;
+      status: number;
+      desc: string;
+      deleted_at: null;
+      created_at: string;
+      updated_at: string;
+      statusname: string;
+    }
+    
+    const videolist = ref<Array<VideoList>>();
+    // const newvideolist = ref<Array<VideoList>>();
+
+    
+
+    onMounted(async () => {
+
+      const res = await getvideolist();
+      videolist.value = res;
+
+    });
+    function tabchange(e: number): void {
+      tabindex.value = e;
+      // console.log(videolist)
     }
     return {
       page,
       tabindex,
-      tabchange
+      tabchange,
+      videolist
     };
   },
 });

src/views/regime/VideoInfo.vue

@@ -25,6 +25,9 @@ import { defineComponent } 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 { videodetail } from '@/api';
+import { useRoute } from 'vue-router';
 export default defineComponent({
     components:{
         VideoPlay,
@@ -32,7 +35,11 @@ export default defineComponent({
         VideoReview
     },
     setup(){
-        console.log(1)
+        // console.log(1)
+        console.log(useRoute().query)
+       const result= videodetail(useRoute().query.id)
+       console.log(result,46546)
+        
     }
 })
 </script>