h5-colexiu/src/tenant/music/music-detail/new-index.tsx

import TheSticky from '@/components/the-sticky'
import styles from './new-index.module.less'
import { useEventListener, useThrottleFn, useWindowScroll } from '@vueuse/core'
import { postMessage } from '@/helpers/native-message'
import iconShare from '../../images/icon-share.png'
import oStart from '../album-detail/icon-hart.png'
import iStart from '../album-detail/icon-hart-active.png'
import iconDownload from './images/icon-download.png'
import iconMemberSmall from './images/icon-member-small.png'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  toRaw,
  watch
} from 'vue'
import umiRequest from 'umi-request'
import { useRoute, useRouter } from 'vue-router'
import request from '@/helpers/request'
import ColHeader from '@/components/col-header'

import {
  Button,
  Cell,
  CellGroup,
  Dialog,
  Icon,
  Image,
  Popup,
  RadioGroup,
  Radio,
  Toast,
  Picker
} from 'vant'
import { useRect } from '@vant/use'
import { Vue3Lottie } from 'vue3-lottie'
import { getRandomKey, musicBuy } from '../music'
import { getOssUploadUrl, state } from '@/state'
import { browser, moneyFormat } from '@/helpers/utils'
import { orderStatus } from '@/views/order-detail/orderStatus'
import AstronautJSON from './animate/bigLoad.json'
import ColShare from '@/components/col-share'
import iconListen from './images/icon_listen.png'
import iconTeacher from '@common/images/icon_teacher.png'
import emtpy from './images/emtpy.png'

import activeButtonIcon from './images/icon_checkbox.png'
import inactiveButtonIcon from './images/icon_checkbox_default.png'
import staffDetafult from './images/staff-default.png'
import firstDefault from './images/first-default.png'
import fixedDefault from './images/fixed-default.png'

import Plyr from 'plyr'
import 'plyr/dist/plyr.css'
import Download from './download'
import { getInstrumentName } from '@/constant/instruments'
import { getUploadSign, onOnlyFileUpload } from '@/helpers/oss-file-upload'
import { svgtopng } from './formatSvgToImg'

