修改样式

src/teacher/music/upload/index.tsx

@@ -1038,29 +1038,6 @@ export default defineComponent({
           </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}

src/tenant/music/music-detail/new-index.module.less

@@ -306,12 +306,14 @@
   width: 100%;
   // height: 800px;
   flex: 1 auto;
-  // overflow: hidden;
+  overflow: hidden;
   background-color: #fff;
   padding: 0;
   z-index: 12;
   border-radius: 16px;
   padding-top: 26px;
+  display: flex;
+  flex-direction: column;
 
   // &::after {
   //   content: ' ';
@@ -361,15 +363,25 @@
   }
 
   .musicImg {
-    // width: 100%;
     padding: 0 8px;
-    min-height: 50vh;
+    height: 100%;
+    flex: 1 auto;
+    overflow-x: hidden;
+    overflow-y: auto;
 
     img {
       width: 100%;
     }
   }
 
+  .imgSection {
+    overflow: hidden;
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
   .finch {
     width: 150px;
     margin: 150px auto 0;

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

@@ -483,9 +483,6 @@ export default defineComponent({
           staffData.xmlPartList = partList
         }
 
-        // staffData.iframeSrc = `${
-        //   location.origin
-        // }/osmd/index.html?t=${new Date().getTime()}`
         staffData.musicXml = musicDetail.value?.xmlFileUrl || ''
         const tempList = musicDetail.value?.background || []
         const tempPartList = [] as any
@@ -523,41 +520,30 @@ export default defineComponent({
       try {
         nextTick(() => {
           if (musicPdfUrl.value) {
+            const url = `${location.origin}${
+                location.pathname
+              }pdf/web/viewer-pdf.html?file=${encodeURIComponent(
+                musicPdfUrl.value
+              )}&t=${Date.now()}`
 
-            // staffData.iframeSrc = `${location.origin}${
-            //   location.pathname
-            // }pdf/web/viewer.html?file=${encodeURIComponent(staffData.musicPdfUrl)}&t=${Date.now()}`
 
+              // const url = '/pdf/web/viewer-pdf.html?file=' +
+              //   encodeURIComponent(musicPdfUrl.value) +
+              //   '&t=' +
+              //   Date.now()
+            
             const iframeRef = document.querySelector('#staffIframeRef') as any
-            console.log(iframeRef, 'iframeRef')
             iframeRef.contentWindow.location.replace(
-              '/pdf/web/viewer-pdf.html?file=' +
-                encodeURIComponent(musicPdfUrl.value) +
-                '&t=' +
-                Date.now()
+              url
             )
-
-            // const iframeRef = document.querySelector('#staffIframeRef') as any
-            // iframeRef.contentWindow.location.replace(
-            //   `${location.origin}${
-            //     location.pathname
-            //   }pdf/web/viewer-pdf.html?file=${encodeURIComponent(
-            //     musicPdfUrl.value
-            //   )}&t=${Date.now()}`
-            // )
+            staffData.iframeSrc = url
           } else {
-            staffData.iframeSrc = `${
-              location.origin
-            }/osmd/index.html?t=${new Date().getTime()}`
-
-            // staffData.iframeSrc = `${location.origin}${
-            //   location.pathname
-            // }osmd/index.html?t=${new Date().getTime()}`
+            const url = `${location.origin}${location.pathname}osmd/index.html`
+            // const url = `${location.origin}/osmd/index.html`
 
             const iframeRef = document.querySelector('#staffIframeRef') as any
-            iframeRef.contentWindow.location.replace(
-              `${location.origin}${location.pathname}osmd/index.html`
-            )
+            iframeRef.contentWindow.location.replace(url)
+            staffData.iframeSrc = url
           }
         })
       } catch (error) {
@@ -754,6 +740,7 @@ export default defineComponent({
         <TheSticky position="top">
           <ColHeader
             background={background.value}
+            hideHeader={false}
             border={false}
             isFixed={false}
             color={color.value}
@@ -903,7 +890,7 @@ export default defineComponent({
                   style={{
                     opacity: loading.value ? 0 : 1
                   }}
-                  src={staffData.iframeSrc}
+                  // src={staffData.iframeSrc}
                   onLoad={() => {
                     // 判断是用哪个渲染的
                     loading.value = false
@@ -933,7 +920,7 @@ export default defineComponent({
                     style={{
                       opacity: loading.value ? 0 : 1
                     }}
-                    src={staffData.iframeSrc}
+                    // src={staffData.iframeSrc}
                     onLoad={() => {
                       if (!defaultImgs.value[staff.radio]) {
                         onChangeStaff(staff.radio)
@@ -946,7 +933,7 @@ export default defineComponent({
               )}
             </>
           ) : (
-            <div>
+            <div class={styles.imgSection}>
               <p class={styles.musicTitle}>
                 {(musicDetail.value?.musicSheetName
                   ? musicDetail.value?.musicSheetName
@@ -980,7 +967,7 @@ export default defineComponent({
         </div>
 
         {musicDetail.value?.id && (
-          <TheSticky position="bottom">
+          <TheSticky position="bottom" varName="--bottom-height">
             <div style={{ backgroundColor: '#fff' }}>
               <div class={styles.videoOperation}>
                 {audioFileUrl.value && (

src/views/music/music-detail/index.module.less

@@ -68,18 +68,22 @@
   width: 100%;
   height: 500px;
   overflow: hidden;
-
-  &::after {
-    content: ' ';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: linear-gradient(180deg,
-        rgba(255, 255, 255, 0) 0%,
-        #ffffff 100%);
-    height: 287px;
-  }
+  flex: 1 auto;
+  padding-top: 10px;
+  display: flex;
+  flex-direction: column;
+
+  // &::after {
+  //   content: ' ';
+  //   position: absolute;
+  //   bottom: 0;
+  //   left: 0;
+  //   right: 0;
+  //   background: linear-gradient(180deg,
+  //       rgba(255, 255, 255, 0) 0%,
+  //       #ffffff 100%);
+  //   height: 287px;
+  // }
 
   iframe {
     // pointer-events: none;
@@ -91,6 +95,10 @@
 
   .musicImg {
     width: 100%;
+    flex: 1 auto;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
 
     img {
       width: 100%;
@@ -130,25 +138,41 @@
 }
 
 .collectCell {
-  margin: 10px 16px 0;
-  background: #ffffff;
-  border-radius: 10px;
-  box-shadow: 0px 0px 6px 0px rgba(229, 229, 229, 0.7);
+  // margin: 10px 16px 0;
+  padding-bottom: 10px;
+  // background: #ffffff;
+  // border-radius: 10px;
+  // box-shadow: 0px 0px 6px 0px rgba(229, 229, 229, 0.7);
   overflow: hidden;
+
+  :global {
+    .plyr__controls {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+      padding-top: 0 !important;
+    }
+
+    /* 修改滑块的样式 */
+    input[type="range"]::-webkit-slider-thumb {
+      background-color: #2DC7AA !important;
+      border: none;
+      box-shadow: none;
+    }
+  }
 }
 
 .videoOperation {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 5px;
+  // position: absolute;
+  // left: 0;
+  // right: 0;
+  // bottom: 5px;
   z-index: 1;
 }
 
 .audition {
   display: flex;
   align-items: center;
-  margin: 10px 16px 0;
+  margin: 0 0 10px 0;
   background: linear-gradient(180deg, #fff0d9 0%, #ffdfb8 100%);
   border-radius: 16px;
   padding: 7px 12px;
@@ -258,7 +282,33 @@
   z-index: 12;
   border-radius: 18px 18px 0 0;
   background-color: #fff;
-  overflow-y: auto;
+  // overflow-y: auto;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .functionSection {
+    display: flex;
+    padding: 0 8px;
+  }
+  .functionItem {
+    background: #F2F2F2;
+    border-radius: 20px;
+    font-size: 14px;
+    color: #131415;
+    line-height: 34px;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 6px;
+
+    img {
+      width: 18px;
+      height: 18px;
+      margin-right: 8px;
+    }
+  }
 }
 
 .shareMate {
@@ -384,8 +434,7 @@
 
 .musicInfo {
   padding-top: 23px !important;
-  padding-bottom: 23px !important;
-  margin-bottom: 10px;
+  padding-bottom: 18px !important;
 
   .coomposer {
     padding-top: 2px;

src/views/music/music-detail/index.tsx

@@ -40,9 +40,12 @@ import ColSticky from '@/components/col-sticky'
 import { browser, moneyFormat } from '@/helpers/utils'
 import { orderStatus } from '@/views/order-detail/orderStatus'
 import iconShare from '@/views/music/album/icon_share.svg'
-import iconAlbum from '@/views/music/component/images/icon_album.png'
+import iconAlbum from './images/icon_album.png'
 import iconDownload from './images/icon_download.png'
-import iconChangeStaff from './images/icon-change-staff.png'
+import iconChange from './images/icon-change.png'
+import iconAddCourse from './images/icon-add-course.png'
+import iconRemoveCourse from './images/icon-remove-course.png'
+
 import AstronautJSON from './animate/bigLoad.json'
 import ColShare from '@/components/col-share'
 import iconCollect from './images/icon_collect.png'
@@ -131,17 +134,23 @@ export default defineComponent({
     const onChangeStaff = (type: string) => {
       staff.radio = type
       staff.status = false
-      const tempPdf = musicDetail.value?.firstPdfUrl
+
       if (type == 'first' && !defaultImgs.value.first) {
         loading.value = false
+        const tempPdf = musicDetail.value?.firstPdfUrl
         initIframe(tempPdf, 'first', staffData.musicXml)
-      } else if (type == 'fixed' && (!defaultImgs.value.fixed || musicDetail.value?.jianPdfUrl)) {
+      } else if (
+        type == 'fixed' &&
+        (!defaultImgs.value.fixed || musicDetail.value?.jianPdfUrl)
+      ) {
         loading.value = false
-        initIframe(tempPdf, 'first', staffData.musicXml)
+        const tempPdf = musicDetail.value?.jianPdfUrl
+        initIframe(tempPdf, 'fixed', staffData.musicXml)
       } else {
         if (!defaultImgs.value.staff) {
           loading.value = false
-          initIframe(tempPdf, 'first', staffData.musicXml)
+          const tempPdf = musicDetail.value?.musicPdfUrl
+          initIframe(tempPdf, 'staff', staffData.musicXml)
         }
       }
     }
@@ -153,7 +162,10 @@ export default defineComponent({
       } else {
         musicPdfUrl.value = ''
         // 为了处理，之前是使用pdf渲染，现在又用osmd，iframe没有重新加载
-        if (staffData.iframeSrc.indexOf('pdf/web') !== -1) {
+        if (
+          !staffData.iframeSrc ||
+          staffData.iframeSrc.indexOf('pdf/web') !== -1
+        ) {
           renderStaff()
         } else {
           resetRenderPage(staff, xml)
@@ -198,20 +210,7 @@ export default defineComponent({
           ? res.data.fixedTone.split(',')
           : []
         staffList.value = res.data.musicImg ? res.data.musicImg.split(',') : []
-        // if (!showImg.value.value) {
-        // setAccompanyUrl()
-        // window.addEventListener(
-        //   'message',
-        //   async e => {
-        //     // 给图片设置背景色
-        //     const tempCanvas = await imgToCanvas(e.data)
-        //     const img = convasToImg(tempCanvas)
-        //     //  开始上传图片
-        //     uploadFunction(img)
-        //   },
-        //   false
-        // )
-        // }
+
         // 初始化默认数据是否有值
         if (firstList.value.length > 0) {
           defaultImgs.value.first = true
@@ -249,103 +248,6 @@ export default defineComponent({
         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: keyTime
-        }
-        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])
-        // }
-        // const files = base64ToBlob(file)
-
-        // 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)
@@ -450,7 +352,7 @@ export default defineComponent({
         // console.log(res)
         setTimeout(() => {
           musicDetail.value.coursewareId = res.data.id || ''
-          Toast('添加成功')
+          Toast('已将曲目添加到课件')
           musicDetail.value.coursewareStatus = 1
         }, 100)
       } catch {
@@ -695,7 +597,7 @@ export default defineComponent({
           musicDetail.value?.musicSheetType === 'CONCERT'
             ? getInstrumentName(staffData.partList[staffData.partIndex]?.track)
             : ''
-        
+
         if (musicDetail.value?.musicSheetType === 'SINGLE') {
           musicPdfUrl.value = musicDetail.value?.musicPdfUrl
         } else {
@@ -710,42 +612,29 @@ export default defineComponent({
       try {
         nextTick(() => {
           if (musicPdfUrl.value) {
-           
-
-            // staffData.iframeSrc = `${location.origin}${
-            //   location.pathname
-            // }pdf/web/viewer.html?file=${encodeURIComponent(staffData.musicPdfUrl)}&t=${Date.now()}`
+            // const url = `${location.origin}/pdf/web/viewer-pdf.html?file=${encodeURIComponent(
+            //   musicPdfUrl.value
+            // )}&t=${Date.now()}`
+            const url = `${location.origin}${
+              location.pathname
+            }pdf/web/viewer-pdf.html?file=${encodeURIComponent(
+              musicPdfUrl.value
+            )}&t=${Date.now()}`
 
             const iframeRef = document.querySelector('#staffIframeRef') as any
-            console.log(iframeRef, 'iframeRef')
-            iframeRef.contentWindow.location.replace(
-              '/pdf/web/viewer-pdf.html?file=' +
-                encodeURIComponent(musicPdfUrl.value) +
-                '&t=' +
-                Date.now()
-            )
-
-            // const iframeRef = document.querySelector('#staffIframeRef') as any
-            // iframeRef.contentWindow.location.replace(
-            //   `${location.origin}${
-            //     location.pathname
-            //   }pdf/web/viewer-pdf.html?file=${encodeURIComponent(
-            //     musicPdfUrl.value
-            //   )}&t=${Date.now()}`
-            // )
+            iframeRef.contentWindow.location.replace(url)
+            staffData.iframeSrc = url
           } else {
-            staffData.iframeSrc = `${
-              location.origin
-            }/osmd/index.html?t=${new Date().getTime()}`
-
-            // staffData.iframeSrc = `${location.origin}${
-            //   location.pathname
-            // }osmd/index.html?t=${new Date().getTime()}`
+            const url = `${location.origin}${
+              location.pathname
+            }osmd/index.html?t=${new Date().getTime()}`
+            // const url = `${location.origin}/osmd/index.html`
 
             const iframeRef = document.querySelector('#staffIframeRef') as any
             iframeRef.contentWindow.location.replace(
               `${location.origin}${location.pathname}osmd/index.html`
             )
+            staffData.iframeSrc = url
           }
         })
       } catch (error) {
@@ -828,6 +717,7 @@ export default defineComponent({
             <div ref={headers}>
               <ColHeader
                 background="transparent"
+                hideHeader={false}
                 border={false}
                 isFixed={false}
                 color="#fff"
@@ -860,187 +750,229 @@ export default defineComponent({
               height: `calc(100vh - var(--header-height) - var(--bottom-height) - 16px)`
             }}
           >
-            <Cell
-              border={false}
-              center
-              class={styles.musicInfo}
-              v-slots={{
-                icon: () => (
-                  <Image
-                    class={styles.pImg}
-                    src={musicDetail.value?.titleImg}
-                  />
-                ),
-                title: () => (
-                  <div class={styles.info}>
-                    <h4
-                      class="van-ellipsis"
-                      // onClick={() => handleGotoMusicScore(musicDetail.value)}
-                    >
-                      {musicDetail.value?.musicSheetName}
-                    </h4>
-                    <p
-                      style={{
-                        display: 'flex'
-                      }}
-                    >
-                      {paymentType.value.map(tag => (
-                        tag &&  <Tag
-                          style={{ color: colors[tag]?.color }}
-                          class={styles.tag}
-                          type="success"
-                          plain
-                        >
-                          {colors[tag].text}
-                        </Tag>
-                      ))}
-                      {musicDetail.value?.exquisiteFlag === 1 && (
-                        <Image
-                          class={styles.exquisiteFlag}
-                          src={getAssetsHomeFile('icon_exquisite.png')}
-                        />
-                      )}
+            <div>
+              <Cell
+                border={false}
+                center
+                class={styles.musicInfo}
+                v-slots={{
+                  icon: () => (
+                    <Image
+                      class={styles.pImg}
+                      src={musicDetail.value?.titleImg}
+                    />
+                  ),
+                  title: () => (
+                    <div class={styles.info}>
+                      <h4
+                        class="van-ellipsis"
+                        // onClick={() => handleGotoMusicScore(musicDetail.value)}
+                      >
+                        {musicDetail.value?.musicSheetName}
+                      </h4>
+                      <p
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center'
+                        }}
+                      >
+                        {paymentType.value.map(
+                          tag =>
+                            tag && (
+                              <Tag
+                                style={{ color: colors[tag]?.color }}
+                                class={styles.tag}
+                                type="success"
+                                plain
+                              >
+                                {colors[tag].text}
+                              </Tag>
+                            )
+                        )}
+                        {musicDetail.value?.exquisiteFlag === 1 && (
+                          <Image
+                            class={styles.exquisiteFlag}
+                            src={getAssetsHomeFile('icon_exquisite.png')}
+                          />
+                        )}
 
-                      {musicDetail.value?.albumNums > 0 && (
-                        <Image
-                          class={styles.songAlbum}
-                          src={getAssetsHomeFile('icon_album_active.png')}
-                        />
-                      )}
-                      <span class={styles.coomposer}>
-                        {musicDetail.value?.composer}
-                      </span>
-                    </p>
-                  </div>
-                ),
-                value: () => (
-                  <>
-                    {musicDetail.value?.notation ? (
+                        {musicDetail.value?.albumNums > 0 && (
+                          <Image
+                            class={styles.songAlbum}
+                            src={getAssetsHomeFile('icon_album_active.png')}
+                          />
+                        )}
+                        <span class={styles.coomposer}>
+                          {musicDetail.value?.composer}
+                        </span>
+                      </p>
+                    </div>
+                  ),
+                  value: () => (
+                    <>
                       <span
+                        style={{
+                          visibility:
+                            state.platformType === 'TEACHER' ? '' : 'hidden'
+                        }}
                         class={styles.download}
                         onClick={() => {
-                          staff.status = true
+                          if (musicDetail.value?.coursewareStatus) {
+                            removeCourse()
+                          } else {
+                            onAddCourse()
+                          }
                         }}
+                      >
+                        <img src={iconAddCourse} />
+                        <span>添加课件</span>
+                      </span>
+                      <span
                         style={{
                           display:
-                            musicDetail.value?.musicSheetType !== 'CONCERT'
+                            musicDetail.value?.musicSheetType === 'CONCERT'
                               ? ''
                               : 'none'
                         }}
+                        class={styles.download}
+                        onClick={() => toggleFavorite()}
                       >
-                        <img src={iconChangeStaff} />
-                        <span>转谱</span>
+                        <img
+                          src={
+                            musicDetail.value?.favorite
+                              ? iconCollectActive
+                              : iconCollect
+                          }
+                        />
+                        <span>收藏</span>
                       </span>
-                    ) : null}
-
-                    <span
-                      class={styles.download}
-                      onClick={() => {
-                        if (musicPdfUrl.value) {
-                          const songName =
-                            musicDetail.value?.musicSheetName +
-                            (staffData.instrumentName
-                              ? `(${staffData.instrumentName})`
-                              : '')
-                          promisefiyPostMessage({
-                            api: 'downloadFile',
-                            content: {
-                              downloadUrl: musicPdfUrl.value,
-                              fileName: songName
-                            }
-                          })
-                          return
-                        }
-                        if (showImg.value.length > 0) {
-                          downloadStatus.value = true
-                        } else {
-                          Toast('暂无图片')
+                    </>
+                  )
+                }}
+              />
+              <div class={styles.functionSection}>
+                <div
+                  class={styles.functionItem}
+                  onClick={() => {
+                    router.push({
+                      path: '/look-album-list',
+                      query: {
+                        id: musicDetail.value?.id,
+                        musicSubject: musicDetail.value?.musicSubject
+                      }
+                    })
+                  }}
+                >
+                  <img src={iconAlbum} />
+                  <span>专辑</span>
+                </div>
+                <div
+                  class={styles.functionItem}
+                  // style={{
+                  //   display:
+                  //     musicDetail.value?.musicSheetType === 'CONCERT'
+                  //       ? ''
+                  //       : 'none'
+                  // }}
+                  onClick={() => {
+                    if (musicDetail.value?.musicSheetType === 'CONCERT') {
+                      staffData.open = true
+                    } else {
+                      staff.status = true
+                    }
+                  }}
+                >
+                  <img src={iconChange} />
+                  <span>
+                    {musicDetail.value?.musicSheetType === 'CONCERT'
+                      ? '切换乐器'
+                      : '转谱'}
+                  </span>
+                </div>
+                <div
+                  class={styles.functionItem}
+                  onClick={() => {
+                    if (musicPdfUrl.value) {
+                      const songName =
+                        musicDetail.value?.musicSheetName +
+                        (staffData.instrumentName
+                          ? `(${staffData.instrumentName})`
+                          : '')
+                      promisefiyPostMessage({
+                        api: 'downloadFile',
+                        content: {
+                          downloadUrl: musicPdfUrl.value,
+                          fileName: songName
                         }
-                      }}
-                    >
-                      <img src={iconDownload} />
-                      <span>下载曲谱</span>
-                    </span>
+                      })
+                      return
+                    }
+                    if (showImg.value.length > 0) {
+                      downloadStatus.value = true
+                    } else {
+                      Toast('暂无图片')
+                    }
+                  }}
+                >
+                  <img src={iconDownload} />
+                  <span>下载</span>
+                </div>
+              </div>
+            </div>
 
-                    <span
-                      style={{
-                        display:
-                          musicDetail.value?.musicSheetType === 'CONCERT'
-                            ? ''
-                            : 'none'
-                      }}
-                      class={styles.download}
-                      onClick={() => {
-                        staffData.open = true
-                      }}
-                    >
-                      <Icon class={styles.iconExchange} name="exchange" />
-                      <span>切换乐器</span>
-                    </span>
-                  </>
-                )
-              }}
-            />
             <div class={styles.musicContent}>
-              {/* <p class={styles.musicTitle}>
-                {(musicDetail.value?.musicSheetName
-                  ? musicDetail.value?.musicSheetName
-                  : '') +
-                  (staffData.instrumentName
-                    ? `(${staffData.instrumentName})`
-                    : '')}
-              </p> */}
               {musicDetail.value?.musicSheetType === 'CONCERT' ||
               !defaultImgs.value[staff.radio] ? (
                 <>
-              {musicPdfUrl.value ? (
-                <iframe
-                  id="staffIframeRef"
-                  style={{
-                    opacity: loading.value ? 0 : 1
-                  }}
-                  src={staffData.iframeSrc}
-                  onLoad={() => {
-                    // 判断是用哪个渲染的
-                    loading.value = false
-                  }}
-                ></iframe>
-              ) : (
-                <>
-                  <p class={styles.musicTitle}>
-                    {(musicDetail.value?.musicSheetName
-                      ? musicDetail.value?.musicSheetName
-                      : '') +
-                      (staffData.instrumentName
-                        ? `(${staffData.instrumentName})`
-                        : '')}
-                  </p>
-                  {loading.value && (
-                    <div>
-                      <Vue3Lottie
-                        animationData={AstronautJSON}
-                        class={styles.finch}
-                      ></Vue3Lottie>
-                      {/* <p class={styles.finchLoad}>加载中...</p> */}
-                    </div>
+                  {musicPdfUrl.value ? (
+                    <iframe
+                      id="staffIframeRef"
+                      style={{
+                        opacity: loading.value ? 0 : 1
+                      }}
+                      src={staffData.iframeSrc}
+                      onLoad={() => {
+                        // 判断是用哪个渲染的
+                        loading.value = false
+                      }}
+                    ></iframe>
+                  ) : (
+                    <>
+                      <p class={styles.musicTitle}>
+                        {(musicDetail.value?.musicSheetName
+                          ? musicDetail.value?.musicSheetName
+                          : '') +
+                          (staffData.instrumentName
+                            ? `(${staffData.instrumentName})`
+                            : '')}
+                      </p>
+                      {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={() => {
+                          if (!defaultImgs.value[staff.radio]) {
+                            onChangeStaff(staff.radio)
+                          } else {
+                            musicIframeLoad()
+                          }
+                        }}
+                      ></iframe>
+                    </>
                   )}
-                  <iframe
-                    id="staffIframeRef"
-                    style={{
-                      opacity: loading.value ? 0 : 1
-                    }}
-                    src={staffData.iframeSrc}
-                    onLoad={() => {
-                      if (!defaultImgs.value[staff.radio]) {
-                        onChangeStaff(staff.radio)
-                      } else {
-                        musicIframeLoad()
-                      }
-                    }}
-                  ></iframe>
                 </>
-              )}
-            </>
+              ) : (
                 // <>
                 //   {loading.value && (
                 //     <>
@@ -1066,16 +998,15 @@ export default defineComponent({
                 //     }}
                 //   ></iframe>
                 // </>
-              ) : (
                 <>
-                <p class={styles.musicTitle}>
-                {(musicDetail.value?.musicSheetName
-                  ? musicDetail.value?.musicSheetName
-                  : '') +
-                  (staffData.instrumentName
-                    ? `(${staffData.instrumentName})`
-                    : '')}
-              </p>
+                  <p class={styles.musicTitle}>
+                    {(musicDetail.value?.musicSheetName
+                      ? musicDetail.value?.musicSheetName
+                      : '') +
+                      (staffData.instrumentName
+                        ? `(${staffData.instrumentName})`
+                        : '')}
+                  </p>
                   {showImg.value.length > 0 ? (
                     <div class={styles.musicImg}>
                       <img src={showImg.value[0]} alt="" />
@@ -1096,109 +1027,6 @@ export default defineComponent({
                   )}
                 </>
               )}
-
-              <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 class={[styles.collect, styles.collectCell]}>
-                  <div
-                    class={[styles.userInfo]}
-                    onClick={() => {
-                      if (
-                        browser().isApp &&
-                        musicDetail.value?.sourceType === 'TEACHER' &&
-                        state.platformType === 'STUDENT'
-                      ) {
-                        router.push({
-                          path: '/teacherHome',
-                          query: {
-                            teacherId: musicDetail.value?.userId,
-                            tabs: 'music'
-                          }
-                        })
-                      }
-                    }}
-                  >
-                    <img src={musicDetail.value?.userAvatar || iconTeacher} />
-                    <span>{musicDetail.value?.userName}</span>
-                  </div>
-
-                  <div class={styles.functionSection}>
-                    <div
-                      class={[styles.collectSection]}
-                      onClick={() => toggleFavorite()}
-                    >
-                      <span>{musicDetail.value?.favoriteCount}人收藏</span>
-                      <img
-                        src={
-                          musicDetail.value?.favorite
-                            ? iconCollectActive
-                            : iconCollect
-                        }
-                      />
-                    </div>
-                    {state.platformType === 'TEACHER' && (
-                      <div
-                        class={[styles.collectSection]}
-                        onClick={() => {
-                          if (musicDetail.value?.coursewareStatus) {
-                            removeCourse()
-                          } else {
-                            onAddCourse()
-                          }
-                        }}
-                      >
-                        <span>
-                          {musicDetail.value?.coursewareStatus
-                            ? '移出课件'
-                            : '添加到课件'}
-                        </span>
-                        {musicDetail.value?.coursewareStatus ? (
-                          <Icon name="clear" />
-                        ) : (
-                          <Icon name="add" size={18} />
-                        )}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div
-              class={[styles.lookAlbum, styles.collectCell]}
-              onClick={() => {
-                router.push({
-                  path: '/look-album-list',
-                  query: {
-                    id: musicDetail.value?.id,
-                    musicSubject: musicDetail.value?.musicSubject
-                  }
-                })
-              }}
-            >
-              <div>
-                <img src={iconAlbum} />
-                <span>进入曲目所在平台专辑列表</span>
-              </div>
-              <Icon name="arrow" size={16} color="#666" />
             </div>
           </div>
 
@@ -1209,6 +1037,26 @@ export default defineComponent({
               varName="--bottom-height"
             >
               <div ref={footers}>
+                <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>
                 {/* 判断是否是免费的，或者已经购买过，是否从专辑过来的 */}
                 {buyState.value.play ||
                 (state.platformType === 'TEACHER' &&
@@ -1453,32 +1301,31 @@ export default defineComponent({
                 staffData.partXmlIndex = value.xmlValue
                 showImg.value = []
                 nextTick(() => {
-                  
-                let tempPdf = value?.musicPdfUrl
-                if (musicDetail.value?.musicSheetType !== 'CONCERT') {
-                  // tempPdf = ''
-                  if (staff.radio === 'first') {
-                    tempPdf = value?.firstPdfUrl
-                  } else if (staff.radio === 'fixed') {
-                    tempPdf = value?.jianPdfUrl
-                  } else if (staff.radio === 'staff') {
-                    tempPdf = value?.musicPdfUrl
+                  let tempPdf = value?.musicPdfUrl
+                  if (musicDetail.value?.musicSheetType !== 'CONCERT') {
+                    // tempPdf = ''
+                    if (staff.radio === 'first') {
+                      tempPdf = value?.firstPdfUrl
+                    } else if (staff.radio === 'fixed') {
+                      tempPdf = value?.jianPdfUrl
+                    } else if (staff.radio === 'staff') {
+                      tempPdf = value?.musicPdfUrl
+                    }
                   }
-                }
 
-                if (tempPdf) {
-                  musicPdfUrl.value = tempPdf
-                  renderStaff()
-                } else {
-                  musicPdfUrl.value = ''
-                  loading.value = true
-                  // 为了处理，之前是使用pdf渲染，现在又用osmd，iframe没有重新加载
-                  if (staffData.iframeSrc.indexOf('pdf/web') !== -1) {
+                  if (tempPdf) {
+                    musicPdfUrl.value = tempPdf
                     renderStaff()
                   } else {
-                    resetRender()
+                    musicPdfUrl.value = ''
+                    loading.value = true
+                    // 为了处理，之前是使用pdf渲染，现在又用osmd，iframe没有重新加载
+                    if (staffData.iframeSrc.indexOf('pdf/web') !== -1) {
+                      renderStaff()
+                    } else {
+                      resetRender()
+                    }
                   }
-                }
                 })
               }}
               onCancel={() => (staffData.open = false)}