123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- import Taro, { useReachBottom } from "@tarojs/taro";
- import { View, Text } from "@tarojs/components";
- import EmptyData from "@/components/empty-data";
- import NavBarNormal from "@/components/NavBarNormal/index";
- import SearchBar from "@/components/search-bar/index";
- import style from "./index.module.less";
- import { useEffect, useState } from "react";
- import ContactCard from "./components/contact-card/index";
- import { getContactList, setContactToTop } from "@/service/contact";
- import { useLoadMore } from "@/utils/loadMore";
- import PageCustom from "@/components/page-custom/index";
- import { TContactItem } from "@/types/contact";
- import { isSuccess } from "@/utils";
- import useSWRInfinite from "swr/infinite";
- export default function Index() {
- const [searchValue, setSearchValue] = useState("");
- const fetcher = async ([_url, params, keyword]) => {
- params = params || {};
- console.log("fetcher", _url, params);
- const res = await getContactList({
- startId: params.nextId,
- pageSize: params.pageSize,
- keyword: keyword,
- });
- return res.data;
- };
- const getKey = (pageIndex:number, previousPageData) => {
- if (pageIndex === 0)
- return [
- "/my/contacts",
- { nextId: undefined, pageSize: 2, keyword: "" },
- searchValue,
- ];
- if (previousPageData && previousPageData.nextId) {
- return [
- "/my/contacts",
- { pageSize: 2, nextId: previousPageData.nextId },
- searchValue,
- ];
- }
- return null;
- };
- const { data, setSize } = useSWRInfinite(getKey, fetcher, {
- revalidateIfStale: false,
- onErrorRetry(err, key, config, revalidate, revalidateOpts) {
- if(err.status === 404) return
- if(err.status === 401) return
- if(revalidateOpts.retryCount >=3 )return
- },
- });
- const list = data?.flatMap((page) => page?.data || []) || [];
-
- const resetFetchList = () => {
- setSize(1);
- };
- const handleSearchBarChanged = (v: string) => {
- setSearchValue(v);
- };
- const handleClear = () => {
- setSearchValue("");
- };
- useReachBottom(() => {
- // 加载更多数据
- // 如果搜索框中有数据由不加载更多数据
- if (searchValue.length) {
- return;
- }
- setSize((prevSize) => prevSize + 1);
- });
- const handleHello = async (e: any) => {
- const detail = e.detail as { type: string; id: string };
- console.log(detail);
- // 置顶与取消置顶
- if (detail.type === "pin" || detail.type === "unpin") {
- const reseponse = await setContactToTop({
- isTop: detail.type === "pin",
- contactId: detail.id,
- });
- if (isSuccess(reseponse.status)) {
- resetFetchList();
- return;
- }
- }
- };
- const renderContent = () => {
- if (list?.length) {
- return list.map((item) => (
- // @ts-ignore
- <slide-delete
- pid={item.contactId}
- pinned={item.isTop}
- onAction={handleHello}
- >
- <View className={`${item.isTop ? "bg-gray" : "bg-white"}`}>
- <ContactCard
- refresh={resetFetchList}
- deleteable={!item.isEnt}
- key={item.contactId}
- data={item}
- fromContact
- ></ContactCard>
- </View>
- </slide-delete>
- ));
- }
- return <EmptyData type={2} />;
- };
- return (
- <PageCustom>
- <NavBarNormal
- scrollFadeIn
- leftColumn={() => <Text className="text-16 font-medium">联系人</Text>}
- ></NavBarNormal>
- <View className="flex flex-col w-full">
- <View className="px-16 pb-12">
- <SearchBar
- value={searchValue}
- onChange={(e) => handleSearchBarChanged(e)}
- onClear={() => handleClear()}
- ></SearchBar>
- </View>
- <View className={style.contactContent}>{renderContent()}</View>
- </View>
- </PageCustom>
- );
- }
|