tiefen_space_app/components/SubmitWechatModal/index.jsx

381 lines
12 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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>
);
}