更新曲谱上传

src/components/col-cropper/index.tsx

@@ -56,6 +56,13 @@ export default defineComponent({
     cropUploadSuccess: {
       type: Function,
       default: (data: string) => {}
+    },
+    domSize: {
+      type: Object,
+      default: {
+        width: '150px',
+        height: '85px'
+      }
     }
   },
   data() {
@@ -151,12 +158,16 @@ export default defineComponent({
           <div
             ref="uploadDom"
             class={[styles.uploadClass, 'w-full']}
-            style={{ height: '85px' }}
+            style={{ height: this.domSize.height, width: this.domSize.width }}
           >
             {this.modelValue ? (
               <ElImage
                 src={this.modelValue}
                 fit="cover"
+                style={{
+                  height: this.domSize.height,
+                  width: this.domSize.width
+                }}
                 class={styles.uploadSection}
               />
             ) : (
@@ -165,6 +176,10 @@ export default defineComponent({
                   styles.uploadSection,
                   'flex items-center flex-col justify-center'
                 ]}
+                style={{
+                  height: this.domSize.height,
+                  width: this.domSize.width
+                }}
               >
                 <img src={iconUpload} class="w-8 h-7 mb-3" />
                 <p>{this.tips}</p>

src/style/index.css

@@ -46,3 +46,6 @@ body {
   background-color: #d5d5d5;
 }
 
+.el-input.is-disabled .el-input__inner {
+  color: #606266 !important;
+}

src/views/user-info/music-operation/index.module.less

@@ -60,6 +60,29 @@
 //   }
 // }
 
+.tips {
+  font-size: 12px;
+  color: #e0945a;
+  line-height: 18px;
+  padding: 15px 11px;
+  background: #fff3eb;
+  border-radius: 10px;
+  margin: 0 0 22px;
+
+  .tipsTitle {
+    font-size: 14px;
+    font-weight: 600;
+    color: #e0945a;
+    line-height: 20px;
+    padding-bottom: 6px;
+  }
+
+  span {
+    color: #5aa9e0;
+    cursor: pointer;
+  }
+}
+
 .rule {
   font-size: 14px;
   line-height: 27px;

src/views/user-info/music-operation/index.tsx

@@ -1,3 +1,4 @@
+import ColCropper from '@/components/col-cropper'
 import ColUpload from '@/components/col-upload'
 import request from '@/helpers/request'
 import { verifyNumberIntegerAndFloat } from '@/helpers/toolsValidate'
@@ -22,6 +23,17 @@ export type BackgroundMp3 = {
   track?: string
 }
 
+export const validator = (rule, value, callback) => {
+  console.log(value)
+  if (value == '') {
+    callback(new Error('请输入收费价格'))
+  } else if (Number(value) <= 0) {
+    callback(new Error('收费金额必须大于0'))
+  } else {
+    callback()
+  }
+}
+
 export default defineComponent({
   name: 'music-operation',
   data() {
@@ -33,6 +45,8 @@ export default defineComponent({
       submitLoading: false,
       reason: '',
       form: {
+        titleImg: '',
+        accompanimentType: 'HOMEMODE',
         audioType: 'MP3',
         xmlFileUrl: '',
         hasBeat: 0,
@@ -109,6 +123,8 @@ export default defineComponent({
         this.radioList = this.form.tags as any
 
         this.form.xmlFileUrl = res.data.xmlFileUrl
+        this.form.accompanimentType = res.data.accompanimentType
+        this.form.titleImg = res.data.titleImg
 
         this.form.audioType = res.data.mp3Type
 
@@ -145,6 +161,8 @@ export default defineComponent({
         audioType: form.audioType,
         sourceType: 'TEACHER',
         mp3Type,
+        accompanimentType: form.accompanimentType,
+        titleImg: form.titleImg,
         hasBeat: form.hasBeat,
         url: form.hasBeat ? '' : form.mp3Url,
         metronomeUrl: form.hasBeat ? form.mp3Url : '',
@@ -205,6 +223,17 @@ export default defineComponent({
           return false
         }
       })
+    },
+    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`
+      }
+
+      window.open(url)
     }
   },
   render() {
@@ -222,6 +251,20 @@ export default defineComponent({
           ref="form"
           class="px-7 py-5"
         >
+          <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>
           <ElFormItem
             label="上传XML"
             prop="xmlFileUrl"
@@ -235,7 +278,22 @@ export default defineComponent({
               extraTips="文件最大不能超过5MB"
             />
           </ElFormItem>
-
+          <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>
           <ElFormItem
             label="播放类型"
             prop="audioType"
@@ -267,6 +325,20 @@ export default defineComponent({
                   </ElRadioButton>
                 </ElRadioGroup>
               </ElFormItem>
+              <ElFormItem
+                label="是否带节拍器"
+                prop="accompanimentType"
+                rules={[{ required: true, message: '请选择是否带节拍器' }]}
+              >
+                <ElRadioGroup v-model={this.form.accompanimentType}>
+                  <ElRadioButton label={'HOMEMODE'} class="mr-3 w-24">
+                    自制伴奏
+                  </ElRadioButton>
+                  <ElRadioButton label={'COMMON'} class="w-24">
+                    普通伴奏
+                  </ElRadioButton>
+                </ElRadioGroup>
+              </ElFormItem>
               <ElFormItem label="伴奏文件" prop="mp3Url">
                 <ColUpload
                   v-model:modelValue={this.form.mp3Url}
@@ -277,37 +349,65 @@ export default defineComponent({
                   extraTips="文件最大不能超过8MB"
                 />
               </ElFormItem>
+            </>
+          ) : (
+            <>
               <ElFormItem
-                label="原音文件"
-                prop="bgmp3Url"
-                rules={[{ required: true, message: '请选择原音文件' }]}
+                label="是否带节拍器"
+                prop="accompanimentType"
+                rules={[{ required: true, message: '请选择是否带节拍器' }]}
+              >
+                <ElRadioGroup v-model={this.form.accompanimentType}>
+                  <ElRadioButton label={'HOMEMODE'} class="mr-3 w-24">
+                    自制伴奏
+                  </ElRadioButton>
+                  <ElRadioButton label={'COMMON'} class="w-24">
+                    普通伴奏
+                  </ElRadioButton>
+                </ElRadioGroup>
+              </ElFormItem>
+              <ElFormItem
+                label="MIDI文件"
+                prop="midiUrl"
+                rules={[{ required: true, message: '请选择MIDI文件' }]}
               >
                 <ColUpload
-                  v-model:modelValue={this.form.bgmp3Url}
+                  v-model:modelValue={this.form.midiUrl}
                   bucket={'cloud-coach'}
-                  accept={'.mp3'}
+                  accept={'.midi'}
                   uploadType={'file'}
+                  size={8}
                   extraTips="文件最大不能超过8MB"
                 />
               </ElFormItem>
             </>
-          ) : (
+          )}
+          <div class={styles.tips}>
+            <div class={styles.tipsContent}>
+              1、推荐上传自制伴奏，伴奏和谱面必须对齐。自制伴奏可以设置更高的收费标准。
+              <br />
+              2、普通伴奏如果涉及到版权纠纷，根据
+              <span onClick={() => this.onDetail('protocol')}>
+                《用户注册协议》
+              </span>
+              平台有权进行下架处理。
+            </div>
+          </div>
+          {this.form.audioType === 'MP3' && (
             <ElFormItem
-              label="MIDI文件"
-              prop="midiUrl"
-              rules={[{ required: true, message: '请选择MIDI文件' }]}
+              label="原音文件"
+              prop="bgmp3Url"
+              rules={[{ required: true, message: '请选择原音文件' }]}
             >
               <ColUpload
-                v-model:modelValue={this.form.midiUrl}
+                v-model:modelValue={this.form.bgmp3Url}
                 bucket={'cloud-coach'}
-                accept={'.midi'}
+                accept={'.mp3'}
                 uploadType={'file'}
-                size={8}
                 extraTips="文件最大不能超过8MB"
               />
             </ElFormItem>
           )}
-
           <ElFormItem
             label="曲目名称"
             prop="musicSheetName"
@@ -319,11 +419,45 @@ export default defineComponent({
             />
           </ElFormItem>
           <ElFormItem
-            label="作曲人"
+            label="曲谱封面"
+            prop="titleImg"
+            rules={[
+              {
+                required: true,
+                message: '请上传曲谱封面'
+              }
+            ]}
+          >
+            <ColCropper
+              modelValue={this.form.titleImg}
+              bucket={'cloud-coach'}
+              cropUploadSuccess={(data: any) => {
+                this.form.titleImg = data
+              }}
+              domSize={{ height: '150px' }}
+              options={{
+                title: '曲谱封面',
+                enlarge: 2,
+                autoCropWidth: 300,
+                autoCropHeight: 300
+              }}
+            />
+          </ElFormItem>
+          <div class={styles.tips}>
+            <div class={styles.tipsContent}>
+              1、同一首曲目不可重复上传，如有不同版本统一用“（）”补充。举例：人生的旋转木马（长笛二重奏版）。
+              <br />
+              2、曲目名后可添加曲目信息备注，包含但不限于曲目类型等。曲目名《xxxx》，举例：人生的旋转木马《哈尔的移动城堡》（长笛二重奏版）
+              <br />
+              3、其他信息不要写在曲目名里，如歌手、上传人员昵称等。
+            </div>
+          </div>
+          <ElFormItem
+            label="艺术家"
             prop="composer"
-            rules={[{ required: true, message: '请输入作曲人' }]}
+            rules={[{ required: true, message: '请输入艺术家' }]}
           >
-            <ElInput v-model={this.form.composer} placeholder="请输入作曲人" />
+            <ElInput v-model={this.form.composer} placeholder="请输入艺术家" />
           </ElFormItem>
           <ElFormItem
             label="曲目声部"
@@ -352,6 +486,11 @@ export default defineComponent({
               ))}
             </ElSelect>
           </ElFormItem>
+          <div class={styles.tips}>
+            <div class={styles.tipsContent}>
+              XML文件中，选择的曲目声部需要在总谱的置顶位置。
+            </div>
+          </div>
           <ElFormItem
             label="曲目标签"
             prop="tags"
@@ -387,9 +526,9 @@ export default defineComponent({
             </div>
           </ElFormItem>
           <ElFormItem
-            label="是否可以转简谱"
+            label="支持简谱"
             prop="notation"
-            rules={[{ required: true, message: '请选择是否可以转简谱' }]}
+            rules={[{ required: true, message: '请选择是否支持简谱' }]}
           >
             <ElRadioGroup v-model={this.form.notation}>
               <ElRadioButton label={0} class="mr-3 w-24">
@@ -447,7 +586,7 @@ export default defineComponent({
               <ElFormItem
                 label="收费价格"
                 prop="musicPrice"
-                rules={[{ required: true, message: '请输入收费价格' }]}
+                rules={[{ required: true, validator }]}
               >
                 <ElInput
                   v-model={this.form.musicPrice}