更改切换流程

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,
@@ -110,7 +124,15 @@ export default defineComponent({
           const { data } = await request.get(url)
           state.albumList = data || []
           if (state.albumList.length > 0) {
-            state.details = state.albumList[0]
+            let index = 0
+            toolSubject?.tenantGroupAlbumId &&
+              (index = state.albumList.findIndex(item => {
+                return (
+                  item.tenantGroupAlbumId === toolSubject?.tenantGroupAlbumId
+                )
+              }))
+            state.initialSlide = index //默认展示第几个
+            state.details = state.albumList[index] // 有缓存  就用缓存里面的数据
           } else {
             // state.albumList
             if (!browser().isApp) {
@@ -150,41 +172,6 @@ export default defineComponent({
         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'
-        }
         if (state.details.buyTimesFlag) {
           if (state.details.buyedTimes >= state.details.buyTimes) {
             state.hasBuyStatus = false
@@ -196,7 +183,6 @@ export default defineComponent({
         }
       }
     )
-
     const FetchList = async (hideLoading = false) => {
       if (state.loading) {
         return
@@ -253,7 +239,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
@@ -412,34 +406,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 +502,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,9 +521,6 @@ export default defineComponent({
                     {state.ensembleCounts && (
                       <Tab title="合奏练习" name="ENSEMBLE"></Tab>
                     )}
-                    {state.coursewareCounts && (
-                      <Tab title="云教程" name="COURSEWARE"></Tab>
-                    )}
                   </Tabs>
                 </Sticky>
 
@@ -559,7 +546,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 +569,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',