|
@@ -22,6 +22,7 @@ import OEmpty from '@/components/o-empty'
|
|
|
import dayjs from 'dayjs'
|
|
|
import OVideo from '@/components/o-video'
|
|
|
import { state as globalState } from '@/state'
|
|
|
+import OFullRefresh from '@/components/o-full-refresh'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'orchestra-story',
|
|
@@ -36,6 +37,7 @@ export default defineComponent({
|
|
|
isClick: false,
|
|
|
list: [] as any,
|
|
|
listState: {
|
|
|
+ reshLoading: false,
|
|
|
dataShow: true, // 判断是否有数据
|
|
|
loading: false,
|
|
|
finished: false,
|
|
@@ -101,86 +103,104 @@ export default defineComponent({
|
|
|
})
|
|
|
const swipeRef = ref([] as any)
|
|
|
return () => (
|
|
|
- <div
|
|
|
- class={[styles.orchestraStory, !state.listState.dataShow && 'emptyRootContainer']}
|
|
|
- style={{ overflowY: 'auto' }}
|
|
|
+ <OFullRefresh
|
|
|
+ v-model:modelValue={state.listState.refreshing}
|
|
|
+ onRefresh={() => {
|
|
|
+ state.params.page = 1
|
|
|
+ state.listState.refreshing = true
|
|
|
+ state.list = []
|
|
|
+ getList()
|
|
|
+ }}
|
|
|
+ style={`min-height: calc(100vh - var(--van-nav-bar-height) - var(--header-height) - ${
|
|
|
+ props.orchestraId ? '1.2rem' : ''
|
|
|
+ })`}
|
|
|
>
|
|
|
- {state.listState.dataShow ? (
|
|
|
- <List
|
|
|
- // v-model:loading={state.listState.loading}
|
|
|
- finished={state.listState.finished}
|
|
|
- finishedText=" "
|
|
|
- class={[styles.liveList]}
|
|
|
- onLoad={getList}
|
|
|
- immediateCheck={false}
|
|
|
- >
|
|
|
- <Steps direction="vertical" class={[styles.storySteps, 'storyStepContainer']}>
|
|
|
- {state.list.map((item: any, index: number) => (
|
|
|
- <Step
|
|
|
- v-slots={{
|
|
|
- 'inactive-icon': () => <Image src={iconStep} class={styles.iconInactive} />,
|
|
|
- 'active-icon': () => <Image src={iconStepCalendar} class={styles.iconActive} />
|
|
|
- }}
|
|
|
- >
|
|
|
- <div class={styles.stepTimes}>
|
|
|
- <div class={styles.stepTime}>
|
|
|
- {dayjs(item.createTime).format('YYYY年MM月DD日')}
|
|
|
+ <div
|
|
|
+ class={[styles.orchestraStory, !state.listState.dataShow && 'emptyRootContainer']}
|
|
|
+ style={{ overflowY: 'auto' }}
|
|
|
+ >
|
|
|
+ {state.listState.dataShow ? (
|
|
|
+ <List
|
|
|
+ // v-model:loading={state.listState.loading}
|
|
|
+ finished={state.listState.finished}
|
|
|
+ finishedText=" "
|
|
|
+ class={[styles.liveList]}
|
|
|
+ onLoad={getList}
|
|
|
+ immediateCheck={false}
|
|
|
+ >
|
|
|
+ <Steps direction="vertical" class={[styles.storySteps, 'storyStepContainer']}>
|
|
|
+ {state.list.map((item: any, index: number) => (
|
|
|
+ <Step
|
|
|
+ v-slots={{
|
|
|
+ 'inactive-icon': () => <Image src={iconStep} class={styles.iconInactive} />,
|
|
|
+ 'active-icon': () => (
|
|
|
+ <Image src={iconStepCalendar} class={styles.iconActive} />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div class={styles.stepTimes}>
|
|
|
+ <div class={styles.stepTime}>
|
|
|
+ {dayjs(item.createTime).format('YYYY年MM月DD日')}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <p class={[styles.content, 'van-multi-ellipsis--l2']}>{item.content}</p>
|
|
|
+ <p class={[styles.content, 'van-multi-ellipsis--l2']}>{item.content}</p>
|
|
|
|
|
|
- <Swipe ref={(el: any) => (swipeRef.value[index] = el)} class={styles.storySwipe}>
|
|
|
- {item.attachments &&
|
|
|
- item.attachments.map((child: any) => (
|
|
|
- <SwipeItem>
|
|
|
- {item.type === 'IMAGE' && (
|
|
|
- <div
|
|
|
- class={styles.swipeImg}
|
|
|
- style={
|
|
|
- child.url
|
|
|
- ? {
|
|
|
- backgroundImage: `url(${child.url})`,
|
|
|
- backgroundSize: 'cover'
|
|
|
- }
|
|
|
- : ''
|
|
|
- }
|
|
|
- ></div>
|
|
|
- )}
|
|
|
- {item.type === 'VIDEO' && (
|
|
|
- <OVideo
|
|
|
- src={child.url}
|
|
|
- height={'100%'}
|
|
|
- poster={child.coverImage}
|
|
|
- class={styles.swipeImg}
|
|
|
- ref={(el: any) => (videoRef.value[index] = el)}
|
|
|
- onPlay={() => onPlay(index)}
|
|
|
- onExitfullscreen={() => {
|
|
|
- console.group('重新resize', swipeRef.value)
|
|
|
- console.time('开始')
|
|
|
- nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- console.time('结束')
|
|
|
- console.groupEnd()
|
|
|
- // swipeRef.value?.resize()
|
|
|
- swipeRef.value.forEach((item: any) => {
|
|
|
- item.resize()
|
|
|
- })
|
|
|
- }, 600)
|
|
|
- })
|
|
|
- }}
|
|
|
- />
|
|
|
- )}
|
|
|
- </SwipeItem>
|
|
|
- ))}
|
|
|
- </Swipe>
|
|
|
- </Step>
|
|
|
- ))}
|
|
|
- </Steps>
|
|
|
- </List>
|
|
|
- ) : (
|
|
|
- <OEmpty btnStatus={false} tips="暂无事迹" style={{ paddingBottom: '30px' }} />
|
|
|
- )}
|
|
|
- </div>
|
|
|
+ <Swipe
|
|
|
+ ref={(el: any) => (swipeRef.value[index] = el)}
|
|
|
+ class={styles.storySwipe}
|
|
|
+ >
|
|
|
+ {item.attachments &&
|
|
|
+ item.attachments.map((child: any) => (
|
|
|
+ <SwipeItem>
|
|
|
+ {item.type === 'IMAGE' && (
|
|
|
+ <div
|
|
|
+ class={styles.swipeImg}
|
|
|
+ style={
|
|
|
+ child.url
|
|
|
+ ? {
|
|
|
+ backgroundImage: `url(${child.url})`,
|
|
|
+ backgroundSize: 'cover'
|
|
|
+ }
|
|
|
+ : ''
|
|
|
+ }
|
|
|
+ ></div>
|
|
|
+ )}
|
|
|
+ {item.type === 'VIDEO' && (
|
|
|
+ <OVideo
|
|
|
+ src={child.url}
|
|
|
+ height={'100%'}
|
|
|
+ poster={child.coverImage}
|
|
|
+ class={styles.swipeImg}
|
|
|
+ ref={(el: any) => (videoRef.value[index] = el)}
|
|
|
+ onPlay={() => onPlay(index)}
|
|
|
+ onExitfullscreen={() => {
|
|
|
+ // console.group('重新resize', swipeRef.value)
|
|
|
+ // console.time('开始')
|
|
|
+ nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ // console.time('结束')
|
|
|
+ // console.groupEnd()
|
|
|
+ // swipeRef.value?.resize()
|
|
|
+ swipeRef.value.forEach((item: any) => {
|
|
|
+ item.resize()
|
|
|
+ })
|
|
|
+ }, 600)
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </SwipeItem>
|
|
|
+ ))}
|
|
|
+ </Swipe>
|
|
|
+ </Step>
|
|
|
+ ))}
|
|
|
+ </Steps>
|
|
|
+ </List>
|
|
|
+ ) : (
|
|
|
+ <OEmpty btnStatus={false} tips="暂无事迹" style={{ paddingBottom: '30px' }} />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </OFullRefresh>
|
|
|
)
|
|
|
}
|
|
|
})
|