h5-colexiu/src/tenant/music/personal/practice.tsx

import request from '@/helpers/request'
import { useAsyncState } from '@vueuse/core'
import { defineComponent, ref } from 'vue'
import { Cell, Skeleton, Popup, Button } from 'vant'
import Item from '../list/item'
import { openDefaultWebView, state } from '@/state'
import styles from './index.module.less'
import Song from '../component/song'
import songEmpty from '@/common/images/song-empty.png'
import { useRouter } from 'vue-router'
import { getHttpOrigin } from '@/helpers/utils'

export default defineComponent({
  name: 'Practice',
  emits: ['favorite'],
  setup(props, { expose, emit }) {
    const router = useRouter()
    /** 这里条数不会变动，设置固定高度避免抖动 */
    const prevNum = ref(0)
    const songStatus = ref(false)
    const songItem = ref<any>({})
    const {
      isLoading,
      state: resState,
      execute
    } = useAsyncState(
      (args): Promise<any> =>
        request.get('/music/sheet/practice', {
          prefix:
            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student',
          params: {
            rows: args?.rows || 3
          }
        }),
      null
    )

    const onSure = async () => {
      try {
        await request.get('/music/sheet/practice/del/' + songItem.value.id , {
          prefix:
            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
        })
        execute()

        songStatus.value = false
      } catch {

      }
    }

    expose({
      reload: execute
    })

    return () => {
      const list: any[] = resState.value?.data.rows || []
      if (prevNum.value === 0) {
        prevNum.value = list.length
      }
      return (
        <>
          {prevNum.value > 0 && (
            <>
              <Cell
                titleClass={styles.pTitle}
                title="最近练习"
                border={false}
              />
              <div class={styles.practice}>
                <Song
                  showTitleImg
                  list={list}
                  onDetail={(item: any) => {
                    if(item.play === 1) {
                      songItem.value = item
                      songStatus.value = true
                      return
                    }
                    const url =
                      getHttpOrigin() +
                      location.pathname +
                      '#/music-detail?id=' +
                      item.id
                    openDefaultWebView(url, () => {
                      router.push({
                        path: '/music-detail',
                        query: {
                          id: item.id
                        }
                      })
                    })
                  }}
                />
              </div>
            </>
          )}

        <Popup
          show={songStatus.value}
          class={styles.songEfficacy}
          round
          onClose={() => (songStatus.value = false)}
        >
          <div class={styles.songContainer}>
            <div class={styles.title}>该曲目已失效</div>
            <img src={songEmpty} />
            <div class={styles.btnGroup}>
              <Button round onClick={onSure}>我知道了</Button>
            </div>
          </div>
        </Popup>
        </>
      )
    }
  }
})