orchestra-app/src/views/mine-orchestra/my-photo/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, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import styles from './index.module.less'
import iconImage from '../images/icon-photo-default.png'
export default defineComponent({
  name: 'photo-detail',
  props: {
    orchestraId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const route = useRoute()
    const router = useRouter()
    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
          },
          hideLoading: true
        })
        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.finished = true
      }
      data.loading = false
    }
    watch(
      () => props.orchestraId,
      () => {
        data.pages.page = 1
        data.list = []
        data.finished = false
        getList()
      }
    )

    // 预览图片
    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
        class={[styles.phoneDetail, !data.list.length && 'emptyRootContainer']}
        // style={{ height: '100%', minHeight: 'auto' }}
      >
        {!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',
                      query: {
                        id: item.id
                      }
                    })
                  }}
                >
                  <div
                    class={styles.gridImg}
                    style={
                      item.coverUrl
                        ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
                        : ''
                    }
                  ></div>

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