|
@@ -8,6 +8,7 @@ import { useRoute } from 'vue-router'
|
|
import styles from './index.module.less'
|
|
import styles from './index.module.less'
|
|
import iconImage from '../images/icon-photo-default.png'
|
|
import iconImage from '../images/icon-photo-default.png'
|
|
import OSticky from '@/components/o-sticky'
|
|
import OSticky from '@/components/o-sticky'
|
|
|
|
+import OFullRefresh from '@/components/o-full-refresh'
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
name: 'photo-detail',
|
|
name: 'photo-detail',
|
|
props: {
|
|
props: {
|
|
@@ -20,6 +21,7 @@ export default defineComponent({
|
|
const route = useRoute()
|
|
const route = useRoute()
|
|
console.log('🚀 ~ route', route)
|
|
console.log('🚀 ~ route', route)
|
|
const data = reactive({
|
|
const data = reactive({
|
|
|
|
+ refreshing: false,
|
|
loading: false,
|
|
loading: false,
|
|
finished: false,
|
|
finished: false,
|
|
pages: {
|
|
pages: {
|
|
@@ -30,7 +32,12 @@ export default defineComponent({
|
|
})
|
|
})
|
|
|
|
|
|
const getList = async () => {
|
|
const getList = async () => {
|
|
|
|
+ if (data.loading) return
|
|
data.loading = true
|
|
data.loading = true
|
|
|
|
+ if (data.refreshing){
|
|
|
|
+ data.list = []
|
|
|
|
+ data.pages.page = 1
|
|
|
|
+ }
|
|
try {
|
|
try {
|
|
const res = await request.post(`${state.platformApi}/orchestraPhoto/page`, {
|
|
const res = await request.post(`${state.platformApi}/orchestraPhoto/page`, {
|
|
data: {
|
|
data: {
|
|
@@ -39,13 +46,15 @@ export default defineComponent({
|
|
}
|
|
}
|
|
})
|
|
})
|
|
if (Array.isArray(res?.data?.rows)) {
|
|
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
|
|
|
|
- }
|
|
|
|
|
|
+ data.list = new Array(10).fill(res.data.rows[0]) // data.list.concat(res.data.rows)
|
|
|
|
+ data.pages.page = res.data.current + 1
|
|
|
|
+ data.finished = !res.data.next
|
|
|
|
+ } else {
|
|
|
|
+ data.finished = true
|
|
}
|
|
}
|
|
- } catch {}
|
|
|
|
|
|
+ } catch {
|
|
|
|
+ data.finished = true
|
|
|
|
+ }
|
|
data.loading = false
|
|
data.loading = false
|
|
}
|
|
}
|
|
|
|
|
|
@@ -69,39 +78,46 @@ export default defineComponent({
|
|
|
|
|
|
return () => (
|
|
return () => (
|
|
<div>
|
|
<div>
|
|
- <OSticky>
|
|
|
|
|
|
+ <OSticky
|
|
|
|
+ onGetHeight={(height: number) => {
|
|
|
|
+ document.documentElement.style.setProperty('--header-height', height + 'px')
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
<OHeader />
|
|
<OHeader />
|
|
</OSticky>
|
|
</OSticky>
|
|
- <div class={styles.phoneDetail}>
|
|
|
|
- {!!data.list.length && (
|
|
|
|
- <List
|
|
|
|
- // v-model:loading={data.loading}
|
|
|
|
- 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)}>
|
|
|
|
- <Image
|
|
|
|
- class={styles.gridImg}
|
|
|
|
- style={{ width: '100%', height: 'calc(100vw / 3)' }}
|
|
|
|
- src={item.fileUrl}
|
|
|
|
- errorIcon={iconImage}
|
|
|
|
- fit="cover"
|
|
|
|
- >
|
|
|
|
- {{
|
|
|
|
- loading: () => <Loading type="spinner" />
|
|
|
|
- }}
|
|
|
|
- </Image>
|
|
|
|
- </GridItem>
|
|
|
|
- ))}
|
|
|
|
- </Grid>
|
|
|
|
- </List>
|
|
|
|
- )}
|
|
|
|
- {!data.loading && !data.list.length && <OEmpty btnStatus={false} tips="暂无相片" />}
|
|
|
|
- </div>
|
|
|
|
|
|
+ <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>
|
|
</div>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
}
|