|
|
@@ -18,13 +18,15 @@ import ColFieldGroup from '@/components/col-field-group'
|
|
|
// import { MusicType } from 'src/teacher/music/list/item.d'
|
|
|
import SubjectModel from '@/business-components/subject-list'
|
|
|
import ColField from '@/components/col-field'
|
|
|
+
|
|
|
import {
|
|
|
teachercanEvaluateType,
|
|
|
teacherChargeType,
|
|
|
teachershowAudiType,
|
|
|
teachershowFingeringType,
|
|
|
teachershowHasBeatType,
|
|
|
- teacherNotationType
|
|
|
+ teacherNotationType,
|
|
|
+ teacherStyleType
|
|
|
} from '@/constant/music'
|
|
|
import { getXmlInfo, FormatXMLInfo } from '@/helpers/music-xml'
|
|
|
import Upload from './upload'
|
|
|
@@ -36,12 +38,24 @@ import { teacherState } from '@/teacher/teacher-cert/teacherState'
|
|
|
import request from '@/helpers/request'
|
|
|
import requestOrigin from 'umi-request'
|
|
|
import UploadIcon from './upload.svg'
|
|
|
+import ColUpload from '@/components/col-upload'
|
|
|
+import { verifyNumberIntegerAndFloat } from '@/helpers/toolsValidate'
|
|
|
|
|
|
export type BackgroundMp3 = {
|
|
|
url?: string
|
|
|
track?: string
|
|
|
}
|
|
|
|
|
|
+// 校验函数返回 true 表示校验通过，false 表示不通过
|
|
|
+export const validator = val => {
|
|
|
+ console.log(val)
|
|
|
+ if (Number(val) <= 0) {
|
|
|
+ return '收费金额必须大于0'
|
|
|
+ } else {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
export default defineComponent({
|
|
|
name: 'MusicUpload',
|
|
|
data() {
|
|
|
@@ -60,6 +74,8 @@ export default defineComponent({
|
|
|
composer: '',
|
|
|
speed: '',
|
|
|
hasBeat: 0,
|
|
|
+ titleImg: '',
|
|
|
+ accompanimentType: 'HOMEMODE',
|
|
|
chargeType: 0,
|
|
|
showFingering: 1,
|
|
|
canEvaluate: 1,
|
|
|
@@ -184,6 +200,8 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
this.xmlFileUrl = res.data.xmlFileUrl
|
|
|
+ this.accompanimentType = res.data.accompanimentType
|
|
|
+ this.titleImg = res.data.titleImg
|
|
|
|
|
|
// this.audioType = res.data.mp3Type
|
|
|
|
|
|
@@ -223,6 +241,8 @@ export default defineComponent({
|
|
|
sourceType: 'TEACHER',
|
|
|
mp3Type,
|
|
|
hasBeat: this.hasBeat,
|
|
|
+ accompanimentType: this.accompanimentType,
|
|
|
+ titleImg: this.titleImg,
|
|
|
// url: this.hasBeat ? '' : this.mp3Url,
|
|
|
// metronomeUrl: this.hasBeat ? this.mp3Url : '',
|
|
|
audioFileUrl: this.mp3Url,
|
|
|
@@ -271,6 +291,9 @@ export default defineComponent({
|
|
|
}, 800)
|
|
|
console.log(vals)
|
|
|
},
|
|
|
+ onFormatter(val: any) {
|
|
|
+ return verifyNumberIntegerAndFloat(val)
|
|
|
+ },
|
|
|
getSubjectListNames(list) {
|
|
|
const data = {}
|
|
|
for (const item of list) {
|
|
|
@@ -378,6 +401,24 @@ export default defineComponent({
|
|
|
},
|
|
|
removeBackground(index: number) {
|
|
|
this.backgroundMp3s.splice(index, 1)
|
|
|
+ },
|
|
|
+ onDetail(type: string) {
|
|
|
+ let url = `${location.origin}/teacher/#/registerProtocol`
|
|
|
+
|
|
|
+ if (type === 'question') {
|
|
|
+ // url = `${location.origin}/teacher/muic-standard/index.html`
|
|
|
+ } else if (type === 'music') {
|
|
|
+ url = `${location.origin}/teacher/muic-standard/index.html`
|
|
|
+ }
|
|
|
+
|
|
|
+ postMessage({
|
|
|
+ api: 'openWebView',
|
|
|
+ content: {
|
|
|
+ url,
|
|
|
+ orientation: 1,
|
|
|
+ isHideTitle: false
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
render() {
|
|
|
@@ -389,6 +430,20 @@ export default defineComponent({
|
|
|
<NoticeBar wrapable scrollable={false} text={this.reason} />
|
|
|
)}
|
|
|
<div class={styles.container}>
|
|
|
+ <div class={styles.tips}>
|
|
|
+ <div class={styles.tipsTitle}>注意事项：</div>
|
|
|
+ <div class={styles.tipsContent}>
|
|
|
+ 1、必须是上传人自己参与制作的作品。
|
|
|
+ <br />
|
|
|
+ 2、歌曲及歌曲信息中请勿涉及政治、宗教、广告、涉毒、犯罪、色情、低俗、暴力、血腥、消极等违规内容，违反者直接删除内容。多次违反将封号。
|
|
|
+ <br />
|
|
|
+ 3、点击查看{' '}
|
|
|
+ <span onClick={() => this.onDetail('protocol')}>
|
|
|
+ 《用户注册协议》
|
|
|
+ </span>
|
|
|
+ ，如果您上传了文件，即认为您完全同意并遵守该协议的内容；
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<ColFieldGroup class={styles.area}>
|
|
|
<ColField border={false} required title="MusicXML文件">
|
|
|
<Field
|
|
|
@@ -416,12 +471,32 @@ export default defineComponent({
|
|
|
accept=".xml"
|
|
|
formatFile={this.readerFile}
|
|
|
/>
|
|
|
- <div style={{marginLeft: '8px'}}>{this.fileName(this.xmlFileUrl)}</div>
|
|
|
+ <div style={{ marginLeft: '8px' }}>
|
|
|
+ {this.fileName(this.xmlFileUrl)}
|
|
|
+ </div>
|
|
|
</>
|
|
|
)
|
|
|
}}
|
|
|
/>
|
|
|
</ColField>
|
|
|
+ </ColFieldGroup>
|
|
|
+ <div class={styles.tips}>
|
|
|
+ <div class={styles.tipsTitle}>曲谱审核标准：</div>
|
|
|
+ <div class={styles.tipsContent}>
|
|
|
+ 1、文件大小不要超过5MB，不符合版面规范的乐谱，审核未通过的不予上架，详情参考
|
|
|
+ <span onClick={() => this.onDetail('music')}>
|
|
|
+ 《曲谱排版规范》
|
|
|
+ </span>
|
|
|
+ ； 1、必须是上传人自己参与制作的作品。
|
|
|
+ <br />
|
|
|
+ 2、XML与MIDI文件内容必须一致，推荐使用Sibelius打谱软件。导出设置：导出XML-未压缩（*.xml）/导出MIDI：音色-其他回放设备General
|
|
|
+ MIDI、MIDI、MIDI文件类型-类型0、不要勾选“将弱拍小节导出为具有休止符的完整小节”。点击查看
|
|
|
+ <span onClick={() => this.onDetail('question')}>
|
|
|
+ 《常见问题》
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ColFieldGroup class={styles.area}>
|
|
|
<ColField required title="播放类型" border={false}>
|
|
|
<RadioGroup
|
|
|
class={styles['radio-group']}
|
|
|
@@ -462,6 +537,25 @@ export default defineComponent({
|
|
|
})}
|
|
|
</RadioGroup>
|
|
|
</ColField>
|
|
|
+ <ColField required title="伴奏类型" border={false}>
|
|
|
+ <RadioGroup
|
|
|
+ class={styles['radio-group']}
|
|
|
+ modelValue={this.accompanimentType}
|
|
|
+ onUpdate:modelValue={val => (this.accompanimentType = val)}
|
|
|
+ >
|
|
|
+ {Object.keys(teacherStyleType).map((item: string) => {
|
|
|
+ const isActive = item === String(this.accompanimentType)
|
|
|
+ const type = isActive ? 'primary' : 'default'
|
|
|
+ return (
|
|
|
+ <Radio class={styles.radio} name={item}>
|
|
|
+ <Tag size="large" plain={isActive} type={type}>
|
|
|
+ {teacherStyleType[item]}
|
|
|
+ </Tag>
|
|
|
+ </Radio>
|
|
|
+ )
|
|
|
+ })}
|
|
|
+ </RadioGroup>
|
|
|
+ </ColField>
|
|
|
<ColField border={false} title="伴奏文件">
|
|
|
<Field
|
|
|
name="mp3Url"
|
|
|
@@ -486,59 +580,14 @@ export default defineComponent({
|
|
|
onUpdate:modelValue={val => (this.mp3Url = val)}
|
|
|
accept=".mp3"
|
|
|
/>
|
|
|
- <div style={{marginLeft: '8px'}}>{this.fileName(this.mp3Url)}</div>
|
|
|
+ <div style={{ marginLeft: '8px' }}>
|
|
|
+ {this.fileName(this.mp3Url)}
|
|
|
+ </div>
|
|
|
</>
|
|
|
)
|
|
|
}}
|
|
|
/>
|
|
|
</ColField>
|
|
|
- {this.backgroundMp3s.map((item, index) => (
|
|
|
- <ColField
|
|
|
- required
|
|
|
- border={false}
|
|
|
- title={(item.track || '') + '原音文件'}
|
|
|
- // @ts-ignore
|
|
|
- vSlots={{
|
|
|
- right: () =>
|
|
|
- this.backgroundMp3s.length > 1 ? (
|
|
|
- <Button
|
|
|
- onClick={() => this.removeBackground(index)}
|
|
|
- style={{ border: 'none' }}
|
|
|
- icon="cross"
|
|
|
- ></Button>
|
|
|
- ) : null
|
|
|
- }}
|
|
|
- >
|
|
|
- <Field
|
|
|
- name="url"
|
|
|
- modelValue={this.bgmp3Url}
|
|
|
- // @ts-ignore
|
|
|
- vSlots={{
|
|
|
- input: () =>
|
|
|
- browserInfo.isApp ? (
|
|
|
- <Button
|
|
|
- icon={UploadIcon}
|
|
|
- class={styles.upbtn}
|
|
|
- onClick={this.naiveBGMp3File}
|
|
|
- loading={this.bgmp3Loading}
|
|
|
- >
|
|
|
- {this.bgmp3Url
|
|
|
- ? this.fileName(this.bgmp3Url)
|
|
|
- : '上传文件'}
|
|
|
- </Button>
|
|
|
- ) : (
|
|
|
- <>
|
|
|
- <Upload
|
|
|
- onUpdate:modelValue={val => (this.bgmp3Url = val)}
|
|
|
- accept=".mp3"
|
|
|
- />
|
|
|
- <div style={{marginLeft: '8px'}}>{this.fileName(this.bgmp3Url)}</div>
|
|
|
- </>
|
|
|
- )
|
|
|
- }}
|
|
|
- />
|
|
|
- </ColField>
|
|
|
- ))}
|
|
|
</>
|
|
|
) : (
|
|
|
<ColField border={false} required title="MIDI文件">
|
|
|
@@ -566,7 +615,9 @@ export default defineComponent({
|
|
|
onUpdate:modelValue={val => (this.midiUrl = val)}
|
|
|
accept=".mid"
|
|
|
/>
|
|
|
- <div style={{marginLeft: '8px'}}>{this.fileName(this.midiUrl)}</div>
|
|
|
+ <div style={{ marginLeft: '8px' }}>
|
|
|
+ {this.fileName(this.midiUrl)}
|
|
|
+ </div>
|
|
|
</>
|
|
|
)
|
|
|
}}
|
|
|
@@ -574,7 +625,68 @@ export default defineComponent({
|
|
|
</ColField>
|
|
|
)}
|
|
|
</ColFieldGroup>
|
|
|
+ <div class={styles.tips}>
|
|
|
+ <div class={styles.tipsContent}>
|
|
|
+ 1、推荐上传自制伴奏，伴奏和谱面必须对齐。自制伴奏可以设置更高的收费标准。
|
|
|
+ <br />
|
|
|
+ 2、普通伴奏如果涉及到版权纠纷，根据
|
|
|
+ <span onClick={() => this.onDetail('protocol')}>
|
|
|
+ 《用户注册协议》
|
|
|
+ </span>
|
|
|
+ 平台有权进行下架处理。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<ColFieldGroup class={styles.area}>
|
|
|
+ {this.audioType === 'MP3' &&
|
|
|
+ this.backgroundMp3s.map((item, index) => (
|
|
|
+ <ColField
|
|
|
+ required
|
|
|
+ border={false}
|
|
|
+ title={(item.track || '') + '原音文件'}
|
|
|
+ // @ts-ignore
|
|
|
+ vSlots={{
|
|
|
+ right: () =>
|
|
|
+ this.backgroundMp3s.length > 1 ? (
|
|
|
+ <Button
|
|
|
+ onClick={() => this.removeBackground(index)}
|
|
|
+ style={{ border: 'none' }}
|
|
|
+ icon="cross"
|
|
|
+ ></Button>
|
|
|
+ ) : null
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Field
|
|
|
+ name="url"
|
|
|
+ modelValue={this.bgmp3Url}
|
|
|
+ // @ts-ignore
|
|
|
+ vSlots={{
|
|
|
+ input: () =>
|
|
|
+ browserInfo.isApp ? (
|
|
|
+ <Button
|
|
|
+ icon={UploadIcon}
|
|
|
+ class={styles.upbtn}
|
|
|
+ onClick={this.naiveBGMp3File}
|
|
|
+ loading={this.bgmp3Loading}
|
|
|
+ >
|
|
|
+ {this.bgmp3Url
|
|
|
+ ? this.fileName(this.bgmp3Url)
|
|
|
+ : '上传文件'}
|
|
|
+ </Button>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <Upload
|
|
|
+ onUpdate:modelValue={val => (this.bgmp3Url = val)}
|
|
|
+ accept=".mp3"
|
|
|
+ />
|
|
|
+ <div style={{ marginLeft: '8px' }}>
|
|
|
+ {this.fileName(this.bgmp3Url)}
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </ColField>
|
|
|
+ ))}
|
|
|
<ColField required title="曲目名称">
|
|
|
<Field
|
|
|
clearable
|
|
|
@@ -586,14 +698,37 @@ export default defineComponent({
|
|
|
onUpdate:modelValue={val => (this.musicSheetName = val)}
|
|
|
/>
|
|
|
</ColField>
|
|
|
- <ColField required title="作曲人">
|
|
|
+ <ColField border={false} required title="曲谱封面">
|
|
|
+ <ColUpload
|
|
|
+ cropper
|
|
|
+ bucket="cloud-coach"
|
|
|
+ options={{
|
|
|
+ autoCropWidth: 600,
|
|
|
+ autoCropHeight: 600
|
|
|
+ }}
|
|
|
+ v-model={this.titleImg}
|
|
|
+ class={styles.imgContainer}
|
|
|
+ />
|
|
|
+ </ColField>
|
|
|
+ </ColFieldGroup>
|
|
|
+ <div class={styles.tips}>
|
|
|
+ <div class={styles.tipsContent}>
|
|
|
+ 1、同一首曲目不可重复上传，如有不同版本统一用“（）”补充。举例：人生的旋转木马（长笛二重奏版）。
|
|
|
+ <br />
|
|
|
+ 2、曲目名后可添加曲目信息备注，包含但不限于曲目类型等。曲目名《xxxx》，举例：人生的旋转木马《哈尔的移动城堡》（长笛二重奏版）
|
|
|
+ <br />
|
|
|
+ 3、其他信息不要写在曲目名里，如歌手、上传人员昵称等。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ColFieldGroup class={styles.area}>
|
|
|
+ <ColField required title="艺术家">
|
|
|
<Field
|
|
|
clearable
|
|
|
class={styles['clear-px']}
|
|
|
- placeholder="请输入作曲人姓名"
|
|
|
+ placeholder="请输入艺术家姓名"
|
|
|
name="composer"
|
|
|
modelValue={this.composer}
|
|
|
- rules={[{ required: true, message: '请输入作曲人姓名' }]}
|
|
|
+ rules={[{ required: true, message: '请输入艺术家姓名' }]}
|
|
|
onUpdate:modelValue={val => (this.composer = val)}
|
|
|
/>
|
|
|
</ColField>
|
|
|
@@ -622,6 +757,11 @@ export default defineComponent({
|
|
|
></Field>
|
|
|
</ColField>
|
|
|
</ColFieldGroup>
|
|
|
+ <div class={styles.tips}>
|
|
|
+ <div class={styles.tipsContent}>
|
|
|
+ XML文件中，选择的曲目声部需要在总谱的置顶位置。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<ColFieldGroup class={styles.area}>
|
|
|
<ColField
|
|
|
border={false}
|
|
|
@@ -752,9 +892,12 @@ export default defineComponent({
|
|
|
clearable
|
|
|
class={styles['clear-px']}
|
|
|
placeholder="请输入收费价格"
|
|
|
+ formatter={this.onFormatter}
|
|
|
v-slots={{ button: () => '元' }}
|
|
|
modelValue={this.musicPrice}
|
|
|
- rules={[{ required: true, message: '请输入收费价格' }]}
|
|
|
+ rules={[
|
|
|
+ { required: true, validator, message: '请输入收费价格' }
|
|
|
+ ]}
|
|
|
onUpdate:modelValue={val => (this.musicPrice = val)}
|
|
|
/>
|
|
|
</ColField>
|
