index.html 9.48 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 http-equiv="Expires" CONTENT="0">
  <meta http-equiv="Cache-Control" CONTENT="no-cache">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="Pragma" CONTENT="no-cache">
  <link rel="shortcut icon" href="/cms.ico" />
  <link rel="bookmark" href="/cms.ico" />
  <!-- element 3 plus -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus@1.1.0-beta.12/theme-chalk/index.css">
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body id="body" class="diy-reset">
  <script>
    parent.postMessage(1000, '*')
  </script>
  <!-- 别人家资源外链 3 -->
  <!-- vue 3 -->
  <!-- <script src="https://unpkg.com/vue@3.2.11/dist/vue.global.js"></script>
  <script src="https://unpkg.com/element-plus@1.1.0-beta.12"></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> -->

  <!-- 本公司资源外链备份 2 -->
  <!-- <script type="text/javascript">
    if (typeof axios == 'undefined') {
      // document.write(unescape("%3Cscript src='' type='text/javascript'%3E%3C/script%3E"));
    }
    if (typeof Vue == 'undefined') {
      // document.write(unescape("%3Cscript src='' type='text/javascript'%3E%3C/script%3E"));
    }
    if (typeof ELEMENT == 'undefined') {
      // document.write(unescape("%3Cscript src='' type='text/javascript'%3E%3C/script%3E"));
    }
    if(typeof qiniu == 'undefined') {
      // document.write(unescape("%3Cscript src='' type='text/javascript'%3E%3C/script%3E"));
    }
  </script> -->

  <!-- 本域名资源备份 1 -->
  <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.global.js' type='text/javascript'%3E%3C/script%3E"));
    }
    if (typeof ElementPlus == 'undefined') {
      document.write(unescape(
        "%3Cscript src='./static/jsCdn/element-plus.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("为了您的数据安全,请使用Chrome内核浏览器阅览本站内容!")
      location.href = 'version.html'
    }
  </script>

  <div id="audioPage" class="page-container" v-cloak>
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <!-- <h3>歌曲征集</h3> -->
          <span class="title-big">歌曲征集</span>
          <span class="title-small">/ 带*号为必填项</span>
        </div>
      </template>
      <div>
        <el-form ref="songs" :model="form" label-width="120px" :rules="rules" class="diy-flex" label-position="right">
          <el-form-item :label="labels.channelId" class="diy-flex-100" prop="channelId">
            <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 :label="labels.songName" class="diy-flex-50" prop="songName">
            <el-input v-model.trim="form.songName" :maxlength="100" :minlength="1" placeholder="请输入歌曲名字"></el-input>
          </el-form-item>
          <el-form-item :label="labels.singer" class="diy-flex-50" prop="singer">
            <el-input v-model.trim="form.singer" :maxlength="15" placeholder="请输入歌手名字"></el-input>
          </el-form-item>
          <el-form-item :label="labels.lyricist" class="diy-flex-50" prop="lyricist">
            <el-input v-model.trim="form.lyricist" :maxlength="15" placeholder="请输入作词人名字"></el-input>
          </el-form-item>
          <el-form-item :label="labels.songwriter" class="diy-flex-50" prop="songwriter">
            <el-input v-model.trim="form.songwriter" :maxlength="15" placeholder="请输入作曲人名字"></el-input>
          </el-form-item>
          <el-form-item :label="labels.redact" class="diy-flex-50" prop="redact">
            <el-input v-model.trim="form.redact" :maxlength="15" placeholder="请输入编曲人名字"></el-input>
          </el-form-item>
          <el-form-item :label="labels.mixing" class="diy-flex-50" prop="mixing">
            <el-input v-model.trim="form.mixing" :maxlength="15" placeholder="请输入混音人名字"></el-input>
          </el-form-item>
          <el-form-item :label="labels.lyric" class="diy-flex-100" prop="lyric">
            <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 :label="labels.phone" class="diy-flex-50" prop="phone">
            <el-input v-model.trim="form.phone" :maxlength="11" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item :label="labels.name" class="diy-flex-50" prop="name">
            <el-input v-model.trim="form.name" :maxlength="50" placeholder="请输入联系人姓名"></el-input>
          </el-form-item>
          <el-form-item :label="labels.audioFile" class="diy-flex-50" prop="audioFile">
            <el-upload class="upload-demo" :action="uploadUrl" :auto-upload="false" :file-list="fileList"
              accept=".mp3, .flac, .ogg, .wav, .mpg, .wma, .aac, .m4a" @change="getMp3" :on-exceed="exceed"
              :before-remove="handleRemove" :disabled="btnDisabled" :show-file-list="false">
              <el-button size="small" type="primary" :disabled="btnDisabled" class="diy-button width-190 bg-blue">选择文件
              </el-button>
              <!-- <el-tooltip placement="top">
                  <template #content>
                    <p>1)可上传的音频格式:mp3/flac/wav/ogg/mpg/wma/aac/acc/m4a。</p>
                    <p>2)音频上传过程中,请勿离开此页面或者刷新此页面,否则会导致音频上传任务失败!</p>
                    <p>3)音频文件大小上限:500M,数量上限:1。</p>
                  </template>
                  <el-button type="text" size="mini" class="title-small">上传须知</el-button>
                </el-tooltip> -->
            </el-upload>
            <el-tooltip placement="top">
              <template #content>
                <p>1)可上传的音频格式:mp3/flac/wav/ogg/mpg/wma/aac/acc/m4a。</p>
                <p>2)音频上传过程中,请勿离开此页面或者刷新此页面,否则会导致音频上传任务失败!</p>
                <p>3)音频文件大小上限:500M,数量上限:1。</p>
              </template>
              <el-button type="text" size="mini" class="title-small init-tooltip">上传须知</el-button>
            </el-tooltip>
            <!-- <span class="diy-danger">{{msgText}}</span> -->
          </el-form-item>
          <!-- <el-form-item class="diy-flex-50" label="上传须知"> -->
          <!-- <el-button class="diy-button width-140 bg-white">查看</el-button> -->
          <!-- <el-tooltip placement="top">
              <template #content>
                <p>1)可上传的音频格式:mp3/flac/wav/ogg/mpg/wma/aac/acc/m4a。</p>
                <p>2)音频上传过程中,请勿离开此页面或者刷新此页面,否则会导致音频上传任务失败!</p>
                <p>3)音频文件大小上限:500M,数量上限:1。</p>
              </template>
              <el-button class="diy-button width-140 bg-white">查看</el-button> -->
          <!-- </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>