|
|
@@ -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,
|
|
|
@@ -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(() => {
|
|
|
@@ -150,41 +176,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,11 +187,7 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
-
|
|
|
const FetchList = async (hideLoading = false) => {
|
|
|
- if (state.loading) {
|
|
|
- return
|
|
|
- }
|
|
|
state.loading = true
|
|
|
state.isError = false
|
|
|
const tempParams = {
|
|
|
@@ -253,7 +240,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
|
|
|
@@ -358,7 +353,7 @@ export default defineComponent({
|
|
|
}}
|
|
|
>
|
|
|
<ColResult
|
|
|
- tips="暂无专辑"
|
|
|
+ tips="暂无教程"
|
|
|
classImgSize="SMALL"
|
|
|
btnStatus={false}
|
|
|
/>
|
|
|
@@ -412,34 +407,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 +503,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 +522,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 +554,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 +577,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 +597,7 @@ export default defineComponent({
|
|
|
) : (
|
|
|
!state.loading && (
|
|
|
<ColResult
|
|
|
- tips="暂无曲目" //暂无教程
|
|
|
+ tips="暂无教程"
|
|
|
classImgSize="SMALL"
|
|
|
btnStatus={false}
|
|
|
/>
|
黄琪勇
