修改乐器code码

src/helpers/utils.ts

@@ -275,7 +275,7 @@ export const dateFormat = (
   return dayjs(value).format(format);
 };
 
-const instruments: any = {
+export const stackInstruments: any = {
   'Acoustic Grand Piano': '大钢琴',
   'Bright Acoustic Piano': '明亮的钢琴',
   'Electric Grand Piano': '电钢琴',
@@ -482,7 +482,7 @@ const instruments: any = {
 };
 
 /** 获取分轨名称 */
-export const getInstrumentName = (name = '') => {
+export const getInstrumentName = (instruments: any, name = '') => {
   name = name.toLocaleLowerCase().replace(/ /g, '');
   if (!name) return '';
   for (let key in instruments) {

src/views/co-ai/index.tsx

@@ -54,7 +54,8 @@ import {
   getInstrumentName,
   vaildMusicScoreUrl,
   trackToCode,
-  getHttpOrigin
+  getHttpOrigin,
+  stackInstruments
 } from '@/helpers/utils';
 import { audioPlayType } from '@/helpers/constant';
 
@@ -618,7 +619,7 @@ export default defineComponent({
               ? true
               : false;
 
-          const instrumentName = getInstrumentName(item);
+          const instrumentName = getInstrumentName(stackInstruments, item);
           const instrumentId = instrumentCodeToInstrumentId(
             musicalInstruments,
             item

src/views/hot-music-more/index.tsx

@@ -127,6 +127,7 @@ export default defineComponent({
       showVip: false,
       vipMember: baseState.user.data.vipMember,
       tabActive: '' as any,
+      instrumentCodes: {} as any, // 所有的乐器code 对应的名称
       newTags: [] as any,
       isTagExpand: false,
       musics: [] as any,
@@ -414,11 +415,33 @@ export default defineComponent({
       }
     };
 
+    /**
+     * 获取所有曲目code
+     */
+    const getInstrumentCode = async () => {
+      try {
+        const { data } = await request.get('/edu-app/musicSheet/instrumentCode');
+
+        const result = data || [];
+        const tempCodes: any = {}
+        result.forEach((item: any) => {
+          const codes = item.code?.split(',');
+          codes.forEach((code: any) => {
+            tempCodes[code] = item.name;
+          });
+        });
+        state.instrumentCodes = tempCodes;
+      } catch {
+        //
+      }
+    }
+
     const tabResize = () => {
       tabsRef.value?.resize();
     };
 
     onMounted(async () => {
+      getInstrumentCode()
       if (route.query.type) {
         state.tabActive = route.query.type;
         state.isAllStatus = false;
@@ -441,17 +464,6 @@ export default defineComponent({
       getMusicList();
 
       window.addEventListener('resize', tabResize);
-      // useEventListener(document, 'scroll', () => {
-      //   if (state.isFocus) {
-      //     mSearchRef.value?.searchBlur();
-      //   }
-      //   // if(state.isFocus2) {
-      //   //   const header: any = document.querySelector('.van-sticky--fixed')
-      //   //   header.style.position = 'absolute'
-      //   //   header.style.top = window.scrollY + 'px'
-      //   //   console.log(window.scrollY, 'window.scrollY')
-      //   // }
-      // });
 
       listenerMessage('webViewOnResume', () => {
         tabResize();
@@ -820,7 +832,7 @@ export default defineComponent({
           closeable
           round
           v-model:show={state.musicDetailPopup}>
-          <MusicDetail item={state.item} onHandleGoto={handleGoto} />
+          <MusicDetail item={state.item} instrumentCodes={state.instrumentCodes} onHandleGoto={handleGoto} />
         </Popup>
 
         <Popup

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

@@ -12,12 +12,12 @@ import styles from './index.module.less';
 import iconChange from '../images/icon-change.png';
 import iconDownload from '../images/icon-download.png';
 import iconStaff from '../images/icon-staff.png';
-import staff from '../images/staff/staff.png'
-import staffActive from '../images/staff/staff-active.png'
-import first from '../images/staff/first.png'
-import firstActive from '../images/staff/first-active.png'
-import fixed from '../images/staff/fixed.png'
-import fixedActive from '../images/staff/fixed-active.png'
+import staff from '../images/staff/staff.png';
+import staffActive from '../images/staff/staff-active.png';
+import first from '../images/staff/first.png';
+import firstActive from '../images/staff/first-active.png';
+import fixed from '../images/staff/fixed.png';
+import fixedActive from '../images/staff/fixed-active.png';
 import { Button, NoticeBar, Popover, showLoadingToast, showToast } from 'vant';
 import { state } from '@/state';
 import {
@@ -39,13 +39,18 @@ export default defineComponent({
     item: {
       type: Object,
       default: () => ({})
+    },
+    /** 乐器编码 */
+    instrumentCodes: {
+      type: Object,
+      default: () => ({})
     }
   },
   emits: ['handleGoto'],
   setup(props, { emit }) {
     const item = toRef(props.item);
-    const noticeBarDom = ref()
-    const isScroll = ref(false)
+    const noticeBarDom = ref();
+    const isScroll = ref(false);
     const data = reactive({
       musicPdfUrl: '',
       iframeSrc: '',
@@ -63,8 +68,8 @@ export default defineComponent({
       () => props.item,
       () => {
         item.value = props.item;
-        data.musicPdfUrl = ''
-        data.iframeSrc = ''
+        data.musicPdfUrl = '';
+        data.iframeSrc = '';
         __init();
       }
     );
@@ -99,16 +104,16 @@ export default defineComponent({
         });
       }
       action.forEach((item: any) => {
-        if(item.value === data.showMusicImg) {
-          if(item.value === 'first') {
-            item.icon = firstActive
-          } else if(item.value == 'fixed') {
-            item.icon = fixedActive
-          } else if(item.value === 'staff') {
-            item.icon = staffActive
+        if (item.value === data.showMusicImg) {
+          if (item.value === 'first') {
+            item.icon = firstActive;
+          } else if (item.value == 'fixed') {
+            item.icon = fixedActive;
+          } else if (item.value === 'staff') {
+            item.icon = staffActive;
           }
         }
-      })
+      });
 
       return action.map((item, index) => {
         return {
@@ -125,11 +130,14 @@ export default defineComponent({
         return {
           ...item,
           color:
-            data.selectMusicInstrumentIndex === item.value ? 'var(--van-primary-color)' : '',
-          className: data.selectMusicInstrumentIndex === item.value ? 'fontBlod' : ''
+            data.selectMusicInstrumentIndex === item.value
+              ? 'var(--van-primary-color)'
+              : '',
+          className:
+            data.selectMusicInstrumentIndex === item.value ? 'fontBlod' : ''
         };
       });
-    })
+    });
 
     /** 保存图片 */
     const handleSave = async () => {
@@ -156,7 +164,7 @@ export default defineComponent({
             const waterCanvasImg = await addWatermark(canvas);
             // canvas转图片
             const dataURL = await convasToImg(waterCanvasImg);
-            console.log(dataURL, 'dataUrl')
+            console.log(dataURL, 'dataUrl');
             setTimeout(() => {
               showToast('已保存到相册');
             }, 500);
@@ -351,7 +359,7 @@ export default defineComponent({
               ? true
               : false;
 
-          const instrumentName = getInstrumentName(item);
+          const instrumentName = getInstrumentName(props.instrumentCodes, item);
           const instrumentId = instrumentCodeToInstrumentId(
             musicalInstruments,
             item
@@ -489,17 +497,23 @@ export default defineComponent({
       musicIframeLoad();
 
       nextTick(() => {
-        const noticeBarEl = noticeBarDom.value.$el
-        if(noticeBarEl){
-           isScroll.value = noticeBarEl.querySelector(".van-notice-bar__wrap")?.offsetWidth < noticeBarEl.querySelector(".van-notice-bar__content")?.offsetWidth
+        const noticeBarEl = noticeBarDom.value.$el;
+        if (noticeBarEl) {
+          isScroll.value =
+            noticeBarEl.querySelector('.van-notice-bar__wrap')?.offsetWidth <
+            noticeBarEl.querySelector('.van-notice-bar__content')?.offsetWidth;
         }
-      })
+      });
     };
 
-
     /** 去云练习 */
     const handleGoto = () => {
-      emit('handleGoto', item.value, data.showMusicImg, data.selectMusicInstrumentIndex)
+      emit(
+        'handleGoto',
+        item.value,
+        data.showMusicImg,
+        data.selectMusicInstrumentIndex
+      );
     };
 
     onMounted(() => {
@@ -510,17 +524,20 @@ export default defineComponent({
         <div class={styles.musicContainer}>
           <div class={styles.container}>
             <div
-              class={[styles['right-musicName'], isScroll.value && styles.isScroll]}
+              class={[
+                styles['right-musicName'],
+                isScroll.value && styles.isScroll
+              ]}
               style={{
                 opacity: !data.musicPdfUrl ? '1' : '0',
                 height: !data.musicPdfUrl ? 'auto' : '0'
               }}>
-                <NoticeBar
-                    ref={noticeBarDom}
-                    text={item.value?.musicSheetName}
-                    class={styles.noticeBar}
-                    background="none"
-                  />
+              <NoticeBar
+                ref={noticeBarDom}
+                text={item.value?.musicSheetName}
+                class={styles.noticeBar}
+                background="none"
+              />
             </div>
             {data.iframeSrc &&
             (isEnsemble.value || data.musicPdfUrl || !isMusicImg.value) ? (
@@ -604,20 +621,35 @@ export default defineComponent({
             )}
           </div>
 
-
-          <div class={[styles.container, styles.downContainer]}  ref={downRef}>
+          <div class={[styles.container, styles.downContainer]} ref={downRef}>
             <div
               class={[styles['right-musicName'], styles.downloadMusicName]}
               style={{
                 opacity: !data.musicPdfUrl ? '1' : '0',
                 height: !data.musicPdfUrl ? 'auto' : '0'
               }}>
-                  <div class={styles.name}>{item.value?.musicSheetName}</div>
-              </div>
-              <div>
-                {data.showMusicImg === 'first' ? (
-                  <>
-                    {item.value?.musicFirstImg
+              <div class={styles.name}>{item.value?.musicSheetName}</div>
+            </div>
+            <div>
+              {data.showMusicImg === 'first' ? (
+                <>
+                  {item.value?.musicFirstImg
+                    ?.split(',')
+                    .map((item: any, index: number) => {
+                      return (
+                        <img
+                          class={styles.staff}
+                          src={item}
+                          key={item}
+                          crossorigin="anonymous"
+                        />
+                      );
+                    })}
+                </>
+              ) : data.showMusicImg === 'fixed' ? (
+                <>
+                  <TransitionGroup name="van-fade">
+                    {item.value?.musicJianImg
                       ?.split(',')
                       .map((item: any, index: number) => {
                         return (
@@ -629,45 +661,28 @@ export default defineComponent({
                           />
                         );
                       })}
-                  </>
-                ) : data.showMusicImg === 'fixed' ? (
-                  <>
-                    <TransitionGroup name="van-fade">
-                      {item.value?.musicJianImg
-                        ?.split(',')
-                        .map((item: any, index: number) => {
-                          return (
-                            <img
-                              class={styles.staff}
-                              src={item}
-                              key={item}
-                              crossorigin="anonymous"
-                            />
-                          );
-                        })}
-                    </TransitionGroup>
-                  </>
-                ) : (
-                  <>
-                    {item.value?.musicImg
-                      ?.split(',')
-                      .map((item: any, index: number) => {
-                        return (
-                          <img
-                            class={styles.staff}
-                            src={item + '?v=' + Date.now()}
-                            key={item}
-                            crossorigin="anonymous"
-                          />
-                        );
-                      })}
-                  </>
-                )}
-              </div>
+                  </TransitionGroup>
+                </>
+              ) : (
+                <>
+                  {item.value?.musicImg
+                    ?.split(',')
+                    .map((item: any, index: number) => {
+                      return (
+                        <img
+                          class={styles.staff}
+                          src={item + '?v=' + Date.now()}
+                          key={item}
+                          crossorigin="anonymous"
+                        />
+                      );
+                    })}
+                </>
+              )}
+            </div>
           </div>
         </div>
 
-
         <div class={styles.btnGroup}>
           <div class={styles.operation}>
             {isEnsemble.value && (
@@ -679,7 +694,7 @@ export default defineComponent({
                 placement="top-start"
                 onSelect={(item: any) => {
                   // console.log(item, 'item')
-                  data.selectMusicInstrumentIndex = item.value
+                  data.selectMusicInstrumentIndex = item.value;
                   data.showChangeVoice = false;
                   musicIframeLoad();
                 }}>