h5-colexiu/src/tenant/music/train-list/index.tsx

import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  ref
} from 'vue'
import {
  List,
  DropdownMenu,
  DropdownItem,
  Tag,
  Image,
  Button,
  Cell,
  Radio,
  RadioGroup
} from 'vant'
import { postMessage } from '@/helpers/native-message'
import Search from '@/components/col-search'
import request from '@/helpers/request'
import { useRoute, useRouter } from 'vue-router'
import ColResult from '@/components/col-result'
import styles from './index.module.less'
import { getRandomKey } from '../music'
import { openDefaultWebView, state as baseState, state } from '@/state'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
import Song from '../component/song'
import ColHeader from '@/components/col-header'
import bgImg from '../../images/bg.png'
import TheSticky from '@/components/the-sticky'
import dayjs from 'dayjs'
import { browser, getHttpOrigin } from '@/helpers/utils'

const noop = () => {
  //
}

export default defineComponent({
  name: 'MusicList',
  props: {
    teacherId: {
      type: String || Number,
      default: ''
    },
    myself: {
      type: Boolean,
      default: false
    }
  },
  setup({ onItemClick }, { expose }) {
    localStorage.setItem('behaviorId', getRandomKey())
    const route = useRoute()
    const router = useRouter()
    //

    const subjectType = route.query.subjectType || ''
    let title = ''
    if (subjectType === 'SUBJECT') {
      title = '基础云练'
    } else if (subjectType === 'MUSIC') {
      title = '独奏云练'
    } else if (subjectType === 'ENSEMBLE') {
      title = '合奏云练'
    }
    const params = reactive({
      keyword: (route.query.search as string) || '',
      subjectType: subjectType,
      page: 1,
      subjectId: null,
      albumId: route.query.albumId,
      albumName: '',
      level: '',
      type: '',
      title: title
    })
    const data = ref<any>(null)
    const loading = ref(false)
    const finished = ref(false)
    const isError = ref(false)
    const searchObj = ref<any>({})
    const searchRef = ref()
    const albumRef = ref()
    const albumRecord = ref<any>([])

    const apiSuffix = ref(
      baseState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
    )

    const onSearch = (value: string) => {
      params.page = 1
      params.keyword = value
      data.value = null
      FetchList()
    }

    const FetchList = async () => {
      loading.value = true
      isError.value = false
      const tempParams = {
        ...params
      }

      try {
        const res = await request.post(
          `${apiSuffix.value}/tenantAlbumMusic/page`,
          {
            data: tempParams
          }
        )
        if (data.value?.rows?.length > 0 && res.data.pageNo === 1) {
          return
        }
        if (data.value) {
          const result = (data.value?.rows || []).concat(res.data.rows || [])
          data.value.rows = result
        }
        data.value = data.value || res.data
        params.page = res.data.pageNo + 1
        finished.value = res.data.pageNo >= res.data.totalPage
      } catch (error) {
        isError.value = true
      }
      loading.value = false
    }

    const getSelectCondition = async () => {
      const { data } = await request.post(
        `${apiSuffix.value}/tenantAlbumMusic/selectCondition`,
        {
          data: {
            subjectType: params.subjectType,
            tenantAlbumId: params.albumId
          }
        }
      )
      searchObj.value = data || {}
    }

    const getAlbumRecordPage = async () => {
      isError.value = false
      try {
        const { data } = await request.post('/userTenantAlbumRecord/list', {
          prefix:
            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student',
          data: {
            page: 1,
            rows: 999
          }
        })
        console.log(data)
        albumRecord.value = data || []
        if (albumRecord.value.length > 0) {
          const albumCatchType = localStorage.getItem(
            'albumCatch' + subjectType
          )
          if (albumCatchType) {
            const item = albumRecord.value.find(
              (item: any) => item.tenantAlbumId == albumCatchType
            )
            if (item) {
              params.albumId = item.tenantAlbumId
              params.albumName = item.tenantAlbumName
            } else {
              params.albumId = albumRecord.value[0].tenantAlbumId
              params.albumName = albumRecord.value[0].tenantAlbumName
            }
          } else {
            params.albumId = albumRecord.value[0].tenantAlbumId
            params.albumName = albumRecord.value[0].tenantAlbumName
          }
        }
      } catch (error) {
        isError.value = true
      }
    }

    const isSearchStatus = computed(() => {
      const obj = searchObj.value
      let status = false
      if (obj.subjects && obj.subjects.length > 0) {
        status = true
      }
      if (obj.levelList && obj.levelList.length > 0) {
        status = true
      }
      if (obj.typeList && obj.typeList.length > 0) {
        status = true
      }
      return status
    })

    onMounted(async () => {
      // SUBJECT: '基础云练',
      // MUSIC: '独奏云练',
      // ENSEMBLE: '合奏云练'
      loading.value = true
      //await getAlbumRecordPage()
      await getSelectCondition()
      if (params.albumId) {
        await FetchList()
      } else {
        loading.value = false
      }
    })

    return () => {
      return (
        <>
          <div class={styles.sticky}>
            <TheSticky>
              <ColHeader
                hideHeader={false}
                background="transparent"
                isFixed={false}
                border={false}
                title={title}
                color="#131415"
              >
                {/* {{
                  right: () =>
                    albumRecord.value.length > 1 &&
                    params.albumId && (
                      <DropdownMenu class={styles.albumSearchSection}>
                        <DropdownItem
                          titleClass={styles.albumSearchTitle}
                          title={params.albumName}
                          ref={albumRef}
                        >
                          <div
                            class={styles.albumSearchResult}
                            style={{ maxHeight: '45vh', overflowY: 'auto' }}
                          >
                            {albumRecord.value.map((item: any) => (
                              <Cell
                                border={false}
                                class={[
                                  styles.albumSearchCell,
                                  item.tenantAlbumId === params.albumId &&
                                    styles.albumSearchCellActive
                                ]}
                                center
                                onClick={async () => {
                                  localStorage.setItem(
                                    'albumCatch' + subjectType,
                                    item.tenantAlbumId
                                  )
                                  params.albumId = item.tenantAlbumId
                                  params.albumName = item.tenantAlbumName
                                  params.subjectId = null
                                  params.level = ''
                                  params.type = ''
                                  await getSelectCondition()

                                  params.page = 1
                                  data.value = null
                                  await FetchList()

                                  albumRef.value?.toggle()
                                }}
                              >
                                {{
                                  icon: () => (
                                    <Image
                                      src={item.tenantAlbumCoverImg}
                                      class={styles.albumLogo}
                                    />
                                  ),
                                  title: () => (
                                    <div class={styles.albumContent}>
                                      <h2>{item.tenantAlbumName}</h2>
                                      <p>
                                        到期时间：
                                        {dayjs(item.endTime).format(
                                          'YYYY-MM-DD'
                                        )}
                                      </p>
                                    </div>
                                  ),
                                  'right-icon': () => (
                                    <div class={styles.iconSelect}></div>
                                  )
                                }}
                              </Cell>
                            ))}
                          </div>
                        </DropdownItem>
                      </DropdownMenu>
                    )
                }} */}
              </ColHeader>
              <Search
                placeholder={'请输入曲谱关键词'}
                class={styles.search}
                modelValue={params.keyword}
                onInput={(val: any) => {
                  params.keyword = val
                }}
                onSearch={onSearch}
                type="tenant"
                background="transparent"
                inputBackground="transparent"
                // leftIcon={iconSearch}
                v-slots={{
                  left: () =>
                    isSearchStatus.value && (
                      <DropdownMenu>
                        <DropdownItem
                          class="searchOther"
                          // teleport="body"
                          titleClass={
                            params.subjectId || params.type || params.level
                              ? styles.titleActive
                              : ''
                          }
                          title="筛选"
                          ref={searchRef}
                        >
                          <div
                            class={styles.searchResult}
                            style={{ maxHeight: '45vh', overflowY: 'auto' }}
                          >
                            {searchObj.value.subjects &&
                              searchObj.value.subjects.length > 0 && (
                                <>
                                  <div class={styles.searchTitle}>声部</div>
                                  <div
                                    class={[
                                      styles['radio-group'],
                                      styles.radio,
                                      styles['organ-radio']
                                    ]}
                                  >
                                    {searchObj.value.subjects.map(
                                      (subject: any) => {
                                        const isActive =
                                          subject.id === params.subjectId
                                        const type = isActive
                                          ? 'primary'
                                          : 'default'
                                        return (
                                          <Tag
                                            size="large"
                                            plain={isActive}
                                            type={type}
                                            round
                                            onClick={() => {
                                              params.subjectId = subject.id
                                            }}
                                          >
                                            {subject.name}
                                          </Tag>
                                        )
                                      }
                                    )}
                                  </div>
                                </>
                              )}
                            {searchObj.value.levelList &&
                              searchObj.value.levelList.length > 0 && (
                                <>
                                  <div class={styles.searchTitle}>级别</div>
                                  <div
                                    class={[
                                      styles['radio-group'],
                                      styles.radio,
                                      styles['organ-radio']
                                    ]}
                                  >
                                    {searchObj.value.levelList.map(
                                      (subject: any) => {
                                        const isActive =
                                          subject.id === params.level
                                        const type = isActive
                                          ? 'primary'
                                          : 'default'
                                        return (
                                          <Tag
                                            size="large"
                                            plain={isActive}
                                            type={type}
                                            round
                                            onClick={() => {
                                              params.level = subject.id
                                            }}
                                          >
                                            {subject.value}
                                          </Tag>
                                        )
                                      }
                                    )}
                                  </div>
                                </>
                              )}
                            {searchObj.value.typeList &&
                              searchObj.value.typeList.length > 0 && (
                                <>
                                  <div class={styles.searchTitle}>类型</div>
                                  <div
                                    class={[
                                      styles['radio-group'],
                                      styles.radio,
                                      styles['organ-radio']
                                    ]}
                                  >
                                    {searchObj.value.typeList.map(
                                      (subject: any) => {
                                        const isActive =
                                          subject.id === params.type
                                        const type = isActive
                                          ? 'primary'
                                          : 'default'
                                        return (
                                          <Tag
                                            size="large"
                                            plain={isActive}
                                            type={type}
                                            round
                                            onClick={() => {
                                              params.type = subject.id
                                            }}
                                          >
                                            {subject.value}
                                          </Tag>
                                        )
                                      }
                                    )}
                                  </div>
                                </>
                              )}
                          </div>

                          <div class={['btnGroup', 'btnMore']}>
                            <Button
                              class={styles.resetting}
                              type="primary"
                              plain
                              round
                              onClick={() => {
                                params.subjectId = null
                                params.level = ''
                                params.type = ''
                              }}
                            >
                              重 置
                            </Button>

                            <Button
                              class={styles.confirm}
                              type="primary"
                              color="linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%)"
                              round
                              block
                              onClick={() => {
                                params.page = 1
                                data.value = null
                                FetchList()
                                searchRef.value?.toggle()
                              }}
                            >
                              确 认
                            </Button>
                          </div>
                        </DropdownItem>
                      </DropdownMenu>
                    )
                }}
              />
            </TheSticky>
            <img class={styles.bgImg} src={bgImg} />
          </div>

          <div class={styles.alumnList}>
            <List
              loading={loading.value}
              finished={finished.value}
              finished-text={data.value && data.value.rows.length ? '' : ''}
              onLoad={FetchList}
              error={isError.value}
              immediateCheck={false}
            >
              {data.value && data.value.rows.length ? (
                <Song
                  showTitleImg
                  list={data.value.rows}
                  onDetail={(item: any) => {
                    if (browser().isApp) {
                      const url = `${getHttpOrigin()}/tenant/#/music-detail?id=${item.id}&subjectType=${subjectType}&tenantAlbumId=${item.tenantAlbumId}`
                      postMessage({
                        api: 'openWebView',
                        content: {
                          url,
                          orientation: 1,
                          isHideTitle: false
                        }
                      })
                    } else {
                      router.push({
                        path: '/music-detail',
                        query: {
                          subjectType,
                          id: item.id,
                          tenantAlbumId: item.tenantAlbumId
                        }
                      })
                    }
                  }}
                />
              ) : (
                !loading.value && (
                  <ColResult
                    tips="暂无曲目"
                    classImgSize="CERT"
                    btnStatus={false}
                  />
                )
              )}
            </List>
          </div>
        </>
      )
    }
  }
})