376 lines
13 KiB
Vue
376 lines
13 KiB
Vue
<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>
|
||
<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 '@/static/js/common';
|
||
|
||
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: object, value: number): Promise<string | void> {
|
||
if (value < 30 || value > 120) {
|
||
return Promise.reject('*最短30min 最长120min');
|
||
} else {
|
||
return Promise.resolve();
|
||
}
|
||
}
|
||
/**
|
||
* 验证直播人数
|
||
*/
|
||
const validateNumber = async (rule: object, 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',
|
||
},
|
||
],
|
||
});
|
||
|
||
// 是否显示封面预览 封面的路径
|
||
const viewCover: Ref<boolean> = ref(false),
|
||
previewImage: Ref<string> = ref('');
|
||
|
||
/**
|
||
* 封面改变触发事件
|
||
*/
|
||
function coverChange(info: any): 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: any) => {
|
||
e.preventDefault();
|
||
validate().then(() => {
|
||
console.log(toRaw(form));
|
||
}).catch((err: object) => {
|
||
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,
|
||
}
|
||
}
|
||
})
|
||
</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;
|
||
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;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |