h5-colexiu/src/views/music/album/index.tsx

import { defineComponent, reactive, ref } from 'vue'
import { Sticky, List, Popup, Icon, Tabs, Tab } from 'vant'
import Search from '@/components/col-search'
import request from '@/helpers/request'
import Item from './item'
import SelectTag from '../search/select-tag'
import { useRoute, useRouter } from 'vue-router'
import ColResult from '@/components/col-result'
import styles from './index.module.less'
import { state as baseState } from '@/state'
import SelectSubject from '../search/select-subject'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
import MusicGrid from '../component/music-grid'
import { useAsyncState } from '@vueuse/core'
import ColHeader from '@/components/col-header'
import TheSticky from '@/components/the-sticky'

export default defineComponent({
  name: 'Album',
  props: {
    hideSearch: {
      type: Boolean,
      default: false
    },
    defauleParams: {
      type: Object,
      default: () => ({})
    }
  },
  setup({ hideSearch, defauleParams }, { expose }) {
    const { isLoading, state } = useAsyncState(
      request(baseState.platformApi + '/MusicTag/tree', {
        params: {
          type: 'ALBUM'
        }
      }),
      null
    )

    const teacherDetaultSubject = ref({
      id: '',
      name: ''
    })
    if (baseState.platformType === 'TEACHER') {
      const users = baseState.user.data
      teacherDetaultSubject.value = {
        name: users.defaultSubjectName || '全部声部',
        id: users.defaultSubject || ''
      }
    } else {
      const subjects: any = useSubjectId(SubjectEnum.SEARCH)
      // 判断是否已有数据
      if (!subjects.id) {
        const users = baseState.user.data
        const subjectId = users.subjectId
          ? Number(users.subjectId.split(',')[0])
          : ''
        const subjectName = users.subjectName
          ? users.subjectName.split(',')[0]
          : ''
        if (subjectId) {
          useSubjectId(
            SubjectEnum.SEARCH,
            JSON.stringify({
              id: subjectId,
              name: subjectName
            }),
            'set'
          )
        }
      }
    }

    const router = useRouter()
    const route = useRoute()
    const tempParams: any = {}
    if (baseState.version) {
      tempParams.version = baseState.version || '' // 处理ios审核版本
      tempParams.platform =
        baseState.platformType === 'STUDENT' ? 'ios-student' : 'ios-teacher'
    }
    tempParams.myself = false
    if (!hideSearch) {
      if (baseState.platformType === 'TEACHER') {
        tempParams.subjectIds = teacherDetaultSubject.value.id
      } else {
        const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
        tempParams.subjectIds = getSubject.id
      }
    }
    const params = reactive({
      search: (route.query.search as string) || '',
      albumTagIds: route.query.tagids || '',
      page: 1,
      ...defauleParams,
      ...tempParams
    })
    const data = ref<any>(null)
    const loading = ref(false)
    const finished = ref(false)
    const isError = ref(false)
    const tagVisibility = ref(false)

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

    const FetchList = async () => {
      if (loading.value) {
        return
      }
      loading.value = true
      isError.value = false
      try {
        const res = await request.post('/music/album/list', {
          prefix:
            baseState.platformType === 'TEACHER'
              ? '/api-teacher'
              : '/api-student',
          data: {
            ...params,
            idAndName: params.search
          }
        })
        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 setDefaultSubject = async (subjectId: any) => {
      try {
        await request.post('/api-teacher/teacher/defaultSubject', {
          params: {
            subjectId
          }
        })
      } catch {
        //
      }
    }

    const onComfirm = tags => {
      const d = Object.values(tags).flat().filter(Boolean).join(',')
      params.albumTagIds = d
      params.page = 1
      data.value = null
      FetchList()
      tagVisibility.value = false
    }

    const onComfirmSubject = item => {
      params.page = 1
      params.subjectIds = item.id

      data.value = null
      if (baseState.platformType === 'TEACHER') {
        teacherDetaultSubject.value = {
          name: item.name,
          id: item.id
        }
        setDefaultSubject(item.id)
      } else {
        subject.id = item.id
        subject.name = item.name
        useSubjectId(
          SubjectEnum.SEARCH,
          JSON.stringify({
            id: item.id,
            name: item.name
          }),
          'set'
        )
      }
      FetchList()
      subject.show = false
    }

    expose({
      onSearch,
      onComfirm,
      onComfirmSubject
    })

    const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
    const subject = reactive({
      show: false,
      name: getSubject.name || '全部声部',
      id: getSubject.id || ''
    })

    return () => {
      const tagList = ((state.value && state.value.data) as any) || []
      return (
        <>
          <List
            loading={loading.value}
            finished={finished.value}
            finished-text={
              data.value && data.value.rows.length ? '没有更多了' : ''
            }
            onLoad={FetchList}
            error={isError.value}
          >
            {!hideSearch && (
              <TheSticky class={styles.sticky}>
                <ColHeader border={false} />
                <Search
                  modelValue={params.search}
                  onSearch={onSearch}
                  placeholder="请输入专辑名称 "
                  v-slots={{
                    left: () => (
                      <div
                        class={styles.label}
                        onClick={() => (subject.show = true)}
                      >
                        {baseState.platformType === 'TEACHER'
                          ? teacherDetaultSubject.value.name
                          : subject.name}
                        <Icon
                          classPrefix="iconfont"
                          name="down"
                          size={12}
                          color="#333"
                        />
                      </div>
                    )
                  }}
                />
                <Tabs
                  shrink
                  class={styles.tagTabs}
                  lineHeight={0}
                  onClick-tab={(obj: any) => {
                    params.albumTagIds = obj.name
                    data.value = null
                    params.page = 1
                    FetchList()
                  }}
                >
                  <Tab title="全部" name=""></Tab>
                  {tagList.map((tag: any) => (
                    <Tab title={tag.name} name={tag.id}></Tab>
                  ))}
                </Tabs>
              </TheSticky>
            )}
            {data.value && data.value.rows.length ? (
              <div class={styles.musicGrid}>
                <MusicGrid
                  list={data.value.rows}
                  onGoto={(n: any) => {
                    router.push({
                      name: 'music-album-detail',
                      params: {
                        id: n.id
                      }
                    })
                  }}
                />
              </div>
            ) : (
              // data.value.rows.map(item => <Item data={item} />)
              !loading.value && (
                <ColResult
                  tips="暂无专辑"
                  classImgSize="SMALL"
                  btnStatus={false}
                />
              )
            )}
          </List>

          {/* <Popup
            show={tagVisibility.value}
            round
            closeable
            position="bottom"
            style={{ height: '60%' }}
            teleport="body"
            onUpdate:show={val => (tagVisibility.value = val)}
          >
            <SelectTag
              defaultValue={route.query.tagids as string}
              onConfirm={onComfirm}
              onCancel={() => {}}
            />
          </Popup> */}
          <Popup
            show={subject.show}
            position="bottom"
            round
            closeable
            safe-area-inset-bottom
            onClose={() => (subject.show = false)}
            onClosed={() => (subject.show = false)}
          >
            <SelectSubject
              type="ALBUM"
              searchParams={
                baseState.platformType === 'TEACHER'
                  ? teacherDetaultSubject.value
                  : subject
              }
              onComfirm={onComfirmSubject}
            />
          </Popup>
        </>
      )
    }
  }
})