This commit is contained in:
asd
2020-10-29 17:50:26 +08:00
parent 99a36363da
commit c5c5a8f7b1
18 changed files with 901 additions and 498 deletions

View File

@@ -1,16 +1,20 @@
<template>
<div class="webcast">
<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
<div class="title">直播信息</div>
<a-form-item label="直播标题">
<div class="title">{{ lan.$t("zhiboxinxi") }}</div>
<a-form-item :label="lan.$t('zhibobiaoti')">
<a-input
size="small"
v-model:value="form.title"
placeholder="请输入您的直播标题"
:placeholder="lan.$t('shuruzhibobiaoti')"
/>
</a-form-item>
<a-form-item label="直播封面" class="item-cover">
<a-upload list-type="picture" :customRequest="uploadspic" :before-upload="beforeUploadpic">
<a-form-item :label="lan.$t('zhibofengmian')" class="item-cover">
<a-upload
list-type="picture"
:customRequest="uploadspic"
:before-upload="beforeUploadpic"
>
<div
class="upload-image"
v-if="!viewCover && form.img.length == 0"
@@ -34,8 +38,15 @@
</div>
</a-upload>
</a-form-item>
<a-form-item label="视频介绍" class="video-introduction">
<a-upload list-type="picture" :customRequest="uploads" :before-upload="beforeUpload">
<a-form-item
:label="lan.$t('shipinjieshao')"
class="video-introduction"
>
<a-upload
list-type="picture"
:customRequest="uploads"
:before-upload="beforeUpload"
>
<div class="upload-image" v-if="form.fileurl.length == 0">
<PlaySquareOutlined
style="fontsize: 22px"
@@ -67,15 +78,23 @@
</div>
</a-upload>
<div class="demand">
<p class="one-line-hide">
{{ lan.$t("shipinyaoqiu") }}
</p>
<p class="one-line-hide">1.{{ lan.$t("shipinyaoqiu1") }}</p>
<p class="one-line-hide">2.{{ lan.$t("shipinyaoqiu2") }}</p>
<p class="one-line-hide">3.{{ lan.$t("shipinyaoqiu3") }}</p>
</div>
<!-- <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.文件扩展名fivmp4文件扩展名fivmp4
</p>
</div>
</div> -->
</a-form-item>
<a-form-item label="开始时间">
<a-form-item :label="lan.$t('kaishishijian')">
<!-- <a-input
size="small"
v-model:value="form.startTime"
@@ -85,42 +104,45 @@
show-time
:value="form.dateline"
@change="startchange"
placeholder="请设置您的开始时间"
:placeholder="lan.$t('shezhikaishishijian')"
/>
</a-form-item>
<a-form-item
label="直播时长"
:label="lan.$t('zhiboshichang')"
class="duration"
v-bind="validateInfos.livetime"
>
<a-input
size="small"
v-model:value="form.livetime"
placeholder="请输入直播时间"
:placeholder="lan.$t('shuruzhiboshijian')"
type="number"
/>
<span class="unit">分钟</span>
<span class="unit">{{ lan.$t("fenzhong") }}</span>
</a-form-item>
<a-form-item label="直播人数" v-bind="validateInfos.livenumber">
<a-form-item
:label="lan.$t('zhiborenshu')"
v-bind="validateInfos.livenumber"
>
<a-input
size="small"
v-model:value="form.livenumber"
placeholder="请输入直播人数"
:placeholder="lan.$t('shuruzhiborenshu')"
type="number"
/>
</a-form-item>
<a-form-item label="直播简介" class="brief">
<a-form-item :label="lan.$t('zhibojianjie')" class="brief">
<a-textarea
v-model:value="form.desc"
:autoSize="true"
class="brief-textarea"
:maxlength="200"
placeholder="请输入您的直播简介"
:placeholder="lan.$t('shuruzhibojianjie')"
/>
<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-button @click="onSubmit">{{ lan.$t("fabuzhibo") }}</a-button>
</a-form-item>
</a-form>
<div class="modal-container">
@@ -136,14 +158,16 @@
<img src="@/static/images/delete.png" class="close" />
</template>
<div class="notice-container report" v-if="lives.status == 1">
<div class="title">您尚未获得直播资格</div>
<div class="title">{{ lan.$t("wuzhibozige") }}</div>
<div class="title sub-title">
{{ lives.data.msg }}
</div>
<div class="confirm-btn" @click="fankui">意见反馈</div>
<div class="confirm-btn" @click="fankui">
{{ lan.$t("yijianfankui") }}
</div>
</div>
<div class="notice-container" v-else>
<div class="title">您尚未获得直播资格</div>
<div class="title">{{ lan.$t("wuzhibozige") }}</div>
<div class="title sub-title">
<!-- 上一周/月您在平台视频点击量为
<span class="red">第24名</span>要在前
@@ -178,7 +202,8 @@ import { getlivest, liveadd, liveinfo, setlive } from "@/api";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
import { message } from "ant-design-vue";
import router from '@/router';
import router from "@/router";
import { useI18n } from "@/utils/i18n";
export default defineComponent({
name: "ReleaseWebcast",
@@ -189,6 +214,7 @@ export default defineComponent({
RankList,
},
setup() {
const lan: any = useI18n();
// 表单数据
const form = ref({
title: "",
@@ -266,8 +292,8 @@ export default defineComponent({
viewCover.value = true;
// form.cover = fileList;
}
function fankui(){
router.push({path:"/mine/aboutus",query:{selected:3}})
function fankui() {
router.push({ path: "/mine/aboutus", query: { selected: 3 } });
}
const { resetFields, validate, validateInfos } = useForm(form, rules);
@@ -323,24 +349,23 @@ export default defineComponent({
message.error("直播简介不能为空");
return;
} else {
if(lives.value.status==0){
// subdata.fileid=picinfo.
if (id != undefined && id) {
/**
* todo 提交会报错 编辑直播
*/
subdata.id = id;
// setlive(subdata)
} else {
console.log(subdata);
console.log(lives.value)
// liveadd(subdata);
}
}else{
message.error("您尚未获得直播资格")
}
if (lives.value.status == 0) {
// subdata.fileid=picinfo.
if (id != undefined && id) {
/**
* todo 提交会报错 编辑直播
*/
subdata.id = id;
setlive(subdata)
} else {
console.log(subdata);
console.log(lives.value);
liveadd(subdata);
}
} else {
message.error("您尚未获得直播资格");
}
}
})
.catch((err: unknown) => {
@@ -394,51 +419,49 @@ export default defineComponent({
action: string;
data: unknown;
file: File;
}
const ifallowupload=ref<boolean>(false)
function beforeUpload(info?: any){
console.log(info)
if(info.type.split("/")[0]!="video"){
ifallowupload.value=false
message.error("视频介绍的文件格式错误")
return
}else{
ifallowupload.value=true
}
}
async function uploads(file: AntUpload) {
if(ifallowupload.value){
console.log(file);
videofile.value = file.file;
videos.value[0].addEventListener("durationchange", () => {
console.log(videos.value[0].duration);
form.value.fileduration = videos.value[0].duration;
});
const res = await uploadflie(file.file, (info: any) => {
console.log(info);
uploadprogress.value = info.percent.toFixed(2) * 100;
});
console.log(res);
form.value.fileid = res.fileId;
form.value.fileurl = res.video.url;
}
}
const ifallowpic=ref<boolean>(false)
async function uploadspic(file: AntUpload) {
if(ifallowpic.value){
const res = await uploadflie(file.file, (info: any) => {
console.log(info);
uploadpicprogress.value = info.percent.toFixed(2) * 100;
});
console.log(res);
const ifallowupload = ref<boolean>(false);
function beforeUpload(info?: any) {
console.log(info);
if (info.type.split("/")[0] != "video") {
ifallowupload.value = false;
message.error("视频介绍的文件格式错误");
return;
} else {
ifallowupload.value = true;
}
}
async function uploads(file: AntUpload) {
if (ifallowupload.value) {
console.log(file);
videofile.value = file.file;
videos.value[0].addEventListener("durationchange", () => {
console.log(videos.value[0].duration);
form.value.fileduration = videos.value[0].duration;
});
const res = await uploadflie(file.file, (info: any) => {
console.log(info);
uploadprogress.value = info.percent.toFixed(2) * 100;
});
console.log(res);
// picinfo.fileId=res.fileId
// picinfo.url=res.video.url
form.value.img = res.video.url;
}
form.value.fileid = res.fileId;
form.value.fileurl = res.video.url;
}
}
const ifallowpic = ref<boolean>(false);
async function uploadspic(file: AntUpload) {
if (ifallowpic.value) {
const 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.value.img = res.video.url;
}
}
getlivest().then((res) => {
@@ -446,17 +469,17 @@ export default defineComponent({
isEntitled.value = true;
lives.value = res;
}
});
function beforeUploadpic(info?: any){
console.log(info)
if(info.type.split("/")[0]!='image'){
message.error("封面必须是图片文件")
ifallowpic.value=false
return
}else{
ifallowpic.value=true
}
}
});
function beforeUploadpic(info?: any) {
console.log(info);
if (info.type.split("/")[0] != "image") {
message.error("封面必须是图片文件");
ifallowpic.value = false;
return;
} else {
ifallowpic.value = true;
}
}
return {
labelCol: { span: 4 },
@@ -481,12 +504,13 @@ export default defineComponent({
startchange,
videofile,
videos,
lives,
beforeUploadpic,
ifallowpic,
beforeUpload,
lives,
beforeUploadpic,
ifallowpic,
beforeUpload,
ifallowupload,
fankui
fankui,
lan,
};
},
});