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

import { defineComponent } from 'vue'
import {
  Button,
  Field,
  Form,
  Tag,
  Radio,
  RadioGroup,
  Popup,
  Empty,
  Toast,
  CellGroup
} from 'vant'
import { state as appState } from '@/state'
import { teachershowAudiType, teacherPaymentType } from '@/constant/music'
import { getXmlInfo, FormatXMLInfo } from '@/helpers/music-xml'
import Upload from './upload'
import styles from './index.module.less'

import { browser } from '@/helpers/utils'
import { postMessage } from '@/helpers/native-message'
import request from '@/helpers/request'
import requestOrigin from 'umi-request'
import UploadIcon from './images/music-icon.png'
import btnBg from './images/btn-bg.png'
import iconBrid from './images/icon-brid.png'
import iconTitleUpload from './images/icon-title-upload.png'
import iconTitleUpdate from './images/icon-title-update.png'
import ColUpload from '@/components/col-upload'
import {
  verifiyNumberInteger,
  verifyNumberIntegerAndFloat
} from '@/helpers/toolsValidate'
import ColHeader from '@/components/col-header'
import ColSticky from '@/components/col-sticky'
import MessageTip from './message-tip'
import SelectTag from './select-tag'
import ListenAudio from './listen-audio'

export type BackgroundMp3 = {
  url?: string
  id?: string
  trackName?: string
  track?: string
  loading?: boolean
}

// 校验函数返回 true 表示校验通过，false 表示不通过
export const validator = val => {
  if (Number(val) <= 0) {
    return '收费金额必须大于0'
  } else {
    return true
  }
}

