whnt

src/views/home/index.module.less

@@ -276,4 +276,8 @@
       width: 98px;
     }
   }
+}
+
+.subjectSyncModal {
+  width: 920px;
 }

src/views/home/index.tsx

@@ -35,6 +35,7 @@ import { useResizeObserver } from '@vueuse/core';
 import PlaceholderTone from '/src/components/layout/modals/placeholderTone';
 import PreviewWindow from '../preview-window';
 import { state } from '/src/state';
+import SubjectModal from './modals/subject-modal';
 // import { state } from '/src/state';
 export const formatDateToDay = () => {
   const hours = dayjs().hour();
@@ -64,7 +65,8 @@ export default defineComponent({
       unit: null,
       classLoading: false,
       showGuide: false,
-      homeLeftHeight: 'auto'
+      homeLeftHeight: 'auto',
+      subjectSyncVisiable: false
     });
 
     onMounted(async () => {
@@ -138,22 +140,7 @@ export default defineComponent({
               <div
                 class={[styles.topSection, styles.topSection1]}
                 onClick={() => {
-                  forms.message = '听音练习功能暂未开放，敬请期待！';
-                  showModalTone.value = true;
-
-                  // const origin = /(localhost|192)/.test(location.host)
-                  //   ? 'https://test.lexiaoya.cn'
-                  //   : location.origin;
-                  // const src = `${origin}/instrument/#/view-figner-listen?Authorization=${userStore.getToken}`;
-                  // if (window.matchMedia('(display-mode: standalone)').matches) {
-                  //   state.application = window.matchMedia(
-                  //     '(display-mode: standalone)'
-                  //   ).matches;
-                  //   forms.previewModal = true;
-                  //   forms.previewParams.src = src;
-                  // } else {
-                  //   window.open(src);
-                  // }
+                  forms.subjectSyncVisiable = true;
                 }}>
                 <img src={t1} class={styles.tFun} />
                 <img src={t11} class={styles.tTxt} />
@@ -162,8 +149,6 @@ export default defineComponent({
               <div
                 class={[styles.topSection, styles.topSection2]}
                 onClick={() => {
-                  // forms.message = '节奏练习功能暂未开放，敬请期待！';
-                  // showModalTone.value = true;
                   const origin = /(localhost|192)/.test(location.host)
                     ? 'https://test.lexiaoya.cn'
                     : location.origin;
@@ -285,6 +270,39 @@ export default defineComponent({
           type="music"
           params={forms.previewParams}
         />
+
+        {/* 完成编辑时，选择声部 */}
+        <NModal
+          v-model:show={forms.subjectSyncVisiable}
+          preset="card"
+          class={['modalTitle background', styles.subjectSyncModal]}
+          title={'请选择声部'}>
+          <SubjectModal
+            onClose={() => (forms.subjectSyncVisiable = false)}
+            onConfirm={async (item: any) => {
+              // musicsrc = `${origin}/instrument?modelType=practise&id=${
+              //   data.list[data.listActive].xmlFileUrl
+              // }&Authorization=${userStore.getToken}/#/preview`;
+              const origin = /(localhost|192)/.test(location.host)
+                ? 'https://test.lexiaoya.cn'
+                : location.origin;
+              // view-figner?subjectCode=pan-flute
+              const src = `${origin}/instrument/#/view-figner?Authorization=${userStore.getToken}&code=${item.code}`;
+              // const src = `http://192.168.3.220:3000/instrument.html#/view-figner?Authorization=${userStore.getToken}&code=${item.code}`;
+              if (window.matchMedia('(display-mode: standalone)').matches) {
+                state.application = window.matchMedia(
+                  '(display-mode: standalone)'
+                ).matches;
+                forms.previewModal = true;
+                forms.previewParams.src = src + '&platform=pc';
+              } else {
+                window.open(src);
+              }
+
+              forms.subjectSyncVisiable = false;
+            }}
+          />
+        </NModal>
       </div>
     );
   }

src/views/home/modals/subject-modal/index.module.less

@@ -0,0 +1,67 @@
+.btnGroupModal {
+  padding: 32px 0;
+
+  :global {
+    .n-button {
+      height: 47px;
+      min-width: 156px;
+    }
+  }
+}
+
+
+.subjectSync {
+  padding-top: 25px;
+}
+
+.subjectList {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0 30px;
+  gap: 20px 40px;
+}
+
+.subjectItem {
+  .imgSection {
+    position: relative;
+    // padding: 7px;
+    border: 3px solid transparent;
+    border-radius: 24px;
+    line-height: 0;
+    overflow: hidden;
+  }
+
+  img {
+    overflow: hidden;
+    border-radius: 18px;
+    width: 127px;
+    height: 127px;
+    object-fit: contain;
+  }
+
+  .iconSelect {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    border-radius: 0;
+    width: 24px;
+    height: 24px;
+  }
+
+  .subjectName {
+    text-align: center;
+    color: #777777;
+  }
+}
+
+.subjectSelect {
+  .imgSection {
+    border: 3px solid #198CFE;
+  }
+
+  .subjectName {
+    font-weight: 600;
+    color: #198CFE;
+  }
+}

src/views/home/modals/subject-modal/index.tsx

@@ -0,0 +1,69 @@
+import { defineComponent, onMounted, ref } from 'vue';
+import styles from './index.module.less';
+import { NButton, NSpace, useMessage } from 'naive-ui';
+import { useCatchStore } from '/src/store/modules/catchData';
+import iconSelect from '../../../prepare-lessons/images/icon-select.png';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+
+export default defineComponent({
+  name: 'subject-sync',
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+
+    const selectSubjectId = ref(null as any);
+    const subjectList = ref([] as any);
+
+    const onSubmit = () => {
+      const item = subjectList.value.find(
+        (subject: any) => subject.id === selectSubjectId.value
+      );
+
+      emit('confirm', item);
+    };
+    onMounted(async () => {
+      await catchStore.getSubjects();
+      subjectList.value = catchStore.getSubjectList;
+    });
+    return () => (
+      <div class={styles.subjectSync}>
+        {/* <div class={styles.tips}>
+          请选择当前课件可使用的乐器
+          <span>（勾选后则对应乐器下的课件内容将被当前课件内容全部替换）</span>
+        </div> */}
+
+        <div class={styles.subjectList}>
+          {subjectList.value.map((subject: any) => (
+            <div
+              class={[
+                styles.subjectItem,
+                selectSubjectId.value === subject.id ? styles.subjectSelect : ''
+              ]}
+              onClick={() => {
+                selectSubjectId.value = subject.id;
+              }}>
+              <div class={styles.imgSection}>
+                <img src={subject.img} />
+
+                {selectSubjectId.value === subject.id && (
+                  <img src={iconSelect} class={styles.iconSelect} />
+                )}
+              </div>
+
+              <p class={styles.subjectName}>{subject.name}</p>
+            </div>
+          ))}
+        </div>
+
+        <NSpace class={styles.btnGroupModal} justify="center">
+          <NButton round onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton round type="primary" onClick={onSubmit}>
+            确定
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});

src/views/preview-window/index.module.less

@@ -1,4 +1,8 @@
 .previewWindow {
   width: 100%;
   height: 100%;
+
+  iframe {
+    background: #fff;
+  }
 }