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

import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import { state } from '@/state'
import { Button, Cell, CellGroup, Picker, Popup, Sticky, Tab, Tabs } from 'vant'
import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
import styles from './index.module.less'
import iconOrchestra from './images/icon-or.png'
import MyClass from './my-class'
import OEmpty from '@/components/o-empty'
import OFullRefresh from '@/components/o-full-refresh'
import OrchestraDeeds from './orchestra-deeds'
import MyPhoto from './my-photo'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  name: 'my-orchestra',
  setup(props, ctx) {
    const route = useRoute()
    const router = useRouter()
    const tabActive = ref<'course' | 'photo' | 'deeds'>((route.query as any)?.tab || 'course')
    const data = reactive({
      orchestraList: [] as any[],
      loading: true,
      reshLoading: false,
      dataShow: true
    })
    const modelData = reactive({
      orchestra: {} as any,
      orchestraStatus: false
    })
    /** 学生获取我的乐团 */
    const getStudentOrchestras = () => {
      data.loading = true
      request
        .post(`${state.platformApi}/orchestra/studentOrchestra`, {
          // hideLoading: data.reshLoading
        })
        .then((res: any) => {
          if (Array.isArray(res?.data)) {
            data.orchestraList = res.data.map((n: any) => {
              return {
                ...n,
                name: n.name || n.orchestraName || '',
                id: n.id || n.orchestraId || ''
              }
            })
            modelData.orchestra = data.orchestraList[0] || {}
          }
        })
        .finally(() => {
          setTimeout(() => {
            data.loading = false
            data.reshLoading = false
          }, 300)
        })
    }
    const getTeacherOrchestras = async () => {
      data.loading = true
      request
        .post(`${state.platformApi}/orchestra/teacherOrchestra`, {
          // hideLoading: data.reshLoading
        })
        .then((res: any) => {
          if (Array.isArray(res?.data)) {
            data.orchestraList = res.data.map((n: any) => {
              return {
                ...n,
                name: n.name || n.orchestraName || '',
                id: n.id || n.orchestraId || ''
              }
            })
            modelData.orchestra = data.orchestraList[0] || {}
          }
        })
        .finally(() => {
          setTimeout(() => {
            data.loading = false
            data.reshLoading = false
          }, 300)
        })
    }
    const getData = () => {
      if (state.platformType === 'STUDENT') {
        getStudentOrchestras()
      } else if (state.platformType === 'TEACHER') {
        getTeacherOrchestras()
      }
    }
    onMounted(() => {
      document.documentElement.style.setProperty('--footer-height', '0px')
      getData()
    })

    return () => (
      <div class={[styles.mineOrchestra]}>
        <OSticky
          onGetHeight={(height: number) => {
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader title="我的乐团" />
        </OSticky>
        {!!data.orchestraList.length && (
          <CellGroup inset>
            <Cell
              class={styles.select}
              center
              isLink
              onClick={() => (modelData.orchestraStatus = true)}
            >
              {{
                icon: () => <img class={styles.icon} src={iconOrchestra} />,
                title: () => <div class="van-ellipsis">{modelData.orchestra.name}</div>
              }}
            </Cell>
          </CellGroup>
        )}
        {/* <OFullRefresh
          v-model:modelValue={data.loading}
          onRefresh={() => {
            data.reshLoading = true
            data.loading = true
            setTimeout(() => {
              data.reshLoading = false
              data.loading = false
            }, 500)
          }}
          style={`min-height: calc(100vh - var(--van-nav-bar-height) - var(--header-height)  - ${
            data.orchestraList.length ? '1.2rem' : ''
          })`}
        > */}
        {!!data.orchestraList.length && (
          <>
            <Tabs
              v-model:active={tabActive.value}
              class={styles.tabs}
              lazyRender={true}
              background="transparent"
              animated
              swipeable
              lineWidth={16}
              lineHeight={4}
            >
              <Tab name="course" title="我的班级">
                <OFullRefresh
                  v-model:modelValue={data.reshLoading}
                  onRefresh={() => {
                    data.reshLoading = true
                    getData()
                  }}
                  style={`min-height: calc(100vh - var(--van-nav-bar-height) - var(--header-height)  - ${
                    data.orchestraList.length ? '1.2rem' : ''
                  })`}
                >
                  <div class={styles.content}>
                    <MyClass
                      orchestraName={modelData.orchestra?.name || ''}
                      list={modelData.orchestra?.classGroupIdList || []}
                      orchestraData={modelData.orchestra}
                    />
                  </div>
                </OFullRefresh>
              </Tab>
              {/* <Tab name="photo" title="乐团相册">
                  <div class={styles.content}>
                    <MyPhoto orchestraId={modelData.orchestra?.id || ''} />
                  </div>
                </Tab> */}
              <Tab name="deeds" title="乐团事迹">
                <div class={styles.content}>
                  <OrchestraDeeds orchestraId={modelData.orchestra?.id || ''} />
                </div>
              </Tab>
            </Tabs>
          </>
        )}
        {!data.loading && !data.orchestraList.length && (
          <div
            class={!data.orchestraList.length && 'emptyRootContainer'}
            style={{ minHeight: 'calc(100vh - var(--header-height))' }}
          >
            <OEmpty btnStatus={false} tips="暂无乐团" />
          </div>
        )}
        {/* </OFullRefresh> */}

        <Popup
          v-model:show={modelData.orchestraStatus}
          position="bottom"
          round
          class={'popupBottomSearch'}
        >
          <Picker
            columns={data.orchestraList}
            columnsFieldNames={{ text: 'name', value: 'id' }}
            onCancel={() => (modelData.orchestraStatus = false)}
            onConfirm={({ selectedValues }: any) => {
              const val = selectedValues[0] || ''
              modelData.orchestraStatus = false
              if (val == modelData.orchestra?.id) {
                return
              }
              const active = data.orchestraList.find((n: any) => n.id == val) || {}
              modelData.orchestra = active
            }}
          />
        </Popup>
      </div>
    )
  }
})