v2.html 9.43 KB
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>CNLive Audio Panel</title>
  <meta name=renderer content=webkit>
  <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
  <meta http-equiv="Expires" CONTENT="0">
  <meta http-equiv="Cache-Control" CONTENT="no-cache">
  <meta http-equiv="Pragma" CONTENT="no-cache">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="shortcut icon" href="/cms.ico" />
  <link rel="bookmark" href="/cms.ico" />
  <!-- element 2 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css">
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body id="body" class="diy-reset">
  <script>
    // parent.postMessage('好的', '*')
  </script>

  <script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script>
  <script src="https://unpkg.com/element-ui@2.15.5/lib/index.js"></script>
  <script src="https://unpkg.com/axios@0.17.1/dist/axios.min.js"></script>
  <script src="https://unpkg.com/qiniu-js@2.5.5/dist/qiniu.min.js"></script>

  <script type="text/javascript">
    if (typeof axios == 'undefined') {
      document.write(unescape("%3Cscript src='http://gongongku.cnlive.com/axios.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
    if (typeof Vue == 'undefined') {
      document.write(unescape("%3Cscript src='http://gongongku.cnlive.com/vue.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
    if (typeof ELEMENT == 'undefined') {
      document.write(unescape("%3Cscript src='https://unpkg.com/element-ui@2.15.5/lib/index.js' type='text/javascript'%3E%3C/script%3E"));
    }
    if(typeof qiniu == 'undefined') {
      document.write(unescape("%3Cscript src='http://gongongku.cnlive.com/qiniu.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
  </script>

  <script type="text/javascript">
    if (typeof axios == 'undefined') {
      document.write(unescape("%3Cscript src='./static/jsCdn/axios.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
    if (typeof Vue == 'undefined') {
      document.write(unescape("%3Cscript src='./static/jsCdn/vue.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
    if (typeof ELEMENT == 'undefined') {
      document.write(unescape(
        "%3Cscript src='./static/jsCdn/element-index.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
    if (typeof qiniu == 'undefined') {
      document.write(unescape("%3Cscript src='./static/jsCdn/qiniu.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
  </script>

  <script>
    var UA = window.navigator.userAgent
    var msie = UA.indexOf("MSIE")
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
      alert("为了您的数据安全,请使用新版本谷歌(google chrome)、火狐(Firefox)、QQ、360等浏览器阅览本站内容!")
      // location.href = 'version.html'
    }
  </script>

  <div id="mainPage" class="page-container" v-cloak>
    <el-card shadow="never">
      <div slot="header" class="card-header">
        <span class="title-big">歌曲征集</span>
        <span class="title-small">/ 带*号为必填项</span>
      </div>
      <div>
        <el-form ref="songs" :model="form" label-width="120px" :rules="rules" class="diy-flex" label-position="right">
          <el-form-item class="diy-flex-100" prop="channelId">
            <label slot="label">&emsp;&emsp;</label>
            <el-radio-group v-model="form.channelId" @change="handleChange">
              <el-radio :label="1278">热歌榜</el-radio>
              <el-radio :label="1279">优秀作词榜</el-radio>
              <el-radio :label="1280">优秀作曲榜</el-radio>
              <el-radio :label="1281">其他</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="diy-flex-50" prop="songName">
            <label slot="label">歌曲名字</label>
            <el-input v-model.trim="form.songName" :maxlength="100" :minlength="1" placeholder="请输入歌曲名字"></el-input>
          </el-form-item>
          <el-form-item class="diy-flex-50" prop="singer">
            <label slot="label">&emsp;&emsp;</label>
            <el-input v-model.trim="form.singer" :maxlength="15" placeholder="请输入歌手名字"></el-input>
          </el-form-item>
          <el-form-item class="diy-flex-50" prop="lyricist">
            <label slot="label">&emsp;&emsp;</label>
            <el-input v-model.trim="form.lyricist" :maxlength="15" placeholder="请输入作词人名字"></el-input>
          </el-form-item>
          <el-form-item class="diy-flex-50" prop="songwriter">
            <label slot="label">&emsp;&emsp;</label>
            <el-input v-model.trim="form.songwriter" :maxlength="15" placeholder="请输入作曲人名字"></el-input>
          </el-form-item>
          <el-form-item class="diy-flex-50" prop="redact">
            <label slot="label">&emsp;&emsp;</label>
            <el-input v-model.trim="form.redact" :maxlength="15" placeholder="请输入编曲人名字"></el-input>
          </el-form-item>
          <el-form-item class="diy-flex-50" prop="mixing">
            <label slot="label">&emsp;&emsp;</label>
            <el-input v-model.trim="form.mixing" :maxlength="15" placeholder="请输入混音人名字"></el-input>
          </el-form-item>
          <el-form-item class="diy-flex-100" prop="lyric">
            <label slot="label">&emsp;&emsp;</label>
            <el-input v-model="form.lyric" maxlength="2500" :minlength="20" show-word-limit type="textarea" :rows="10"
              placeholder="请输入歌词"></el-input>
          </el-form-item>
          <el-form-item class="diy-flex-50" prop="phone">
            <label slot="label">手机号码</label>
            <el-input v-model.trim="form.phone" :maxlength="11" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item class="diy-flex-50" prop="name">
            <label slot="label">联系人姓名</label>
            <el-input v-model.trim="form.name" :maxlength="50" placeholder="请输入联系人姓名"></el-input>
          </el-form-item>
          <el-form-item class="diy-flex-50" prop="audioFile">
            <label slot="label">&emsp;&emsp;</label>
            <el-upload class="upload-demo" :action="uploadUrl" :auto-upload="false"
              accept=".mp3, .flac, .ogg, .wav, .mpg, .wma, .aac, .m4a" :before-remove="handleRemove"
              :disabled="btnDisabled" :on-change="getMp3" :on-exceed="exceed" :file-list="fileList"
              :show-file-list="false">
              <el-button size="small" type="primary" :disabled="btnDisabled" class="diy-button width-190 bg-blue">选择文件
              </el-button>
            </el-upload>
            <el-tooltip placement="top">
              <div slot="content">
                <p>1)可上传的音频格式:mp3/flac/wav/ogg/mpg/wma/aac/acc/m4a。</p>
                <p>2)音频上传过程中,请勿离开此页面或者刷新此页面,否则会导致音频上传任务失败!</p>
                <p>3)音频文件大小上限:500M,数量上限:1。</p>
              </div> 
              <el-button type="text" size="mini" class="title-small init-tooltip">上传须知</el-button>
            </el-tooltip>
          </el-form-item>
          <el-form-item class="diy-flex-50" prop="agree">
            <label slot="label">作曲授权</label>
            <el-checkbox-group v-model="form.agree">
              <el-checkbox label="" name="type" :disabled="banAgree"></el-checkbox>
            </el-checkbox-group>
            <el-tooltip placement="top">
              <div slot="content">
                <p>征歌作品须为作者原创。</p>
                <p>未以任何形式公开发表,未参加任何评奖评选,不存在版权纠纷。</p>
                <p>报送参加本次征集评选,即视为授权空军拥有该作品完整版权。</p>
              </div> 
              <el-button type="text" size="mini" class="title-small init-transparent-tooltip">作曲授权</el-button>
            </el-tooltip>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item class="diy-flex-50 diy-text-left">
            <div>
              <div class="diy-tip">{{form.audioFile? form.audioFile.name: ''}} </div>
              <div class="diy-tip" v-if="percent > 0 && percent < 100"> 已上传{{Math.ceil(percent)}}%,请耐心等待……</div>
              <div class="diy-tip" v-if="percent == 100"> 上传完成</div>
            </div>
            <div v-if="errorMsg">
              <div class="diy-error">{{errorMsg}}</div>
            </div>
          </el-form-item>
          <el-form-item class="diy-flex-50 diy-text-right">
            <el-button @click="reset" class="diy-button width-140 bg-white" v-if="form.channelId == 1279">取消</el-button>
            <el-button @click="reset" class="diy-button width-140 bg-white" v-else
              :disabled="!form.audioFile || submitDisabled">取消</el-button>

            <el-button type="danger" class="diy-button width-140 bg-red" @click="submit('songs')"
              v-if="form.channelId == 1279">确定上传</el-button>
            <el-button type="danger" class="diy-button width-140 bg-red" @click="submit('songs')" v-else
              :disabled="!form.audioFile || submitDisabled">确定上传</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</body>

</html>