export default defineComponent({
  name: 'MusicUpload',
  data() {
    return {
      reason: '',
      playMode: 'MP3',
      xmlFileUrl: '',
      xmlFileLoading: false,
      midiFileUrl: '',
      midiLoading: false,
      mp3Url: '',
      bgmp3Url: '',
      mp3Loading: false,
      name: '',
      composer: '',
      remark: '',
      // repeatedBeats: 0,
      playSpeed: '' as any,
      // hasBeat: 0,
      musicCover: '',
      paymentType: 'FREE',
      // showFingering: 1,
      // canEvaluate: 1,
      // notation: 1,
      musicPrice: '',
      // subJectIndex: 0,
      // subjectIds: [] as any, // 可用声部
      musicalInstrumentIdList: [] as any, // 可用乐器
      selectTagVisible: false,
      subJectVisible: false,
      instrumentVisible: false,
      tags: [] as any[],
      tagsNames: [] as Array<{ [id in string]: string }>,
      formated: {} as FormatXMLInfo,
      tagVisibility: false,
      listenAudioShow: false,
      // subjectListres: [] as any[],
      // subjectListNames: {} as any,
      // selectedSubjectList: null as any,
      // vlewSubjectList: null as any,
      submitLoading: false,
      // showPicker: false,
      music_sheet_service_fee: 0,
      music_account_period: 0,
      // exquisiteFlag: 0,
      backgroundMp3s: [] as BackgroundMp3[],
      // checked: false,
      auditStatus: '' as any,
      messageTipStatus: false,
      messageTipTitle: '上传须知',
      messageTipType: 'upload' as 'upload' | 'error' | 'origin',
      cbsInstrumentList: [] as any,
      tagList: [] as any,
      musicSheetAuthRecordId: null as any,
      fileInfo: {
        url: '',
        name: '' as any
      }
    }
  },
  watch: {
    formated() {
      this.mergeXmlData(this.formated)
    }
  },
  computed: {
    auditDisabled(): boolean {
      return this.auditStatus === 'DOING'
    }
  },
  async mounted() {
    const isCatchTip = localStorage.getItem('isCatchTip')
    if (!isCatchTip) {
      this.messageTipStatus = true
    }
    // 获取基础数据
    request
      .get('/api-teacher/sysConfig/queryByParamNameList', {
        params: {
          paramNames: 'music_sheet_service_fee,music_account_period'
        }
      })
      .then((res: any) => {
        const data = res.data || []
        data.forEach((item: any) => {
          if (item.paramName === 'music_sheet_service_fee') {
            this.music_sheet_service_fee = item.paramValue
          } else if (item.paramName === 'music_account_period') {
            this.music_account_period = item.paramValue
          }
        })
      })

    const prefix =
      appState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'

    request(prefix + '/MusicTag/tree').then((res: any) => {
      this.tagList = res.data || []
    })

    if (this.$route.params.id) {
      this.setDetail(this.$route.params.id as string)
    }

    request
      .post('/api-teacher/musicalInstrument/list')
      .then((response: any) => {
        const data = response.data || []
        data.forEach((item: any) => {
          this.cbsInstrumentList.push({
            id: item.id,
            name: item.name,
            code: item.code,
            loading: false
          })
        })
      })
  },
  methods: {
    async setDetail(id: string) {
      try {
        const { data } = await request.get(
          `/api-teacher/music/sheet/detail/${id}`
        )

        this.musicSheetAuthRecordId = data.musicSheetAuthRecordId // 审核编号
        this.auditStatus = data.auditStatus
        console.log(this.musicSheetAuthRecordId)
        this.playMode = data.audioType || 'MP3'
        this.xmlFileUrl = data.xmlFileUrl
        this.name = data.musicSheetName
        this.composer = data.composer
        this.playSpeed = data.playSpeed
        // this.tags = data.musicTag?.split(',')
        const names = data.musicTagNames.split(',')
        this.tags = data.musicTag.split(',')
        this.tags = this.tags
          .filter((el: any) => {
            return el != ''
          })
          .map(e => Number(e))
        for (let i = 0; i < names.length; i++) {
          this.tagsNames[this.tags[i]] = names[i]
        }

        this.musicCover = data.titleImg
        this.midiFileUrl = data.midiUrl
        this.mp3Url = data.metronomeUrl
        this.remark = data.remark
        this.paymentType = data.paymentType
        this.musicPrice = data.musicPrice || 0
        // this.extConfigJson = data.extConfigJson
        this.backgroundMp3s = data.background.map((item: any) => {
          return {
            url: item.audioFileUrl,
            trackName: item.musicalInstrumentName,
            id: item.musicalInstrumentId,
            track: item.track,
            loading: false
          }
        })
      } catch (error) {
        console.log(error)
      }
    },
    onComfirm(tags: any) {
      const names: any = []
      this.tagList.forEach(tag => {
        if (tags.includes(tag.id)) {
          names[tag.id] = tag.name
        }
      })
      this.tagsNames = names
      this.tagVisibility = false
      const data = Object.values(tags).flat().filter(Boolean) as string[]
      console.log(data)
      this.tags = data
    },
    readerFile(file: File) {
      const reader = new FileReader()
      reader.onload = () => {
        const xml = reader.result as string
        const formated = getXmlInfo(xml)

        let resultIndexStatus = false
        const partNames = formated.partNames || []

        const tempMp3s: BackgroundMp3[] = []

        for (const i of partNames) {
          let index = -1
          this.cbsInstrumentList.forEach((item: any, j: number) => {
            const code = item.code ? item.code.split(',') : ''
            for (const p of code) {
              if (i.indexOf(p) > -1) {
                index = j
              }
            }
          })

          if (index === -1) {
            resultIndexStatus = true
            break
          }

          const currentItem = this.cbsInstrumentList[index]
          if (currentItem) {
            tempMp3s.push({
              url: '',
              id: currentItem.id,
              trackName: currentItem.name,
              track: i,
              loading: currentItem.loading
            })
          }
        }

        if (partNames.length <= 0 || resultIndexStatus) {
          this.messageTipStatus = true
          this.messageTipTitle = '解析失败'
          this.messageTipType = 'error'
          this.xmlFileUrl = ''
          return
        }

        this.formated = formated
        this.backgroundMp3s = tempMp3s
      }
      reader.readAsText(file)
    },
    mergeXmlData(data: FormatXMLInfo) {
      this.formated = data
      // this.backgroundMp3s = data.partNames.map((partName: string) => ({
      //   track: partName
      // }))
      if (!this.name) {
        this.name = data.title
      }
      if (!this.composer) {
        this.composer = data.composer
      }
      if (!this.playSpeed && data.speed) {
        this.playSpeed = '' + data.speed
      } else {
        this.playSpeed = '100'
      }
    },
    naiveXMLFile() {
      this.xmlFileLoading = true
      postMessage(
        { api: 'chooseFile', content: { type: 'xml', bucket: 'cloud-coach' } },
        evt => {
          // @ts-ignore
          this.xmlFileUrl = evt?.fileUrl || this.xmlFileUrl || ''
          this.xmlFileLoading = false
          if (this.xmlFileUrl) {
            requestOrigin(this.xmlFileUrl).then(res => {
              // this.formated = getXmlInfo(res)
              const formated = getXmlInfo(res)

              let resultIndexStatus = false
              const partNames = formated.partNames || []

              const tempMp3s: BackgroundMp3[] = []
              for (const i of partNames) {
                let index = -1
                this.cbsInstrumentList.forEach((item: any, j: number) => {
                  const code = item.code ? item.code.split(',') : ''
                  for (const p of code) {
                    if (i.indexOf(p) > -1) {
                      index = j
                    }
                  }
                })
                if (index === -1) {
                  resultIndexStatus = true
                  break
                }

                const currentItem = this.cbsInstrumentList[index]
                if (currentItem) {
                  console.log(currentItem, 'currentItem')
                  tempMp3s.push({
                    url: '',
                    id: currentItem.id,
                    trackName: currentItem.name,
                    track: i,
                    loading: currentItem.loading
                  })
                }
              }

              if (partNames.length <= 0 || resultIndexStatus) {
                this.messageTipStatus = true
                this.messageTipTitle = '解析失败'
                this.messageTipType = 'error'
                this.xmlFileUrl = ''
                return
              }

              this.formated = formated
              this.backgroundMp3s = tempMp3s
            })
          }
        }
      )
    },
    naiveMidFile() {
      this.midiLoading = true
      postMessage(
        { api: 'chooseFile', content: { type: 'midi', bucket: 'cloud-coach' } },
        evt => {
          // @ts-ignore
          this.midiFileUrl = evt?.fileUrl || this.midiFileUrl || ''
          this.midiLoading = false
          // this.midiFileUrl = path
        }
      )
    },
    naiveMp3File() {
      this.mp3Loading = true
      postMessage(
        { api: 'chooseFile', content: { type: 'mp3', bucket: 'cloud-coach' } },
        evt => {
          // @ts-ignore
          this.mp3Url = evt?.fileUrl || this.mp3Url || ''
          this.mp3Loading = false
          // this.midiFileUrl = path
        }
      )
    },
    naiveBGMp3File(index) {
      this.backgroundMp3s[index].loading = true
      postMessage(
        { api: 'chooseFile', content: { type: 'mp3', bucket: 'cloud-coach' } },
        evt => {
          // @ts-ignore
          const url = evt?.fileUrl || this.backgroundMp3s[index].url || ''
          this.backgroundMp3s[index].url = url
          this.backgroundMp3s[index].loading = false
        }
      )
    },
    onFormatter(val: any) {
      return verifyNumberIntegerAndFloat(val)
    },
    onFormatter2(val: any) {
      const num = verifiyNumberInteger(val)
      // if (num && Number(num) > 270) {
      //   return '270'
      // }
      // if (num && Number(num) < 45) {
      //   return '45'
      // }
      return num
    },
    fileName(name = '') {
      return name?.split('/').pop()
    },
    createSubmitData() {
      return {
        musicSheetJson: {
          playMode: this.playMode, // 播放模式
          xmlFileUrl: this.xmlFileUrl, // XML
          name: this.name, // 曲目名称
          composer: this.composer, // 音乐人
          playSpeed: this.playSpeed, // 曲目速度
          remark: this.remark,
          musicTagIds: this.tags?.join(','),
          musicCover: this.musicCover, // 曲目封面
          multiTracksSelection: this.backgroundMp3s
            .map(item => item.track)
            ?.join(','), // 声轨名
          midiFileUrl: this.midiFileUrl, // MID文件
          musicSheetAccompanimentList: [
            {
              audioFileUrl: this.mp3Url,
              sortNumber: 1,
              audioPlayType: 'PLAY'
            }
          ], // 伴奏
          musicPrice: this.musicPrice,
          paymentType: this.paymentType,
          // audioType: 'HOMEMODE', // HOMEMODE  默认自制
          musicSheetSoundList: this.backgroundMp3s.map(item => ({
            musicalInstrumentId: item.id,
            musicalInstrumentName: item.trackName,
            track: item.track,
            audioFileUrl: item.url,
            audioPlayType: 'PLAY' // SING
          })), // 原音
          musicalInstrumentIds: this.backgroundMp3s
            .map(item => item.id)
            ?.join(','), // 乐器编号
          extConfigJson: '{"repeatedBeats":0,"gradualTimes":{},"isEvxml":0}'
        }
      }
    },
    async onSubmit(vals: any) {
      console.log(vals, this.createSubmitData())
      this.submitLoading = true
      try {
        if (this.$route.params.id) {
          await request.post('/api-teacher/musicSheetAuthRecord/update', {
            data: {
              ...this.createSubmitData(),
              id: this.musicSheetAuthRecordId
            }
          })
        } else {
          await request.post('/api-teacher/musicSheetAuthRecord/save', {
            data: this.createSubmitData()
          })
        }
        Toast('上传成功')
        setTimeout(() => {
          postMessage({
            api: 'back'
          })
        }, 800)
      } catch (error) {
        //
      } finally {
        setTimeout(() => {
          this.submitLoading = false
        }, 800)
      }

      console.log(vals)
    },
    onFailed(e: any) {
      console.log('failed', e)
    }
  },
  render() {
    return (
      <Form
        class={styles.form}
        onSubmit={this.onSubmit}
        onFailed={this.onFailed}
        disabled={this.auditDisabled}
      >
        <ColHeader
          title=" "
          hideHeader={false}
          background="transparent"
          border={false}
        />

        <div class={styles.bridSection}>
          <img src={iconBrid} class={styles.iconBrid} />
        </div>
        <CellGroup class={[styles.area, styles.topArea]} border={false}>
          <div
            class={styles.uploadMessage}
            onClick={() => {
              this.messageTipStatus = true
              this.messageTipTitle = '上传须知'
              this.messageTipType = 'upload'
            }}
          >
            上传须知
          </div>

          <img
            class={styles.titleImg}
            src={this.$route.params.id ? iconTitleUpdate : iconTitleUpload}
          />

          <div class={styles['section-title']}></div>
          <Field required label="播放模式" center inputAlign="right">
            {{
              input: () => (
                <RadioGroup
                  class={styles['radio-group']}
                  modelValue={this.playMode}
                  onUpdate:modelValue={val => (this.playMode = val)}
                  disabled={this.auditDisabled}
                >
                  {Object.keys(teachershowAudiType).map((item: string) => {
                    const isActive = item === this.playMode
                    const type = isActive ? 'primary' : 'default'
                    return (
                      <Radio class={styles.radio} name={item}>
                        <Tag size="large" plain={isActive} type={type}>
                          {teachershowAudiType[item]}
                        </Tag>
                      </Radio>
                    )
                  })}
                </RadioGroup>
              )
            }}
          </Field>

          {this.playMode === 'MP3' && (
            <Field
              name="mp3Url"
              class={styles.fieldTypeBottom}
              modelValue={this.mp3Url}
              rules={[{ required: true, message: '请选择MP3文件' }]}
            >
              {{
                label: () => (
                  <div class={styles.fieldTitle}>
                    <span>
                      <i>*</i>上传伴奏
                    </span>
                    <span class={styles.titleTip}>仅支持MP3格式文件</span>
                  </div>
                ),
                input: () =>
                  browser().isApp ? (
                    <div class={styles.btnSection}>
                      <Button
                        icon={UploadIcon}
                        class={styles.upbtn}
                        loading={this.mp3Loading}
                        disabled={this.auditDisabled}
                        onClick={() => {
                          if (this.mp3Url) {
                            this.listenAudioShow = true
                            this.fileInfo = {
                              url: this.mp3Url,
                              name: this.fileName(this.mp3Url)
                            }
                            return
                          }
                          this.naiveMp3File()
                        }}
                      >
                        {this.mp3Url
                          ? <span style='text-decoration-line: underline;color: #14BC9C;'>{this.fileName(this.mp3Url)}</span>
                          : '上传伴奏文件'}
                      </Button>

                      {this.mp3Url && !this.auditDisabled && (
                        <i
                          class={styles.iconDelete}
                          onClick={() => {
                            this.mp3Url = ''
                          }}
                        ></i>
                      )}
                    </div>
                  ) : (
                    <>
                      <Upload
                        onUpdate:modelValue={val => {
                          this.mp3Url = val
                        }}
                        accept=".mp3"
                        disabled={this.auditDisabled}
                      />
                      <div
                        style={{ marginLeft: '8px' }}
                        onClick={() => {
                          this.listenAudioShow = true
                          this.fileInfo = {
                            url: this.mp3Url,
                            name: this.fileName(this.mp3Url)
                          }
                        }}
                      >
                        {this.fileName(this.mp3Url)}
                      </div>
                    </>
                  )
              }}
            </Field>
          )}

          {this.playMode === 'MIDI' && (
            <Field
              name="midiFileUrl"
              class={styles.fieldTypeBottom}
              modelValue={this.midiFileUrl}
              rules={[{ required: true, message: '请选择MIDI文件' }]}
            >
              {{
                label: () => (
                  <div class={styles.fieldTitle}>
                    <span>
                      <i>*</i>上传MIDI
                    </span>
                    <span class={styles.titleTip}>仅支持MIDI格式文件</span>
                  </div>
                ),
                input: () =>
                  browser().isApp ? (
                    <div class={styles.btnSection}>
                      <Button
                        icon={UploadIcon}
                        class={styles.upbtn}
                        loading={this.mp3Loading}
                        disabled={this.auditDisabled}
                        onClick={() => {
                          if (this.midiFileUrl) return
                          this.naiveMidFile()
                        }}
                      >
                        {this.midiFileUrl
                          ? this.fileName(this.midiFileUrl)
                          : '上传MIDI文件'}
                      </Button>

                      {this.midiFileUrl && !this.auditDisabled && (
                        <i
                          class={styles.iconDelete}
                          onClick={() => {
                            this.midiFileUrl = ''
                          }}
                        ></i>
                      )}
                    </div>
                  ) : (
                    <>
                      <Upload
                        onUpdate:modelValue={val => (this.midiFileUrl = val)}
                        accept=".mid"
                        formatFile={this.readerFile}
                        disabled={this.auditDisabled}
                      />
                      <div style={{ marginLeft: '8px' }}>
                        {this.fileName(this.midiFileUrl)}
                      </div>
                    </>
                  )
              }}
            </Field>
          )}

          <Field
            name="xmlFileUrl"
            class={styles.fieldTypeBottom}
            modelValue={this.xmlFileUrl}
            rules={[{ required: true, message: '请选择XML文件' }]}
          >
            {{
              label: () => (
                <div class={styles.fieldTitle}>
                  <span>
                    <i>*</i>上传XML
                  </span>
                  <span class={styles.titleTip}>仅支持XML格式文件</span>
                </div>
              ),
              input: () =>
                browser().isApp ? (
                  <div class={styles.btnSection}>
                    <Button
                      icon={UploadIcon}
                      class={styles.upbtn}
                      loading={this.xmlFileLoading}
                      disabled={this.auditDisabled}
                      onClick={() => {
                        if (this.xmlFileUrl) return
                        this.naiveXMLFile()
                      }}
                    >
                      {this.xmlFileUrl
                        ? this.fileName(this.xmlFileUrl)
                        : '上传XML文件'}
                    </Button>

                    {this.xmlFileUrl && !this.auditDisabled && (
                      <i
                        class={styles.iconDelete}
                        onClick={() => {
                          this.xmlFileUrl = ''
                          this.backgroundMp3s = []
                        }}
                      ></i>
                    )}
                  </div>
                ) : (
                  <>
                    <Upload
                      onUpdate:modelValue={val => (this.xmlFileUrl = val)}
                      accept=".xml,."
                      formatFile={this.readerFile}
                      disabled={this.auditDisabled}
                    />
                    <div style={{ marginLeft: '8px' }}>
                      {this.fileName(this.xmlFileUrl)}
                    </div>
                  </>
                )
            }}
          </Field>

          {this.backgroundMp3s.length >= 1 && this.playMode === 'MP3' && (
            <>
              <Field
                class={[styles.fieldTypeBottom, styles.hideValue]}
                modelValue={this.xmlFileUrl}
                border={false}
              >
                {{
                  label: () => (
                    <div class={styles.fieldTitle}>
                      <span class={styles.titleName}>
                        <i>*</i>上传原音
                        <i
                          class={styles.iconQuestion}
                          onClick={() => {
                            this.messageTipStatus = true
                            this.messageTipTitle = '原音文件'
                            this.messageTipType = 'origin'
                          }}
                        ></i>
                      </span>
                      <span class={styles.titleTip}>仅支持MP3格式文件</span>
                    </div>
                  )
                }}
              </Field>

              {this.backgroundMp3s.map((mp3, index) => (
                <Field
                  name="url"
                  class={[styles.fieldTypeBottom, styles.musicTrack]}
                  modelValue={mp3.url}
                  rules={[{ required: true, message: '请选择原音文件文件' }]}
                >
                  {{
                    label: () => (
                      <div class={styles.fieldTitle}>
                        <span>所属轨道：{mp3.trackName}</span>
                      </div>
                    ),
                    input: () =>
                      browser().isApp ? (
                        <div class={styles.btnSection}>
                          <Button
                            icon={UploadIcon}
                            class={styles.upbtn}
                            loading={mp3.loading}
                            disabled={this.auditDisabled}
                            onClick={() => {
                              if (mp3.url) return
                              this.naiveBGMp3File(index)
                            }}
                          >
                            {mp3.url ? this.fileName(mp3.url) : '上传原声文件'}
                          </Button>

                          {mp3.url && !this.auditDisabled && (
                            <i
                              class={styles.iconDelete}
                              onClick={() => {
                                mp3.url = ''
                              }}
                            ></i>
                          )}
                        </div>
                      ) : (
                        <>
                          <Upload
                            onUpdate:modelValue={val => (mp3.url = val)}
                            accept=".mp3"
                            disabled={this.auditDisabled}
                          />
                          <div style={{ marginLeft: '8px' }}>
                            {this.fileName(mp3.url)}
                          </div>
                        </>
                      )
                  }}
                </Field>
              ))}
            </>
          )}
        </CellGroup>

        <CellGroup class={[styles.area]} border={false}>
          <div
            class={[styles['section-title'], styles['section-title2']]}
          ></div>

          <Field
            label="曲目名称"
            required
            name="name"
            modelValue={this.name}
            rules={[{ required: true, message: '请输入曲目名称' }]}
            errorMessageAlign="right"
            placeholder="请输入曲目名称"
            inputAlign="right"
            autocomplete="off"
            maxlength={20}
            onUpdate:modelValue={val => (this.name = val)}
          />

          <Field
            label="音乐人"
            required
            name="composer"
            modelValue={this.composer}
            rules={[{ required: true, message: '请输入音乐人' }]}
            errorMessageAlign="right"
            placeholder="请输入音乐人"
            inputAlign="right"
            autocomplete="off"
            maxlength={14}
            onUpdate:modelValue={val => (this.composer = val)}
          />

          <Field
            label="曲目描述"
            clearable
            name="remark"
            modelValue={this.remark}
            onUpdate:modelValue={val => (this.remark = val)}
            class={[styles.fieldTypeBottom, styles.textareaType]}
            placeholder="请输入曲目描述"
            type="textarea"
            maxlength={200}
            showWordLimit
          />

          <Field
            label="曲目封面"
            required
            class={[styles.fieldTypeBottom]}
            rules={[{ required: true, message: '请上传曲目封面' }]}
          >
            {{
              input: () => (
                <ColUpload
                  cropper
                  bucket="cloud-coach"
                  tips="上传封面"
                  disabled={this.auditDisabled}
                  options={{
                    autoCropWidth: 600,
                    autoCropHeight: 600
                  }}
                  v-model={this.musicCover}
                  class={styles.imgContainer}
                />
              )
            }}
          </Field>

          <Field
            required
            label="曲目速度"
            name="playSpeed"
            inputAlign="right"
            rules={[{ required: true, message: '请输入曲目速度' }]}
            errorMessageAlign="right"
            v-model={this.playSpeed}
            placeholder="请输入曲目速度，范围45-270"
            // class={styles.inputControl}
            formatter={this.onFormatter2}
            onBlur={() => {
              if (this.playSpeed && Number(this.playSpeed) > 270) {
                this.playSpeed = '270'
              }
              if (this.playSpeed && Number(this.playSpeed) < 45) {
                this.playSpeed = '45'
              }
            }}
            autocomplete="off"
          ></Field>

          <Field
            label="曲目标签"
            placeholder="请选择曲目标签"
            inputAlign="right"
            isLink
            required
            readonly
            border={this.tags.length > 0 ? false : true}
            name="tags"
            modelValue={this.tags?.join(',')}
            class={this.tags.length > 0 ? styles.tagMore : ''}
            rules={[{ required: true, message: '请选择曲目标签' }]}
            errorMessageAlign="right"
            disabled={this.auditDisabled}
            onClick={() => {
              if (this.auditDisabled) return
              this.tagVisibility = true
            }}
          ></Field>
          {this.tags.length > 0 && (
            <Field class={styles.showField}>
              {{
                input: () =>
                  this.tags.length > 0 ? (
                    this.tags.map((item: any, index: number) => (
                      <Tag
                        type="primary"
                        size="large"
                        class={styles.tags}
                        closeable={!this.auditDisabled}
                        onClose={() => {
                          this.tags.splice(index, 1)
                        }}
                      >
                        {this.tagsNames[item]}
                      </Tag>
                    ))
                  ) : (
                    <Empty
                      style={{ width: '100%' }}
                      description="请选择曲目标签"
                      imageSize={0}
                    />
                  )
              }}
            </Field>
          )}

          <Field required label="是否收费" center inputAlign="right">
            {{
              input: () => (
                <RadioGroup
                  class={styles['radio-group']}
                  modelValue={this.paymentType}
                  onUpdate:modelValue={val => {
                    this.paymentType = val
                  }}
                  disabled={this.auditDisabled}
                >
                  {Object.keys(teacherPaymentType).map((item: string) => {
                    const isActive = item === String(this.paymentType)
                    const type = isActive ? 'primary' : 'default'
                    return (
                      <Radio class={styles.radio} name={item}>
                        <Tag size="large" plain={isActive} type={type}>
                          {teacherPaymentType[item]}
                        </Tag>
                      </Radio>
                    )
                  })}
                </RadioGroup>
              )
            }}
          </Field>
          {this.paymentType === 'CHARGE' && (
            <>
              <Field
                label="收费价格"
                required
                border={false}
                class={styles.inputControl}
                placeholder=" "
                formatter={this.onFormatter}
                autocomplete="off"
                v-slots={{ button: () => '元' }}
                modelValue={this.musicPrice}
                maxlength={8}
                center
                rules={[
                  { required: true, validator, message: '请输入收费价格' }
                ]}
                errorMessageAlign="right"
                onUpdate:modelValue={val => (this.musicPrice = val)}
              />

              <div class={styles.rule}>
                <p>
                  扣除手续费后该曲目预计收入为：
                  <span>
                    {(
                      ((parseFloat(this.musicPrice || '0') || 0) *
                        (100 - this.music_sheet_service_fee)) /
                      100
                    ).toFixed(2)}
                    <span>元/人</span>
                  </span>
                </p>
                {/* <p>
                  每人：
                  <span>
                    {(
                      ((parseFloat(this.musicPrice || '0') || 0) *
                        (100 - this.music_sheet_service_fee)) /
                      100
                    ).toFixed(2)}
                  </span>
                  元/人
                </p> */}

                <p>
                  您的乐谱收入在学员购买后{this.music_account_period}
                  天结算到您的账户中
                </p>
              </div>
            </>
          )}
        </CellGroup>

        {/* <ColSticky position="bottom" background="transparent"> */}
        <div class={[styles['button-area']]}>
          <Button
            type="primary"
            block
            round
            native-type="submit"
            disabled={this.submitLoading || this.auditDisabled}
          >
            <img src={btnBg} />
          </Button>
        </div>
        {/* </ColSticky> */}
        {/* <Popup
          show={this.showPicker}
          round
          position="bottom"
          teleport="body"
          onUpdate:show={val => (this.showPicker = val)}
        >
          <Picker
            defaultIndex={this.subJectIndex}
            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.tagVisibility}
          round
          closeable
          position="bottom"
          style={{ height: '35%' }}
          teleport="body"
          onUpdate:show={val => (this.tagVisibility = val)}
        >
          <SelectTag
            onConfirm={this.onComfirm}
            show={this.tagVisibility}
            onClose={() => {
              this.tagVisibility = false
            }}
            tagList={this.tagList}
            defaultValue={this.tags}
          />
        </Popup>

        <Popup
          show={this.listenAudioShow}
          round
          closeable
          teleport="body"
          class={styles.listenAudioShow}
          onUpdate:show={val => (this.listenAudioShow = val)}
        >
          {this.listenAudioShow && <ListenAudio fileInfo={this.fileInfo} />}
        </Popup>

        <MessageTip
          title={this.messageTipTitle}
          type={this.messageTipType}
          show={this.messageTipStatus}
          onConfirm={() => {
            if (this.messageTipType === 'upload') {
              localStorage.setItem('isCatchTip', '1')
            }
            this.messageTipStatus = false
          }}
        />
      </Form>
    )
  }
})