h5-colexiu/src/teacher/music/upload/index.tsx

import { defineComponent } from 'vue'
import {
  Button,
  Field,
  Sticky,
  Form,
  Tag,
  Radio,
  RadioGroup,
  Popup,
  Icon,
  Empty,
  Picker,
  Toast
} from 'vant'
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
} from '@/constant/music'
import { getXmlInfo, FormatXMLInfo } from '@/helpers/music-xml'
import Upload from './upload'
import styles from './index.module.less'
import SelectTag from '@/student/music/search/select-tag'
import { browser } from '@/helpers/utils'
import { postMessage } from '@/helpers/native-message'
import { teacherState } from '@/teacher/teacher-cert/teacherState'
import request from '@/helpers/request'
import requestOrigin from 'umi-request'
import UploadIcon from './upload.svg'

export type BackgroundMp3 = {
  url?: string
  track?: string
}

export default defineComponent({
  name: 'MusicUpload',
  data() {
    return {
      audioType: 'MP3',
      xmlFileUrl: '',
      xmlFileLoading: false,
      midiUrl: '',
      midiLoading: false,
      mp3Url: '',
      bgmp3Url: '',
      mp3Loading: false,
      bgmp3Loading: false,
      musicSheetName: '',
      composer: '',
      speed: '',
      hasBeat: 0,
      chargeType: 0,
      showFingering: 1,
      canEvaluate: 1,
      musicPrice: '',
      selectTagVisible: false,
      subJectVisible: false,
      tags: [] as string[],
      tagsNames: [] as Array<{ [id in string]: string }>,
      formated: {} as FormatXMLInfo,
      tagVisibility: false,
      subjectListNames: {} as any,
      selectedSubjectList: null as any,
      vlewSubjectList: null as any,
      submitLoading: false,
      showPicker: false,
      music_sheet_service_fee: 0,
      backgroundMp3s: [
        {
          url: '',
          track: ''
        }
      ] as BackgroundMp3[]
    }
  },
  watch: {
    formated() {
      this.mergeXmlData(this.formated)
    },
    chargeType() {
      if (this.chargeType === 0) {
        this.musicPrice = ''
      }
    }
  },
  computed: {
    choiceSubjectIds() {
      // 选择的科目编号
      let ids = teacherState.teacherCert.subjectId
        ? teacherState.teacherCert.subjectId.split(',')
        : []
      ids = ids.map((item: any) => Number(item))
      return ids
    },
    subjectList() {
      // 学科列表
      return teacherState.subjectList || []
    },
    choiceSubject() {
      // 选择的科目
      let tempArr: any[] = []
      this.subjectList.forEach((parent: any) => {
        parent.subjects &&
          parent.subjects.forEach((sub: any) => {
            if (this.choiceSubjectIds.includes(sub.id)) {
              tempArr.push(sub as never)
            }
          })
      })
      return tempArr
    }
  },
  async mounted() {
    request
      .get('/api-teacher/sysConfig/queryByParamName', {
        params: {
          paramName: 'music_sheet_service_fee'
        }
      })
      .then(res => (this.music_sheet_service_fee = res.data.paramValue))
    // if (teacherState.subjectList.length <= 0) {
    request.get('/api-teacher/subject/subjectSelect').then(res => {
      teacherState.subjectList = res.data || []
      this.subjectListNames = this.getSubjectListNames(teacherState.subjectList)
    })

    // }
  },
  methods: {
    async submit(vals: any) {
      this.submitLoading = true
      try {
        const beatType = this.hasBeat ? 'MP3_METRONOME' : 'MP3'
        const mp3Type = this.audioType === 'MP3' ? beatType : 'MIDI'
        await request.post('/api-teacher/music/sheet/create', {
          data: {
            audioType: this.audioType,
            sourceType: 'TEACHER',
            mp3Type,
            url: this.hasBeat ? '' : this.mp3Url,
            metronomeUrl: this.hasBeat ? this.mp3Url : '',
            showFingering: Number(this.showFingering) || undefined,
            musicTag: this.tags.join(','),
            musicSubject: Number(this.selectedSubjectList?.label) || undefined,
            musicSheetName: this.musicSheetName,
            midiUrl: this.midiUrl,
            xmlFileUrl: this.xmlFileUrl,
            canEvaluate: Number(this.canEvaluate) || undefined,
            chargeType: this.chargeType === 0 ? 'FREE' : 'CHARGE',
            composer: this.composer,
            musicPrice: this.musicPrice,
            background: this.backgroundMp3s.map(item => ({
              audioFileUrl: this.hasBeat ? '' : this.bgmp3Url,
              track: item.track,
              metronomeUrl: this.hasBeat ? this.bgmp3Url : ''
            }))
          }
        })
      } catch (error) {}
      this.submitLoading = false

      Toast('上传成功')
      setTimeout(() => {
        postMessage({
          api: 'back'
        })
      }, 800)
      console.log(vals)
    },
    getSubjectListNames(list) {
      const data = {}
      for (const item of list) {
        data[item.id] = item.name
        if (item.subjects) {
          for (const sub of item.subjects) {
            data[sub.id] = sub.name
          }
        }
      }
      return data
    },
    failed() {
      console.log('failed', this.backgroundMp3s)
    },
    mergeXmlData(data: FormatXMLInfo) {
      this.formated = data
      this.backgroundMp3s = data.partNames.map((partName: string) => ({
        track: partName
      }))
      if (!this.musicSheetName) {
        this.musicSheetName = data.title
      }
      if (!this.composer) {
        this.composer = data.composer
      }
      if (!this.speed && data.speed) {
        this.speed = '' + data.speed
      }
    },
    readerFile(file: File) {
      const reader = new FileReader()
      reader.onload = () => {
        const xml = reader.result as string
        this.formated = getXmlInfo(xml)
      }
      reader.readAsText(file)
    },
    onChoice(val: any) {
      this.subJectVisible = false
      this.selectedSubjectList = [val]
    },
    onComfirm(tags: any, names: any) {
      this.tagsNames = names
      this.tagVisibility = false
      const data = Object.values(tags).flat().filter(Boolean) as string[]
      console.log(data)
      this.tags = data
    },
    naiveXMLFile() {
      this.xmlFileLoading = true
      postMessage({ api: 'chooseFile', content: { type: 'xml' } }, evt => {
        // @ts-ignore
        this.xmlFileUrl = evt?.fileUrl || this.xmlFileUrl || ''
        this.xmlFileLoading = false
        if (this.xmlFileUrl) {
          requestOrigin(this.xmlFileUrl).then(
            res => (this.formated = getXmlInfo(res))
          )
        }
      })
    },
    naiveMidFile() {
      this.midiLoading = true
      postMessage({ api: 'chooseFile', content: { type: 'midi' } }, evt => {
        // @ts-ignore
        this.midiUrl = evt?.fileUrl || this.midiUrl || ''
        this.midiLoading = false
        // this.midiUrl = path
      })
    },
    naiveMp3File() {
      this.mp3Loading = true
      postMessage({ api: 'chooseFile', content: { type: 'mp3' } }, evt => {
        // @ts-ignore
        this.mp3Url = evt?.fileUrl || this.mp3Url || ''
        this.mp3Loading = false
        // this.midiUrl = path
      })
    },
    naiveBGMp3File() {
      this.bgmp3Loading = true
      postMessage({ api: 'chooseFile', content: { type: 'mp3' } }, evt => {
        this.bgmp3Url
        // @ts-ignore
        this.bgmp3Url = evt?.fileUrl || this.bgmp3Url || ''
        this.bgmp3Loading = false
        // this.midiUrl = path
      })
    },
    fileName(name = '') {
      return name.split('/').pop()
    }
  },
  render() {
    console.log(this.formated)
    const browserInfo = browser()
    return (
      <Form onSubmit={this.submit} onFailed={this.failed}>
        <div class={styles.container}>
          <ColFieldGroup class={styles.area}>
            <ColField border={false} required title="MusicXML文件">
              <Field
                name="xmlFileUrl"
                modelValue={this.xmlFileUrl}
                rules={[{ required: true, message: '请选择MusicXML文件' }]}
                // @ts-ignore
                vSlots={{
                  input: () =>
                    browserInfo.isApp ? (
                      <Button
                        icon={UploadIcon}
                        class={styles.upbtn}
                        onClick={this.naiveXMLFile}
                        loading={this.xmlFileLoading}
                      >
                        {this.xmlFileUrl
                          ? this.fileName(this.xmlFileUrl)
                          : '上传文件'}
                      </Button>
                    ) : (
                      <Upload
                        onUpdate:modelValue={val => (this.xmlFileUrl = val)}
                        accept=".xml"
                        formatFile={this.readerFile}
                      />
                    )
                }}
              />
            </ColField>
            {/* <ColField required title="播放类型" border={false}>
              <RadioGroup
                class={styles['radio-group']}
                modelValue={this.audioType}
                onUpdate:modelValue={val => (this.audioType = val)}
              >
                {Object.keys(teachershowAudiType).map((item: string) => {
                  const isActive = item === this.audioType
                  const type = isActive ? 'primary' : 'default'
                  return (
                    <Radio class={styles.radio} name={item}>
                      <Tag size="large" plain={isActive} type={type}>
                        {teachershowAudiType[item]}
                      </Tag>
                    </Radio>
                  )
                })}
              </RadioGroup>
            </ColField> */}
            {this.audioType === 'MP3' ? (
              <>
                <ColField required title="是否带节拍器" border={false}>
                  <RadioGroup
                    class={styles['radio-group']}
                    modelValue={this.hasBeat}
                    onUpdate:modelValue={val => (this.hasBeat = val)}
                  >
                    {Object.keys(teachershowHasBeatType).map((item: string) => {
                      const isActive = item === String(this.hasBeat)
                      const type = isActive ? 'primary' : 'default'
                      return (
                        <Radio class={styles.radio} name={item}>
                          <Tag size="large" plain={isActive} type={type}>
                            {teachershowHasBeatType[item]}
                          </Tag>
                        </Radio>
                      )
                    })}
                  </RadioGroup>
                </ColField>
                <ColField border={false} title="伴奏文件">
                  <Field
                    name="mp3Url"
                    modelValue={this.mp3Url}
                    // @ts-ignore
                    vSlots={{
                      input: () =>
                        browserInfo.isApp ? (
                          <Button
                            icon={UploadIcon}
                            class={styles.upbtn}
                            onClick={this.naiveMp3File}
                            loading={this.mp3Loading}
                          >
                            {this.mp3Url
                              ? this.fileName(this.mp3Url)
                              : '上传文件'}
                          </Button>
                        ) : (
                          <Upload
                            onUpdate:modelValue={val => (this.mp3Url = val)}
                            accept=".mp3"
                          />
                        )
                    }}
                  />
                </ColField>
              </>
            ) : (
              <ColField border={false} required title="MIDI文件">
                <Field
                  name="midiUrl"
                  modelValue={this.midiUrl}
                  rules={[{ required: true, message: '请选择MIDI文件' }]}
                  // @ts-ignore
                  vSlots={{
                    input: () =>
                      browserInfo.isApp ? (
                        <Button
                          icon={UploadIcon}
                          class={styles.upbtn}
                          onClick={this.naiveMidFile}
                          loading={this.midiLoading}
                        >
                          {this.midiUrl
                            ? this.fileName(this.midiUrl)
                            : '上传文件'}
                        </Button>
                      ) : (
                        <Upload
                          onUpdate:modelValue={val => (this.midiUrl = val)}
                          accept=".mid"
                        />
                      )
                  }}
                />
              </ColField>
            )}
            {this.backgroundMp3s.map(item => (
              <ColField required border={false} title="原音文件">
                <Field
                  name="url"
                  modelValue={this.bgmp3Url}
                  rules={[{ required: true, message: '请选择原音文件' }]}
                  // @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"
                        />
                      )
                  }}
                />
              </ColField>
            ))}
          </ColFieldGroup>
          <ColFieldGroup class={styles.area}>
            <ColField required title="曲目名称">
              <Field
                clearable
                name="musicSheetName"
                modelValue={this.musicSheetName}
                rules={[{ required: true, message: '请输入曲目名称' }]}
                class={styles['clear-px']}
                placeholder="请输入曲目名称"
                onUpdate:modelValue={val => (this.musicSheetName = val)}
              />
            </ColField>
            <ColField required title="作曲人">
              <Field
                clearable
                class={styles['clear-px']}
                placeholder="请输入作曲人姓名"
                name="composer"
                modelValue={this.composer}
                rules={[{ required: true, message: '请输入作曲人姓名' }]}
                onUpdate:modelValue={val => (this.composer = val)}
              />
            </ColField>
            <ColField required title="默认速度">
              <Field
                clearable
                name="playSpeed"
                modelValue={this.speed}
                rules={[{ required: true, message: '请输入默认速度' }]}
                onUpdate:modelValue={val => (this.speed = val)}
                class={styles['clear-px']}
                placeholder="请输入默认速度"
              />
            </ColField>
            <ColField required title="曲目声部">
              <Field
                is-link
                readonly
                class={styles['clear-px']}
                placeholder="请选择曲目声部"
                name="vlewSubjectList"
                modelValue={this.vlewSubjectList?.value}
                rules={[{ required: true, message: '请选择曲目声部' }]}
                // onUpdate:modelValue={val => (this.selectedSubjectList = )}
                onClick={() => (this.showPicker = true)}
              ></Field>
            </ColField>
          </ColFieldGroup>
          <ColFieldGroup class={styles.area}>
            <ColField
              border={false}
              required
              title="曲目标签"
              v-slots={{
                right: () => (
                  <Button
                    class={styles.select}
                    round
                    type="primary"
                    size="small"
                    onClick={() => (this.tagVisibility = true)}
                  >
                    选择
                  </Button>
                )
              }}
            >
              <Field
                name="tags"
                modelValue={this.tags.length ? 1 : undefined}
                rules={[{ required: true, message: '请选择曲目标签' }]}
                // @ts-ignore
                vSlots={{
                  input: () =>
                    this.tags.length > 0 ? (
                      this.tags.map((item: any) => (
                        <Tag type="primary" size="large" class={styles.tags}>
                          {this.tagsNames[item]}
                        </Tag>
                      ))
                    ) : (
                      <Empty
                        style={{ width: '100%' }}
                        description="请选择曲目标签"
                        imageSize={0}
                      />
                    )
                }}
              />
            </ColField>
          </ColFieldGroup>
          <ColFieldGroup class={styles.area}>
            <ColField required title="是否评测" border={false}>
              <RadioGroup
                class={styles['radio-group']}
                modelValue={this.canEvaluate}
                onUpdate:modelValue={val => (this.canEvaluate = val)}
              >
                {Object.keys(teachercanEvaluateType).map((item: string) => {
                  const isActive = item === String(this.canEvaluate)
                  const type = isActive ? 'primary' : 'default'
                  return (
                    <Radio class={styles.radio} name={item}>
                      <Tag size="large" plain={isActive} type={type}>
                        {teachercanEvaluateType[item]}
                      </Tag>
                    </Radio>
                  )
                })}
              </RadioGroup>
            </ColField>
            <ColField required title="指法展示" border={false}>
              <RadioGroup
                class={styles['radio-group']}
                modelValue={this.showFingering}
                onUpdate:modelValue={val => (this.showFingering = val)}
              >
                {Object.keys(teachershowFingeringType).map((item: string) => {
                  const isActive = item === String(this.showFingering)
                  const type = isActive ? 'primary' : 'default'
                  return (
                    <Radio class={styles.radio} name={item}>
                      <Tag size="large" plain={isActive} type={type}>
                        {teachershowFingeringType[item]}
                      </Tag>
                    </Radio>
                  )
                })}
              </RadioGroup>
            </ColField>
            <ColField required title="是否收费" border={false}>
              <RadioGroup
                class={styles['radio-group']}
                modelValue={this.chargeType}
                onUpdate:modelValue={val => {
                  this.chargeType = Number(val)
                }}
              >
                {Object.keys(teacherChargeType).map((item: string) => {
                  const isActive = item === String(this.chargeType)
                  const type = isActive ? 'primary' : 'default'
                  return (
                    <Radio class={styles.radio} name={item}>
                      <Tag size="large" plain={isActive} type={type}>
                        {teacherChargeType[item]}
                      </Tag>
                    </Radio>
                  )
                })}
              </RadioGroup>
            </ColField>
            {this.chargeType === 2 && (
              <ColField required title="收费价格">
                <Field
                  clearable
                  class={styles['clear-px']}
                  placeholder="请输入收费价格"
                  v-slots={{ button: () => '元' }}
                  modelValue={this.musicPrice}
                  rules={[{ required: true, message: '请输入收费价格' }]}
                  onUpdate:modelValue={val => (this.musicPrice = val)}
                />
              </ColField>
            )}
          </ColFieldGroup>
          {this.chargeType === 2 && (
            <div class={styles.rule}>
              <p>扣除手续费后该曲目预计收入为：</p>
              <p>
                每人：
                <span>
                  {((parseFloat(this.musicPrice || '0') || 0) *
                    (100 - this.music_sheet_service_fee)) /
                    100}
                </span>
                元/人
              </p>
              <p>您的乐谱收入将在学员购买后结算到您的账户中</p>
            </div>
          )}
        </div>
        <Sticky offsetBottom={0} position="bottom">
          <div class={styles['button-area']}>
            <Button
              type="primary"
              block
              round
              native-type="submit"
              loading={this.submitLoading}
            >
              确认
            </Button>
          </div>
        </Sticky>
        <Popup
          show={this.showPicker}
          round
          position="bottom"
          teleport="body"
          onUpdate:show={val => (this.showPicker = val)}
        >
          <Picker
            columnsFieldNames={{
              text: 'value'
            }}
            columns={Object.entries(this.subjectListNames).map(
              ([key, value]) => ({ label: key, value })
            )}
            onCancel={() => (this.showPicker = false)}
            onConfirm={val => {
              this.selectedSubjectList = val
              this.vlewSubjectList = val
              this.showPicker = false
            }}
          />
        </Popup>

        <Popup
          show={this.subJectVisible}
          round
          closeable
          position="bottom"
          style={{ height: '60%' }}
          teleport="body"
          onUpdate:show={val => (this.subJectVisible = val)}
        >
          <SubjectModel
            subjectList={this.subjectList}
            choiceSubjectIds={this.choiceSubjectIds}
            onChoice={this.onChoice}
            selectType="Radio"
          />
        </Popup>
        <Popup
          show={this.tagVisibility}
          round
          closeable
          position="bottom"
          style={{ height: '60%' }}
          teleport="body"
          onUpdate:show={val => (this.tagVisibility = val)}
        >
          <SelectTag
            onComfirm={this.onComfirm}
            onCancel={() => {}}
            rowSingle
            needAllButton={false}
          />
        </Popup>
      </Form>
    )
  }
})