orchestra-app/src/views/mine-orchestra/orchestra-deeds/index.tsx

import OHeader from '@/components/o-header'
import {
  Cell,
  CellGroup,
  Icon,
  Image,
  List,
  Picker,
  Popup,
  Step,
  Steps,
  Swipe,
  SwipeItem
} from 'vant'
import { defineComponent, onMounted, reactive, ref, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import styles from './index.module.less'
import iconStep from './images/icon-step.png'
import iconStepCalendar from './images/icon-step-calendar.png'
import request from '@/helpers/request'
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',
  props: {
    orchestraId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      isClick: false,
      list: [] as any,
      videoWidth: '100%',
      listState: {
        reshLoading: false,
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false,
        refreshing: false,
        height: 0 // 页面头部高度，为了处理下拉刷新用的
      },
      params: {
        type: null,
        page: 1,
        rows: 20
      }
    })

    const getList = async () => {
      try {
        if (state.isClick) return
        state.isClick = true
        const res = await request.post(`${globalState.platformApi}/orchestraStory/page`, {
          data: {
            orchestraId: props.orchestraId
          },
          hideLoading: true
        })
        state.listState.loading = false
        state.listState.refreshing = false
        const result = res.data || {}
        // 处理重复请求数据
        if (state.list.length > 0 && result.current === 1) {
          return
        }
        state.list = state.list.concat(result.rows || [])
        state.listState.finished = result.current >= result.pages
        state.params.page = result.current + 1
        state.listState.dataShow = state.list.length > 0
        state.isClick = false
      } catch {
        state.listState.dataShow = false
        state.listState.finished = true
        state.listState.refreshing = false
        state.isClick = false
      }
    }
    watch(
      () => props.orchestraId,
      () => {
        state.params.page = 1
        state.list = []
        state.listState.finished = false
        getList()
      }
    )

    const videoRef: any = ref([])
    const onPlay = (index: any) => {
      videoRef.value.forEach((item: any, child: any) => {
        if (child !== index) {
          item.onStop()
        }
      })
    }
    const swipeRef = ref([] as any)
    onMounted(async () => {
      await getList()

      nextTick(() => {
        // 为了处理在安卓手机上面关闭全屏之后样式会有问题
        const width = document.querySelector('.van-step__title')?.clientWidth
        state.videoWidth = width ? width + 'px' : '100%'
      })
    })
    return () => (
      // <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' : ''
      //   })`}
      // >
      <div
        class={[styles.orchestraStory]}
        style={{ overflowY: 'auto', height: !state.listState.dataShow ? '100%' : '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>
                  <p class={[styles.content, 'van-multi-ellipsis--l2']}>{item.content}</p>
                  <Swipe
                    ref={(el: any) => (swipeRef.value[index] = el)}
                    class={styles.storySwipe}
                    touchable={item.type === 'VIDEO' ? false : true}
                  >
                    {item.attachments &&
                      item.attachments.map((child: any, index: number) => (
                        <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%'}
                              style={{ width: state.videoWidth }}
                              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>
    )
  }
})