Merge branch 'master' of http://git.luyuan.tk/luyuan/beelink into zj
This commit is contained in:
@@ -345,7 +345,7 @@ export default defineComponent({
|
||||
.ant-select {
|
||||
font-size: 12px;
|
||||
}
|
||||
.select-down {
|
||||
.ant-select-dropdown {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
218
src/views/mine/ReleaseVideo.vue
Normal file
218
src/views/mine/ReleaseVideo.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="upload-video">
|
||||
<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="视频封面">
|
||||
<a-upload
|
||||
list-type="picture"
|
||||
action="//jsonplaceholder.typicode.com/posts/"
|
||||
>
|
||||
<div class="upload-image">
|
||||
<PlusOutlined style="fontSize: 22px;" />
|
||||
</div>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
<a-form-item label="选择视频" class="video-introduction">
|
||||
<div class="upload-container">
|
||||
<a-upload
|
||||
:beforeUpload="beforeUpload"
|
||||
>
|
||||
<div class="upload-image">
|
||||
<PlaySquareOutlined style="fontSize: 22px;" />
|
||||
</div>
|
||||
</a-upload>
|
||||
<div v-for="(item, index) in form.video" :key="index">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="demand">
|
||||
<p class="one-line-hide">视频要求：</p>
|
||||
<p class="one-line-hide">1.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…</p>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="视频简介" class="brief">
|
||||
<a-textarea v-model:value="form.brief" :maxlength="200" placeholder="请输入您的视频简介" />
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ span: 4, offset: 0 }">
|
||||
<a-button @click="onSubmit">上传视频</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<nav-bottom></nav-bottom>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive } from 'vue';
|
||||
import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import NavBottom from '@/components/NavBottom.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ReleaseWebcast',
|
||||
components: {
|
||||
PlaySquareOutlined,
|
||||
PlusOutlined,
|
||||
NavBottom,
|
||||
},
|
||||
setup() {
|
||||
interface FileItem{
|
||||
uid: string;
|
||||
name: string;
|
||||
}
|
||||
const fileList: Array<FileItem> = [];
|
||||
console.log(fileList);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
title: '',
|
||||
cover: '',
|
||||
brief: '',
|
||||
video: fileList,
|
||||
});
|
||||
|
||||
/**
|
||||
* 上传文件之前的钩子
|
||||
* @param file 上传的文件
|
||||
*/
|
||||
const beforeUpload = (file: any): boolean => {
|
||||
// console.log(file);
|
||||
if(file.type != '') {
|
||||
// handleRemove(file);
|
||||
}
|
||||
form.video = [...fileList, file];
|
||||
return false;
|
||||
}
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
const onSubmit = (e: any) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
console.log(form.video);
|
||||
|
||||
return {
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 14 },
|
||||
form,
|
||||
fileList,
|
||||
beforeUpload,
|
||||
onSubmit,
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.upload-video {
|
||||
width: 100%;
|
||||
min-width: 700px;
|
||||
background-color: #ffffff;
|
||||
padding: 46px;
|
||||
border-radius: 17px;
|
||||
position: relative;
|
||||
/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;
|
||||
&::-webkit-input-placeholder{
|
||||
font-size: 12px;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
.ant-select {
|
||||
font-size: 12px;
|
||||
}
|
||||
.ant-select-dropdown {
|
||||
font-size: 12px;
|
||||
}
|
||||
.ant-upload-list {
|
||||
display: none;
|
||||
color: #08AE98;
|
||||
&:hover {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.ant-upload-list-item {
|
||||
opacity: 1;
|
||||
.ant-upload-list-item-info {
|
||||
background-color: #ffffff;
|
||||
.anticon-paper-clip {
|
||||
color: #08AE98;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-btn {
|
||||
padding: 0;
|
||||
width: 63px;
|
||||
height: 23px;
|
||||
background: #08AE98;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
.ant-input {
|
||||
width: 359px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,92 +1,240 @@
|
||||
<template>
|
||||
<div class="webcast">
|
||||
<a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-form-item label="Activity name">
|
||||
<a-input v-model:value="form.name" />
|
||||
<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="Activity zone">
|
||||
<a-select v-model:value="form.region" placeholder="please select your zone">
|
||||
<a-select-option value="shanghai">
|
||||
Zone one
|
||||
</a-select-option>
|
||||
<a-select-option value="beijing">
|
||||
Zone two
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-form-item label="直播封面">
|
||||
<a-upload
|
||||
list-type="picture"
|
||||
action="//jsonplaceholder.typicode.com/posts/"
|
||||
>
|
||||
<div class="upload-image">
|
||||
<PlusOutlined style="fontSize: 22px;" />
|
||||
</div>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
<a-form-item label="Activity time">
|
||||
<a-date-picker
|
||||
v-model:value="form.date1"
|
||||
show-time
|
||||
type="date"
|
||||
placeholder="Pick a date"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
<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="Instant delivery">
|
||||
<a-switch v-model:checked="form.delivery" />
|
||||
<a-form-item label="开始时间">
|
||||
<a-input size="small" v-model:value="form.startTime" placeholder="请设置您的开始时间" />
|
||||
</a-form-item>
|
||||
<a-form-item label="Activity type">
|
||||
<a-checkbox-group v-model:value="form.type">
|
||||
<a-checkbox value="1" name="type">
|
||||
Online
|
||||
</a-checkbox>
|
||||
<a-checkbox value="2" name="type">
|
||||
Promotion
|
||||
</a-checkbox>
|
||||
<a-checkbox value="3" name="type">
|
||||
Offline
|
||||
</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
<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="Resources">
|
||||
<a-radio-group v-model:value="form.resource">
|
||||
<a-radio value="1">
|
||||
Sponsor
|
||||
</a-radio>
|
||||
<a-radio value="2">
|
||||
Venue
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
<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="Activity form">
|
||||
<a-input v-model:value="form.desc" type="textarea" />
|
||||
<a-form-item label="直播简介" class="brief">
|
||||
<a-textarea v-model:value="form.brief" maxlength="200" placeholder="请输入您的直播简介" />
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
|
||||
<a-button type="primary" @click="onSubmit">
|
||||
Create
|
||||
</a-button>
|
||||
<a-button style="margin-left: 10px;">
|
||||
Cancel
|
||||
</a-button>
|
||||
<a-form-item :wrapper-col="{ span: 4, offset: 0 }">
|
||||
<a-button @click="onSubmit">发布直播</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<nav-bottom></nav-bottom>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, reactive, toRaw } from 'vue';
|
||||
import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { useForm } from '@ant-design-vue/use';
|
||||
import NavBottom from '@/components/NavBottom.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ReleaseWebcast',
|
||||
components: {
|
||||
PlaySquareOutlined,
|
||||
PlusOutlined,
|
||||
NavBottom,
|
||||
},
|
||||
setup() {
|
||||
function onSubmit(): void {
|
||||
|
||||
}
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
title: '',
|
||||
cover: '',
|
||||
introduction: '',
|
||||
startTime: '',
|
||||
duration: '',
|
||||
number: '',
|
||||
brief: '',
|
||||
});
|
||||
/**
|
||||
* 验证直播时间
|
||||
*/
|
||||
const validateDuration = async (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 { 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);
|
||||
});
|
||||
};
|
||||
return {
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 14 },
|
||||
form: {
|
||||
name: '',
|
||||
region: undefined,
|
||||
date1: undefined,
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: '',
|
||||
},
|
||||
onSubmit
|
||||
validateInfos,
|
||||
resetFields,
|
||||
form,
|
||||
onSubmit,
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.webcast {
|
||||
width: 100%;
|
||||
min-width: 700px;
|
||||
background-color: #ffffff;
|
||||
padding: 46px;
|
||||
border-radius: 17px;
|
||||
position: relative;
|
||||
/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;
|
||||
&::-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-btn {
|
||||
padding: 0;
|
||||
width: 63px;
|
||||
height: 23px;
|
||||
background: #08AE98;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
.ant-input {
|
||||
width: 359px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user