|
@@ -1,8 +1,8 @@
|
|
|
-import { defineComponent, reactive, ref } from 'vue'
|
|
|
+import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
|
|
|
import { Sticky, List, Popup, Icon } from 'vant'
|
|
|
import Search from '@/components/col-search'
|
|
|
import request from '@/helpers/request'
|
|
|
-import Item from './item'
|
|
|
+// import Item from './item'
|
|
|
import SelectTag from '../search/select-tag'
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
import ColResult from '@/components/col-result'
|
|
@@ -12,8 +12,12 @@ import { state } from '@/state'
|
|
|
import SelectSubject from '../search/select-subject'
|
|
|
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
|
|
|
import Song from '../component/song'
|
|
|
+import ColHeader from '@/components/col-header'
|
|
|
+import { useRect } from '@vant/use'
|
|
|
|
|
|
-const noop = () => {}
|
|
|
+const noop = () => {
|
|
|
+ //
|
|
|
+}
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'MusicList',
|
|
@@ -33,9 +37,16 @@ export default defineComponent({
|
|
|
teacherId: {
|
|
|
type: String || Number,
|
|
|
default: ''
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ tyep: String,
|
|
|
+ default: 'fine'
|
|
|
}
|
|
|
},
|
|
|
- setup({ hideSearch, defauleParams, onItemClick, teacherId }, { expose }) {
|
|
|
+ setup(
|
|
|
+ { hideSearch, defauleParams, onItemClick, teacherId, type },
|
|
|
+ { expose }
|
|
|
+ ) {
|
|
|
const subjects: any = useSubjectId(SubjectEnum.SEARCH)
|
|
|
// 判断是否已有数据
|
|
|
if (!subjects.id) {
|
|
@@ -75,11 +86,15 @@ export default defineComponent({
|
|
|
//
|
|
|
const params = reactive({
|
|
|
search: (route.query.search as string) || '',
|
|
|
+ // exquisiteFlag: 1,
|
|
|
musicTagIds: route.query.tagids || '',
|
|
|
page: 1,
|
|
|
...defauleParams,
|
|
|
...tempParams
|
|
|
})
|
|
|
+ const routeType = ref<string>(
|
|
|
+ route.query.type === 'list' || type === 'list' ? 'list' : 'fine'
|
|
|
+ )
|
|
|
const data = ref<any>(null)
|
|
|
const loading = ref(false)
|
|
|
const finished = ref(false)
|
|
@@ -105,12 +120,12 @@ export default defineComponent({
|
|
|
const tempParams = {
|
|
|
...params,
|
|
|
idAndName: params.search,
|
|
|
- createBy: teacherId
|
|
|
+ createBy: teacherId,
|
|
|
+ myself: false
|
|
|
+ }
|
|
|
+ if (routeType.value === 'fine') {
|
|
|
+ tempParams.exquisiteFlag = 1
|
|
|
}
|
|
|
- // if (state.platformType === 'TEACHER') {
|
|
|
- tempParams.myself = false
|
|
|
- // }
|
|
|
-
|
|
|
try {
|
|
|
const res = await request.post(`${apiSuffix.value}/music/sheet/list`, {
|
|
|
data: tempParams
|
|
@@ -154,6 +169,33 @@ export default defineComponent({
|
|
|
FetchList()
|
|
|
subject.show = false
|
|
|
}
|
|
|
+
|
|
|
+ const tabType = ref(route.query.type === 'list' || type === 'list' ? 0 : 1)
|
|
|
+ const onTabChange = async (type: number) => {
|
|
|
+ tabType.value = type
|
|
|
+ if (type === 1) {
|
|
|
+ routeType.value = 'fine'
|
|
|
+ } else {
|
|
|
+ routeType.value = 'list'
|
|
|
+ }
|
|
|
+ params.page = 1
|
|
|
+ data.value = null
|
|
|
+ await FetchList()
|
|
|
+ }
|
|
|
+
|
|
|
+ const sticky = ref()
|
|
|
+ // const searchHeight = ref(200)
|
|
|
+ // onMounted(() => {
|
|
|
+ // nextTick(() => {
|
|
|
+ // if (sticky.value) {
|
|
|
+ // const { height } = useRect(sticky)
|
|
|
+ // const clientHeight =
|
|
|
+ // document.body.clientHeight || document.body.offsetHeight
|
|
|
+ // searchHeight.value = clientHeight - height
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+
|
|
|
const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
|
|
|
const subject = reactive({
|
|
|
show: false,
|
|
@@ -169,17 +211,33 @@ export default defineComponent({
|
|
|
|
|
|
return () => (
|
|
|
<>
|
|
|
- <List
|
|
|
- loading={loading.value}
|
|
|
- finished={finished.value}
|
|
|
- finished-text={
|
|
|
- data.value && data.value.rows.length ? '没有更多了' : ''
|
|
|
- }
|
|
|
- onLoad={FetchList}
|
|
|
- error={isError.value}
|
|
|
- >
|
|
|
- {!hideSearch && (
|
|
|
- <Sticky class={styles.sticky}>
|
|
|
+ {!hideSearch && (
|
|
|
+ <Sticky class={styles.sticky}>
|
|
|
+ <div ref={sticky}>
|
|
|
+ <ColHeader
|
|
|
+ isFixed={false}
|
|
|
+ border={false}
|
|
|
+ background="#fff"
|
|
|
+ v-slots={{
|
|
|
+ content: () => (
|
|
|
+ <div class={styles.listContainer}>
|
|
|
+ <span
|
|
|
+ onClick={() => onTabChange(1)}
|
|
|
+ class={tabType.value === 1 && styles.active}
|
|
|
+ >
|
|
|
+ 精品曲目
|
|
|
+ </span>
|
|
|
+ <span class={styles.line}></span>
|
|
|
+ <span
|
|
|
+ onClick={() => onTabChange(0)}
|
|
|
+ class={tabType.value === 0 && styles.active}
|
|
|
+ >
|
|
|
+ 热门曲目
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
<Search
|
|
|
showAction
|
|
|
onSearch={onSearch}
|
|
@@ -202,9 +260,18 @@ export default defineComponent({
|
|
|
)
|
|
|
}}
|
|
|
/>
|
|
|
- </Sticky>
|
|
|
- )}
|
|
|
-
|
|
|
+ </div>
|
|
|
+ </Sticky>
|
|
|
+ )}
|
|
|
+ <List
|
|
|
+ loading={loading.value}
|
|
|
+ finished={finished.value}
|
|
|
+ finished-text={
|
|
|
+ data.value && data.value.rows.length ? '没有更多了' : ''
|
|
|
+ }
|
|
|
+ onLoad={FetchList}
|
|
|
+ error={isError.value}
|
|
|
+ >
|
|
|
{data.value && data.value.rows.length ? (
|
|
|
<div class={styles.alumnList}>
|
|
|
<Song
|
|
@@ -215,30 +282,10 @@ export default defineComponent({
|
|
|
} else {
|
|
|
onItemClick?.(item)
|
|
|
}
|
|
|
- // if (onItemClick === noop || !onItemClick) {
|
|
|
- // musicBuy(item, () => {}, {
|
|
|
- // albumId: route.params.id,
|
|
|
- // albumName: albumDetail.value?.albumName
|
|
|
- // })
|
|
|
- // } else {
|
|
|
- // onItemClick(item)
|
|
|
- // }
|
|
|
}}
|
|
|
/>
|
|
|
</div>
|
|
|
) : (
|
|
|
- // data.value.rows.map(item => (
|
|
|
- // <Item
|
|
|
- // data={item}
|
|
|
- // onClick={() => {
|
|
|
- // if (onItemClick === noop) {
|
|
|
- // musicBuy(item)
|
|
|
- // } else {
|
|
|
- // onItemClick?.(item)
|
|
|
- // }
|
|
|
- // }}
|
|
|
- // />
|
|
|
- // ))
|
|
|
!loading.value && (
|
|
|
<ColResult
|
|
|
tips="暂无曲目"
|
|
@@ -248,6 +295,82 @@ export default defineComponent({
|
|
|
)
|
|
|
)}
|
|
|
</List>
|
|
|
+ {/* <Swipe
|
|
|
+ height={searchHeight.value}
|
|
|
+ showIndicators={false}
|
|
|
+ onChange={(name: string) => {
|
|
|
+ console.log('12')
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <SwipeItem>
|
|
|
+ <List
|
|
|
+ loading={loading.value}
|
|
|
+ finished={finished.value}
|
|
|
+ finished-text={
|
|
|
+ data.value && data.value.rows.length ? '没有更多了' : ''
|
|
|
+ }
|
|
|
+ onLoad={FetchList}
|
|
|
+ error={isError.value}
|
|
|
+ >
|
|
|
+ {data.value && data.value.rows.length ? (
|
|
|
+ <div class={styles.alumnList}>
|
|
|
+ <Song
|
|
|
+ list={data.value.rows}
|
|
|
+ onDetail={(item: any) => {
|
|
|
+ if (onItemClick === noop) {
|
|
|
+ musicBuy(item)
|
|
|
+ } else {
|
|
|
+ onItemClick?.(item)
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ !loading.value && (
|
|
|
+ <ColResult
|
|
|
+ tips="暂无曲目"
|
|
|
+ classImgSize="SMALL"
|
|
|
+ btnStatus={false}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ )}
|
|
|
+ </List>
|
|
|
+ </SwipeItem>
|
|
|
+ <SwipeItem>
|
|
|
+ <List
|
|
|
+ loading={loading.value}
|
|
|
+ finished={finished.value}
|
|
|
+ finished-text={
|
|
|
+ data.value && data.value.rows.length ? '没有更多了' : ''
|
|
|
+ }
|
|
|
+ onLoad={FetchList}
|
|
|
+ error={isError.value}
|
|
|
+ >
|
|
|
+ {data.value && data.value.rows.length ? (
|
|
|
+ <div class={styles.alumnList}>
|
|
|
+ <Song
|
|
|
+ list={data.value.rows}
|
|
|
+ onDetail={(item: any) => {
|
|
|
+ if (onItemClick === noop) {
|
|
|
+ musicBuy(item)
|
|
|
+ } else {
|
|
|
+ onItemClick?.(item)
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ !loading.value && (
|
|
|
+ <ColResult
|
|
|
+ tips="暂无曲目"
|
|
|
+ classImgSize="SMALL"
|
|
|
+ btnStatus={false}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ )}
|
|
|
+ </List>
|
|
|
+ </SwipeItem>
|
|
|
+ </Swipe> */}
|
|
|
<Popup
|
|
|
show={tagVisibility.value}
|
|
|
round
|
|
@@ -259,7 +382,9 @@ export default defineComponent({
|
|
|
>
|
|
|
<SelectTag
|
|
|
onConfirm={onComfirm}
|
|
|
- onCancel={() => {}}
|
|
|
+ onCancel={() => {
|
|
|
+ //
|
|
|
+ }}
|
|
|
defaultValue={route.query.tagids as string}
|
|
|
/>
|
|
|
</Popup>
|