tiefen_space_h5/app/space/postPurchasers/page.jsx

"use client";

import React, { useState, useCallback } from "react";
import { List, InfiniteScroll, Toast, Image } from "antd-mobile";
import { useRouter, useSearchParams } from "next/navigation";
import requireAPI from "@/utils/requireAPI";
import Empty from "@/components/Empty";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faCalendar } from "@fortawesome/free-solid-svg-icons";
//todo:等接口上线补全字段
export default function PostPurchasers() {
  //查询数据
  const [data, setData] = useState([]);
  const [offset, setOffset] = useState(0);
  const [more, setMore] = useState(1);
  const searchParams = useSearchParams();
  const router = useRouter();
  const getData = async () => {
    if (!more) return;
    try {
      const body = {
        moment_id: Number(searchParams.get("id")),
        offset: offset,
        limit: 12,
      };
      const _data = await requireAPI("POST", "/api/vas/moment_order_list", {
        body,
      });
      if (_data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: _data.msg,
          position: "top",
        });
        return;
      }
      setData((prev) => [...prev, ..._data.data.list]);
      setOffset(_data.data.offset);
      setMore(_data.data.more);
    } catch (error) {
      console.error(error);
    }
  };

  //格式化时间
  const formatDate = useCallback((timestamp) => {
    const date = new Date(timestamp * 1000);
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // 月份从0开始,所以需要加1
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    return `${year}/${month}/${day} ${hours}:${minutes}`;
  }, []);

  const RenderItem = ({ item }) => {
    return (
      <div>
        <div className="flex items-center">
          <Image
            src={item?.account?.avatar?.images[0]?.urls[0]}
            width={48}
            height={48}
            className="rounded-full"
            placeholder=""
          />
          <div className="ml-2 justify-around flex-1">
            <span className="text-base text-white font-medium">
              {item?.account?.name}
            </span>
            <div className="flex flex-wrap">
              <div className="flex items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full">
                <Image
                  src={
                    process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                    "/icons/info/ID.png"
                  }
                  width={14}
                  height={14}
                  className="w-4 h-full mr-1"
                />
                <span className="text-white text-xs font-medium ml-0.5">
                  {item?.account?.user_id}
                </span>
              </div>
              <div className="flex items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full">
                <FontAwesomeIcon
                  icon={faCalendar}
                  style={{ maxWidth: "12px" }}
                  size="lg"
                  className="mr-1"
                />
                <span className="text-white text-xs font-medium ml-0.5">
                  {formatDate(item?.buy_time)}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div>
      {/* 头部标题 */}
      <div className="p-4 fixed top-0 z-10 w-full bg-black">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">已购用户</p>
      </div>
      {/* 内容 */}
      <div className="pt-16 p-4">
        {data.length == 0 && (
          <div className="mt-32">
            <Empty type="nodata" />
          </div>
        )}
        <List style={{ "--padding-left": 0 }}>
          {data?.map((item, index) => (
            <List.Item key={index}>
              <RenderItem item={item} />
            </List.Item>
          ))}
        </List>
        <InfiniteScroll loadMore={getData} hasMore={more}>
          {null}
        </InfiniteScroll>
        {/* <FlatList
          data={data}
          renderItem={renderItem}
          initialNumToRender={12}
          onEndReached={() => getData()}
          ListEmptyComponent={<Empty type="nodata" />}
        /> */}
      </div>
    </div>
  );
}