tiefen_space_h5/app/my/createProfile/page.jsx

"use client";

import React, { useState, useRef, useMemo, Fragment } from "react";
import { Switch, Space, Checkbox, Button, Toast, TextArea } from "antd-mobile";
import { useRouter, useSearchParams } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import OwnInput from "@/components/OwnInput";
import requireAPI from "@/utils/requireAPI";

// getStreamerInfo

const superSingles = [
  { key: 0, text: "永久" },
  { key: 1, text: "按年生效" },
  { key: 2, text: "按半年生效" },
  { key: 3, text: "按季度生效" },
  { key: 4, text: "按月生效" },
];
const ListItemWithCheckbox = ({
  superSingle,
  formData,
  setFormData,
  superSingleCheckeds,
}) => {
  const checkboxRef = useRef(null);
  return (
    <li
      className="mt-4"
      onClick={() => {
        checkboxRef.current?.toggle();
      }}
    >
      <div onClick={(e) => e.stopPropagation()}>
        <Checkbox
          value={superSingle.key}
          ref={checkboxRef}
          onChange={(value) => {
            const newFormData = { ...formData };
            newFormData.superSingle[superSingle.key].enable = value;
            setFormData(newFormData);
          }}
        >
          {superSingle.text}
        </Checkbox>
        <div
          className={`mt-2 px-4 h-12 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center ${
            !superSingleCheckeds.includes(superSingle.key)
              ? "mt-0 px-0 py-0 hidden"
              : ""
          }`}
        >
          <div className="flex items-center">
            <span className="mr-1 text-[#ffffffae] text-sm">¥</span>
            <OwnInput
              type="number"
              fontSize="22"
              value={formData.superSingle[superSingle.key].price}
              onChange={(value) => {
                const newFormData = { ...formData };
                newFormData.superSingle[superSingle.key].price = value;
                setFormData(newFormData);
              }}
            />
          </div>
          <div className="flex items-center">
            <span className="text-[#ffffff26] mr-2">|</span>
            <Checkbox
              block
              checked={formData.superSingle[superSingle.key].wechatFree}
              onChange={(value) => {
                const newFormData = { ...formData };
                newFormData.superSingle[superSingle.key].wechatFree = value;
                setFormData(newFormData);
              }}
            >
              <p className="text-sm whitespace-nowrap">赠送微信</p>
            </Checkbox>
          </div>
        </div>
      </div>
    </li>
  );
};
export default function CreateProfile() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [formData, setFormData] = useState({
    spacePrice: "",
    ironFanPrice: "",
    openSuper: false,
    superSingle: [
      { enable: false, price: 0, wechatFree: false },
      { enable: false, price: 0, wechatFree: false },
      { enable: false, price: 0, wechatFree: false },
      { enable: false, price: 0, wechatFree: false },
      { enable: false, price: 0, wechatFree: false },
    ],
    spaceIntro: "",
  });
  const [spacePriceAble, setSpacePriceAble] = useState(false);
  const [tiefenPriceAble, setTiefenPriceAble] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [superSingleCheckeds, setSuperSingleCheckeds] = useState([]);

  const listItemWithCheckboxMemo = useMemo(() => {
    return superSingles.map((item) => (
      <Fragment key={item.key}>
        <ListItemWithCheckbox
          superSingle={item}
          formData={formData}
          setFormData={setFormData}
          superSingleCheckeds={superSingleCheckeds}
        />
      </Fragment>
    ));
  }, [formData, superSingleCheckeds]);

  const handleSubmit = async () => {
    const { spaceIntro, spacePrice, ironFanPrice, openSuper, superSingle } =
      formData;
    const openSuperEveryFalse = Object.values(superSingle).every(
      (it) => !it.enable
    );
    if (
      !spaceIntro ||
      !spacePrice ||
      !ironFanPrice ||
      (openSuper && openSuperEveryFalse)
    ) {
      Toast.show({
        icon: "fail",
        content: "请完善内容后提交",
        position: "top",
      });
      return;
    }
    const _spacePrice = parseInt(spacePrice * 100, 10);
    if (isNaN(_spacePrice) || _spacePrice < 0) {
      Toast.show({
        icon: "fail",
        content: "请输入有效的解锁空间价格",
        position: "top",
      });
      return;
    }
    const _ironFanPrice = parseInt(ironFanPrice * 100, 10);
    if (isNaN(_ironFanPrice) || _ironFanPrice < 100 || _ironFanPrice > 388800) {
      Toast.show({
        icon: "fail",
        content: "请输入有效的铁粉价格",
        position: "top",
      });
      return;
    }
    let isPrice = false;
    if (openSuper) {
      Object.values(superSingle).forEach((it) => {
        if (it.enable) {
          const superFanPrice = it.price;
          if (!superFanPrice) {
            isPrice = true;
            Toast.show({
              icon: "fail",
              content: "请填写超粉价格",
              position: "top",
            });
          } else {
            const _superFanPrice = parseInt(superFanPrice * 100, 10);
            if (
              openSuper &&
              (isNaN(_superFanPrice) ||
                _superFanPrice < 100 ||
                _superFanPrice > 388800)
            ) {
              isPrice = true;
              Toast.show({
                icon: "fail",
                content: "请输入有效的超粉价格",
                position: "top",
              });
              return;
            }
            if (openSuper && _superFanPrice <= _ironFanPrice) {
              isPrice = true;
              Toast.show({
                icon: "fail",
                content: "请输入大于铁粉价格的超粉价格",
                position: "top",
              });
              return;
            }
          }
        }
      });
    }
    if (isSubmitting) return;
    const superfan_price_list = superSingle.map((it, index) => ({
      period: index,
      enable: it.enable ? 1 : 0,
      price: parseInt(it.price * 100, 10),
      is_superfanship_give_wechat: it.wechatFree ? 1 : 0,
    }));
    setIsSubmitting(true);

    // try {
    //   const body = {
    //     profile: spaceIntro,
    //     admission_price: parseInt(spacePrice * 100, 10),
    //     ironfanship_price: parseInt(ironFanPrice * 100, 10),
    //     is_superfanship_enabled: openSuper ? 1 : 0,
    //     superfan_price_list,
    //   };
    //   const _data = await requireAPI(
    //     "POST",
    //     "/api/zone/create",
    //     {
    //       body,
    //     },
    //     true
    //   );
    //   if (_data.ret === -1) {
    //     Toast.show({
    //       icon: "fail",
    //       content: _data.msg,
    //       position: "top",
    //     });
    //     return;
    //   }
    //   Toast.show({
    //     icon: "success",
    //     content: "修改成功，请重进空间刷新查看",
    //     position: "top",
    //   });
    //   router.back();
    // } catch (error) {
    //   console.error(error);
    // } finally {
    //   setIsSubmitting(false);
    // }
  };
  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 whitespace-nowrap">
          空间付费设置
        </p>
      </div>
      {/* 内容 */}
      <div className="pt-16 p-4">
        <div>
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span className="whitespace-nowrap">空间介绍</span>
              <span className="text-[#f00]">*</span>
            </p>
            <p className="text-[#ffffffae] text-xs"></p>
          </div>
          <div className="mt-2 px-4 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <TextArea
              value={formData.info}
              placeholder="介绍下你的空间吧～"
              onChange={(value) =>
                setFormData((old) => ({ ...old, spaceIntro: value }))
              }
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm whitespace-nowrap">
              <span>解锁空间价格</span>
              <span className="text-[#f00]">*</span>
            </p>
            <p className="text-[#ffffffae] text-xs">
              （成为空间成员，可查看免费帖）
            </p>
          </div>
          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <div className="flex items-center">
              <span className="mr-1 text-[#ffffffae] text-sm">¥</span>
              <OwnInput
                id="spacePrice"
                type="number"
                fontSize="22"
                placeholder="1~3888，仅支持整数"
                value={formData.spacePrice}
                onChange={(value) =>
                  setFormData((old) => ({ ...old, spacePrice: value }))
                }
                inputClassName="placeholder:text-[14px]"
                className={!formData.spacePrice ? "pb-1.5" : ""}
              />
            </div>
            <label
              htmlFor="spacePrice"
              className="text-[#ffffffae] text-xs whitespace-nowrap"
              onClick={() => setSpacePriceAble(true)}
            >
              点击编辑
            </label>
          </div>
        </div>
        <div className="mt-3">
          <div className="flex justify-between items-center">
            <p className="text-sm whitespace-nowrap">
              <span>铁粉价格</span>
              <span className="text-[#f00]">*</span>
            </p>
            <p className="text-[#ffffffae] text-xs">
              （累计消费达成后解锁铁粉权益）
            </p>
          </div>
          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <div className="flex items-center">
              <span className="mr-1 text-[#ffffffae] text-sm">¥</span>
              <OwnInput
                id="ironPrice"
                type="number"
                fontSize="22"
                placeholder="1~3888，仅支持整数"
                value={formData.ironFanPrice}
                onChange={(value) =>
                  setFormData((old) => ({ ...old, ironFanPrice: value }))
                }
                inputClassName="placeholder:text-[14px]"
                className={!formData.ironFanPrice ? "pb-1.5" : ""}
              />
            </div>
            <label
              htmlFor="ironPrice"
              className="text-[#ffffffae] text-xs whitespace-nowrap"
              onClick={() => setTiefenPriceAble(true)}
            >
              点击编辑
            </label>
          </div>
        </div>
        <div className="mt-3">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>超粉功能</span>
              <span className="text-[#f00]">*</span>
            </p>
            <div className="flex items-center">
              <p className="text-[#ffffffae] text-xs mr-2">是否启用</p>
              <Switch
                checked={formData.openSuper}
                onChange={(value) => {
                  setFormData((old) => ({
                    ...old,
                    openSuper: value,
                  }));
                }}
                style={{
                  "--checked-color": "#FF669E",
                  "--height": "24px",
                  "--width": "36px",
                }}
              />
            </div>
          </div>
        </div>
        {formData.openSuper && (
          <div className="mt-3">
            <div className="flex justify-between items-center">
              <p className="text-sm">
                <span>超粉单次开通类型</span>
                <span className="text-[#f00]">*</span>
              </p>
              <p className="text-[#ffffffae] text-xs">
                （付费后解锁对应期限超粉权益）
              </p>
            </div>
            <Space direction="vertical" block>
              <Checkbox.Group
                onChange={(values) => {
                  setSuperSingleCheckeds(values);
                }}
              >
                <ul>{listItemWithCheckboxMemo}</ul>
              </Checkbox.Group>
            </Space>
          </div>
        )}
        <div className="mt-10 flex justify-center">
          <Button
            size="middle"
            shape="rounded"
            style={{
              "--background-color": "#FF669E",
              paddingLeft: "32px",
              paddingRight: "32px",
            }}
            onClick={handleSubmit}
          >
            保存设置
          </Button>
        </div>
      </div>
    </div>
  );
}