315 lines
10 KiB
JavaScript
315 lines
10 KiB
JavaScript
import {
|
||
View,
|
||
Text,
|
||
Modal,
|
||
TouchableOpacity,
|
||
TextInput,
|
||
Keyboard,
|
||
Alert,
|
||
} 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";
|
||
|
||
//todo:每次回来重新获取数据刷新余额、如果是本人则直接展示微信
|
||
//todo:等待接口上线，完善样式，测试
|
||
|
||
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,
|
||
});
|
||
//是否已经解锁微信
|
||
setIsWechatUnlocked(temStreamerData.data.is_unlock_wechat);
|
||
//获取用户数据
|
||
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;
|
||
getInitData();
|
||
}, [streamerMid]);
|
||
|
||
//点击解锁微信按钮
|
||
const unlockWechat = async () => {
|
||
if (userData?.gold_num >= streamerData?.wechat_coin_price) {
|
||
//先提交用户微信和备注再进行支付，支付成功后添加解锁关系
|
||
//先支付，再提交用户微信和备注
|
||
if (!userWechat) {
|
||
Alert.alert(null, "请填写您的微信");
|
||
return;
|
||
}
|
||
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;
|
||
}
|
||
//提交用户微信和备注
|
||
const signature2 = await generateSignature({
|
||
order_id: unlockData.data.order_id,
|
||
wechat: userWechat,
|
||
note: remarks,
|
||
...base,
|
||
});
|
||
const submitWechatResponse = await fetch(
|
||
`${apiUrl}/api/vas/consumer_fill_contact?signature=${signature2}`,
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
order_id: unlockData.data.order_id,
|
||
wechat: userWechat,
|
||
note: remarks,
|
||
...base,
|
||
}),
|
||
}
|
||
);
|
||
const submitWechatData = await submitWechatResponse.json();
|
||
if (submitWechatData.ret === -1) {
|
||
Toast.show({
|
||
type: "error",
|
||
text1: submitWechatData.msg,
|
||
topOffset: 60,
|
||
});
|
||
return;
|
||
}
|
||
//展示解锁成功界面
|
||
setIsWechatUnlocked(true);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
} else {
|
||
setIsMoneyEnough(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Modal
|
||
visible={visible}
|
||
transparent={true}
|
||
statusBarTranslucent
|
||
animationType="fade"
|
||
>
|
||
<TouchableOpacity
|
||
activeOpacity={1}
|
||
onPress={() => setVisible(false)}
|
||
style={{
|
||
backgroundColor: "#00000080",
|
||
...tailwind("flex-1 justify-center items-center"),
|
||
}}
|
||
>
|
||
<TouchableOpacity
|
||
activeOpacity={1}
|
||
onPress={() => Keyboard.dismiss()}
|
||
style={tailwind("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 ? (
|
||
<View>
|
||
<Text style={tailwind("text-sm text-white mt-2")}>
|
||
已成功提交您的微信，请耐心等待
|
||
</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 && (
|
||
<TouchableOpacity
|
||
onPress={unlockWechat}
|
||
style={tailwind(
|
||
"px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
|
||
)}
|
||
>
|
||
<Text style={tailwind("text-white text-base font-medium")}>
|
||
提交并支付（{streamerData?.wechat_coin_price}金币）
|
||
</Text>
|
||
</TouchableOpacity>
|
||
)}
|
||
</>
|
||
) : (
|
||
<>
|
||
<Text style={tailwind("text-2xl text-white font-medium mb-4")}>
|
||
余额不足
|
||
</Text>
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
navigation.navigate("Wallet");
|
||
setVisible(false);
|
||
}}
|
||
style={tailwind(
|
||
"px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
|
||
)}
|
||
>
|
||
<Text style={tailwind("text-white text-base")}>前往充值</Text>
|
||
</TouchableOpacity>
|
||
</>
|
||
)}
|
||
</TouchableOpacity>
|
||
</TouchableOpacity>
|
||
</Modal>
|
||
);
|
||
}
|