添加分谱下载

src/views/muiscDetial/index.module.less

@@ -3,6 +3,20 @@
 }
 .wallWrap {
   background-color: #f8f8f8;
+  :global {
+    .el-carousel__container {
+      height: 100%;
+    }
+    .el-carousel__button {
+      // background-color: #2dc7aa;
+      background-color: #c2c2c2;
+      height: 4px;
+      border-radius: 4px;
+    }
+    .is-active .el-carousel__button {
+      background-color: #2dc7aa;
+    }
+  }
 }
 .musicWraps {
   // min-height: 100vh;
@@ -83,7 +97,7 @@
       align-items: center;
       // justify-content: center;
       overflow-y: auto;
-      padding: 34px 10px 0;
+      padding: 34px 0 0;
       .musicTitle {
         font-size: 20px;
         font-weight: bold;
@@ -94,6 +108,7 @@
         position: absolute;
         right: 0;
         top: 0;
+        z-index: 99;
       }
       img {
         width: 100%;

src/views/muiscDetial/index.tsx

@@ -14,7 +14,9 @@ import {
   ElOption,
   ElSelect,
   ElScrollbar,
-  ElMessageBox
+  ElMessageBox,
+  ElCarousel,
+  ElCarouselItem
 } from 'element-plus'
 import printIcon from './images/printIcon.png'
 import noMore from './images/noMore.png'
@@ -117,7 +119,8 @@ export default defineComponent({
       accompanyUrl: '',
       imgData: '',
       imgUrl: '',
-      showImg: '',
+      activeIndex: 0,
+      showImg: [] as any,
       iconList: [] as any,
       // ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/cloud-coach',
       ossUploadUrl: `https://cloud-coach.ks3-cn-beijing.ksyuncs.com/`,
@@ -178,25 +181,23 @@ export default defineComponent({
         state.teacherDetail = res.data.teacher
         if (res.data.musicImg) {
           // 有图片
-          state.showImg = res.data.musicImg
+          state.showImg = res.data.musicImg ? res.data.musicImg.split(',') : []
         } else {
-          window.addEventListener(
-            'message',
-            async e => {
-              console.log(e)
-              state.imgData = e.data
-
-              // alert(e.data);
-              const tempCanvas = await imgToCanvas(state.imgData)
-              const showImg = convasToImg(tempCanvas)
-
-              //  开始上传图片
-              uploadFunction(showImg)
-            },
-            false
-          )
+          // window.addEventListener(
+          //   'message',
+          //   async e => {
+          //     console.log(e)
+          //     state.imgData = e.data
+          //     // alert(e.data);
+          //     const tempCanvas = await imgToCanvas(state.imgData)
+          //     const showImg = convasToImg(tempCanvas)
+          //     //  开始上传图片
+          //     uploadFunction(showImg)
+          //   },
+          //   false
+          // )
         }
-        setAccompanyUrl()
+        // setAccompanyUrl()
         setUser()
       } catch (e) {
         console.log(e)
@@ -221,7 +222,7 @@ export default defineComponent({
       router.push({
         query: { ...route.query, id: state.id }
       })
-      state.showImg = ''
+      state.showImg = []
       getMusicList()
     }
     watch(
@@ -326,7 +327,7 @@ export default defineComponent({
           data: { musicSheetId: state.musicDetail.id, musicImg: imgurl }
         })
         console.log('赋值')
-        state.showImg = imgurl
+        state.showImg = [imgurl]
       } catch (e) {
         console.log(e)
       }
@@ -357,9 +358,11 @@ export default defineComponent({
     }
     const printHander = async () => {
       //  img 转 canvas
-      const tempCanvas = await imgToCanvas(state.showImg)
+      const tempCanvas = await imgToCanvas(
+        state.showImg[state.activeIndex] as any
+      )
       const showImg = convasToImg(tempCanvas)
-      state.showImg = showImg
+      // state.showImg = showImg
       const titleCanvas = addMusicTitle(tempCanvas, {
         title: state.musicDetail.musicSheetName,
         size: 18
@@ -459,19 +462,41 @@ export default defineComponent({
                       src={chargeImg[state.musicDetail.chargeType]}
                       alt=""
                     />
-                    <iframe
+                    {/* <iframe
                       id="containerPrint"
                       ref="print"
                       style="width: 538px;page-break-after:always; "
                       src={state.accompanyUrl}
                       class={classes.iframe}
-                    />
+                    /> */}
                     <p class={classes.musicTitle}>
                       {state.musicDetail.musicSheetName}
                     </p>
-                    {state.showImg ? (
-                      <img src={state.showImg} alt="" />
+                    {state.showImg.length > 0 ? (
+                      <ElCarousel
+                        arrow="always"
+                        style="width: 100%; height: 541px"
+                        autoplay={false}
+                        loop={false}
+                        onChange={(index: number) => {
+                          state.activeIndex = index
+                        }}
+                      >
+                        {state.showImg &&
+                          state.showImg.map((img: any) => (
+                            <ElCarouselItem>
+                              <div style="height: 541px; overflow: hidden auto ;">
+                                <img src={img} alt="" />
+                              </div>
+                            </ElCarouselItem>
+                          ))}
+                      </ElCarousel>
                     ) : (
+                      //                     <el-carousel :interval="5000" arrow="always">
+                      //   <el-carousel-item v-for="item in 4" :key="item">
+                      //     <h3>{{ item }}</h3>
+                      //   </el-carousel-item>
+                      // </el-carousel>
                       <div>
                         <Vue3Lottie
                           animationData={AstronautJSON}

vite.config.ts

@@ -66,7 +66,7 @@ export default defineConfig({
   },
   server: {
     host: '0.0.0.0',
-    port: 5500,
+    port: 5100,
     strictPort: true,
     proxy: {
       '/api-auth': {