orchestra-app/src/views/mine-orchestra/photo-list/index.tsx

import OEmpty from '@/components/o-empty'
import OHeader from '@/components/o-header'
import request from '@/helpers/request'
import { state } from '@/state'
import { Grid, GridItem, Image, List, Loading, showImagePreview } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import styles from './index.module.less'
import iconImage from '../images/icon-photo-default.png'
import OSticky from '@/components/o-sticky'
export default defineComponent({
  name: 'photo-detail',
  props: {
    orchestraId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const route = useRoute()
    const router = useRouter()
    console.log('🚀 ~ route', route)
    const data = reactive({
      loading: false,
      finished: false,
      pages: {
        page: 1,
        rows: 20
      },
      list: [] as any[]
    })

    const getList = async () => {
      data.loading = true
      try {
        const res = await request.post(`${state.platformApi}/orchestraPhotoAlbum/page`, {
          data: {
            ...data.pages,
            orchestraId: props.orchestraId || route.query.orchestraId,
            parentId: route.query.id
          }
        })
        if (Array.isArray(res?.data?.rows)) {
          data.list = data.list.concat(res.data.rows)
          data.pages.page += 1
          if (!res.data.rows.length) {
            data.finished = true
          }
        }
      } catch {}
      data.loading = false
    }

    // 预览图片
    const onShowImage = (index: number) => {
      const files = data.list.map((file: any) => {
        return file.fileUrl
      })

      showImagePreview({
        images: files,
        startPosition: index,
        closeable: true
      })
    }

    onMounted(() => {
      getList()
      document.title = (route.query.name as any) || ''
    })

    return () => (
      <div>
        <OSticky>
          <OHeader title={(route.query.name as string) || '我的乐团'} />
        </OSticky>
        <div class={styles.phoneDetail}>
          {!data.loading && !!data.list.length && (
            <List
              // v-model:loading={data.loading}
              finished={data.finished}
              finishedText="没有更多数据"
              onLoad={getList}
              immediateCheck={false}
            >
              <div class={styles.photoWrap}>
                {data.list.map((item: any, index: number) => (
                  <div
                    class={styles.photoItem}
                    onClick={() => {
                      router.push({
                        path: '/photo-list-detail',
                        query: {
                          orchestraPhotoAlbumId: item.id
                        }
                      })
                    }}
                  >
                    <Image class={styles.gridImg} src={item.coverUrl} fit="cover">
                      {{ loading: () => <Loading type="spinner" /> }}
                    </Image>

                    <div class={styles.gridName}>{item.name || ''}</div>
                    <div class={styles.gridDes}>{item.photoCount || 0}张</div>
                  </div>
                ))}
              </div>
            </List>
          )}
          {!data.loading && !data.list.length && <OEmpty btnStatus={false} tips="暂无相册" />}
        </div>
      </div>
    )
  }
})