1

1

src/views/muiscDetial/index.tsx

@@ -114,7 +114,7 @@ export default defineComponent({
     const state = reactive({
       title: props.title,
       id: route.query.id,
-      subjectId: '',
+      subjectId: 'staff',
       subjectList: [],
       tagList: [],
       teacherDetail: {} as any,
@@ -129,6 +129,9 @@ export default defineComponent({
       imgUrl: '',
       activeIndex: 0,
       showImg: [] as any,
+      staffList: [] as any,
+      firstList: [] as any,
+      fixedList: [] as any,
       iconList: [] as any,
       // ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/cloud-coach',
       ossUploadUrl: `https://cloud-coach.ks3-cn-beijing.ksyuncs.com/`,
@@ -189,13 +192,22 @@ export default defineComponent({
         state.mp3Type = res.data.audioType
         if (state.subjectList && state.subjectList.length > 0) {
           state.activeRow = res.data.background[0]
-          state.subjectId = res.data.background[0].id
+          // state.subjectId = res.data.background[0].id
         }
 
         state.teacherDetail = res.data.teacher
         if (res.data.musicImg) {
           // 有图片
-          state.showImg = res.data.musicImg ? res.data.musicImg.split(',') : []
+          state.staffList = res.data.musicImg
+            ? res.data.musicImg.split(',')
+            : []
+          state.firstList = res.data.firstTone
+            ? res.data.firstTone.split(',')
+            : []
+          state.fixedList = res.data.fixedTone
+            ? res.data.fixedTone.split(',')
+            : []
+          state.showImg = state.staffList
         } else {
           // window.addEventListener(
           //   'message',
@@ -245,11 +257,18 @@ export default defineComponent({
         state.accompanyUrl = accompanyUrl
       }
     )
-    const setAccompanyUrl = () => {
-      const url = 'https://dev.colexiu.com'
-      state.accompanyUrl =
-        url +
-        `/accompany/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
+    const setAccompanyUrl = (value: string) => {
+      if (value == 'staff') {
+        state.showImg = state.staffList
+      } else if (value == 'fixed') {
+        state.showImg = state.fixedList
+      } else {
+        state.showImg = state.firstList
+      }
+      // const url = 'https://dev.colexiu.com'
+      // state.accompanyUrl =
+      //   url +
+      //   `/accompany/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
       // state.accompanyUrl = `http://192.168.3.8:3000/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
     }
     const setSvg = (val: any) => {
@@ -441,17 +460,20 @@ export default defineComponent({
                 <div class={classes.left}>
                   <div class={classes.title}>
                     <div class={classes.titleLeft}>
-                      <p class={classes.titleStaff}><img src={iconChangeStaff} alt="" />  转谱</p>
+                      <p class={classes.titleStaff}>
+                        <img src={iconChangeStaff} alt="" /> 转谱
+                      </p>
                       <ElSelect
                         class="w-full subjectChiose"
                         v-model={state.subjectId}
-                        placeholder="请选择声部"
+                        placeholder="请选择曲谱模式"
                         onChange={() => {
                           setAccompanyUrl()
                         }}
                       >
                         {state.musicTypeList.map((item: any) => (
                           <ElOption
+                            disabled={item.disabled}
                             key={item.value}
                             value={item.value}
                             label={item.label}
@@ -516,7 +538,7 @@ export default defineComponent({
                           animationData={AstronautJSON}
                           class={classes.finch}
                         ></Vue3Lottie>
-                        <p class={classes.finchLoad}>加载中...</p>
+                        <p class={classes.finchLoad}>暂无预览图片</p>
                       </div>
                     )}
                   </div>