Open jingyuexing opened 3 years ago
视频发布的接口和音频发布的接口很类似,都是使用文件上传,然后服务器生成一个连接池,在发布视频文件时候后端会给你一个上传的ID,以便你和后端完成链接。 其音频的上传的源码如下:
<template> <div class="music-upload-wrapper ticket-container"> <div class="content-wrapper"> <uploadcover></uploadcover> <formlist v-if="!albumUpload" :user-info="userInfo" :create-type="createType" :voice-type="voiceType" :style-type="styleType" :language-type="languageType" :theme-type="themeType" :vocalShowType="vocalShowType"></formlist> <albumlist v-else :user-info="userInfo" :create-type="createType" :voice-type="voiceType" :style-type="styleType" :language-type="languageType" :theme-type="themeType" :vocalShowType="vocalShowType"></albumlist> </div> </div> </template> <script type="text/javascript"> import { mapState, mapMutations } from 'vuex'; import { getMusicCatagories, // getMusicTags, // getUserAlbums } from 'service/getData'; import navList from './children/nav'; import uploadcover from './children/uploadcover'; import formlist from './children/formlist'; import albumlist from './children/albumList'; export default { computed: { ...mapState(['uploadPercent', 'uploader', 'userInfo', 'albumUpload']) }, data() { return { createType: [], voiceType: [], styleType: [], languageType: [], themeType: [], vocalShowType: [], // tags: [], // albumsList: [] }; }, mounted() { // 初始化meta的数据 this.initContributeMetaData(); // this.initContributeTags(); // this.initUserAlbums(); this.$nextTick(() => { // 初始化封面上传插件 // 初始化歌词上传插件 // 初始化授权上传插件 }); this.banForwardAndBack(); }, methods: { ...mapMutations(['UPLOAD_COMPLETE', 'SET_LRC_FILE', 'CHANGE_LRC_UPLOAD_TEXT', 'LRC_UPLOAD_COMPLETE', 'SET_LRC_TOAST_STATUS', 'SET_AUTH_FILES']), async initContributeMetaData() { var res = await getMusicCatagories() || {}; var catagoryInfo = res.data || {}; if (parseInt(res.code) === 0) { // 创作类型 this.createType = catagoryInfo[1] || []; // 声音类型 this.voiceType = catagoryInfo[2] || []; // 风格类型 this.styleType = catagoryInfo[3] || []; // 语言类型 this.languageType = catagoryInfo[4] || []; // 主题风格 this.themeType = catagoryInfo[5] || []; // 有声节目声音类型 this.vocalShowType = catagoryInfo[6] || []; } else { // 报错页面 }; }, banForwardAndBack() { window.location.hash = 'no-back'; window.location.hash = 'Again-No-back-button'; // again because google chrome don't insert first hash into history window.onhashchange = function() { window.location.hash = 'no-back'; }; }, // async initContributeTags() { // var res = await getMusicTags(1, 1) || {}; // if (parseInt(res.code) === 0) { // this.tags = res.data || []; // }; // }, // async initUserAlbums() { // var res = await getUserAlbums(this.userInfo.mid) || {}; // if (res.code === 0) { // this.albumsList = res.data; // }; // }, }, components: { navList, uploadcover, formlist, albumlist } }; </script> <style lang="less" scoped> @import '~color'; .music-upload-wrapper { padding: 1px; margin-bottom: 50px; height: auto; border-radius: 4px; } .content-wrapper { padding-top: 20px; display: flex; } </style>
<template> <div class="form-list-wrapper"> <warning :class="warningStatus?'show':'hide'" @close="closeLrcToast()" class="lrc-toast-wrapper"> <div slot="text">{{warningText}}</div> </warning> <notice :class="noticeStatus?'show':'hide'" @close="closeNoticeToast()" class="lrc-toast-wrapper"> <div slot="text">{{noticeText}}</div> </notice> <div class="progress-bar-wrapper"> <div class="music-icon"></div> <div class="progress-bar"> <div class="progress-bar-header"> <div class="music-name">{{file.name}}</div> <div class="upload-status">{{uploadText}} <span class="upload-complete"> {{uploadPercent}}% </span> </div> <div v-if="uploadStatus == 3" @click="ContinueUploadFile(file)" class="btn continue-btn"></div> <div v-if="uploadStatus == 2" @click="PauseUploadFile(file)" class="btn pause-btn"></div> <div @click="showConfirmDeleteModal()" class="btn delete-btn"> <div :class="isShowDeleteConfirmModal?'show':'hide'" class="delete-modal"> <div class="delete-tips">确定要删除吗</div> <div class="delete-btns"> <div @click="confirmDelete(file)" class="delete-btns-confirm">确定</div> <div @click.stop="hideConfirmDeleteModal()" class="delete-btns-cancel">取消</div> </div> </div> </div> </div> <div class="progress-bar-body"> <div :style="{width: uploadPercent +'%'}" class="progress-bar-body-complete"></div> </div> </div> </div> <div class="form-list"> <!-- <div class="form-item"> <div class="title form-item-material-type">稿件类型</div> <div class="radio-list form-item-material-list"> <div class="radio-item"> <input @change="initUploader()" :value="1" v-model="crType" type="radio" name="material"> <span class="radio-text">自制</span> </div> <div class="radio-item"> <input @change="initUploader()" :value="2" v-model="crType" type="radio" name="material"> <span class="radio-text">授权上传</span> </div> <div v-show="crType == 2" class="auth-uploader-wrapper"> <div class="auth-uploader-content"> <div class="auth-uploader" id="auth-uploader"> <span class="plus-icon"></span> <span class="tips">可以上传书面授权图片,QQ截图等相关证明图片</span> </div> </div> <div class="auth-uploader-list"> <div v-if="authFiles.length > 0" v-for="file in authFiles"> <div v-if="file.status == 5" class="auth-file-item"> <span class="hook-icon"></span> <span class="succes-text">上传授权图片成功!</span> <span>{{file.name}}</span> </div> </div> </div> </div> </div> <div v-if="crTypeEmptyStatus" class="title-tips"> <span></span>稿件类型必须要填写 </div> </div> --> <div class="form-item"> <div class="title form-item-music-type">音频分类</div> <div class="form-item-music-detail"> <div class="radio-list"> <label :class="contentId === 1 ?'active':''" class="radioCheck" for="music" > <span></span>音乐 <input @click.stop="setChanel(1, 0, '音乐')" value=1 id="music" v-model="contentId" type="radio" name="content-type"> </label> <label :class="contentId === 2 ?'active':''" class="radioCheck" for="broadcast" > <span></span>有声节目 <input @click.stop="setChanel(2, 0, '有声节目')" value=2 id="broadcast" v-model="contentId" type="radio" name="content-type"> </label> <div v-if="contentEmptyStatus" class="title-tips"> <span></span>内容分类必须要填写 </div> </div> </div> <div class="form-item-music-detail" v-if="contentId == '1'"> <div class="form-item-music-type-title"> <span class="pink">*</span> 声音类型: </div> <div class="radio-list"> <label :class="voiceId == voiceItem.id?'active':''" :for="voiceItem.id" @mouseenter="enterHover(voiceItem.id)" @mouseleave="leaveHover(voiceItem.id)" class="radio-item" v-for="voiceItem in voiceType"> <input @click.stop="setVoiceStatus(voiceItem.id,1,voiceItem.name)" v-model="voiceId" :value="voiceItem.id" :id="voiceItem.id" type="radio" name="music-type"> {{voiceItem.name}} </label> <div v-show="musicTypeHover3" class="musicHoverType left-20">使用人声进行演绎。</div> <div v-show="musicTypeHover4" class="musicHoverType left-40">以雅马哈Vocaloid和UTAU引擎为基础,包含其他调教引擎,运用各类音源进行的歌曲创作内容。</div> <div v-show="musicTypeHover5" class="musicHoverType left-60">将人物或者角色的无伴奏素材进行人工调音,使其就像VOCALOID一样歌唱,最终创作内容。</div> <div v-show="musicTypeHover6" class="musicHoverType left-80">作曲初衷就不包含填词的音乐。传统或非传统乐器及器材的演奏作品也算作在内。</div> <div v-if="voiceEmptyStatus" class="title-tips"> <span></span>声音类型必须要填写 </div> </div> </div> <div class="form-item-music-detail" v-if="contentId == '2'"> <div class="form-item-music-type-title"> <span class="pink">*</span> 声音类型: </div> <div class="radio-list"> <label :class="vocalShowVoiceId == voiceItem.id?'active':''" :for="voiceItem.id" class="radio-item" v-for="voiceItem in vocalShowType"> <input @click.stop="setVocalShowVoiceStatus(voiceItem.id,1,voiceItem.name)" v-model="vocalShowVoiceId" :value="voiceItem.id" :id="voiceItem.id" type="radio" name="music-type"> {{voiceItem.name}} </label> <div v-if="vocalShowVoiceEmptyStatus" class="title-tips"> <span></span>声音类型必须要填写 </div> </div> </div> <div class="form-item-music-detail" v-if="contentId == '1' && voiceId != 0"> <div class="form-item-music-type-title"> <span class="pink">*</span> 创作类型: </div> <div class="radio-list"> <label :class="createId == createItem.id?'active':''" @mouseenter="enterHover(createItem.id)" @mouseleave="leaveHover(createItem.id)" class="radio-item" :for="createItem.id" v-for="createItem in createType"> {{createItem.name}} <input @click.stop="setCreateStatus(createItem.id, 2, createItem.name)" :value="createItem.id" :id="createItem.id" v-model="createId" type="radio" name="create-type"> </label> <div v-show="musicTypeHover1" class="musicHoverType left-20">个人或团队创作的、非抄袭模仿的、内容和形式(主要指作曲)都具有独特个性的作品。</div> <div v-show="musicTypeHover2" class="musicHoverType left-40">将已发表的音乐作品,使用原有的词曲,再次进行演唱或者演奏。</div> <div v-if="createEmptyStatus" class="title-tips"> <span></span>创作类型必须要填写 </div> </div> </div> <div class="form-item-music-detail" v-if="contentId == '1' && voiceId != '6' && voiceId != '0'"> <div class="form-item-music-type-title"> <span class="pink">*</span> 语言类型: </div> <div class="radio-list"> <label :class="voiceId == '6' ? 'disabled':languageId == languageItem.id?'active':''" :for="languageItem.id" class="radio-item" v-for="languageItem in languageType"> <input @click.stop="setLanguageStatus(languageItem.id,3,languageItem.name)" v-model="languageId" :value="languageItem.id" :id="languageItem.id" type="radio" name="language-type"> {{languageItem.name}} </label> <div v-if="languageEmptyStatus" class="title-tips"> <span></span>语言类型必须要填写 </div> </div> </div> <div class="form-item-music-detail" v-if="contentId == '1' && voiceId != '0'"> <div class="form-item-music-type-title"> 主题来源: </div> <div class="radio-list"> <label :class="themeId == themeItem.id?'active':''" :for="themeItem.id" class="radio-item" v-for="themeItem in themeType"> <input @click.stop="setThemeStatus(themeItem.id,4,themeItem.name)" v-model="themeId" :value="themeItem.id" :id="themeItem.id" type="radio" name="theme-type"> {{themeItem.name}} </label> <div v-if="themeEmptyStatus" class="title-tips"> <span></span>主题来源必须要填写 </div> </div> </div> <div class="form-item-music-detail" v-if="contentId == '1' && voiceId != '5' && voiceId != '0'"> <div class="form-item-music-type-title"> 风格类型: </div> <div class="radio-list"> <label :class="styleId == styleItem.id?'active':''" class="radio-item" :for="styleItem.id" v-for="styleItem in styleType" v-if="styleItem.id < 14 || (styleItem.id > 13 && unfold) "> {{styleItem.name}} <input @click.stop="setStyleStatus(styleItem.id,5,styleItem.name)" :id="styleItem.id" :value="styleItem.id" v-model="styleId" type="radio" name="style-type"> </label> <div v-if="styleEmptyStatus" class="title-tips"> <span></span>风格类型必须要填写 </div> <div v-show="!unfold" class="foldDiv" @click="styleClass">展开<span class="foldStatus"></span></div><div v-show="unfold" class="foldDiv" @click="styleClass">收起<span class="unfoldStatus"></span></div> </div> </div> <div v-if="contentId == '1'" class="current-selector"> <div class="current-selector-text">您当前选择的是:</div> <div class="selector-list"> <!-- <label @click="setHighSelector(key)" :class="highSelector == key?'active':''" :for="key" class="radio-item" v-for="key in filterObject"> {{key}} <input v-model="highSelector" type="radio" name="selector-radio-item"> </label> <div class="hight-selector-tips">选择一个优先分类,有助于在首页分区及标签中带来更佳的展示效果</div> --> <!-- <div v-for="key in filterObject" class="radio-item">{{key}}</div> --> <span class="font-blue">{{filterObjectString}}</span> </div> </div> </div> <div v-if="contentId == '2'" class="current-selector"> <div class="current-selector-text">您当前选择的是:</div> <div class="selector-list"> <!-- <div v-for="key in vocalShowFilterObject" class="radio-item">{{key}}</div>--> <span class="font-blue">{{vocalShowFilterObjectString}}</span> </div> </div> <div class="form-item"> <div class="title form-item-paper-title">稿件标题</div> <div class="form-item-paper-input-wrapper"> <input type="text" @input="changeTitle()" v-model="titleContent" :class="titltValidationStatus?'warning':''" maxlength="80" placeholder="合适的稿件标题有利用稿件的通过,同时可以提升在分区,搜索中展现的机会" class="form-item-paper-input"> <span class="form-item-paper-total">{{titleCount}}/80</span> </div> <div class="form-title-tips" v-show="contentId !== 0"><span></span>{{themeAlert[contentId-1]}} </div> <div v-if="titltValidationStatus" class="title-tips"> <span></span>稿件标题最多输入80个字 </div> <div v-if="titltValidationEmptyStatus" class="title-tips"> <span></span>稿件标题必须要填写 </div> </div> <div class="form-item form-item-song-info" v-if="contentId == '1'"> <div class="title form-item-music-info coordination-title">歌曲信息 <span class="coordination-tip" v-show="createId === 1">输入昵称(例:22娘)或UID(例:uid33)按回车确认,可关联协同创作UP主</span> <i class="iconfont" v-show="createId === 1" @mouseenter="showCoordinationTip = true" @mouseleave="showCoordinationTip = false"></i> <div class="tip-detail" v-show="showCoordinationTip"> <p class="detail-info">协同创作的UP主可作为音乐创作团队的一员展示在音乐播放页。</p> <p class="detail-info">发起关联邀请后,需要被关联的协同UP主进入自己的创作中心同意关联。协同UP主只能关联稿件,不能编辑歌曲信息。</p> <p class="detail-info">稿件提交后可在单曲编辑页中重新修改或取消关联UP主。</p> </div> </div> <div class="form-list-content-wrapper"> <!-- <div class="left-wrapper"> --> <div class="input-item input-item-singer" v-if="voiceId == 3"> <div class="input-item-title narrow"><span class="pink">*</span> 歌手:</div> <div class="input-item-singer-content"> <div v-if="singerList.length > 0" class="singerList"> <span v-for="singer in singerList"> <i class="coor-user" v-if="singer.mid">UP</i> <i class="common-user" :class="singer.mid ? 'user-left': ''">{{singer.uname}}</i> <i @click.stop="removeSearchResult('singer', singer, true)" class="iconfont"></i> </span> <div v-show="singerInputStatus" class="iconfont addIcon" @click="addContent('singer')"></div> </div> <div class="coordination-type-wrap"> <input v-show="!singerInputStatus && createId === 1" maxlength="18" placeholder="演唱者名称 (可关联协作UP主)" class="search-input" @blur="addSearchResultPrepare('singer', singerSearch)" v-model="singerSearch.uname" type="text" name="search-singer" id="search-singer" @keyup.enter.stop="showSearchBlock('singer')"> <input v-show="!singerInputStatus && createId !== 1" maxlength="18" placeholder="演唱者名称" class="search-input" @blur="addSearchResult('singer', singerSearch, undefined, 3)" v-model="singerSearch.uname" type="text" name="search-singer" id="search-singer"> <div class="coordination-wrap" v-show="createId === 1 && singerSearchBlock"> <div class="no-coordination no-coordination-click" @mousedown.stop="addSearchResult('singer', singerSearch, undefined, 1)">不关联up主</div> <ul class="coordination-list" v-show="coordinationUserList.length"> <li class="coordination-item clearfix" v-for="(info, index) in coordinationUserList" :key="info.mid" @mousedown="addSearchResult('singer', singerSearch, index, 2)"> <img width="28" height="28" alt="" class="coordination-head" :src="info.face.replace(/http\:/, '')"> <div class="coordination-info"> <div class="coordination-name">{{info.name}}</div> <div class="coordination-id">{{info.mid}}</div> </div> </li> </ul> <div class="no-coordination find-no-coordination" v-show="!coordinationUserList || !coordinationUserList.length">{{coordinationErrorText}}</div> </div> </div> <!-- <div v-if="singerSearchList.length > 0" class="searchSingerList search-list"> <div @mousedown.left="confirmSearch('singer',$event,singer)" class="search-list-item" v-for="singer in singerSearchList"> {{singer.uname}} </div> </div> --> </div> </div> <div class="input-item input-item-performance" v-if="voiceId == 6"> <div class="input-item-title narrow"><span class="pink">*</span> 演奏:</div> <div class="input-item-performance-content"> <div v-if="performanceList.length > 0" class="singerList"> <span v-for="performance in performanceList"> <i class="coor-user" v-if="performance.mid">UP</i> <i class="common-user" :class="performance.mid ? 'user-left': ''">{{performance.uname}}</i> <i @click.stop="removeSearchResult('performance', performance, true)" class="iconfont"></i> </span> <div v-show="performanceInputStatus" class="iconfont addIcon" @click="addContent('performance')"></div> </div> <div class="coordination-type-wrap"> <input v-show="!performanceInputStatus && createId === 1" maxlength="18" placeholder="演奏者名称 (可关联协作UP主)" class="search-input" @blur="addSearchResultPrepare('performance', performanceSearch)" v-model="performanceSearch.uname" type="text" name="search-performance" id="search-performance" @keyup.enter.stop="showSearchBlock('performance')"> <input v-show="!performanceInputStatus && createId !== 1" maxlength="18" placeholder="演奏者名称" class="search-input" @blur="addSearchResult('performance', performanceSearch, undefined, 3)" v-model="performanceSearch.uname" type="text" name="search-performance" id="search-performance"> <div class="coordination-wrap" v-show="createId === 1 && performanceSearchBlock"> <div class="no-coordination" @mousedown.stop="addSearchResult('performance', performanceSearch, undefined, 1)">不关联up主</div> <ul class="coordination-list" v-show="coordinationUserList.length"> <li class="coordination-item clearfix" @mousedown="addSearchResult('performance', performanceSearch, index, 2)" v-for="(info, index) in coordinationUserList" :key="info.mid"> <img width="28" height="28" alt="" class="coordination-head" :src="info.face.replace(/http\:/, '')"> <div class="coordination-info"> <div class="coordination-name">{{info.name}}</div> <div class="coordination-id">{{info.mid}}</div> </div> </li> </ul> <div class="no-coordination find-no-coordination" v-show="!coordinationUserList.length">{{coordinationErrorText}}</div> </div> </div> <!-- <div v-if="performanceSearchList.length > 0" class="searchSingerList search-list"> <div @mousedown.left="confirmSearch('performance',$event,performance)" class="search-list-item" v-for="performance in performanceSearchList"> {{performance.uname}} </div> </div> --> </div> </div> <div class="input-item input-item-voiceSource" v-if="voiceId == 4 || voiceId == 5"> <div class="input-item-title narrow"><span class="pink">*</span> 音源:</div> <div class="input-item-voiceSource-content"> <div v-if="voiceSourceList.length > 0" class="singerList"> <span v-for="voiceSource in voiceSourceList"> <i class="common-user">{{voiceSource.uname}}</i> <i @click.stop="removeSearchResult('voiceSource', voiceSource)" class="iconfont"></i> </span> <div v-show="voiceSourceInputStatus" class="iconfont addIcon" @click="addContent('voiceSource')"></div> </div> <div> <input v-show="!voiceSourceInputStatus" maxlength="18" placeholder="音源名称(例:洛天依、丞相)" class="search-input" @blur="addSearchResult('voiceSource',voiceSourceSearch)" v-model="voiceSourceSearch.uname" type="text" name="search-voiceSource" id="search-voiceSource"> </div> <!-- <div v-if="voiceSourceSearchList.length > 0" class="searchSingerList search-list"> <div @mousedown.left="confirmSearch('voiceSource',$event,voiceSource)" class="search-list-item" v-for="voiceSource in voiceSourceSearchList"> {{voiceSource.uname}} </div> </div> --> </div> </div> <div class="input-item input-item-album"> <div class="input-item-title"> 合辑:</div> <div class="input-item-album-content"> <div class="input-item-current-album">{{currentAlbum}}</div> <span @click="toggleAlbums" class="input-item-album-icon"></span> <ul :class="albumStatus?'show':'hide'" class="input-item-album-list"> <li @click="setCurrentAlbums(albums)" v-for="albums in albumsList"> {{albums.title}} </li> </ul> </div> </div> <div class="input-item input-item-attune" v-if="voiceId == 4 || voiceId == 5"> <div class="input-item-title narrow"><span class="pink">*</span> 调音:</div> <div class="input-item-attune-content"> <div v-if="attuneList.length > 0" class="singerList"> <span v-for="attune in attuneList"> <i class="coor-user" v-if="attune.mid">UP</i> <i class="common-user" :class="attune.mid ? 'user-left': ''">{{attune.uname}}</i> <i @click.stop="removeSearchResult('attune', attune, true)" class="iconfont"></i> </span> <div v-show="attuneInputStatus" class="iconfont addIcon" @click="addContent('attune')"></div> </div> <div class="coordination-type-wrap"> <input v-show="!attuneInputStatus && createId === 1" maxlength="18" placeholder="调音人员 (可关联协作UP主)" class="search-input" @blur="addSearchResultPrepare('attune', attuneSearch)" v-model="attuneSearch.uname" type="text" name="search-attune" id="search-attune" @keyup.enter.stop="showSearchBlock('attune')"> <input v-show="!attuneInputStatus && createId !== 1" maxlength="18" placeholder="调音人员" class="search-input" @blur="addSearchResult('attune', attuneSearch, undefined, 3)" v-model="attuneSearch.uname" type="text" name="search-attune" id="search-attune"> <div class="coordination-wrap" v-show="createId === 1 && attuneSearchBlock"> <div class="no-coordination" @mousedown.stop="addSearchResult('attune', attuneSearch, undefined, 1)">不关联up主</div> <ul class="coordination-list" v-show="coordinationUserList.length"> <li class="coordination-item clearfix" v-for="(info, index) in coordinationUserList" @mousedown="addSearchResult('attune', attuneSearch, index, undefined, 2)" :key="info.mid"> <img width="28" height="28" alt="" class="coordination-head" :src="info.face.replace(/http\:/, '')"> <div class="coordination-info"> <div class="coordination-name">{{info.name}}</div> <div class="coordination-id">{{info.mid}}</div> </div> </li> </ul> <div class="no-coordination find-no-coordination" v-show="!coordinationUserList.length">{{coordinationErrorText}}</div> </div> </div> <!-- <div v-if="attuneSearchList.length > 0" class="searchSingerList search-list"> <div @mousedown.left="confirmSearch('attune',$event,attune)" class="search-list-item" v-for="attune in attuneSearchList"> {{attune.uname}} </div> </div>--> </div> </div> <div class="input-item input-item-instrucment" v-if="voiceId == 6"> <div class="input-item-title narrow"> 乐器:</div> <div class="input-item-instrucment-content"> <div v-if="instrucmentList.length > 0" class="singerList"> <span v-for="instrucment in instrucmentList"> <i class="common-user">{{instrucment.uname}}</i> <i @click.stop="removeSearchResult('instrucment', instrucment)" class="iconfont"></i> </span> <div v-show="instrucmentInputStatus" class="iconfont addIcon" @click="addContent('instrucment')"></div> </div> <div> <input v-show="!instrucmentInputStatus" maxlength="18" placeholder="乐器名称" class="search-input" @blur="addSearchResult('instrucment',instrucmentSearch)" v-model="instrucmentSearch.uname" type="text" name="search-instrucment" id="search-instrucment"> </div> </div> </div> <div class="input-item input-item-lrc" v-if="voiceId != 6"> <div class="input-item-title narrow"> 作词:</div> <div class="input-item-lrc-content"> <div v-if="lrcList.length > 0" class="singerList"> <span v-for="lrc in lrcList"> <i class="coor-user" v-if="lrc.mid">UP</i> <i class="common-user" :class="lrc.mid ? 'user-left': ''">{{lrc.uname}}</i> <i @click="removeSearchResult('lrc', lrc, true)" class="iconfont"></i> </span> <div v-show="lrcInputStatus" class="iconfont addIcon" @click="addContent('lrc')"></div> </div> <div class="coordination-type-wrap"> <input v-show="!lrcInputStatus && createId === 1" maxlength="18" placeholder="作词者名称 (可关联协作UP主)" class="search-input" @blur="addSearchResultPrepare('lrc', lrcSearch)" v-model="lrcSearch.uname" type="text" name="search-lrc" id="search-lrc" @keyup.enter.stop="showSearchBlock('lrc')"> <input v-show="!lrcInputStatus && createId !== 1" maxlength="18" placeholder="作词者名称" @blur="addSearchResult('lrc', lrcSearch, undefined, 3)" v-model="lrcSearch.uname" type="text" name="search-lrc" id="search-lrc" class="search-input"> <div class="coordination-wrap" v-show="createId === 1 && lrcSearchBlock"> <div class="no-coordination" @mousedown.stop="addSearchResult('lrc', lrcSearch, undefined, 1)">不关联up主</div> <ul class="coordination-list" v-show="coordinationUserList.length"> <li class="coordination-item clearfix" v-for="(info, index) in coordinationUserList" @mousedown="addSearchResult('lrc', lrcSearch, index, 2)" :key="info.mid"> <img width="28" height="28" alt="" class="coordination-head" :src="info.face.replace(/http\:/, '')"> <div class="coordination-info"> <div class="coordination-name">{{info.name}}</div> <div class="coordination-id">{{info.mid}}</div> </div> </li> </ul> <div class="no-coordination find-no-coordination" v-show="!coordinationUserList.length">{{coordinationErrorText}}</div> </div> </div> <!-- <div v-if="lrcSearchList.length > 0" class="searchSingerList search-list"> <div @mousedown.left="confirmSearch('lrc',$event,lrc)" class="search-list-item" v-for="lrc in lrcSearchList"> {{lrc.uname}} </div> </div> --> </div> </div> <div class="input-item input-item-compose"> <div class="input-item-title narrow"> 作曲:</div> <div class="input-item-compose-content"> <div v-if="composeList.length > 0" class="singerList"> <span v-for="compose in composeList"> <i class="coor-user" v-if="compose.mid">UP</i> <i class="common-user" :class="compose.mid ? 'user-left': ''">{{compose.uname}}</i> <i @click="removeSearchResult('compose', compose, true)" class="iconfont"></i> </span> <div v-show="composeInputStatus" class="iconfont addIcon" @click="addContent('compose')"></div> </div> <div class="coordination-type-wrap"> <input v-show="!composeInputStatus && createId === 1" maxlength="18" placeholder="作曲者名称 (可关联协作UP主)" class="search-input" @blur="addSearchResultPrepare('compose', composeSearch)" v-model="composeSearch.uname" type="text" name="search-compose" id="search-compose" @keyup.enter.stop="showSearchBlock('compose')"> <input v-show="!composeInputStatus && createId !== 1" maxlength="18" placeholder="作曲者名称" @blur="addSearchResult('compose', composeSearch, undefined, 3)" v-model="composeSearch.uname" type="text" name="search-compose" id="search-compose" class="search-input"> <div class="coordination-wrap" v-show="createId === 1 && composeSearchBlock"> <div class="no-coordination" @mousedown.stop="addSearchResult('compose', composeSearch, undefined, 1)">不关联up主</div> <ul class="coordination-list" v-show="coordinationUserList.length"> <li class="coordination-item clearfix" v-for="(info, index) in coordinationUserList" @mousedown="addSearchResult('compose', composeSearch, index, 2)" :key="info.mid"> <img width="28" height="28" alt="" class="coordination-head" :src="info.face.replace(/http\:/, '')"> <div class="coordination-info"> <div class="coordination-name">{{info.name}}</div> <div class="coordination-id">{{info.mid}}</div> </div> </li> </ul> <div class="no-coordination find-no-coordination" v-show="!coordinationUserList.length">{{coordinationErrorText}}</div> </div> </div> <!-- <div v-if="composeSearchList.length > 0" class="searchSingerList search-list"> <div @mousedown.left="confirmSearch('compose',$event,compose)" class="search-list-item" v-for="compose in composeSearchList"> {{compose.uname}} </div> </div> --> </div> </div> <div class="input-item input-item-arrange"> <div class="input-item-title narrow"> 编曲:</div> <div class="input-item-arrange-content"> <div v-if="arrangeList.length > 0" class="singerList"> <span v-for="arrange in arrangeList"> <i class="coor-user" v-if="arrange.mid">UP</i> <i class="common-user" :class="arrange.mid ? 'user-left': ''">{{arrange.uname}}</i> <i @click="removeSearchResult('arrange', arrange, true)" class="iconfont"></i> </span> <div v-show="arrangeInputStatus" class="iconfont addIcon" @click="addContent('arrange')"></div> </div> <div class="coordination-type-wrap"> <input v-show="!arrangeInputStatus && createId === 1" maxlength="18" placeholder="编曲者名称 (可关联协作UP主)" class="search-input" @blur="addSearchResultPrepare('arrange', arrangeSearch)" v-model="arrangeSearch.uname" type="text" name="search-arrange" id="search-arrange" @keyup.enter.stop="showSearchBlock('arrange')"> <input v-show="!arrangeInputStatus && createId !== 1" maxlength="18" placeholder="编曲者名称" @blur="addSearchResult('arrange', arrangeSearch, undefined, 3)" v-model="arrangeSearch.uname" type="text" name="search-arrange" id="search-arrange" class="search-input"> <div class="coordination-wrap" v-show="createId === 1 && arrangeSearchBlock"> <div class="no-coordination" @mousedown.stop="addSearchResult('arrange', arrangeSearch, undefined, 1)">不关联up主</div> <ul class="coordination-list" v-show="coordinationUserList.length"> <li class="coordination-item clearfix" v-for="(info, index) in coordinationUserList" @mousedown="addSearchResult('arrange', arrangeSearch, index, 2)" :key="info.mid"> <img width="28" height="28" alt="" class="coordination-head" :src="info.face.replace(/http\:/, '')"> <div class="coordination-info"> <div class="coordination-name">{{info.name}}</div> <div class="coordination-id">{{info.mid}}</div> </div> </li> </ul> <div class="no-coordination find-no-coordination" v-show="!coordinationUserList.length">{{coordinationErrorText}}</div> </div> </div> <!-- <div v-if="arrangeSearchList.length > 0" class="searchSingerList search-list"> <div @mousedown.left="confirmSearch('arrange',$event,arrange)" class="search-list-item" v-for="arrange in arrangeSearchList"> {{arrange.uname}} </div> </div> --> </div> </div> <div class="input-item input-item-later"> <div class="input-item-title width"> 混音/后期:</div> <div class="input-item-later-content"> <div v-if="laterList.length > 0" class="singerList"> <span v-for="later in laterList"> <i class="common-user">{{later.uname}}</i> <i @click.stop="removeSearchResult('later', later)" class="iconfont"></i> </span> <div v-show="laterInputStatus" class="iconfont addIcon" @click="addContent('later')"></div> </div> <div> <input v-show="!laterInputStatus" maxlength="18" placeholder="" @blur="addSearchResult('later',laterSearch)" v-model="laterSearch.uname" type="text" name="search-later" id="search-later" class="search-input"> </div> <!-- <div v-if="laterSearchList.length > 0" class="searchSingerList search-list"> <div @click.stop="confirmSearch('later',$event,later)" class="search-list-item" v-for="later in laterSearchList"> {{later.uname}} </div> </div> --> </div> </div> <div class="input-item input-item-cover"> <div class="input-item-title width"> 封面制作者:</div> <div class="input-item-cover-content"> <div v-if="coverList.length > 0" class="singerList"> <span v-for="cover in coverList"> <i class="common-user">{{cover.uname}}</i> <i @click="removeSearchResult('cover', cover)" class="iconfont"></i> </span> <div v-show="coverInputStatus" class="iconfont addIcon" @click="addContent('cover')"></div> </div> <div> <input v-show="!coverInputStatus" maxlength="18" placeholder="封面作者名称" @blur="addSearchResult('cover',coverSearch)" v-model="coverSearch.uname" type="text" name="search-cover" id="search-cover" class="search-input"> </div> <!-- <div v-if="coverSearchList.length > 0" class="searchSingerList search-list"> <div @mousedown.left="confirmSearch('cover',$event,cover)" class="search-list-item" v-for="cover in coverSearchList"> {{cover.uname}} </div> </div> --> </div> </div> <!-- </div> --> <!-- <div class="right-wrapper"> --> <!-- <div v-if="createId == 2" class="input-item input-item-origin"> <div class="input-item-title">本家:</div> <div class="input-item-origin-content"> <input maxlength="18" @keyup.space="addSearchResult('origin',originSearch)" @input="changeSearchResult('origin',originSearch)" v-model="originSearch" type="text" name="search-compose" id="search-origin" class="search-input"> <div v-if="originSearchList.length > 0" class="searchSingerList search-list"> <div @click.stop="confirmSearch('origin',$event)" class="search-list-item" v-for="origin in originSearchList"> {{origin.uname}} </div> </div> </div> </div> --> <!-- </div> --> </div> </div> <div class="form-item" v-if="contentId == '1' && createId == 2"> <div class="title form-item-origin">本家信息</div> <div class="form-list-content-wrapper"> <div class="input-item-wider input-item-origin" > <div class="input-item-title"> 本家作者:</div> <div class="input-item-origin-content"> <div v-if="originList.length > 0" class="singerList"> <span v-for="origin in originList"> <i class="common-user">{{origin.uname}}</i> <i @click.stop="removeSearchResult('origin', origin)" class="iconfont"></i> </span> <div v-show="originInputStatus" class="iconfont addIcon" @click="addContent('origin')"></div> </div> <!-- <div v-if="originList.length > 0" class="singerList"> <span @click.stop="removeSearchResult('origin',origin)" v-for="origin in originList">{{origin.uname}}</span> </div> --> <div> <input v-show="!originInputStatus" maxlength="18" placeholder="填写原作者(例:いきものがかり)" class="search-input narrow" v-model="originSearch.uname" @blur="addSearchResult('origin',originSearch)" type="text" name="search-origin" id="search-origin"> </div> <!-- <div v-if="originSearchList.length > 0" class="searchSingerList search-list"> <div @click.prevent.stop="confirmSearch('origin',$event,origin)" class="search-list-item" v-for="origin in originSearchList"> {{origin.uname}} </div> </div> --> </div> <!--<div class="warning">例:いきものがかり</div>--> </div> <div class="input-item-wider input-item-originCompose" > <div class="input-item-title">原曲名:</div> <div class="input-item-originCompose-content"> <!-- <div v-if="originComposeList.length > 0" class="singerList"> <span @click.stop="removeSearchResult('originCompose',originCompose)" v-for="originCompose in originComposeList">{{originCompose.uname}}</span> </div> --> <input maxlength="80" placeholder="填写原名,外文不要翻译(例:ブルーバード )" class="search-input" v-model="originCompose" type="text" @input="originComposeChange" name="search-originCompose" id="search-originCompose"> <span class="lengthWarning">{{originComposeCount}}/80</span> <!-- <div v-if="originComposeSearchList.length > 0" class="searchSingerList search-list"> <div @click.prevent.stop="confirmSearch('originCompose',$event,originCompose)" class="search-list-item" v-for="originCompose in originComposeSearchList"> {{originCompose.uname}} </div> </div> --> </div> <!--<div class="warning">填写原名,外文不要翻译(例:ブルーバード )</div>--> </div> <div class="input-item-wider input-item-originURL" > <div class="input-item-title"> 本家地址:</div> <div class="input-item-originURL-content"> <!-- <div v-if="originURLList.length > 0" class="singerList"> <span @click.stop="removeSearchResult('originURL',originURL)" v-for="originURL in originURLList">{{originURL.uname}}</span> </div> --> <input placeholder="例:http://www.xxxx.com/yyyy" class="search-input" v-model="originURL" type="text" name="search-originURL" id="search-originURL"> <!-- <div v-if="originURLSearchList.length > 0" class="searchSingerList search-list"> <div @click.prevent.stop="confirmSearch('originURL',$event,originURL)" class="search-list-item" v-for="originURL in originURLSearchList"> {{originURL.uname}} </div> </div> --> </div> <!--<div class="warning">例:http://www.xxxx.com/yyyy</div>--> </div> </div> </div> <div class="form-item" v-if = "(contentId === 1 && voiceId !== 6) || contentId === 2"> <div class="title form-item-lrc">{{lrcContent[contentId]}}</div> <!-- <form v-if="lrcUploadStatus == null" id="lrc-upload-btn" class="form-item-lrc-upload"> <span class="plus-icon">+</span> <span id="tips" class="tips">上传LRC动态歌词</span> <input @change="changeUploadLrc()" class="lrcupload" id="lrcupload" type="file" name="file"> </form> <div class="lrc-upload-status-wrapper"> <span :class="lrcUploadStatus == 1?'hook-icon':''"></span> <span :class="lrcUploadStatus == 1?'success':''" class="current-status">{{lrcUploadText}}</span> <span class="lrc-file-name">{{lrcFileName}}</span> </div> --> <!-- <div class="lrc-upload-tab" :class="songLyricType == '1' ? 'on' : '' " @click="tabchangge('1')">{{lrcContent[contentId]}}</div>--> <!-- <div class="lrc-upload-tab" :class="songLyricType == '2' ? 'on' : '' " @click="tabchangge('2')">静态文本歌词编辑</div> --> <div class="form-item-textarea-wrapper"> <form id="lrc-upload-btn" class="form-lrc-upload"> <textarea @input="changeSongLyric()" type="text" @blur="placeholderShow" v-model="songLyricString" class="form-item-textarea-input placeholderAfter" v-bind:class="{ warning: songLyricWarningState, show: !placeholderStatus}" ></textarea> <div v-show="placeholderStatus" class="form-item-textarea-input divContent"> <p>示范:</p> <p>[00:04.11]作词:琼瑶 作曲:李正帆</p> <p>[01:39.59]编曲:李正帆</p> <p>[00:11.99]</p> <p>[00:12.80]有一个姑娘</p> <p>[00:14.33]她有一些任性</p> </div> </form> <div class="form-title-tips"><span></span>LRC文件可用记事本打开一键复制粘贴,客户端现已支持静态歌词展示</div> <div v-if="songLyricWarningState" class="title-tips"> <span></span>字数超过{{lrcLength[contentId]}},请重新编辑 </div> <!-- <div class="lrc-upload-status-wrapper"> <span :class="lrcUploadStatus == 1?'hook-icon':''"></span> <span :class="lrcUploadStatus == 1?'success':''" class="current-status">{{lrcUploadText}}</span> </div> <div class="lrc-upload-button" @click="uploadLrcTxt()">{{saveButton[contentId]}}</div>--> </div> </div> <div class="form-item" v-if="contentId === 2"> <div class="title form-item-paper-title">所属合辑</div> <div class="input-item-sound input-item-album"> <div class="input-item-title">合辑:</div> <div class="input-item-album-content"> <div class="input-item-current-album">{{programCurrentAlbum}}</div> <span @click="programToggleAlbums" class="input-item-album-icon"></span> <ul :class="programAlbumStatus?'show':'hide'" class="input-item-album-list"> <li @click="setCurrentProgramAlbums(albums)" v-for="albums in albumsList"> {{albums.title}} </li> </ul> </div> </div> </div> <div class="form-item"> <div class="title form-item-paper-title">关联视频</div> <div class="form-item-paper-input-wrapper"> <input type="text" v-model="avNumber" :placeholder="bvStatus ? '请输入视频标题或视频bvid,按回车键确认后,点击要关联的相关视频,注意:只能关联自己的一个视频' : '请输入视频标题或av号,按回车键确认后,点击要关联的相关视频,注意:只能关联自己的一个视频'" class="form-item-avnum-input" @input.stop="accuracySearch" @keyup.enter.stop="avNumberSearch" @blur="clearSearch"> <ul v-show="avVideoList.length > 0" @scroll="loadMore($event)"> <template v-for="avVideoInfo in avVideoList"> <li @mousedown.left.stop="checkAvVideo(avVideoInfo.avid, avVideoInfo.tid, avVideoCid.cid, avVideoCid.title, avVideoInfo.bvid)" class="active" v-for="(avVideoCid, index) in avVideoInfo.videoCidList" v-if="!avVideoCid.avidCorrelated"> <span :class="index !== 0 ? 'visiableFalse' : ''">{{bvStatus ? avVideoInfo.bvid : avVideoInfo.avid}}</span> {{avVideoCid.title}} </li> <li v-else class="disabled"><span :class="index !== 0 ? 'visiableFalse' : ''">{{bvStatus ? avVideoInfo.bvid : avVideoInfo.avid}}</span> <span class="iconSpan"></span>已关联 {{avVideoCid.title}}</li> </template> </ul> <ul v-if="emptyAvVideoStatus"><li>暂未搜到相关视频</li></ul> <div v-if="illegalAvNumStautus" class="title-tips"> <span></span>必须选择查询av号 </div> </div> </div> <div class="form-item"> <div class="title form-item-tag">添加标签<span class="floatTag">还可添加<span :class = "tagClass">{{tagLen}}</span>个标签</span></div> <div> <div class="tags-wrapper-body"> <span @click.stop="removeSearchResult('tag', tag)" class="tagSpan" v-for="tag in tagList"><div class="line"></div>{{tag.uname}}</span> <input v-show="tagList.length < 10" maxlength="20" @keyup.enter.stop="addSearchResult('tag',tagSearch)" v-model="tagSearch.uname" type="text" class="tagInput" name="tags-checkbox"> <div v-show="tagList.length < 10" class="tagText">按回车键Enter创建标签</div> <!-- <div class="checkbox-list"> <label :for="tag.id" :class="tagRecommendList.indexOf(tag.id) > -1?'active':''" class="checkbox-item" v-for="tag in tagList"> {{tag.name}} <input @click.stop="setCheckboxList(tag.id,$event)" :id="tag.id" v-model="checkboxlist[tag.id]" type="checkbox" name="tags-checkbox"> </label> </div> --> </div> </div> <!--<div v-if="tagsEmptyStatus" class="title-tips"> <span></span>标签至少要选择一个 </div>--> </div> <div class="form-item"> <div class="title form-item-paper-title">简介</div> <div class="form-item-textarea-wrapper introduce"> <textarea :class="musicIntroValidationStatus?'warning':''" v-model="musicIntroContent" @input="changeMusicIntro()" type="text" maxlength="1000" class="form-item-textarea-input" placeholder="填写更全面的相关信息,让更多人了解你的作品吧!"></textarea> <span class="form-item-paper-total">{{musicIntroCount}}/1000</span> </div> <div v-if="musicIntroValidationStatus" class="title-tips"> <span></span>简介最多输入1000个字 </div> <div v-if="musicIntroEmptyStatus" class="title-tips"> <span></span>简介必须要填写 </div> </div> <!-- <div class="form-item"> <div class="title form-item-paper-title">动态推送</div> <div class="form-item-music-detail"> <div class="radio-list"> <label :class="isPush == 0 ?'active':''" class="radioCheck" > <span></span>暂不推送到动态<i v-if="isPush == 0" style="font-size: 14px; color:#c7ccd4">(后续想推送到动态推荐可联系audio@bilibili.com)</i> <input @click.stop="turnPushStatus" :checked="isPush" type="radio" > </label> </div> </div> </div> --> <div class="form-item" v-if="activityList.length"> <div class="title activity-content">参与的活动</div> <ul class="activity-wrap clearfix"> <li class="activity-item clearfix" v-for="(activity, index) in activityList" :key="activity.id"> <span class="check-block" v-show="!activity.ifChoose" @click="chooseActivity(index)"></span> <span class="iconfont check-block check-active" v-show="activity.ifChoose" @click="cancelActivity(index)"></span> <div class="text-wrap"> <a :href="formatUrl(activity.activity_url)" target="_blank"> <div class="activity-title">{{activity.name}}</div> </a> <div class="activity-time">{{activity.etime}}投稿截止</div> </div> </li> </ul> </div> <div class="bgm-plan clearfix"> <span class="check-block" @click="agreePlan" v-show="!ifAgreePlan"></span> <span class="iconfont check-block check-active" @click="agreePlan" v-show="ifAgreePlan"></span> <div class="content-wrap"> <div>我已经阅读并同意 <span class="blue-tip" @click="showBlockRule">哔哩哔哩视频BGM内容上传协议</span> </div> <div class="bgm-tip">在 音频管理-单曲编辑 中可以重新选择</div> </div> <div class="modal-cover" :class="ifShowBgmRule ? 'show-mask' : 'hide-mask'" @click.self="hideBlockRule"> <div class="modal-wrap" :class="ifShowBgmRule ? 'show-block' : 'hide-block'"> <div class="header clearfix"> <div class="title">《哔哩哔哩视频BGM内容上传协议》</div> <span class="close iconfont" @click="hideBlockRule"></span> </div> <div class="modal-content"> <div class="text-content"> <p> 一、您保证,您对您上传的内容(包括但不限于音乐、词、曲、录音制品、文字、图片,具体以您上传的内容为准)拥有全部权利或合法授权,包括但不限于: <p>1.词/曲著作权、表演者权、录音制作者权等著作权及邻接权;</p> <p>2.词曲作者或表演者相关的署名权、肖像权、姓名权等;</p> <p>3.专辑封面的图片著作权、专辑文字介绍的文字作品著作权等;</p> <p>4.其它为确保哔哩哔哩(包含哔哩哔哩和相关服务可能存在的运营关联单位)可按照相关本须知约定的方式使用您上传的内容所必须的一切权利。</p> </p> <p> 二、您点击【提交稿件】并上传内容的行为即视为您授予哔哩哔哩享有上传的内容在全球范围内的、非独家的、免费的、永久且不可撤销的许可,包含使用、传播、复制、改编、翻译、宣传推广、表演及展示的权利。您同时授予哔哩哔哩用户,在使用哔哩哔哩提供的服务的过程中享有对上传的内容在全球范围内的、非独家的、免费的、永久且不可撤销的许可,包含使用、传播、复制、改编、翻译、宣传推广、表演及展示的权利。</p> <p> 三、当您享有的权利或权利状况发生变化时,请您在第一时间通过书面形式通知哔哩哔哩。如因您上传的内容侵犯他人权利,您需要自行承担全部责任。如因此致使哔哩哔哩遭受损失,您应负责消除影响,并赔偿哔哩哔哩全部损失。</p> </div> <div class="btn-group"> <span class="blue-ridios" @click="hideBlockRule">确定</span> </div> </div> </div> </div> </div> </div> <div @click="gotoSubmit()" class="submit-btn">提交稿件</div> <div class="link">联系我们QQ:3491014635</div> </div> </template> <script type="text/javascript"> /* global $ */ import { mapState, mapMutations } from 'vuex'; import { formatDate } from 'config/filter'; import { postSongs, searchAvVideo, searchTitleVideo, uploadLrc, uploadDetailPv, getAllCompilation, getActivityInfo, getUpInfo, } from 'service/getData'; import * as api from 'config/api'; import warning from 'common/Warning'; // jshint unused:true import notice from 'common/Notice'; import {uploadData} from 'config/utility'; import escape from 'lodash/escape'; export default { created() {}, data() { return { // 用户id lrcFileName: '', // 错误文案 warningTest: '', // 稿件类型 crType: 0, // 内容分类的id contentId: 0, // 创作类型的id createId: 0, // 声音类型的id voiceId: 0, // 语言类型的id languageId: 0, // 主题来源的id themeId: 0, // 风格类型的id // 有声节目 vocalShowVoiceId: 0, voiceCopyId: 0, styleCopyId: 0, createCopyId: 0, languageCopyId: 0, themeCopyId: 0, vocalShowVoiceCopyId: 0, voiceEmptyStatus: false, vocalShowVoiceEmptyStatus: false, styleId: 0, styleEmptyStatus: false, // 语言类型 languageEmptyStatus: false, // 主题类型 themeEmptyStatus: false, // 过滤去重的对象 filterObject: {}, filterObjectString: '', // 选择的list列表 selectorList: [], // 有声过滤 vocalShowFilterObject: {}, vocalShowFilterObjectString: '', // 优选选择的风格类型 highSelector: null, // 推荐标签列表-最多三个 checkboxlist: {}, // 歌词显示的taost控制器 // 用户输出的歌词 wordSong: '', // tagRecommendList // tagRecommendList: [], // 歌词选择方式 songLyricType: '1', // 提示内容 songLyricArray: [`示范: [00:04.11]作词:琼瑶 作曲:李正帆 [01:39.59]编曲:李正帆 [00:11.99] [00:12.80]有一个姑娘 [00:14.33]她有一些任性 [00:15.98]她还有一些嚣张 [00:18.26] [00:18.92]有一个姑娘`, '' ], // av号码 avNumber: '', avNumberCopy: '', bvNumberCopy: '', avTitle: '', // tid tid: '', // cid cid: '', // 是否显示删除稿件弹窗的状态 isShowDeleteConfirmModal: false, // 稿件标题的验证状态 titltValidationStatus: false, titleCount: 0, titleContent: '', // 标题是否为空的状态 titltValidationEmptyStatus: false, // 内容类型 contentEmptyStatus: false, // 创作类型 createEmptyStatus: false, // 标签是否为空的状态 tagsEmptyStatus: false, // 稿件类型是否为空的状态 crTypeEmptyStatus: false, // 音乐简介的验证状态 // 音乐简介是否为空的状态 musicIntroEmptyStatus: false, musicIntroValidationStatus: false, musicIntroCount: 0, musicIntroContent: '', // 用户模糊查询的检索列表 // 用户输入的歌手姓名 singerSearch: { uname: '', mid: 0 }, // 添加歌手姓名的容器 singerList: [], singerInputStatus: false, // singerSearchList: [], // 歌词模糊查询列表 lrcSearch: { uname: '', mid: 0 }, lrcList: [], lrcInputStatus: false, // lrcSearchList: [], // 编曲模糊查询相关 arrangeSearch: { uname: '', mid: 0 }, arrangeList: [], arrangeInputStatus: false, // arrangeSearchList: [], // 封面模糊查询相关 coverSearch: { uname: '', mid: 0 }, coverList: [], coverInputStatus: false, // coverSearchList: [], // 歌曲信息初始化数据 // 专辑是否展开的状态 albumStatus: false, // 当前专辑名 currentAlbum: '选择所属合辑', currentAlbumId: 0, compilationId: '', // 所选合辑id // 作曲模糊查询数据 composeSearch: { uname: '', mid: 0 }, // composeSearchList: [], composeList: [], composeInputStatus: false, // 演奏 performanceList: [], // performanceSearchList: [], performanceSearch: { uname: '', mid: 0 }, performanceInputStatus: false, // 乐器 instrucmentList: [], // instrucmentSearchList: [], instrucmentSearch: { uname: '', mid: 0 }, instrucmentInputStatus: false, // 音源 voiceSourceList: [], // voiceSourceSearchList: [], voiceSourceSearch: { uname: '', mid: 0 }, voiceSourceInputStatus: false, // 调音 attuneList: [], // attuneSearchList: [], attuneSearch: { uname: '', mid: 0 }, attuneInputStatus: false, // 后期数据 laterSearch: { uname: '', mid: 0 }, // laterSearchList: [], laterList: [], laterInputStatus: false, // 本家模糊查询数据 originSearch: { uname: '', mid: 0 }, // originSearchList: [], // 原作者 originList: [], originInputStatus: false, // 原曲名 originComposeList: [], // originComposeSearchList: [], originComposeSearch: { uname: '', mid: 0 }, // 本家网址 originURLList: [], // originURLSearchList: [], originURLSearch: { uname: '', mid: 0 }, // 本家,网址,原曲名 origin: '', originURL: '', originCompose: '', originComposeCount: 0, // 歌词字符串 songLyricString: '', // 歌词字符串状态 songLyricWarningState: false, // 歌词上传状态 // songLyricEmptyStatus: true, songInfoList: [ { m_type: 1, members: [{ name: '', mid: this.userInfo.mid }] }, { m_type: 2, members: [{ name: '', mid: this.userInfo.mid }] }, { m_type: 3, members: [{ name: '', mid: this.userInfo.mid }] }, { m_type: 4, members: [{ name: '', mid: this.userInfo.mid }] }, { m_type: 5, members: [{ name: '', mid: this.userInfo.mid }] }, { m_type: 6, members: [{ name: '', mid: this.userInfo.mid }] }, { m_type: 7, members: [{ name: '', mid: this.userInfo.mid }] }, { m_type: 8, members: [{ name: '', mid: this.userInfo.mid }] }, { m_type: 9, members: [{ name: '', mid: this.userInfo.mid }] }, { m_type: 10, members: [{ name: '', mid: this.userInfo.mid }] }, { m_type: 11, members: [{ name: '', mid: this.userInfo.mid }] }, { m_type: 127, members: [{ name: this.userInfo.uname, mid: this.userInfo.mid }] } ], unfold: false, avVideoList: [], themeAlert: ['请填写歌曲原名(可日文)或翻译名,不同版本、演奏可在歌名后添加(XX版)、(coverXX)。正确例:雪糕歌(钢琴版),错误例:【瘦肉】雪糕歌(今天心情好嘿嘿嘿)', '标题不要写up主名字,不接受搬运投稿,请确保为自制内容。对初次投稿者,我们对内容会进行核实,请耐心等候审核结果。'], lrcTitle: ['歌词信息', '歌词信息', '台词'], lrcContent: ['歌词编辑', '歌词编辑', '台词编辑'], saveButton: ['保存歌词', '保存歌词', '保存台词'], lrcLength: ['5000', '5000', '10000'], loadmore: false, emptyAvVideoStatus: false, illegalAvNumStautus: false, page_num: 1, tagList: [], tagInput: '', tagSearch: {uname: ''}, musicTypeHover1: false, musicTypeHover2: false, musicTypeHover3: false, musicTypeHover4: false, musicTypeHover5: false, musicTypeHover6: false, placeholderStatus: true, // isPush: 1, albumsList: [], // 个人合辑列表 programCurrentAlbum: '选择所属合辑', // 有声节目所选合辑 programCompilationId: '', // 有声节目所选合辑id programAlbumStatus: false, // 可选合辑列表是否展开 ifAgreePlan: true, // 是否加入bgm投稿计划 activityList: [], // 活动列表 chooseActivityId: 0, // 选择的活动id ifShowBgmRule: false, // 是否展示bgm投稿规则 // 协同创作-可选歌曲信息 singerSearchBlock: false, performanceSearchBlock: false, lrcSearchBlock: false, composeSearchBlock: false, arrangeSearchBlock: false, attuneSearchBlock: false, // 协同创作-选择up主时不执行blur事件 ifsingerBlur: true, ifperformanceBlur: true, iflrcBlur: true, ifcomposeBlur: true, ifarrangeBlur: true, ifattuneBlur: true, // 是否展示协同创作说明 showCoordinationTip: false, // 搜索up主列表 coordinationUserList: [], coordinationErrorText: '', }; }, computed: { ...mapState( ['uploadPercent', 'uploadText', 'file', 'uploader', 'uploadStatus', 'lrcFile', 'lrcUploadText', 'lrcUploadStatus', 'lrcToastStatus', 'authFiles', 'bizId', 'warningText', 'warningStatus', 'noticeText', 'noticeStatus', 'coverUrl', 'lrcUrl', 'clipImageUrl', 'bvStatus'] ), tagLen: function() { return 10 - this.tagList.length; }, tagClass: function() { return (10 - this.tagList.length) === 0 ? 'warning' : ''; } }, watch: { singerSearch: { handler: function(newVal) { // console.log(newVal); }, deep: true }, lrcSearch: { handler: function(newVal) { // console.log(newVal); }, deep: true }, arrangeSearch: { handler: function(newVal) { // console.log(newVal); }, deep: true }, composeSearch: { handler: function(newVal) { // console.log(newVal); }, deep: true }, laterSearch: { handler: function(newVal) { // console.log(newVal); }, deep: true } }, components: { warning, notice }, props: ['createType', 'voiceType', 'styleType', 'userInfo', 'languageType', 'themeType', 'vocalShowType'], methods: { ...mapMutations(['UPLOAD_COMPLETE', 'SET_LRC_FILE', 'CHANGE_LRC_UPLOAD_TEXT', 'LRC_UPLOAD_COMPLETE', 'SET_LRC_TOAST_STATUS', 'SET_AUTH_FILES', 'SET_WARNING', 'SET_LRC_URL', 'SET_NOTICE']), setChanel(id, type, name) { this.contentEmptyStatus = false; this.contentId = id; var len = this.songLyricString.length; if (this.contentId === 2) { this.songLyricWarningState = len > 10000; } else { this.songLyricWarningState = len > 5000; } // id === 1 ? this.filterSelector(type, name) : this.vocalShowFilterSelector(type, name); }, addSearchResultPrepare(type, result) { if (this['if' + type + 'Blur']) { this.addSearchResult(type, result, undefined, 3, true); } this['if' + type + 'Blur'] = true; }, addSearchResult(type, result, index, uploadtype, iscooper) { if (result.uname && result.uname.trim()) { result.uname = escape(result.uname); // 如果列表当中已经有了 var unameList = this[type + 'List'].map((val) => { return val.uname; }); if (unameList.indexOf(result.uname.trim()) > -1 && !index && index !== 0) { this.SET_WARNING('已提交'); return false; } else if (index >= 0 && unameList.indexOf(this.coordinationUserList[index].name.trim()) > -1) { this.SET_WARNING('已提交'); this['if' + type + 'Blur'] = false; this[type + 'SearchBlock'] = false; return false; } else { if (this[type + 'List'].length < 10) { if (index >= 0) { this[type + 'List'].push({uname: this.coordinationUserList[index].name.trim(), mid: this.coordinationUserList[index].mid}); this['if' + type + 'Blur'] = false; } else { this[type + 'List'].push({uname: result.uname.trim(), mid: 0}); } this[type + 'Search'] = {}; this[type + 'InputStatus'] = true; this[type + 'SearchBlock'] = false; switch (uploadtype) { case 1: uploadData('contribute_textbox_click_refuse', { input_id: type, input_type: 2, from: 1, search_self: '', search_type: '', search_num: '' }); break; case 2: uploadData('contribute_textbox_click_upper', { input_id: type, input_type: 2, from: 1, search_self: '', search_type: '', search_num: '' }); break; case 4: break; default: uploadData('contribute_textbox_click_other', { input_id: type, input_type: iscooper ? 2 : 1, from: 1, search_self: '', search_type: '', search_num: '' }); } } else { this.SET_WARNING('最多支持添加10个'); return false; } } } else { this[type + 'SearchBlock'] = false; } }, // focusInput(type) { // this[type + 'SearchList'] = []; // }, toggleAlbums() { this.albumStatus = !this.albumStatus; }, programToggleAlbums() { this.programAlbumStatus = !this.programAlbumStatus; }, removeSearchResult(type, singer, iscooper) { if (singer.mid > 0) { uploadData('contribute_textbox_delete_upper', { input_id: type, input_type: 2, from: 1, search_self: '', search_type: '', search_num: '' }); } else { uploadData('contribute_textbox_delete_text', { input_id: type, input_type: this.createId === 1 && iscooper ? 2 : 1, from: 1, search_self: '', search_type: '', search_num: '' }); } this[type + 'List'] = this[type + 'List'].filter((val) => { return val.uname !== singer.uname; }); this[type + 'List'].length === 0 ? (this[type + 'InputStatus'] ? this[type + 'InputStatus'] = false : '') : ''; }, setCurrentAlbums(albums) { this.currentAlbum = albums.title; this.currentAlbumId = albums.id; this.compilationId = albums.compilation_id; this.albumStatus = false; }, setCurrentProgramAlbums(albums) { this.programCurrentAlbum = albums.title; this.programCompilationId = albums.compilation_id; this.programAlbumStatus = false; }, initUploader() { this.crTypeEmptyStatus = false; this.SET_AUTH_FILES([]); }, // changeUploadLrc() { // var self = this; // var lrcObject = $('#lrcupload')[0]; // var lrcElemForm = $('#lrc-upload-btn')[0]; // var fileName = lrcObject.files[0].name; // var fileExtend = fileName.match(/\.[a-z,0-9]{0,}/)[0]; // if (fileExtend.toUpperCase() === '.LRC') { // var lrcFormData = new FormData(lrcElemForm); // $.ajax({ // type: 'POST', // contentType: false, // processData: false, // data: lrcFormData, // url: api.uploadFile, // cache: false, // success: function(res) { // if (res.code === 0) { // self.lrcFileName = fileName; // self.CHANGE_LRC_UPLOAD_TEXT('上传完成'); // self.LRC_UPLOAD_COMPLETE(1); // self.SET_LRC_URL(res.data); // } // }, // error: function(XMLHttpRequest, textStatus, errorThrown) { // alert('上传失败,请检查网络后重试'); // } // }); // } else { // this.SET_WARNING('请上传LRC格式的文件'); // }; // }, uploadLrcTxt() { var lrcData, data, self; self = this; lrcData = this.songLyricString; if (lrcData.length === 0) { this.SET_WARNING('请输入歌词内容'); return; } if (lrcData.length > 10000) { this.SET_WARNING('歌词长度不能大于10000'); return; } data = {song_id: this.bizId, lrc: lrcData}; $.ajax({ type: 'POST', data: data, url: api.uploadLrc, success: function(res) { if (res.code === 0) { // self.songLyricEmptyStatus = false; self.CHANGE_LRC_UPLOAD_TEXT('上传完成'); self.LRC_UPLOAD_COMPLETE(1); self.SET_LRC_URL(res.data); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { // self.songLyricEmptyStatus = true; alert('上传失败,请检查网络后重试'); } }); }, tabchangge (type) { this.songLyricType = type; }, // changeSearchResult(type, keyword, ev) { // if (keyword) { // getUserByName({ // uname: keyword // }).then((res) => { // if (res.code === 0) { // this[type + 'SearchList'] = res.data || []; // } // }); // } // }, // tagDataProcess(tagsList) { // var newTagsList = tagsList.map((tagItem) => { // return { // tag_id: parseInt(tagItem) // }; // }); // return newTagsList; // }, // confirmSearch(type, ev, item) { // document.getElementById(`search-${type}`).focus(); // this[type + 'Search'] = Object.assign({}, item); // // 清空列表 // this[type + 'SearchList'] = []; // }, listProcess(list) { var newList = list.map((item) => { return { name: item.uname, mid: item.mid }; }); return newList; }, songInfoProcess(songInfoList) { var newList = songInfoList.map((item) => { switch (item.m_type) { // 歌手 case 1: item.members = this.listProcess(this.singerList); break; case 2: item.members = this.listProcess(this.lrcList); break; case 3: item.members = this.listProcess(this.composeList); break; case 4: item.members = this.listProcess(this.arrangeList); break; case 5: item.members = this.listProcess(this.laterList); break; case 6: item.members = this.listProcess(this.originList); break; case 7: item.members = this.listProcess(this.coverList); break; case 8: item.members = this.listProcess(this.voiceSourceList); break; case 9: item.members = this.listProcess(this.attuneList); break; case 10: item.members = this.listProcess(this.performanceList); break; case 11: item.members = this.listProcess(this.instrucmentList); break; case 127: item.members = [{ name: this.userInfo.uname, mid: this.userInfo.mid }]; break; } return item; }); return newList; }, // 改变推送状态 // turnPushStatus() { // this.isPush = !this.isPush; // }, gotoSubmit() { var mid = this.userInfo.mid; // 1原创2版权 // var tagsList = this.tagDataProcess(this.tagRecommendList); if (this.contentId === 1 && this.createId === 2) { // this.originList[0] = {mid: 0, uname: this.origin}; } else { this.originList = []; } if (!this.avNumber) { this.avNumberCopy = ''; this.bvNumberCopy = ''; this.tid = ''; this.cid = ''; } if (!this.clipImageUrl) { this.SET_WARNING('封面必须要上传!'); return false; } if (this.uploadStatus !== 1) { this.SET_WARNING('须等待音频文件上传完成'); return false; } if (!this.titleContent.trim()) { this.titltValidationEmptyStatus = true; return false; } if (!this.contentId) { this.contentEmptyStatus = true; return false; } var songInfoList = this.contentId === 1 ? this.songInfoProcess(this.songInfoList) : [{m_type: 127, members: [{ name: this.userInfo.uname, mid: this.userInfo.mid }]}]; // if (!this.crType) { // this.crTypeEmptyStatus = true; // } if (this.contentId === 1 && !this.voiceId) { this.voiceEmptyStatus = true; return false; } if (this.contentId === 1 && !this.createId) { this.createEmptyStatus = true; return false; } if (this.contentId === 1 && this.voiceId !== 6 && !this.languageId) { this.languageEmptyStatus = true; return false; } // if (this.contentId === 1 && !this.themeId) { // this.themeEmptyStatus = true; // return false; // } // if (this.contentId === 1 && this.voiceId !== 5 && !this.styleId) { // this.styleEmptyStatus = true; // return false; // } if (this.contentId === 1 && this.voiceId === 3 && songInfoList[0].members.length === 0) { this.SET_WARNING('歌手信息必填'); return false; } if (this.contentId === 1 && this.voiceId === 4 && songInfoList[7].members.length === 0) { this.SET_WARNING(' 音源信息必填'); return false; } if (this.contentId === 1 && this.voiceId === 4 && songInfoList[8].members.length === 0) { this.SET_WARNING('调音信息必填'); return false; } if (this.contentId === 1 && this.voiceId === 6 && songInfoList[9].members.length === 0) { this.SET_WARNING('演奏信息必填'); return false; } // if (this.contentId === 1 && this.createId === 2 && this.origin.length === 0) { // this.SET_WARNING('本家作者必填'); // return false; // } // if (this.contentId === 1 && this.createId === 2 && this.originCompose.length === 0) { // this.SET_WARNING('原曲名信息必填'); // return false; // } if (this.contentId === 1 && this.createId === 2 && this.originCompose.length > 80) { this.SET_WARNING('原曲名长度超过80'); return false; } if (this.avNumber) { if (this.bvStatus && this.avNumber !== (this.bvNumberCopy + ' ' + this.avTitle)) { this.SET_WARNING('bv号未绑定成功'); return false; } if (!this.bvStatus && this.avNumber && this.avNumber !== (this.avNumberCopy + ' ' + this.avTitle)) { this.SET_WARNING('av号未绑定成功'); return false; } } if (this.contentId === 2 && !this.vocalShowVoiceId) { this.vocalShowVoiceEmptyStatus = true; return false; } // if (this.songLyricEmptyStatus) { // this.SET_WARNING('歌词还没有上传'); // return false; // } if (!this.musicIntroContent.trim()) { this.musicIntroEmptyStatus = true; } var tagsName = []; tagsName = this.tagList.map((item) => { return { tagName: item.uname }; }); if (tagsName.length < 1) { this.SET_WARNING('请至少填写一个标签'); return false; } var lrcData, lrcPostData; lrcData = this.songLyricString; if ((this.contentId === 1 && this.voiceId !== 6) && lrcData.length > 5000) { this.SET_WARNING('歌词长度不能大于5000'); return; } if (this.contentId === 2 && lrcData.length > 10000) { this.SET_WARNING('台词长度不能大于10000'); return; } lrcPostData = {song_id: this.bizId, lrc: lrcData.trim()}; let src = this.$route.query.src ? 1 : 0; if (!this.contentEmptyStatus && !this.titltValidationEmptyStatus && !this.musicIntroEmptyStatus) { let data; ((this.contentId === 1 && this.voiceId !== 6) || this.contentId === 2) && lrcData.trim().length > 0 ? uploadLrc(lrcPostData).then(res => { if (res.code === 0) { this.SET_LRC_URL(res.data); } else { alert('歌词上传失败'); } this.contentId === 1 ? data = { lyric_url: this.lrcUrl, cover_url: this.clipImageUrl, song_id: this.bizId, album_id: this.currentAlbumId, mid: mid, cr_type: this.contentId, creation_type_id: this.createId, music_type_id: this.voiceId, style_type_id: this.styleId, theme_type_id: this.themeId, language_type_id: this.languageId, origin_title: this.originCompose.trim(), origin_url: this.originURL.trim(), // 选择主标签 // song_tags: tagsList, avid: this.avNumberCopy, tid: this.tid, cid: this.cid, title: this.titleContent.trim(), intro: this.musicIntroContent.trim(), member_with_type: songInfoList, song_tags: tagsName, create_time: Date.now() / 1000, activity_id: this.chooseActivityId, is_bgm: this.ifAgreePlan ? 1 : 0, // 默认0 是未勾选 1是已勾选 source: src, // is_auto_pd: Number(this.isPush) } : data = { lyric_url: this.lrcUrl, cover_url: this.clipImageUrl, song_id: this.bizId, album_id: this.currentAlbumId, mid: mid, cr_type: this.contentId, music_type_id: this.vocalShowVoiceId, avid: this.avNumberCopy, tid: this.tid, cid: this.cid, title: this.titleContent.trim(), intro: this.musicIntroContent.trim(), member_with_type: songInfoList, song_tags: tagsName, create_time: Date.now() / 1000, // is_auto_pd: Number(this.isPush) activity_id: this.chooseActivityId, is_bgm: this.ifAgreePlan ? 1 : 0, // 默认0 是未勾选 1是已勾选 source: src, }; postSongs(data).then(res => { if (res.code === 0) { if (this.contentId === 1) { this.uploadSubmitData(); } this.$router.push({ path: '/audio/submit/result' + location.search }); } else { this.SET_WARNING(res.msg); }; }).catch(() => { // console.log(err); alert('上传失败'); }); }).catch(() => { alert('歌词上传失败'); }) : (this.contentId === 1 ? data = { cover_url: this.clipImageUrl, song_id: this.bizId, album_id: this.currentAlbumId, compilation_id: this.compilationId, mid: mid, cr_type: this.contentId, creation_type_id: this.createId, music_type_id: this.voiceId, style_type_id: this.styleId, theme_type_id: this.themeId, language_type_id: this.languageId, origin_title: this.originCompose.trim(), origin_url: this.originURL.trim(), // 选择主标签 // song_tags: tagsList, avid: this.avNumberCopy, tid: this.tid, cid: this.cid, title: this.titleContent.trim(), intro: this.musicIntroContent.trim(), member_with_type: songInfoList, song_tags: tagsName, create_time: Date.now() / 1000, activity_id: this.chooseActivityId, is_bgm: this.ifAgreePlan ? 1 : 0, // 默认0 是未勾选 1是已勾选 source: src, // is_auto_pd: Number(this.isPush) } : data = { cover_url: this.clipImageUrl, song_id: this.bizId, album_id: this.currentAlbumId, compilation_id: this.programCompilationId, mid: mid, cr_type: this.contentId, music_type_id: this.vocalShowVoiceId, avid: this.avNumberCopy, tid: this.tid, cid: this.cid, title: this.titleContent.trim(), intro: this.musicIntroContent.trim(), member_with_type: songInfoList, song_tags: tagsName, create_time: Date.now() / 1000, activity_id: this.chooseActivityId, is_bgm: this.ifAgreePlan ? 1 : 0, // 默认0 是未勾选 1是已勾选 source: src, // is_auto_pd: Number(this.isPush) }, postSongs(data).then(res => { if (res.code === 0) { if (this.contentId === 1) { this.uploadSubmitData(); } this.$router.push({ path: '/audio/submit/result' + location.search }); } else { this.SET_WARNING(res.msg); }; }).catch(() => { // console.log(err); alert('上传失败'); })); } }, uploadSubmitData() { var textCount = 0; var linkTextCount = 0; var inputCount = 0; var linkInputCount = 0; this.songInfoList.forEach(item => { if (item.m_type !== 127) { textCount += item.members.length; } }); this.songInfoList.forEach(item => { if (item.m_type !== 127) { linkTextCount += this.getLinkUpCount(item.members); } }); this.songInfoList.forEach(item => { if (item.m_type !== 127 && item.members.length) { inputCount += 1; } }); this.songInfoList.forEach(item => { if (item.m_type !== 127 && this.getLinkInputCount(item.members)) { linkInputCount += 1; } }); var upload = { sid: this.bizId, from: 1, up_id: this.userInfo.mid, input_num: inputCount, input_up_num: linkInputCount, text_num: textCount, up_num: linkTextCount, }; uploadData('contribute_button_click_submit', upload); }, getLinkUpCount(members) { var count = 0; members.forEach(item => { if (item.mid > 0) { count++; } }); return count; }, getLinkInputCount(members) { return members.some(item => { return item.mid > 0; }); }, setVoiceStatus(id, type, name) { // this.voiceId = id; if (this.voiceId === this.voiceCopyId) { this.voiceId = 0; this.voiceCopyId = 0; this.filterSelector(type, ''); } else { this.voiceCopyId = this.voiceId; this.filterSelector(type, name); this.voiceEmptyStatus = false; if (id === 5) { delete this.filterObject[5]; this.styleId = 0; } if (id === 6) { delete this.filterObject[3]; this.languageId = 0; } } }, setCreateStatus(status, type, name) { // this.createId = status; this.createCopyId === this.createId ? (this.createCopyId = 0, this.createId = 0, this.filterSelector(type, '')) : (this.createCopyId = this.createId, this.createEmptyStatus = false, this.filterSelector(type, name)); // 如果创作类型非原创 则去掉协同创作up主关联(mid赋值为0) if (status !== 1) { if (this.singerList.length) { this.singerList.map(item => { if (item.mid && item.mid > 0) { item.mid = 0; } }); } if (this.performanceList.length) { this.performanceList.map(item => { if (item.mid && item.mid > 0) { item.mid = 0; } }); } if (this.lrcList.length) { this.lrcList.map(item => { if (item.mid && item.mid > 0) { item.mid = 0; } }); } if (this.composeList.length) { this.composeList.map(item => { if (item.mid && item.mid > 0) { item.mid = 0; } }); } if (this.arrangeList.length) { this.arrangeList.map(item => { if (item.mid && item.mid > 0) { item.mid = 0; } }); } if (this.attuneList.length) { this.attuneList.map(item => { if (item.mid && item.mid > 0) { item.mid = 0; } }); } } }, setVocalShowVoiceStatus(id, type, name) { // this.vocalShowVoiceId = id; this.vocalShowVoiceCopyId === this.vocalShowVoiceId ? (this.vocalShowVoiceId = 0, this.vocalShowVoiceCopyId = 0, this.vocalShowFilterSelector(type, '')) : (this.vocalShowVoiceCopyId = this.vocalShowVoiceId, this.vocalShowFilterSelector(type, name), this.vocalShowVoiceEmptyStatus = false); }, setStyleStatus(id, type, name) { // this.styleId = id; this.styleCopyId === this.styleId ? (this.styleCopyId = 0, this.styleId = 0, this.filterSelector(type, '')) : (this.styleCopyId = this.styleId, this.filterSelector(type, name), this.styleEmptyStatus = false); }, setLanguageStatus(id, type, name) { // this.languageId = id; this.languageCopyId === this.languageId ? (this.languageCopyId = 0, this.languageId = 0, this.filterSelector(type, '')) : (this.languageCopyId = this.languageId, this.filterSelector(type, name), this.languageEmptyStatus = false); }, setThemeStatus(id, type, name) { // this.themeId = id; this.themeCopyId === this.themeId ? (this.themeCopyId = 0, this.themeId = 0, this.filterSelector(type, '')) : (this.themeCopyId = this.themeId, this.filterSelector(type, name), this.themeEmptyStatus = false); }, setHighSelector(key) { this.highSelector = key; }, confirmDelete() { location.reload(); }, showConfirmDeleteModal() { this.isShowDeleteConfirmModal = true; }, hideConfirmDeleteModal() { this.isShowDeleteConfirmModal = false; }, // setCheckboxList(checkboxId) { // this.tagsEmptyStatus = false; // if (this.tagRecommendList.indexOf(checkboxId) > -1) { // } else { // if (this.tagRecommendList.length < 3) {} else { // this.tagRecommendList.splice(0, 1); // }; // this.tagRecommendList.push(checkboxId); // } // }, filterSelector(type, name) { this.filterObject[type] = name; var selectList = []; for (let key in this.filterObject) { this.filterObject[key] ? selectList.push(this.filterObject[key]) : ''; } this.filterObjectString = selectList.join('→'); // this.selectorList.push(name); }, vocalShowFilterSelector(type, name) { this.vocalShowFilterObject[type] = name; var selectList = []; for (let key in this.vocalShowFilterObject) { this.vocalShowFilterObject[key] ? selectList.push(this.vocalShowFilterObject[key]) : ''; } this.vocalShowFilterObjectString = selectList.join('→'); }, changeMusicIntro() { this.musicIntroCount = this.musicIntroContent.length; this.musicIntroEmptyStatus = false; if (this.musicIntroCount >= 1001) { this.musicIntroValidationStatus = true; } else { this.musicIntroValidationStatus = false; } }, changeMusicDynamic() { this.dynamicCount = this.dynamicContent.length; if (this.dynamicCount >= 1001) { this.dynamicValidationStatus = true; } else { this.dynamicValidationStatus = false; } }, closeLrcToast() { this.SET_WARNING(false); }, closeNoticeToast() { this.SET_NOTICE(false); }, changeTitle() { this.titleCount = (this.titleContent.length); if (this.titleContent.trim()) { this.titltValidationEmptyStatus = false; } if (this.titleCount > 80) { this.titltValidationStatus = true; } else { this.titltValidationStatus = false; } }, originComposeChange() { this.originComposeCount = (this.originCompose.length); if (this.originComposeCount > 80) { this.originCompose = this.originCompose.slice(0, 80); } }, PauseUploadFile(file) { // 暂停操作,暂停当前文件夹的上传 window.uploader.pause(this.file.id); this.UPLOAD_COMPLETE(3); }, ContinueUploadFile(file) { window.uploader.resume(this.file.id); this.UPLOAD_COMPLETE(2); }, changeSongLyric() { var len = this.songLyricString.length; if (this.contentId === 2) { this.songLyricWarningState = len > 10000; } else { this.songLyricWarningState = len > 5000; } this.placeholderStatus = false; }, accuracySearch() { if (this.avNumber) { this.emptyAvVideoStatus = false; searchTitleVideo({title: this.avNumber, pagesize: 20}).then(res => { if (res.code === 0) { this.page_num = 2; res.data && res.data.length === 20 ? this.loadmore = true : this.loadmore = false; res.data ? this.avVideoList = res.data : (this.avVideoList = [], this.emptyAvVideoStatus = true); } }).catch(() => { console.error; }); } }, avNumberSearch() { this.emptyAvVideoStatus = false; if ((/^a?v?\d+$/i).test((this.avNumber).trim()) || (this.bvStatus && (/^((b|B)(v|V))?1?[1-9a-km-zA-HJ-NP-Z]{9}$/).test((this.avNumber).trim()))) { let changeNumber = (this.avNumber).trim().replace((/^bv1/i), 'BV1'); if (!/^\d+$/.test(changeNumber)) { if (/^1[1-9a-km-zA-HJ-NP-Z]{9}$/.test(changeNumber)) { changeNumber = 'BV' + changeNumber; } if (/^[1-9a-km-zA-HJ-NP-Z]{9}$/.test(changeNumber)) { changeNumber = 'BV1' + changeNumber; } } searchAvVideo({avid: changeNumber}).then(res => { if (res.code === 0) { res.data ? this.avVideoList = [res.data] : (this.avVideoList = [], this.emptyAvVideoStatus = true); } }).catch(() => { console.error; }); } }, checkAvVideo(avid, tid, cid, avTitle, bvid) { this.avNumber = this.bvStatus ? bvid + ' ' + avTitle : avid + ' ' + avTitle; this.bvNumberCopy = bvid; this.avNumberCopy = avid; this.avTitle = avTitle; this.tid = tid; this.cid = cid; }, clearSearch() { this.avVideoList = []; this.emptyAvVideoStatus = false; this.loadmore = false; }, loadMore(ev) { var ul = ev.currentTarget; if (this.loadmore && ul.clientHeight + ul.scrollTop >= ul.scrollHeight) { this.loadmore = false; searchTitleVideo({title: this.avNumber, pagenum: this.page_num, pagesize: 20}).then(res => { if (res.code === 0) { this.page_num++; res.data.length === 20 ? this.loadmore = true : this.loadmore = false; res.data ? this.avVideoList = this.avVideoList.concat(res.data) : ''; } }).catch(() => { console.error; }); } }, styleClass() { this.unfold = !this.unfold; }, enterHover(id) { this['musicTypeHover' + id] = true; }, leaveHover(id) { this['musicTypeHover' + id] = false; }, addContent(type) { this[type + 'InputStatus'] = false; }, placeholderShow() { this.songLyricString.length > 0 ? this.placeholderStatus = false : this.placeholderStatus = true; }, // 是否加入视频BGM投稿计划 agreePlan() { this.ifAgreePlan = !this.ifAgreePlan; }, // 获取活动列表 getActivityList() { getActivityInfo().then(res => { if (res.code === 0) { this.activityList = res.data.map(item => { return Object.assign(item, {ifChoose: false}); }); } }); }, chooseActivity(index) { this.activityList.map(item => { item.ifChoose = false; }); this.activityList[index].ifChoose = true; this.chooseActivityId = this.activityList[index].id; }, cancelActivity(index) { this.activityList[index].ifChoose = false; this.chooseActivityId = 0; }, showBlockRule() { this.ifShowBgmRule = true; }, hideBlockRule() { this.ifShowBgmRule = false; }, formatUrl(url) { if (url.substring(0, 4) === 'http') { url = url.replace(/^http:/, ''); return url; } else { url = '//' + url; return url; } }, // 展示协同创作up主搜索框 showSearchBlock(type) { this[type + 'SearchBlock'] = true; this.coordinationUserList = []; getUpInfo(this[type + 'Search'].uname).then(res => { if (res.code === 0) { this.coordinationUserList = res.data; if (!res.data.length) { this.coordinationErrorText = '没找到相关UP主'; } uploadData('contribute_textbox_search', { input_id: type, input_type: 2, from: 1, search_self: 2, search_type: this.getSearchType(this[type + 'Search'].uname), search_num: res.data.length }); } else if (res.code === 72020017) { this.coordinationErrorText = res.msg; this.coordinationUserList = []; uploadData('contribute_textbox_search', { input_id: type, input_type: 2, from: 1, search_self: 1, search_type: this.getSearchType(this[type + 'Search'].uname), search_num: 0 }); } }); }, getSearchType(name) { if ((/^uid\d+$/i).test(name)) { return 1; } else if ((/^\d+$/i).test(name)) { return 2; } else { return 3; } } }, mounted() { if (!this.file.name) { this.$router.push('/audio/submit' + location.search); } else { uploadDetailPv().then((res) => { if (res.code !== 0) { uploadDetailPv(); } }); this.titleContent = (this.file.name).replace(/\.(mp3|wma|flac|wav)$/i, ''); this.changeTitle(); this.SET_NOTICE('音频投稿暂不支持搬运内容'); } // 获取合辑列表 getAllCompilation().then((res) => { if (res.code === 0) { this.albumsList = (res.data).concat([{compilation_id: '', title: '不加入合辑'}]); } }); // 获取可选活动列表 this.getActivityList(); }, filters: { formatDate } }; </script> <style lang="less" scoped> @import '~color'; .form-list-wrapper { flex: 1; margin-left: 30px; font-size: 12px; .submit-btn { font-size: 14px; border-radius: 4px; text-align: center; line-height: 42px; margin: 28px 0 28px 245px; width: 170px; height: 42px; background-color: @dark-blue; color: @white; cursor: default; } .submit-btn:hover { background-color: #00b5e5; } .auth-uploader-list { .auth-file-item { margin-top: 10px; display: flex; align-items: center; } .succes-text { color: green; } .hook-icon { width: 18px; height: 18px; background-repeat: no-repeat; background-image: url(~images/icons.png); background-position: -136px -299px; display: inline-block; } } .auth-uploader-content { text-align: center; line-height: 80px; margin-top: 15px; width: 330px; height: 80px; background-repeat: no-repeat; background-size: 100% 100%; background-image: url(~images/new.png); .auth-uploader { display: flex; align-items: center; } .plus-icon { margin: 0 10px; display: inline-block; width: 20px; height: 20px; background-repeat: no-repeat; background-image: url(~images/icons.png); background-position: -197px -412px; } .tips { font-size: 12px; color: #6d757a; } } .form-list-content-wrapper { margin-top: 20px; display: flex; flex-wrap: wrap; .left-wrapper, .right-wrapper { flex: 1; } .addIcon { width: 18px; height: 18px; color: @gray-text-color; border: 1px solid @gray-text-color; margin-bottom: 10px; display: inline-block; line-height: 18px; text-align: center; margin-top: 4px; font-size: 12px; // background-repeat: no-repeat; // background-image: url(~images/icons.png); // background-position: -196px -410px; border-radius: 50%; cursor: pointer; } .input-item-wider { margin-bottom: 15px; display: flex; position: relative; width: 100%; .input-item-title { line-height: 28px; font-size: 14px; min-width: 90px; white-space: nowrap; } .search-input { margin-left: 10px; border: 1px solid #ccd0d7; padding: 0 14px; border-radius: 4px; width: 598px; height: 26px; font-size: 12px; &.narrow { width: 210px; } } .search-list { position: absolute; margin-top: 10px; width: 200px; background: #fff; z-index: 999; border: 1px solid #ccd0d7; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); .search-list-item { height: 32px; line-height: 32px; padding: 0 20px; &:hover { color: @dark-blue; background: #e5e9ef; } } } .warning{ color: #919191; font-size: 14px; margin-left: 20px; } .input-item-originCompose-content{ position: relative; .search-input{ padding-right: 38px; width: 574px; } .lengthWarning{ color: @gray-text-color; position: absolute; right: 6px; bottom: 6px; } } } .input-item { margin-top: 15px; display: flex; position: relative; width: 50%; .input-item-title { line-height: 28px; font-size: 14px; &.narrow { min-width: 55px; } &.width { min-width: 100px; } } .input-item-album-content { position: relative; margin-left: 15px; border: 1px solid #ccd0d7; padding: 0 28px 0 14px; border-radius: 4px; width: 158px; height: 26px; line-height: 26px; .input-item-current-album { width: 158px; height: 26px; line-height: 26px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .input-item-album-icon { position: absolute; right: 0; top: 0; border-bottom-right-radius: 4px; border-top-right-radius: 4px; width: 28px; height: 26px; background: #eee; background-image: url(~images/icons.png); background-repeat: no-repeat; background-position: -130px -238px; cursor: pointer; } .input-item-album-list { position: absolute; left: 0; width: 100%; top: 38px; background: #fff; z-index: 999; border: 1px solid #ccd0d7; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); transition: all .1s; &.hide { transform: translate(0, -100%) scale(0); } &.show { transform: translate(0, 0) scale(1); } li { height: 32px; line-height: 32px; padding: 0 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:hover { color: @dark-blue; background: #e5e9ef; } } } } .search-input { margin-left: 10px; border: 1px solid #ccd0d7; padding: 0 14px; border-radius: 4px; width: 172px; height: 26px; font-size: 12px; } .search-list { position: absolute; margin-top: 10px; width: 200px; background: #fff; z-index: 999; border: 1px solid #ccd0d7; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); .search-list-item { height: 32px; line-height: 32px; padding: 0 20px; &:hover { color: @dark-blue; background: #e5e9ef; } } } } .coordination-type-wrap { position: relative; .coordination-wrap { width: 202px; position: absolute; top: 32px; left: 10px; background: #FFFFFF; box-shadow: 0 2px 6px 0 rgba(0,0,0,0.14); border-radius: 4px; padding-bottom: 8px; z-index: 99; .no-coordination { font-size: 14px; color: @black; line-height: 50px; margin: 0 15px; cursor: pointer; border-bottom: 1px solid @unable-border-color; } .no-coordination-click:hover { color: @dark-blue; } .find-no-coordination { color: @gray-text-color; border-bottom: none; } .coordination-list{ .coordination-item { padding: 0 15px; height: 48px; cursor: pointer; .coordination-head { border-radius: 50%; background: #d8d8d8; float: left; margin: 10px 8px 10px 0; } .coordination-info { float: left; margin: 9px 0 7px; div { width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .coordination-name { margin-bottom: 2px; color: @black; } .coordination-id { color: @dark-blue; } } &:hover { background-color: @unable-bg-color; } } } } } } .input-item-content-wrapper { float: left; } .singerList { margin-left: 10px; display:inline-flex; flex-wrap: wrap; align-items: center; span { cursor: pointer; display: inline-block; height: 26px; line-height: 26px; background: @unable-bg-color; color: @dark-black; padding: 0 26px 0 0; border-radius: 4px; margin: 0 10px 10px 0; position: relative; border: 1px solid @border-color; .iconfont { font-size: 12px; margin-left: 7px; color: @gray-text-color; position: absolute; right: 10px; top: 0; &:hover { color: @dark-blue; } } .coor-user { width: 26px; display: inline-block; background: @dark-blue; border-radius: 3px 0 0 3px; color: @white; text-align: center; } .common-user { margin-left: 12px; } .user-left { margin-left: 6px; } } // span:hover>.line{ // position: absolute; // width: 90%; // left: 50%; // top: 50%; // height: 1px; // background-color: #fb7299; // transform: translate(-50%, -50%); // } } .radio-item { &.active { background: @dark-blue !important; border-color: @dark-blue !important; color: @white; } &.disabled{ background: @border-color !important; border-color: @border-color !important; color: @border-color; } } .current-selector { align-items: center; margin-top: 20px; font-size: 14px; display: flex; .selector-list { flex: 1; position: relative; margin-left: 10px; .hight-selector-tips { font-size: 12px; color: @gray-text-color; margin-top: 10px; position: absolute; } .radio-item { display: inline-block; margin-right: 10px; background: #f4f5f7; border: 1px solid #ccd0d7; border-radius: 4px; padding: 5px 20px; position: relative; input { position: absolute; opacity: 0; } } } } .lrc-upload-status-wrapper { display: flex; align-items: center; margin: 20px 0; .hook-icon { width: 18px; height: 18px; background-repeat: no-repeat; background-image: url(~images/icons.png); background-position: -136px -299px; display: inline-block; } .current-status { margin-right: 10px; &.success { color: green; } } } .form-item-material-list { margin-top: 20px; } .title-tips { display: flex; align-items: center; margin-top: 10px; color: red; span { margin-right: 5px; display: inline-block; width: 18px; height: 18px; background-image: url(~images/icons.png); background-repeat: no-repeat; background-position: -135px -652px; } } .form-item-textarea-wrapper { margin-top: 20px; position: relative; .form-item-textarea-input { &.warning { border-color: red; } width: 100%; outline: none; border-radius: 4px; padding: 15px 10px; box-sizing: border-box; border: 1px solid #ccd0d7; resize: none; height: 120px; font-size: 12px; overflow: auto; &.divContent { color: #99a2aa; overflow: hidden; } &.show { opacity: 1; } } .form-item-textarea-input:focus { border-color: #00a1d6; } .form-item-paper-total { position: absolute; right: 10px; bottom: 10px; color: @gray-text-color; z-index: 9; } } .form-item-textarea-wrapper.introduce { height: 120px; } .form-item-textarea-wrapper.introduce:after { position: absolute; content:''; display: block; width: 702px; height: 15px; background: #FFF; z-index: 1; bottom: 1px; left: 10px; } /*.form-item-textarea-wrapper.introduce:before { ** position: absolute; ** content:''; ** display: block; ** width: 702px; ** height: 15px; ** background: #FFF; ** z-index: 1; ** top: 2px; ** left: 10px; **} */ .form-list { .form-item { &#lrc-upload-btn { cursor: pointer; } .tags-wrapper-body { margin-top: 20px; .tagSpan { display: inline-block; height: 24px; line-height: 24px; position: relative; border-radius: 38px; padding: 0 10px; margin: 5px 5px 5px 0; background-color: #00A1D6; color: #fff; } .tagSpan:hover>.line{ position: absolute; width: 90%; left: 50%; top: 50%; height: 1px; background-color: #f25d8e; transform: translate(-50%, -50%); } .tagInput { width: 132px; height: 24px; line-height: 24px; border: 1px solid #ccd0d7; border-radius: 38px; margin: 5px 5px 5px 0; padding: 0 10px; font-size: 12px; } .tagText { display: inline-block; color: #99A2AA; } } .tags-wrapper-footer { margin-top: 30px; .custom { cursor: pointer; &:hover { text-decoration: underline; } color: @dark-blue; } } padding-right: 40px; margin-top: 40px; .title { font-size: 14px; font-weight: bold; position: relative; .coordination-tip { font-size: 12px; color: #6D757A; margin-left: 10px; vertical-align: middle; font-weight: normal; } .iconfont { font-size: 20px; color: @border-color; vertical-align: middle; margin-left: 4px; cursor: pointer; &:hover { color: @dark-blue; } } .tip-detail { width: 172px; position: absolute; box-shadow: 0 2px 6px 0 rgba(0,0,0,0.14); border-radius: 4px; font-weight: normal; font-size: 12px; color: @dark-black; background-color: @white; z-index: 99; right: 0; padding: 12px 20px; line-height: 150%; top: 0; .detail-info { text-indent: 24px; text-align: justify; } } } .coordination-title { height: 20px; } .form-item-material-list { .radio-item { margin-right: 10px; display: inline-block; .radio-text { font-size: 14px; margin-left: 8px; } } } .form-item-music-detail { .radio-list { .musicHoverType { width: 350px; height: 44px; position: absolute; top: 50px; border-radius: 1px; padding: 4px 9px; background-color: #efefef; border: 0 solid #ccd0d7; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.26); z-index: 9; } .left-20 { left: 100px; } .left-40 { left: 140px; } .left-60 { left: 180px; } .left-80 { left: 220px; } .radio-item { margin-right: 10px; display: inline-block; .radio-text { font-size: 14px; margin-left: 8px; } &.hidden { display: none; } } .radio-item:hover { background-color: #fff; border: 1px solid #00b5e5; color: #00b5e5; } .radio-item.active:hover { color: @white; } .radioCheck { display:inline-flex; align-items:center; cursor: pointer; input{ opacity: 0; } } .radioCheck > span { margin-right: 10px; display: inline-block; width: 20px; height: 18px; background-image: url(~images/icons.png); background-repeat: no-repeat; background-position: -135px -64px; } .active > span { background-position: -198px -64px !important; } } } .input-item-sound { margin-top: 20px; display: flex; position: relative; width: 50%; .input-item-title { line-height: 28px; font-size: 14px; } .input-item-album-content { position: relative; margin-left: 15px; border: 1px solid #ccd0d7; padding: 0 28px 0 14px; border-radius: 4px; width: 158px; height: 26px; line-height: 26px; .input-item-current-album { width: 158px; height: 26px; line-height: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .input-item-album-icon{ position: absolute; right: 0; top: 0; border-bottom-right-radius: 4px; border-top-right-radius: 4px; width: 28px; height: 26px; background: #eee; background-image: url(~images/icons.png); background-repeat: no-repeat; background-position: -130px -238px; } .input-item-album-list { position: absolute; left: 0; width: 100%; top: 38px; background: #fff; z-index: 999; border: 1px solid #ccd0d7; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); transition: all .1s; &.hide { transform: translate(0, -100%) scale(0); } &.show { transform: translate(0, 0) scale(1); } li { height: 32px; line-height: 32px; padding: 0 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:hover { color: @dark-blue; background: #e5e9ef; } } } } } .activity-wrap { .activity-item { width: -webkit-calc(~"50% - 15px"); width: -moz-calc(~"50% - 15px"); width: calc(~"50% - 15px"); padding-right: 10px; margin-right: 10px; font-size: 12px; float: left; margin-top: 16px; &:nth-child(2n) { margin-right: 0; } .check-block { width: 18px; height: 18px; float: left; margin: 8px 8px 0 0; border: 1px solid @border-color; cursor: pointer; } .check-active { background-color: @dark-blue; border: 1px solid @dark-blue; color: @white; text-align: center; line-height: 20px; } .text-wrap { float: left; line-height: 16px; .activity-title { color: @dark-blue; margin-bottom: 4px; cursor: pointer; } .activity-time { color: @gray-text-color; } } } } .activity-content { padding-bottom: 0; } } .bgm-plan { margin-top: 56px; font-size: 12px; color: @dark-black; line-height: 16px; .check-block { width: 18px; height: 18px; float: left; border: 1px solid @border-color; margin: 8px 10px 0 0; cursor: pointer; border-radius: 2px; } .check-active { background-color: @dark-blue; border: 1px solid @dark-blue; color: @white; text-align: center; line-height: 20px; } .content-wrap { float: left; .bgm-tip { color: @gray-text-color; margin-top: 4px; } .blue-tip { color: @dark-blue; cursor: pointer; } } .modal-cover { overflow: hidden; overflow-y: auto; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; background-color: rgba(0,0,0,.4); &.show-mask { animation: fadein .5s; } &.hide-mask { display: none; } .modal-wrap { position: absolute; width: 640px; top: 15%; height: 70%; padding: 0 20px; background-color: @white; overflow: hidden; z-index: 100; margin: auto; right: 0; left: 0; border-radius: 4px; margin-bottom: 20px; &.show-block { animation: popin .3s; -ms-animation: popin .3s; -moz-animation: popin .3s; -webkit-animation: popin .3s; } &.hide-block { display: none; } .header { padding: 16px 0 18px; position: relative; .title { width: 100%; float: left; text-align: center; font-size: 16px; color: @black; } .close { position:absolute; font-size: 20px; cursor: pointer; top: 17px; right: 0; color: @gray-text-color; } } .modal-content { height: calc(~"100% - 128px"); height: -webkit-calc(~"100% - 128px"); height: -moz-calc(~"100% - 128px"); .text-content { height: calc(~"100% - 16px"); height: -webkit-calc(~"100% - 16px"); height: -moz-calc(~"100% - 16px"); border-radius: 4px; background-color: #fafafa; overflow: auto; padding: 4px 20px 12px; font-size: 14px; border: 1px solid @unable-border-color; p { font-size: 14px; color: @dark-black; line-height: 24px; margin: 10px 0; } } .btn-group { text-align: center; margin: 20px 0; .blue-ridios { width: 70px; height: 32px; text-align: center; display: inline-block; background-color: @dark-blue; border: 0; color: #fff; border-radius: 4px; line-height: 32px; cursor: pointer; } } } } } } } .form-item-paper-input-wrapper { position: relative; .form-item-paper-total { color: @gray-text-color; bottom: 7.5px; right: 10px; position: absolute; } .title-tips { display: flex; align-items: center; margin-top: 10px; color: red; span { margin-right: 5px; display: inline-block; width: 18px; height: 18px; background-image: url(~images/icons.png); background-repeat: no-repeat; background-position: -135px -652px; } } .form-item-paper-input { width: 100%; box-sizing: border-box; border: 1px solid #ccd0d7; border-radius: 4px; margin-top: 20px; padding: 6px 50px 6px 10px; font-size: 12px; &.warning { border-color: red; } } .form-item-avnum-input { width: 100%; box-sizing: border-box; border: 1px solid #ccd0d7; border-radius: 4px; margin-top: 20px; padding: 6px 50px 6px 10px; font-size: 12px; &.warning { border-color: red; } } .form-item-avnum-input:focus { border-color:@dark-blue; } ul { position:absolute; top: 60px; left:0; max-height: 300px; overflow: auto; width:100%; border-radius: 4px; box-shadow:0 0 10px rgba(136, 136, 136, .5); z-index: 1; } li { height: 30px; line-height: 30px; background-color: #fff; padding-left: 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } li.active { cursor:pointer; } li.active:hover { color:@dark-blue; } span.visiableFalse { visibility: hidden; } li.disabled { background-color: @unable-bg-color; color: @gray-text-color; cursor: not-allowed; } li.disabled span.iconSpan { display: inline-block; margin-right: 5px; width: 18px; height: 18px; background-image: url(~images/icons.png); background-repeat: no-repeat; background-position: -345px -240px; } } .form-title-tips{ color:#00a1d6; align-items: center; margin-top: 10px; line-height: 18px; display: flex; align-items: flex-start; justify-content: flex-start; span { flex-shrink: 0; display: inline-block; margin-right: 5px; width: 14px; height: 18px; background-image: url(~images/icons.png); background-repeat: no-repeat; background-position: -135px -715px; } } .form-item-lrc-upload-tips { display: block; margin-top: 14px; color: @dark-blue; } .lrc-upload-tab { display: inline-block; width: 183px; height: 30px; line-height: 30px; border-radius: 8px; border: solid 1px #ccd0d7; margin: 10px; text-align: center; color: #525e71; &.on{ background-color: @light-blue; } } .lrc-upload-button{ display: inline-block; width: 90px; height: 30px; line-height: 30px; border-radius: 8px; border: solid 1px #ccd0d7; text-align: center; background-color: @dark-blue; color: @white; cursor: default; } .form-item-lrc-upload { position: relative; margin-top: 20px; display: flex; justify-content: center; width: 200px; height: 72px; line-height: 72px; background-size: 100% 100%; background-repeat: no-repeat; background-image: url(~images/LRC.png); .tips { font-size: 16px; color: #6d757a; } .lrcupload { position: absolute; opacity: 0; height: 100%; } .plus-icon { margin-right: 9px; color: @gray-text-color; text-align: center; font-size: 28px; } } .form-lrc-upload{ width: 100%; height: 120px; overflow: hidden; textarea{ overflow: auto; } &.warning{ color : red; border-color: red; } } .form-item-music-type-title { float: left; } .form-item-music-info-list { .input-item { padding: 2px 0; display: inline-block; box-sizing: border-box; margin-top: 16px; width: 49%; &.singer-search { position: relative; } .input-item-title { position: relative; float: left; height: 28px; font-size: 14px; line-height: 28px; } .input-item-text { margin-left: 10px; border: 1px solid #ccd0d7; padding: 0 14px; border-radius: 4px; width: 172px; height: 26px; } } } .form-item-music-detail { display: flex; position: relative; align-items: center; font-size: 14px; margin-top: 20px; .form-item-music-type-title { padding: 5px 0; margin-top: 10px; margin-right: 10px; } .radio-list { flex: 1; } .radio-item { margin-top: 10px; background: #f4f5f7; border: 1px solid #ccd0d7; border-radius: 4px; padding: 5px 20px; position: relative; input { position: absolute; opacity: 0; } } } .progress-bar-wrapper { display: flex; align-items: center; .progress-bar { margin-left: 16px; } .progress-bar-header { height: 18px; align-items: center; display: flex; &:hover { .btn { cursor: pointer; display: block; } } .music-name { max-width: 120px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } .progress-bar-body { position: relative; border-radius: 4px; width: 666px; height: 4px; margin-top: 10px; background-color: #ccd0d7; .progress-bar-body-complete { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: @dark-blue; } } .btn { cursor: pointer; width: 18px; height: 18px; background-image: url(~images/icons.png); background-repeat: no-repeat; } .delete-btn { position: relative; background-position: -135px -184px; .delete-modal { z-index: 999; background: #fff; border-radius: 4px; border: 1px solid #ccd0d7; left: 50%; top: 50%; width: 150px; height: 88px; position: absolute; transition: all .3s; &.hide { transform: scale(0) translate(-50%, 20%); } &.show { transform: scale(1) translate(-50%, 20%); } .delete-tips { margin-top: 18px; text-align: center; font-size: 14px; color: #6d757a; } .delete-btns { margin-top: 15px; display: flex; justify-content: center; .delete-btns-confirm { border-radius: 4px; border: 1px solid @dark-blue; padding: 3px 12px; margin-right: 20px; background: @dark-blue; color: @white; } .delete-btns-cancel { border-radius: 4px; padding: 3px 12px; border: 1px solid #ccd0d7; } } } } .pause-btn { background-position: -135px -775px; } .continue-btn { background-position: -135px -834px; } .upload-status { flex: 1; color: @gray-text-color; .upload-complete { color: @dark-blue; } } } } .music-icon { width: 44px; height: 44px; background-image: url(~images/icon-music.png); background-size: 100% 100%; background-repeat: no-repeat; } .pink { color:@pink; vertical-align: middle; } .font-blue { color: @dark-blue; } input:focus { border-color: @dark-blue !important; } .foldDiv { position: absolute; right: 0; top: 10px; color: @dark-blue; } .unfoldStatus { position: relative; top: 2px; width: 20px; height: 20px; display: inline-block; background-image: url(~images/icons.png); background-position: -339px -122px; background-repeat: no-repeat; } .foldStatus { position: relative; top: 2px; width: 20px; height: 20px; display: inline-block; background-image: url(~images/icons.png); background-position: -339px -180px; background-repeat: no-repeat; } .form-item-tag { position: relative; .floatTag { position: absolute; right: 0; top: 0; font-weight: normal; font-size: 12px; color: #6D757A; } .warning{ color: red; } } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */ color: #99a2aa; } .placeholderAfter{ position: absolute; opacity: 0.1; } input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #99a2aa; } input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #99a2aa; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #99a2aa; } .link { width: 100%; text-align: center; margin: 28px 0 28px -55px; color: @dark-blue; } @-webkit-keyframes popin { from { -webkit-transform: scale(0.4); transform: scale(0.4); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes popin { from { -webkit-transform: scale(0.4); transform: scale(0.4); } to { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes fadein { from { background-color: rgba(0,0,0,.2); } to { background-color: rgba(0,0,0,.4); } } </style>
其视频的上传和这个差不多并且会有上传的大小限制 以下是其错误类型
{ "EXT_NOT_ACCEPTED_ERROR": "EXT_NOT_ACCEPTED_ERROR", "FILE_DUPLICATE_ERROR": "FILE_DUPLICATE_ERROR", "MANUAL_BREAK": "MANUAL_BREAK", "MAX_FILE_SIZE_ERROR": "MAX_FILE_SIZE_ERROR", "MINI_FILE_SIZE_ERROR": "MINI_FILE_SIZE_ERROR", "RUNTIME_ERROR": "RUNTIME_ERROR", "UPLOAD_ERROR": "UPLOAD_ERROR" }
页面编译后的代码如下(只是选取部分) 文件所在:
if (n.size > this.config.fileSingleSizeLimit) this.emit('emit-core-error', { type: T.MAX_FILE_SIZE_ERROR, detail: ''.concat(n.name, ' 文件过大') }); else if (n.size <= 0 || !n.size) this.emit('emit-core-error', { type: T.MINI_FILE_SIZE_ERROR, detail: ''.concat(n.name, ' 请不要传一个空文件') }); else if (this.config.acceptExt && - 1 === this.config.acceptExt.indexOf(o)) this.emit('emit-core-error', { type: T.EXT_NOT_ACCEPTED_ERROR, detail: ''.concat(n.name, ' 上传格式不被支持') });
当我们仔细看投稿页面的话,可以看到页面是使用了iframe标签的,所以你看到的投稿比如发布视频的页面地址并不是真实的 【Vedio】 【Audio】
iframe
正在准备实现发布API的功能
项目地址所在地here
我们要的是api不是代码
视频发布的接口和音频发布的接口很类似,都是使用文件上传,然后服务器生成一个连接池,在发布视频文件时候后端会给你一个上传的ID,以便你和后端完成链接。 其音频的上传的源码如下:
其视频的上传和这个差不多并且会有上传的大小限制 以下是其错误类型
页面编译后的代码如下(只是选取部分) 文件所在:
当我们仔细看投稿页面的话,可以看到页面是使用了
iframe
标签的,所以你看到的投稿比如发布视频的页面地址并不是真实的 【Vedio】 【Audio】