515 lines
16 KiB
Vue
515 lines
16 KiB
Vue
<template>
|
||
<div class="upload-video">
|
||
<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
|
||
<div class="title">{{ lan.$t("shangchuanshipin") }}</div>
|
||
<a-form-item :label="lan.$t('shipinbiaoti')">
|
||
<a-input
|
||
size="small"
|
||
v-model:value="form.title"
|
||
:placeholder="lan.$t('shurushipinbiaoti')"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item :label="lan.$t('shipinfengmian')" class="video-cover">
|
||
<div style="display: flex">
|
||
<a-upload
|
||
list-type="picture"
|
||
:customRequest="uploadspic"
|
||
:before-upload="beforeUploadpic"
|
||
>
|
||
<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>
|
||
<div class="demand">
|
||
<p>
|
||
{{ lan.$t("fengmianyaoqiu") }}
|
||
</p>
|
||
<p>
|
||
1.{{ lan.$t("fengmianyaoqiu1") }}
|
||
</p>
|
||
<p>
|
||
2.{{ lan.$t("fengmianyaoqiu2") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a-form-item>
|
||
<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"
|
||
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="upload1"
|
||
></video>
|
||
<!-- <a-progress type="circle" :percent="100" :width="80" style="position:absolute;right:35%"/> -->
|
||
</div>
|
||
</a-upload>
|
||
<div class="demand">
|
||
<p>
|
||
{{ lan.$t("shipinyaoqiu") }}
|
||
</p>
|
||
<p>1.{{ lan.$t("shipinyaoqiu1") }}</p>
|
||
<p>2.{{ lan.$t("shipinyaoqiu2") }}</p>
|
||
<p>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.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…
|
||
</p>
|
||
</div> -->
|
||
</a-form-item>
|
||
<a-form-item :label="lan.$t('shipinjianjie')" class="brief">
|
||
<a-textarea
|
||
v-model:value="form.desc"
|
||
:autoSize="true"
|
||
class="brief-textarea"
|
||
:maxlength="200"
|
||
:placeholder="lan.$t('shurushipinjianjie')"
|
||
/>
|
||
<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">{{
|
||
lan.$t("shangchuanshipin")
|
||
}}</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
<nav-bottom></nav-bottom>
|
||
</div>
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent, onMounted, 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 { setvideo, videoadd, videodetail } from "@/api";
|
||
import { useRoute } from "vue-router";
|
||
import { message } from "ant-design-vue";
|
||
import { useI18n } from "@/utils/i18n";
|
||
|
||
export default defineComponent({
|
||
name: "ReleaseWebcast",
|
||
components: {
|
||
PlaySquareOutlined,
|
||
PlusOutlined,
|
||
NavBottom,
|
||
},
|
||
setup() {
|
||
const lan: any = useI18n();
|
||
interface FileItem {
|
||
video: Array<string>;
|
||
}
|
||
const fileList: Array<FileItem> = [];
|
||
|
||
// 表单数据
|
||
const form = ref<any>({
|
||
title: "",
|
||
img: "",
|
||
fileid: "",
|
||
fileurl: "",
|
||
fileduration: "",
|
||
desc: "",
|
||
video: [""],
|
||
});
|
||
onMounted(async () => {
|
||
if (useRoute().query.id) {
|
||
console.log(useRoute().query.id, "knijkdbj");
|
||
form.value = await videodetail(useRoute().query.id, 1);
|
||
console.log(form.value, "fornm");
|
||
}
|
||
});
|
||
|
||
// 是否显示封面预览 封面的路径
|
||
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.value.video.slice();
|
||
newFileList.splice(index, 1);
|
||
form.value.video = newFileList;
|
||
}
|
||
|
||
/**
|
||
* 上传图片
|
||
*/
|
||
const uploadpicprogress: Ref<number> = ref(0);
|
||
const videofile = ref<File>();
|
||
const videos = ref<Array<any>>([]);
|
||
const ifalowupload = ref<boolean>(false);
|
||
interface AntUpload {
|
||
action: string;
|
||
data: unknown;
|
||
file: File;
|
||
}
|
||
async function uploadspic(file: AntUpload) {
|
||
if (ifalowupload.value) {
|
||
const res = await uploadflie(file.file, (info: any) => {
|
||
console.log(info);
|
||
uploadpicprogress.value = info.percent.toFixed(2) * 100;
|
||
});
|
||
console.log(res);
|
||
form.value.img = res.video.url;
|
||
} else {
|
||
return;
|
||
}
|
||
}
|
||
|
||
function beforeUploadpic(info?: any) {
|
||
console.log(info);
|
||
if (info.type.split("/")[0] != "image") {
|
||
message.error(lan.$t("fengmiangeshi"));
|
||
ifalowupload.value = false;
|
||
return;
|
||
} else {
|
||
ifalowupload.value = true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 上传视频
|
||
*/
|
||
const uploadprogress: Ref<number> = ref(0);
|
||
const ifallowvideo = ref<boolean>(false);
|
||
async function uploads(file: AntUpload) {
|
||
if (ifallowvideo.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;
|
||
}
|
||
}
|
||
|
||
function beforeVideoUpload(info?: any) {
|
||
console.log(info);
|
||
if (info.type.split("/")[0] != "video") {
|
||
ifallowvideo.value;
|
||
message.error(lan.$t("wenjiangeshi"));
|
||
} else {
|
||
ifallowvideo.value = true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 表单提交
|
||
*/
|
||
const routes = useRoute();
|
||
const onSubmit = async (e: FromSend) => {
|
||
e.preventDefault();
|
||
console.log(toRaw(form.value), 111);
|
||
console.log(toRaw(form.value).video[0].length);
|
||
|
||
console.log(routes.query, "adsadsa");
|
||
const subdata = toRaw(form.value);
|
||
if (subdata.title == "") {
|
||
message.error(lan.$t("biaotiweikong"));
|
||
return;
|
||
} else if (subdata.img == "") {
|
||
message.error(lan.$t("fengmianweikong"));
|
||
return;
|
||
} else if (subdata.fileurl == "") {
|
||
message.error(lan.$t("wenjianweikong"));
|
||
} else if (subdata.desc == "") {
|
||
message.error(lan.$t("jianjieweikong"));
|
||
} 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);
|
||
if (info.type.split("/")[0] != "video") {
|
||
ifallowvideo.value = false;
|
||
message.error(lan.$t("shipinjieshaoccuowu"));
|
||
return;
|
||
} else {
|
||
ifallowvideo.value = true;
|
||
}
|
||
}
|
||
|
||
return {
|
||
labelCol: { span: 4 },
|
||
wrapperCol: { span: 14 },
|
||
form,
|
||
viewCover,
|
||
previewImage,
|
||
previewCover,
|
||
coverChange,
|
||
cancelCover,
|
||
beforeCoverUpload,
|
||
onSubmit,
|
||
uploadpicprogress,
|
||
uploadspic,
|
||
uploadprogress,
|
||
uploads,
|
||
videofile,
|
||
videos,
|
||
removeFile,
|
||
beforeUpload,
|
||
ifalowupload,
|
||
beforeVideoUpload,
|
||
lan,
|
||
beforeUploadpic
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.upload1{
|
||
width: 171px;
|
||
height: 96px;
|
||
}
|
||
.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: #ccc;
|
||
border-radius: 3px;
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
&:hover {
|
||
background: #08ae98;
|
||
}
|
||
}
|
||
}
|
||
.video-cover {
|
||
.preview-image {
|
||
width: 171px;
|
||
height: 96px;
|
||
}
|
||
}
|
||
.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-introduction {
|
||
.ant-form-item-control-wrapper {
|
||
.ant-form-item-children {
|
||
display: flex;
|
||
// align-items: center;
|
||
}
|
||
}
|
||
.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> |