315 lines
10 KiB
React
315 lines
10 KiB
React
|
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>
|
|||
|
|
);
|
|||
|
|
}
|