添加播放

src/views/co-ai/change-voice/index.module.less

@@ -0,0 +1,49 @@
+.changeVoice {
+  width: 335px;
+  background: #FFFFFF;
+  border-radius: 12px;
+  padding-top: 13px;
+
+  .changeVoiceContainer {
+    height: 60vh;
+    padding: 0 13px;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .item {
+      height: 46px;
+      border-radius: 8px;
+      font-size: 15px;
+      background-color: #fff;
+      color: #333333;
+      line-height: 52px;
+      text-align: center;
+
+      &.active {
+        background: #F6F6F6;
+      }
+    }
+  }
+}
+
+.btnGroups {
+  border-top: 1px solid #F2F2F2;
+  display: flex;
+  align-items: center;
+  padding: 12px 10px;
+
+  :global {
+    .van-button {
+      font-size: 16px;
+      color: #333333;
+    }
+
+    .van-button+.van-button {
+      margin-left: 15px;
+    }
+  }
+}

src/views/co-ai/change-voice/index.tsx

@@ -0,0 +1,56 @@
+import { defineComponent, ref } from 'vue';
+import styles from './index.module.less';
+import { Button } from 'vant';
+
+export default defineComponent({
+  name: 'change-voice',
+  props: {
+    musicalInstruments: {
+      type: Array,
+      default: () => []
+    },
+    musicalInstrumentIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const musicIndex = ref(props.musicalInstrumentIndex);
+    return () => (
+      <div class={styles.changeVoice}>
+        <div class={styles.changeVoiceContainer}>
+          {props.musicalInstruments?.map((item: any, index: number) => (
+            <div
+              class={[styles.item, musicIndex.value === index && styles.active]}
+              onClick={() => {
+                musicIndex.value = index;
+              }}>
+              {item.name}
+            </div>
+          ))}
+        </div>
+        <div class={styles.btnGroups}>
+          <Button
+            round
+            block
+            onClick={() => {
+              emit('close');
+            }}>
+            取消
+          </Button>
+          <Button
+            type="primary"
+            block
+            round
+            color="linear-gradient(90deg, #44C9FF 0%, #259CFE 100%)"
+            onClick={() => {
+              emit('confirm', musicIndex.value);
+            }}>
+            确认
+          </Button>
+        </div>
+      </div>
+    );
+  }
+});

src/views/co-ai/index.module.less

@@ -350,6 +350,32 @@
   height: 100%;
   border-radius: 18px;
   overflow: hidden;
