Merge branch 'hqyDev' of http://git.dayaedu.com/lex/h5-colexiu into jenkins

package.json

@@ -54,7 +54,8 @@
     "vue-echarts": "^6.2.3",
     "vue-router": "^4.0.12",
     "vue3-lottie": "^2.3.0",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.2",
+    "yet-another-abortcontroller-polyfill": "^0.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",

src/components/col-header/index.module.less

@@ -2,12 +2,19 @@
   --van-font-weight-bold: 600;
 
   :global {
-
+    .van-nav-bar__left{
+      padding: 0 13px;
+    }
     .van-nav-bar__title,
     .van-icon {
       color: inherit;
     }
-
+    .van-nav-bar__title{
+      font-size: 18px;
+    }
+    .van-icon{
+      font-size: 24px;
+    }
     .van-nav-bar__right {
       &>div {
         line-height: 0;
@@ -27,4 +34,4 @@
   // :global(.van-nav-bar--fixed) {
   //   box-shadow: 10px 10px 10px var(--box-shadow-color);
   // }
-}
+}

src/components/col-result/index.module.less

@@ -21,6 +21,7 @@
     }
 
     .van-empty__description {
+      margin-top: 8px;
       padding: 0 30px;
     }
   }
@@ -28,8 +29,12 @@
   .SMALL {
     :global {
       .van-empty__image {
-        width: 182px;
-        height: 161px;
+        width: 220px;
+        height: 195px;
+      }
+      .van-empty__description {
+        margin-top: -15px;
+        padding: 0 30px;
       }
     }
   }
@@ -46,4 +51,4 @@
       }
     }
   }
-}
+}

src/components/col-search/index.module.less

@@ -1,7 +1,7 @@
 :global {
   .van-search {
-    padding-left: 14px;
-    padding-right: 14px;
+    padding-left: 13px;
+    padding-right: 13px;
 
     input {
       -webkit-user-select: text !important;
@@ -112,6 +112,7 @@
     height: 28px;
     padding: 0;
     font-size: 14px;
+    font-weight: 500;
     --van-button-mini-height: 28px;
     --van-font-size-xs: 14px;
     line-height: 1;

src/helpers/request.ts

@@ -4,6 +4,7 @@ import { browser, openLoading, closeLoading } from '@/helpers/utils'
 import { setLogout, setLoginError } from '@/state'
 import { postMessage } from './native-message'
 import { Toast } from 'vant'
+import 'yet-another-abortcontroller-polyfill'
 
 export interface SearchInitParams {
   rows?: string | number

src/router/routes-student.ts

@@ -93,7 +93,7 @@ export default [
         name: 'memberRecord',
         component: () => import('@/student/member-center/member-record'),
         meta: {
-          title: '训练统计'
+          title: '练习统计'
         }
       },
       {

src/router/routes-teacher.ts

@@ -325,6 +325,20 @@ export default [
         meta: {
           title: '训练教程'
         }
+      },
+      {
+        path: '/courseList',
+        component: () => import('@/tenant/music/courseList'),
+        meta: {
+          title: '教程详情'
+        }
+      },
+      {
+        path: '/coursewarePlay',
+        component: () => import('@/tenant/music/coursewarePlay'),
+        meta: {
+          title: '教程播放'
+        }
       }
     ]
   },

src/router/routes-tenant.ts

@@ -274,7 +274,7 @@ export default [
         name: 'memberRecord',
         component: () => import('@/tenant/exercise-record/exercis-detail'),
         meta: {
-          title: '训练统计'
+          title: '练习统计'
         }
       },
       {

src/tenant/exercise-record/exercis-detail.module.less

@@ -1,19 +1,31 @@
 .exercisContainer {
   :global {
-
     .van-calendar__day--end,
     .van-calendar__day--start,
     .van-calendar__day--start-end,
     .van-calendar__day--multiple-middle,
     .van-calendar__day--multiple-selected {
-      background: #FF5074;
+      background: #ff5074;
     }
 
     .van-overlay,
     .van-popup {
       z-index: 99999999 !important;
+      .van-calendar__header-title,
+      .van-calendar__header-subtitle {
+        color: #131415;
+      }
+      .van-calendar__weekday {
+        color: #333;
+      }
+      .van-calendar__day--middle,
+      .van-calendar__day--end {
+        font-weight: 500;
+      }
+      .van-popup__close-icon {
+        color: rgba(0, 0, 0, 0.4);
+      }
     }
-
   }
 
   .bgImg {
@@ -41,7 +53,6 @@
     }
   }
 
-
   .level {
     margin-top: -4px;
     width: 44px;
@@ -104,15 +115,16 @@
   .subjectTag {
     font-size: 12px;
     font-weight: 500;
-    color: #FE2451;
-    padding: 1px 7px;
+    color: #fe2451;
+    padding: 3px 7px;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 20px;
-    border: 1px solid #FFFFFF;
+    border: 1px solid #ffffff;
     display: inline-flex;
     align-items: center;
-    line-height: 1;
-
+    .name{
+      line-height: 1;
+    }
     .iconSubject {
       width: 13px;
       height: 13px;
@@ -195,7 +207,7 @@
         top: 12px;
         width: 1px;
         height: 35px;
-        background-color: #E0E5E8;
+        background-color: #e0e5e8;
       }
     }
 
@@ -234,7 +246,6 @@
       }
     }
   }
-
 }
 
 .trainWeek {
@@ -265,19 +276,19 @@
       margin-right: 20px;
 
       .DataTopRightDot {
-        background-color: #FF7AA7;
+        background-color: #ff7aa7;
       }
     }
 
     &:last-child {
       .DataTopRightDot {
-        background-color: #3583FA;
+        background-color: #3583fa;
       }
     }
 
     &.DataTopRightItemDis {
       .DataTopRightDot {
-        background-color: #e8e8e8 !important
+        background-color: #e8e8e8 !important;
       }
     }
 
@@ -307,8 +318,6 @@
       font-size: 14px;
       color: rgba(19, 20, 21, 0.6);
 
-
-
       .iconArrow {
         display: inline-block;
         width: 9px;
@@ -322,11 +331,11 @@
 }
 
 .fullRefresh {
-  min-height: calc(100vh - var(--header-height) - 275px)
+  min-height: calc(100vh - var(--header-height) - 275px);
 }
 
 .emptyContainer {
   height: calc(100vh - var(--header-height) - 275px);
   display: flex;
   align-items: center;
-}
+}

src/tenant/exercise-record/exercis-detail.tsx

