视频列表

This commit is contained in:
asd 2020-10-14 15:30:29 +08:00
parent 3d7070b8d7
commit 9dbaebfff2
7 changed files with 620 additions and 376 deletions

View File

@ -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,
username: user.data?.name,
language: user.data?.language,
currency: user.data?.currency,
zoneStr: user.data?.zoneStr,
memberid: user.data?.memberid,
country: user.data?.country,
live: user.data?.live,
mtongue: user.data?.mtongue,
tlanguage: user.data?.tlanguage,
willsay: user.data?.willsay,
interest: user.data?.interest,
mobile: user.data?.mobile,
email: user.data?.email,
birthday: user.data?.birthday,
video: user.data?.video,
desc: user.data?.desc,
money: user.data?.money
head: user.data.img,
username: user.data.name,
language: user.data.language,
currency: user.data.currency,
zoneStr: user.data.zoneStr,
memberid: user.data.memberid,
country: user.data.country,
live: user.data.live,
mtongue: user.data.mtongue,
tlanguage: user.data.tlanguage,
willsay: user.data.willsay,
interest: user.data.interest,
mobile: user.data.mobile,
email: user.data.email,
birthday: user.data.birthday,
video: user.data.video,
desc: user.data.desc,
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,
videoInfo:res.data?.videoInfo,
studentInfo:res.data?.studentInfo
liveInfo: res.data.liveInfo,
videoInfo:res.data.videoInfo,
studentInfo:res.data.studentInfo
}
}
@ -170,4 +171,44 @@ 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)
}

View File

@ -1,34 +1,35 @@
<template>
<div class="videoitem" @click="navto()">
<img src="" alt="" class="cover">
<div class="videoitem" @click="navto(videoid)">
<img :src="img" alt="" class="cover">
<img src="@/static/images/play.png" alt="" class="play">
<div class="title">
sadghaskghdfjkaghjkfha
<span class="lv">7.3</span>
{{title}} {{videoid}}
<span class="lv">{{score}}</span>
</div>
<div class="info">
<div class="datetime">
<span>2020-09-11</span>
<span class="time">09:30</span>
<span>{{date.split(" ")[0]}}</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(){
router.push("/regime/videoinfo")
function navto(e: number){
router.push("/regime/videoinfo?id="+e)
}
return {
navto
navto,
}
}
})

View File

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

View File

@ -1,301 +1,406 @@
<template>
<div class="upload-video">
<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
<div class="title">上传视频</div>
<a-form-item label="视频标题">
<a-input size="small" v-model:value="form.title" placeholder="请输入您的视频标题" />
</a-form-item>
<a-form-item label="视频封面" class="video-cover">
<a-upload
list-type="picture"
@change="coverChange"
>
<div class="upload-image" v-if="!viewCover">
<PlusOutlined style="fontSize: 22px;" />
</div>
<div class="preview-image" v-else>
<img style="width: 100%" :src="previewImage" />
</div>
</a-upload>
</a-form-item>
<a-form-item label="选择视频" class="video-introduction">
<div class="upload-container">
<a-upload :beforeUpload="beforeVideoUpload">
<div class="upload-image">
<PlaySquareOutlined style="fontSize: 22px;" />
</div>
</a-upload>
<!-- 文件列表 -->
<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.name }}</span>
<img src="@/static/images/delete.png" @click="removeFile(index)" class="del" />
</div>
</div>
<div class="demand">
<p class="one-line-hide">视频要求</p>
<p class="one-line-hide">1.文件扩展名fivmp4文件扩展名fivmp4</p>
</div>
</a-form-item>
<a-form-item label="视频简介" class="brief">
<a-textarea v-model:value="form.brief" :autoSize="true" class="brief-textarea" :maxlength="200" placeholder="请输入您的视频简介" />
<span class="words-number">{{ form.brief.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>
<div class="upload-video">
<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
<div class="title">上传视频</div>
<a-form-item label="视频标题">
<a-input
size="small"
v-model:value="form.title"
placeholder="请输入您的视频标题"
/>
</a-form-item>
<a-form-item label="视频封面" class="video-cover">
<a-upload list-type="picture" :customRequest="uploadspic">
<div class="upload-image" v-if="!viewCover && form.img.length == 0">
<PlusOutlined
style="fontsize: 22px"
v-if="uploadpicprogress == 0"
/>
<a-progress
type="circle"
:percent="uploadpicprogress"
:width="80"
v-else
/>
</div>
<div class="upload-image" v-else>
<img style="width: 100%; height: 100%" :src="form.img" />
</div>
</a-upload>
</a-form-item>
<a-form-item label="选择视频" class="video-introduction">
<div class="upload-container">
<a-upload list-type="picture" :customRequest="uploads" :beforeUpload="beforeVideoUpload">
<div class="upload-image">
<PlaySquareOutlined
style="fontsize: 22px"
v-if="uploadprogress == 0"
/>
<a-progress
type="circle"
:percent="uploadprogress"
:width="80"
v-else
/>
<video style="display: none" :src="videofile"></video>
</div>
<div
class="upload-image upload"
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.文件扩展名fivmp4文件扩展名fivmp4
</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 { 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 { defineComponent, 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";
export default defineComponent({
name: 'ReleaseWebcast',
components: {
PlaySquareOutlined,
PlusOutlined,
NavBottom,
},
setup() {
interface FileItem{
uid: 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,
}
name: "ReleaseWebcast",
components: {
PlaySquareOutlined,
PlusOutlined,
NavBottom,
},
setup() {
interface FileItem {
video:Array<string>,
}
})
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%;
min-width: 700px;
background-color: #ffffff;
padding: 46px;
border-radius: 17px;
position: relative;
::v-deep(.ant-form) {
.title {
font-size: 12px;
font-weight: bold;
color: #111111;
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;
}
}
width: 100%;
min-width: 700px;
background-color: #ffffff;
padding: 46px;
border-radius: 17px;
position: relative;
::v-deep(.ant-form) {
.title {
font-size: 12px;
font-weight: bold;
color: #111111;
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;
}
}
}
}
</style>

View File

@ -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

View File

@ -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 == 2 ? 'on' : ''" @click="tabchange(2)">审核中</div>
<div :class="tabindex == 3 ? 'on' : ''" @click="tabchange(3)">未通过</div>
<div :class="tabindex == 4 ? 'on' : ''" @click="tabchange(4)">已发布</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">
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<div class="list" v-if="tabindex == 4">
<VideoItem
v-for="(i, j) in videolist"
:key="j"
:videoid="i.videoid"
: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==2">
<VideoItem ></VideoItem>
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<VideoItem></VideoItem>
<div class="list" v-if="tabindex == 0">
<VideoItem
v-for="(i, j) in videolist"
:key="j"
: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==3">
<VideoItem :type="2"></VideoItem>
<VideoItem :type="2"></VideoItem>
<VideoItem :type="2"></VideoItem>
<VideoItem :type="2"></VideoItem>
<div class="list" v-if="tabindex == 1">
<VideoItem
v-for="(i, j) in videolist"
:key="j"
: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">
<VideoItem :type="3"></VideoItem>
<VideoItem :type="3"></VideoItem>
<VideoItem :type="3"></VideoItem>
<VideoItem :type="3"></VideoItem>
<VideoItem :type="3"></VideoItem>
<VideoItem :type="3"></VideoItem>
<div class="list" v-if="tabindex == 2">
<VideoItem
v-for="(i, j) in videolist"
:key="j"
: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="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);
getvideolist()
function tabchange(e: number): void {
tabindex.value=e
const tabindex = ref(4);
interface VideoList {
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;
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
};
},
});

View File

@ -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>