tiefen_space_h5/app/space/setting/spaceRefund/page.jsx

"use client";
import React, { useState, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import {
  TextArea,
  Divider,
  Button,
  Toast,
  DotLoading,
  Input,
} from "antd-mobile";
import requireAPI from "@/utils/requireAPI";
import { getSpaceData } from "@/api/space";
export default function SpaceRefund() {
  //页面数据
  const [data, setData] = useState();
  //联系人
  const [name, setName] = useState();
  //联系方式
  const [contact, setContact] = useState();
  //备注
  const [remark, setRemark] = useState();
  //提交中
  const [isSubmitting, setIsSubmitting] = useState(false);
  const router = useRouter();
  const searchParams = useSearchParams();
  useEffect(() => {
    const mid = searchParams.get("mid");
    getSpaceData(Number(mid)).then((res) => {
      if (res) {
        const { isRefunding, noRole } = res;
        isRefunding && router.push("/");
        noRole && router.replace("person_space_introduce/" + mid);
      }
    });
    getData();
  }, []);
  //提交退款
  const handleSubmit = async () => {
    if (!name || !contact || !remark) {
      Toast.show({
        icon: "fail",
        content: "请完善信息后提交",
        position: "top",
      });
      return;
    }
    if (remark.length < 15) {
      Toast.show({
        icon: "fail",
        content: "请填写15字以上退款原因",
        position: "top",
      });
      return;
    }
    //提交数据
    if (isSubmitting) return;
    setIsSubmitting(true);
    try {
      const _data = await requireAPI("POST", "/api/zone/refund", {
        body: {
          zid: Number(searchParams.get("id")),
          contact_name: name,
          contact_phone: contact,
          note: remark,
        },
      });
      if (_data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: _data.msg,
          position: "top",
        });
        return;
      }
      Toast.show({
        icon: "success",
        content: "提交成功，请关注原支付渠道通知",
        position: "top",
      });
      router.replace("/");
    } catch (error) {
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  //获取页面数据

  const getData = async () => {
    try {
      const _data = await requireAPI("POST", "/api/zone/refund_page", {
        body: { zid: Number(searchParams.get("id")) },
      });
      if (_data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: _data.msg,
          position: "top",
        });
        return;
      }
      setData(_data.data);
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <div>
      <div className="p-4 fixed top-0 z-10 w-full">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left 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="mt-14 p-4">
        <div className="flex-row justify-between items-center">
          <p className="text-base text-white font-medium">
            <span className="text-[#F53030]">*</span>
            退款商品
          </p>
          <p className="text-base text-white font-medium">{data?.name}</p>
        </div>
        <Divider className="my-2" />
        <div className="flex-row justify-between items-center">
          <p className="text-base text-white font-medium">
            <span className="text-[#F53030]">*</span>
            退款价格
          </p>
          <p className="text-base text-white font-medium">
            ¥{data?.price / 100}
          </p>
        </div>
        <Divider className="my-2" />
        <div className="flex-row justify-between items-center">
          <p className="text-base text-white font-medium">
            <span className="text-[#F53030]">*</span>
            联系人
          </p>
          <Input
            placeholder="请输入联系人姓名"
            onChange={(value) => setName(value)}
            value={name}
            maxLength={20}
            className="bg-[#FFFFFF1A] text-white rounded-2xl mt-2 p-2"
            style={{
              "--placeholder-color": "#FFFFFF80",
              "--font-size": "14px",
            }}
          />
        </div>
        <Divider className="my-2" />
        <div className="flex-row justify-between items-center">
          <p className="text-base text-white font-medium">
            <span className="text-[#F53030]">*</span>
            联系方式
          </p>
          <Input
            placeholder="请输入联系方式"
            onChange={(value) => setContact(value)}
            value={contact}
            maxLength={20}
            className="bg-[#FFFFFF1A] text-white rounded-2xl mt-2 p-2"
            style={{
              "--placeholder-color": "#FFFFFF80",
              "--font-size": "14px",
            }}
          />
        </div>
        <Divider className="my-2" />
        <div className="flex flex-col">
          <p className="text-base text-white font-medium">
            <span className="text-[#F53030]">*</span>
            退款原因
          </p>
          <div className="flex flex-row items-center">
            <TextArea
              placeholder="请输入退款原因"
              onChange={(value) => setRemark(value)}
              value={remark}
              className="h-32 bg-[#FFFFFF1A] text-white rounded-2xl mt-2 p-2"
              style={{
                "--placeholder-color": "#FFFFFF80",
                "--font-size": "16px",
              }}
            />
          </div>
        </div>
        <Divider className="my-2" />
        <p className="text-[#F53030] text-base font-medium">退款须知</p>
        <div className="text-[#FFFFFF80] text-sm font-medium">
          <p>
            1、当前退款内容为本空间的成员身份，退款后您将无法再次加入本空间；
          </p>
          <p>
            2、平台将在24小时内处理您的退款申请，为了退款进程的顺利，请您详细填写您的退款原因；
          </p>
          <p>
            3、一旦退款成功，退款金额将原路返回您的支付账户，请确保您的支付账户可正常接受款项；
          </p>
          <p>4、您在12小时内只能进行一次自助退款，请合理利用权利；</p>
          <p>5、本条款最终解释权归平台所有。</p>
        </div>
        <Button
          shape="rounded"
          size="middle"
          block
          onClick={() => handleSubmit()}
          style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
          className="mt-2"
        >
          {isSubmitting ? (
            <div className="flex justify-center items-center">
              正在提交...
              <DotLoading color="#fff" />
            </div>
          ) : (
            "提交退款"
          )}
        </Button>
      </div>
    </div>
  );
}