Merge pull request 'xbx' (#106) from xbx into master

Reviewed-on: http://git.luyuan.tk/luyuan/beelink/pulls/106
This commit is contained in:
luyuan 2020-11-02 16:13:15 +08:00
commit e54ebbffb0
11 changed files with 651 additions and 507 deletions

View File

@ -61,6 +61,19 @@
} }
})(1366, 1024); })(1366, 1024);
</script> </script>
<style>
#make{
background-color: #000;
opacity: 0.5;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: none;
}
</style>
</head> </head>
<body> <body>
@ -69,6 +82,7 @@
Please enable it to continue.</strong> Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<div id="make"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<script> <script>
window.fbAsyncInit = function () { window.fbAsyncInit = function () {

View File

@ -13,9 +13,11 @@ export interface Get {
} }
let login: MessageType; let login: MessageType;
let count = 0; let count = 0;
const div: any = document.getElementById("make");
axios.interceptors.request.use((config)=>{ axios.interceptors.request.use((config)=>{
if(count == 0){ if(count == 0){
login = message.loading('加载中..', 0) login = message.loading('加载中..', 0)
div.style.display = "block"
} }
count++; count++;
return config; return config;
@ -28,6 +30,7 @@ axios.interceptors.response.use((response)=>{
count--; count--;
if(count == 0){ if(count == 0){
login(); login();
div.style.display = "none"
} }
console.log(count) console.log(count)
}, 1000) }, 1000)
@ -44,6 +47,7 @@ axios.interceptors.response.use((response)=>{
count--; count--;
if(count == 0){ if(count == 0){
login(); login();
div.style.display = "none"
} }
console.log(count) console.log(count)
}, 1000) }, 1000)

View File

@ -746,7 +746,7 @@ export async function putmember(data: any): Promise<any>{
mtongue: data.mtongue, mtongue: data.mtongue,
email: data.email, email: data.email,
interest: JSON.stringify(data.interest), interest: JSON.stringify(data.interest),
willsay: JSON.stringify(data.willsayValue), willsay: JSON.stringify(data.willsay),
birthday: data.birthday, birthday: data.birthday,
zoneid: data.zoneid, zoneid: data.zoneid,
currency: data.currencyValue, currency: data.currencyValue,

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="list" @mouseout="tuichu()"> <div class="list" @mouseout="tuichu()">
<div v-for="(i,j) in list" :key="j" style="overflow: hidden;" @click="routeto(j)" @mouseenter="mouse(j)"> <div v-for="(i,j) in list" :key="j" style="overflow: hidden;" @click="routeto(j)">
<div class="item" :class="{'selitem': j == selnum, 'seltop': j == selnum - 1, 'selbottom': j == selnum + 1}"> <div class="item" :class="{'selitem': j == selnum, 'seltop': j == selnum - 1, 'selbottom': j == selnum + 1}">
<div class="route"> <div class="route">
<img :src="j == selnum ? i.sleicon : i.icon" alt="" class="icon"> <img :src="j == selnum ? i.sleicon : i.icon" alt="" class="icon">
@ -74,6 +74,14 @@
padding: 0 18px; padding: 0 18px;
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
&:hover{
.route{
.title{
font-weight: bold;
}
}
}
.route{ .route{
display: flex; display: flex;
.icon{ .icon{

View File

@ -289,5 +289,8 @@ export default {
chushihuashibai: "Failed to initialize local stream", chushihuashibai: "Failed to initialize local stream",
buzhichifenxiang: "Your browser does not support screen sharing. Please download the new version of chrome", buzhichifenxiang: "Your browser does not support screen sharing. Please download the new version of chrome",
xuanzefenxiangneirong: "Please choose what to share", xuanzefenxiangneirong: "Please choose what to share",
guanbishibai: "Closing failed" guanbishibai: "Closing failed",
fengmianyaoqiu:"Cover requirements:",
fengmianyaoqiu1:"File extension: JPG, png",
fengmianyaoqiu2:"File size limit: 2m",
} }

View File

@ -94,7 +94,10 @@ export default {
shipinyaoqiu:"视频要求:", shipinyaoqiu:"视频要求:",
shipinyaoqiu1:"上传视频时间要求为30s之内", shipinyaoqiu1:"上传视频时间要求为30s之内",
shipinyaoqiu2:"支持文件大小100M", shipinyaoqiu2:"支持文件大小100M",
shipinyaoqiu3:"文件扩展名fiv、mp4…", shipinyaoqiu3:"文件扩展名fiv、mp4",
fengmianyaoqiu:"封面要求:",
fengmianyaoqiu1:"文件扩展名jpgpng",
fengmianyaoqiu2:"文件大小限制2M",
ziwojieshao:"自我介绍", ziwojieshao:"自我介绍",
lianxifangshi:"联系方式", lianxifangshi:"联系方式",
genghuanshoujihao:"更换手机号", genghuanshoujihao:"更换手机号",

View File

@ -13,7 +13,7 @@ const createI18n = (config: Config) => ({
locale: ref(config.locale), locale: ref(config.locale),
messages: config.messages, messages: config.messages,
$t(key: string) { $t(key: string) {
console.log(key) // console.log(key)
return this.messages[this.locale.value][key]; return this.messages[this.locale.value][key];
}, },
$s(){ $s(){

View File

@ -50,6 +50,7 @@
style="width: 171px" style="width: 171px"
size="small" size="small"
ref="select" ref="select"
show-search
:getPopupContainer=" :getPopupContainer="
(triggerNode) => triggerNode.parentNode (triggerNode) => triggerNode.parentNode
" "
@ -77,6 +78,7 @@
v-model:value="userinfo.tlanguageValue" v-model:value="userinfo.tlanguageValue"
style="width: 171px" style="width: 171px"
size="small" size="small"
show-search
ref="select" ref="select"
:getPopupContainer=" :getPopupContainer="
(triggerNode) => triggerNode.parentNode (triggerNode) => triggerNode.parentNode
@ -105,6 +107,7 @@
style="width: 171px" style="width: 171px"
size="small" size="small"
ref="select" ref="select"
show-search
@change="choosewillsay" @change="choosewillsay"
:getPopupContainer=" :getPopupContainer="
(triggerNode) => (triggerNode) =>
@ -115,10 +118,9 @@
v-for="(item, v-for="(item,
index) in chiveslist[1]" index) in chiveslist[1]"
:key="index" :key="index"
:value="item.languageid" :value="item.name"
> >
{{ item.name }} {{ item.name }}
{{ item.languageid }}
</a-select-option> </a-select-option>
</a-select> </a-select>
<div class="proficiency"> <div class="proficiency">
@ -249,10 +251,11 @@
<div class="input-box time-zone-box"> <div class="input-box time-zone-box">
<div class="label">{{ lan.$t("shiqu") }}</div> <div class="label">{{ lan.$t("shiqu") }}</div>
<a-select <a-select
v-model:value="userinfo.zoneid" v-model:value="userinfo.zoneStr"
style="width: 171px" style="width: 171px"
size="small" size="small"
ref="select" ref="select"
show-search
:getPopupContainer=" :getPopupContainer="
(triggerNode) => triggerNode.parentNode (triggerNode) => triggerNode.parentNode
" "
@ -260,7 +263,7 @@
<a-select-option <a-select-option
v-for="(item, index) in zonelist" v-for="(item, index) in zonelist"
:key="index" :key="index"
:value="item.zoneid" :value="item.city + item.gmt"
> >
{{ item.city }}{{ item.gmt }} {{ item.city }}{{ item.gmt }}
</a-select-option> </a-select-option>
@ -548,7 +551,6 @@ export default defineComponent({
formData.value = toRaw(userinfo.value); formData.value = toRaw(userinfo.value);
console.log(userinfo.value.currencyValue, "listsssss"); console.log(userinfo.value.currencyValue, "listsssss");
currencyindex.value = userinfo.value.currency; currencyindex.value = userinfo.value.currency;
console.log(currencyindex.value, "listsssss"); console.log(currencyindex.value, "listsssss");
}); });
const modalNode = () => const modalNode = () =>
@ -778,47 +780,91 @@ export default defineComponent({
// console.log(toRaw(formData.value).willsay[i]) // console.log(toRaw(formData.value).willsay[i])
// } // }
const uesrinfo = toRaw(formData.value); const uesrinfo = toRaw(formData.value);
for (let m = 0; m < toRaw(chiveslist.value).length; m++) { // for (let m = 0; m < toRaw(chiveslist.value).length; m++) {
for (const i in uesrinfo.willsayValue) { // for (const i in uesrinfo.willsayValue) {
// console.log(toRaw(formData.value).willsayValue[i]) // // console.log(toRaw(formData.value).willsayValue[i])
if (typeof uesrinfo.willsay[i].name == "string") { // if (typeof uesrinfo.willsay[i].name == "string") {
// console.log(toRaw(chiveslist.value)) // // console.log(toRaw(chiveslist.value))
if ( // if (
uesrinfo.willsay[i].name == // uesrinfo.willsay[i].name ==
toRaw(chiveslist.value)[m].name // toRaw(chiveslist.value)[m].name
) { // ) {
uesrinfo.willsayValue[i].name = toRaw( // uesrinfo.willsayValue[i].name = toRaw(
chiveslist.value // chiveslist.value
)[m].languageid; // )[m].languageid;
} // }
} else { // } else {
uesrinfo.willsayValue[i].name = // uesrinfo.willsayValue[i].name =
uesrinfo.willsay[i].name; // uesrinfo.willsay[i].name;
// }
// uesrinfo.willsayValue[i].level = uesrinfo.willsay[i].level;
// }
// }
for(const i in uesrinfo.willsay){
if(uesrinfo.willsay[i].name == '请选择'){
console.log(111)
break;
}
for(const j in chiveslist.value[1]){
if(uesrinfo.willsay[i].name == chiveslist.value[1][j].name){
uesrinfo.willsay[i].name = chiveslist.value[1][j].languageid
} }
console.log(uesrinfo.willsay[i].name, chiveslist.value[1][j].name)
uesrinfo.willsayValue[i].level = uesrinfo.willsay[i].level;
} }
} }
const arr: any = {};
for(const i in uesrinfo.willsay){
// const a: any = {};
if(uesrinfo.willsay[i].name == '请选择'){
console.log(111)
break;
}
arr[uesrinfo.willsay[i].name] = uesrinfo.willsay[i].level
// arr.push(a);
// arr.push({uesrinfo.willsay[i].name})
}
uesrinfo.willsay = arr;
console.log(uesrinfo); console.log(uesrinfo);
// console.log(toRaw(formData.value)); // console.log(toRaw(formData.value));
if (userinfo.value.currency == "") { // if (uesrinfo.currency == "") {
if (userinfo.value.currencyValue != "") { // if (uesrinfo.currencyValue != "") {
for (let i = 0; i < currencylist.value.length; i++) { // for (let i = 0; i < currencylist.value.length; i++) {
if ( // if (
userinfo.value.currencyValue == // uesrinfo.currencyValue ==
currencylist.value[i].name // currencylist.value[i].name
) { // ) {
userinfo.value.currency = (i + 1).toString(); // uesrinfo.currency = currencylist.value[i].value;
} // }
} // }
// }
// }
// eslint-disable-next-line
const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
console.log(userinfo.value.email);
// console.log();
// for (let i = 0; i < currencylist.value.length; i++) {
// if (
// uesrinfo.currencyValue ==
// currencylist.value[i].name
// ) {
// uesrinfo.currency = currencylist.value[i].value;
// }
// }
for(const i in chiveslist.value[0]){
if(chiveslist.value[0][i].name == uesrinfo.country){
uesrinfo.countryValue = chiveslist.value[0][i].id
} }
} }
for(const i in zonelist.value){
const reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/; if((zonelist.value[i].city + zonelist.value[i].gmt) == uesrinfo.zoneStr){
console.log(userinfo.value.email); uesrinfo.zoneid = zonelist.value[i].zoneid
console.log(); }
// console.log(zonelist.value[i].city + zonelist.value[i].gmt, uesrinfo.zoneStr)
}
if (reg.test(userinfo.value.email)) { if (reg.test(userinfo.value.email)) {
putmember(uesrinfo); putmember(uesrinfo);
} else { } else {
@ -858,6 +904,7 @@ export default defineComponent({
if (formData.value.video != "" && uploadprogress.value == 0) { if (formData.value.video != "" && uploadprogress.value == 0) {
uploadprogress.value = 100; uploadprogress.value = 100;
} }
console.log(formData.value.country)
}); });
function choosewillsay(e?: any) { function choosewillsay(e?: any) {
@ -881,6 +928,10 @@ export default defineComponent({
// picinfo.url=res.video.url // picinfo.url=res.video.url
formData.value.img = res.video.url; formData.value.img = res.video.url;
} }
// function selguojia(e: any){
// userinfo.value.countryValue = e;
// console.log(e)
// }
return { return {
modalNode, modalNode,
@ -1062,7 +1113,7 @@ export default defineComponent({
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
color: #808080; color: #808080;
width: 134px; // width: 134px;
p { p {
margin: 0; margin: 0;
} }

View File

@ -1,106 +1,130 @@
<template> <template>
<div class="upload-video"> <div class="upload-video">
<a-form :label-col="labelCol" :wrapper-col="wrapperCol"> <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
<div class="title">{{lan.$t("shangchuanshipin")}}</div> <div class="title">{{ lan.$t("shangchuanshipin") }}</div>
<a-form-item :label="lan.$t('shipinbiaoti')"> <a-form-item :label="lan.$t('shipinbiaoti')">
<a-input <a-input
size="small" size="small"
v-model:value="form.title" v-model:value="form.title"
:placeholder="lan.$t('shurushipinbiaoti')" :placeholder="lan.$t('shurushipinbiaoti')"
/>
</a-form-item>
<a-form-item :label="lan.$t('shipinfengmian')" class="video-cover">
<a-upload list-type="picture" :customRequest="uploadspic" :before-upload="beforeUpload">
<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>
</a-form-item>
<a-form-item :label="lan.$t('xuanzeshipin')" class="video-introduction">
<div class="upload-container">
<a-upload list-type="picture" :customRequest="uploads" :beforeUpload="beforeVideoUpload">
<div class="upload-image">
<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="false"
>
<video
:src="form.fileurl"
:ref="
(el) => {
videos[0] = el;
}
"
class="upload"
></video>
<!-- <a-progress type="circle" :percent="100" :width="80" style="position:absolute;right:35%"/> -->
</div>
</a-upload>
<!-- 文件列表 -->
<div v-if="form.video[0].length">
<div
v-for="(item, index) in form.video"
:key="index"
class="video-list"
>
<img src="@/static/images/link.png" class="link" />
<span class="one-line-hide">{{ item.split('/')[item.split('/').length-1] }}</span>
<img
src="@/static/images/delete.png"
@click="removeFile(0)"
class="del"
/> />
</div> </a-form-item>
</div> <a-form-item :label="lan.$t('shipinfengmian')" class="video-cover">
</div> <div style="display: flex">
<div class="demand"> <a-upload
<p class="one-line-hide">{{lan.$t('shipinyaoqiu')}}</p> list-type="picture"
<p class="one-line-hide"> :customRequest="uploadspic"
1. {{lan.$t('shipinyaoqiu3')}} :before-upload="beforeUploadpic"
</p> >
</div> <div
</a-form-item> class="upload-image"
<a-form-item :label="lan.$t('shipinjianjie')" class="brief"> v-if="!viewCover && form.img.length == 0"
<a-textarea >
v-model:value="form.desc" <PlusOutlined
:autoSize="true" style="fontsize: 22px"
class="brief-textarea" v-if="uploadpicprogress == 0"
:maxlength="200" />
:placeholder="lan.$t('shurushipinjianjie')" <a-progress
/> type="circle"
<span class="words-number">{{ form.desc.length }}/200</span> :percent="uploadpicprogress"
</a-form-item> :width="80"
<a-form-item :wrapper-col="{ span: 4, offset: 0 }"> v-else
<a-button @click="onSubmit">{{lan.$t('shangchuanshipin')}}</a-button> />
</a-form-item> </div>
</a-form> <div class="upload-image" v-else>
<nav-bottom></nav-bottom> <img
</div> 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.文件扩展名fivmp4文件扩展名fivmp4
</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> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref, toRaw } from "vue"; import { defineComponent, onMounted, reactive, Ref, ref, toRaw } from "vue";
@ -110,378 +134,382 @@ 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 { setvideo, 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'; import { message } from "ant-design-vue";
import { useI18n } from '@/utils/i18n'; import { useI18n } from "@/utils/i18n";
export default defineComponent({ export default defineComponent({
name: "ReleaseWebcast", name: "ReleaseWebcast",
components: { components: {
PlaySquareOutlined, PlaySquareOutlined,
PlusOutlined, PlusOutlined,
NavBottom, NavBottom,
}, },
setup() { setup() {
const lan: any = useI18n(); const lan: any = useI18n();
interface FileItem { interface FileItem {
video: Array<string>; 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
}
}
/**
* 上传视频
*/
const uploadprogress: Ref<number> = ref(0);
const ifallowvideo=ref<boolean>(false)
async function uploads(file: AntUpload) {
if(ifallowvideo.value){
uploadprogress.value=0
form.value.video=[""]
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;
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(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)); const fileList: Array<FileItem> = [];
}
// videoadd(form, toRaw(form.value)); //
}; 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");
}
});
function beforeUpload(info?: any){ //
console.log(info.type) const viewCover: Ref<boolean> = ref(false),
if(info.type.split('/')[0]!="image"){ previewImage: Ref<string> = ref("");
message.error(lan.$t('fengmiangeshi')) /**
ifalowupload.value=false * 封面改变触发事件
return */
}else{ function coverChange(info: ImgInfo): void {
ifalowupload.value=true // console.log(info);
} //
} previewCover(info.file).then((url) => (previewImage.value = url));
viewCover.value = true;
// form.cover = fileList;
}
return { /**
labelCol: { span: 4 }, * 上传封面之前的钩子
wrapperCol: { span: 14 }, * @param file 上传的文件
form, */
viewCover, const beforeCoverUpload = (file: File): boolean => {
previewImage, console.log(file);
previewCover, return false;
coverChange, };
cancelCover,
beforeCoverUpload, /**
onSubmit, * 删除封面
uploadpicprogress, */
uploadspic, function cancelCover(file: number): void {
uploadprogress, console.log(file);
uploads, }
videofile, /**
videos, * 删除视频列表
removeFile, * @param index 删除文件的索引
beforeUpload, */
ifalowupload, function removeFile(index: number): void {
beforeVideoUpload, const newFileList = form.value.video.slice();
lan 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.upload { .upload1{
width: 171px; width: 171px;
height: 96px; height: 96px;
display:none }
.upload {
width: 171px;
height: 96px;
display: none;
} }
.upload-video { .upload-video {
width: 100%; width: 100%;
min-width: 700px; min-width: 700px;
background-color: #ffffff; background-color: #ffffff;
padding: 46px; padding: 46px;
border-radius: 17px; border-radius: 17px;
position: relative; position: relative;
::v-deep(.ant-form) { ::v-deep(.ant-form) {
.title { .title {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
color: #111111; color: #111111;
margin-bottom: 28px; 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: "";
}
} }
} .ant-row {
.upload-image { .ant-form-item-label {
width: 171px; width: 60px;
height: 96px; margin: 0 30px 0 17px;
border: 1px solid #dcdfe0; > label {
border-radius: 3px; font-size: 12px;
display: flex; font-weight: 500;
align-items: center; color: #808080;
justify-content: center; &::after {
margin-right: 17px; content: "";
} }
.ant-input { }
width: 171px; }
padding: 6px 11px; .upload-image {
border-radius: 3px; width: 171px;
border: 1px solid #dcdfe0; height: 96px;
font-size: 11px; border: 1px solid #dcdfe0;
color: #3f3f3f; border-radius: 3px;
&::-webkit-input-placeholder { display: flex;
font-size: 12px; align-items: center;
color: #808080; 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 {
.ant-select { .preview-image {
font-size: 12px; width: 171px;
color: #3f3f3f; height: 96px;
} }
.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;
} }
} .demand {
}
.video-cover {
.preview-image {
width: 171px;
height: 96px;
}
}
.video-introduction {
.ant-form-item-control-wrapper {
.ant-form-item-children {
display: flex;
// align-items: center;
.demand {
height: 94px; height: 94px;
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
color: #808080; color: #808080;
width: 134px; // width: 134px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
> p { > p {
line-height: 17px; line-height: 17px;
margin: 0; margin: 0;
} }
}
} }
} .video-introduction {
.video-list { .ant-form-item-control-wrapper {
display: flex; .ant-form-item-children {
align-items: center; display: flex;
.link { // align-items: center;
width: 11px; }
height: 11px; }
margin-right: 4px; .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;
}
}
} }
> span { .duration {
font-size: 9px; .unit {
font-weight: 500; margin-left: 18px;
color: #07ad97; font-size: 12px;
max-width: 150px; font-weight: 500;
color: #808080;
}
} }
.del { .brief {
width: 11px; position: relative;
height: 11px; .ant-input {
margin-left: auto; width: 359px;
cursor: pointer; }
.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;
}
} }
}
} }
.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> </style>

View File

@ -2,15 +2,16 @@
<div class="webcast"> <div class="webcast">
<a-form :label-col="labelCol" :wrapper-col="wrapperCol"> <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
<div class="title">{{ lan.$t("zhiboxinxi") }}</div> <div class="title">{{ lan.$t("zhiboxinxi") }}</div>
<a-form-item :label="lan.$t('zhibobiaoti')"> <a-form-item :label="lan.$t('zhibobiaoti')" :rules="{ required: true, message: 'Please input Activity name', trigger: 'blur'}">
<a-input <a-input
size="small" size="small"
v-model:value="form.title" v-model:value="form.title"
:placeholder="lan.$t('shuruzhibobiaoti')" :placeholder="lan.$t('shuruzhibobiaoti')"
/> />
</a-form-item> </a-form-item>
<a-form-item :label="lan.$t('zhibofengmian')" class="item-cover"> <a-form-item :label="lan.$t('zhibofengmian')" class="item-cover" :rules="{ required: true, message: 'Please input Activity name', trigger: 'blur'}">
<a-upload <div style="display:flex">
<a-upload
list-type="picture" list-type="picture"
:customRequest="uploadspic" :customRequest="uploadspic"
:before-upload="beforeUploadpic" :before-upload="beforeUploadpic"
@ -36,11 +37,26 @@
:src="form.img" :src="form.img"
/> />
</div> </div>
</a-upload> </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>
<a-form-item <a-form-item
:label="lan.$t('shipinjieshao')" :label="lan.$t('shipinjieshao')"
class="video-introduction" class="video-introduction"
:rules="{ required: true, message: 'Please input Activity name', trigger: 'blur'}"
> >
<a-upload <a-upload
list-type="picture" list-type="picture"
@ -81,9 +97,9 @@
<p class="one-line-hide"> <p class="one-line-hide">
{{ lan.$t("shipinyaoqiu") }} {{ lan.$t("shipinyaoqiu") }}
</p> </p>
<p class="one-line-hide">1.{{ lan.$t("shipinyaoqiu1") }}</p> <p>1.{{ lan.$t("shipinyaoqiu1") }}</p>
<p class="one-line-hide">2.{{ lan.$t("shipinyaoqiu2") }}</p> <p>2.{{ lan.$t("shipinyaoqiu2") }}</p>
<p class="one-line-hide">3.{{ lan.$t("shipinyaoqiu3") }}</p> <p>3.{{ lan.$t("shipinyaoqiu3") }}</p>
</div> </div>
<!-- <div class="demand"> <!-- <div class="demand">
<p class="one-line-hide">视频要求</p> <p class="one-line-hide">视频要求</p>
@ -94,23 +110,30 @@
</p> </p>
</div> --> </div> -->
</a-form-item> </a-form-item>
<a-form-item :label="lan.$t('kaishishijian')"> <a-form-item :label="lan.$t('kaishishijian')" :rules="{ required: true, message: 'Please input Activity name', trigger: 'blur'}">
<!-- <a-input <!-- <a-input
size="small" size="small"
v-model:value="form.startTime" v-model:value="form.startTime"
placeholder="请设置您的开始时间" placeholder="请设置您的开始时间"
/> --> /> -->
<a-date-picker <a-date-picker
class="datesel"
show-time show-time
format="YYYY-MM-DD HH:mm"
:value="form.dateline" :value="form.dateline"
@change="startchange" @change="startchange"
:placeholder="lan.$t('shezhikaishishijian')" :placeholder="lan.$t('shezhikaishishijian')"
:getCalendarContainer="
(triggerNode) => triggerNode.parentNode
"
/> />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
:label="lan.$t('zhiboshichang')" :label="lan.$t('zhiboshichang')"
class="duration" class="duration"
v-bind="validateInfos.livetime" v-bind="validateInfos.livetime"
:rules="{ required: true, message: 'Please input Activity name', trigger: 'blur'}"
> >
<a-input <a-input
size="small" size="small"
@ -124,6 +147,7 @@
<a-form-item <a-form-item
:label="lan.$t('zhiborenshu')" :label="lan.$t('zhiborenshu')"
v-bind="validateInfos.livenumber" v-bind="validateInfos.livenumber"
:rules="{ required: true, message: 'Please input Activity name', trigger: 'blur'}"
> >
<a-input <a-input
size="small" size="small"
@ -613,21 +637,22 @@ export default defineComponent({
height: 96px; height: 96px;
} }
} }
.demand {
line-height: 17px;
font-size: 10px;
font-weight: 500;
color: #808080;
width: 134px;
> p {
margin: 0;
}
}
.video-introduction { .video-introduction {
.ant-form-item-control-wrapper { .ant-form-item-control-wrapper {
.ant-form-item-children { .ant-form-item-children {
display: flex; display: flex;
align-items: center; align-items: center;
.demand {
line-height: 17px;
font-size: 10px;
font-weight: 500;
color: #808080;
width: 134px;
> p {
margin: 0;
}
}
} }
} }
} }
@ -710,5 +735,13 @@ export default defineComponent({
} }
} }
} }
.datesel{
&::v-deep(.ant-calendar-time-picker-select){
width: 50% !important;
&:last-child{
display: none;
}
}
}
} }
</style> </style>

View File

@ -31,7 +31,7 @@
<div class="infoitem"> <div class="infoitem">
<div class="left">{{lan.$t('laiyuan')}}</div> <div class="left">{{lan.$t('laiyuan')}}</div>
<div class="right">{{accountinfo.remark}}</div> <div class="right">{{accountinfo.typename}}</div>
</div> </div>
<div class="back" @click="navto(1,2)">{{lan.$t('fanhui')}}</div> <div class="back" @click="navto(1,2)">{{lan.$t('fanhui')}}</div>
@ -77,13 +77,13 @@
<div class="right">{{accountinfo.typename}}</div> <div class="right">{{accountinfo.typename}}</div>
</div> </div>
<div class="infoitem"> <div class="infoitem">
<div class="left">{{riqi}}</div> <div class="left">{{lan.$t('riqi')}}</div>
<div class="right">{{accountinfo.created_at}}</div> <div class="right">{{accountinfo.created_at}}</div>
</div> </div>
<div class="infoitem"> <div class="infoitem">
<div class="left">{{lan.$t('shoukuanzhanghu')}}</div> <div class="left">{{lan.$t('shoukuanzhanghu')}}</div>
<div class="right">{{accountinfo.account}}</div> <div class="right">{{accountinfo.typename}}</div>
</div> </div>
<div class="back" @click="navto(2)">{{lan.$t('fanhui')}}</div> <div class="back" @click="navto(2)">{{lan.$t('fanhui')}}</div>