Update index.tsx

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

@@ -61,6 +61,7 @@ export default defineComponent({
 
     const route = useRoute()
     const router = useRouter()
+    const tabsRef = ref()
     const background = ref<string>('rgba(55, 205, 177, 0)')
     // const color = ref<string>('#fff')
     const state = reactive({
@@ -71,6 +72,7 @@ export default defineComponent({
       activeTab:
         toolSubject?.activeTab || route.query.subjectType || 'COURSEWARE', // 有缓存 默认用缓存,之后用请求头，最后默认
       initLoadPage: false,
+      showLoading: false,
       loadingAlbum: false,
       loading: false,
       finished: false,
@@ -422,6 +424,7 @@ export default defineComponent({
       window.scrollTo(1, 0)
     })
     function handleChangeActiveTab() {
+      state.showLoading = true
       state.activeTab = state.details?.coursewareCounts
         ? 'COURSEWARE'
         : state.details?.subjectCounts
@@ -429,6 +432,9 @@ export default defineComponent({
         : state.details?.musicCounts
         ? 'MUSIC'
         : 'ENSEMBLE'
+      setTimeout(() => {
+        state.showLoading = false
+      }, 0);
     }
     const onSubmit = async () => {
       const album = state.details
@@ -645,17 +651,20 @@ export default defineComponent({
                           }
                           state.details = state.albumList[swiper.activeIndex]
                           // 等tab渲染完了之后再切换 不然tab会自动重新赋值
-                          nextTick(() => {
+                          nextTick(async() => {
                             // 当有初始值的时候不刷新
-                            if (state.initialSlide) {
-                              state.initialSlide = 0
-                              return
-                            }
+                            // if (state.initialSlide) {
+                            //   state.initialSlide = 0
+                            //   return
+                            // }
                             handleChangeActiveTab()
+                            // console.log(tabsRef.value, state.activeTab)
+                            tabsRef.value && tabsRef.value.resize()
+                            // console.log(state.activeTab, 'activeTab')
                             activeTypeParams()
                             params.page = 1
                             state.list = []
-                            FetchList(true)
+                            await FetchList(true)
                           })
                         }}
                       >
@@ -731,6 +740,7 @@ export default defineComponent({
                     background="transparent"
                     lineWidth={20}
                     shrink
+                    ref={tabsRef}
                     v-model:active={state.activeTab}
                     onClick-tab={val => {
                       params.subjectId = null
@@ -746,18 +756,19 @@ export default defineComponent({
                       FetchList()
                     }}
                   >
-                    {state.coursewareCounts && (
-                      <Tab title="云课堂" name="COURSEWARE"></Tab>
-                    )}
-                    {state.subjectCounts && (
-                      <Tab title="基础云练" name="SUBJECT"></Tab>
-                    )}
-                    {state.musicCounts && (
-                      <Tab title="独奏云练" name="MUSIC"></Tab>
-                    )}
-                    {state.ensembleCounts && (
-                      <Tab title="合奏云练" name="ENSEMBLE"></Tab>
-                    )}
+                    {!state.showLoading && <>
+                      {state.coursewareCounts && (
+                        <Tab title="云课堂" name="COURSEWARE"></Tab>
+                      )}
+                      {state.subjectCounts && (
+                        <Tab title="基础云练" name="SUBJECT"></Tab>
+                      )}
+                      {state.musicCounts && (
+                        <Tab title="独奏云练" name="MUSIC"></Tab>
+                      )}
+                      {state.ensembleCounts && (
+                        <Tab title="合奏云练" name="ENSEMBLE"></Tab>
+                      )}</>}
                   </Tabs>
                   <Search
                     modelValue={params.keyword}