139 lines
5.0 KiB
JavaScript
139 lines
5.0 KiB
JavaScript
import {
|
||
View,
|
||
Text,
|
||
Modal,
|
||
TouchableWithoutFeedback,
|
||
TouchableOpacity,
|
||
Alert,
|
||
} from "react-native";
|
||
import React, { useState, useMemo } from "react";
|
||
import { useTailwind } from "tailwind-rn";
|
||
import { LinearProgress, Icon } from "@rneui/themed";
|
||
import * as Clipboard from "expo-clipboard";
|
||
|
||
/*
|
||
data格式：
|
||
{
|
||
nowFriendshipNum:int,
|
||
totalFriendshipNum:int,
|
||
wechat:string
|
||
}
|
||
*/
|
||
|
||
export default function FriendShipModal({ visible, setVisible, data }) {
|
||
const tailwind = useTailwind();
|
||
const friendshipProgress = useMemo(
|
||
() => Math.floor((data.nowFriendshipNum / data.totalFriendshipNum) * 100),
|
||
[data]
|
||
);
|
||
const [isWechatShow, setIsWechatShow] = useState(false);
|
||
return (
|
||
<Modal
|
||
visible={visible}
|
||
transparent={true}
|
||
statusBarTranslucent
|
||
animationType="fade"
|
||
>
|
||
<TouchableWithoutFeedback onPress={() => setVisible(false)}>
|
||
<View
|
||
style={{
|
||
backgroundColor: "rgba(0,0,0,0.3)",
|
||
...tailwind("flex-1 justify-center items-center"),
|
||
}}
|
||
>
|
||
<View style={tailwind("items-start bg-white rounded-lg p-4 w-3/4")}>
|
||
<View style={tailwind("flex-row items-end")}>
|
||
<Text style={tailwind("text-base")}>当前亲密度为：</Text>
|
||
<Text style={tailwind("text-2xl text-red-400")}>
|
||
{`${friendshipProgress}%`}
|
||
</Text>
|
||
</View>
|
||
<LinearProgress
|
||
style={tailwind("flex-row w-full h-2 mt-2 rounded-full")}
|
||
value={friendshipProgress / 100}
|
||
color="#f87171"
|
||
variant="determinate"
|
||
/>
|
||
<Text
|
||
style={tailwind("text-sm text-red-400")}
|
||
>{`${data.nowFriendshipNum}/${data.totalFriendshipNum} 亲密值`}</Text>
|
||
<Text style={tailwind("text-sm text-gray-400 mt-2")}>
|
||
1金币=1亲密值，亲密值达到
|
||
<Text style={tailwind("text-red-400")}>
|
||
{data.totalFriendshipNum}
|
||
</Text>
|
||
即可解锁她的微信哦！
|
||
</Text>
|
||
{friendshipProgress >= 100 ? (
|
||
<TouchableOpacity
|
||
style={{
|
||
...tailwind(
|
||
"w-full p-2 rounded-full mt-2 flex-row justify-center items-center"
|
||
),
|
||
backgroundColor: isWechatShow ? "#9ca3af" : "#4ade80",
|
||
}}
|
||
onPress={async () => {
|
||
if (!isWechatShow) {
|
||
setIsWechatShow(true);
|
||
} else {
|
||
await Clipboard.setStringAsync(data.wechat);
|
||
Alert.alert(null, "复制成功");
|
||
setIsWechatShow(false);
|
||
}
|
||
}}
|
||
>
|
||
<Text style={tailwind("text-base text-white text-center")}>
|
||
{isWechatShow ? data.wechat : "查看微信"}
|
||
</Text>
|
||
{isWechatShow && (
|
||
<Icon
|
||
type="ionicon"
|
||
name="copy"
|
||
color="#ffffff"
|
||
size={12}
|
||
containerStyle={tailwind("ml-2")}
|
||
/>
|
||
)}
|
||
</TouchableOpacity>
|
||
) : (
|
||
<TouchableOpacity
|
||
activeOpacity={1}
|
||
style={tailwind("w-full p-2 bg-gray-300 rounded-full mt-2")}
|
||
>
|
||
<Text style={tailwind("text-base text-white text-center")}>
|
||
暂未解锁
|
||
</Text>
|
||
</TouchableOpacity>
|
||
)}
|
||
<Text style={tailwind("text-sm text-red-600 mt-2 font-semibold")}>
|
||
温馨提示
|
||
</Text>
|
||
<Text style={tailwind("text-xs text-red-400 mt-1")}>
|
||
1、亲密度代表了熟悉程度,循序渐进的积累更有助于稳固彼此的亲密关系哦！
|
||
{"\n"}
|
||
2、平台禁止一切诈骗、涉黄等违法行为。{"\n"}
|
||
3、如主播在直播任何场合以陪玩、送礼等方式进行诱导用户添加个人联系方式、打赏、私下交易，进行违法行为，一经发现永久封禁，请谨慎判断，以防人身或财产损失。请用户注意财产安全，蓬防网络诈骗。此外，用户在第三方平台与主播产生的任何风险与财产损失与平台无关。
|
||
</Text>
|
||
<View style={tailwind("items-center justify-center w-full")}>
|
||
<Text
|
||
style={tailwind(
|
||
"text-xs text-red-600 mt-2 font-semibold text-center"
|
||
)}
|
||
>
|
||
24小时内未成功添加微信请联系客服
|
||
</Text>
|
||
<Text
|
||
style={tailwind(
|
||
"text-xs text-red-600 font-semibold text-center"
|
||
)}
|
||
>
|
||
若发现主播违规行为请联系客服进行举报
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</TouchableWithoutFeedback>
|
||
</Modal>
|
||
);
|
||
}
|