添加加载

src/student/home/components/info-list/index.tsx

@@ -1,37 +1,86 @@
+import ColResult from '@/components/col-result'
 import request from '@/helpers/request'
-import { Cell, CellGroup, Image } from 'vant'
-import { defineComponent } from 'vue'
+import { dateFormat } from '@/helpers/utils'
+import { Cell, CellGroup, Image, List } from 'vant'
+import { defineComponent, reactive } from 'vue'
 import styles from './index.module.less'
 
 export default defineComponent({
   name: 'info-list',
   setup() {
-    const init = async () => {
+    const params = reactive({
+      platformType: 'STUDENT',
+      type: '1',
+      clientType: 'STUDENT',
+      page: 1,
+      rows: 20
+    })
+    const state = reactive({
+      list: [],
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false
+    })
+    const getList = async () => {
       try {
         const res = await request.post('/api-cms/news/page', {
-          data: {}
+          data: {
+            ...params
+          }
         })
+        state.loading = false
+        const result = res.data || {}
+        // 处理重复请求数据
+        if (state.list.length > 0 && result.pageNo === 1) {
+          return
+        }
+        state.list = state.list.concat(result.rows || [])
+        state.finished = result.pageNo >= result.totalPage
+        params.page = result.pageNo + 1
+        state.dataShow = state.list.length > 0
       } catch {
-        //
+        state.dataShow = false
+        state.finished = true
       }
     }
+
+    getList()
     return () => (
       <>
-        <CellGroup inset class={styles.cellGroup}>
-          <Cell valueClass={styles.valueContent}>
-            {{
-              icon: () => <Image src="" class={styles.infoImg} />,
-              value: () => (
-                <>
-                  <h2 class={'van-multi-ellipsis--l2'}>
-                    当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌当偌
-                  </h2>
-                  <p>10:36:49</p>
-                </>
-              )
-            }}
-          </Cell>
-        </CellGroup>
+        {state.dataShow ? (
+          <List
+            v-model:loading={state.loading}
+            finished={state.finished}
+            finishedText=" "
+            immediateCheck={false}
+            class={[styles.liveList]}
+            onLoad={getList}
+          >
+            <CellGroup inset class={styles.cellGroup}>
+              {state.list.map((item: any) => (
+                <Cell valueClass={styles.valueContent}>
+                  {{
+                    icon: () => (
+                      <Image src={item.coverImage} class={styles.infoImg} />
+                    ),
+                    value: () => (
+                      <>
+                        <h2 class={'van-multi-ellipsis--l2'}>{item.title}</h2>
+                        <p>{dateFormat(item.createTime, 'YYYY年MM月DD日')}</p>
+                      </>
+                    )
+                  }}
+                </Cell>
+              ))}
+            </CellGroup>
+          </List>
+        ) : (
+          <ColResult
+            btnStatus={false}
+            classImgSize="SMALL"
+            tips="暂无热门资讯"
+          />
+        )}
       </>
     )
   }