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

import OEmpty from '@/components/o-empty'
import OSearch from '@/components/o-search'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import { state } from '@/state'
import dayjs from 'dayjs'
import { Cell, CellGroup, List, Image } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import styles from './help-center/index.module.less'

export default defineComponent({
  name: 'help-center',
  setup() {
    const router = useRouter()
    const form = reactive({
      isClick: false,
      list: [] as any,
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false
      },
      params: {
        keyword: null,
        status: true,
        type: 'HOT_CONSULTATION',
        page: 1,
        rows: 20
      }
    })

    const getList = async () => {
      try {
        if (form.isClick) return
        form.isClick = true
        const res = await request.post(state.platformApi + '/sysNewsInformation/page', {
          data: {
            ...form.params,
            catalogType: state.platformType
          }
        })
        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
        form.isClick = false
      } catch {
        form.listState.dataShow = false
        form.listState.finished = true
        form.isClick = false
      }
    }

    const onSearch = (val: any) => {
      form.params.keyword = val
      form.params.page = 1
      form.list = []
      form.listState.dataShow = true // 判断是否有数据
      form.listState.loading = false
      form.listState.finished = false
      getList()
    }

    const onDetail = (item: any) => {
      if (item.linkType === 'OUT') {
        window.location.href = item.linkUrl
      } else {
        router.push({
          path: '/information-detail',
          query: {
            id: item.id
          }
        })
      }
    }

    onMounted(() => {
      getList()
    })
    return () => (
      <div class={styles.helpCenter}>
        <OSticky position="top">
          <OSearch onSearch={onSearch} />
        </OSticky>

        {form.listState.dataShow ? (
          <List
            v-model:loading={form.listState.loading}
            finished={form.listState.finished}
            finishedText=" "
            class={[styles.container, styles.containerInformation]}
            onLoad={getList}
            immediateCheck={false}
          >
            {form.list.map((item: any) => (
              <Cell
                class={styles.cell}
                onClick={() => onDetail(item)}
                titleStyle={{
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'space-between'
                }}
              >
                {{
                  icon: () => <Image src={item.coverImage} class={styles.img} fit="cover" />,
                  title: () => (
                    <>
                      <div class={[styles.title, 'van-ellipsis']}>{item.title}</div>
                      {/* <div class={[styles.content, 'van-multi-ellipsis--l2']}>{item.memo}</div> */}

                      <div class={styles.time}>
                        {item.createTime ? dayjs(item.createTime).format('YYYY年MM月DD日') : ''}
                      </div>
                    </>
                  )
                }}
              </Cell>
            ))}
          </List>
        ) : (
          <OEmpty btnStatus={false} classImgSize="SMALL" tips="暂无数据" />
        )}
      </div>
    )
  }
})