orchestra-app/src/views/accompany/music-list.tsx

import OEmpty from '@/components/o-empty'
import { postMessage } from '@/helpers/native-message'
import request from '@/helpers/request'
import { browser } from '@/helpers/utils'
import { state } from '@/state'
import { useRect } from '@vant/use'
import {
  Cell,
  CellGroup,
  DropdownItem,
  DropdownMenu,
  Icon,
  List,
  Popover,
  PullRefresh,
  Search,
  Sticky
} from 'vant'
import { defineComponent, reactive, ref, onMounted, nextTick, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getImage } from './images'
import styles from './index.module.less'

export default defineComponent({
  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
        }
      })
    }
    const headeRef = ref()
    const headerData = reactive({
        height: 0
    })
    onMounted(() => {
        const rect = useRect(headeRef)
        headerData.height = rect.height
    })
    return () => (
      <div class={styles['accompany-music-list']}>
        <div class={styles.heade} ref={headeRef}>
          <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>
        </div>
        <Cell
          center
          title="无别（【冥加】会员,测试"
          isLink
          onClick={() => {
            const origin = /(localhost|192)/.test(location.host)
              ? 'http://192.168.3.114:3000'
              : location.origin
            let src = `${origin}/orchestra-music-score/?id=1603573996544364546&Authorization=${sessionStorage.getItem(
              'Authorization'
            )}`
            if (browser().isApp) {
              postMessage({
                api: 'openAccompanyWebView',
                content: {
                  url: src,
                  orientation: 0,
                  isHideTitle: true,
                  statusBarTextColor: false,
                  isOpenLight: true
                }
              })
            } else {
                location.href = src
            }
          }}
        ></Cell>
        <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>
    )
  }
})