orchestra-app/src/school/orchestra/index.tsx

import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import { Cell, Icon, List, Popover, Tag } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import styles from './index.module.less'
import { state } from '@/state'
import OEmpty from '@/components/o-empty'
import { orchestraType } from '@/constant'

export default defineComponent({
  name: 'my-orchestra',
  setup() {
    const router = useRouter()
    const form = reactive({
      showPopover: false,
      actions: [
        { text: '全部乐团', color: 'var(--van-primary-color)', value: 'ALL' },
        { text: '交付团', value: 'DELIVERY' },
        { text: '晋升团', value: 'PROMOTION' }
      ],
      list: [] as any,
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false
      },
      params: {
        type: null,
        page: 1,
        rows: 20
      }
    })

    const onSelect = (val: any) => {
      form.actions.forEach((item: any) => {
        item.color = null
      })
      val.color = 'var(--van-primary-color)'
      form.params.type = val.value === 'ALL' ? null : val.value
      form.params.page = 1
      form.list = []
      form.listState.dataShow = true // 判断是否有数据
      form.listState.loading = false
      form.listState.finished = false
      getList()
    }

    const getList = async () => {
      try {
        const res = await request.post('/api-school/orchestra/page', {
          data: {
            ...form.params,
            schoolId: state.user.data.school.id
          }
        })
        form.listState.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (form.list.length > 0 && result.current === 1) {
          return
        }
        form.list = form.list.concat(result.rows || [])
        form.listState.finished = result.current >= result.pages
        form.params.page = result.current + 1
        form.listState.dataShow = form.list.length > 0
      } catch {
        form.listState.dataShow = false
        form.listState.finished = true
      }
    }

    const onDetail = (item: any) => {
      console.log(item)
      router.push({
        path: '/orchestra-detail',
        query: {
          id: item.id
        }
      })
    }

    onMounted(() => {
      getList()
    })
    return () => (
      <>
        <OSticky position="top">
          <OHeader>
            {{
              right: () => (
                <Icon
                  name="plus"
                  size={19}
                  color="#333"
                  onClick={() => {
                    router.push('/create-orchestra')
                  }}
                />
              )
            }}
          </OHeader>
          <div style={{ padding: '12px 13px', background: '#F8F8F8' }}>
            <Popover
              v-model:show={form.showPopover}
              actions={form.actions}
              showArrow={false}
              placement="bottom-start"
              onSelect={onSelect}
              offset={[0, 12]}
            >
              {{
                reference: () => (
                  <div class={styles.searchBand}>
                    全部乐团 <Icon name={form.showPopover ? 'arrow-up' : 'arrow-down'} />
                  </div>
                )
              }}
            </Popover>
          </div>
        </OSticky>

        {form.listState.dataShow ? (
          <List
            v-model:loading={form.listState.loading}
            finished={form.listState.finished}
            finishedText=" "
            class={[styles.liveList]}
            onLoad={getList}
            immediateCheck={false}
          >
            {form.list.map((item: any) => (
              <Cell isLink center class={styles.oCell} onClick={() => onDetail(item)}>
                {{
                  title: () => (
                    <div class={styles.oTitle}>
                      {item.name}

                      <Tag
                        style={{ marginLeft: '6px' }}
                        color={item.type === 'DELIVERY' ? '#FF8057' : '#64A9FF'}
                      >
                        {orchestraType[item.type]}
                      </Tag>
                    </div>
                  ),
                  label: () => <p>学生人数：{item.currentStudentNum}人</p>
                }}
              </Cell>
            ))}
          </List>
        ) : (
          <OEmpty btnStatus={false} classImgSize="SMALL" tips="暂无乐团" />
        )}
      </>
    )
  }
})