1134 lines
36 KiB
JavaScript
1134 lines
36 KiB
JavaScript
import {
|
|
View,
|
|
Text,
|
|
Image as NativeImage,
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
Dimensions,
|
|
} from "react-native";
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
import { useTailwind } from "tailwind-rn";
|
|
import {
|
|
useSafeAreaInsets,
|
|
SafeAreaProvider,
|
|
} from "react-native-safe-area-context";
|
|
import {
|
|
SearchBar,
|
|
ListItem,
|
|
Icon,
|
|
CheckBox,
|
|
BottomSheet,
|
|
} from "@rneui/themed";
|
|
import { Image } from "expo-image";
|
|
import Empty from "../../components/Empty";
|
|
import Toast from "react-native-toast-message";
|
|
import baseRequest from "../../utils/baseRequest";
|
|
import { generateSignature } from "../../utils/crypto";
|
|
import MyDivider from "../../components/MyDivider/index";
|
|
import MySlider from "../../components/MySlider";
|
|
import Picker from "../../components/Picker";
|
|
import { get } from "../../utils/storeInfo";
|
|
export default function Search({ navigation, route }) {
|
|
const tailwind = useTailwind();
|
|
const insets = useSafeAreaInsets();
|
|
|
|
const searchRef = useRef(null);
|
|
const screenDimensions = Dimensions.get("screen");
|
|
const [search, setSearch] = useState("");
|
|
const [isMember, setIsMember] = useState(0);
|
|
const [streamers, setStreamers] = useState([]);
|
|
const [recommList, setRecommList] = useState([]);
|
|
const [zones, setZones] = useState([]);
|
|
const [isloading, setIsloading] = useState(false);
|
|
const [isFilterVisible, setIsFilterVisible] = useState({
|
|
comprehensive: false,
|
|
zone_admission_price: false,
|
|
});
|
|
const filters = [
|
|
{
|
|
name: "年龄",
|
|
upper_bound: 60,
|
|
lower_bound: 18,
|
|
default: 19,
|
|
step: 1,
|
|
type: "slider",
|
|
unit: "岁",
|
|
key: "age",
|
|
stepValues: Array(61)
|
|
.fill(null)
|
|
.map((_, index) => index),
|
|
},
|
|
{
|
|
name: "全网粉丝",
|
|
upper_bound: 200,
|
|
lower_bound: 1,
|
|
default: 24,
|
|
step: 200 / 10,
|
|
type: "slider",
|
|
unit: "万",
|
|
key: "fans",
|
|
stepValues: [1, 3, 5, 10, 20, 50, 75, 100, 150, 200, 1000],
|
|
},
|
|
{
|
|
name: "身高",
|
|
upper_bound: 200,
|
|
lower_bound: 140,
|
|
default: 160,
|
|
step: 1,
|
|
type: "slider",
|
|
unit: "CM",
|
|
key: "height",
|
|
stepValues: Array(201)
|
|
.fill(null)
|
|
.map((_, index) => index),
|
|
},
|
|
{
|
|
name: "体重",
|
|
upper_bound: 100,
|
|
lower_bound: 35,
|
|
default: 50,
|
|
step: 1,
|
|
type: "slider",
|
|
unit: "KG",
|
|
key: "weight",
|
|
stepValues: Array(101)
|
|
.fill(null)
|
|
.map((_, index) => index),
|
|
},
|
|
{
|
|
name: "所在地",
|
|
upper_bound: 1000,
|
|
lower_bound: 10,
|
|
default: 24,
|
|
step: 1,
|
|
type: "select",
|
|
items: [
|
|
"北京市",
|
|
"天津市",
|
|
"河北省",
|
|
"山西省",
|
|
"内蒙古自治区",
|
|
"辽宁省",
|
|
"吉林省",
|
|
"黑龙江省",
|
|
"上海市",
|
|
"江苏省",
|
|
"浙江省",
|
|
"安徽省",
|
|
"福建省",
|
|
"江西省",
|
|
"山东省",
|
|
"河南省",
|
|
"湖北省",
|
|
"湖南省",
|
|
"广东省",
|
|
"广西壮族自治区",
|
|
"海南省",
|
|
"重庆市",
|
|
"四川省",
|
|
"贵州省",
|
|
"云南省",
|
|
"西藏自治区",
|
|
"陕西省",
|
|
"甘肃省",
|
|
"青海省",
|
|
"宁夏回族自治区",
|
|
"新疆维吾尔自治区",
|
|
"台湾省",
|
|
"香港特别行政区",
|
|
"澳门特别行政区",
|
|
],
|
|
key: "city",
|
|
},
|
|
{
|
|
name: "星座",
|
|
upper_bound: 1000,
|
|
lower_bound: 10,
|
|
default: 24,
|
|
step: 1,
|
|
type: "select",
|
|
key: "constellation",
|
|
items: [
|
|
"白羊座",
|
|
"金牛座",
|
|
"双子座",
|
|
"巨蟹座",
|
|
"狮子座",
|
|
"处女座",
|
|
"天秤座",
|
|
"天蝎座",
|
|
"射手座",
|
|
"摩羯座",
|
|
"水瓶座",
|
|
"双鱼座",
|
|
],
|
|
},
|
|
{
|
|
name: "最近7日内空间有更新",
|
|
upper_bound: 1000,
|
|
lower_bound: 10,
|
|
default: 24,
|
|
step: 1,
|
|
type: "checkbox",
|
|
key: "is_active_within_a_week",
|
|
},
|
|
];
|
|
const priceFilters = [
|
|
{
|
|
name: "空间价格",
|
|
upper_bound: 200,
|
|
lower_bound: 0,
|
|
default: 24,
|
|
step: 200 / 7,
|
|
type: "slider",
|
|
unit: "¥",
|
|
key: "zone",
|
|
stepValues: [0, 1, 10, 50, 100, 150, 200, 4000],
|
|
},
|
|
{
|
|
name: "微信价格",
|
|
upper_bound: 200,
|
|
lower_bound: 0,
|
|
default: 24,
|
|
step: 200 / 8,
|
|
type: "slider",
|
|
unit: "金币",
|
|
key: "wechat",
|
|
stepValues: [0, 10, 100, 200, 500, 1000, 5000, 10000, 100000],
|
|
},
|
|
];
|
|
const [filtersValue, setFiltersValue] = useState({
|
|
age: { lower_bound: 18, upper_bound: 60 },
|
|
fans: { lower_bound: 1, upper_bound: 1000 },
|
|
height: { lower_bound: 140, upper_bound: 200 },
|
|
weight: { lower_bound: 35, upper_bound: 100 },
|
|
city: "",
|
|
constellation: "",
|
|
is_active_within_a_week: 0,
|
|
zone_admission_price: { lower_bound: 0, upper_bound: 4000 },
|
|
wechat_coin_price: { lower_bound: 0, upper_bound: 100000 },
|
|
priceUsed: { show: false, used: false },
|
|
comprehensiveUsed: { show: false, used: false },
|
|
});
|
|
const updateSearch = (search) => {
|
|
setSearch(search);
|
|
if (!search) return;
|
|
setIsloading(true);
|
|
};
|
|
|
|
//进入页面默认focus
|
|
useEffect(() => {
|
|
searchRef.current.focus();
|
|
getIsMember();
|
|
}, []);
|
|
|
|
//搜索框文本变化时进行搜索
|
|
useEffect(() => {
|
|
if (!search) {
|
|
setStreamers([]);
|
|
setZones([]);
|
|
return;
|
|
}
|
|
const isNumeric = (str) => {
|
|
return /^\d+$/.test(str);
|
|
};
|
|
const getResult = async () => {
|
|
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
|
|
const isSearchInt = isNumeric(search);
|
|
let api;
|
|
let querryParams;
|
|
if (isSearchInt) {
|
|
api = "/api/streamer/list_ext_fuzzily_by_user_id";
|
|
querryParams = { user_id: parseInt(search, 10) };
|
|
} else {
|
|
api = "/api/streamer/list_ext_fuzzily_by_name";
|
|
querryParams = { name: search };
|
|
}
|
|
try {
|
|
const base = await baseRequest();
|
|
const signature = await generateSignature({
|
|
...base,
|
|
...querryParams,
|
|
offset: 0,
|
|
limit: 20,
|
|
});
|
|
const response = await fetch(`${apiUrl}${api}?signature=${signature}`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
...base,
|
|
...querryParams,
|
|
offset: 0,
|
|
limit: 20,
|
|
}),
|
|
});
|
|
const data = await response.json();
|
|
if (data.ret === -1) {
|
|
Toast.show({
|
|
type: "error",
|
|
text1: data.msg,
|
|
topOffset: 60,
|
|
});
|
|
return;
|
|
}
|
|
if (!ignore) {
|
|
const zonesData = data.data.list.filter(
|
|
(item) => item.zones.length > 0
|
|
);
|
|
setStreamers(data.data.list);
|
|
setZones(zonesData);
|
|
}
|
|
setIsloading(false);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
let ignore = false;
|
|
getResult();
|
|
return () => {
|
|
ignore = true;
|
|
};
|
|
}, [search]);
|
|
const getFiltersResult = async () => {
|
|
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
|
|
let api;
|
|
let querryParams;
|
|
api = "/api/streamer/filter";
|
|
let currentFilterValue = { ...filtersValue };
|
|
delete currentFilterValue.comprehensiveUsed;
|
|
delete currentFilterValue.priceUsed;
|
|
querryParams = currentFilterValue;
|
|
try {
|
|
const base = await baseRequest();
|
|
const signature = await generateSignature({
|
|
...base,
|
|
...querryParams,
|
|
offset: 0,
|
|
limit: 20,
|
|
});
|
|
const response = await fetch(`${apiUrl}${api}?signature=${signature}`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
...base,
|
|
...querryParams,
|
|
offset: 0,
|
|
limit: 20,
|
|
}),
|
|
});
|
|
const data = await response.json();
|
|
if (data.ret === -1) {
|
|
Toast.show({
|
|
type: "error",
|
|
text1: data.msg,
|
|
topOffset: 60,
|
|
});
|
|
return;
|
|
}
|
|
const zonesData = data.data.streamer_list.filter(
|
|
(item) => item.zones.length > 0
|
|
);
|
|
setStreamers(data.data.streamer_list);
|
|
setZones(zonesData);
|
|
setRecommList(data.data.recomm_list);
|
|
setIsloading(false);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
const getIsMember = async () => {
|
|
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
|
|
let api;
|
|
api = "/api/account/list_by_mid";
|
|
const account = await get("account");
|
|
try {
|
|
const base = await baseRequest();
|
|
const signature = await generateSignature({
|
|
...base,
|
|
mid: account.mid,
|
|
});
|
|
const response = await fetch(`${apiUrl}${api}?signature=${signature}`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
...base,
|
|
mid: account.mid,
|
|
}),
|
|
});
|
|
const data = await response.json();
|
|
setIsMember(data.data.account.is_a_member);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
//重置筛选值
|
|
const handleResetFiltersValue = (type) => {
|
|
let obj = {};
|
|
if (type == "comprehensive") {
|
|
obj = {
|
|
...filtersValue,
|
|
age: { lower_bound: 18, upper_bound: 60 },
|
|
fans: { lower_bound: 1, upper_bound: 1000 },
|
|
weight: { lower_bound: 35, upper_bound: 100 },
|
|
height: { lower_bound: 140, upper_bound: 200 },
|
|
city: "",
|
|
constellation: "",
|
|
is_active_within_a_week: 0,
|
|
comprehensiveUsed: { show: false, used: false },
|
|
};
|
|
} else {
|
|
obj = {
|
|
...filtersValue,
|
|
zone_admission_price: { lower_bound: 0, upper_bound: 4000 },
|
|
wechat_coin_price: { lower_bound: 0, upper_bound: 100000 },
|
|
priceUsed: { show: false, used: false },
|
|
};
|
|
}
|
|
setFiltersValue((old) => ({
|
|
...old,
|
|
...obj,
|
|
}));
|
|
if (!obj.comprehensiveUsed.used && !obj.priceUsed.used) {
|
|
setRecommList([]);
|
|
setStreamers([]);
|
|
setZones([]);
|
|
}
|
|
};
|
|
//空间组件
|
|
const ZoneItem = ({ item }) => {
|
|
return (
|
|
<ListItem
|
|
onPress={() =>
|
|
navigation.navigate("SpaceIntroduce", { mid: item?.mid })
|
|
}
|
|
containerStyle={tailwind("p-0 bg-[#07050A]")}
|
|
>
|
|
<View style={tailwind("flex flex-col flex-1")}>
|
|
<View style={tailwind("flex-row py-3")}>
|
|
<Image
|
|
style={tailwind("w-12 h-12 rounded-full")}
|
|
source={item?.avatar?.images[0]?.urls[0]}
|
|
contentFit="cover"
|
|
cachePolicy="disk"
|
|
/>
|
|
<View style={tailwind("ml-2 justify-around flex-1")}>
|
|
<View style={tailwind("flex flex-row items-center")}>
|
|
<Text
|
|
style={tailwind("text-base text-white font-medium")}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{item?.name}
|
|
</Text>
|
|
<View
|
|
style={tailwind(
|
|
"flex-row items-center py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full"
|
|
)}
|
|
>
|
|
<NativeImage
|
|
source={require("../../assets/icon/12DP/ID.png")}
|
|
/>
|
|
<Text
|
|
style={tailwind("text-white text-xs font-medium ml-0.5")}
|
|
>
|
|
{item?.user_id}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<Text
|
|
style={tailwind("text-sm text-[#FFFFFF80]")}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{item.zones[0].profile}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
{zones.length === 1 && (
|
|
<View
|
|
style={tailwind("flex flex-col bg-[#FFFFFF1A] rounded-xl mb-2")}
|
|
>
|
|
<Text
|
|
style={tailwind(
|
|
"text-[#FFFFFF80] text-sm font-medium mt-2 ml-2"
|
|
)}
|
|
>
|
|
Ta的动态·
|
|
{item.zones[0].zone_moment_count > 99
|
|
? "99+"
|
|
: item.zones[0].zone_moment_count}
|
|
{item.zones[0].image_count > 0 &&
|
|
` | 图片·${
|
|
item.zones[0].image_count > 99
|
|
? "99+"
|
|
: item.zones[0].image_count
|
|
}`}
|
|
{item.zones[0].video_count > 0 &&
|
|
` | 视频·${
|
|
item.zones[0].video_count > 99
|
|
? "99+"
|
|
: item.zones[0].video_count
|
|
}`}
|
|
</Text>
|
|
<View
|
|
style={{
|
|
aspectRatio: "1/1",
|
|
...tailwind("flex flex-row"),
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flexBasis: "66.66%",
|
|
paddingTop: 8,
|
|
paddingRight: 8,
|
|
}}
|
|
>
|
|
<Image
|
|
style={tailwind("rounded-xl w-full h-full")}
|
|
source={item?.shorts?.videos[0]?.cover_urls[0]}
|
|
contentFit="cover"
|
|
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>
|
|
</View>
|
|
<View style={tailwind("flex flex-col basis-1/3")}>
|
|
<View
|
|
style={{
|
|
aspectRatio: "1/1",
|
|
paddingRight: 0,
|
|
paddingTop: 8,
|
|
}}
|
|
>
|
|
<Image
|
|
style={tailwind("rounded-xl w-full h-full")}
|
|
source={item?.cover?.images[0]?.urls[0]}
|
|
contentFit="cover"
|
|
cachePolicy="disk"
|
|
/>
|
|
</View>
|
|
{item.album.images.map((_item, index) => {
|
|
if (index > 1) return;
|
|
return (
|
|
<View
|
|
key={index}
|
|
style={{
|
|
aspectRatio: "1/1",
|
|
paddingRight: 0,
|
|
paddingTop: 8,
|
|
}}
|
|
>
|
|
<Image
|
|
style={tailwind("rounded-xl w-full h-full")}
|
|
source={_item?.urls[0]}
|
|
contentFit="cover"
|
|
cachePolicy="disk"
|
|
/>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</ListItem>
|
|
);
|
|
};
|
|
|
|
//主播组件
|
|
const StreamerItem = ({ item }) => {
|
|
return (
|
|
<ListItem
|
|
onPress={() =>
|
|
navigation.navigate("StreamerProfile", {
|
|
mid: item.mid,
|
|
})
|
|
}
|
|
containerStyle={tailwind("p-0 bg-[#07050A]")}
|
|
>
|
|
<View style={tailwind("flex-1")}>
|
|
<View style={tailwind("flex-row py-3")}>
|
|
<Image
|
|
style={tailwind("w-12 h-12 rounded-full")}
|
|
source={item?.avatar?.images[0]?.urls[0]}
|
|
contentFit="cover"
|
|
transition={1000}
|
|
cachePolicy="disk"
|
|
/>
|
|
<View style={tailwind("ml-2 justify-around flex-1")}>
|
|
<View style={tailwind("flex flex-row items-center")}>
|
|
<Text
|
|
style={tailwind("text-base text-white font-medium")}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{item?.name}
|
|
</Text>
|
|
<View
|
|
style={tailwind(
|
|
"flex-row items-center py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full"
|
|
)}
|
|
>
|
|
<NativeImage
|
|
source={require("../../assets/icon/12DP/ID.png")}
|
|
/>
|
|
<Text
|
|
style={tailwind("text-white text-xs font-medium ml-0.5")}
|
|
>
|
|
{item?.user_id}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<Text
|
|
style={tailwind("text-sm text-[#FFFFFF80]")}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{item.bio}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</ListItem>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
paddingTop: insets.top,
|
|
paddingBottom: insets.bottom,
|
|
paddingLeft: insets.left,
|
|
paddingRight: insets.right,
|
|
...tailwind("flex-1"),
|
|
}}
|
|
>
|
|
<View style={tailwind("flex-row px-2 items-center")}>
|
|
<Icon
|
|
type="ionicon"
|
|
name="chevron-back"
|
|
size={32}
|
|
color="white"
|
|
onPress={() => navigation.goBack()}
|
|
/>
|
|
<SearchBar
|
|
ref={searchRef}
|
|
containerStyle={tailwind("flex-1 bg-[#07050A]")}
|
|
inputContainerStyle={tailwind("h-10 bg-[#FFFFFF1A]")}
|
|
inputStyle={tailwind("text-white")}
|
|
placeholder="搜索Ta的昵称或id"
|
|
platform="ios"
|
|
cancelButtonProps={tailwind("text-[#FF669E]")}
|
|
cancelButtonTitle="清空"
|
|
clearIcon={() => <></>}
|
|
searchIcon={() => <></>}
|
|
showLoading={isloading}
|
|
onChangeText={updateSearch}
|
|
value={search}
|
|
disabled={
|
|
filtersValue.comprehensiveUsed.used || filtersValue.priceUsed.used
|
|
}
|
|
/>
|
|
</View>
|
|
<ScrollView style={tailwind("flex-1")}>
|
|
<View style={tailwind("flex flex-row justify-around")}>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
setIsFilterVisible({
|
|
...isFilterVisible,
|
|
comprehensive: !isFilterVisible.comprehensive,
|
|
});
|
|
}}
|
|
style={{
|
|
...tailwind("px-2 rounded-xl flex-row items-center"),
|
|
borderColor: "#ff75c8",
|
|
borderWidth: filtersValue.comprehensiveUsed.used ? 1 : 0,
|
|
boxSizing: "border-box",
|
|
width: 110,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-white text-lg font-medium"),
|
|
marginVertical: 6,
|
|
color: filtersValue.comprehensiveUsed.used
|
|
? "#ff75c8"
|
|
: "#ffffff80",
|
|
}}
|
|
>
|
|
综合筛选
|
|
</Text>
|
|
{filtersValue.comprehensiveUsed.used && (
|
|
<TouchableOpacity
|
|
onPress={() => handleResetFiltersValue("comprehensive")}
|
|
style={{ width: 24 }}
|
|
>
|
|
<Icon
|
|
type="ionicon"
|
|
name="close"
|
|
size={18}
|
|
color="#ff75c8"
|
|
style={{ marginLeft: 2 }}
|
|
/>
|
|
</TouchableOpacity>
|
|
)}
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
setIsFilterVisible({
|
|
...isFilterVisible,
|
|
zone_admission_price: !isFilterVisible.zone_admission_price,
|
|
});
|
|
}}
|
|
style={{
|
|
...tailwind("px-2 rounded-xl flex-row items-center"),
|
|
borderColor: "#ff75c8",
|
|
borderWidth: filtersValue.priceUsed.used ? 1 : 0,
|
|
boxSizing: "border-box",
|
|
width: 110,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-white text-lg font-medium"),
|
|
marginVertical: 6,
|
|
color: filtersValue.priceUsed.used ? "#ff75c8" : "#ffffff80",
|
|
}}
|
|
>
|
|
价格筛选
|
|
</Text>
|
|
{filtersValue.priceUsed.used && (
|
|
<TouchableOpacity
|
|
onPress={() => handleResetFiltersValue("zone_admission_price")}
|
|
style={{ width: 24 }}
|
|
>
|
|
<Icon
|
|
type="ionicon"
|
|
name="close"
|
|
size={18}
|
|
color="#ff75c8"
|
|
style={{ marginLeft: 2 }}
|
|
/>
|
|
</TouchableOpacity>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View
|
|
style={{
|
|
display: "flex",
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<BottomSheet
|
|
// containerStyle={{ marginTop: 80 }}
|
|
backdropStyle={{ backgroundColor: "#0000004d" }}
|
|
scrollViewProps={{
|
|
contentContainerStyle: {
|
|
// paddingTop: 20,
|
|
backgroundColor: "black",
|
|
borderRadius: 12,
|
|
},
|
|
onScroll: (event) => {
|
|
const { y } = event.nativeEvent.contentOffset;
|
|
if (y < -50) {
|
|
setIsFilterVisible({
|
|
zone_admission_price: false,
|
|
comprehensive: false,
|
|
});
|
|
}
|
|
},
|
|
}}
|
|
isVisible={isFilterVisible.comprehensive}
|
|
style={{
|
|
paddingTop: 110,
|
|
}}
|
|
>
|
|
<View>
|
|
{filters.map((item, index) => (
|
|
<View
|
|
style={{
|
|
...tailwind(`p-4 rounded-xl`),
|
|
backgroundColor: "#13121f",
|
|
margin: 18,
|
|
marginBottom: 6,
|
|
flexDirection: item.type !== "slider" ? "row" : "col",
|
|
justifyContent: "space-between",
|
|
// alignItems: "center",
|
|
// paddingBottom: 50,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-white font-medium"),
|
|
marginVertical: 6,
|
|
}}
|
|
>
|
|
{item.name}
|
|
</Text>
|
|
{item.type == "slider" ? (
|
|
<MySlider
|
|
height={40}
|
|
lower_bound={item.lower_bound}
|
|
upper_bound={item.upper_bound}
|
|
itemKey={item.key}
|
|
leftValue={
|
|
item.key == "age"
|
|
? filtersValue.age.lower_bound
|
|
: item.key == "height"
|
|
? filtersValue.height.lower_bound
|
|
: item.key == "weight"
|
|
? filtersValue.weight.lower_bound
|
|
: filtersValue.fans.lower_bound
|
|
}
|
|
rightValue={
|
|
item.key == "age"
|
|
? filtersValue.age.upper_bound
|
|
: item.key == "height"
|
|
? filtersValue.height.upper_bound
|
|
: item.key == "weight"
|
|
? filtersValue.weight.upper_bound
|
|
: filtersValue.fans.upper_bound
|
|
}
|
|
step={item.step}
|
|
hasInfinity={item.key == "fans"}
|
|
stepValues={item.stepValues}
|
|
onChange={(value) => {
|
|
if (item.key == "age") {
|
|
setFiltersValue((old) => ({ ...old, age: value }));
|
|
} else if (item.key == "fans") {
|
|
setFiltersValue((old) => ({ ...old, fans: value }));
|
|
} else if (item.key == "height") {
|
|
setFiltersValue((old) => ({ ...old, height: value }));
|
|
} else if (item.key == "weight") {
|
|
setFiltersValue((old) => ({ ...old, weight: value }));
|
|
}
|
|
}}
|
|
maximumTrackTintColor="#ff75c81a"
|
|
minimumTrackTintColor="#ff75c8"
|
|
processHeight={5}
|
|
unit={item.unit}
|
|
thumbImage={require("../../assets/icon/32DP/edit.png")}
|
|
/>
|
|
) : item.type == "checkbox" ? (
|
|
<CheckBox
|
|
checked={filtersValue.is_active_within_a_week}
|
|
onPress={() =>
|
|
setFiltersValue((old) => ({
|
|
...old,
|
|
is_active_within_a_week: old.is_active_within_a_week
|
|
? 0
|
|
: 1,
|
|
}))
|
|
}
|
|
iconType="material-community"
|
|
checkedIcon="checkbox-marked"
|
|
uncheckedIcon="checkbox-blank-outline"
|
|
checkedColor="#FF669E"
|
|
containerStyle={tailwind("p-0 m-0 bg-transparent")}
|
|
size={24}
|
|
/>
|
|
) : (
|
|
<Picker
|
|
items={item.items?.map((it, index) => ({
|
|
label: it,
|
|
value: it,
|
|
}))}
|
|
value={
|
|
item.key == "constellation"
|
|
? filtersValue.constellation
|
|
: filtersValue.city
|
|
}
|
|
onChange={(value) =>
|
|
setFiltersValue((old) => {
|
|
let newValue = { ...old };
|
|
if (item.key == "constellation") {
|
|
newValue.constellation = value;
|
|
} else {
|
|
newValue.city = value;
|
|
}
|
|
return newValue;
|
|
})
|
|
}
|
|
/>
|
|
)}
|
|
</View>
|
|
))}
|
|
<View
|
|
style={{
|
|
...tailwind("flex-row justify-around mb-4"),
|
|
}}
|
|
>
|
|
{isMember == 1 && (
|
|
<TouchableOpacity
|
|
style={{
|
|
...tailwind("text-white px-4 py-2 rounded-xl"),
|
|
marginVertical: 6,
|
|
backgroundColor: "#ffffff1a",
|
|
width: 120,
|
|
}}
|
|
onPress={() => handleResetFiltersValue("comprehensive")}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind(
|
|
"text-white text-lg font-medium text-center"
|
|
),
|
|
}}
|
|
>
|
|
重置
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
setIsFilterVisible({
|
|
zone_admission_price: false,
|
|
comprehensive: false,
|
|
});
|
|
if (!isMember) {
|
|
navigation.navigate("WebWithoutHeader", {
|
|
uri: process.env.EXPO_PUBLIC_WEB_URL + "/vip",
|
|
});
|
|
return;
|
|
}
|
|
setFiltersValue((old) => ({
|
|
...old,
|
|
comprehensiveUsed: { show: false, used: true },
|
|
}));
|
|
|
|
getFiltersResult();
|
|
}}
|
|
style={{
|
|
...tailwind("text-white px-4 py-2 rounded-xl"),
|
|
marginVertical: 6,
|
|
backgroundColor: "#ff75c8",
|
|
minWidth: 120,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind(
|
|
"text-white text-lg font-medium text-center"
|
|
),
|
|
}}
|
|
>
|
|
{!isMember ? "开通VIP后即可筛选" : "确定"}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</BottomSheet>
|
|
<BottomSheet
|
|
backdropStyle={{ backgroundColor: "#0000004d" }}
|
|
scrollViewProps={{
|
|
contentContainerStyle: {
|
|
// paddingTop: 20,
|
|
backgroundColor: "black",
|
|
borderRadius: 12,
|
|
},
|
|
onScroll: (event) => {
|
|
const { y } = event.nativeEvent.contentOffset;
|
|
if (y < -50) {
|
|
setIsFilterVisible({
|
|
zone_admission_price: false,
|
|
comprehensive: false,
|
|
});
|
|
}
|
|
},
|
|
}}
|
|
isVisible={isFilterVisible.zone_admission_price}
|
|
style={{
|
|
paddingTop: 110,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
backgroundColor: "black",
|
|
borderRadius: 12,
|
|
// flex: 1,
|
|
// position: "relative",
|
|
height: screenDimensions.height - 120,
|
|
}}
|
|
>
|
|
{priceFilters.map((item) => (
|
|
<View
|
|
style={{
|
|
...tailwind(`p-4 rounded-xl`),
|
|
backgroundColor: "#13121f",
|
|
margin: 18,
|
|
marginBottom: 6,
|
|
flexDirection: item.type !== "slider" ? "row" : "col",
|
|
justifyContent: "space-between",
|
|
// alignItems: "center",
|
|
// paddingBottom: 50,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-white font-medium"),
|
|
marginVertical: 6,
|
|
}}
|
|
>
|
|
{item.name}
|
|
</Text>
|
|
<MySlider
|
|
height={40}
|
|
lower_bound={item.lower_bound}
|
|
upper_bound={item.upper_bound}
|
|
leftValue={
|
|
item.key == "zone"
|
|
? filtersValue.zone_admission_price.lower_bound
|
|
: filtersValue.wechat_coin_price.lower_bound
|
|
}
|
|
rightValue={
|
|
item.key == "zone"
|
|
? filtersValue.zone_admission_price.upper_bound
|
|
: filtersValue.wechat_coin_price.upper_bound
|
|
}
|
|
stepValues={item.stepValues}
|
|
step={item.step}
|
|
hasInfinity={true}
|
|
itemKey={item.key}
|
|
onChange={(value) => {
|
|
if (item.key == "zone") {
|
|
setFiltersValue((old) => ({
|
|
...old,
|
|
zone_admission_price: value,
|
|
}));
|
|
} else if (item.key == "wechat") {
|
|
setFiltersValue((old) => ({
|
|
...old,
|
|
wechat_coin_price: value,
|
|
}));
|
|
}
|
|
}}
|
|
maximumTrackTintColor="#ff75c81a"
|
|
minimumTrackTintColor="#ff75c8"
|
|
processHeight={5}
|
|
unit={item.unit}
|
|
thumbImage={require("../../assets/icon/32DP/edit.png")}
|
|
/>
|
|
</View>
|
|
))}
|
|
<View
|
|
style={{
|
|
...tailwind("flex-row justify-around mb-4"),
|
|
position: "absolute",
|
|
bottom: 0,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{isMember == 1 && (
|
|
<TouchableOpacity
|
|
style={{
|
|
...tailwind("text-white px-4 py-2 rounded-xl"),
|
|
marginVertical: 6,
|
|
backgroundColor: "#ffffff1a",
|
|
width: 120,
|
|
}}
|
|
onPress={() =>
|
|
handleResetFiltersValue("zone_admission_price")
|
|
}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind(
|
|
"text-white text-lg font-medium text-center"
|
|
),
|
|
}}
|
|
>
|
|
重置
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
setIsFilterVisible({
|
|
zone_admission_price: false,
|
|
comprehensive: false,
|
|
});
|
|
if (!isMember) {
|
|
navigation.navigate("WebWithoutHeader", {
|
|
uri: process.env.EXPO_PUBLIC_WEB_URL + "/vip",
|
|
});
|
|
return;
|
|
}
|
|
setFiltersValue((old) => ({
|
|
...old,
|
|
priceUsed: { show: false, used: true },
|
|
}));
|
|
|
|
getFiltersResult();
|
|
}}
|
|
style={{
|
|
...tailwind("text-white px-4 py-2 rounded-xl"),
|
|
marginVertical: 6,
|
|
backgroundColor: "#ff75c8",
|
|
minWidth: 120,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind(
|
|
"text-white text-lg font-medium text-center"
|
|
),
|
|
}}
|
|
>
|
|
{!isMember ? "开通VIP后即可筛选" : "确定"}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</BottomSheet>
|
|
</View>
|
|
<View style={tailwind("flex-1 px-4")}>
|
|
{zones.length > 0 && (
|
|
<Text style={tailwind("mt-2 text-white text-xl font-medium")}>
|
|
空间
|
|
</Text>
|
|
)}
|
|
{zones?.map((item, index) => (
|
|
<ZoneItem key={index} item={item} />
|
|
))}
|
|
{zones.length > 0 && <MyDivider style={tailwind("my-2")} />}
|
|
{streamers.length > 0 && (
|
|
<Text style={tailwind("mt-2 text-white text-xl font-medium")}>
|
|
用户
|
|
</Text>
|
|
)}
|
|
{streamers?.map((item, index) => (
|
|
<StreamerItem key={index} item={item} />
|
|
))}
|
|
{recommList.length > 0 && <MyDivider style={tailwind("my-2")} />}
|
|
{recommList.length > 0 && (
|
|
<Text style={tailwind("mt-2 text-white text-xl font-medium")}>
|
|
猜你喜欢
|
|
</Text>
|
|
)}
|
|
{recommList?.map((item, index) => (
|
|
<StreamerItem key={index} item={item} />
|
|
))}
|
|
{streamers.length === 0 && recommList.length === 0 && (
|
|
<Empty type={search ? "search" : "nodata"} />
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|