关于发布视频以及音频的接口

[jingyuexing]

视频发布的接口和音频发布的接口很类似,都是使用文件上传，然后服务器生成一个连接池，在发布视频文件时候后端会给你一个上传的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">
            &nbsp;&nbsp;主题来源：
          </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">
            &nbsp;&nbsp;风格类型：
          </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">&#xe636;</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">&#xe609;</i>
                  </span>
                  <div v-show="singerInputStatus" class="iconfont addIcon" @click="addContent('singer')">&#xe649;</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">&#xe609;</i>
                  </span>
                  <div v-show="performanceInputStatus" class="iconfont addIcon" @click="addContent('performance')">&#xe649;</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">&#xe609;</i>
                  </span>
                  <div v-show="voiceSourceInputStatus" class="iconfont addIcon" @click="addContent('voiceSource')">&#xe649;</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">&nbsp;&nbsp;合辑：</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">&#xe609;</i>
                  </span>
                  <div v-show="attuneInputStatus" class="iconfont addIcon" @click="addContent('attune')">&#xe649;</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">&nbsp;&nbsp;乐器：</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">&#xe609;</i>
                  </span>
                  <div v-show="instrucmentInputStatus" class="iconfont addIcon" @click="addContent('instrucment')">&#xe649;</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">&nbsp;&nbsp;作词：</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">&#xe609;</i>
                  </span>
                  <div v-show="lrcInputStatus" class="iconfont addIcon" @click="addContent('lrc')">&#xe649;</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">&nbsp;&nbsp;作曲：</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">&#xe609;</i>
                  </span>
                  <div v-show="composeInputStatus" class="iconfont addIcon" @click="addContent('compose')">&#xe649;</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">&nbsp;&nbsp;编曲：</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">&#xe609;</i>
                  </span>
                  <div v-show="arrangeInputStatus" class="iconfont addIcon" @click="addContent('arrange')">&#xe649;</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">&nbsp;&nbsp;混音／后期：</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">&#xe609;</i>
                  </span>
                  <div v-show="laterInputStatus" class="iconfont addIcon" @click="addContent('later')">&#xe649;</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">&nbsp;&nbsp;封面制作者：</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">&#xe609;</i>
                  </span>
                  <div v-show="coverInputStatus" class="iconfont addIcon" @click="addContent('cover')">&#xe649;</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">&#xe609;</i>
                  </span>
                  <div v-show="originInputStatus" class="iconfont addIcon" @click="addContent('origin')">&#xe649;</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">&nbsp;本家地址：</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>&nbsp;&nbsp;&nbsp;&nbsp;{{avVideoCid.title}}
                  </li>
                  <li v-else class="disabled"><span :class="index !== 0 ? 'visiableFalse' : ''">{{bvStatus ? avVideoInfo.bvid : avVideoInfo.avid}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="iconSpan"></span>已关联&nbsp;&nbsp;&nbsp;&nbsp;{{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)">&#xe651;</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">&#xe651;</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">&#xe60e;</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】

[jingyuexing]

正在准备实现发布API的功能

项目地址所在地here

[mckuhei]

我们要的是api不是代码