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

import OEmpty from '@/components/o-empty'
import OFullRefresh from '@/components/o-full-refresh'
import OSearch from '@/components/o-search'
import OSticky from '@/components/o-sticky'
import { snedStatus } from '@/constant'
import request from '@/helpers/request'
import { Cell, CellGroup, Icon, List, Sticky } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import styles from './index.module.less'

export default defineComponent({
  name: 'mass-list',
  props: {
    status: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const router = useRouter()
    const state = reactive({
      refreshing: false,
      height: 0, // 页面头部高度，为了处理下拉刷新用的
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        keyword: null as any,
        sendStatus: props.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 () => (
      <>
        {/* var(--van-tab-line-height) */}

        <OSearch
          background="#f6f8f9"
          inputBackground="white"
          placeholder="请输入群聊/学员名称/伴学指导名称"
          onSearch={(val: string) => {
            state.params.keyword = val
            onSearch()
          }}
        />

        <div
          style={{
            height:
              'calc(100vh -  var(--van-tabs-line-height) - var(--header-height) - var(--van-search-input-height) - 0.53334rem)',
            overflow: 'hidden',
            overflowY: 'auto'
          }}
        >
          {state.dataShow ? (
            <OFullRefresh
              v-model:modelValue={state.refreshing}
              onRefresh={onSearch}
              style={{
                minHeight:
                  'calc(100vh -  var(--van-tabs-line-height) - var(--header-height) - var(--van-search-input-height) - 0.53334rem)'
              }}
            >
              <List
                // v-model:loading={state.loading}
                finished={state.finished}
                finishedText=" "
                class={[styles.liveList]}
                onLoad={getList}
                immediateCheck={false}
              >
                {state.list.map((item: any) => (
                  <CellGroup inset onClick={() => onDetail(item)} style={{ marginBottom: '12px' }}>
                    <Cell
                      class={[styles.waitSend, item.sendStatus === 'SEND' && styles.messageSend]}
                      titleStyle={{ flex: '1 auto' }}
                    >
                      {{
                        title: () => (
                          <div class={styles.time}>
                            {item.sendStatus === 'WAIT' && (
                              <Icon name="clock-o" class={styles.clockO} />
                            )}

                            {item.sendTime}
                          </div>
                        ),
                        value: () => <span>{snedStatus[item.sendStatus]}</span>
                      }}
                    </Cell>
                    <Cell valueClass={[styles.messageContent, 'van-multi-ellipsis--l3']}>
                      {item.textMessage}
                    </Cell>
                  </CellGroup>
                ))}
              </List>
            </OFullRefresh>
          ) : (
            <OEmpty btnStatus={false} tips="暂无群发消息" />
          )}
        </div>
      </>
    )
  }
})