|
@@ -3,12 +3,13 @@ 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 { defineComponent, onMounted, reactive, TransitionGroup } from 'vue'
|
|
|
import { useRoute } from 'vue-router'
|
|
|
import styles from './index.module.less'
|
|
|
import iconImage from '../images/icon-photo-default.png'
|
|
|
import OSticky from '@/components/o-sticky'
|
|
|
import OFullRefresh from '@/components/o-full-refresh'
|
|
|
+import OImage from '@/components/o-image'
|
|
|
export default defineComponent({
|
|
|
name: 'photo-detail',
|
|
|
props: {
|
|
@@ -34,7 +35,7 @@ export default defineComponent({
|
|
|
const getList = async () => {
|
|
|
if (data.loading) return
|
|
|
data.loading = true
|
|
|
- if (data.refreshing){
|
|
|
+ if (data.refreshing) {
|
|
|
data.list = []
|
|
|
data.pages.page = 1
|
|
|
}
|
|
@@ -43,10 +44,11 @@ export default defineComponent({
|
|
|
data: {
|
|
|
...data.pages,
|
|
|
orchestraPhotoAlbumId: route.query.photoId
|
|
|
- }
|
|
|
+ },
|
|
|
+ hideLoading: data.refreshing
|
|
|
})
|
|
|
if (Array.isArray(res?.data?.rows)) {
|
|
|
- data.list = new Array(10).fill(res.data.rows[0]) // data.list.concat(res.data.rows)
|
|
|
+ data.list = data.list.concat(res.data.rows)
|
|
|
data.pages.page = res.data.current + 1
|
|
|
data.finished = !res.data.next
|
|
|
} else {
|
|
@@ -55,6 +57,7 @@ export default defineComponent({
|
|
|
} catch {
|
|
|
data.finished = true
|
|
|
}
|
|
|
+ data.refreshing = false
|
|
|
data.loading = false
|
|
|
}
|
|
|
|
|
@@ -85,38 +88,38 @@ export default defineComponent({
|
|
|
>
|
|
|
<OHeader />
|
|
|
</OSticky>
|
|
|
- <OFullRefresh modelValue={data.refreshing} onRefresh={() => {
|
|
|
- data.refreshing = true
|
|
|
- getList()
|
|
|
- }}>
|
|
|
- <div class={styles.phoneDetail}>
|
|
|
- {!!data.list.length && (
|
|
|
- <List
|
|
|
- loading={data.loading}
|
|
|
- loadingText=" "
|
|
|
- finished={data.finished}
|
|
|
- finishedText="没有更多数据"
|
|
|
- onLoad={getList}
|
|
|
- immediateCheck={false}
|
|
|
- >
|
|
|
- <Grid class={styles.detailGrid} columnNum={3} border={false} gutter={3}>
|
|
|
- {data.list.map((item: any, index: number) => (
|
|
|
- <GridItem onClick={() => onShowImage(index)}>
|
|
|
- <div
|
|
|
- class={styles.gridImg}
|
|
|
- style={{
|
|
|
- backgroundImage: item.fileUrl ? `url(${item.fileUrl})` : '',
|
|
|
- backgroundSize: item.fileUrl ? 'cover' : '',
|
|
|
- height: 'calc(100vw / 3)'
|
|
|
- }}
|
|
|
- ></div>
|
|
|
- </GridItem>
|
|
|
- ))}
|
|
|
- </Grid>
|
|
|
- </List>
|
|
|
- )}
|
|
|
- {!data.loading && !data.list.length && <OEmpty btnStatus={false} tips="暂无照片" />}
|
|
|
- </div>
|
|
|
+ <OFullRefresh
|
|
|
+ modelValue={data.refreshing}
|
|
|
+ onRefresh={() => {
|
|
|
+ data.refreshing = true
|
|
|
+ getList()
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <List
|
|
|
+ loading={data.loading}
|
|
|
+ loadingText=" "
|
|
|
+ finished={data.finished}
|
|
|
+ finishedText=" "
|
|
|
+ onLoad={getList}
|
|
|
+ immediateCheck={false}
|
|
|
+ >
|
|
|
+ <div class={styles.phoneListDetail}>
|
|
|
+ <TransitionGroup name="van-fade">
|
|
|
+ {data.list.map((item: any, index: number) => (
|
|
|
+ <div
|
|
|
+ key={`index-${index}`}
|
|
|
+ class={styles.gridItem}
|
|
|
+ onClick={() => onShowImage(index)}
|
|
|
+ >
|
|
|
+ <OImage class={styles.gridImg} src={item.fileUrl} />
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ {!data.loading && !data.list.length && (
|
|
|
+ <OEmpty key="OEmpty1" btnStatus={false} tips="暂无照片" />
|
|
|
+ )}
|
|
|
+ </TransitionGroup>
|
|
|
+ </div>
|
|
|
+ </List>
|
|
|
</OFullRefresh>
|
|
|
</div>
|
|
|
)
|