等接口换图片

1

src/views/muiscDetial/index.module.less

@@ -53,9 +53,10 @@
         flex-direction: row;
         align-items: center;
         p {
-          min-width: 60px;
+          // min-width: 60px;
           font-weight: 600;
           color: #333;
+          width: 85px;
           line-height: 28px;
         }
       }
@@ -600,3 +601,13 @@
     }
   }
 }
+.titleStaff {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  img {
+    width: 24px;
+    height: 24px;
+    margin-right: 5px;
+  }
+}

src/views/muiscDetial/index.tsx

@@ -21,6 +21,14 @@ import {
 import printIcon from './images/printIcon.png'
 import noMore from './images/noMore.png'
 import banner from './images/banner.png'
+
+import iconChangeStaff from './images/icon-change-staff.png'
+import staffDetafult from './images/staff-default.png'
+
+import firstDefault from './images/first-default.png'
+
+import fixedDefault from './images/fixed-default.png'
+
 import colVideo from '@/components/col-video/index'
 import iconClose from '@/views/login/images/icon_close.png'
 import start from '@/components/albumItem/images/start.png'
@@ -34,7 +42,6 @@ import music from '@/components/musicLIstItem/images/music.png'
 import tagItem from '@/components/tagItem'
 import code from '@/common/images/student_download.png'
 import musicItem from './modals/musicItem'
-
 import ablumIcon from '@/components/col-header/images/ablumIcon.png'
 import noAblumIcon from '@/components/col-header/images/noAblumIcon.png'
 import onlineIcon from '@/components/col-header/images/onlineIcon.png'
@@ -45,6 +52,7 @@ import videoIcon from '@/components/col-header/images/videoIcon.png'
 import noVideoIcon from '@/components/col-header/images/noVideoIcon.png'
 import vipIcon from '@/components/col-header/images/vipIcon.png'
 import noVipIcon from '@/components/col-header/images/noVipIcon.png'
+
 import umiRequest from 'umi-request'
 import request from '@/helpers/request'
 import { useRoute, useRouter } from 'vue-router'
@@ -132,6 +140,12 @@ export default defineComponent({
         acl: 'public-read',
         name: ''
       },
+      musicTypeList: [
+        { label: '五线谱', value: 'staff', image: staffDetafult },
+        { label: '首调', value: 'first', image: firstDefault },
+        { label: '固定调', value: 'fixed', image: fixedDefault }
+      ],
+      musicType: '',
       fileList: [] as any
     })
     nextTick(() => {
@@ -426,25 +440,25 @@ export default defineComponent({
               <div class={[classes.musicWrap]}>
                 <div class={classes.left}>
                   <div class={classes.title}>
-                    {/* <div class={classes.titleLeft}>
-                    <p>声部：</p>
-                    <ElSelect
-                      class="w-full subjectChiose"
-                      v-model={state.subjectId}
-                      placeholder="请选择声部"
-                      onChange={() => {
-                        setAccompanyUrl()
-                      }}
-                    >
-                      {state.subjectList.map((item: any) => (
-                        <ElOption
-                          key={item.id}
-                          value={item.id}
-                          label={item.track}
-                        />
-                      ))}
-                    </ElSelect>
-                  </div> */}
+                    <div class={classes.titleLeft}>
+                      <p class={classes.titleStaff}><img src={iconChangeStaff} alt="" />  转谱</p>
+                      <ElSelect
+                        class="w-full subjectChiose"
+                        v-model={state.subjectId}
+                        placeholder="请选择声部"
+                        onChange={() => {
+                          setAccompanyUrl()
+                        }}
+                      >
+                        {state.musicTypeList.map((item: any) => (
+                          <ElOption
+                            key={item.value}
+                            value={item.value}
+                            label={item.label}
+                          />
+                        ))}
+                      </ElSelect>
+                    </div>
                     <div
                       class={classes.titleRight}
                       onClick={() => printHander()}