更新名字显示

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

@@ -178,8 +178,6 @@ export default defineComponent({
       if (musicDetail.value?.musicSheetType !== 'CONCERT') {
         loading.value = false
       }
-
-      
     }
     const base64ToBlob = data => {
       const arr = data.split(','),
@@ -310,9 +308,8 @@ export default defineComponent({
     }
     const showLoading = (e: any) => {
       console.log(e)
-      if(e.data?.api === 'musicStaffRender'){
+      if (e.data?.api === 'musicStaffRender') {
         loading.value = e.data.loading
-
       }
     }
     onMounted(async () => {
@@ -527,20 +524,26 @@ export default defineComponent({
       staffData.iframeSrc = `${location.origin}${location.pathname}osmd/index.html`
       staffData.musicXml = musicDetail.value?.xmlFileUrl || ''
       staffData.partList = musicDetail.value?.background || []
-      staffData.instrumentName = getInstrumentName(staffData.partList[staffData.partIndex]?.track)
-      
+      staffData.instrumentName = getInstrumentName(
+        staffData.partList[staffData.partIndex]?.track
+      )
     }
     const musicIframeLoad = () => {
       const iframeRef: any = document.getElementById('staffIframeRef')
-      if (iframeRef && iframeRef.contentWindow.renderXml){
-        iframeRef.contentWindow.renderXml(staffData.musicXml, staffData.partIndex)
+      if (iframeRef && iframeRef.contentWindow.renderXml) {
+        iframeRef.contentWindow.renderXml(
+          staffData.musicXml,
+          staffData.partIndex
+        )
       }
     }
     const resetRender = () => {
       const iframeRef: any = document.getElementById('staffIframeRef')
-      if (iframeRef && iframeRef.contentWindow.renderXml){
+      if (iframeRef && iframeRef.contentWindow.renderXml) {
         iframeRef.contentWindow.resetRender(staffData.partIndex)
-        staffData.instrumentName = getInstrumentName(staffData.partList[staffData.partIndex]?.track)
+        staffData.instrumentName = getInstrumentName(
+          staffData.partList[staffData.partIndex]?.track
+        )
       }
     }
     const partColumns = computed(() => {
@@ -643,7 +646,15 @@ export default defineComponent({
                 ),
                 value: () => (
                   <>
-                    <div class="van-cell__value" style={{display: musicDetail.value?.musicSheetType === 'SINGLE' ? '' : 'none'}}>
+                    <div
+                      class="van-cell__value"
+                      style={{
+                        display:
+                          musicDetail.value?.musicSheetType === 'SINGLE'
+                            ? ''
+                            : 'none'
+                      }}
+                    >
                       {musicDetail.value?.notation ? (
                         <span
                           class={styles.download}
@@ -670,23 +681,40 @@ export default defineComponent({
                       </span>
                     </div>
                     <span
-                      style={{display: musicDetail.value?.musicSheetType === 'CONCERT' ? '' : 'none'}}
+                      style={{
+                        display:
+                          musicDetail.value?.musicSheetType === 'CONCERT'
+                            ? ''
+                            : 'none'
+                      }}
                       class={styles.download}
                       onClick={() => {
                         staffData.open = true
                       }}
                     >
-                      <Icon style={{background: 'rgba(246,246,246,1)', borderRadius: '50%', padding: '4px'}} size="20px" name="exchange" />
+                      <Icon
+                        style={{
+                          background: 'rgba(246,246,246,1)',
+                          borderRadius: '50%',
+                          padding: '4px'
+                        }}
+                        size="20px"
+                        name="exchange"
+                      />
                       <span>切换乐器</span>
                     </span>
-                    
                   </>
                 )
               }}
             />
             <div class={styles.musicContent}>
               <p class={styles.musicTitle}>
-                {musicDetail.value?.musicSheetName + (staffData.instrumentName ? `(${staffData.instrumentName})` : '')}
+                {(musicDetail.value?.musicSheetName
+                  ? musicDetail.value?.musicSheetName
+                  : '') +
+                  (staffData.instrumentName
+                    ? `(${staffData.instrumentName})`
+                    : '')}
               </p>
               {musicDetail.value?.musicSheetType === 'CONCERT' ? (
                 <>
@@ -699,28 +727,32 @@ export default defineComponent({
                       <p class={styles.finchLoad}>加载中...</p>
                     </>
                   )}
-                  <iframe id="staffIframeRef" src={staffData.iframeSrc} onLoad={musicIframeLoad}></iframe>
-                  
+                  <iframe
+                    id="staffIframeRef"
+                    src={staffData.iframeSrc}
+                    onLoad={musicIframeLoad}
+                  ></iframe>
                 </>
-              ) : <>
-                {showImg.length > 0 ? (
-                  <img src={showImg[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>
-                )}
-              </>}
-              
+              ) : (
+                <>
+                  {showImg.length > 0 ? (
+                    <img src={showImg[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 class={styles.videoOperation}>
                 {audioFileUrl.value && (
@@ -839,7 +871,9 @@ export default defineComponent({
                     color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
                     onClick={() => {
                       player.value && player.value.stop()
-                      musicBuy(musicDetail.value, () => {}, {"part-index": staffData.partIndex || 0})
+                      musicBuy(musicDetail.value, () => {}, {
+                        'part-index': staffData.partIndex || 0
+                      })
                     }}
                   >
                     立即练习
@@ -1046,17 +1080,23 @@ export default defineComponent({
             </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
-                  nextTick(() => {
-                    resetRender()
-                  })
-                }} 
-                onCancel={() => staffData.open = false}
-               />
+          <Popup
+            teleport="body"
+            position="bottom"
+            round
+            v-model:show={staffData.open}
+          >
+            <Picker
+              columns={partColumns.value}
+              onConfirm={value => {
+                staffData.open = false
+                staffData.partIndex = value.value
+                nextTick(() => {
+                  resetRender()
+                })
+              }}
+              onCancel={() => (staffData.open = false)}
+            />
           </Popup>
         </div>
       )