feat: 作品编辑页面修改

src/helpers/request.ts

@@ -36,14 +36,18 @@ let hideErrorMessage = false // 是否隐藏报错信息
 request.interceptors.request.use(
   (url, options: any) => {
     hideErrorMessage = options.hideErrorMessage
-    if (!options.hideLoading) {
-      clearTimeout(toast)
-      Toast.loading({
-        message: '加载中...',
-        forbidClick: true,
-        loadingType: 'spinner',
-        duration: 0
-      })
+    // 作品页面不需要默认的加载loading，使用作品页面自己的加载loading
+    const isCreationPage = window.location.href.includes('creation')
+    if (!isCreationPage) {
+      if (!options.hideLoading) {
+        clearTimeout(toast)
+        Toast.loading({
+          message: '加载中...',
+          forbidClick: true,
+          loadingType: 'spinner',
+          duration: 0
+        })
+      }
     }
 
     initRequest = options.initRequest || false

src/router/routes-common.ts

@@ -263,7 +263,7 @@ export const router = [
     path: '/creation-edit',
     component: () => import('@/views/creation/edit/index'),
     meta: {
-      title: '作品详情'
+      title: '编辑'
     }
   }
 ]

src/router/routes-tenant.ts

@@ -288,7 +288,7 @@ export default [
         path: '/creation-edit',
         component: () => import('@/views/creation/edit/index'),
         meta: {
-          title: '作品详情'
+          title: '编辑'
         }
       }
     ]

src/views/creation/api.ts

@@ -6,7 +6,7 @@ const apiFix =
 
 /** 详情 */
 export const api_userMusicDetail = (params: any): Promise<any> => {
-  return request.get(apiFix + `/userMusic/detail/${params}`)
+  return request.get(apiFix + `/userMusic/detail/${params}`, { hideLoading: true })
 }
 
 /** 开放详情 */

src/views/creation/edit/index.module.less

@@ -1,3 +1,7 @@
+// 平板
+.creationTablet .sectionVideo .videoBg {
+  height: 314px;
+}
 .sectionVideo {
   position: relative;
   line-height: 0;
@@ -14,8 +18,8 @@
   .btnGroup {
     position: absolute;
     left: 50%;
-    bottom: -12px;
-    background: linear-gradient(180deg, rgba(128, 158, 200, 0.59) 0%, rgba(58, 101, 162, 0.59) 100%);
+    bottom: 12px;
+    background: linear-gradient(180deg, rgba(128, 177, 200, 0.59) 0%, rgba(58, 152, 162, 0.59) 100%);
     border-radius: 15px;
     height: 30px;
     // transform: translate(-50%);

src/views/creation/edit/index.tsx

@@ -6,12 +6,14 @@ import { Button, Field } from 'vant'
 import MUploader from '@/components/col-upload'
 import { api_userMusicDetail, api_userMusicSave } from '../api'
 import { useRoute, useRouter } from 'vue-router'
-import videoBg from '../images/video-bg.png'
+import videoBg from '../images/videoBg.png'
 import { postMessage } from '@/helpers/native-message'
+import { browser } from '@/helpers/utils'
 
 export default defineComponent({
   name: 'creation-edit',
   setup() {
+    const {isTablet} = browser()
     const route = useRoute()
     const router = useRouter()
     const state = reactive({
@@ -83,10 +85,27 @@ export default defineComponent({
       }
     })
     return () => (
-      <div>
+      <div class={isTablet ? styles.creationTablet : ''}>
         <MSticky position="top">
-          <MHeader border={false} />
+          <MHeader background={'#F1F1F1'} border={false} />
         </MSticky>
+        <div class={[styles.section, styles.sectionFile]}>
+          <div class={styles.uploadImg}>
+            <MUploader
+              class={styles.muploader}
+              // native
+              cropper
+              tips={''}
+              deletable={false}
+              v-model:modelValue={state.img}
+            />
+            {/* <div class={styles.tip}>选封面</div> */}
+          </div>
+          <div class={styles.musicDetail}>
+            <p class={styles.musicName}>{state.musicDetail.musicSheetName}</p>
+            <p class={styles.username}>{state.musicDetail.username}</p>
+          </div>
+        </div>        
         {state.playType === 'Video' && (
           <div class={[styles.section, styles.sectionVideo]}>
             <img src={state.videoImg || videoBg} class={styles.videoBg} />
@@ -123,24 +142,6 @@ export default defineComponent({
           />
         </div>
 
-        <div class={[styles.section, styles.sectionFile]}>
-          <div class={styles.uploadImg}>
-            <MUploader
-              class={styles.muploader}
-              // native
-              cropper
-              tips={''}
-              deletable={false}
-              v-model:modelValue={state.img}
-            />
-            {/* <div class={styles.tip}>选封面</div> */}
-          </div>
-          <div class={styles.musicDetail}>
-            <p class={styles.musicName}>{state.musicDetail.musicSheetName}</p>
-            <p class={styles.username}>{state.musicDetail.username}</p>
-          </div>
-        </div>
-
         <div class={styles.btnGroup}>
           <Button type="primary" round block color="#2DC7AA" onClick={onSubmit}>
             {state.musicDetail.type === 'FORMAL' ? '保存' : '发布'}

src/views/creation/index.module.less

@@ -456,46 +456,39 @@
 }
 
 .popupContainer {
-  width: 287px;
-  background: rgba(255,255,255,0.31);
-  border-radius: 12px !important;
-  border: 1px solid rgba(255,252,252,0.53);
-  padding: 9px 8px;
-  overflow: initial;
-  .prompt{
-    width: 151px;
-    height: 32px;
-    position: absolute;
-    top: -7px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  .deleteBox{
-    background: linear-gradient( 224deg, #ECF5FF 0%, #D5E8FF 100%);
-    border-radius: 12px;
-    padding: 37px 0 15px;
+  width: 80%;
+  .popupTit {
+    margin-top: 20px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+    color: #131415;
+    line-height: 25px;
   }
-
-
   .popupContent {
-    text-align: center;
+    margin: 20px 0;
     font-weight: 400;
     font-size: 16px;
     color: #777777;
     line-height: 26px;
+    text-align: center;
   }
-
   .popupBtnGroup {
-    margin-top: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    >img{
-      width: 118px;
-      height: 37px;
-      & + img{
-        margin-left: 11px;
-      }
+    text-align: center;
+    margin-bottom: 20px;
+    :global {
+      .van-button {
+        height: 40px;
+        font-size: 16px;
+        font-weight: 400 !important;
+        line-height: 22px;
+        min-width: 122px;
+        &:last-child {
+           margin-left: 15px;
+           background: #2dc7aa;
+           border: none;
+        }
+     }
     }
   }
 }

src/views/creation/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, onUnmounted, reactive, watch, ref } from 'vue'
+import { defineComponent, onMounted, onUnmounted, reactive, watch, ref, onBeforeMount } from 'vue'
 // import WaveSurfer from 'wavesurfer.js';
 import styles from './index.module.less'
 import MSticky from '@/components/col-sticky'
@@ -10,10 +10,6 @@ import iconDelete from './images/icon-delete.png'
 import iconVip from './images/icon-vip.png'
 import iconSVip from './images/icon-svip.png'
 import iconZan from './images/icon-zan.png'
-import iconZanActive from './images/icon-zan-active.png'
-import iconPlay from './images/icon-play.png'
-import iconPause from './images/icon-pause.png'
-import videoBg from './images/video-bg.png'
 import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
 import { browser, getGradeCh, getSecondRPM } from '@/helpers/utils'
 import { useRoute, useRouter } from 'vue-router'
@@ -25,7 +21,6 @@ import {
 import MEmpty from '@/components/col-result'
 import dayjs from 'dayjs'
 import { nextTick } from 'process'
-import MVideo from '@/components/col-video-tcplayer'
 import ShareModel from './share-model'
 import { usePageVisibility, useEventListener } from '@vant/use'
 import "plyr/dist/plyr.css";
@@ -39,6 +34,7 @@ import iconUpward from './images/upward.png';
 import iconEdit from './images/edit.png';
 import iconMember from './images/icon-member.png';
 import TextEllipsis from './text-ellipsis/index';
+import Loading from './loading';
 
 export default defineComponent({
   name: 'creation-detail',
@@ -424,8 +420,8 @@ export default defineComponent({
     }
     // 初始化五线谱
     function initStaff(){
-      // const src = `/klx-music-score/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
-      const src = `http://192.168.3.68:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      // const src = `/klx-music-score/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}&userMusicId=${state.id}`;
+      const src = `http://192.168.3.68:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}&userMusicId=${state.id}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;
@@ -495,7 +491,7 @@ export default defineComponent({
 				pauseStaff,
         updateProgressStaff
 			}
-    }   
+    } 
     onMounted(async () => {
       setStatusBarTextColor(true)
       try {
@@ -801,6 +797,9 @@ export default defineComponent({
             onClose={() => (state.shareStatus = false)}
           />
         </Popup>
+        {
+          !staffState.isShow && <Loading></Loading>
+        }        
       </div>
     )
   }

src/views/creation/loading.tsx

@@ -0,0 +1,19 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+
+export default defineComponent({
+  name: 'loading',
+  setup() {
+    return () => (
+      <div class={[styles.loadingPop]}>
+        <div class={styles.loadingCssBox}>
+          <div class={styles.loadingCssItem}></div>
+          <div class={styles.loadingCssItem}></div>
+          <div class={styles.loadingCssItem}></div>
+          <div class={styles.loadingCssItem}></div>
+        </div>
+        <div class={styles.loadingTip}>资源加载中...</div>
+      </div>
+    );
+  }
+});