tiefen_space_h5/components/AddWeChat/index.js

"use client";

import React, { useEffect, useState } from "react";
import { Image, Mask, Toast, Input, TextArea, DotLoading } from "antd-mobile";
import requireAPI from "@/utils/requireAPI";
import { get } from "@/utils/storeInfo";
import { useRouter } from "next/navigation";
import { getStreamerDetailInfo } from "@/api/space";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCopy } from "@fortawesome/free-solid-svg-icons";
export default function AddWeChat({
  visible,
  closeMask,
  name,
  price,
  streamerMid,
  avatar,
  streamerData,
}) {
  const [isMoneyEnough, setIsMoneyEnough] = useState(true);
  //是否已经解锁微信
  const [streamerDetailData, setStreamerDetailData] = useState(null);
  const [wechat, setWechat] = useState(<DotLoading />);
  //保存用户微信号
  const [userWechat, setUserWechat] = useState("");
  //保存用户备注
  const [remarks, setRemarks] = useState("");
  const router = useRouter();
  useEffect(() => {
    console.log("avatar", avatar);
    if (!streamerMid) return;
    getStreamerDetailInfo(streamerMid).then((res) => {
      setStreamerDetailData(res);
    });
  }, [streamerData]);
  useEffect(() => {
    console.log("avatar", avatar);
    if (!streamerDetailData || !streamerDetailData?.is_unlock_wechat) return;
    requireAPI("POST", "/api/vas/query_wechat", {
      body: {
        uid: streamerMid,
      },
    }).then((res) => {
      setWechat(res.data?.wechat_contact);
    });
  }, [streamerDetailData]);
  //点击解锁微信按钮
  const unlockWechat = async (type) => {
    //余额不够就显示余额不足前往充值，够就直接购买

    //先支付，支付成功后添加解锁关系，再展示解锁界面
    //支付金币解锁微信
    const account = get("account");
    if (account) {
      try {
        const userResponse = await requireAPI(
          "POST",
          "/api/account/list_by_mid",
          {
            body: {
              mid: account.mid,
            },
          }
        );
        if (userResponse.ret === -1) {
          Toast.show({
            icon: "fail",
            content: data.msg,
            position: "top",
          });
          return;
        }
        if (userResponse?.data.account?.gold_num >= price) {
          console.log("余额足够");
          if (type) {
            if (!userWechat) {
              Toast.show({
                content: "请填写您的微信",
                position: "top",
              });
              return;
            }

            //付款函数
            const payCoin = async () => {
              try {
                //支付金币解锁微信
                const unlockData = await requireAPI(
                  "POST",
                  "/api/vas/one_step_unlock",
                  {
                    body: {
                      contact_product_id: "contact_wechat",
                      uid: streamerMid,
                    },
                  }
                );
                if (unlockData.ret === -1) {
                  Toast.show({
                    icon: "fail",
                    content: unlockData.msg,
                    position: "top",
                  });
                  return;
                }
                return unlockData.data.order_id;
              } catch (error) {
                console.error(error);
              }
            };

            //提交微信函数
            const submitWechat = async (order_id) => {
              //提交用户微信和备注
              
              try {
                const submitWechatData = await requireAPI(
                  "POST",
                  "/api/vas/consumer_fill_contact",
                  {
                    body: {
                      order_id: order_id,
                      wechat: userWechat,
                      note: remarks,
                    },
                  }
                );
                if (submitWechatData.ret === -1) {
                  Toast.show({
                    icon: "fail",
                    content: submitWechatData.msg,
                    position: "top",
                  });
                  return;
                }
              } catch (error) {
                console.error(error);
              }
            };

            //用户未解锁微信情况：先支付，再提交用户微信和备注
            if (streamerDetailData.is_unlock_wechat === 1) {
              //用户已解锁微信情况：直接提交用户微信和备注
              console.log("ccccc",streamerDetailData,streamerData.wechat_order_id)
              await submitWechat(streamerDetailData.wechat_order_id);
              setStreamerDetailData({
                ...streamerDetailData,
                wechat_order_status: 3,
              });
            } else {
              const order_id = await payCoin();
              if (!order_id) return;
              
              await submitWechat(order_id);
              //展示解锁成功界面
              // setIsWechatUnlocked(true);
              setStreamerDetailData({
                ...streamerDetailData,
                // wechat_order_status: 3,
                wechat_order_status:1
              });
              return;
            }
          } else {
            const data = await requireAPI("POST", "/api/vas/one_step_unlock", {
              body: {
                contact_product_id: "contact_wechat",
                uid: streamerMid,
              },
            });
            if (data.ret === -1) {
              Toast.show({
                icon: "fail",
                content: data.msg,
                position: "top",
              });
              return;
            }
            setStreamerDetailData({
              ...streamerDetailData,
              wechat_order_status: 3,
              wechat_order_status:1
            });
          }

          //展示解锁界面
          // setIsWechatUnlocked(true);
          getStreamerDetailInfo(streamerMid).then((res) => {
            setStreamerDetailData(res);
          });
        } else {
          setIsMoneyEnough(false);
        }
      } catch (error) {
        console.error(error);
      }
    }
  };

  return (
    <Mask visible={visible}>
      <div className="relative w-screen h-screen">
        <div className="w-full h-full" onClick={() => closeMask(false)}></div>
        <div className="absolute top-1/2 left-1/2 -ml-[35vw] -mt-[35vw] w-[70vw] h-max flex flex-col justify-center items-center p-4 pt-10 bg-[#261e30] rounded-2xl">
          {isMoneyEnough ? (
            <>
              <Image
                src={avatar}
                width={64}
                height={64}
                className="rounded-full absolute -top-8"
                fit="cover"
              />
              <p className="text-2xl font-bold">{name}</p>
              <div className="mt-2 w-full">
                <div>
                  {streamerData?.streamer_ext?.wechat_lock_type === 0 ? (
                    <div className="flex flex-col justify-center items-center">
                      <div className="my-2 bg-[#FFFFFF1A] px-4 py-2 rounded-lg text-base text-center">
                        {streamerDetailData?.is_unlock_wechat
                          ? wechat
                          : "解锁后展示"}
                        {!!streamerDetailData?.is_unlock_wechat && (
                          <FontAwesomeIcon
                            icon={faCopy}
                            // size="sm"
                            color="#ffffff"
                            className="ml-2"
                          />
                        )}
                      </div>
                      <p className="text-[red] text-center mb-2">
                        添加时请备注自己“铁粉空间”昵称
                        <br />
                        若解锁后72小时为通过好友，请联系客服
                      </p>
                      {(!streamerDetailData?.is_unlock_wechat ||
                        streamerDetailData?.wechat_order_status === 2) && (
                        <div
                          className="bg-primary px-4 py-2 rounded-full flex items-center justify-center"
                          onClick={()=>unlockWechat()}
                        >
                          {!streamerDetailData?.is_unlock_wechat && (
                            <span className="text-[16px] whitespace-nowrap">
                              解锁微信（
                              {
                                streamerDetailData?.streamer_ext
                                  ?.wechat_coin_price
                              }
                              金币）
                            </span>
                          )}
                        </div>
                      )}
                    </div>
                  ) : (
                    <div>
                      {streamerDetailData?.is_unlock_wechat &&
                      streamerDetailData?.wechat_order_status !== 2 ? (
                        <p className="text-sm text-center text-white mt-2">
                          {(streamerDetailData?.wechat_order_status === 0 ||
                            streamerDetailData?.wechat_order_status === 3) &&
                            "已成功提交您的微信，请耐心等待"}
                          {(streamerDetailData?.wechat_order_status === 4 ||
                            streamerDetailData?.wechat_order_status === 5) &&
                            "已确认添加，订单完成"}
                        </p>
                      ) : (
                        <div>
                          <div>
                            <p>
                              <span className="text-[#F53030]">*</span>
                              您的微信
                            </p>
                            <div className="text-white text-sm border border-[#2c2b2f] rounded-xl p-2 my-1 w-full">
                              <Input
                                placeholder="填写您的微信，以便Ta主动联系您"
                                style={{ "--font-size": "small" }}
                                onChange={(value) => setUserWechat(value)}
                                value={userWechat}
                              />
                            </div>
                          </div>
                          <div className="mt-2">
                            <p>备注</p>
                            <div className="text-white border border-[#2c2b2f] rounded-xl p-2 my-1 w-full">
                              <TextArea
                                placeholder="如添加好友需填写验证信息，请将相应答案填写在此处"
                                style={{ "--font-size": "small" }}
                                onChange={(value) => setRemarks(value)}
                                value={remarks}
                              />
                            </div>
                          </div>
                        </div>
                      )}
                      <p className="text-xs text-center text-[#F53030] font-medium my-2">
                        若解锁后72小时未通过好友，请联系客服
                      </p>
                      {(!streamerDetailData?.is_unlock_wechat ||
                        streamerDetailData?.wechat_order_status === 2) && (
                        <div
                          className="bg-primary px-4 py-2 rounded-full flex items-center justify-center"
                          onClick={() => unlockWechat("sendWechat")}
                        >
                          {/* {!streamerDetailData?.is_unlock_wechat && (
                        <span className="text-[16px] whitespace-nowrap">
                          解锁微信（
                          {streamerDetailData?.streamer_ext?.wechat_coin_price}
                          金币）
                        </span>
                      )} */}
                          {!streamerDetailData?.is_unlock_wechat && (
                            <span className="text-[16px] whitespace-nowrap">
                              提交并支付（
                              {
                                streamerDetailData?.streamer_ext
                                  ?.wechat_coin_price
                              }
                              金币）
                            </span>
                          )}
                          {streamerDetailData?.wechat_order_status === 2 && (
                            <span className="text-white text-base font-medium px-4 whitespace-nowrap">
                              提交微信
                            </span>
                          )}
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </div>
            </>
          ) : (
            <>
              <p className="text-2xl text-white font-medium mb-4">余额不足</p>
              <div
                onClick={() => {
                  router.push("/my/wallet");
                  closeMask(false);
                  setIsMoneyEnough(true);
                }}
                className="px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
              >
                <span className="text-white text-base">前往充值</span>
              </div>
            </>
          )}
        </div>
      </div>
    </Mask>
  );
}