tiefen_space_h5/app/space/setting/page.js

"use client";

import React, { useEffect, useState, useCallback } from "react";
import { Image, Avatar, Divider, Dialog, Toast } from "antd-mobile";
import { redirect, useRouter, useSearchParams } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faAngleLeft,
  faAngleRight,
  faCalendar,
} from "@fortawesome/free-solid-svg-icons";
import { getSpaceData } from "@/api/space";
import requireAPI from "@/utils/requireAPI";
export default function Setting() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [streamerInfo, setStreamerInfo] = useState(null);
  useEffect(() => {
    (async () => {
      const currentData = searchParams.get("data");
      if (currentData) {
        let data = await JSON.parse(decodeURIComponent(currentData));

        await getSpaceData(Number(data.mid)).then((res) => {
          setStreamerInfo({ ...data, refund_enable: res?.refund_enable });
        });
      }
    })();
  }, []);
  const handleShowDialog = () => {
    const result = Dialog.show({
      title: "是否确认退出空间？",
      content:
        "一旦退出，您的空间成员身份将会被取消，若当前空间为付费空间，下次加入时，需要再次付费。请确保知晓以上内容后谨慎选择退出。",
      bodyStyle: {
        maxHeight: "none",
        width: "80vw",
        position: "fixed",
        top: "200px",
        left: "10vw",
        "--text-color": "#fff",
        color: "#fff",
      },
      // cancelText:"确认",
      // confirmText:"取消",
      style: {
        "--text-color": "#fff",
      },
      closeOnAction: true,
      actions: [
        [
          {
            key: "submit",
            text: "确认",
            style: { color: "#ffffff80" },
            onClick: handleExitSpace,
          },
          {
            key: "close",
            text: "取消",
            bold: true,
            style: { color: "#fff" },
            onClick: () => {
              Dialog?.clear();
            },
          },
        ],
      ],
    });
    // if (result) {
    //   Toast.show({ content: "点击了确认", position: "bottom" });
    // }
  };
  //格式化时间
  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();
    return `${year}/${month}/${day}`;
  }, []);
  const handleExitSpace = async () => {
    try {
      const _data = await requireAPI("POST", "/api/zone/exit", {
        body: {
          zid: streamerInfo?.id,
        },
      });
      if (_data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: _data.msg,
          position: "top",
        });
        return;
      }
      Toast.show({
        icon: "success",
        content: "退出空间成功",
        position: "top",
      });
      setTimeout(() => router.replace("/"), 500);
    } catch (error) {
      // console.error(error);
    }
  };
  return (
    <div className="">
      <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 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="p-4 pt-20">
        <div
          className="flex justify-between items-center"
          onClick={() => {
            router.push(
              "setting/spaceIntroSetting?data=" + searchParams.get("data")
            );
          }}
        >
          <div className="flex items-center">
            <Avatar
              rounded-full
              mr-4
              src={streamerInfo?.avatar}
              className="mr-4"
              style={{ "--size": "52px", "--border-radius": "50%" }}
            />
            <div>
              <p className="text-xl">{streamerInfo?.name}</p>
              <ul className="flex">
                <li className="h-4 mr-1 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
                  <Image
                    src={
                      process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                      "/icons/info/ID.png"
                    }
                    width={14}
                    height={14}
                    className="w-4 h-full mr-1"
                    placeholder=""
                  />
                  <span>{streamerInfo?.user_id}</span>
                </li>
                <li className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
                  <FontAwesomeIcon
                    icon={faCalendar}
                    size="sm"
                    className="mr-1"
                  />
                  <span>{formatDate(streamerInfo?.ct)}</span>
                </li>
              </ul>
            </div>
          </div>
          <FontAwesomeIcon
            icon={faAngleRight}
            size="xl"
            style={{ maxWidth: "12px" }}
          />
        </div>
        <ul className="mt-6">
          <li>
            <div
              onClick={() => router.push("/share/" + streamerInfo.mid)}
              className="flex justify-between"
            >
              <span className="text-base text-white">分享空间</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="xl"
                style={{ maxWidth: "12px" }}
              />
            </div>
            <Divider />
          </li>
          {streamerInfo?.visitor_role === 3 && (
            <>
              <li>
                <div
                  onClick={() =>
                    router.push("setting/spaceMember?zid=" + streamerInfo.id)
                  }
                  className="flex justify-between"
                >
                  <span className="text-base text-white">空间成员</span>
                  <FontAwesomeIcon
                    icon={faAngleRight}
                    size="xl"
                    style={{ maxWidth: "12px" }}
                  />
                </div>
                <Divider />
              </li>
              <li>
                <div
                  onClick={() =>
                    router.push(
                      "setting/spacePaymentSetting?zid=" + streamerInfo.id
                    )
                  }
                  className="flex justify-between"
                >
                  <span className="text-base text-white">空间付费设置</span>
                  <FontAwesomeIcon
                    icon={faAngleRight}
                    size="xl"
                    style={{ maxWidth: "12px" }}
                  />
                </div>
                <Divider />
              </li>
            </>
          )}
          {streamerInfo?.refund_enable === 1 &&
            streamerInfo?.admission_price > 0 &&
            streamerInfo?.visitor_role === 0 && (
              <li>
                <div
                  onClick={() =>
                    router.push(
                      "setting/spaceRefund?mid=" +
                        streamerInfo.mid +
                        "&id=" +
                        streamerInfo.id
                    )
                  }
                  className="flex justify-between"
                >
                  <span className="text-base text-white">申请退款</span>
                  <FontAwesomeIcon
                    icon={faAngleRight}
                    size="xl"
                    style={{ maxWidth: "12px" }}
                  />
                </div>
                <Divider />
              </li>
            )}
          {streamerInfo?.visitor_role != 3 && (
            <li onClick={handleShowDialog}>
              <div className="flex justify-between">
                <span className="text-base text-white">退出空间</span>
                <FontAwesomeIcon
                  icon={faAngleRight}
                  size="xl"
                  style={{ maxWidth: "12px" }}
                />
              </div>
              <Divider />
            </li>
          )}
        </ul>
      </div>
    </div>
  );
}