index.html
5.25 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
<!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">
</head>
<body id="body" style="margin: 0; padding: 0">
<div id="audioPage" class="page-container">
<el-card>
<template #header>
<div class="card-header">
<!-- <h3>歌曲征集</h3> -->
<span style="font-size: 24px; font-weight: Semibold; color: #666666;">歌曲征集</span>
<span style="font-size: 14px; color: #999999;"> / 带*号为必填项</span>
</div>
</template>
<div>
<el-form ref="songs" :model="form" label-width="120px" :rules="rules" style="display: flex; flex-wrap: wrap;" >
<el-form-item label="类型" style="width: 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="歌曲名字" style="width: 50%" prop="songName">
<el-input v-model.trim="form.songName" :maxlength="100" :minlength="1" placeholder="请输入歌曲名字"></el-input>
</el-form-item>
<el-form-item label="歌手" style="width: 50%" prop="singer">
<el-input v-model.trim="form.singer" :maxlength="15" placeholder="请输入歌手名字"></el-input>
</el-form-item>
<el-form-item label="作词" style="width: 50%" prop="lyricist">
<el-input v-model.trim="form.lyricist" :maxlength="15" placeholder="请输入作词人名字"></el-input>
</el-form-item>
<el-form-item label="作曲" style="width: 50%;" prop="songwriter">
<el-input v-model.trim="form.songwriter" :maxlength="15" placeholder="请输入作曲人名字"></el-input>
</el-form-item>
<el-form-item label="编曲" style="width: 50%" prop="redact">
<el-input v-model.trim="form.redact" :maxlength="15" placeholder="请输入编曲人名字"></el-input>
</el-form-item>
<el-form-item label="混音" style="width: 50%" prop="mixing">
<el-input v-model.trim="form.mixing" :maxlength="15" placeholder="请输入混音人名字"></el-input>
</el-form-item>
<el-form-item label="歌词" style="width: 100%" prop="lyric">
<el-input v-model="form.lyric" maxlength="2500" show-word-limit type="textarea" :rows="10" placeholder="请输入歌词"></el-input>
</el-form-item>
<el-form-item label="手机号码" style="width: 50%" prop="phone">
<el-input v-model.trim="form.phone" :maxlength="11" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item label="联系人姓名" style="width: 50%" prop="name">
<el-input v-model.trim="form.name" :maxlength="50" placeholder="请输入联系人姓名"></el-input>
</el-form-item>
<el-form-item label="音频" style="width: 100%" prop="audioFile">
<el-upload class="upload-demo" :action="uploadUrl" :auto-upload="false" :file-list="fileList" accept=".mp3"
@change="getMp3" :on-exceed="exceed" :before-remove="handleRemove" :disabled="btnDisabled" :show-file-list="false">
<el-button size="small" type="primary" :disabled="btnDisabled">选择文件</el-button>
<span style="color: red; margin-left: 10px;">{{msgText}}</span>
</el-upload>
</el-form-item>
<el-divider></el-divider>
<el-form-item style="width: 50%; text-align: left;">
<span style="color: #4A90E2; font-size: 20px" v-if="percent > 0 && percent < 100">已上传{{Math.ceil(percent)}}%，请耐心等待……</span>
<span style="color: #4A90E2; font-size: 20px" v-if="percent == 100">上传完成</span>
</el-form-item>
<el-form-item style="width: 50%; text-align: right;">
<el-button @click="reset" v-if="form.channelId == 1279">取消</el-button>
<el-button @click="reset" v-else :disabled="!form.audioId">取消</el-button>
<el-button type="danger" @click="submitForm" v-if="form.channelId == 1279">确定上传</el-button>
<el-button type="danger" @click="submitForm" v-else :disabled="!form.audioId">确定上传</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.11/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-plus"></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>