|
|
@@ -1,13 +1,234 @@
|
|
|
-import { defineComponent } from "vue";
|
|
|
+import OEmpty from '@/components/o-empty'
|
|
|
+import { postMessage } from '@/helpers/native-message'
|
|
|
+import request from '@/helpers/request'
|
|
|
+import { state } from '@/state'
|
|
|
+import {
|
|
|
+ Cell,
|
|
|
+ CellGroup,
|
|
|
+ DropdownItem,
|
|
|
+ DropdownMenu,
|
|
|
+ Icon,
|
|
|
+ List,
|
|
|
+ Popover,
|
|
|
+ PullRefresh,
|
|
|
+ Search,
|
|
|
+ Sticky
|
|
|
+} from 'vant'
|
|
|
+import { defineComponent, reactive, ref, onMounted, nextTick, computed } from 'vue'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+import { getImage } from './images'
|
|
|
import styles from './index.module.less'
|
|
|
|
|
|
export default defineComponent({
|
|
|
- name: 'accompany-music-list',
|
|
|
- setup(props, ctx) {
|
|
|
- return () => (
|
|
|
- <div class={styles.accompany}>
|
|
|
- 曲谱
|
|
|
- </div>
|
|
|
- )
|
|
|
- },
|
|
|
-})
|
|
|
+ name: 'accompany-music-list',
|
|
|
+ props: {
|
|
|
+ musicTree: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setup(props, ctx) {
|
|
|
+ const route = useRoute()
|
|
|
+ const imgDefault = getImage('icon-music.svg')
|
|
|
+ const data = reactive({
|
|
|
+ loading: true,
|
|
|
+ finished: false,
|
|
|
+ refreshing: false,
|
|
|
+ pagenation: {
|
|
|
+ page: 1,
|
|
|
+ rows: 20
|
|
|
+ },
|
|
|
+ value1: null,
|
|
|
+ value2: null,
|
|
|
+ PopoverOpen: false,
|
|
|
+ list: [] as any,
|
|
|
+ keyword: ''
|
|
|
+ })
|
|
|
+ const option1 = computed(() => {
|
|
|
+ const v1: any = props.musicTree.find((n: any) => n.id == route.query.categorieid)
|
|
|
+ console.log('🚀 ~ v1', v1)
|
|
|
+ if (Array.isArray(v1?.musicSheetCategoriesList)) {
|
|
|
+ const list = v1.musicSheetCategoriesList.map((m: any) => {
|
|
|
+ if (!data.value1) {
|
|
|
+ data.value1 = m.id
|
|
|
+ data.value2 = null
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ text: m.name,
|
|
|
+ value: m.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return list
|
|
|
+ }
|
|
|
+ return []
|
|
|
+ })
|
|
|
+ const option2 = computed(() => {
|
|
|
+ const v1: any = props.musicTree.find((n: any) => n.id == route.query.categorieid)
|
|
|
+ // console.log('🚀 ~ v1', v1)
|
|
|
+ if (Array.isArray(v1?.musicSheetCategoriesList)) {
|
|
|
+ const v2: any = v1.musicSheetCategoriesList.find((n: any) => n.id == data.value1)
|
|
|
+ if (Array.isArray(v2?.musicSheetCategoriesList)) {
|
|
|
+ const list = [{ text: '全部', value: null }].concat(
|
|
|
+ v2.musicSheetCategoriesList.map((m: any) => {
|
|
|
+ return {
|
|
|
+ text: m.name,
|
|
|
+ value: m.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ )
|
|
|
+ return list
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return [{ text: '全部', value: null }]
|
|
|
+ })
|
|
|
+
|
|
|
+ const getList = async () => {
|
|
|
+ try {
|
|
|
+ const res: any = await request.post(state.platformApi + '/musicSheet/page', {
|
|
|
+ data: {
|
|
|
+ ...data.pagenation,
|
|
|
+ keyword: data.keyword,
|
|
|
+ musicTag: data.value2 || data.value1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (Array.isArray(res?.data?.rows)) {
|
|
|
+ data.list = [].concat(data.list, res.data.rows)
|
|
|
+ data.pagenation.page += 1
|
|
|
+ if (!res.data.rows.length) {
|
|
|
+ data.finished = true
|
|
|
+ }
|
|
|
+ if (data.refreshing) {
|
|
|
+ data.refreshing = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ data.finished = true
|
|
|
+ }
|
|
|
+ } catch (error) {}
|
|
|
+ nextTick(() => {
|
|
|
+ data.loading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const onRefresh = () => {
|
|
|
+ console.log('下拉刷新')
|
|
|
+ // 清空列表数据
|
|
|
+ data.pagenation.page = 1
|
|
|
+ data.finished = false
|
|
|
+ data.loading = false
|
|
|
+ data.list = []
|
|
|
+ // 重新加载数据
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+ // 重置搜索
|
|
|
+ const onSearch = () => {
|
|
|
+ console.log(234)
|
|
|
+ data.pagenation.page = 1
|
|
|
+ data.finished = false
|
|
|
+ data.loading = false
|
|
|
+ data.list = []
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ getList()
|
|
|
+ })
|
|
|
+ //进入云教练
|
|
|
+ const openView = (item: any) => {
|
|
|
+ const Authorization = sessionStorage.getItem('Authorization') || ''
|
|
|
+ const dev = /(localhost|192)/.test(location.host)
|
|
|
+ console.log(dev, 'https://ponline.colexiu.com')
|
|
|
+ let src = `${
|
|
|
+ dev ? `http://192.168.3.114:3000` : location.origin
|
|
|
+ }/orchestra-music-score/#/?id=${item.id}&Authorization=${Authorization}`
|
|
|
+ postMessage({
|
|
|
+ api: 'openAccompanyWebView',
|
|
|
+ content: {
|
|
|
+ url: src,
|
|
|
+ orientation: 0,
|
|
|
+ isHideTitle: true,
|
|
|
+ statusBarTextColor: false,
|
|
|
+ isOpenLight: true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return () => (
|
|
|
+ <div class={styles['accompany-music-list']}>
|
|
|
+ <Sticky>
|
|
|
+ <DropdownMenu>
|
|
|
+ <DropdownItem
|
|
|
+ v-model:modelValue={data.value1}
|
|
|
+ options={option1.value}
|
|
|
+ onChange={() => onSearch()}
|
|
|
+ ></DropdownItem>
|
|
|
+ <DropdownItem
|
|
|
+ v-model:modelValue={data.value2}
|
|
|
+ options={option2.value as any}
|
|
|
+ onChange={() => onSearch()}
|
|
|
+ ></DropdownItem>
|
|
|
+ </DropdownMenu>
|
|
|
+ <div class={styles.filter}>
|
|
|
+ <Search
|
|
|
+ placeholder="请输入搜索关键词"
|
|
|
+ background="#F8F8F8"
|
|
|
+ shape="round"
|
|
|
+ showAction={true}
|
|
|
+ v-model:modelValue={data.keyword}
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ // label: () => (
|
|
|
+ // <Popover
|
|
|
+ // v-model:show={data.PopoverOpen}
|
|
|
+ // actions={actions}
|
|
|
+ // placement="bottom-start"
|
|
|
+ // >
|
|
|
+ // {{
|
|
|
+ // reference: () => (
|
|
|
+ // <div>
|
|
|
+ // 长笛 <Icon name="arrow" />
|
|
|
+ // </div>
|
|
|
+ // )
|
|
|
+ // }}
|
|
|
+ // </Popover>
|
|
|
+ // ),
|
|
|
+ action: () => (
|
|
|
+ <div class={styles.searchBtn} onClick={() => onSearch()}>
|
|
|
+ 搜索
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Search>
|
|
|
+ </div>
|
|
|
+ </Sticky>
|
|
|
+ <PullRefresh v-model:modelValue={data.refreshing} onRefresh={onRefresh}>
|
|
|
+ <List
|
|
|
+ immediateCheck={false}
|
|
|
+ v-model:loading={data.loading}
|
|
|
+ v-model:finished={data.finished}
|
|
|
+ finishedText="没有更多了"
|
|
|
+ onLoad={() => {
|
|
|
+ getList()
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <CellGroup inset>
|
|
|
+ {data.list.map((item: any) => {
|
|
|
+ return (
|
|
|
+ <Cell
|
|
|
+ center
|
|
|
+ title={item.musicSheetName}
|
|
|
+ isLink
|
|
|
+ onClick={() => openView(item)}
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ icon: () => (
|
|
|
+ <Icon style={{ marginRight: '12px' }} size={40} name={imgDefault} />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Cell>
|
|
|
+ )
|
|
|
+ })}
|
|
|
+ </CellGroup>
|
|
|
+ </List>
|
|
|
+ </PullRefresh>
|
|
|
+ {!data.loading && !data.list.length && <OEmpty tips="空空如也" />}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|
