index.html
6.37 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!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="Pragma" CONTENT="no-cache">
<link rel="shortcut icon" href="/cms.ico" />
<link rel="bookmark" href="/cms.ico" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.12/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.11/dist/vue.global.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body id="body" class="diy-reset">
<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-upload>
<!-- <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 class="diy-tip">{{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>
</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>
<script src="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.12"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qiniu-js@2.5.5/dist/qiniu.min.js"></script>
</body>
</html>