视频列表
This commit is contained in:
parent
3d7070b8d7
commit
9dbaebfff2
@ -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)
|
||||
}
|
||||
@ -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,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
4
src/types/index.d.ts
vendored
4
src/types/index.d.ts
vendored
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…</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.文件扩展名：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 { 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>
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user