tiefen_space_app/components/SubmitWechatModal/index.jsx

import {
  View,
  Text,
  Modal,
  TouchableOpacity,
  TextInput,
  Keyboard,
  Alert,
  KeyboardAvoidingView,
} from "react-native";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { Image } from "expo-image";
import { useNavigation } from "@react-navigation/native";
import { get } from "../../utils/storeInfo";
import baseRequest from "../../utils/baseRequest";
import Toast from "react-native-toast-message";
import { generateSignature } from "../../utils/crypto";

export default function SubmitWechatModal({
  visible,
  setVisible,
  streamerMid,
}) {
  const tailwind = useTailwind();
  const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
  const navigation = useNavigation();

  //保存用户数据
  const [userData, setUserData] = useState({});
  //保存主播数据
  const [streamerData, setStreamerData] = useState({});
  //是否已经解锁微信
  const [isWechatUnlocked, setIsWechatUnlocked] = useState(false);
  //是否展示余额不足内容
  const [isMoneyEnough, setIsMoneyEnough] = useState(true);
  //保存用户微信号
  const [userWechat, setUserWechat] = useState("");
  //保存用户备注
  const [remarks, setRemarks] = useState("");

  useEffect(() => {
    const getInitData = async () => {
      const account = await get("account");
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const base = await baseRequest();
      const signature = await generateSignature({
        mid: streamerMid,
        ...base,
      });
      try {
        //获取主播数据
        const streamerResponse = await fetch(
          `${apiUrl}/api/streamer/list_ext_by_mid?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              mid: streamerMid,
              ...base,
            }),
          }
        );
        const temStreamerData = await streamerResponse.json();
        if (temStreamerData.ret === -1) {
          Toast.show({
            type: "error",
            text1: temStreamerData.msg,
            topOffset: 60,
          });
          return;
        }
        setStreamerData({
          ...temStreamerData.data.streamer_ext,
          wechat_coin_price:
            temStreamerData.data.streamer_ext.wechat_coin_price,
          wechat_order_id: temStreamerData.data.wechat_order_id,
          wechat_order_status: temStreamerData.data.wechat_order_status,
        });
        //是否已经解锁微信
        setIsWechatUnlocked(
          temStreamerData.data.is_unlock_wechat === 1 ? true : false
        );
        //获取用户数据
        const signature2 = await generateSignature({
          ...base,
          mid: account.mid,
        });
        const userResponse = await fetch(
          `${apiUrl}/api/account/list_by_mid?signature=${signature2}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              ...base,
              mid: account.mid,
            }),
          }
        );
        const temUserData = await userResponse.json();
        if (temUserData.ret === -1) {
          Toast.show({
            type: "error",
            text1: temUserData.msg,
            topOffset: 60,
          });
          return;
        }
        setUserData(temUserData.data.account);
      } catch (error) {
        console.error(error);
      }
    };
    if (!streamerMid) return;
    if (!visible) return;
    getInitData();
  }, [streamerMid, visible]);

  //点击解锁微信按钮
  const unlockWechat = async () => {
    if (
      userData?.gold_num >= streamerData?.wechat_coin_price ||
      (isWechatUnlocked && streamerData?.wechat_order_status === 2)
    ) {
      if (!userWechat) {
        Alert.alert(null, "请填写您的微信");
        return;
      }

      //付款函数
      const payCoin = async () => {
        const apiUrl = process.env.EXPO_PUBLIC_API_URL;
        const base = await baseRequest();
        const signature = await generateSignature({
          contact_product_id: "contact_wechat",
          uid: streamerMid,
          ...base,
        });
        try {
          //支付金币解锁微信
          const unlockResponse = await fetch(
            `${apiUrl}/api/vas/one_step_unlock?signature=${signature}`,
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                contact_product_id: "contact_wechat",
                uid: streamerMid,
                ...base,
              }),
            }
          );
          const unlockData = await unlockResponse.json();
          if (unlockData.ret === -1) {
            Toast.show({
              type: "error",
              text1: unlockData.msg,
              topOffset: 60,
            });
            return;
          }
          return unlockData.data.order_id;
        } catch (error) {
          console.error(error);
        }
      };

      //提交微信函数
      const submitWechat = async (order_id) => {
        const apiUrl = process.env.EXPO_PUBLIC_API_URL;
        const base = await baseRequest();
        //提交用户微信和备注
        const body = {
          order_id: order_id,
          wechat: userWechat,
          note: remarks,
          ...base,
        };
        const signature2 = await generateSignature(body);
        try {
          const submitWechatResponse = await fetch(
            `${apiUrl}/api/vas/consumer_fill_contact?signature=${signature2}`,
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify(body),
            }
          );
          const submitWechatData = await submitWechatResponse.json();
          if (submitWechatData.ret === -1) {
            Toast.show({
              type: "error",
              text1: submitWechatData.msg,
              topOffset: 60,
            });
            return;
          }
        } catch (error) {
          console.error(error);
        }
      };

      //用户未解锁微信情况：先支付，再提交用户微信和备注
      if (!isWechatUnlocked) {
        const order_id = await payCoin();
        if (!order_id) return;
        await submitWechat(order_id);
        //展示解锁成功界面
        setIsWechatUnlocked(true);
        return;
      }

      //用户已解锁微信情况：直接提交用户微信和备注
      if (isWechatUnlocked) {
        await submitWechat(streamerData.wechat_order_id);
        setStreamerData({
          ...streamerData,
          wechat_order_status: 3,
        });
      }
    } else {
      setIsMoneyEnough(false);
    }
  };

  return (
    <Modal
      visible={visible}
      transparent={true}
      statusBarTranslucent
      animationType="fade"
    >
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => {
          setVisible(false);
          setIsMoneyEnough(true);
        }}
        style={{
          backgroundColor: "#00000080",
          ...tailwind("flex flex-1 justify-center items-center"),
        }}
      >
        <KeyboardAvoidingView
          style={tailwind("flex flex-col items-center w-full")}
          behavior="padding"
        >
          <TouchableOpacity
            activeOpacity={1}
            onPress={() => Keyboard.dismiss()}
            style={tailwind(
              "flex flex-col p-4 rounded-2xl bg-[#1E1C29] items-center w-3/4"
            )}
          >
            {isMoneyEnough ? (
              <>
                <View style={tailwind("items-center")}>
                  <Image
                    style={tailwind("w-16 h-16 rounded-full absolute -top-12")}
                    source={streamerData?.avatar?.images[0]?.urls[0]}
                    placeholder={blurhash}
                    contentFit="cover"
                    transition={1000}
                    cachePolicy="disk"
                  />
                </View>
                <Text style={tailwind("text-2xl text-white font-medium mt-4")}>
                  {streamerData?.name}
                </Text>
                {/* 提交微信区 */}
                {isWechatUnlocked && streamerData?.wechat_order_status !== 2 ? (
                  <View>
                    <Text style={tailwind("text-sm text-white mt-2")}>
                      {(streamerData?.wechat_order_status === 0 ||
                        streamerData?.wechat_order_status === 3) &&
                        "已成功提交您的微信，请耐心等待"}
                      {(streamerData?.wechat_order_status === 4 ||
                        streamerData?.wechat_order_status === 5) &&
                        "已确认添加，订单完成"}
                    </Text>
                  </View>
                ) : (
                  <View style={tailwind("flex flex-col items-start w-full")}>
                    <Text style={tailwind("text-base text-white font-medium")}>
                      <Text style={tailwind("text-[#F53030]")}>*</Text>您的微信
                    </Text>
                    <TextInput
                      placeholder="填写您的微信，以便Ta主动联系您"
                      placeholderTextColor="#FFFFFF80"
                      style={tailwind(
                        "text-white border border-[#2c2b2f] rounded-xl p-2 my-1 w-full"
                      )}
                      underlineColorAndroid="transparent"
                      onChangeText={(value) => setUserWechat(value)}
                      value={userWechat}
                    />
                    <Text style={tailwind("text-base text-white font-medium")}>
                      备注
                    </Text>
                    <TextInput
                      placeholder="如添加好友需填写验证信息，请将相应答案填写在此处"
                      placeholderTextColor="#FFFFFF80"
                      multiline
                      textAlignVertical="top"
                      style={tailwind(
                        "text-white border border-[#2c2b2f] rounded-xl p-2 my-1 w-full"
                      )}
                      underlineColorAndroid="transparent"
                      onChangeText={(value) => setRemarks(value)}
                      value={remarks}
                    />
                  </View>
                )}
                <Text
                  style={tailwind("text-xs text-[#F53030] font-medium my-2")}
                >
                  若解锁后72小时未通过好友，请联系客服
                </Text>
                {(!isWechatUnlocked ||
                  streamerData?.wechat_order_status === 2) && (
                  <TouchableOpacity
                    onPress={unlockWechat}
                    style={tailwind(
                      "px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
                    )}
                  >
                    {!isWechatUnlocked && (
                      <Text
                        style={tailwind(
                          "text-white text-base font-medium px-4"
                        )}
                      >
                        提交并支付（{streamerData?.wechat_coin_price}金币）
                      </Text>
                    )}
                    {streamerData?.wechat_order_status === 2 && (
                      <Text
                        style={tailwind(
                          "text-white text-base font-medium px-4"
                        )}
                      >
                        提交微信
                      </Text>
                    )}
                  </TouchableOpacity>
                )}
              </>
            ) : (
              <>
                <Text style={tailwind("text-2xl text-white font-medium mb-4")}>
                  余额不足
                </Text>
                <TouchableOpacity
                  onPress={() => {
                    navigation.navigate("Wallet");
                    setVisible(false);
                    setIsMoneyEnough(true);
                  }}
                  style={tailwind(
                    "px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
                  )}
                >
                  <Text style={tailwind("text-white text-base")}>前往充值</Text>
                </TouchableOpacity>
              </>
            )}
          </TouchableOpacity>
        </KeyboardAvoidingView>
      </TouchableOpacity>
    </Modal>
  );
}