@@ -267,17 +267,17 @@ export default defineComponent({
                 title: () => (
                   <div class={styles.userInfo}>
                     <span class={styles.name}>{userInfo.value.username}</span>
-                    <Image
+                    {/* <Image
                       class={styles.level}
                       src={userInfo.value.isVip ? iconLogoActive : iconLogo}
-                    />
+                    /> */}
                   </div>
                 ),
                 label: () => (
                   <div class={styles.subjectName}>
                     <span class={styles.subjectTag}>
                       <img src={iconSubject} class={styles.iconSubject} />
-                      {userInfo.value.subjectName}
+                      <div class={styles.name}>{userInfo.value.subjectName}</div>
                     </span>
                   </div>
                 )

src/tenant/music/component/song/index.module.less

@@ -96,6 +96,7 @@
       }
 
       .tags {
+        margin-right: 6px;
 
         &>span {
           display: inline-block;
@@ -115,9 +116,9 @@
     }
 
     .title {
-      max-width: 165px;
+      max-width: 220px;
       font-size: 16px;
-      font-weight: bold;
+      font-weight: 600;
       color: #1a1a1a;
       margin-right: 6px;
     }
@@ -161,7 +162,7 @@
 .collection {
   width: 15px;
   height: 16px;
-  margin-right: 4px;
+  margin-right: 6px;
 }
 
 .musicInfo {
@@ -271,4 +272,4 @@
   height: 15px;
   margin-right: 5px;
   flex-shrink: 0;
-}
+}

src/tenant/music/component/song/index.tsx

@@ -60,20 +60,20 @@ export default defineComponent({
     //   }
     // }
 
-    const list = computed(() => {
-      return props.list.map(n => {
-        // if (typeof n.paymentType === 'string')
-        //   n.paymentType = n.paymentType.split(',')
-        n.subjectNames = n.musicSubjectName
-        return { ...n }
-      })
-    })
+    // const list = computed(() => {
+    //   return props.list.map(n => {
+    //     // if (typeof n.paymentType === 'string')
+    //     //   n.paymentType = n.paymentType.split(',')
+    //     n.subjectNames = n.musicSubjectName
+    //     return { ...n }
+    //   })
+    // })
 
     return () => {
       return (
         <div class={styles.theSong}>
-          {list.value.map((n: any, index: number) => (
-            <div class={styles.item} onClick={() => emit('detail', n)}>
+          {props.list.map((n: any, index: number) => (
+            <div class={[styles.item,'songItem']} onClick={() => emit('detail', n)}>
               {props.showNumber && <div class={styles.num}>{index + 1}</div>}
               {props.showTitleImg && (
                 <div class={styles.cover}>
@@ -108,10 +108,14 @@ export default defineComponent({
                   )}
 
                   <div class={styles.tags}>
-                    {n.subjectNames &&
-                      n.subjectNames
-                        ?.split(',')
-                        .map((name: any) => <span>{name}</span>)}
+                    {n.subjectNames
+                      ? n.subjectNames
+                          ?.split(',')
+                          .map((name: any) => <span>{name}</span>)
+                      : n.musicSubjectName &&
+                        n.musicSubjectName
+                          ?.split(',')
+                          .map((name: any) => <span>{name}</span>)}
                     {n.musicSheetType === 'CONCERT' && <span>合奏</span>}
                   </div>
 

src/tenant/music/courseList/index.module.less

@@ -1,7 +1,7 @@
 .courseList {
   min-height: 100vh;
   background-image: url('../../images/bg.png');
-  background-size: 100% 214px;
+  background-size: 100% 346px;
   background-repeat: no-repeat;
   box-sizing: border-box;
 }
@@ -17,12 +17,9 @@
     margin-right: 30px;
     border-radius: 2px;
     overflow: hidden;
-    box-shadow: 0px 2px 6px 0px rgba(221, 168, 133, 0.67);
     overflow: hidden;
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAABOFBMVEUAAAC0tLTT09PU1NTt7e3////T09P////T09P////T09P////X19f////U1NTU1NTT09PT09PU1NTU1NTV1dXT09PU1NTU1NTV1dXZ2dn+/v7R0dH////////KysrIyMjT09O0tLTU1NS0tLTU1NS0tLTT09PT09PT09PU1NTU1NTU1NTT09O2trbU1NTV1dXV1dXW1tbV1dXW1tbV1dXJycm4uLj///+0tLT///+0tLT////p6em0tLT4+Pj///+2trb///+1tbX///+0tLT////T09P5+fn+/v63t7e8vLz8/Pzl5eXW1tbBwcH39/fw8PDs7Ozb29v7+/vg4ODOzs65ubny8vLJycnp6enGxsbFxcW+vr62trb09PTY2NjLy8vCwsLn5+fi4uLS0tLu7u7Q0NDd3d02Mu/gAAAARHRSTlMAnPwvBfv07ODdw5AbGezmyrirl5B4aT0kDZyclTwsIPj48+Ta1tPS0LGhiIaEcGJgV05FNhMS7++8vKyslZRzc1ZWJRSpe/cAAALfSURBVFjD7djXcuIwGAVg1pTQAiT0Ekiy6b1v7whsA6b3EGAJu+//BstaiWNiCYGlXGTG55KBDzH6j2xjMmJET5ZdDivQFavDtTxLXlsCFFlam7HmiUxl49ftApRxYWkHLe3A0lZa2oqlAXUMGk/fHG9vpCnSk/pZNJ18m6aOWELRN1CmtbMI+jjNJH0Evc2GlhD0Bhu6h6DTjPIq6Pqonb8XXoCWmjKSHTCnpccp5ges6bHCZAW2dBc8JcOWLqjoPFu6oqLLr2bVQxX9h/GElBWmKDCmxSKAyXWYt1GE677rLtLGejsLcuOCQMI7lVFlsMjxJJUeW3bP+OSTskBJqcuSFppAFT4vsqMrYDrVAitazMHV8kBJs8WGzsPmNoRCFSj5fcuA7vJKvcQ8UJKrCNT0WH0mdEpASbFOSdfhyClvzagGsSzR0D14LHTSSho1/mkQaw39dB9u2vThCU8KQj1JtFiVt+z5ONSLmnoSaeszuia/+lfzAaGS09STQDum6SH/cOXX5rY9Xz0Rj6Sqy0YmjUzrbp56ah6kIT2AH8Pe4M5TT83jP6ThsnALmq+eiD8tlIt/G8POWU8FVNMNuXc8rnH4epJpOHg1jIivJ5mWcvLg4ZqMryeZhnOLm1hyPfF0C95R9PAcvp4jcSYNL7UDHEWuJ56GO46FyPXE0+/+/7Lhgs+ffU093yPoDwCAEcki1/Mjgv4BQFUkSeR6/jQh8gn0SQy5np9NqFi+CgSDWE9rwmJCJ/X9yxt9iSdisVji2y+TESNGXjiW6LU7FYkkzQ9JRiIp93XUoodyX12cBg/9qyvOHbvXxmUw4Wxe+45zZdV/GDy9uHJbZqPhk7jTjrTI4ezO+EkY8wUBW4Y6tgCSPvNxtDLnOzOhEw2HAvt7Hj2oZ28/EApHyRtpvjwPBY/8B5Ot9O1u2b2eTds6x8nr4tZtmx6vfWvXN9nCA/9RMHR+aZ5sohEji+YfnN0/51L6d+cAAAAASUVORK5CYII=');
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 50%;
+    background: url('./image/bg.png') no-repeat;
+    background-size: 100% 100%;
     flex-shrink: 0;
 
     & > img {
@@ -152,19 +149,38 @@
   }
 }
 
-.basePlay {
-  width: 20px;
-  height: 20px;
-}
 .circleProgress {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  .basePlay {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
   :global {
     .van-circle {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
       width: 20px;
       height: 20px;
     }
   }
+  .tips {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 6.5px;
+    height: 6.5px;
+    background: #b3b3b3;
+    border-radius: 1px;
+  }
 }
 .periodItem {
   width: 36px;
@@ -182,7 +198,7 @@
 
 .courseDialog {
   width: 305px;
-
+  box-sizing: border-box;
   :global {
     .van-dialog__header {
       // padding-top: 0;
@@ -285,6 +301,7 @@
     align-items: center;
 
     & > button {
+      height: 40px;
       flex: 1;
       font-weight: 400;
       font-size: 16px !important;
@@ -300,11 +317,12 @@
   border-color: #dbdbdb;
 }
 .btnRight {
-  background: linear-gradient(270deg, #ff204b 0%, #fe5b71 100%);
+  background: #fe2451;
+  border-color: #fe2451;
 }
 .finch {
   width: 150px;
-  margin: 80px auto 0;
+  margin: 140px auto 0;
 }
 
 .finchLoad {
@@ -319,8 +337,8 @@
 
   :global {
     .van-button {
-      font-size: 16px;
-      font-weight: 600;
+      font-size: 18px;
+      font-weight: 500;
       color: #ffffff;
       line-height: 25px;
     }

src/tenant/music/courseList/index.tsx

@@ -2,7 +2,7 @@ import request from '@/helpers/request'
 import { state } from '@/state'
 import { Button, Cell, CellGroup, Popup, Dialog, Toast, Circle } from 'vant'
 import { Vue3Lottie } from 'vue3-lottie'
-import AstronautJSON from '../music-detail/animate/bigLoad.json'
+import AstronautJSON from '../music-detail/animate/refresh_anim.json'
 import {
   defineComponent,
   onMounted,
@@ -52,7 +52,7 @@ export default defineComponent({
     const getDetail = async () => {
       try {
         const res: any = await request.post(
-          `/api-student/tenantAlbumMusic/getLessonCoursewareDetail`,
+          apiSuffix.value + `/tenantAlbumMusic/getLessonCoursewareDetail`,
           {
             data: {
               lessonCoursewareId: route.query.id,
@@ -69,7 +69,8 @@ export default defineComponent({
       data.loading = true
       try {
         const res: any = await request.get(
-          '/api-student/tenantAlbumMusic/getLessonCoursewareCourseList/' +
+          apiSuffix.value +
+            '/tenantAlbumMusic/getLessonCoursewareCourseList/' +
             route.query.id
         )
         if (Array.isArray(res?.data)) {
@@ -444,23 +445,24 @@ export default defineComponent({
                                 ) : (
                                   ''
                                 )}
-                                {/* {item.downloadStatus == 1 && (
+                                {item.downloadStatus == 1 && (
                                   <div class={styles.downloading}>{`${
                                     item.progress || 0
                                   }%`}</div>
-                                )} */}
+                                )}
                               </div>
                             </div>
                           ),
                           value: () => (
                             <>
                               {item.knowledgePointList ? (
-                                <>
+                                <div class={styles.circleProgress}>
                                   {item.hasCache ||
                                   item.downloadStatus !== 1 ? (
                                     <img class={styles.basePlay} src={play} />
                                   ) : (
-                                    <div class={styles.circleProgress}>
+                                    <>
+                                      <div class={styles.tips}></div>
                                       <Circle
                                         v-model:current-rate={item.progress}
                                         rate={item.progress}
@@ -469,9 +471,9 @@ export default defineComponent({
                                         layer-color={'#B3B3B3'}
                                         color={'#FE2451'}
                                       />
-                                    </div>
+                                    </>
                                   )}
-                                </>
+                                </div>
                               ) : (
                                 ''
                               )}
@@ -492,7 +494,7 @@ export default defineComponent({
               animationData={AstronautJSON}
               class={styles.finch}
             ></Vue3Lottie>
-            <p class={styles.finchLoad}>加载中...</p>
+            {/* <p class={styles.finchLoad}>加载中...</p> */}
           </div>
         )}
         {!data.loading && !data.list.length && (
@@ -505,7 +507,7 @@ export default defineComponent({
                 round
                 block
                 type="primary"
-                color="linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%)"
+                color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
                 onClick={() => {
                   if (!browser().isApp) {
                     onDownloadApp()

src/tenant/music/coursewarePlay/component/video-play.tsx

@@ -437,7 +437,7 @@ export default defineComponent({
               }}
             ></i>
             <Slider
-              min={0.6}
+              min={0.5}
               max={1.5}
               step={0.1}
               v-model={data.defaultSpeed}
@@ -462,7 +462,7 @@ export default defineComponent({
             <i
               class={[styles.iconCut]}
               onClick={() => {
-                if (data.defaultSpeed <= 0.6) {
+                if (data.defaultSpeed <= 0.5) {
                   return
                 }
                 if (videoItem.value) {

src/tenant/music/coursewarePlay/index.tsx

@@ -25,6 +25,7 @@ import {
 import MusicScore from './component/musicScore'
 import iconDian from './image/icon-dian.svg'
 import iconPoint from './image/icon-point.svg'
+import { state as baseState } from '@/state'
 import {
   iconUp,
   iconDown,
@@ -48,6 +49,9 @@ import VideoPlay from './component/video-play'
 export default defineComponent({
   name: 'CoursewarePlay',
   setup() {
+    const apiSuffix = ref(
+      baseState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
+    )
     const pageVisibility = usePageVisibility()
     /** 页面显示和隐藏 */
     watch(
@@ -264,7 +268,7 @@ export default defineComponent({
           }
         })
         //检测是否录屏
-        handleLimitScreenRecord()
+        // handleLimitScreenRecord()
         setTimeout(() => {
           data.animationState = 'end'
         }, 500)
@@ -273,7 +277,8 @@ export default defineComponent({
     const getDetail = async () => {
       try {
         const res: any = await request.get(
-          `/api-student/tenantAlbumMusic/getLessonCourseDetail/${route.query.id}`,
+          apiSuffix.value +
+            `/tenantAlbumMusic/getLessonCourseDetail/${route.query.id}`,
           {
             hideLoading: true
           }
@@ -430,27 +435,27 @@ export default defineComponent({
       // getCourseSchedule();
       window.addEventListener('message', iframeHandle)
       // 禁止录屏 ios
-      listenerMessage('setVideoPlayer', result => {
-        if (result?.content?.status == 'pause') {
-          handleLimitScreenRecord()
-        }
-      })
-      // 禁止录屏 安卓
-      postMessage({
-        api: 'limitScreenRecord',
-        content: {
-          type: 1
-        }
-      })
+      // listenerMessage('setVideoPlayer', result => {
+      //   if (result?.content?.status == 'pause') {
+      //     handleLimitScreenRecord()
+      //   }
+      // })
+      // // 禁止录屏 安卓
+      // postMessage({
+      //   api: 'limitScreenRecord',
+      //   content: {
+      //     type: 1
+      //   }
+      // })
     })
     onBeforeUnmount(() => {
       // 取消 禁止录屏
-      postMessage({
-        api: 'limitScreenRecord',
-        content: {
-          type: 0
-        }
-      })
+      // postMessage({
+      //   api: 'limitScreenRecord',
+      //   content: {
+      //     type: 0
+      //   }
+      // })
     })
     const playRef = ref()
     // 返回

src/tenant/music/lessonCourseware/component/CourseItem/index.module.less

@@ -2,7 +2,7 @@
   position: relative;
   background: rgba(255, 255, 255, 0.6);
   border-radius: 10px;
-  border: 2px solid #FFFFFF;
+  border: 2px solid #ffffff;
   min-height: 200px;
   display: flex;
   flex-wrap: wrap;
@@ -41,7 +41,7 @@
 
 .item {
   margin: 20px 0 0 0;
-  padding: 0 8px;
+  padding: 0 12px;
   width: 33.333%;
 
   .cover {
@@ -93,26 +93,25 @@
 
   .coverImg {
     width: 100%;
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAABOFBMVEUAAAC0tLTT09PU1NTt7e3////T09P////T09P////T09P////X19f////U1NTU1NTT09PT09PU1NTU1NTV1dXT09PU1NTU1NTV1dXZ2dn+/v7R0dH////////KysrIyMjT09O0tLTU1NS0tLTU1NS0tLTT09PT09PT09PU1NTU1NTU1NTT09O2trbU1NTV1dXV1dXW1tbV1dXW1tbV1dXJycm4uLj///+0tLT///+0tLT////p6em0tLT4+Pj///+2trb///+1tbX///+0tLT////T09P5+fn+/v63t7e8vLz8/Pzl5eXW1tbBwcH39/fw8PDs7Ozb29v7+/vg4ODOzs65ubny8vLJycnp6enGxsbFxcW+vr62trb09PTY2NjLy8vCwsLn5+fi4uLS0tLu7u7Q0NDd3d02Mu/gAAAARHRSTlMAnPwvBfv07ODdw5AbGezmyrirl5B4aT0kDZyclTwsIPj48+Ta1tPS0LGhiIaEcGJgV05FNhMS7++8vKyslZRzc1ZWJRSpe/cAAALfSURBVFjD7djXcuIwGAVg1pTQAiT0Ekiy6b1v7whsA6b3EGAJu+//BstaiWNiCYGlXGTG55KBDzH6j2xjMmJET5ZdDivQFavDtTxLXlsCFFlam7HmiUxl49ftApRxYWkHLe3A0lZa2oqlAXUMGk/fHG9vpCnSk/pZNJ18m6aOWELRN1CmtbMI+jjNJH0Evc2GlhD0Bhu6h6DTjPIq6Pqonb8XXoCWmjKSHTCnpccp5ges6bHCZAW2dBc8JcOWLqjoPFu6oqLLr2bVQxX9h/GElBWmKDCmxSKAyXWYt1GE677rLtLGejsLcuOCQMI7lVFlsMjxJJUeW3bP+OSTskBJqcuSFppAFT4vsqMrYDrVAitazMHV8kBJs8WGzsPmNoRCFSj5fcuA7vJKvcQ8UJKrCNT0WH0mdEpASbFOSdfhyClvzagGsSzR0D14LHTSSho1/mkQaw39dB9u2vThCU8KQj1JtFiVt+z5ONSLmnoSaeszuia/+lfzAaGS09STQDum6SH/cOXX5rY9Xz0Rj6Sqy0YmjUzrbp56ah6kIT2AH8Pe4M5TT83jP6ThsnALmq+eiD8tlIt/G8POWU8FVNMNuXc8rnH4epJpOHg1jIivJ5mWcvLg4ZqMryeZhnOLm1hyPfF0C95R9PAcvp4jcSYNL7UDHEWuJ56GO46FyPXE0+/+/7Lhgs+ffU093yPoDwCAEcki1/Mjgv4BQFUkSeR6/jQh8gn0SQy5np9NqFi+CgSDWE9rwmJCJ/X9yxt9iSdisVji2y+TESNGXjiW6LU7FYkkzQ9JRiIp93XUoodyX12cBg/9qyvOHbvXxmUw4Wxe+45zZdV/GDy9uHJbZqPhk7jTjrTI4ezO+EkY8wUBW4Y6tgCSPvNxtDLnOzOhEw2HAvt7Hj2oZ28/EApHyRtpvjwPBY/8B5Ot9O1u2b2eTds6x8nr4tZtmx6vfWvXN9nCA/9RMHR+aZ5sohEji+YfnN0/51L6d+cAAAAASUVORK5CYII=');
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 50%;
+    background: url('./image/bg.png') no-repeat;
+    background-size: 100% 100%;
     border-radius: 2px;
     overflow: hidden;
 
-    &>img {
+    & > img {
       display: block;
       width: 100%;
       height: 120px;
       opacity: 0;
-      transition: opacity .3s;
+      transition: opacity 0.3s;
     }
 
     :global {
       .van-image__loading {
         position: relative;
         height: 120px;
-        animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite;
+        animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out
+          infinite;
       }
     }
 
@@ -122,14 +121,18 @@
       left: 5px;
       width: 5px;
       height: 100%;
-      background: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.03) 100%);
+      background: linear-gradient(
+        270deg,
+        rgba(0, 0, 0, 0.25) 0%,
+        rgba(0, 0, 0, 0.03) 100%
+      );
       box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
       z-index: 1;
     }
   }
 
   .name {
-    width: 109%;
+    width: 100%;
     line-height: 18px;
     font-weight: 400;
     font-size: 13px;

src/tenant/music/lessonCourseware/index.module.less

@@ -5,8 +5,8 @@
 
   :global {
     .van-sticky {
-      // background: url('../../images/bg.png') no-repeat top center;
-      // background-size: 100% 214px;
+      background: url('../../images/bg.png') no-repeat top center;
+      background-size: 100% 346px;
     }
 
     .van-search__content {
@@ -29,6 +29,7 @@
       background-color: transparent;
       box-shadow: none;
       padding-right: 15px;
+      height: 36px;
     }
 
     .van-dropdown-menu__title {
@@ -101,7 +102,7 @@
 .search {
   :global {
     .van-search {
-      height: calc(var(--van-dropdown-menu-height) + 20px);
+      padding-top: 4px;
     }
   }
 }
@@ -110,7 +111,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 214px;
+  height: 346px;
   // object-fit: cover;
   z-index: -1;
 }
@@ -122,20 +123,20 @@
       display: none;
     }
   }
-}
-.courseItem.courseItem1 {
-  background: initial;
-  border: initial;
-  padding: 0 10px 20px;
-  :global {
-    .courseItem:nth-child(1) {
-      margin-top: 10px;
-    }
-    .courseItem:nth-child(2) {
-      margin-top: 10px;
-    }
-    .courseItem:nth-child(3) {
-      margin-top: 10px;
+  .courseItem {
+    background: initial;
+    border: initial;
+    padding: 0 4px 20px;
+    :global {
+      .courseItem:nth-child(1) {
+        margin-top: 6px !important;
+      }
+      .courseItem:nth-child(2) {
+        margin-top: 6px !important;
+      }
+      .courseItem:nth-child(3) {
+        margin-top: 6px !important;
+      }
     }
   }
 }

src/tenant/music/lessonCourseware/index.tsx

@@ -108,6 +108,9 @@ export default defineComponent({
             rows: 20
           }
         })
+        if (params.subjectList?.length > 0 && res.data.pageNo === 1) {
+          return
+        }
         const result = (params.subjectList || []).concat(res.data?.rows || [])
         params.subjectList = result
         params.page = res.data.pageNo + 1
@@ -178,7 +181,7 @@ export default defineComponent({
             >
               {params.subjectList.length ? (
                 <CourseItem
-                  class={[styles.courseItem, styles.courseItem1]}
+                  class={[styles.courseItem]}
                   list={params.subjectList.map(item => {
                     return {
                       name: item.musicSheetName,
@@ -199,8 +202,8 @@ export default defineComponent({
               ) : (
                 !loading.value && (
                   <ColResult
-                    tips="暂无教程"
-                    classImgSize="SMALL"
+                    tips="暂无教材"
+                    classImgSize="CERT"
                     btnStatus={false}
                   />
                 )

src/tenant/music/music-detail/download.module.less

@@ -37,8 +37,8 @@
 
 .downloadBtn {
   box-shadow: 0px 2px 7px 0px rgba(45, 199, 170, 0.25);
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 600;
   color: #ffffff;
   line-height: 20px;
-}
+}

src/tenant/music/music-detail/new-index.module.less

@@ -349,6 +349,7 @@
   }
 
   .musicTitle {
+    padding-top: 4px;
     font-weight: 600;
     text-align: center;
     font-size: 16px;
@@ -363,7 +364,7 @@
 
   .finch {
     width: 150px;
-    margin: 80px auto 0;
+    margin: 150px auto 0;
   }
 
   .finchLoad {
@@ -428,8 +429,8 @@
 
   :global {
     .van-button {
-      font-size: 16px;
-      font-weight: 600;
+      font-size: 18px;
+      font-weight: 500;
       color: #FFFFFF;
       line-height: 25px;
     }

src/tenant/music/music-detail/new-index.tsx

@@ -42,7 +42,7 @@ import { getRandomKey, musicBuy } from '../music'
 import { getOssUploadUrl, state } from '@/state'
 import { browser, moneyFormat } from '@/helpers/utils'
 import { orderStatus } from '@/views/order-detail/orderStatus'
-import AstronautJSON from './animate/bigLoad.json'
+import AstronautJSON from './animate/refresh_anim.json'
 import ColShare from '@/components/col-share'
 import iconListen from './images/icon_listen.png'
 import iconTeacher from '@common/images/icon_teacher.png'
@@ -414,6 +414,7 @@ export default defineComponent({
       }
     }
     onMounted(async () => {
+      postMessage({ api: 'setStatusBarTextColor', content: { statusBarTextColor: true } })
       await FetchList()
       const { height } = useRect(headers as any)
       const footer = useRect(footers as any)
@@ -427,9 +428,9 @@ export default defineComponent({
       window.addEventListener('message', showLoading)
     })
     onUnmounted(() => {
+      postMessage({ api: 'setStatusBarTextColor', content: { statusBarTextColor: false } })
       window.removeEventListener('message', showLoading)
     })
-
     const toggleFavorite = async () => {
       try {
         await request.post('/music/sheet/favorite/' + musicDetail.value?.id, {
@@ -1029,7 +1030,7 @@ export default defineComponent({
                     animationData={AstronautJSON}
                     class={styles.finch}
                   ></Vue3Lottie>
-                  <p class={styles.finchLoad}>加载中...</p>
+                  {/* <p class={styles.finchLoad}>加载中...</p> */}
                 </div>
               )}
               <iframe
@@ -1052,7 +1053,7 @@ export default defineComponent({
                     animationData={AstronautJSON}
                     class={styles.finch}
                   ></Vue3Lottie>
-                  <p class={styles.finchLoad}>加载中...</p>
+                  {/* <p class={styles.finchLoad}>加载中...</p> */}
                 </>
               ) : (
                 <div class={styles.empty}>

src/tenant/music/personal/index.module.less

@@ -20,9 +20,14 @@
     }
 
     .van-tabs__line {
+      display: none;
       width: 24px;
       height: 4px;
-      background: linear-gradient(90deg, #FF3C81 0%, rgba(255, 118, 166, 0.5) 100%) !important;
+      background: linear-gradient(
+        90deg,
+        #ff3c81 0%,
+        rgba(255, 118, 166, 0.5) 100%
+      ) !important;
       border-radius: 36px 36px 0px 0px;
     }
 
@@ -31,8 +36,6 @@
     }
   }
 
-
-
   :global {
     .van-sticky {
       background: url('../../images/bg-image-1.png') no-repeat top center;
@@ -54,7 +57,6 @@
         color: rgba(0, 0, 0, 0.4) !important;
       }
     }
-
   }
 
   .bgImg {
@@ -81,7 +83,9 @@
   background-color: #fff;
   margin: 0 14px 14px;
 }
-
+.practice {
+  margin-bottom: 0;
+}
 .personalSong {
   margin: 14px;
 }
@@ -91,7 +95,7 @@
 }
 
 .tennatCellGroup {
-  margin: 12px;
+  margin: 7px 12px 12px;
   border-radius: 16px;
 
   :global {
@@ -102,7 +106,7 @@
 
     .van-cell__right-icon {
       font-size: 16px;
-      color: #DADADA;
+      color: #dadada;
     }
   }
 
@@ -114,10 +118,10 @@
   }
 
   .tenantCoverImg {
-    width: 98px;
-    height: 98px;
+    width: 88px;
+    height: 88px;
     border-radius: 12px;
-    margin-right: 16px;
+    margin-right: 12px;
     overflow: hidden;
   }
 
@@ -129,6 +133,11 @@
       font-weight: 500;
       color: #131415;
       line-height: 24px;
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
     }
 
     p {
@@ -136,6 +145,11 @@
       font-size: 13px;
       color: #777777;
       line-height: 24px;
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
     }
   }
-}
+}

src/tenant/music/personal/tenant-album.tsx

@@ -91,7 +91,7 @@ export default defineComponent({
                       title: () => (
                         <div class={styles.tenantContent}>
                           <h2>{item.name}</h2>
-                          <p class="van-multi-ellipsis--l2">{item.describe}</p>
+                          <p>{item.describe}</p>
                         </div>
                       )
                     }}

src/tenant/music/search/index.module.less

@@ -17,7 +17,7 @@ body {
       box-shadow: 10px 10px 10px var(--box-shadow-color);
     }
 
-    >div {
+    > div {
       background-color: var(--base-bg);
     }
 
@@ -36,7 +36,6 @@ body {
         padding-right: 0;
       }
 
-
       .van-dropdown-menu__bar {
         background-color: transparent;
         box-shadow: none;
@@ -44,11 +43,12 @@ body {
       }
 
       .van-dropdown-menu__title {
-        padding-left: 0
+        padding-left: 0;
       }
 
       .van-dropdown-menu__title:after {
-        border-color: transparent transparent rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4);
+        border-color: transparent transparent rgba(0, 0, 0, 0.4)
+          rgba(0, 0, 0, 0.4);
       }
 
       .van-dropdown-item__content {
@@ -56,12 +56,12 @@ body {
       }
 
       .van-dropdown-menu__title--active::after {
-        border-color: transparent transparent #FE2451 #FE2451;
+        border-color: transparent transparent #fe2451 #fe2451;
       }
     }
 
     .titleActive {
-      color: #FE2451;
+      color: #fe2451;
     }
   }
 
@@ -73,7 +73,6 @@ body {
     }
   }
 
-
   .keywordTitle {
     display: flex;
     align-items: center;
@@ -131,7 +130,7 @@ body {
         justify-content: center;
         background-color: #fff;
         font-size: 12px;
-        color: #93959F;
+        color: #93959f;
       }
     }
   }
@@ -141,7 +140,6 @@ body {
     font-size: 14px;
 
     :global {
-
       .van-list__loading,
       .van-list__finished-text,
       .van-list__error-text {
@@ -155,7 +153,6 @@ body {
   }
 }
 
-
 .sticky {
   :global {
     .van-sticky {
@@ -176,10 +173,9 @@ body {
       }
 
       .van-field__clear {
-        color: #C1BDC1 !important;
+        color: #c1bdc1 !important;
       }
     }
-
   }
 }
 
@@ -216,7 +212,11 @@ body {
     .van-tabs__line {
       width: 24px;
       height: 4px;
-      background: linear-gradient(90deg, #FF3C81 0%, rgba(255, 118, 166, 0.5) 100%) !important;
+      background: linear-gradient(
+        90deg,
+        #ff3c81 0%,
+        rgba(255, 118, 166, 0.5) 100%
+      ) !important;
       border-radius: 36px 36px 0px 0px;
       bottom: 22px;
     }
@@ -235,14 +235,13 @@ body {
 
 .alubmGroupSearch {
   :global {
-    .van-list>div {
+    .van-list > div {
       margin-top: 8px;
     }
   }
 }
 
 .hotMusic {
-
   padding-bottom: 20px;
 
   .swipeItem .swipeChild {
@@ -258,7 +257,6 @@ body {
     margin-left: 14px;
   }
 
-
   .swipeItem {
     border-radius: 10px;
     overflow: hidden;
@@ -285,7 +283,7 @@ body {
 
   .swipe {
     font-size: 14px;
-    color: #6A6C77;
+    color: #6a6c77;
     line-height: 20px;
     max-width: 80%;
     white-space: nowrap;
@@ -299,7 +297,7 @@ body {
       font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 600;
 
-      color: #8A8C95;
+      color: #8a8c95;
       // margin-right: 20px;
       width: 21px;
     }
@@ -309,11 +307,11 @@ body {
       width: 16px;
       line-height: 16px;
       text-align: center;
-      background: #FE2451;
+      background: #fe2451;
       border-radius: 4px;
       font-size: 12px;
       font-weight: 500;
-      color: #FFFFFF;
+      color: #ffffff;
       vertical-align: middle;
       margin-left: 4px;
       transform: scale(0.9);
@@ -323,13 +321,12 @@ body {
       color: #131415;
 
       .num {
-        color: #FE2451;
+        color: #fe2451;
       }
     }
   }
 }
 
-
 // 搜索结果样式
 .searchResult {
   position: fixed;
@@ -340,9 +337,9 @@ body {
   overflow: hidden;
   bottom: 0;
   padding-top: var(--header-height);
-  background: url('../../images/bg-image-search.png') no-repeat top center #f8f8f8;
+  background: url('../../images/bg-image-search.png') no-repeat top center
+    #f8f8f8;
   background-size: 100% 214px;
-
 }
 
 .searchGroups {
@@ -367,7 +364,7 @@ body {
     }
 
     span span {
-      color: #FE2451;
+      color: #fe2451;
     }
   }
 
@@ -376,6 +373,11 @@ body {
     height: 16px;
     margin-right: 10px;
   }
+  :global {
+    .col-result-container {
+      margin-top: 40px;
+    }
+  }
 }
 
 .searchAlbum {
@@ -384,8 +386,8 @@ body {
   :global {
     .van-list {
       padding: 0 13px;
-      background: #FFFFFF;
+      background: #ffffff;
       border-radius: 16px;
     }
   }
-}
+}

src/tenant/music/train-list/index.module.less

@@ -5,8 +5,8 @@
 
   :global {
     .van-sticky {
-      // background: url('../../images/bg.png') no-repeat top center;
-      // background-size: 100% 214px;
+      background: url('../../images/bg.png') no-repeat top center;
+      background-size: 100% 346px;
     }
 
     .van-search__content {
@@ -29,6 +29,7 @@
       background-color: transparent;
       box-shadow: none;
       padding-right: 15px;
+      height: 36px;
     }
 
     .van-dropdown-menu__title {
@@ -54,14 +55,14 @@
     }
   }
 
-  .titleActive {
-    color: #fe2451;
-  }
+  // .titleActive {
+  //   color: #fe2451;
+  // }
 }
 .search {
   :global {
     .van-search {
-      height: calc(var(--van-dropdown-menu-height) + 20px);
+      padding-top: 4px;
     }
   }
 }
@@ -185,7 +186,7 @@
   padding: 0 12px;
   border-radius: 18px;
   background-color: #fff;
-  margin: 6px;
+  margin: 6px 12px 0px 12px;
   min-height: 40vh;
   :global {
     .van-list__loading {
@@ -199,7 +200,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 214px;
+  height: 346px;
   // object-fit: cover;
   z-index: -1;
 }
@@ -266,7 +267,7 @@
 }
 
 .searchResult {
-  padding: 16px 16px 12px;
+  padding: 16px 13px 12px;
   overflow: hidden;
   margin-bottom: 20px;
   border-bottom: 1px solid #f2f2f2;
@@ -281,8 +282,8 @@
 
 .radio-group {
   display: flex;
-  margin-top: 10px;
-  margin-bottom: 20px;
+  margin-top: 12px;
+  margin-bottom: 7px;
   flex-wrap: wrap;
 
   .radio:first-child {

src/tenant/music/train-list/index.tsx

@@ -289,6 +289,7 @@ export default defineComponent({
                 }} */}
               </ColHeader>
               <Search
+                placeholder={'请输入曲谱关键词'}
                 class={styles.search}
                 onSearch={onSearch}
                 type="tenant"
@@ -490,7 +491,7 @@ export default defineComponent({
                 !loading.value && (
                   <ColResult
                     tips="暂无曲目"
-                    classImgSize="SMALL"
+                    classImgSize="CERT"
                     btnStatus={false}
                   />
                 )

src/tenant/music/train-tool/index.module.less

@@ -1,3 +1,13 @@
+.trainTool {
+  .theSticky {
+    :global {
+      .van-sticky {
+        background: url('./images/music-bg.png') no-repeat top center;
+        background-size: 100% 365px;
+      }
+    }
+  }
+}
 .musicContent {
   position: absolute;
   top: 0;
@@ -14,7 +24,6 @@
   background-size: cover;
 }
 
-
 .bgImg {
   position: absolute;
   left: 0;
@@ -51,7 +60,7 @@
 
   :global {
     .swiper {
-      --swiper-theme-color: #FE2451 !important;
+      --swiper-theme-color: #fe2451 !important;
       --swiper-pagination-bottom: 0px !important;
       --swiper-pagination-bullet-size: 6px !important;
       padding-bottom: 15px;
@@ -64,7 +73,7 @@
     }
 
     .swiper-pagination-bullet-active {
-      background-color: #FE2451;
+      background-color: #fe2451;
     }
 
     .swiper-container {
@@ -93,7 +102,6 @@
       width: 53%;
     }
 
-
     .swiper-slide-active,
     .swiper-slide-duplicate-active {
       transform: scale(1) !important;
@@ -107,8 +115,8 @@
     z-index: 11;
     font-size: 12px;
     font-weight: 500;
-    color: #FFFFFF;
-    background: linear-gradient(270deg, #FF7B57 0%, #FF3460 100%);
+    color: #ffffff;
+    background: linear-gradient(270deg, #ff7b57 0%, #ff3460 100%);
     border-radius: 0px 0px 0px 6px;
     padding: 3px 6px 2px;
   }
@@ -125,8 +133,6 @@
 
     --van-image-error-icon-size: 130px;
 
-
-
     &::after {
       content: '';
       position: absolute;
@@ -151,7 +157,11 @@
           top: 0;
           bottom: 0;
           width: 9px;
-          background: linear-gradient(270deg, rgba(0, 0, 0, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
+          background: linear-gradient(
+            270deg,
+            rgba(0, 0, 0, 0.18) 0%,
+            rgba(255, 255, 255, 0) 100%
+          );
         }
       }
     }
@@ -202,7 +212,7 @@
   }
 
   .alumTitle {
-    padding: 0 16px;
+    padding: 0 20px;
     padding-bottom: 8px;
     font-size: 16px;
     font-weight: 600;
@@ -217,7 +227,6 @@
     text-align: center;
     min-height: 64px;
 
-
     .des {
       padding: 0 16px;
       font-size: 12px;
@@ -238,12 +247,11 @@
   font-size: 13px;
   padding: 0 12px;
 
-
   .albumTimer {
     display: flex;
     align-items: center;
     font-weight: 500;
-    color: #5E3314;
+    color: #5e3314;
     line-height: 1;
   }
 
@@ -253,7 +261,6 @@
     margin-right: 6px;
   }
 
-
   .originPrice {
     font-weight: 500;
     color: rgba(38, 38, 38, 0.4);
@@ -261,17 +268,17 @@
   }
 
   .currentPrice {
-    padding: 4px 7px;
+    padding: 3px 7px;
     border-radius: 20px;
     background: #262626;
-
     margin-left: 6px;
+    display: inline-block;
 
     span {
       font-weight: 500;
-      color: #FFE1AE;
+      color: #ffe1ae;
       line-height: 18px;
-      background: linear-gradient(180deg, #FFFFFF 0%, #FFC76C 100%);
+      background: linear-gradient(180deg, #ffffff 0%, #ffc76c 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
@@ -283,7 +290,7 @@
   z-index: 12;
   background-color: #fff;
   border-radius: 16px;
-  min-height: 40vh; //calc(100vh - 210px - var(--header-height));
+  min-height: 50vh; //calc(100vh - 210px - var(--header-height));
 
   --van-cell-background-color: transparent;
   --van-cell-font-size: 16px;
@@ -292,6 +299,13 @@
   --van-cell-icon-size: 10px;
 
   :global {
+    .van-tabs {
+      padding-bottom: 16px;
+    }
+    .van-tabs__nav {
+      padding-left: 6px;
+      padding-right: 6px;
+    }
     .van-tab {
       font-size: 16px !important;
       margin-top: 15px;
@@ -301,17 +315,22 @@
     .van-tab--active {
       font-size: 16px !important;
       color: #131415;
+      font-weight: 600;
     }
 
     .van-tabs__line {
       width: 24px;
       height: 4px;
-      background: linear-gradient(90deg, #FF3C5E 0%, rgba(255, 118, 155,0.5) 100%) !important;
+      background: linear-gradient(
+        90deg,
+        #ff3c5e 0%,
+        rgba(255, 118, 155, 0.5) 100%
+      ) !important;
       border-radius: 36px 36px 0px 0px;
     }
 
     .van-tab--shrink {
-      padding: 0 12px 0 12px;
+      padding: 0 14px 0 14px;
     }
 
     .van-button--plain.van-button--primary {
@@ -322,14 +341,35 @@
       background-color: #fff;
     }
   }
-
   .alumnList {
     padding: 0 15px;
+    &.alumnListCourseware {
+      padding: 0 3px 3px;
+    }
+    :global {
+      .van-empty {
+        margin-top: -24px;
+      }
+      .songItem {
+        &:first-child {
+          padding-top: 0;
+        }
+      }
+      .courseItem:nth-child(1) {
+        margin-top: 0 !important;
+      }
+      .courseItem:nth-child(2) {
+        margin-top: 0 !important;
+      }
+      .courseItem:nth-child(3) {
+        margin-top: 0 !important;
+      }
+    }
   }
 }
 
 .btnGroup {
-  border-top: 1px solid #F2F2F2;
+  border-top: 1px solid #f2f2f2;
   background-color: #fff;
   padding-top: 12px;
   padding-left: 25px;

src/tenant/music/train-tool/index.tsx

@@ -1,4 +1,12 @@
-import { computed, defineComponent, onMounted, reactive, ref, watch } from 'vue'
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+  nextTick
+} from 'vue'
 import {
   Image,
   Tabs,
@@ -40,8 +48,12 @@ import CourseItem from '../lessonCourseware/component/CourseItem'
 export default defineComponent({
   name: 'train-tool',
   setup() {
-    const subjectType = sessionStorage.getItem('tool-subject-type')
+    const sessionStorageToolSubject =
+      sessionStorage.getItem('tool-subject-type')
+    const toolSubject =
+      sessionStorageToolSubject && JSON.parse(sessionStorageToolSubject)
     sessionStorage.removeItem('tool-subject-type')
+
     const route = useRoute()
     const router = useRouter()
     const background = ref<string>('rgba(55, 205, 177, 0)')
@@ -50,7 +62,8 @@ export default defineComponent({
       details: {} as any,
       buy: route.query.buy as any,
       albumId: route.query.albumId || null,
-      activeTab: route.query.subjectType || 'SUBJECT',
+      activeTab:
+        toolSubject?.activeTab || route.query.subjectType || 'COURSEWARE', // 有缓存 默认用缓存,之后用请求头，最后默认
       loadingAlbum: false,
       loading: false,
       finished: false,
@@ -66,7 +79,8 @@ export default defineComponent({
       ablumStatus: false,
       heightV: 0,
       hasBuyStatus: true, // 是否能继续购买
-      albumList: [] as any // 专辑列表
+      albumList: [] as any, // 专辑列表
+      initialSlide: 0
     })
     const params = reactive({
       page: 1,
@@ -78,7 +92,7 @@ export default defineComponent({
 
     const isSingleAlbum = computed(() => {
       const query = route.query
-      if (query.taId || query.albumId) {
+      if (query.taId || (query.albumId && state.buy === '1')) {
         return true
       } else {
         return false
@@ -103,20 +117,32 @@ export default defineComponent({
             apiSuffix.value +
             `/tenantGroupAlbum/buyAlbumInfo?tenantGroupAlbumId=${
               route.query.taId || ''
-            }&tenantAlbumId=${state.albumId || ''}`
+            }`
+          //&tenantAlbumId=${state.albumId || ''}
           // if (state.albumId) {
           //   url = url + '?albumId=' + state.albumId
           // }
           const { data } = await request.get(url)
           state.albumList = data || []
           if (state.albumList.length > 0) {
-            state.details = state.albumList[0]
+            let index = 0
+            // 以缓存为优先 其次 请求头 state.albumId
+            if (toolSubject?.tenantGroupAlbumId || state.albumId) {
+              index = state.albumList.findIndex(item => {
+                return toolSubject?.tenantGroupAlbumId
+                  ? item.tenantGroupAlbumId === toolSubject?.tenantGroupAlbumId
+                  : item.id == state.albumId // 这里不全等 因为state.albumId为字符串 id为number
+              })
+              index < 0 && (index = 0)
+            }
+            state.initialSlide = index //默认展示第几个
+            state.details = state.albumList[index] // 有缓存  就用缓存里面的数据
           } else {
             // state.albumList
             if (!browser().isApp) {
               Dialog.alert({
                 title: '提示',
-                message: '该专辑不可购买',
+                message: '该教程不可购买',
                 confirmButtonText: '确定',
                 confirmButtonColor: '#2dc7aa'
               }).then(() => {
@@ -145,46 +171,10 @@ export default defineComponent({
     watch(
       () => state.details,
       () => {
-        state.ensembleCounts = state.details?.ensembleCounts <= 0 ? false : true
-        state.subjectCounts = state.details?.subjectCounts <= 0 ? false : true
-        state.musicCounts = state.details?.musicCounts <= 0 ? false : true
-        state.coursewareCounts =
-          state.details?.coursewareCounts <= 0 ? false : true
-        if (state.subjectCounts) {
-          state.activeTab = 'SUBJECT'
-        } else if (state.musicCounts) {
-          state.activeTab = 'MUSIC'
-        } else if (state.ensembleCounts) {
-          state.activeTab = 'ENSEMBLE'
-        } else if (state.coursewareCounts) {
-          state.activeTab = 'COURSEWARE'
-        }
-        // 带的参数
-        if (route.query.subjectType == 'SUBJECT' && state.subjectCounts) {
-          state.activeTab = 'SUBJECT'
-        } else if (route.query.subjectType == 'MUSIC' && state.musicCounts) {
-          state.activeTab = 'MUSIC'
-        } else if (
-          route.query.subjectType == 'ENSEMBLE' &&
-          state.ensembleCounts
-        ) {
-          state.activeTab = 'ENSEMBLE'
-        } else if (
-          route.query.subjectType == 'COURSEWARE' &&
-          state.coursewareCounts
-        ) {
-          state.activeTab = 'COURSEWARE'
-        }
-        // subjectType 缓存
-        if (subjectType == 'SUBJECT' && state.subjectCounts) {
-          state.activeTab = 'SUBJECT'
-        } else if (subjectType == 'MUSIC' && state.musicCounts) {
-          state.activeTab = 'MUSIC'
-        } else if (subjectType == 'ENSEMBLE' && state.ensembleCounts) {
-          state.activeTab = 'ENSEMBLE'
-        } else if (subjectType == 'COURSEWARE' && state.coursewareCounts) {
-          state.activeTab = 'COURSEWARE'
-        }
+        state.ensembleCounts = state.details?.ensembleCounts ? true : false
+        state.subjectCounts = state.details?.subjectCounts ? true : false
+        state.musicCounts = state.details?.musicCounts ? true : false
+        state.coursewareCounts = state.details?.coursewareCounts ? true : false
         if (state.details.buyTimesFlag) {
           if (state.details.buyedTimes >= state.details.buyTimes) {
             state.hasBuyStatus = false
@@ -196,10 +186,10 @@ export default defineComponent({
         }
       }
     )
-
+    let listController
     const FetchList = async (hideLoading = false) => {
-      if (state.loading) {
-        return
+      if (listController) {
+        listController.abort()
       }
       state.loading = true
       state.isError = false
@@ -210,11 +200,14 @@ export default defineComponent({
       }
 
       try {
+        listController = new AbortController()
+        const { signal } = listController
         const { data } = await request.post(
           `${apiSuffix.value}/tenantAlbumMusic/page`,
           {
             hideLoading,
-            data: tempParams
+            data: tempParams,
+            signal
           }
         )
         if (state.list.length > 0 && data.pageNo === 1) {
@@ -233,14 +226,14 @@ export default defineComponent({
     }
 
     onMounted(async () => {
-      useEventListener(document, 'scroll', evt => {
-        const { y } = useWindowScroll()
-        if (y.value > 20) {
-          background.value = `rgba(255, 255, 255)`
-        } else {
-          background.value = 'transparent'
-        }
-      })
+      // useEventListener(document, 'scroll', evt => {
+      //   const { y } = useWindowScroll()
+      //   if (y.value > 20) {
+      //     background.value = `rgba(255, 255, 255)`
+      //   } else {
+      //     background.value = 'transparent'
+      //   }
+      // })
 
       state.loading = true
       state.loadingAlbum = true
@@ -253,7 +246,15 @@ export default defineComponent({
       document.body.scrollIntoView()
       window.scrollTo(1, 0)
     })
-
+    function handleChangeActiveTab() {
+      state.activeTab = state.details?.coursewareCounts
+        ? 'COURSEWARE'
+        : state.details?.subjectCounts
+        ? 'SUBJECT'
+        : state.details?.musicCounts
+        ? 'MUSIC'
+        : 'ENSEMBLE'
+    }
     const onSubmit = async () => {
       const album = state.details
       const details = state.details
@@ -341,6 +342,7 @@ export default defineComponent({
         {!state.loading && !state.details.id && state.buy != '1' ? (
           <>
             <TheSticky
+              class={styles.theSticky}
               position="top"
               onBarHeight={(height: any) => {
                 console.log(height, 'height', height)
@@ -358,7 +360,7 @@ export default defineComponent({
                 }}
               >
                 <ColResult
-                  tips="暂无专辑"
+                  tips="暂无教程"
                   classImgSize="SMALL"
                   btnStatus={false}
                 />
@@ -369,6 +371,7 @@ export default defineComponent({
           !state.loadingAlbum && (
             <>
               <TheSticky
+                class={styles.theSticky}
                 position="top"
                 onBarHeight={(height: any) => {
                   state.heightV = height
@@ -412,34 +415,27 @@ export default defineComponent({
                     state.albumList &&
                     state.albumList.length > 0 && (
                       <Swiper
+                        initialSlide={state.initialSlide}
                         watchSlidesProgress={true}
                         slidesPerView={'auto'}
                         centeredSlides={true}
                         modules={[Pagination]}
                         pagination={{ clickable: true }}
-                        // onSlideChange={(swiper: any) => {}}
-                        onTransitionEnd={(swiper: any) => {
+                        // onTransitionEnd={(swiper: any) => {}} onSlideChange
+                        onSlideChange={(swiper: any) => {
                           state.details = state.albumList[swiper.activeIndex]
-                          state.ensembleCounts =
-                            state.details?.ensembleCounts <= 0 ? false : true
-                          state.subjectCounts =
-                            state.details?.subjectCounts <= 0 ? false : true
-                          state.musicCounts =
-                            state.details?.musicCounts <= 0 ? false : true
-                          state.coursewareCounts =
-                            state.details?.coursewareCounts <= 0 ? false : true
-                          if (state.subjectCounts) {
-                            state.activeTab = 'SUBJECT'
-                          } else if (state.musicCounts) {
-                            state.activeTab = 'MUSIC'
-                          } else if (state.ensembleCounts) {
-                            state.activeTab = 'ENSEMBLE'
-                          } else if (state.coursewareCounts) {
-                            state.activeTab = 'COURSEWARE'
-                          }
-                          params.page = 1
-                          state.list = []
-                          FetchList(true)
+                          // 等tab渲染完了之后再切换 不然tab会自动重新赋值
+                          nextTick(() => {
+                            // 当有初始值的时候不刷新
+                            if (state.initialSlide) {
+                              state.initialSlide = 0
+                              return
+                            }
+                            handleChangeActiveTab()
+                            params.page = 1
+                            state.list = []
+                            FetchList(true)
+                          })
                         }}
                       >
                         {state.albumList.map((album: any) => (
@@ -515,13 +511,16 @@ export default defineComponent({
                     lineWidth={20}
                     shrink
                     v-model:active={state.activeTab}
-                    onChange={val => {
-                      state.activeTab = val
+                    onClick-tab={val => {
+                      state.activeTab = val.name
                       params.page = 1
                       state.list = []
                       FetchList()
                     }}
                   >
+                    {state.coursewareCounts && (
+                      <Tab title="云教程" name="COURSEWARE"></Tab>
+                    )}
                     {state.subjectCounts && (
                       <Tab title="声部练习" name="SUBJECT"></Tab>
                     )}
@@ -531,13 +530,17 @@ export default defineComponent({
                     {state.ensembleCounts && (
                       <Tab title="合奏练习" name="ENSEMBLE"></Tab>
                     )}
-                    {state.coursewareCounts && (
-                      <Tab title="云教程" name="COURSEWARE"></Tab>
-                    )}
                   </Tabs>
                 </Sticky>
 
-                <div class={styles.alumnList}>
+                <div
+                  class={[
+                    styles.alumnList,
+                    state.activeTab === 'COURSEWARE'
+                      ? styles.alumnListCourseware
+                      : ''
+                  ]}
+                >
                   <List
                     loading={state.loading}
                     finished={state.finished}
@@ -559,7 +562,11 @@ export default defineComponent({
                           onItemClick={row => {
                             sessionStorage.setItem(
                               'tool-subject-type',
-                              state.activeTab as any
+                              JSON.stringify({
+                                activeTab: state.activeTab,
+                                tenantGroupAlbumId:
+                                  state.details.tenantGroupAlbumId
+                              })
                             )
                             router.push({
                               path: '/courseList',
@@ -578,7 +585,11 @@ export default defineComponent({
                           onDetail={(item: any) => {
                             sessionStorage.setItem(
                               'tool-subject-type',
-                              state.activeTab as any
+                              JSON.stringify({
+                                activeTab: state.activeTab,
+                                tenantGroupAlbumId:
+                                  state.details.tenantGroupAlbumId
+                              })
                             )
                             router.push({
                               path: '/music-detail',
@@ -594,7 +605,11 @@ export default defineComponent({
                     ) : (
                       !state.loading && (
                         <ColResult
-                          tips="暂无曲目" //暂无教程
+                          tips={
+                            state.activeTab === 'COURSEWARE'
+                              ? '暂无教材'
+                              : '暂无曲目'
+                          }
                           classImgSize="SMALL"
                           btnStatus={false}
                         />

src/tenant/trade/index.module.less

@@ -17,14 +17,13 @@
       }
 
       .van-field__clear {
-        color: #C1BDC1 !important;
+        color: #c1bdc1 !important;
       }
     }
 
     .van-search {
       padding-bottom: 0;
     }
-
   }
 }
 
@@ -34,7 +33,6 @@
   color: #131415;
 
   :global {
-
     .van-list__loading,
     .van-list__finished-text,
     .van-list__error-text {
@@ -47,7 +45,6 @@
   }
 }
 
-
 .bgImg {
   position: fixed;
   top: 0;
@@ -84,7 +81,11 @@
     .van-tabs__line {
       width: 24px;
       height: 4px;
-      background: linear-gradient(90deg, #FF3C81 0%, rgba(255, 118, 166, 0.5) 100%) !important;
+      background: linear-gradient(
+        90deg,
+        #ff3c5e 0%,
+        rgba(255, 118, 155, 0.5) 100%
+      ) !important;
       border-radius: 36px 36px 0px 0px;
     }
 
@@ -133,7 +134,6 @@
   // }
 }
 
-
 .tradeList {
   padding-top: 16px;
 
@@ -179,7 +179,6 @@
     color: #131415;
     line-height: 24px;
 
-
     .name {
       max-width: 160px;
     }
@@ -202,7 +201,6 @@
     .d {
       max-width: 160px;
     }
-
   }
 
   .paymentPrice {
@@ -218,7 +216,7 @@
     span {
       font-family: DINAlternate-Bold, DINAlternate;
       font-weight: bold;
-      color: #FE2451;
+      color: #fe2451;
       font-size: 20px;
       padding-left: 4px;
 
@@ -233,11 +231,11 @@
 
   .songLength {
     border-radius: 4px;
-    border: 1px solid #FE2451;
+    border: 1px solid #fe2451;
     font-size: 12px;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
-    color: #FE2451;
+    color: #fe2451;
     line-height: 16px;
     padding: 1px 6px;
   }
@@ -257,21 +255,20 @@
       padding: 7px 16px;
     }
 
-    .van-button+.van-button {
+    .van-button + .van-button {
       margin-left: 10px;
     }
   }
 }
 
-
 .orderDetailGroup {
   margin: 0 12px 12px;
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 10px;
 }
 
 .optionGroup {
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 10px;
   margin: 12px;
   padding-top: 15px;
@@ -320,4 +317,4 @@
       /* CSS 3 (and 2.1 as well, actually) */
     }
   }
-}
+}

src/tenant/trade/index.tsx

@@ -360,7 +360,7 @@ export default defineComponent({
           ) : (
             <ColResult
               btnStatus={false}
-              classImgSize="SMALL"
+              classImgSize="CERT"
               tips={state.type === 'buy' ? '暂无购买记录' : '暂无退款记录'}
             />
           )}

src/views/article-center/help-center.tsx

@@ -121,7 +121,7 @@ export default defineComponent({
             ))}
           </List>
         ) : (
-          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无内容" />
+          <ColResult btnStatus={false} classImgSize="CERT" tips="暂无内容" />
         )}
       </div>
     )

yarn.lock

@@ -5541,6 +5541,11 @@ yargs@^15.3.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yet-another-abortcontroller-polyfill@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.npmmirror.com/yet-another-abortcontroller-polyfill/-/yet-another-abortcontroller-polyfill-0.0.4.tgz#ce2270e564a4f2d07351812f599e10143526f98b"
+  integrity sha512-6do/P+mjm7FDUD+q8FrZ0ClMIbjGuKyWuWm3Vz2O7QmVf73HVLYIDV6toS7T0qoH1yeI2HPb8VgJp7w+zcVWvA==
+
 yorkie@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/yorkie/-/yorkie-2.0.0.tgz"