chengduSKP_ar_react/src/pages/Coupons/WriteOffModal/WriteOffModal.js

import "./WriteOffModal.scss";
import Modal from "react-modal";
import { useState, useRef, useEffect, useCallback } from "react";
import { post } from "../../../js/helpers/data-helper";
import ScanModal from "../ScanModal/ScanModal";
import InfiniteScroll from "react-infinite-scroller";
import ListEnd from "../ListEnd/ListEnd";

const WriteOffModal = ({ onBack, memberID }) => {
  const [orderNo, setOrderNo] = useState("");
  const [showScanModal, setShowScanModal] = useState(false);
  const [list, setList] = useState([]);
  const [nextPageIndex, setNextPageIndex] = useState(1);
  const [loading, setLoading] = useState(false);
  const hasMore = nextPageIndex !== null;
  const [allCount, setAllCount] = useState(0);
  const [month, setMonth] = useState(new Date().toJSON().slice(0, 7));
  const showListEnd = list !== null && list.length > 0;
  const listRef = useRef();

  const loadMore = useCallback(async () => {
    if (loading || nextPageIndex === null) return;
    setLoading(true);
    try {
      const { code, data, msg } = await post("/api/ar/v1/applet/WriteOffHis", {
        paging: 1,
        pageIndex: nextPageIndex,
        pageSize: 10,
        memberID,
        month,
      });
      if (code === 200) {
        setList([...list, ...data.list]);
        setNextPageIndex(
          nextPageIndex + 1 > data.allPage ? null : nextPageIndex + 1
        );
        setAllCount(data.allCount);
      } else {
        setNextPageIndex(null);
        window.weui.toast(msg, {
          className: "toast",
        });
      }
    } catch (error) {
      setNextPageIndex(null);
    } finally {
      setLoading(false);
    }
  }, [list, loading, nextPageIndex]);

  useEffect(() => {
    if (listRef.current) listRef.current.scrollTop = 0;
    setNextPageIndex(1);
    setAllCount(0);
    setList([]);
  }, [month]);

  const toast = (text) =>
    window.weui.toast(text, {
      className: "toast",
    });
  const writeOff = async (orderNo) => {
    try {
      const { code, msg } = await post("/api/ar/v1/applet/writeoffcoupon", {
        orderNo,
        memberID,
      });
      if (code === 200) {
        toast("核销成功");
        return true;
      } else {
        toast(msg);
        return false;
      }
    } catch (error) {
      return false;
    }
  };
  const submitFromBtn = async (orderNo) => {
    const result = await writeOff(orderNo);
    if (result) {
      setOrderNo("");
    }
  };
  const handleCode = async (orderNo) => {
    await writeOff(orderNo);
    setShowScanModal(false);
  };
  return (
    <Modal isOpen ariaHideApp={false} className="WriteOffModal">
      <div className="back" onClick={() => onBack && onBack()}></div>
      <div className="title">核销</div>
      <div className="search">
        <div className="icon"></div>
        <input
          type="number"
          value={orderNo}
          onChange={(e) => setOrderNo(e.target.value)}
        ></input>
      </div>
      <div className="scan" onClick={() => setShowScanModal(true)}></div>
      {!!orderNo && (
        <div className="btn" onClick={() => submitFromBtn(orderNo)}>
          确认核销
        </div>
      )}
      <div className="bar">
        <div>已核销（{allCount}张）</div>
        <input
          type="month"
          value={month}
          onChange={(e) => setMonth(e.target.value)}
        ></input>
      </div>
      <div className="list-container" ref={listRef}>
        <InfiniteScroll
          pageStart={0}
          loadMore={loadMore}
          hasMore={hasMore}
          useWindow={false}
          getScrollParent={() => listRef && listRef.current}
        >
          {list !== null &&
            list.map((coupon) => (
              <div key={coupon.orderNo} className="coupon">
                <div className="block">
                  <div className="r1">礼券标题</div>
                  <div className="r2">{coupon.title}</div>
                </div>
                <div className="block">
                  <div className="r1">核销时间</div>
                  <div className="r2">{coupon.writeOffTime}</div>
                </div>
              </div>
            ))}
          {showListEnd && <ListEnd></ListEnd>}
        </InfiniteScroll>
      </div>
      {showScanModal && (
        <ScanModal
          onBack={() => setShowScanModal(false)}
          onCode={handleCode}
        ></ScanModal>
      )}
    </Modal>
  );
};
export default WriteOffModal;