practice.tsx 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import request from '@/helpers/request'
  2. import { useAsyncState } from '@vueuse/core'
  3. import { defineComponent, ref } from 'vue'
  4. import { Cell, Skeleton, Popup, Button } from 'vant'
  5. import Item from '../list/item'
  6. import { openDefaultWebView, state } from '@/state'
  7. import styles from './index.module.less'
  8. import Song from '../component/song'
  9. import songEmpty from '@/common/images/song-empty.png'
  10. import { useRouter } from 'vue-router'
  11. import { getHttpOrigin } from '@/helpers/utils'
  12. export default defineComponent({
  13. name: 'Practice',
  14. emits: ['favorite'],
  15. setup(props, { expose, emit }) {
  16. const router = useRouter()
  17. /** 这里条数不会变动,设置固定高度避免抖动 */
  18. const prevNum = ref(0)
  19. const songStatus = ref(false)
  20. const songItem = ref<any>({})
  21. const {
  22. isLoading,
  23. state: resState,
  24. execute
  25. } = useAsyncState(
  26. (args): Promise<any> =>
  27. request.get('/music/sheet/practice', {
  28. prefix:
  29. state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student',
  30. params: {
  31. rows: args?.rows || 3
  32. }
  33. }),
  34. null
  35. )
  36. const onSure = async () => {
  37. try {
  38. await request.get('/music/sheet/practice/del/' + songItem.value.id , {
  39. prefix:
  40. state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
  41. })
  42. execute()
  43. songStatus.value = false
  44. } catch {
  45. }
  46. }
  47. expose({
  48. reload: execute
  49. })
  50. return () => {
  51. const list: any[] = resState.value?.data.rows || []
  52. if (prevNum.value === 0) {
  53. prevNum.value = list.length
  54. }
  55. return (
  56. <>
  57. {prevNum.value > 0 && (
  58. <>
  59. <Cell
  60. titleClass={styles.pTitle}
  61. title="最近练习"
  62. border={false}
  63. />
  64. <div class={styles.practice}>
  65. <Song
  66. showTitleImg
  67. list={list}
  68. onDetail={(item: any) => {
  69. if(item.play === 1) {
  70. songItem.value = item
  71. songStatus.value = true
  72. return
  73. }
  74. const url =
  75. getHttpOrigin() +
  76. location.pathname +
  77. '#/music-detail?id=' +
  78. item.id
  79. openDefaultWebView(url, () => {
  80. router.push({
  81. path: '/music-detail',
  82. query: {
  83. id: item.id
  84. }
  85. })
  86. })
  87. }}
  88. />
  89. </div>
  90. </>
  91. )}
  92. <Popup
  93. show={songStatus.value}
  94. class={styles.songEfficacy}
  95. round
  96. onClose={() => (songStatus.value = false)}
  97. >
  98. <div class={styles.songContainer}>
  99. <div class={styles.title}>该曲目已失效</div>
  100. <img src={songEmpty} />
  101. <div class={styles.btnGroup}>
  102. <Button round onClick={onSure}>我知道了</Button>
  103. </div>
  104. </div>
  105. </Popup>
  106. </>
  107. )
  108. }
  109. }
  110. })