theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

视频发布

Browse Source
This commit is contained in:
asd 2020-10-27 12:01:25 +08:00
parent 380601ea9c
commit 0a512f38f1
4 changed files with 198 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

@ -42,5 +42,11 @@ div {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
</style> </style>

13
src/api/index.ts
View File

@ -189,6 +189,19 @@ export async function videoadd( form: any,data: any) {
} }
} }
/**
* 编辑视频
*/
export async function setvideo(data?: any) {
console.log(data,11110)
const res=await put<Liveaddrule>('video/'+data.id,data)
if(res.code==0){
message.success("修改成功")
}else{
message.error(res.msg)
}
}
/** /**
* 视频详情 * 视频详情
*/ */

154
src/views/mine/ReleaseVideo.vue
View File

@ -10,7 +10,7 @@
/> />
</a-form-item> </a-form-item>
<a-form-item label="视频封面" class="video-cover"> <a-form-item label="视频封面" class="video-cover">
<a-upload list-type="picture" :customRequest="uploadspic"> <a-upload list-type="picture" :customRequest="uploadspic" :before-upload="beforeUpload">
<div class="upload-image" v-if="!viewCover && form.img.length == 0"> <div class="upload-image" v-if="!viewCover && form.img.length == 0">
<PlusOutlined <PlusOutlined
style="fontsize: 22px" style="fontsize: 22px"
@ -109,8 +109,9 @@ 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 { uploadflie } from "@/utils/vod";
import { videoadd, videodetail } from "@/api"; import { setvideo, videoadd, videodetail } from "@/api";
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
export default defineComponent({ export default defineComponent({
name: "ReleaseWebcast", name: "ReleaseWebcast",
@ -137,7 +138,7 @@ export default defineComponent({
}); });
onMounted(async () => { onMounted(async () => {
if(useRoute().query.id){ if(useRoute().query.id){
console.log(useRoute().query.id) console.log(useRoute().query.id,"knijkdbj")
form.value = await videodetail(useRoute().query.id,1) form.value = await videodetail(useRoute().query.id,1)
console.log(form.value,"fornm") console.log(form.value,"fornm")
} }
@ -189,71 +190,136 @@ export default defineComponent({
const uploadpicprogress: Ref<number> = ref(0); const uploadpicprogress: Ref<number> = ref(0);
const videofile = ref<File>(); const videofile = ref<File>();
const videos = ref<Array<any>>([]); const videos = ref<Array<any>>([]);
const ifalowupload=ref<boolean>(false)
interface AntUpload { interface AntUpload {
action: string; action: string;
data: unknown; data: unknown;
file: File; file: File;
} }
async function uploadspic(file: AntUpload) { async function uploadspic(file: AntUpload) {
const res = await uploadflie(file.file, (info: any) => { if(ifalowupload.value){
console.log(info); const res = await uploadflie(file.file, (info: any) => {
uploadpicprogress.value = info.percent.toFixed(2) * 100; console.log(info);
}); uploadpicprogress.value = info.percent.toFixed(2) * 100;
console.log(res); });
form.value.img = res.video.url; console.log(res);
form.value.img = res.video.url;
}else{
return
}
} }
/** /**
* 上传视频 * 上传视频
*/ */
const uploadprogress: Ref<number> = ref(0); const uploadprogress: Ref<number> = ref(0);
const ifallowvideo=ref<boolean>(false)
async function uploads(file: AntUpload) { async function uploads(file: AntUpload) {
uploadprogress.value=0 if(ifallowvideo.value){
form.value.video=[""] uploadprogress.value=0
console.log(file); form.value.video=[""]
videofile.value = file.file; console.log(file);
videos.value[0].addEventListener("durationchange", () => { videofile.value = file.file;
console.log(videos.value[0].duration); videos.value[0].addEventListener("durationchange", () => {
form.value.fileduration = videos.value[0].duration; console.log(videos.value[0].duration);
}); form.value.fileduration = videos.value[0].duration;
const res = await uploadflie(file.file, (info: any) => { });
console.log(info); const res = await uploadflie(file.file, (info: any) => {
uploadprogress.value = info.percent.toFixed(2) * 100; console.log(info);
}); uploadprogress.value = info.percent.toFixed(2) * 100;
console.log(res); });
console.log(res);
form.value.fileid = res.fileId; form.value.fileid = res.fileId;
form.value.fileurl = res.video.url; form.value.fileurl = res.video.url;
form.value.video[0]=res.video.url form.value.video[0]=res.video.url
uploadprogress.value=0
}
}
function beforeVideoUpload(info?: any){
console.log(info)
if(info.type.split("/")[0]!="video"){
ifallowvideo.value
message.error("文件必须是视频格式")
}else{
ifallowvideo.value=true
}
} }
/** /**
* 表单提交 * 表单提交
*/ */
const routes=useRoute()
const onSubmit = async (e: FromSend) => { const onSubmit = async (e: FromSend) => {
e.preventDefault(); e.preventDefault();
console.log(toRaw(form.value), 111); console.log(toRaw(form.value), 111);
videoadd(form, toRaw(form.value)); console.log(toRaw(form.value).video[0].length)
console.log(routes.query,"adsadsa")
const subdata=toRaw(form.value)
if(subdata.title==""){
message.error("标题不能为空")
return
}else if(subdata.img==""){
message.error("封面不能为空")
return
}else if(subdata.fileurl==""){
message.error("视频文件不能为空")
}else if(subdata.desc==""){
message.error("视频简介不能为空")
}
else{
if(routes.query.id){
form.value.id=routes.query.id
console.log('edi')
setvideo(form.value)
}else{
videoadd(form, toRaw(form.value));
}
// videoadd(form, toRaw(form.value));
}
// videoadd(form, toRaw(form.value));
}; };
function beforeUpload(info?: any){
console.log(info.type)
if(info.type.split('/')[0]!="image"){
message.error("上传文件必须是图片格式")
ifalowupload.value=false
return
}else{
ifalowupload.value=true
}
}
return { return {
labelCol: { span: 4 }, labelCol: { span: 4 },
wrapperCol: { span: 14 }, wrapperCol: { span: 14 },
form, form,
viewCover, viewCover,
previewImage, previewImage,
previewCover, previewCover,
coverChange, coverChange,
cancelCover, cancelCover,
beforeCoverUpload, beforeCoverUpload,
onSubmit, onSubmit,
uploadpicprogress, uploadpicprogress,
uploadspic, uploadspic,
uploadprogress, uploadprogress,
uploads, uploads,
videofile, videofile,
videos, videos,
removeFile removeFile,
beforeUpload,
ifalowupload,
beforeVideoUpload
}; };
}, },
}); });

95
src/views/mine/ReleaseWebcast.vue
View File

@ -75,7 +75,12 @@
v-model:value="form.startTime" v-model:value="form.startTime"
placeholder="请设置您的开始时间" placeholder="请设置您的开始时间"
/> --> /> -->
<a-date-picker show-time :value="form.dateline" @change="startchange" placeholder="请设置您的开始时间" /> <a-date-picker
show-time
:value="form.dateline"
@change="startchange"
placeholder="请设置您的开始时间"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="直播时长" label="直播时长"
@ -86,6 +91,7 @@
size="small" size="small"
v-model:value="form.livetime" v-model:value="form.livetime"
placeholder="请输入直播时间" placeholder="请输入直播时间"
type="number"
/> />
<span class="unit">分钟</span> <span class="unit">分钟</span>
</a-form-item> </a-form-item>
@ -94,6 +100,7 @@
size="small" size="small"
v-model:value="form.livenumber" v-model:value="form.livenumber"
placeholder="请输入直播人数" placeholder="请输入直播人数"
type="number"
/> />
</a-form-item> </a-form-item>
<a-form-item label="直播简介" class="brief"> <a-form-item label="直播简介" class="brief">
@ -125,7 +132,7 @@
<div class="notice-container report" v-if="lives.status == 1"> <div class="notice-container report" v-if="lives.status == 1">
<div class="title">您尚未获得直播资格</div> <div class="title">您尚未获得直播资格</div>
<div class="title sub-title"> <div class="title sub-title">
{{lives.data.msg}} {{ lives.data.msg }}
</div> </div>
<div class="confirm-btn">意见反馈</div> <div class="confirm-btn">意见反馈</div>
</div> </div>
@ -135,7 +142,7 @@
<!-- 上一周/月您在平台视频点击量为 <!-- 上一周/月您在平台视频点击量为
<span class="red">第24名</span>，要在前 <span class="red">第24名</span>，要在前
<span class="bule">20名</span> 才能获得直播资格 --> <span class="bule">20名</span> 才能获得直播资格 -->
{{lives.msg}} {{ lives.msg }}
</div> </div>
<rank-list :list="lives.data"></rank-list> <rank-list :list="lives.data"></rank-list>
</div> </div>
@ -162,8 +169,9 @@ import { previewCover } from "@/utils/common";
import { FromSend, ImgInfo } from "@/types/index"; import { FromSend, ImgInfo } from "@/types/index";
import { uploadflie } from "@/utils/vod"; import { uploadflie } from "@/utils/vod";
import { getlivest, liveadd, liveinfo, setlive } from "@/api"; import { getlivest, liveadd, liveinfo, setlive } from "@/api";
import { useRoute } from 'vue-router'; import { useRoute } from "vue-router";
import dayjs from 'dayjs'; import dayjs from "dayjs";
import { message } from "ant-design-vue";
export default defineComponent({ export default defineComponent({
name: "ReleaseWebcast", name: "ReleaseWebcast",
@ -272,30 +280,52 @@ export default defineComponent({
/** /**
* todo 需要后台返回年份 * todo 需要后台返回年份
*/ */
const id = useRoute().query.id const id = useRoute().query.id;
if(id != null && typeof id == 'string'){ if (id != null && typeof id == "string") {
liveinfo(parseInt(id)).then((res)=>{ liveinfo(parseInt(id)).then((res) => {
form.value = res; form.value = res;
}) });
} }
const onSubmit = (e: FromSend) => { const onSubmit = (e: FromSend) => {
e.preventDefault(); e.preventDefault();
validate() validate()
.then(() => { .then(() => {
// console.log(toRaw(form),111); console.log(toRaw(form), 111);
const subdata: any = toRaw(form.value); const subdata: any = toRaw(form.value);
// subdata.fileid=picinfo. if (subdata.title == "") {
if(id != undefined && id){ message.error("直播标题不能为空");
/** return;
* todo 提交会报错 } else if (subdata.img == "") {
*/ message.error("直播封面不能为空");
subdata.id = id; return;
setlive(subdata) } else if (subdata.fileurl == "") {
}else{ message.error("视频介绍不能为空");
console.log(subdata); return;
liveadd(subdata); } else if (subdata.dateline == "") {
message.error("开始时间不能为空");
return;
} else if (subdata.livetime == "") {
message.error("直播时长不能为空");
return;
} else if (subdata.livenumber == "") {
message.error("直播人数不能为空");
return;
} else if (subdata.desc == "") {
message.error("直播简介不能为空");
return;
} else {
// subdata.fileid=picinfo.
if (id != undefined && id) {
/**
* todo 提交会报错 编辑直播
*/
subdata.id = id;
// setlive(subdata)
} else {
console.log(subdata);
// liveadd(subdata);
}
} }
}) })
.catch((err: unknown) => { .catch((err: unknown) => {
console.log("error", err); console.log("error", err);
@ -317,9 +347,20 @@ export default defineComponent({
// const month = new Date(e).getMonth()+1 // const month = new Date(e).getMonth()+1
// console.log(new Date(e).getFullYear()+"-"+month+'-'+new Date(e).getDate()) // console.log(new Date(e).getFullYear()+"-"+month+'-'+new Date(e).getDate())
// console.log(e.toString()) // console.log(e.toString())
const time = dayjs(new Date(e)) const time = dayjs(new Date(e));
const timestr = time.year() + "-" + (time.month() + 1) + "-" + time.date() + " " + time.hour() + ":" + time.minute() + ":" + time.second() const timestr =
console.log(timestr) time.year() +
"-" +
(time.month() + 1) +
"-" +
time.date() +
" " +
time.hour() +
":" +
time.minute() +
":" +
time.second();
console.log(timestr);
form.value.dateline = timestr; form.value.dateline = timestr;
} }
/** /**
@ -368,11 +409,11 @@ export default defineComponent({
} }
getlivest().then((res) => { getlivest().then((res) => {
if(res){ if (res) {
isEntitled.value = true; isEntitled.value = true;
lives.value = res; lives.value = res;
} }
}) });
return { return {
labelCol: { span: 4 }, labelCol: { span: 4 },
@ -396,7 +437,7 @@ export default defineComponent({
startchange, startchange,
videofile, videofile,
videos, videos,
lives lives,
}; };
}, },
}); });