更新

src/views/music/songbook/list.tsx

@@ -1,50 +1,76 @@
-import { defineComponent } from 'vue'
-import { Cell, Image } from 'vant'
+import { defineComponent, reactive, ref } from 'vue'
+import { Cell, Image, List } from 'vant'
 import request from '@/helpers/request'
-import { useAsyncState } from '@vueuse/core'
-import Item from '../list/item'
+// import { useAsyncState } from '@vueuse/core'
+// import Item from '../list/item'
 import styles from './index.module.less'
 import { musicBuy } from '../music'
 import { useRoute, useRouter } from 'vue-router'
 import ColResult from '@/components/col-result'
-import { state as tempState } from '@/state'
+// import { state as tempState } from '@/state'
 import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
 import Song from '../component/song'
+import { state } from '@/state'
 
 export default defineComponent({
   name: 'Songbook',
   setup() {
     const router = useRouter()
-    const params: any = {
-      auditStatus: 'PASS',
-      myself: false
-    }
-    // 学生端才会有version
-    if (tempState.version) {
-      params.version = tempState.version || '' // 处理ios审核版本
-      params.platform =
-        tempState.platformType === 'STUDENT' ? 'ios-student' : 'ios-teacher'
+    const tempParams: any = {}
+    if (state.version) {
+      tempParams.version = state.version || '' // 处理ios审核版本
+      tempParams.platform =
+        state.platformType === 'STUDENT' ? 'ios-student' : 'ios-teacher'
     }
-    console.log('music-list')
+    // 判断是否在搜索页面用过
     const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
     if (getSubject) {
-      params.subjectIds = getSubject.id
+      tempParams.subjectIds = getSubject.id
     }
+    const params: any = reactive({
+      auditStatus: 'PASS',
+      myself: false,
+      page: 1,
+      ...tempParams
+    })
+    const data = ref<any>(null)
+    const loading = ref(false)
+    const finished = ref(false)
+    const isError = ref(false)
 
-    const apiSuffix =
-      tempState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
-    const { isLoading, state } = useAsyncState(
-      request.post(`${apiSuffix}/music/sheet/list`, {
-        data: {
-          ...params
+    const FetchList = async () => {
+      if (loading.value) {
+        return
+      }
+      loading.value = true
+      isError.value = false
+      const tempParams = {
+        ...params
+      }
+
+      try {
+        const res = await request.post(
+          `${state.platformApi}/music/sheet/list`,
+          {
+            data: tempParams
+          }
+        )
+        if (data.value) {
+          const result = (data.value?.rows || []).concat(res.data.rows || [])
+          data.value.rows = result
         }
-      }),
-      null
-    )
+        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
+    }
 
-    return () =>
-      state.value && state.value.data.rows.length ? (
-        <>
+    return () => (
+      <>
+        {data.value && data.value.rows.length > 0 && (
           <Cell
             class={styles.title}
             title="曲谱"
@@ -53,24 +79,22 @@ export default defineComponent({
             value="更多"
             border={false}
           />
-          <div class={styles.listContainer}>
-            <Song
-              list={state.value.data.rows}
-              onDetail={(item: any) => {
-                musicBuy(item, (path: any) => {
-                  router.push({
-                    path,
-                    query: {
-                      orderType: 'MUSIC'
-                    }
-                  })
-                })
-              }}
-            />
-            {/* {state.value.data.rows.map(item => (
-              <Item
-                data={item}
-                onClick={(item: any) => {
+        )}
+
+        <List
+          loading={loading.value}
+          finished={finished.value}
+          finished-text={
+            data.value && data.value.rows.length ? '没有更多了' : ''
+          }
+          onLoad={FetchList}
+          error={isError.value}
+        >
+          {data.value && data.value.rows.length ? (
+            <div class={styles.listContainer}>
+              <Song
+                list={data.value.rows}
+                onDetail={(item: any) => {
                   musicBuy(item, (path: any) => {
                     router.push({
                       path,
@@ -81,13 +105,18 @@ export default defineComponent({
                   })
                 }}
               />
-            ))} */}
-          </div>
-        </>
-      ) : (
-        !isLoading.value && (
-          <ColResult tips="暂无曲谱" classImgSize="SMALL" btnStatus={false} />
-        )
-      )
+            </div>
+          ) : (
+            !loading.value && (
+              <ColResult
+                tips="暂无曲目"
+                classImgSize="SMALL"
+                btnStatus={false}
+              />
+            )
+          )}
+        </List>
+      </>
+    )
   }
 })