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

import { defineComponent, reactive, ref, watch } from 'vue'
import { Cell, CellGroup, Image, List } from 'vant'
import request from '@/helpers/request'
import { useRoute, useRouter } from 'vue-router'
import ColResult from '@/components/col-result'
import { state } from '@/state'
import styles from './index.module.less'

export default defineComponent({
  name: 'tenant-album',
  // props: {},
  setup() {
    const router = useRouter()
    const params = reactive({
      page: 1,
      rows: 20
    })
    const rows = ref<any>([])
    const data = ref<any>(null)
    const loading = ref(false)
    const finished = ref(false)
    const isError = ref(false)

    const FetchList = async () => {
      if (loading.value) {
        return
      }
      loading.value = true
      isError.value = false
      try {
        const res = await request.post('/userTenantAlbumRecord/page', {
          prefix:
            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student',
          data: params
        })
        rows.value = [...rows.value, ...res.data.rows]
        data.value = res.data
        console.log(data.value)
        params.page = res.data.pageNo + 1
        finished.value = res.data.pageNo >= res.data.totalPage
      } catch (error) {
        isError.value = true
      }
      loading.value = false
    }

    return () => {
      return (
        <List
          loading={loading.value}
          finished={finished.value}
          finished-text={rows.value.length ? ' ' : ''}
          onLoad={FetchList}
          error={isError.value}
        >
          {rows.value.length
            ? rows.value.map((item: any) => (
                <CellGroup class={styles.tennatCellGroup} border={false}>
                  <Cell isLink>
                    {{
                      icon: () => (
                        <img src={item.coverImg} class={styles.tenantLogo} />
                      ),
                      title: () => (
                        <div class={styles.tenantName}>{item.tenantName}</div>
                      )
                    }}
                  </Cell>
                  <Cell>
                    {{
                      icon: () => <Image class={styles.tenantCoverImg} />,
                      title: () => (
                        <div class={styles.tenantContent}>
                          <h2>{item.name}</h2>
                          <p class="van-multi-ellipsis--l2">{item.describe}</p>
                        </div>
                      )
                    }}
                  </Cell>
                </CellGroup>
              ))
            : !loading.value && (
                <ColResult
                  tips="暂无训练教程"
                  classImgSize="SMALL"
                  btnStatus={false}
                />
              )}
        </List>
      )
    }
  }
})