直播管理 #39
@ -1,6 +1,6 @@
|
||||
import router from '@/router';
|
||||
import store from '@/store';
|
||||
import { LoginData, UserInfo } from '@/types';
|
||||
import { LiveList, LoginData, UserInfo } from '@/types';
|
||||
import { saveValue } from '@/utils/common';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { get, post, setToken } from './base'
|
||||
@ -132,35 +132,12 @@ export async function getvideolist() {
|
||||
* 直播列表
|
||||
*/
|
||||
|
||||
interface LiveList {
|
||||
liveid: number;
|
||||
memberid: number;
|
||||
title: string;
|
||||
img: string;
|
||||
fileid: string;
|
||||
fileurl: string;
|
||||
fileduration: string;
|
||||
vodurl: string;
|
||||
vodid: string;
|
||||
vodduration: string;
|
||||
dateline: string;
|
||||
livetime: number;
|
||||
livenumber: number;
|
||||
status: number;
|
||||
livestatus: number;
|
||||
students: string;
|
||||
desc: string;
|
||||
deleted_at: null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
statusname: string;
|
||||
starttime: string;
|
||||
begin: number;
|
||||
}
|
||||
|
||||
export async function getlivelist() {
|
||||
const res = await get<Array<LiveList>>('live');
|
||||
console.log(res);
|
||||
|
||||
export async function getlivelist(data?:any) {
|
||||
const res = await get<Array<LiveList>>('live',data);
|
||||
// console.log(res);
|
||||
return res.data
|
||||
}
|
||||
|
||||
/**
|
||||
@ -181,4 +158,16 @@ export async function getstatisticlist() {
|
||||
videoInfo:res.data?.videoInfo,
|
||||
studentInfo:res.data?.studentInfo
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 发布直播
|
||||
*/
|
||||
interface Liveaddrule{
|
||||
code:number,
|
||||
msg:string
|
||||
}
|
||||
export async function liveadd(data:any) {
|
||||
const res = await post<Liveaddrule>('live',data);
|
||||
console.log(res)
|
||||
}
|
||||
@ -1,34 +1,34 @@
|
||||
<template>
|
||||
<div class="videoitem" @click="navto()">
|
||||
<img src="" alt="" class="cover">
|
||||
<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}}
|
||||
<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/shijian.png" alt="">
|
||||
<span>123</span>
|
||||
<span>{{takehour}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/static/images/studentnum.png" alt="">
|
||||
<span>3</span>
|
||||
<span>{{livenum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state audit" v-if="type==1">
|
||||
<div class="state audit" v-if="status==0">
|
||||
还未开始
|
||||
</div>
|
||||
<div class="state live" v-if="type==2">
|
||||
<div class="state live" v-if="status==1">
|
||||
进入直播
|
||||
</div>
|
||||
<div class="state over" v-if="type==3">
|
||||
<div class="state over" v-if="status==2">
|
||||
查看回放
|
||||
</div>
|
||||
</div>
|
||||
@ -141,6 +141,27 @@ export default defineComponent({
|
||||
type: {
|
||||
type: Number,
|
||||
default:1
|
||||
},
|
||||
img:{
|
||||
type:String
|
||||
},
|
||||
title:{
|
||||
type:String
|
||||
},
|
||||
score:{
|
||||
type:Number
|
||||
},
|
||||
date:{
|
||||
type:String
|
||||
},
|
||||
takehour:{
|
||||
type:String
|
||||
},
|
||||
livenum:{
|
||||
type:Number
|
||||
},
|
||||
status:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
setup(props){
|
||||
|
||||
27
src/types/index.d.ts
vendored
27
src/types/index.d.ts
vendored
@ -60,4 +60,31 @@ export interface UserInfo {
|
||||
video: string;
|
||||
desc: string;
|
||||
money: string;
|
||||
}
|
||||
|
||||
|
||||
export interface LiveList {
|
||||
liveid: number;
|
||||
memberid: number;
|
||||
title: string;
|
||||
img: string;
|
||||
fileid: string;
|
||||
fileurl: string;
|
||||
fileduration: string;
|
||||
vodurl: string;
|
||||
vodid: string;
|
||||
vodduration: string;
|
||||
dateline: string;
|
||||
livetime: number;
|
||||
livenumber: number;
|
||||
status: number;
|
||||
livestatus: number;
|
||||
students: string;
|
||||
desc: string;
|
||||
deleted_at: null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
statusname: string;
|
||||
starttime: string;
|
||||
begin: number;
|
||||
}
|
||||
@ -1,379 +1,560 @@
|
||||
<template>
|
||||
<div class="webcast">
|
||||
<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="item-cover">
|
||||
<a-upload
|
||||
list-type="picture"
|
||||
@change="coverChange"
|
||||
action="//jsonplaceholder.typicode.com/posts/"
|
||||
>
|
||||
<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">
|
||||
<a-upload
|
||||
list-type="picture"
|
||||
action="//jsonplaceholder.typicode.com/posts/"
|
||||
>
|
||||
<div class="upload-image">
|
||||
<PlaySquareOutlined style="fontSize: 22px;" />
|
||||
</div>
|
||||
</a-upload>
|
||||
<div class="demand">
|
||||
<p class="one-line-hide">视频要求：</p>
|
||||
<p class="one-line-hide"> 1.上传视频时间要求为30s之内</p>
|
||||
<p class="one-line-hide">2.支持文件大小100M</p>
|
||||
<p class="one-line-hide">3.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…</p>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="开始时间">
|
||||
<a-input size="small" v-model:value="form.startTime" placeholder="请设置您的开始时间" />
|
||||
</a-form-item>
|
||||
<a-form-item label="直播时长" class="duration" v-bind="validateInfos.duration">
|
||||
<a-input size="small" v-model:value="form.duration" placeholder="请输入直播时间" />
|
||||
<span class="unit">分钟</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="直播人数" v-bind="validateInfos.number">
|
||||
<a-input size="small" v-model:value="form.number" placeholder="请输入直播人数" />
|
||||
</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>
|
||||
<div class="modal-container">
|
||||
<a-modal
|
||||
centered
|
||||
:footer="null"
|
||||
:getContainer="modalNode"
|
||||
dialogClass="modal-dialog"
|
||||
v-model:visible="isEntitled"
|
||||
@cancel="hideNoticeModal"
|
||||
>
|
||||
<template v-slot:closeIcon>
|
||||
<img src="@/static/images/delete.png" class="close" />
|
||||
</template>
|
||||
<div class="notice-container report" v-if="0">
|
||||
<div class="title">您尚未获得直播资格</div>
|
||||
<div class="title sub-title">您被 学生XXX<span class="red">举报，发生违规行为</span>,如有疑问，点击反馈</div>
|
||||
<div class="confirm-btn">意见反馈</div>
|
||||
</div>
|
||||
<div class="notice-container" v-else>
|
||||
<div class="title">您尚未获得直播资格</div>
|
||||
<div class="title sub-title">上一周/月您在平台视频点击量为 <span class="red">第24名</span>，要在前 <span class="bule">20名</span> 才能获得直播资格</div>
|
||||
<rank-list></rank-list>
|
||||
</div>
|
||||
</a-modal>
|
||||
<div class="webcast">
|
||||
<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="item-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">
|
||||
<a-upload list-type="picture" :customRequest="uploads">
|
||||
<div class="upload-image" v-if="form.fileurl.length == 0">
|
||||
<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="form.fileurl.length != 0"
|
||||
>
|
||||
<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 class="demand">
|
||||
<p class="one-line-hide">视频要求：</p>
|
||||
<p class="one-line-hide">1.上传视频时间要求为30s之内</p>
|
||||
<p class="one-line-hide">2.支持文件大小100M</p>
|
||||
<p class="one-line-hide">
|
||||
3.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…
|
||||
</p>
|
||||
</div>
|
||||
<nav-bottom></nav-bottom>
|
||||
</a-form-item>
|
||||
<a-form-item label="开始时间">
|
||||
<!-- <a-input
|
||||
size="small"
|
||||
v-model:value="form.startTime"
|
||||
placeholder="请设置您的开始时间"
|
||||
/> -->
|
||||
<a-date-picker @change="startchange" placeholder="请设置您的开始时间" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="直播时长"
|
||||
class="duration"
|
||||
v-bind="validateInfos.livetime"
|
||||
>
|
||||
<a-input
|
||||
size="small"
|
||||
v-model:value="form.livetime"
|
||||
placeholder="请输入直播时间"
|
||||
/>
|
||||
<span class="unit">分钟</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="直播人数" v-bind="validateInfos.livenumber">
|
||||
<a-input
|
||||
size="small"
|
||||
v-model:value="form.livenumber"
|
||||
placeholder="请输入直播人数"
|
||||
/>
|
||||
</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>
|
||||
<div class="modal-container">
|
||||
<a-modal
|
||||
centered
|
||||
:footer="null"
|
||||
:getContainer="modalNode"
|
||||
dialogClass="modal-dialog"
|
||||
v-model:visible="isEntitled"
|
||||
@cancel="hideNoticeModal"
|
||||
>
|
||||
<template v-slot:closeIcon>
|
||||
<img src="@/static/images/delete.png" class="close" />
|
||||
</template>
|
||||
<div class="notice-container report" v-if="0">
|
||||
<div class="title">您尚未获得直播资格</div>
|
||||
<div class="title sub-title">
|
||||
您被 学生XXX<span class="red">举报，发生违规行为</span
|
||||
>,如有疑问，点击反馈
|
||||
</div>
|
||||
<div class="confirm-btn">意见反馈</div>
|
||||
</div>
|
||||
<div class="notice-container" v-else>
|
||||
<div class="title">您尚未获得直播资格</div>
|
||||
<div class="title sub-title">
|
||||
上一周/月您在平台视频点击量为
|
||||
<span class="red">第24名</span>，要在前
|
||||
<span class="bule">20名</span> 才能获得直播资格
|
||||
</div>
|
||||
<rank-list></rank-list>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
<nav-bottom></nav-bottom>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, Ref, ref, toRaw } from 'vue';
|
||||
import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { useForm } from '@ant-design-vue/use';
|
||||
import NavBottom from '@/components/NavBottom.vue';
|
||||
import RankList from './RankList.vue';
|
||||
import { previewCover } from '@/utils/common';
|
||||
import { FromSend, ImgInfo } from "@/types/index"
|
||||
import {
|
||||
defineComponent,
|
||||
onBeforeUpdate,
|
||||
onMounted,
|
||||
reactive,
|
||||
Ref,
|
||||
ref,
|
||||
toRaw,
|
||||
} from "vue";
|
||||
import { PlaySquareOutlined, PlusOutlined } from "@ant-design/icons-vue";
|
||||
import { useForm } from "@ant-design-vue/use";
|
||||
import NavBottom from "@/components/NavBottom.vue";
|
||||
import RankList from "./RankList.vue";
|
||||
import { previewCover } from "@/utils/common";
|
||||
import { FromSend, ImgInfo } from "@/types/index";
|
||||
import { uploadflie } from "@/utils/vod";
|
||||
import { liveadd } from "@/api";
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ReleaseWebcast',
|
||||
components: {
|
||||
PlaySquareOutlined,
|
||||
PlusOutlined,
|
||||
NavBottom,
|
||||
RankList,
|
||||
},
|
||||
setup() {
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
title: '',
|
||||
cover: '',
|
||||
introduction: '',
|
||||
startTime: '',
|
||||
duration: '',
|
||||
number: '',
|
||||
brief: '',
|
||||
});
|
||||
/**
|
||||
* 验证直播时间
|
||||
*/
|
||||
async function validateDuration (rule: unknown, value: number): Promise<string | void> {
|
||||
if (value < 30 || value > 120) {
|
||||
return Promise.reject('*最短30min 最长120min');
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 验证直播人数
|
||||
*/
|
||||
const validateNumber = async (rule: unknown, value: number): Promise<string | void> => {
|
||||
if (value < 1 || value > 4) {
|
||||
return Promise.reject('**最少1人，最多4人');
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
};
|
||||
// 验证规则
|
||||
const rules = reactive({
|
||||
duration: [
|
||||
{
|
||||
validator: validateDuration,
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
number: [
|
||||
{
|
||||
validator: validateNumber,
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
});
|
||||
name: "ReleaseWebcast",
|
||||
components: {
|
||||
PlaySquareOutlined,
|
||||
PlusOutlined,
|
||||
NavBottom,
|
||||
RankList,
|
||||
},
|
||||
setup() {
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
title: "",
|
||||
img: "",
|
||||
fileid: "",
|
||||
fileurl: "",
|
||||
fileduration: 0,
|
||||
dateline: "",
|
||||
livetime: "",
|
||||
livenumber: "",
|
||||
desc: "",
|
||||
});
|
||||
|
||||
// 是否显示封面预览 封面的路径
|
||||
const viewCover: Ref<boolean> = ref(false);
|
||||
const 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;
|
||||
}
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
|
||||
const onSubmit = (e: FromSend) => {
|
||||
e.preventDefault();
|
||||
validate().then(() => {
|
||||
console.log(toRaw(form));
|
||||
}).catch((err: unknown) => {
|
||||
console.log('error', err);
|
||||
});
|
||||
};
|
||||
const isEntitled: Ref<boolean> = ref(true);
|
||||
/**
|
||||
* 隐藏无资格提示
|
||||
*/
|
||||
function hideNoticeModal(): void {
|
||||
isEntitled.value = false;
|
||||
}
|
||||
return {
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 14 },
|
||||
modalNode: () => document.getElementsByClassName('modal-container')[0],
|
||||
validateInfos,
|
||||
resetFields,
|
||||
viewCover,
|
||||
previewImage,
|
||||
coverChange,
|
||||
form,
|
||||
onSubmit,
|
||||
isEntitled,
|
||||
hideNoticeModal,
|
||||
}
|
||||
const uploadprogress: Ref<number> = ref(0);
|
||||
const uploadpicprogress: Ref<number> = ref(0);
|
||||
const videofile = ref<File>();
|
||||
const videos = ref<Array<any>>([]);
|
||||
/**
|
||||
* 验证直播时间
|
||||
*/
|
||||
async function validateaLivetime(
|
||||
rule: unknown,
|
||||
value: number
|
||||
): Promise<string | void> {
|
||||
console.log(value);
|
||||
if (value < 30 || value > 120) {
|
||||
return Promise.reject("*最短30min 最长120min");
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
})
|
||||
/**
|
||||
* 验证直播人数
|
||||
*/
|
||||
const validateLivenumber = async (
|
||||
rule: unknown,
|
||||
value: number
|
||||
): Promise<string | void> => {
|
||||
console.log(value);
|
||||
if (value < 1 || value > 4) {
|
||||
return Promise.reject("**最少1人，最多4人");
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
};
|
||||
// 验证规则
|
||||
const rules = reactive({
|
||||
livetime: [
|
||||
{
|
||||
validator: validateaLivetime,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
livenumber: [
|
||||
{
|
||||
validator: validateLivenumber,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 是否显示封面预览 封面的路径
|
||||
const viewCover: Ref<boolean> = ref(false);
|
||||
const 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;
|
||||
}
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
|
||||
const subdata = reactive({
|
||||
title: "",
|
||||
img: "",
|
||||
fileid: "",
|
||||
fileurl: "",
|
||||
fileduration: "",
|
||||
dateline: "",
|
||||
livetime: "",
|
||||
livenumber: "",
|
||||
desc: "",
|
||||
});
|
||||
|
||||
const onSubmit = (e: FromSend) => {
|
||||
e.preventDefault();
|
||||
validate()
|
||||
.then(() => {
|
||||
// console.log(toRaw(form),111);
|
||||
let subdata = toRaw(form);
|
||||
// subdata.fileid=picinfo.
|
||||
console.log(subdata);
|
||||
liveadd(subdata);
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
console.log("error", err);
|
||||
});
|
||||
};
|
||||
const isEntitled: Ref<boolean> = ref(true);
|
||||
/**
|
||||
* 隐藏无资格提示
|
||||
*/
|
||||
function hideNoticeModal(): void {
|
||||
isEntitled.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始时间设置
|
||||
*/
|
||||
|
||||
function startchange(e: string): void {
|
||||
let month=new Date(e).getMonth()+1
|
||||
console.log(new Date(e).getFullYear()+"-"+month+'-'+new Date(e).getDate())
|
||||
form.dateline =
|
||||
new Date(e).getFullYear() +
|
||||
"-" +
|
||||
month +
|
||||
"-" +
|
||||
new Date(e).getDate();
|
||||
}
|
||||
/**
|
||||
* 上传文件
|
||||
*/
|
||||
const videoinfo = reactive({
|
||||
fileId: "",
|
||||
url: "",
|
||||
});
|
||||
const picinfo = reactive({
|
||||
fileId: "",
|
||||
url: "",
|
||||
});
|
||||
interface AntUpload {
|
||||
action: string;
|
||||
data: unknown;
|
||||
file: File;
|
||||
}
|
||||
async function uploads(file: AntUpload) {
|
||||
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;
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
// picinfo.fileId=res.fileId
|
||||
// picinfo.url=res.video.url
|
||||
form.img = res.video.url;
|
||||
}
|
||||
|
||||
return {
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 14 },
|
||||
modalNode: () => document.getElementsByClassName("modal-container")[0],
|
||||
validateInfos,
|
||||
resetFields,
|
||||
viewCover,
|
||||
previewImage,
|
||||
coverChange,
|
||||
form,
|
||||
onSubmit,
|
||||
isEntitled,
|
||||
hideNoticeModal,
|
||||
uploads,
|
||||
uploadprogress,
|
||||
videoinfo,
|
||||
uploadspic,
|
||||
uploadpicprogress,
|
||||
picinfo,
|
||||
startchange,
|
||||
videofile,
|
||||
videos,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.webcast {
|
||||
width: 100%;
|
||||
min-width: 700px;
|
||||
background-color: #ffffff;
|
||||
padding: 46px;
|
||||
border-radius: 17px;
|
||||
position: relative;
|
||||
::v-deep(.ant-form) {
|
||||
.title {
|
||||
font-size: 12px;
|
||||
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 {
|
||||
width: 171px;
|
||||
height: 96px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.ant-select-dropdown {
|
||||
font-size: 12px;
|
||||
}
|
||||
.ant-form-explain {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #d22d2e;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.item-cover {
|
||||
.preview-image {
|
||||
width: 171px;
|
||||
height: 96px;
|
||||
}
|
||||
}
|
||||
.video-introduction {
|
||||
.ant-form-item-control-wrapper {
|
||||
.ant-form-item-children {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.demand {
|
||||
line-height: 17px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #808080;
|
||||
width: 134px;
|
||||
> p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-container {
|
||||
::v-deep(.modal-dialog) {
|
||||
.close {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.ant-modal-content {
|
||||
box-sizing: border-box;
|
||||
padding: 25px 30px;
|
||||
width: 569px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 6px 0px rgba(102, 102, 102, 0.07);
|
||||
border-radius: 28px;
|
||||
.notice-container {
|
||||
.title {
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
color: #111111;
|
||||
margin-bottom: 28px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.sub-title {
|
||||
.red {
|
||||
color: #d12c2d;
|
||||
}
|
||||
.bule {
|
||||
color: #0dbba3;
|
||||
}
|
||||
}
|
||||
.confirm-btn {
|
||||
display: inline-block;
|
||||
background: #07ad97;
|
||||
border-radius: 2px;
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
padding: 0 17px;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.ant-select-dropdown {
|
||||
font-size: 12px;
|
||||
}
|
||||
.ant-form-explain {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #D22D2E;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.item-cover {
|
||||
.preview-image {
|
||||
width: 171px;
|
||||
height: 96px;
|
||||
}
|
||||
}
|
||||
.video-introduction {
|
||||
.ant-form-item-control-wrapper {
|
||||
.ant-form-item-children {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.demand {
|
||||
line-height: 17px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #808080;
|
||||
width: 134px;
|
||||
> p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-container {
|
||||
::v-deep(.modal-dialog) {
|
||||
.close {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.ant-modal-content {
|
||||
box-sizing: border-box;
|
||||
padding: 25px 30px;
|
||||
width: 569px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 6px 0px rgba(102, 102, 102, 0.07);
|
||||
border-radius: 28px;
|
||||
.notice-container {
|
||||
.title {
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
color: #111111;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.sub-title {
|
||||
.red {
|
||||
color: #D12C2D;
|
||||
}
|
||||
.bule {
|
||||
color: #0DBBA3;
|
||||
}
|
||||
}
|
||||
.confirm-btn {
|
||||
display: inline-block;
|
||||
background: #07AD97;
|
||||
border-radius: 2px;
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
padding: 0 17px;
|
||||
}
|
||||
}
|
||||
.report {
|
||||
.sub-title {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.report {
|
||||
.sub-title {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -12,16 +12,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="list" v-if="tabindex==1">
|
||||
<LiveItem :type="2"></LiveItem>
|
||||
<LiveItem :type="2"></LiveItem>
|
||||
<LiveItem :type="2"></LiveItem>
|
||||
<LiveItem></LiveItem>
|
||||
<LiveItem></LiveItem>
|
||||
<LiveItem></LiveItem>
|
||||
<LiveItem></LiveItem>
|
||||
<LiveItem></LiveItem>
|
||||
<LiveItem></LiveItem>
|
||||
<LiveItem></LiveItem>
|
||||
<LiveItem :type="2" v-for="(i,j) in livelist" :key="j" :img="i.img" :title="i.title" :score="i.score" :date="i.starttime" :takehour="i.vodduration" :livenum="i.livenumber" :status="i.livestatus"></LiveItem>
|
||||
</div>
|
||||
|
||||
<div class="list" v-if="tabindex==2">
|
||||
@ -144,24 +135,29 @@
|
||||
}
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { defineComponent, onMounted, ref } from "vue";
|
||||
import LiveItem from "@/components/LiveItem.vue";
|
||||
import { getlivelist } from '@/api';
|
||||
import { LiveList } from '@/types';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
LiveItem,
|
||||
},
|
||||
setup() {
|
||||
const page = ref(6);
|
||||
const page = ref(1);
|
||||
const tabindex = ref(1);
|
||||
getlivelist()
|
||||
const livelist=ref<Array<LiveList>>()
|
||||
onMounted(async ()=>{
|
||||
livelist.value= await getlivelist()
|
||||
})
|
||||
function tabchange(e: number): void {
|
||||
tabindex.value=e
|
||||
}
|
||||
return {
|
||||
page,
|
||||
tabindex,
|
||||
tabchange
|
||||
tabchange,
|
||||
livelist
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user