|
@@ -62,7 +62,7 @@ export default defineComponent({
|
|
|
ablumStatus: false,
|
|
|
heightV: 0,
|
|
|
hasBuyStatus: true, // 是否能继续购买
|
|
|
- albumList: [] // 专辑列表
|
|
|
+ albumList: [] as any // 专辑列表
|
|
|
})
|
|
|
const params = reactive({
|
|
|
page: 1,
|
|
@@ -84,17 +84,27 @@ export default defineComponent({
|
|
|
const getDetails = async () => {
|
|
|
try {
|
|
|
// tenantGroupAlbum/buyAlbumInfo
|
|
|
- const url =
|
|
|
- apiSuffix.value +
|
|
|
- '/tenantGroupAlbum/buyAlbumInfo?tenantGroupAlbumId=' +
|
|
|
- (route.query.taId || '')
|
|
|
- // 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]
|
|
|
+ if (state.albumId) {
|
|
|
+ let url = apiSuffix.value + '/userTenantAlbumRecord/detail'
|
|
|
+ if (state.albumId) {
|
|
|
+ url = url + '?albumId=' + state.albumId
|
|
|
+ }
|
|
|
+ const { data } = await request.post(url)
|
|
|
+ state.albumList = [data || {}]
|
|
|
+ state.details = data || {}
|
|
|
+ } else {
|
|
|
+ const url =
|
|
|
+ apiSuffix.value +
|
|
|
+ '/tenantGroupAlbum/buyAlbumInfo?tenantGroupAlbumId=' +
|
|
|
+ (route.query.taId || '')
|
|
|
+ // 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]
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// state.tenantAlbumStatus = data.tenantAlbumStatus
|
|
@@ -293,204 +303,244 @@ export default defineComponent({
|
|
|
|
|
|
return () => (
|
|
|
<div class={styles.trainTool}>
|
|
|
- {!route.query.taId && (
|
|
|
- <TheSticky
|
|
|
- position="top"
|
|
|
- onBarHeight={(height: any) => {
|
|
|
- state.heightV = height
|
|
|
- }}
|
|
|
- >
|
|
|
- <ColHeader
|
|
|
- background={background.value}
|
|
|
- border={false}
|
|
|
- isFixed={false}
|
|
|
- color={color.value}
|
|
|
- backIconColor="white"
|
|
|
- />
|
|
|
- </TheSticky>
|
|
|
- )}
|
|
|
- {/* <img class={styles.bgImg} src={state.details?.coverImg} /> */}
|
|
|
- <div class={styles.musicContent}></div>
|
|
|
- <div class={styles.bg}>
|
|
|
- <div class={styles.alumWrap}>
|
|
|
- {isSingleAlbum.value ? (
|
|
|
- <div class={styles.singleAlbum}>
|
|
|
- <div class={styles.img}>
|
|
|
- {state.details?.buyTimesFlag && (
|
|
|
- <span class={styles.quota}>
|
|
|
- 限购:{state.details?.buyedTimes}/{state.details?.buyTimes}
|
|
|
- 次
|
|
|
- </span>
|
|
|
- )}
|
|
|
- <Image
|
|
|
- class={styles.image}
|
|
|
- width="100%"
|
|
|
- height="100%"
|
|
|
- fit="cover"
|
|
|
- src={state.details?.coverImg || iconAlbumCover}
|
|
|
- errorIcon={iconAlbumCover}
|
|
|
- />
|
|
|
- <div class={styles.iconPian}></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- <Swiper
|
|
|
- watchSlidesProgress={true}
|
|
|
- slidesPerView={'auto'}
|
|
|
- centeredSlides={true}
|
|
|
- modules={[Pagination]}
|
|
|
- pagination={{ clickable: true }}
|
|
|
- onSlideChange={(swiper: any) => {
|
|
|
- state.details = state.albumList[swiper.activeIndex]
|
|
|
+ {!state.loading && !state.details.id && state.buy != '1' ? (
|
|
|
+ <>
|
|
|
+ <TheSticky
|
|
|
+ position="top"
|
|
|
+ onBarHeight={(height: any) => {
|
|
|
+ console.log(height, 'height', height)
|
|
|
+ state.heightV = height
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <ColHeader border={false} isFixed={false} />
|
|
|
+ </TheSticky>
|
|
|
+ {!state.loading && (
|
|
|
+ <div
|
|
|
+ style={{
|
|
|
+ height: 'calc(100vh - var(--header-height))',
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center'
|
|
|
}}
|
|
|
- onTransitionEnd={() => {
|
|
|
- params.page = 1
|
|
|
- state.list = []
|
|
|
- FetchList()
|
|
|
+ >
|
|
|
+ <ColResult
|
|
|
+ tips="暂无专辑"
|
|
|
+ classImgSize="SMALL"
|
|
|
+ btnStatus={false}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ {!route.query.taId && (
|
|
|
+ <TheSticky
|
|
|
+ position="top"
|
|
|
+ onBarHeight={(height: any) => {
|
|
|
+ state.heightV = height
|
|
|
}}
|
|
|
>
|
|
|
- {state.albumList.map((album: any) => (
|
|
|
- <SwiperSlide>
|
|
|
+ <ColHeader
|
|
|
+ background={background.value}
|
|
|
+ border={false}
|
|
|
+ isFixed={false}
|
|
|
+ color={color.value}
|
|
|
+ backIconColor="white"
|
|
|
+ />
|
|
|
+ </TheSticky>
|
|
|
+ )}
|
|
|
+ {/* <img class={styles.bgImg} src={state.details?.coverImg} /> */}
|
|
|
+ <div class={styles.musicContent}></div>
|
|
|
+ <div class={styles.bg}>
|
|
|
+ <div class={styles.alumWrap}>
|
|
|
+ {isSingleAlbum.value ? (
|
|
|
+ <div class={styles.singleAlbum}>
|
|
|
<div class={styles.img}>
|
|
|
- {album.buyTimesFlag && (
|
|
|
+ {state.details?.buyTimesFlag && (
|
|
|
<span class={styles.quota}>
|
|
|
- 限购:{album.buyedTimes}/{album.buyTimes}次
|
|
|
+ 限购:{state.details?.buyedTimes}/
|
|
|
+ {state.details?.buyTimes}次
|
|
|
</span>
|
|
|
)}
|
|
|
-
|
|
|
<Image
|
|
|
class={styles.image}
|
|
|
width="100%"
|
|
|
height="100%"
|
|
|
fit="cover"
|
|
|
- src={album?.coverImg || iconAlbumCover}
|
|
|
+ src={state.details?.coverImg || iconAlbumCover}
|
|
|
errorIcon={iconAlbumCover}
|
|
|
/>
|
|
|
<div class={styles.iconPian}></div>
|
|
|
</div>
|
|
|
- </SwiperSlide>
|
|
|
- ))}
|
|
|
- </Swiper>
|
|
|
- )}
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <Swiper
|
|
|
+ watchSlidesProgress={true}
|
|
|
+ slidesPerView={'auto'}
|
|
|
+ centeredSlides={true}
|
|
|
+ modules={[Pagination]}
|
|
|
+ pagination={{ clickable: true }}
|
|
|
+ onSlideChange={(swiper: any) => {
|
|
|
+ state.details = state.albumList[swiper.activeIndex]
|
|
|
+ }}
|
|
|
+ onTransitionEnd={() => {
|
|
|
+ params.page = 1
|
|
|
+ state.list = []
|
|
|
+ FetchList()
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {state.albumList.map((album: any) => (
|
|
|
+ <SwiperSlide>
|
|
|
+ <div class={styles.img}>
|
|
|
+ {album.buyTimesFlag && (
|
|
|
+ <span class={styles.quota}>
|
|
|
+ 限购:{album.buyedTimes}/{album.buyTimes}次
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
|
|
|
- <div class={styles.alumDes}>
|
|
|
- <div class={[styles.alumTitle, 'van-ellipsis']}>
|
|
|
- {state.details?.name}
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class={[styles.des, 'van-multi-ellipsis--l2']}
|
|
|
- style={{
|
|
|
- height: '32px',
|
|
|
- lineHeight: '16px'
|
|
|
- }}
|
|
|
- >
|
|
|
- {state.details?.describe}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <Image
|
|
|
+ class={styles.image}
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ fit="cover"
|
|
|
+ src={album?.coverImg || iconAlbumCover}
|
|
|
+ errorIcon={iconAlbumCover}
|
|
|
+ />
|
|
|
+ <div class={styles.iconPian}></div>
|
|
|
+ </div>
|
|
|
+ </SwiperSlide>
|
|
|
+ ))}
|
|
|
+ </Swiper>
|
|
|
+ )}
|
|
|
|
|
|
- {state.buy != '1' && (
|
|
|
- <div class={styles.albumPriceGroup}>
|
|
|
- <div class={styles.albumTimer}>
|
|
|
- <img src={iconTimer} class={styles.iconTimer} />
|
|
|
- <span>有效期:{state.details?.purchaseNum || 0}天</span>
|
|
|
+ <div class={styles.alumDes}>
|
|
|
+ <div class={[styles.alumTitle, 'van-ellipsis']}>
|
|
|
+ {state.details?.name}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={[styles.des, 'van-multi-ellipsis--l2']}
|
|
|
+ style={{
|
|
|
+ height: '32px',
|
|
|
+ lineHeight: '16px'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {state.details?.describe}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class={styles.albumPriceList}>
|
|
|
- {(state.details?.originalPrice || 0) >
|
|
|
- (state.details?.actualPrice || 0) && (
|
|
|
- <span class={styles.originPrice}>
|
|
|
- 原价:¥{moneyFormat(state.details?.originalPrice || 0)}
|
|
|
- </span>
|
|
|
- )}
|
|
|
|
|
|
- <span class={styles.currentPrice}>
|
|
|
- <span>¥{moneyFormat(state.details?.actualPrice || 0)}</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ {state.buy != '1' && baseState.platformType === 'STUDENT' && (
|
|
|
+ <div class={styles.albumPriceGroup}>
|
|
|
+ <div class={styles.albumTimer}>
|
|
|
+ <img src={iconTimer} class={styles.iconTimer} />
|
|
|
+ <span>有效期:{state.details?.purchaseNum || 0}天</span>
|
|
|
+ </div>
|
|
|
+ <div class={styles.albumPriceList}>
|
|
|
+ {(state.details?.originalPrice || 0) >
|
|
|
+ (state.details?.actualPrice || 0) && (
|
|
|
+ <span class={styles.originPrice}>
|
|
|
+ 原价:¥
|
|
|
+ {moneyFormat(state.details?.originalPrice || 0)}
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <span class={styles.currentPrice}>
|
|
|
+ <span>
|
|
|
+ ¥{moneyFormat(state.details?.actualPrice || 0)}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
</div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class={styles.musicList}>
|
|
|
- <Sticky position="top" offsetTop={state.heightV}>
|
|
|
- <Tabs
|
|
|
- color="var(--van-primary)"
|
|
|
- background="transparent"
|
|
|
- lineWidth={20}
|
|
|
- shrink
|
|
|
- v-model:active={state.activeTab}
|
|
|
- onChange={val => {
|
|
|
- state.activeTab = val
|
|
|
+ <div class={styles.musicList}>
|
|
|
+ <Sticky position="top" offsetTop={state.heightV}>
|
|
|
+ <Tabs
|
|
|
+ color="var(--van-primary)"
|
|
|
+ background="transparent"
|
|
|
+ lineWidth={20}
|
|
|
+ shrink
|
|
|
+ v-model:active={state.activeTab}
|
|
|
+ onChange={val => {
|
|
|
+ state.activeTab = val
|
|
|
|
|
|
- params.page = 1
|
|
|
- state.list = []
|
|
|
- FetchList()
|
|
|
- }}
|
|
|
- >
|
|
|
- {state.subjectCounts && (
|
|
|
- <Tab title="声部练习" name="SUBJECT"></Tab>
|
|
|
- )}
|
|
|
- {state.musicCounts && <Tab title="独奏曲目" name="MUSIC"></Tab>}
|
|
|
- {state.ensembleCounts && (
|
|
|
- <Tab title="合奏练习" name="ENSEMBLE"></Tab>
|
|
|
- )}
|
|
|
- </Tabs>
|
|
|
- </Sticky>
|
|
|
+ params.page = 1
|
|
|
+ state.list = []
|
|
|
+ FetchList()
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {state.subjectCounts && (
|
|
|
+ <Tab title="声部练习" name="SUBJECT"></Tab>
|
|
|
+ )}
|
|
|
+ {state.musicCounts && (
|
|
|
+ <Tab title="独奏曲目" name="MUSIC"></Tab>
|
|
|
+ )}
|
|
|
+ {state.ensembleCounts && (
|
|
|
+ <Tab title="合奏练习" name="ENSEMBLE"></Tab>
|
|
|
+ )}
|
|
|
+ </Tabs>
|
|
|
+ </Sticky>
|
|
|
|
|
|
- <div class={styles.alumnList}>
|
|
|
- <List
|
|
|
- loading={state.loading}
|
|
|
- finished={state.finished}
|
|
|
- finished-text={' '}
|
|
|
- onLoad={FetchList}
|
|
|
- immediateCheck={false}
|
|
|
- error={state.isError}
|
|
|
- >
|
|
|
- {state.list && state.list.length ? (
|
|
|
- <Song
|
|
|
- showNumber
|
|
|
- list={state.list}
|
|
|
- onDetail={(item: any) => {
|
|
|
- sessionStorage.setItem(
|
|
|
- 'tool-subject-type',
|
|
|
- state.activeTab as any
|
|
|
+ <div class={styles.alumnList}>
|
|
|
+ <List
|
|
|
+ loading={state.loading}
|
|
|
+ finished={state.finished}
|
|
|
+ finished-text={' '}
|
|
|
+ onLoad={FetchList}
|
|
|
+ immediateCheck={false}
|
|
|
+ error={state.isError}
|
|
|
+ >
|
|
|
+ {state.list && state.list.length ? (
|
|
|
+ <Song
|
|
|
+ showNumber
|
|
|
+ list={state.list}
|
|
|
+ onDetail={(item: any) => {
|
|
|
+ sessionStorage.setItem(
|
|
|
+ 'tool-subject-type',
|
|
|
+ state.activeTab as any
|
|
|
+ )
|
|
|
+ router.push({
|
|
|
+ path: '/music-detail',
|
|
|
+ query: {
|
|
|
+ id: item.id,
|
|
|
+ tenantAlbumId: item.tenantAlbumId
|
|
|
+ // albumId: route.params.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ !state.loading && (
|
|
|
+ <ColResult
|
|
|
+ tips="暂无曲目"
|
|
|
+ classImgSize="SMALL"
|
|
|
+ btnStatus={false}
|
|
|
+ />
|
|
|
)
|
|
|
- router.push({
|
|
|
- path: '/music-detail',
|
|
|
- query: {
|
|
|
- id: item.id
|
|
|
- // albumId: route.params.id
|
|
|
- }
|
|
|
- })
|
|
|
- }}
|
|
|
- />
|
|
|
- ) : (
|
|
|
- !state.loading && (
|
|
|
- <ColResult
|
|
|
- tips="暂无曲目"
|
|
|
- classImgSize="SMALL"
|
|
|
- btnStatus={false}
|
|
|
- />
|
|
|
- )
|
|
|
- )}
|
|
|
- </List>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {baseState.platformType === 'STUDENT' && state.buy != '1' && (
|
|
|
- <TheSticky position="bottom">
|
|
|
- <div class={styles.btnGroup}>
|
|
|
- <Button
|
|
|
- round
|
|
|
- block
|
|
|
- disabled={state.details?.musicNum <= 0 && !state.hasBuyStatus}
|
|
|
- color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
|
|
|
- onClick={onSubmit}
|
|
|
- >
|
|
|
- 购买教程
|
|
|
- </Button>
|
|
|
+ )}
|
|
|
+ </List>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </TheSticky>
|
|
|
+ {baseState.platformType === 'STUDENT' && state.buy != '1' && (
|
|
|
+ <TheSticky position="bottom">
|
|
|
+ <div class={styles.btnGroup}>
|
|
|
+ <Button
|
|
|
+ round
|
|
|
+ block
|
|
|
+ disabled={
|
|
|
+ state.details?.musicNum <= 0 && !state.hasBuyStatus
|
|
|
+ }
|
|
|
+ color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
|
|
|
+ onClick={onSubmit}
|
|
|
+ >
|
|
|
+ 购买教程
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </TheSticky>
|
|
|
+ )}
|
|
|
+ </>
|
|
|
)}
|
|
|
+ {/**/}
|
|
|
</div>
|
|
|
)
|
|
|
}
|