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

import OEmpty from '@/components/o-empty'
import OFullRefresh from '@/components/o-full-refresh'
import OHeader from '@/components/o-header'
import OSearch from '@/components/o-search'
import OSticky from '@/components/o-sticky'
import { snedStatus } from '@/constant'
import request from '@/helpers/request'
import item from '@/student/coupons/item'
import { Cell, CellGroup, Icon, Swipe, SwipeItem, Tab, Tabs } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import List from './list'
import styles from './index.module.less'

export default defineComponent({
  name: 'mass-message',
  setup() {
    const router = useRouter()
    const status = sessionStorage.getItem('mass-message-send')
    const state = reactive({
      refreshing: false,
      height: 0, // 页面头部高度，为了处理下拉刷新用的
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      tabValue: status || 'WAIT',
      params: {
        keyword: null as any,
        sendStatus: status || 'WAIT',
        page: 1,
        rows: 10
      },
      isClick: false
    })
    const getList = async () => {
      try {
        if (state.isClick) return
        state.isClick = true
        const res = await request.post('/api-school/imMessageBatchSending/page', {
          data: {
            ...state.params
          }
        })
        state.isClick = false
        state.loading = false
        state.refreshing = false
        const result = res.data || {}
        // 处理重复请求数据
        if (state.list.length > 0 && result.current === 1) {
          return
        }
        state.list = state.list.concat(result.rows || [])
        state.finished = result.current >= result.pages
        state.params.page = result.current + 1
        state.dataShow = state.list.length > 0
      } catch {
        state.isClick = false
        state.dataShow = false
        state.refreshing = false
        state.finished = true
      }
    }

    // 搜索
    const onSearch = () => {
      state.params.page = 1
      state.list = []
      state.dataShow = true // 判断是否有数据
      state.loading = false
      state.finished = false
      getList()
    }

    // 查看详情
    const onDetail = async (item: any) => {
      router.push({
        path: '/create-message',
        query: {
          id: item.id
        }
      })
    }

    onMounted(() => {
      getList()
    })
    return () => (
      <div class={[styles.massMessage]}>
        <OSticky
          position="top"
          onGetHeight={(height: any) => {
            state.height = height
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader border={false}>
            {{
              right: () => (
                <span
                  style="color: var(--van-primary-color)"
                  onClick={() => {
                    router.push('/create-message')
                  }}
                >
                  消息群发
                </span>
              )
            }}
          </OHeader>
        </OSticky>
        <Tabs
          lineWidth={18}
          v-model:active={state.tabValue}
          sticky
          animated
          swipeable
          offsetTop={state.height}
          onChange={(val: string) => {
            state.params.sendStatus = val
            onSearch()
            sessionStorage.setItem('mass-message-send', val)
          }}
        >
          <Tab title="待发送" name="WAIT">
            <List status="WAIT" height={state.height} />
          </Tab>
          <Tab title="已发送" name="SEND">
            <List status="SEND" height={state.height} />
          </Tab>
        </Tabs>

        {/* <Swipe
          showIndicators={false}
          style={{
            height: 'calc(100vh - var(--header-height))',
            overflowY: 'auto'
          }}
        >
          <SwipeItem>
            <List status="WAIT" height={state.height} />
          </SwipeItem>
          <SwipeItem>
            <List status="SEND" height={state.height} />
          </SwipeItem>
        </Swipe> */}
      </div>
    )
  }
})