399 lines
13 KiB
JavaScript
399 lines
13 KiB
JavaScript
import {
|
||
View,
|
||
Text,
|
||
Image as NativeImage,
|
||
TouchableOpacity,
|
||
ScrollView,
|
||
} from "react-native";
|
||
import React, { useState, useCallback } from "react";
|
||
import { useTailwind } from "tailwind-rn";
|
||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||
import Toast from "react-native-toast-message";
|
||
import { Image } from "expo-image";
|
||
import { useHeaderHeight } from "@react-navigation/elements";
|
||
import baseRequest from "../../utils/baseRequest";
|
||
import { generateSignature } from "../../utils/crypto";
|
||
import GetWechatModal from "../../components/GetWechatModal";
|
||
import SubmitWechatModal from "../../components/SubmitWechatModal";
|
||
import VideoModal from "../../components/VideoModal";
|
||
import SpaceIntroduceSkeleton from "./skeleton";
|
||
import { usePreventScreenCapture } from "expo-screen-capture";
|
||
import { useFocusEffect } from "@react-navigation/native";
|
||
import { useImageViewer } from "../../context/ImageViewProvider";
|
||
|
||
export default function SpaceIntroduce({ navigation, route }) {
|
||
usePreventScreenCapture();
|
||
const tailwind = useTailwind();
|
||
const insets = useSafeAreaInsets();
|
||
const headerHeight = useHeaderHeight();
|
||
|
||
const { showImageViewer } = useImageViewer();
|
||
|
||
const [data, setData] = useState({});
|
||
const [isLoading, setIsloading] = useState(true);
|
||
const getData = async () => {
|
||
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
|
||
try {
|
||
const base = await baseRequest();
|
||
const signature = await generateSignature({
|
||
mid: route.params.mid,
|
||
...base,
|
||
});
|
||
const _response = await fetch(
|
||
`${apiUrl}/api/zone/list_by_mid?signature=${signature}`,
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
mid: route.params.mid,
|
||
...base,
|
||
}),
|
||
}
|
||
);
|
||
const _data = await _response.json();
|
||
if (_data.ret === -1) {
|
||
Toast.show({
|
||
type: "error",
|
||
text1: _data.msg,
|
||
topOffset: 60,
|
||
});
|
||
return;
|
||
}
|
||
if (_data.data.list[0].visitor_role !== 4) {
|
||
navigation.replace("StreamerSpace", { mid: route.params.mid });
|
||
return;
|
||
}
|
||
setData({
|
||
..._data.data.list[0],
|
||
refund_enable: _data.data.refund_enable,
|
||
refund_status: _data.data.refund_status,
|
||
});
|
||
setIsloading(false);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
useFocusEffect(
|
||
useCallback(() => {
|
||
getData();
|
||
}, [])
|
||
);
|
||
|
||
const images = data?.streamer_ext?.album?.images
|
||
?.slice(0, 5)
|
||
?.map((image) => {
|
||
return image?.urls[0];
|
||
});
|
||
const imagesForImageViewer = images?.map((url) => ({ url }));
|
||
|
||
//当空间价格为0时，直接加入空间
|
||
const handleJoinFreeSpace = async () => {
|
||
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
|
||
try {
|
||
const base = await baseRequest();
|
||
const body = {
|
||
zid: data?.id,
|
||
product_id: "h5_zone_admission",
|
||
...base,
|
||
};
|
||
const signature = await generateSignature(body);
|
||
const _response = await fetch(
|
||
`${apiUrl}/api/zone/free_join?signature=${signature}`,
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(body),
|
||
}
|
||
);
|
||
const _data = await _response.json();
|
||
if (_data.ret === -1) {
|
||
Toast.show({
|
||
type: "error",
|
||
text1: _data.msg,
|
||
topOffset: 60,
|
||
});
|
||
return;
|
||
}
|
||
navigation.replace("StreamerSpace", { mid: route.params.mid });
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
|
||
//点击查看微信按钮
|
||
const [isAddWechatModalVisible, setIsAddWechatModalVisible] = useState(false);
|
||
|
||
//是否展示视频Modal
|
||
const [showVideo, setShowVideo] = useState(false);
|
||
|
||
//加载初始骨架屏
|
||
if (isLoading) return <SpaceIntroduceSkeleton />;
|
||
|
||
return (
|
||
<View
|
||
style={{
|
||
paddingBottom: insets.bottom,
|
||
paddingLeft: insets.left,
|
||
paddingRight: insets.right,
|
||
...tailwind("flex-1"),
|
||
}}
|
||
>
|
||
<ScrollView>
|
||
<View style={tailwind("absolute top-0 left-0")}>
|
||
<Image
|
||
source={data?.streamer_ext?.cover?.images[0]?.urls[0]}
|
||
contentFit="cover"
|
||
transition={500}
|
||
cachePolicy="disk"
|
||
style={{
|
||
aspectRatio: "1/1",
|
||
...tailwind("w-full"),
|
||
}}
|
||
/>
|
||
<View
|
||
style={{
|
||
backgroundColor: "#000000B2",
|
||
...tailwind("absolute w-full h-full"),
|
||
}}
|
||
></View>
|
||
</View>
|
||
<View
|
||
style={{
|
||
marginTop: headerHeight,
|
||
...tailwind("flex flex-row items-center px-4 h-24"),
|
||
}}
|
||
>
|
||
<Image
|
||
style={tailwind(
|
||
"w-[4.6rem] h-[4.6rem] rounded-full border-2 border-white"
|
||
)}
|
||
source={data?.streamer_ext?.avatar?.images[0]?.urls[0]}
|
||
contentFit="cover"
|
||
transition={500}
|
||
cachePolicy="disk"
|
||
/>
|
||
<View style={tailwind("flex flex-col shrink mx-2 justify-between")}>
|
||
<Text
|
||
style={{ fontSize: 22, ...tailwind("text-white font-medium") }}
|
||
numberOfLines={1}
|
||
ellipsizeMode="tail"
|
||
>
|
||
{data?.streamer_ext?.name}
|
||
</Text>
|
||
<View style={tailwind("flex-row flex-nowrap mt-1.5")}>
|
||
<View
|
||
style={tailwind(
|
||
"flex-row items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full"
|
||
)}
|
||
>
|
||
<NativeImage
|
||
source={require("../../assets/icon/12DP/ID.png")}
|
||
/>
|
||
<Text style={tailwind("text-white text-xs font-medium ml-0.5")}>
|
||
{data?.streamer_ext?.user_id}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<TouchableOpacity
|
||
onPress={() => setIsAddWechatModalVisible(true)}
|
||
style={tailwind("flex flex-col items-center ml-auto")}
|
||
>
|
||
<NativeImage
|
||
source={require("../../assets/icon/others/wechat_bg.png")}
|
||
/>
|
||
<Text style={tailwind("text-white text-xs font-medium mt-0.5")}>
|
||
查看微信
|
||
</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
<View style={tailwind("flex flex-row flex-nowrap justify-around mt-2")}>
|
||
<View style={tailwind("flex flex-col items-center")}>
|
||
<Text style={tailwind("text-white text-2xl font-medium")}>
|
||
{data?.zone_moment_count}
|
||
</Text>
|
||
<Text style={tailwind("text-white text-sm font-medium")}>动态</Text>
|
||
</View>
|
||
<View style={tailwind("flex flex-col items-center")}>
|
||
<Text style={tailwind("text-white text-2xl font-medium")}>
|
||
{data?.image_count}
|
||
</Text>
|
||
<Text style={tailwind("text-white text-sm font-medium")}>照片</Text>
|
||
</View>
|
||
<View style={tailwind("flex flex-col items-center")}>
|
||
<Text style={tailwind("text-white text-2xl font-medium")}>
|
||
{data?.video_count}
|
||
</Text>
|
||
<Text style={tailwind("text-white text-sm font-medium")}>视频</Text>
|
||
</View>
|
||
</View>
|
||
<View
|
||
style={tailwind(
|
||
"flex flex-col w-full rounded-t-3xl bg-[#07050A] mt-4 p-4"
|
||
)}
|
||
>
|
||
<View style={tailwind("flex flex-col items-start")}>
|
||
<View>
|
||
<Text style={tailwind("text-white text-lg font-medium")}>
|
||
空间介绍
|
||
</Text>
|
||
<NativeImage
|
||
style={{ right: -5, bottom: 1, ...tailwind("absolute") }}
|
||
source={require("../../assets/icon/others/pinkline.png")}
|
||
/>
|
||
</View>
|
||
</View>
|
||
<Text style={tailwind("text-white text-base mt-3")}>
|
||
{data?.profile}
|
||
</Text>
|
||
<View style={tailwind("flex flex-row flex-wrap mt-2")}>
|
||
<TouchableOpacity
|
||
activeOpacity={1}
|
||
onPress={() => {
|
||
setShowVideo(true);
|
||
}}
|
||
style={tailwind("basis-1/3 p-0.5")}
|
||
>
|
||
<Image
|
||
style={{
|
||
aspectRatio: "1/1",
|
||
...tailwind("w-full rounded"),
|
||
}}
|
||
source={data?.streamer_ext?.shorts?.videos[0]?.cover_urls[0]}
|
||
contentFit="cover"
|
||
transition={500}
|
||
cachePolicy="disk"
|
||
/>
|
||
<View
|
||
style={tailwind(
|
||
"flex absolute w-full h-full left-0 top-0 z-10 justify-center items-center"
|
||
)}
|
||
>
|
||
<NativeImage
|
||
source={require("../../assets/icon/others/play.png")}
|
||
/>
|
||
</View>
|
||
</TouchableOpacity>
|
||
{data?.streamer_ext?.album?.images?.map((item, index) => {
|
||
if (index > 4) return;
|
||
return (
|
||
<TouchableOpacity
|
||
activeOpacity={1}
|
||
onPress={() => {
|
||
showImageViewer({
|
||
imageUrls: imagesForImageViewer,
|
||
index: index,
|
||
});
|
||
}}
|
||
key={index}
|
||
style={tailwind("basis-1/3 p-0.5")}
|
||
>
|
||
<Image
|
||
style={{
|
||
aspectRatio: "1/1",
|
||
...tailwind("w-full rounded"),
|
||
}}
|
||
source={item?.urls[0]}
|
||
contentFit="cover"
|
||
transition={500}
|
||
cachePolicy="disk"
|
||
/>
|
||
</TouchableOpacity>
|
||
);
|
||
})}
|
||
</View>
|
||
{data?.admission_price !== 0 && (
|
||
<>
|
||
<View style={tailwind("flex flex-col items-start mt-8")}>
|
||
<View>
|
||
<Text style={tailwind("text-white text-lg font-medium")}>
|
||
付费须知
|
||
</Text>
|
||
<NativeImage
|
||
style={{ right: -5, bottom: 1, ...tailwind("absolute") }}
|
||
source={require("../../assets/icon/others/pinkline.png")}
|
||
/>
|
||
</View>
|
||
</View>
|
||
<Text style={tailwind("text-white text-base mt-3")}>
|
||
1、加入后，您可以查看空间内相关内容；
|
||
</Text>
|
||
<Text style={tailwind("text-white text-base mt-1")}>
|
||
2、本空间由空间主人自行创建，加入空间前请确认相关风险，本平台不提供相关保证，请避免上当受骗；
|
||
</Text>
|
||
<Text style={tailwind("text-white text-base mt-1")}>
|
||
3、虚拟商品一经售出不予退款，请确认阅读上述条款并无异议后进行购买；
|
||
</Text>
|
||
<Text style={tailwind("text-white text-base mt-1")}>
|
||
4、本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理。
|
||
</Text>
|
||
</>
|
||
)}
|
||
</View>
|
||
</ScrollView>
|
||
{data?.refund_status !== 1 && data?.refund_status !== 2 && (
|
||
<View
|
||
style={tailwind(
|
||
"flex flex-row h-[4.5rem] py-2 px-6 items-center justify-center border-t border-[#FFFFFF26]"
|
||
)}
|
||
>
|
||
<TouchableOpacity
|
||
onPress={
|
||
data?.admission_price === 0
|
||
? handleJoinFreeSpace
|
||
: () =>
|
||
navigation.navigate("WebWithoutHeader", {
|
||
uri:
|
||
process.env.EXPO_PUBLIC_WEB_URL +
|
||
"/zone/pay/" +
|
||
data?.id +
|
||
"/h5_zone_admission/0",
|
||
})
|
||
}
|
||
style={tailwind(
|
||
"flex flex-row items-center justify-center h-12 rounded-full px-10 bg-[#FF669E]"
|
||
)}
|
||
>
|
||
{data?.admission_price !== 0 && (
|
||
<NativeImage
|
||
style={tailwind("ml-2")}
|
||
source={require("../../assets/icon/others/money_pink.png")}
|
||
/>
|
||
)}
|
||
<Text style={tailwind("text-base text-white font-medium ml-2")}>
|
||
{data?.admission_price === 0
|
||
? "免费加入"
|
||
: `${data?.admission_price / 100}元立即加入`}
|
||
</Text>
|
||
<NativeImage source={require("../../assets/icon/32DP/link.png")} />
|
||
</TouchableOpacity>
|
||
</View>
|
||
)}
|
||
{/* 查看微信Modal */}
|
||
{data?.streamer_ext?.wechat_lock_type === 0 ? (
|
||
<GetWechatModal
|
||
visible={isAddWechatModalVisible}
|
||
setVisible={setIsAddWechatModalVisible}
|
||
streamerMid={route.params.mid}
|
||
/>
|
||
) : (
|
||
<SubmitWechatModal
|
||
visible={isAddWechatModalVisible}
|
||
setVisible={setIsAddWechatModalVisible}
|
||
streamerMid={route.params.mid}
|
||
/>
|
||
)}
|
||
{/* 查看视频Modal */}
|
||
<VideoModal
|
||
visible={showVideo}
|
||
setVisible={setShowVideo}
|
||
url={data?.streamer_ext?.shorts?.videos[0]?.urls[0]}
|
||
/>
|
||
</View>
|
||
);
|
||
}
|