export default defineComponent({
  name: 'new-index',
  setup() {
    localStorage.setItem('behaviorId', getRandomKey())
    const router = useRouter()
    const route = useRoute()
    const loading = ref(false)
    const background = ref<string>('rgba(55, 205, 177, 0)')
    const color = ref<string>('#fff')
    const aId = Number(route.query.activityId) || 0
    const studentActivityId = ref(aId)
    const isError = ref(false)
    const headers = ref(null)
    const footers = ref(null)
    const heightInfo = ref<any>('0')
    const musicDetail = ref<any>(null)
    const audioFileUrl = ref('')
    const showImg = ref([] as any)
    const firstList = ref<Array<any>>([])
    const fixedList = ref<Array<any>>([])
    const staffList = ref<Array<any>>([])
    const accompanyUrl = ref<string>('')
    const downloadStatus = ref<boolean>(false)
    const staff = reactive({
      status: false,
      radio: 'staff' // staff first fixed
    })

    const colors: any = {
      FREE: {
        color: '#88D5AC',
        text: '免费'
      },
      VIP: {
        color: '#FFFA6B',
        text: '会员'
      },
      CHARGE: {
        color: '#AEFAFF',
        text: '点播'
      }
    }

    // 更改预览状态
    const onChangeStaff = (type: string) => {
      staff.radio = type
      staff.status = false
    }
    watch(
      () => staff.radio,
      (val: string) => {
        if (val == 'first') {
          showImg.value = firstList.value
        } else if (val == 'fixed') {
          showImg.value = fixedList.value
        } else {
          showImg.value = staffList.value
        }
      }
    )
    const FetchList = async (id?: any) => {
      if (loading.value) {
        return
      }
      loading.value = true
      isError.value = false
      try {
        const res = await request.get(`/music/sheet/detail/${route.query.id}`, {
          prefix:
            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student',
          params: {
            tenantAlbumId: route.query.tenantAlbumId || null
          }
        })
        musicDetail.value = res.data
        // 取原音，如果有多个则默认第一个
        const background = res.data.background
        audioFileUrl.value =
          background && background.length > 0 ? background[0].audioFileUrl : ''
        showImg.value = res.data.musicImg ? res.data.musicImg.split(',') : []
        firstList.value = res.data.firstTone
          ? res.data.firstTone.split(',')
          : []
        fixedList.value = res.data.fixedTone
          ? res.data.fixedTone.split(',')
          : []
        staffList.value = res.data.musicImg ? res.data.musicImg.split(',') : []
        nextTick(() => {
          renderStaff()
        })
      } catch (error) {
        isError.value = true
      }
      if (musicDetail.value?.musicSheetType !== 'CONCERT') {
        loading.value = false
      }
    }
    const base64ToBlob = data => {
      const arr = data.split(','),
        mime = arr[0].match(/:(.*?);/)[1]

      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    }
    const uploadFunction = async file => {
      try {
        const formData = new FormData()
        const fileName =
          new Date().getTime() + Math.ceil(Math.random() * 1000) + '.png'
        const keyTime = new Date().getTime() + fileName
        const obj = {
          filename: keyTime,
          bucketName: 'cloud-coach',
          postData: {
            filename: keyTime,
            acl: 'public-read',
            key: keyTime
          }
        }

        // const res = await request.post(state.platformApi + '/getUploadSign', {
        //   data: obj
        // })

        const res = await getUploadSign(obj)
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner',
          duration: 0
        })

        const dataObj = {
          policy: res.data.policy,
          signature: res.data.signature,
          key: keyTime,
          KSSAccessKeyId: res.data.kssAccessKeyId,
          acl: 'public-read',
          name: fileName
        }
        const files = base64ToBlob(file)
        const ossUploadUrl = getOssUploadUrl('cloud-coach')
        const imgurl = await onOnlyFileUpload(ossUploadUrl, {
          ...dataObj,
          file: files
        })
        // for (const key in dataObj) {
        //   formData.append(key, dataObj[key])
        // }

        // formData.append('file', files, fileName)
        // const ossUploadUrl = getOssUploadUrl('cloud-coach')
        // await umiRequest(ossUploadUrl, {
        //   method: 'POST',
        //   data: formData
        // })
        Toast.clear()
        // const imgurl = getOssUploadUrl('cloud-coach') + keyTime

        await request.post(state.platformApi + '/open/music/sheet/img', {
          data: { musicSheetId: musicDetail.value.id, musicImg: imgurl }
        })
        // showImg.value.value = imgurl
      } catch (e) {
        console.log(e)
      }
    }

    const setAccompanyUrl = () => {
      let url = location.origin
      if (
        location.host.includes('dev.colexiu') ||
        location.host.includes('192.168') ||
        location.host.includes('localhost')
      ) {
        url = 'https://dev.colexiu.com'
      }
      const music = musicDetail.value
      let subjectId = ''
      if (music.background && music.background.length > 0) {
        subjectId = music.background[0].id
      }
      accompanyUrl.value =
        url +
        `/accompany/colxiu-website.html?id=${music.id}&part-index=${subjectId}`
    }
    const player = ref<any>(null)
    const audio = ref<any>(null)
    const freeRate = ref<any>(0)
    const initAudio = async () => {
      const controls = [
        // 'play-large',
        'play',
        'progress',
        'captions',
        // 'fullscreen',
        'duration'
      ]
      player.value = new Plyr(audio.value, {
        controls: controls
      })

      const config = await request.get(
        '/api-student/sysConfig/queryByParamNameList',
        {
          params: {
            paramNames: 'music_sheet_free_rate'
          }
        }
      )
      freeRate.value = config.data[0]?.paramValue || 0

      player.value.on('timeupdate', () => {
        // 允许播放时间
        const players = player.value
        const playTime = (players.duration * freeRate.value) / 100 || 0
        // 时间，不能播放
        if (players.currentTime >= playTime && !buyState.value.play) {
          players.stop()
          // players.pause()
        }
      })
    }

    const showLoading = async (e: any) => {
      // console.log(e, 'showLoading')
      if (e.data?.api === 'musicStaffRender') {
        const osmdImg = e.data.osmdImg
        showImg.value = []
        const imgs: any = []
        for (let i = 0; i < osmdImg.length; i++) {
          const img = await svgtopng(
            osmdImg[i].img,
            osmdImg[i].width,
            osmdImg[i].height
          )
          const fileName =
            route.query.id + state.user.data.userId + +new Date() + '.png'
          const obj = {
            filename: fileName,
            bucketName: 'cloud-coach',
            postData: {
              filename: fileName,
              acl: 'public-read',
              key: fileName
            }
          }
          const { data } = await getUploadSign(obj, true)
          const dataObj = {
            policy: data.policy,
            signature: data.signature,
            key: fileName,
            KSSAccessKeyId: data.kssAccessKeyId,
            acl: 'public-read',
            name: fileName
          }
          const files = base64ToBlob(img)
          const ossUploadUrl = getOssUploadUrl('cloud-coach')
          const imgurl = await onOnlyFileUpload(ossUploadUrl, {
            ...dataObj,
            file: files
          })
          imgs.push(imgurl)
        }
        showImg.value = imgs
        console.log(showImg.value, 'showImg.value')
        loading.value = e.data.loading
      }
    }
    onMounted(async () => {
      await FetchList()
      const { height } = useRect(headers as any)
      const footer = useRect(footers as any)
      heightInfo.value = height + footer.height

      // 初始化音频
      if (audioFileUrl.value) {
        initAudio()
      }

      window.addEventListener('message', showLoading)
    })
    onUnmounted(() => {
      window.removeEventListener('message', showLoading)
    })

    const toggleFavorite = async () => {
      try {
        await request.post('/music/sheet/favorite/' + musicDetail.value?.id, {
          prefix:
            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
        })
        musicDetail.value.favorite = musicDetail.value?.favorite ? 0 : 1
        musicDetail.value.favoriteCount = musicDetail.value?.favorite
          ? musicDetail.value.favoriteCount + 1
          : musicDetail.value.favoriteCount - 1 < 0
          ? 0
          : musicDetail.value.favoriteCount - 1
        setTimeout(() => {
          Toast(musicDetail.value?.favorite ? '收藏成功' : '取消收藏成功')
        }, 100)
      } catch (error) {
        //
      }
    }

    const onAddCourse = async () => {
      try {
        const res = await request.post('/api-teacher/courseCourseware/submit', {
          data: {
            musicSheetId: musicDetail.value.id,
            clientType: 'TEACHER',
            userId: state.user.data?.userId
          }
        })
        console.log(res)
        setTimeout(() => {
          musicDetail.value.coursewareId = res.data.id || ''
          Toast('添加成功')
          musicDetail.value.coursewareStatus = 1
        }, 100)
      } catch {
        //
      }
    }
    const removeCourse = async () => {
      Dialog.confirm({
        title: '提示',
        message: '您是否确定移除课件',
        confirmButtonColor: '#269a93',
        cancelButtonText: '取消',
        confirmButtonText: '确定'
      }).then(async () => {
        try {
          await request.post(
            '/api-teacher/courseCourseware/remove/' +
              musicDetail.value.coursewareId,
            {
              data: {}
            }
          )
          setTimeout(() => {
            Toast('移除成功')
            musicDetail.value.coursewareStatus = 0
          }, 100)
        } catch {
          //
        }
      })
    }

    const onBuy = async () => {
      const music = musicDetail.value
      orderStatus.orderObject.orderType = 'MUSIC'
      orderStatus.orderObject.orderName = music.musicSheetName
      orderStatus.orderObject.orderDesc = music.musicSheetName
      orderStatus.orderObject.actualPrice = music.musicPrice
      orderStatus.orderObject.recomUserId = route.query.recomUserId || 0
      orderStatus.orderObject.activityId = route.query.activityId || 0
      orderStatus.orderObject.orderNo = ''
      orderStatus.orderObject.orderList = [
        {
          orderType: 'MUSIC',
          goodsName: music.musicSheetName,
          actualPrice: music.musicPrice,
          ...music
        }
      ]

      const res = await request.post('/api-student/userOrder/getPendingOrder', {
        data: {
          goodType: 'MUSIC',
          bizId: music.id
        }
      })

      const result = res.data
      if (result) {
        Dialog.confirm({
          title: '提示',
          message: '您有一个未支付的订单，是否继续支付？',
          theme: 'round-button',
          className: 'confirm-button-group',
          cancelButtonText: '取消订单',
          confirmButtonText: '继续支付'
        })
          .then(async () => {
            orderStatus.orderObject.orderNo = result.orderNo
            orderStatus.orderObject.actualPrice = result.actualPrice
            orderStatus.orderObject.discountPrice = result.discountPrice
            orderStatus.orderObject.paymentConfig = {
              ...result.paymentConfig,
              paymentVendor: result.paymentVendor,
              paymentVersion: result.paymentVersion
            }
            routerTo()
          })
          .catch(() => {
            Dialog.close()
            // 只用取消订单，不用做其它处理
            cancelPayment(result.orderNo)
          })
      } else {
        routerTo()
      }
    }
    const routerTo = () => {
      const music = musicDetail.value
      router.push({
        path: '/orderDetail',
        query: {
          orderType: 'MUSIC',
          musicId: music.id
        }
      })
    }
    const cancelPayment = async (orderNo: string) => {
      try {
        await request.post('/api-student/userOrder/orderCancel', {
          data: {
            orderNo
          }
        })
      } catch {
        //
      }
    }

    const paymentType = computed(() => {
      let paymentType = musicDetail.value?.paymentType
      if (typeof paymentType === 'string') {
        paymentType = paymentType.split(',')
        return paymentType
      }
      return []
    })

    const buyState = computed(() => {
      const music = musicDetail.value
      return {
        hasTenantAlbum: route.query?.tenantAlbumId ? true : false, // 是否从专辑来的
        play: music.play ? true : false, // 是否可以播放
        free: music?.paymentType.includes('FREE'),
        charge: music?.paymentType.includes('CHARGE'),
        vip: music?.paymentType.includes('VIP'),
        buy: music?.orderStatus === 'PAID' // 是否已买
      }
    })

    const shareStatus = ref(false)
    const shareUrl = ref('')
    const shareDiscount = ref(0)
    const onShare = async () => {
      try {
        const res = await request.post('/api-teacher/open/musicShareProfit', {
          data: {
            bizId: musicDetail.value?.id,
            userId: state.user.data?.userId
          }
        })
        let url =
          location.origin +
          `/teacher/#/shareMusic?id=${musicDetail.value?.id}&recomUserId=${state.user.data?.userId}&userType=${state.platformType}`
        // 判断是否有活动
        if (res.data.discount === 1) {
          url += `&activityId=${res.data.activityId}`
        }
        shareDiscount.value = res.data.discount || 0
        console.log(url)
        shareUrl.value = url
        shareStatus.value = true
        return
      } catch {
        //
      }
    }

    const staffData = reactive({
      open: false,
      iframeSrc: '',
      musicXml: '',
      instrumentName: '',
      iframeRef: null as any,
      partIndex: 0,
      partXmlIndex: 0,
      partList: [] as any[],
      tempPartList: [] as any[],
      xmlPartList: [] as any[]
    })
    /** 渲染五线谱 */
    // 长笛、单簧管、萨克斯、小号、长号、圆号、大号、上低音号
    const sortList = {
      长笛: 1,
      单簧管: 2,
      中音单簧管: 3,
      低音单簧管: 4,
      高音萨克斯管: 5,
      中音萨克斯管: 6,
      次中音萨克斯管: 7,
      低音萨克斯管: 8,
      小号: 9,
      长号: 10,
      圆号: 11,
      大号: 12,
      上低音号: 13
    }
    const instrumentSort = (list: Array<any>) => {
      list.sort((a, b) => {
        return (
          (sortList[getInstrumentName(a.track)] || 20) -
          (sortList[getInstrumentName(b.track)] || 20)
        )
      })
      return list
    }
    const renderStaff = async () => {
      try {
        if (musicDetail.value?.xmlFileUrl) {
          // 获取文件
          const res = await umiRequest.get(musicDetail.value?.xmlFileUrl, {
            mode: 'cors'
          })
          const xmlParse = new DOMParser().parseFromString(res, 'text/xml')
          const parts = xmlParse.getElementsByTagName('score-part')

          const partList: any = []
          for (let i = 0; i < parts.length; i++) {
            const childDom = parts[i].children
            for (let j = 0; j < childDom.length; j++) {
              if (childDom[j].nodeName === 'part-name') {
                partList.push({
                  name: childDom[j].textContent,
                  value: i
                })
              }
            }
          }
          staffData.xmlPartList = partList
        }

        // staffData.iframeSrc = `${location.origin}/osmd/index.html`
        staffData.iframeSrc = `${location.origin}${location.pathname}osmd/index.html`
        staffData.musicXml = musicDetail.value?.xmlFileUrl || ''
        staffData.partList = musicDetail.value?.background || []
        staffData.partList.forEach((part: any) => {
          const item = staffData.xmlPartList.find(
            item => item.name === part.track
          )
          if (item) {
            part.index = item.value
          }
        })
        staffData.tempPartList = JSON.parse(JSON.stringify(staffData.partList))
        staffData.partList = instrumentSort(staffData.partList)
        staffData.partXmlIndex = staffData.partList[0].index || 0

        staffData.instrumentName = getInstrumentName(
          staffData.partList[staffData.partIndex]?.track
        )
      } catch (error) {
        //
      }
    }

    const musicIframeLoad = () => {
      const iframeRef: any = document.getElementById('staffIframeRef')
      if (iframeRef && iframeRef.contentWindow.renderXml) {
        iframeRef.contentWindow.renderXml(
          staffData.musicXml,
          staffData.partXmlIndex
        )
      }
    }
    const resetRender = () => {
      const iframeRef: any = document.getElementById('staffIframeRef')
      if (iframeRef && iframeRef.contentWindow.renderXml) {
        iframeRef.contentWindow.resetRender(staffData.partXmlIndex)
        staffData.instrumentName = getInstrumentName(
          staffData.partList[staffData.partIndex]?.track
        )
      }
    }
    const partColumns = computed(() => {
      return staffData.partList.map((item: any, index: number) => {
        const instrumentName = getInstrumentName(item.track)
        return {
          text: item.track + (instrumentName ? `(${instrumentName})` : ''),
          value: index,
          xmlValue: item.index,
          track: item.track
        }
      })
    })
    return () => (
      <div class={styles.detail}>
        <TheSticky position="top">
          <ColHeader
            background={background.value}
            border={false}
            isFixed={false}
            color={color.value}
            backIconColor="white"
          />
        </TheSticky>
        <img class={styles.bgImg} src={musicDetail.value?.titleImg} />
        <div class={styles.musicContentBg}></div>
        <div class={styles.bg}>
          <div class={styles.alumWrap}>
            <div class={styles.img}>
              {/* {albumDetail.value?.paymentType === 'CHARGE' && (
                  <span class={styles.albumType}>付费</span>
                )} */}
              <Image
                class={styles.image}
                width="100%"
                height="100%"
                fit="cover"
                src={musicDetail.value?.titleImg}
              />
            </div>
            <div class={styles.alumDes}>
              <div class={[styles.alumTitle, 'van-ellipsis']}>
                {musicDetail.value?.musicSheetName}
              </div>
              <div class={[styles.des, 'van-multi-ellipsis--l2']}>
                {!musicDetail.value?.composer
                  ? `上传者：${musicDetail.value?.addName || ''}`
                  : `作曲：${musicDetail.value?.composer || ''}`}
              </div>
              <div class={styles.tags}>
                {musicDetail.value?.id && (
                  <>
                    {musicDetail.value?.musicTagNames &&
                      musicDetail.value?.musicTagNames.split(',').map(name => (
                        <span
                          style={{
                            borderColor: colors.FREE.color,
                            color: colors.FREE.color
                          }}
                          class={styles.tag}
                        >
                          {name}
                        </span>
                      ))}
                  </>
                )}
              </div>
            </div>
          </div>
          <div
            class={[
              styles.alumCollect
              // musicDetail.value?.musicSheetType === 'CONCERT'
              //   ? styles.alumCollectCencert
              //   : ''
            ]}
          >
            <div class={styles.alumCollectItem} onClick={onShare}>
              <Image src={iconShare} />
              <span>分享</span>
            </div>
            {/* {musicDetail.value?.musicSheetType !== 'CONCERT' && ( */}
            <div
              class={[
                styles.alumCollectItem,
                showImg.value.length <= 0 ? styles.alumCollectItemActive : ''
              ]}
              onClick={() => {
                if (showImg.value.length > 0) {
                  downloadStatus.value = true
                }
              }}
            >
              <img src={iconDownload} />
              <span>下载</span>
            </div>
            {/* )} */}

            <div
              class={styles.alumCollectItem}
              onClick={() => toggleFavorite()}
            >
              <img src={musicDetail.value?.favorite ? iStart : oStart} />
              <span>{musicDetail.value?.favoriteCount}</span>
            </div>
          </div>
          {/* {buyState.value.hasTenantAlbum ? 'true' : 'false'} */}
          {musicDetail.value?.id &&
            !buyState.value.play &&
            !buyState.value.hasTenantAlbum && (
              <div class={styles.albumTips}>
                {buyState.value.charge && buyState.value.vip ? (
                  <>
                    <span>开通会员或点播单曲，即可自由练习该曲谱</span>
                    <span class={styles.albumPrice}>
                      ¥{moneyFormat(musicDetail.value?.musicPrice)}
                    </span>
                  </>
                ) : buyState.value.vip ? (
                  <span>
                    <img src={iconMemberSmall} class={styles.iconMemberSmall} />
                    此曲谱为会员专享，开通会员即可自由练习该曲谱
                  </span>
                ) : buyState.value.charge ? (
                  <>
                    <span>此曲谱为点播曲谱，点播即可自由练习该曲谱</span>
                    <span class={styles.albumPrice}>
                      ¥{moneyFormat(musicDetail.value?.musicPrice)}
                    </span>
                  </>
                ) : (
                  ''
                )}
              </div>
            )}
        </div>

        <div class={styles.musicContent}>
          {musicDetail.value?.notation ? (
            <span
              class={styles.iconTransfer}
              style={{
                display:
                  musicDetail.value?.musicSheetType === 'SINGLE' ? '' : 'none'
              }}
              onClick={() => {
                staff.status = true
              }}
            >
              转谱
            </span>
          ) : null}
          <span
            class={styles.iconTransfer}
            style={{
              display:
                musicDetail.value?.musicSheetType === 'CONCERT' ? '' : 'none'
            }}
            onClick={() => {
              staffData.open = true
            }}
          >
            切换乐器
          </span>

          <p class={styles.musicTitle}>
            {(musicDetail.value?.musicSheetName
              ? musicDetail.value?.musicSheetName
              : '') +
              (staffData.instrumentName ? `(${staffData.instrumentName})` : '')}
          </p>
          {musicDetail.value?.musicSheetType === 'CONCERT' ? (
            <>
              {loading.value && (
                <div>
                  <Vue3Lottie
                    animationData={AstronautJSON}
                    class={styles.finch}
                  ></Vue3Lottie>
                  <p class={styles.finchLoad}>加载中...</p>
                </div>
              )}
              <iframe
                id="staffIframeRef"
                style={{
                  opacity: loading.value ? 0 : 1
                }}
                src={staffData.iframeSrc}
                onLoad={musicIframeLoad}
              ></iframe>
              {/* <OsmdPreview ref={osmdPreviewRef} /> */}
            </>
          ) : (
            <>
              {showImg.value.length > 0 ? (
                <img src={showImg.value[0]} alt="" class={styles.musicImg} />
              ) : loading.value ? (
                <>
                  <Vue3Lottie
                    animationData={AstronautJSON}
                    class={styles.finch}
                  ></Vue3Lottie>
                  <p class={styles.finchLoad}>加载中...</p>
                </>
              ) : (
                <div class={styles.empty}>
                  <Image src={emtpy} class={styles.emptyImg} />
                  <p class={styles.emptyTip}>暂无乐谱预览图</p>
                </div>
              )}
            </>
          )}
        </div>

        {musicDetail.value?.id &&
          (!buyState.value.hasTenantAlbum || buyState.value.play) && (
            <TheSticky position="bottom">
              <div style={{ backgroundColor: '#fff' }}>
                <div class={styles.videoOperation}>
                  {audioFileUrl.value && (
                    <>
                      {!buyState.value.play &&
                        freeRate.value != 100 &&
                        freeRate.value != 0 && (
                          <div class={[styles.audition]}>
                            <img src={iconListen} />
                            <span>每首曲目可试听{freeRate.value}%</span>
                          </div>
                        )}

                      <div class={[styles.audio, styles.collectCell]}>
                        <audio id="player" controls ref={audio}>
                          <source src={audioFileUrl.value} type="audio/mp3" />
                        </audio>
                      </div>
                    </>
                  )}
                </div>

                <div ref={footers} class={styles.footers}>
                  {/* 判断是否是免费的，或者已经购买过 */}
                  {buyState.value.play ? (
                    <Button
                      round
                      block
                      type="primary"
                      color="linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%)"
                      onClick={() => {
                        const throttleFn = useThrottleFn(() => {
                          player.value && player.value.stop()
                          const item: any = partColumns.value.find(
                            (c: any) => c.value === staffData.partIndex
                          )
                          const index = staffData.tempPartList.findIndex(
                            (i: any) => i.track === item?.track
                          )
                          musicBuy(musicDetail.value, () => {}, {
                            'part-index': index || 0,
                            sett: staff.radio,
                            // 1：忽略系统节拍器
                            ignoreSysMetronome:
                              route.query.subjectType === 'MUSIC' ? 1 : 0
                          })
                        }, 500)

                        throttleFn()
                      }}
                    >
                      立即练习
                    </Button>
                  ) : (
                    <div class={[styles.buyBtn]}>
                      {/* 判断是否是需要收费的 */}
                      {buyState.value.charge && (
                        <Button
                          round
                          type="primary"
                          color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
                          class={styles.primary}
                          onClick={onBuy}
                        >
                          立即点播
                        </Button>
                      )}

                      {/* 判断是否有会员的 */}
                      {buyState.value.vip && (
                        <Button
                          round
                          block={!buyState.value.charge ? true : false}
                          type="primary"
                          color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
                          class={styles.memeber}
                          onClick={() => {
                            router.push({
                              path: '/memberCenter',
                              query: {
                                ...route.query
                              }
                            })
                          }}
                        >
                          {studentActivityId.value > 0 && (
                            <div class={[styles.buttonDiscount]}>专属优惠</div>
                          )}
                          开通会员
                        </Button>
                      )}
                    </div>
                  )}
                </div>
              </div>
            </TheSticky>
          )}

        <Popup
          v-model:show={shareStatus.value}
          style={{ background: 'transparent' }}
          teleport="body"
        >
          <ColShare
            teacherId={state.user.data?.userId}
            shareUrl={shareUrl.value}
            shareType="music"
            type="tenant"
          >
            <div class={styles.shareMate}>
              {shareDiscount.value === 1 && (
                <div class={styles.tagDiscount}>专属优惠</div>
              )}

              <img
                class={styles.icon}
                crossorigin="anonymous"
                src={musicDetail.value?.titleImg + `?t=${+new Date()}`}
              />
              <div class={styles.info}>
                <h4 class="van-multi-ellipsis--l2">
                  {musicDetail.value?.musicSheetName}
                </h4>
                <p>作曲人：{musicDetail.value?.composer}</p>
              </div>
            </div>
          </ColShare>
        </Popup>

        <Popup v-model:show={downloadStatus.value} position="bottom" round>
          {downloadStatus.value && (
            <Download
              imgList={JSON.parse(JSON.stringify(showImg.value))}
              musicSheetName={musicDetail.value.musicSheetName}
            />
          )}
        </Popup>

        <Popup
          v-model:show={staff.status}
          teleport="body"
          closeable
          style={{ width: '80%' }}
          class={styles.staffChange}
          round
        >
          <div class={styles.staffContainer}>
            <div class={styles.staffTitle}>选择转换曲谱</div>
            <RadioGroup v-model={staff.radio}>
              <CellGroup border={false}>
                <Cell
                  center
                  border={false}
                  class={staff.radio === 'staff' ? styles.active : ''}
                  onClick={() => onChangeStaff('staff')}
                >
                  {{
                    icon: () => (
                      <Image src={staffDetafult} class={styles.staffImg} />
                    ),
                    title: () => <span class={styles.name}>五线谱</span>,
                    value: () => (
                      <Radio name="staff">
                        {{
                          icon: (props: any) => (
                            <Icon
                              class={styles.boxStyle}
                              name={
                                props.checked
                                  ? activeButtonIcon
                                  : inactiveButtonIcon
                              }
                            />
                          )
                        }}
                      </Radio>
                    )
                  }}
                </Cell>
                <Cell
                  center
                  border={false}
                  class={staff.radio === 'first' ? styles.active : ''}
                  onClick={() => onChangeStaff('first')}
                >
                  {{
                    icon: () => (
                      <Image src={firstDefault} class={styles.staffImg} />
                    ),
                    title: () => <span class={styles.name}>简谱-首调</span>,
                    value: () => (
                      <Radio name="first">
                        {{
                          icon: (props: any) => (
                            <Icon
                              class={styles.boxStyle}
                              name={
                                props.checked
                                  ? activeButtonIcon
                                  : inactiveButtonIcon
                              }
                            />
                          )
                        }}
                      </Radio>
                    )
                  }}
                </Cell>
                <Cell
                  center
                  border={false}
                  class={staff.radio === 'fixed' ? styles.active : ''}
                  onClick={() => onChangeStaff('fixed')}
                >
                  {{
                    icon: () => (
                      <Image src={fixedDefault} class={styles.staffImg} />
                    ),
                    title: () => <span class={styles.name}>简谱-固定调</span>,
                    value: () => (
                      <Radio name="fixed">
                        {{
                          icon: (props: any) => (
                            <Icon
                              class={styles.boxStyle}
                              name={
                                props.checked
                                  ? activeButtonIcon
                                  : inactiveButtonIcon
                              }
                            />
                          )
                        }}
                      </Radio>
                    )
                  }}
                </Cell>
              </CellGroup>
            </RadioGroup>
          </div>
        </Popup>

        <Popup
          teleport="body"
          position="bottom"
          round
          v-model:show={staffData.open}
        >
          <Picker
            columns={partColumns.value}
            onConfirm={value => {
              staffData.open = false
              staffData.partIndex = value.value
              staffData.partXmlIndex = value.xmlValue
              showImg.value = []
              nextTick(() => {
                resetRender()
              })
            }}
            onCancel={() => (staffData.open = false)}
          />
        </Popup>
      </div>
    )
  }
})