classroom-app/src/views/information/help-center/index.tsx

import OEmpty from '@/components/m-empty';
import OHeader from '@/components/m-header';
import OSearch from '@/components/m-search';
import OSticky from '@/components/m-sticky';
import request from '@/helpers/request';
import { state } from '@/state';
import { Cell, CellGroup, List } from 'vant';
import { defineComponent, onMounted, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import styles from './index.module.less';

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

    const getList = async () => {
      try {
        if (form.isClick) return;
        form.isClick = true;
        const res = await request.post('/edu-app/open/helpCenterContent/page', {
          data: {
            ...form.params,
            catalogType: 'STUDENT'
          }
        });
        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();
    };

    onMounted(() => {
      getList();
    });
    return () => (
      <div
        class={[
          styles.helpCenter,
          !form.listState.dataShow && 'emptyRootContainer'
        ]}>
        {route.query.platformType == 'ANALYSIS' ? null : (
          <OSticky position="top">
            <OHeader border={false} />
            <OSearch onSearch={onSearch} />
          </OSticky>
        )}

        {form.listState.dataShow ? (
          <List
            // v-model:loading={form.listState.loading}
            finished={form.listState.finished}
            finishedText=" "
            class={styles.container}
            onLoad={getList}
            immediateCheck={false}>
            {form.list.map((item: any) => (
              <Cell
                titleClass={[styles.title, 'van-ellipsis']}
                title={item.title}
                isLink
                onClick={() => {
                  router.push({
                    path: 'help-detail',
                    query: {
                      id: item.id
                    }
                  });
                }}></Cell>
            ))}
          </List>
        ) : (
          <div
            style={{
              height: `calc(100vh - var(--header-height))`
            }}>
            <OEmpty description="暂无数据" />
          </div>
        )}
      </div>
    );
  }
});