classroom-instruments/src/views/natural-resources/components/my-collect/index.tsx

import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import CardType from '@/components/card-type';
import Pagination from '@/components/pagination';
import SearchGroupResources from './search-group-resources';
import { favorite, materialQueryPage } from '../../api';
import { NSpin } from 'naive-ui';
import TheEmpty from '@/components/TheEmpty';
import CardPreview from '@/components/card-preview';

export default defineComponent({
  name: 'share-resources',
  setup() {
    const state = reactive({
      searchWord: '',
      loading: false,
      pageTotal: 0,
      pagination: {
        page: 1,
        rows: 20
      },
      searchGroup: {
        type: '', //
        keyword: '',
        bookVersionId: null,
        subjectId: null,
        sourceType: 4
      },
      tableList: [] as any,
      show: false,
      item: {} as any
    });
    const getList = async () => {
      try {
        state.loading = true;
        const { data } = await materialQueryPage({
          ...state.searchGroup,
          ...state.pagination
        });
        state.loading = false;
        state.pageTotal = Number(data.total);
        state.tableList = data.rows || [];
      } catch {
        state.loading = false;
      }
    };

    const onSearch = async (item: any) => {
      state.pagination.page = 1;
      state.searchGroup = Object.assign(state.searchGroup, item);
      getList();
    };
    // 收藏
    const onCollect = async (item: any) => {
      try {
        await favorite({
          materialId: item.id,
          favoriteFlag: item.isCollect ? 0 : 1,
          type: item.type
        });
        item.isCollect = !item.isCollect;

        onSearch();
      } catch {
        //
      }
    };

    onMounted(() => {
      getList();
    });
    return () => (
      <>
        <SearchGroupResources onSearch={(item: any) => onSearch(item)} />

        <NSpin v-model:show={state.loading}>
          <div class={styles.list}>
            {state.tableList.map((item: any) => {
              const tmpItem = {
                id: item.id,
                coverImg: item.coverImg,
                type: item.type,
                title: item.name,
                isCollect: !!item.favoriteFlag,
                isSelected: item.sourceFrom === 'PLATFORM' ? true : false
              };
              return (
                <CardType
                  item={tmpItem}
                  disabledMouseHover={false}
                  onClick={(val: any) => {
                    if (val.type === 'IMG') return;
                    state.show = true;
                    state.item = val;
                  }}
                  onCollect={(item: any) => onCollect(item)}
                />
              );
            })}

            {!state.loading && state.tableList.length <= 0 && (
              <TheEmpty description="暂无收藏资源" />
            )}
          </div>
        </NSpin>

        <Pagination
          v-model:page={state.pagination.page}
          v-model:pageSize={state.pagination.rows}
          v-model:pageTotal={state.pageTotal}
          onList={getList}
        />

        {/* 弹窗查看 */}
        <CardPreview v-model:show={state.show} item={state.item} />
      </>
    );
  }
});