tiefen_space_h5/app/my/wechatWaitingToAdd/components/HaveNotAddWechat/index.jsx

"use client";
import React, { useState } from "react";
import { InfiniteScroll, List, Toast, Modal } from "antd-mobile";
import Empty from "@/components/Empty";
import requireAPI from "@/utils/requireAPI";
import { useRouter } from "next/navigation";
import clipboard from "copy-to-clipboard";
import OwnImage from "@/components/OwnImage";
import OwnIcon from "@/components/OwnIcon";
export default function HaveNotAddWechat({ zid, currentIndex }) {
  const [offset, setOffset] = useState(0);
  const [more, setMore] = useState(1);
  const [data, setData] = useState([]);
  const router = useRouter();
  const getData = async (refresh) => {
    if (zid === undefined || !more || currentIndex != 0) return;
    try {
      const body = {
        tab: 1,
        offset: refresh ? 0 : offset, //如果是下拉刷新则更新最新数据
        limit: 20,
      };
      const _data = await requireAPI("POST", "/api/vas/get_add_wechat_list", {
        body,
      });
      if (_data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: _data.msg,
          position: "top",
        });
        return;
      }
      setData((old) => [...old, ..._data.data.list]);
      setOffset(_data.data.offset);
      setMore(_data.data.more);
    } catch (error) {
      console.error(error);
    }
  };
  const handleConfirm = async (item, modal) => {
    try {
      const _data = await requireAPI("POST", "/api/vas/confirm_add_wechat", {
        body: { order_id: item.order_id },
      });
      if (_data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: _data.msg,
          position: "top",
        });
        return;
      }
      modal.close();
      router.refresh();
    } catch (error) {
      console.error(error);
    }
  };
  //保存内容到剪贴板
  const copy = (_data) => {
    // console.log("_data", _data);
    clipboard(_data);
    Toast.show({
      icon: "success",
      content: "已复制到剪贴板",
      position: "top",
    });
  };
  //单个成员组件
  const RenderItem = ({ item }) => {
    return (
      <div>
        <div className="flex items-center">
          <OwnImage
            src={item?.account?.avatar?.images[0]?.urls[0]}
            width={48}
            height={48}
            className="rounded-full"
          />
          <div className="ml-2 justify-around flex-1">
            <div>
              <div className="flex">
                <p className="text-base text-white font-medium whitespace-nowrap overflow-hidden max-w-[70px] truncate">
                  {item?.account?.name}
                </p>
                <div className="ml-2 flex items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full">
                  <OwnIcon
                    src="/icons/info/ID.png"
                    width={14}
                    height={14}
                    className="w-4 h-full"
                    outClassName="mr-1"
                  />
                  <span className="text-white text-xs font-medium ml-0.5">
                    {item?.account?.user_id}
                  </span>
                </div>
              </div>
              <p className="text-xs text-[#FFFFFF80]">
                请于72小时内添加对方微信
              </p>
              <p className="text-xs text-[#FFFFFF80]">
                付款时间:{new Date(item?.ct * 1000).toLocaleString()}
              </p>
            </div>
          </div>
          <div className="ml-2 justify-around items-center">
            {item.order_status === 2 ? (
              <span className="text-xs text-[#FFFFFF80] whitespace-nowrap">
                等待用户填写微信
              </span>
            ) : (
              <div
                onClick={() => {
                  // setCurrentOrder(item);
                  // setIsConfirmModalVisible(!isConfirmModalVisible);
                  const modal = Modal.show({
                    closeOnMaskClick: true,
                    bodyStyle: {
                      background: "none",
                    },
                    content: (
                      <div className="flex-1 justify-center items-center ">
                        <div
                          activeOpacity={1}
                          className="p-4 rounded-2xl bg-[#1E1C29] flex-col items-center justify-center"
                        >
                          {item.consumer_wechat ? (
                            <div className="flex flex-col w-full">
                              <div className="flex flex-row items-center justify-center">
                                <OwnImage
                                  className="rounded-full"
                                  width={36}
                                  height={36}
                                  src={
                                    item?.account?.avatar?.images[0]?.urls[0]
                                  }
                                  fit="cover"
                                />
                                <span className="text-white text-lg ml-2 font-medium">
                                  {item?.account?.name}
                                </span>
                              </div>
                              <span className="mt-2 text-white text-base font-medium">
                                Ta的微信号：
                              </span>
                              <div className="mt-1 flex flex-row bg-[#FFFFFF1A] px-4 py-2 rounded-lg justify-between">
                                <span className="text-white text-base font-medium">
                                  {item?.consumer_wechat}
                                </span>
                                <div
                                  onClick={() => copy(item?.consumer_wechat)}
                                  className="flex"
                                >
                                  <OwnIcon
                                    width={20}
                                    height={20}
                                    fit="cover"
                                    src="/icons/copy.png"
                                  />
                                  <span className="text-white text-base font-medium">
                                    复制
                                  </span>
                                </div>
                              </div>
                              <span className="mt-2 text-white text-base font-medium">
                                添加时请备注：
                              </span>
                              <div className="mt-1 flex flex-row bg-[#FFFFFF1A] mb-4 px-4 py-2 rounded-lg justify-between">
                                <span className="text-white text-base font-medium">
                                  {item?.consumer_note}
                                </span>
                                <div
                                  onClick={() => copy(item?.consumer_note)}
                                  className="flex"
                                >
                                  <OwnIcon
                                    width={20}
                                    height={20}
                                    fit="cover"
                                    src="/icons/copy.png"
                                  />
                                  <span className="text-white text-base font-medium">
                                    复制
                                  </span>
                                </div>
                              </div>
                            </div>
                          ) : (
                            <div className="flex flex-col">
                              <div className="flex flex-row items-center justify-center">
                                <OwnImage
                                  width={36}
                                  height={36}
                                  className="rounded-full"
                                  src={item.account?.avatar?.images[0]?.urls[0]}
                                  fit="cover"
                                />
                                <span className="text-white text-lg ml-2 font-medium">
                                  {item.account?.name}
                                </span>
                              </div>
                              <p className="text-white text-base text-center my-2 font-medium">
                                请确认对方已主动添加您的微信，并您已经通过好友申请。
                              </p>
                            </div>
                          )}
                          <div
                            onClick={() => handleConfirm(item, modal)}
                            className="flex justify-center"
                          >
                            <span className="py-2 px-4 text-sm font-medium text-center bg-[#FF669E] rounded-full">
                              我已完成添加
                            </span>
                          </div>
                        </div>
                      </div>
                    ),
                  });
                }}
                className="text-[14px] font-medium px-4 py-2 bg-[#FF669E] rounded-full whitespace-nowrap"
              >
                添加微信
              </div>
            )}
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="flex-1">
      {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>
    </div>
  );
}