+  position: relative;
+
+  .iconTransfer {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: linear-gradient(90deg, #44C9FF 0%, #259CFE 100%);
+    border-radius: 0px 0px 0px 16px;
+    padding: 5px 8px 4px;
+    font-size: 11px;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 18px;
+    display: flex;
+    align-items: center;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 12px;
+      height: 11px;
+      background: url('./image/icon-transfer.png') no-repeat center;
+      background-size: contain;
+      margin-right: 5px;
+    }
+  }
 }
 
 .rightBtns {

src/views/co-ai/index.tsx

@@ -43,6 +43,9 @@ import request from '@/helpers/request';
 import { useRoute } from 'vue-router';
 import { addWatermark, convasToImg, imgToCanvas } from './imageFunction';
 import { browser } from '@/helpers/utils';
+import ChangeVoice from './change-voice';
+import { storage } from '@/helpers/storage';
+import { ACCESS_TOKEN } from '@/store/mutation-types';
 export default defineComponent({
   name: 'co-ai',
   setup() {
@@ -77,6 +80,10 @@ export default defineComponent({
       loading: true,
       finshed: false,
 
+      showChangeVoice: false,
+      selectMusicInstrumentIndex: 0,
+      iframeSrc: '',
+
       searchNoticeShow: false,
       searchNotice: {
         left: '',
@@ -176,6 +183,7 @@ export default defineComponent({
             const waterCanvasImg = await addWatermark(canvas);
             // canvas转图片
             const dataURL = await convasToImg(waterCanvasImg);
+            console.log(dataURL, 'dataURL');
             setTimeout(() => {
               showToast('已保存到相册');
             }, 500);
@@ -249,6 +257,15 @@ export default defineComponent({
       getMusicList();
     };
 
+    const musicIframeLoad = () => {
+      const token = storage.get(ACCESS_TOKEN);
+      const details = data.musics[data.musicIndex];
+      const origin = /(localhost|192)/.test(location.host)
+        ? 'https://test.lexiaoya.cn'
+        : location.origin;
+      data.iframeSrc = `${origin}/instrument/?id=${details.id}&modelType=practise&modeType=json&Authorization=${token}&isPreView=true&part-index=${data.selectMusicInstrumentIndex}`;
+    };
+
     const setSearchBox = () => {
       const el = document.querySelector('.searchNotice .van-field__control');
       if (el) {
@@ -259,6 +276,16 @@ export default defineComponent({
         data.searchNotice.height = rect.height + 'px';
       }
     };
+
+    const isEnsemble = computed(() => {
+      const musics = data.musics[data.musicIndex]?.musicalInstruments;
+      if (musics && musics.length > 1) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+
     onMounted(async () => {
       // 安卓的状态栏
       postMessage({
@@ -269,7 +296,7 @@ export default defineComponent({
       });
 
       await getMusicSheetCategories();
-      getMusicList();
+      await getMusicList();
 
       const obv = new IntersectionObserver(entries => {
         if (entries[0].intersectionRatio > 0) {
@@ -406,7 +433,10 @@ export default defineComponent({
                           ? styles.musicActive
                           : styles.disableNotic
                       ]}
-                      onClick={() => (data.musicIndex = index)}>
+                      onClick={() => {
+                        data.musicIndex = index;
+                        musicIframeLoad();
+                      }}>
                       <img
                         class={styles.musicAvtor}
                         src={item.titleImg}
@@ -449,56 +479,91 @@ export default defineComponent({
           </div>
           <div class={[styles.opacityBg, styles.right]}>
             <div class={styles.rightBox}>
+              {isEnsemble.value && (
+                <div
+                  class={styles.iconTransfer}
+                  onClick={() => (data.showChangeVoice = true)}>
+                  切换声轨
+                </div>
+              )}
+
               <div ref={downRef}>
                 <div class={styles['right-musicName']}>
                   {data.musics[data.musicIndex]?.musicSheetName}
                 </div>
-                {data.showMusicImg === 'first' ? (
-                  <>
-                    {data.musics[data.musicIndex]?.musicSvg
-                      ?.split(',')
-                      .map((item: any, index: number) => {
-                        return (
-                          <img
-                            class={styles.staff}
-                            src={item + '?v=' + Date.now()}
-                            key={item}
-                            crossorigin="anonymous"
-                          />
-                        );
-                      })}
-                  </>
-                ) : data.showMusicImg === 'fixed' ? (
-                  <>
-                    <TransitionGroup name="van-fade">
-                      {data.musics[data.musicIndex]?.musicJianSvg
-                        ?.split(',')
-                        .map((item: any, index: number) => {
-                          return (
-                            <img
-                              class={styles.staff}
-                              src={item + '?v=' + Date.now()}
-                              key={item}
-                              crossorigin="anonymous"
-                            />
-                          );
-                        })}
-                    </TransitionGroup>
-                  </>
+                {/* ensembleDetail */}
+                {isEnsemble.value ? (
+                  <div>
+                    <>
+                      {/* {loading.value && (
+                        <div>
+                          <Vue3Lottie
+                            animationData={AstronautJSON}
+                            class={styles.finch}></Vue3Lottie>
+                          <p class={styles.finchLoad}>加载中...</p>
+                        </div>
+                      )} */}
+                      <iframe
+                        id="staffIframeRef"
+                        style={{
+                          width: '100%'
+                          // opacity: loading.value ? 0 : 1
+                        }}
+                        src={data.iframeSrc}
+                        onLoad={musicIframeLoad}></iframe>
+                      {/* <OsmdPreview ref={osmdPreviewRef} /> */}
+                    </>
+                  </div>
                 ) : (
                   <>
-                    {data.musics[data.musicIndex]?.musicImg
-                      ?.split(',')
-                      .map((item: any, index: number) => {
-                        return (
-                          <img
-                            class={styles.staff}
-                            src={item + '?v=' + Date.now()}
-                            key={item}
-                            crossorigin="anonymous"
-                          />
-                        );
-                      })}
+                    {data.showMusicImg === 'first' ? (
+                      <>
+                        {data.musics[data.musicIndex]?.musicSvg
+                          ?.split(',')
+                          .map((item: any, index: number) => {
+                            return (
+                              <img
+                                class={styles.staff}
+                                src={item + '?v=' + Date.now()}
+                                key={item}
+                                crossorigin="anonymous"
+                              />
+                            );
+                          })}
+                      </>
+                    ) : data.showMusicImg === 'fixed' ? (
+                      <>
+                        <TransitionGroup name="van-fade">
+                          {data.musics[data.musicIndex]?.musicJianSvg
+                            ?.split(',')
+                            .map((item: any, index: number) => {
+                              return (
+                                <img
+                                  class={styles.staff}
+                                  src={item + '?v=' + Date.now()}
+                                  key={item}
+                                  crossorigin="anonymous"
+                                />
+                              );
+                            })}
+                        </TransitionGroup>
+                      </>
+                    ) : (
+                      <>
+                        {data.musics[data.musicIndex]?.musicImg
+                          ?.split(',')
+                          .map((item: any, index: number) => {
+                            return (
+                              <img
+                                class={styles.staff}
+                                src={item + '?v=' + Date.now()}
+                                key={item}
+                                crossorigin="anonymous"
+                              />
+                            );
+                          })}
+                      </>
+                    )}
                   </>
                 )}
               </div>
@@ -521,7 +586,10 @@ export default defineComponent({
                 }}
               </Popover>
 
-              <img id="coai-2" src={icon_down} onClick={handleSave} />
+              {!isEnsemble.value && (
+                <img id="coai-2" src={icon_down} onClick={handleSave} />
+              )}
+
               <div class={styles.rightBtnsRight} id="coai-3">
                 <img src={icons.icon_start} onClick={() => handleGoto()} />
               </div>
@@ -560,6 +628,47 @@ export default defineComponent({
             }}
           />
         </Popup>
+
+        <Popup
+          class="popup-custom van-scale"
+          transition="van-scale"
+          closeOnClickOverlay={false}
+          v-model:show={data.showVip}>
+          <TheVip
+            onClose={val => {
+              if (val) {
+                postMessage({
+                  api: 'openWebView',
+                  content: {
+                    url: `${location.origin}${location.pathname}#/member-center`,
+                    orientation: 1
+                  }
+                });
+              }
+              data.showVip = false;
+            }}
+          />
+        </Popup>
+
+        <Popup
+          class="popup-custom van-scale"
+          transition="van-scale"
+          closeOnClickOverlay={false}
+          v-model:show={data.showChangeVoice}>
+          <ChangeVoice
+            musicalInstruments={
+              data.musics[data.musicIndex]?.musicalInstruments || []
+            }
+            musicalInstrumentIndex={data.selectMusicInstrumentIndex}
+            onClose={() => (data.showChangeVoice = false)}
+            onConfirm={(index: number) => {
+              data.selectMusicInstrumentIndex = index;
+
+              musicIframeLoad();
+              data.showChangeVoice = false;
+            }}
+          />
+        </Popup>
       </div>
     );
   }

src/views/exercise-record/exercis-detail.tsx

@@ -27,7 +27,6 @@ export default defineComponent({
       currentDate: [dayjs().format('YYYY'), dayjs().format('MM')],
       isClick: false,
       background: 'transparent',
-      color: '#fff',
       practiceMonthName: route.query.practiceMonthName
         ? route.query.practiceMonthName
         : dayjs().format('YYYY') + '年' + dayjs().format('MM') + '月'
@@ -95,10 +94,10 @@ export default defineComponent({
         const { y } = useWindowScroll();
         if (y.value > 52) {
           state.background = '#fff';
-          state.color = '#323333';
+          // state.color = '#323333';
         } else {
           state.background = 'transparent';
-          state.color = '#fff';
+          // state.color = '#fff';
         }
       });
 
@@ -133,11 +132,7 @@ export default defineComponent({
         <div class={[styles.exercisContainer]}>
           <div class={styles.topWrap} ref={topWrap}>
             <OSticky position="top">
-              <OHeader
-                border={false}
-                background={state.background}
-                color={state.color}
-              />
+              <OHeader border={false} background={state.background} />
             </OSticky>
             <div class={styles.topInfo}>
               <div class={styles.topInfoLeft}>