新增筛选功能
This commit is contained in:
parent
b95d707f71
commit
03ca571f07
|
@ -22,6 +22,9 @@ export default function MySlider({
|
|||
defaultValue = 0,
|
||||
disabled = false,
|
||||
thumbSize = 25,
|
||||
stepValues = [],
|
||||
itemKey,
|
||||
hasInfinity,
|
||||
leftValue = 0,
|
||||
rightValue = 0,
|
||||
thumbImage = null,
|
||||
|
@ -34,6 +37,7 @@ export default function MySlider({
|
|||
|
||||
const [leftProcess, setLeftProcess] = useState(0);
|
||||
const [rightProcess, setRightProcess] = useState(0);
|
||||
const [stepNum, setStepNum] = useState(stepValues.length - 1);
|
||||
const [processWidth, setProcessWidth] = useState(330);
|
||||
const tailwind = useTailwind();
|
||||
const leftWatcher = useRef(null);
|
||||
|
@ -53,26 +57,20 @@ export default function MySlider({
|
|||
onPanResponderMove: _onPanResponderMoveRight, // 移动
|
||||
onPanResponderEnd: _onPanResponderEndRight, // 结束
|
||||
});
|
||||
const currentLeftProcess = 0;
|
||||
const currentRightProcess = 1;
|
||||
// leftProcess.current = currentLeftProcess;
|
||||
setLeftProcess(currentLeftProcess);
|
||||
// rightProcess.current = currentRightProcess;
|
||||
setRightProcess(currentRightProcess);
|
||||
// setRightProcess(rightProcess);
|
||||
setProcessWidth(width - thumbSize * 2);
|
||||
console.log("rightProcess", currentRightProcess);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
onChange({
|
||||
lower_bound: Math.floor(
|
||||
leftProcess * (upper_bound - lower_bound) + lower_bound
|
||||
),
|
||||
upper_bound: Math.floor(
|
||||
rightProcess * (upper_bound - lower_bound) + lower_bound
|
||||
),
|
||||
});
|
||||
}, [leftProcess, rightProcess]);
|
||||
// if(itemKey)
|
||||
const currentLeftProcess = 0;
|
||||
const currentRightProcess =
|
||||
(stepValues.indexOf(rightValue) * step - lower_bound) /
|
||||
(upper_bound - lower_bound);
|
||||
setLeftProcess(currentLeftProcess);
|
||||
setRightProcess(currentRightProcess);
|
||||
}, [leftValue, rightValue]);
|
||||
// useEffect(() => {
|
||||
|
||||
// }, [leftProcess, rightProcess]);
|
||||
// 左侧滑块事件
|
||||
const _onPanResponderGrantLeft = (e, gestureState) => {
|
||||
const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
|
||||
|
@ -88,7 +86,6 @@ export default function MySlider({
|
|||
const process =
|
||||
(gestureState.x0 - 40 - thumbSize / 2 + gestureState.dx) / processWidth;
|
||||
_changeProcess(process, "left");
|
||||
console.log("newValue_left", gestureState.x0, gestureState.dx, process);
|
||||
};
|
||||
|
||||
// 右侧滑块事件
|
||||
|
@ -106,7 +103,6 @@ export default function MySlider({
|
|||
const process =
|
||||
(gestureState.x0 - 40 - thumbSize / 2 + gestureState.dx) / processWidth;
|
||||
_changeProcess(process, "right");
|
||||
// console.log("process", processWidth);
|
||||
};
|
||||
const _changeProcess = (changeProcess, direction) => {
|
||||
// 判断滑动开关
|
||||
|
@ -115,18 +111,36 @@ export default function MySlider({
|
|||
// 按步长比例变化刻度
|
||||
const v = changeProcess * (upper_bound - lower_bound);
|
||||
const newValue = Math.round(v / step) * step;
|
||||
|
||||
const newProcess = newValue / (upper_bound - lower_bound);
|
||||
const newProcess = Math.round(newValue) / (upper_bound - lower_bound);
|
||||
setStepNum(stepNum + 1);
|
||||
if (process !== newProcess) {
|
||||
if (direction == "left") {
|
||||
if (newProcess < rightProcess) {
|
||||
setLeftProcess(newProcess);
|
||||
setStepNum((old) => old + 1);
|
||||
onChange({
|
||||
lower_bound: Math.round(
|
||||
leftProcess * (upper_bound - lower_bound) + lower_bound
|
||||
),
|
||||
upper_bound: rightValue,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (newProcess > leftProcess) {
|
||||
console.log("newValue", newProcess, rightProcess);
|
||||
// rightProcess.current = newProcess;
|
||||
setRightProcess(newProcess);
|
||||
setStepNum((old) => old - 1);
|
||||
onChange({
|
||||
lower_bound: leftValue,
|
||||
upper_bound:
|
||||
stepValues[
|
||||
Math.round(
|
||||
(newProcess * (upper_bound - lower_bound) + lower_bound) /
|
||||
step
|
||||
)
|
||||
],
|
||||
});
|
||||
// setStepNum(stepNum - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -232,7 +246,7 @@ export default function MySlider({
|
|||
color: "#ff75c8",
|
||||
}}
|
||||
>
|
||||
{Math.floor(leftProcess * (upper_bound - lower_bound) + lower_bound)}
|
||||
{Math.round(leftProcess * (upper_bound - lower_bound) + lower_bound)}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
@ -246,11 +260,18 @@ export default function MySlider({
|
|||
<Text
|
||||
style={{
|
||||
...tailwind("text-white text-lg"),
|
||||
maxWidth: thumbSize * 2,
|
||||
// maxWidth: thumbSize * 2,
|
||||
color: "#ff75c8",
|
||||
}}
|
||||
>
|
||||
{Math.floor(rightProcess * (upper_bound - lower_bound) + lower_bound)}
|
||||
{hasInfinity && rightProcess == 1
|
||||
? ">" + upper_bound
|
||||
: stepValues[
|
||||
Math.round(
|
||||
(rightProcess * (upper_bound - lower_bound) + lower_bound) /
|
||||
step
|
||||
)
|
||||
]}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
@ -284,7 +305,7 @@ export default function MySlider({
|
|||
color: "#ffffff80",
|
||||
}}
|
||||
>
|
||||
{upper_bound}
|
||||
{hasInfinity ? ">" + upper_bound : upper_bound}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
|
|
|
@ -4,6 +4,7 @@ import {
|
|||
Image as NativeImage,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Dimensions,
|
||||
} from "react-native";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { useTailwind } from "tailwind-rn";
|
||||
|
@ -26,13 +27,15 @@ 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([]);
|
||||
|
@ -46,21 +49,25 @@ export default function Search({ navigation, route }) {
|
|||
name: "年龄",
|
||||
upper_bound: 60,
|
||||
lower_bound: 18,
|
||||
default: 24,
|
||||
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: 1,
|
||||
step: 200 / 10,
|
||||
type: "slider",
|
||||
unit: "万",
|
||||
key: "fans",
|
||||
stepValues: [1, 3, 5, 10, 20, 50, 75, 100, 150, 200, 1000],
|
||||
},
|
||||
{
|
||||
name: "身高",
|
||||
|
@ -71,6 +78,9 @@ export default function Search({ navigation, route }) {
|
|||
type: "slider",
|
||||
unit: "CM",
|
||||
key: "height",
|
||||
stepValues: Array(201)
|
||||
.fill(null)
|
||||
.map((_, index) => index),
|
||||
},
|
||||
{
|
||||
name: "体重",
|
||||
|
@ -81,6 +91,9 @@ export default function Search({ navigation, route }) {
|
|||
type: "slider",
|
||||
unit: "KG",
|
||||
key: "weight",
|
||||
stepValues: Array(101)
|
||||
.fill(null)
|
||||
.map((_, index) => index),
|
||||
},
|
||||
{
|
||||
name: "所在地",
|
||||
|
@ -166,34 +179,36 @@ export default function Search({ navigation, route }) {
|
|||
upper_bound: 200,
|
||||
lower_bound: 0,
|
||||
default: 24,
|
||||
step: 1,
|
||||
step: 200 / 7,
|
||||
type: "slider",
|
||||
unit: "¥",
|
||||
key: "zone",
|
||||
stepValues: [0, 1, 10, 50, 100, 150, 200, 4000],
|
||||
},
|
||||
{
|
||||
name: "微信价格",
|
||||
upper_bound: 10000,
|
||||
upper_bound: 200,
|
||||
lower_bound: 0,
|
||||
default: 24,
|
||||
step: 1,
|
||||
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: 200 },
|
||||
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: 9999 },
|
||||
wechat_coin_price: { lower_bound: 0, upper_bound: 9999 },
|
||||
priceUsed: false,
|
||||
comprehensiveUsed: false,
|
||||
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);
|
||||
|
@ -204,6 +219,7 @@ export default function Search({ navigation, route }) {
|
|||
//进入页面默认focus
|
||||
useEffect(() => {
|
||||
searchRef.current.focus();
|
||||
getIsMember();
|
||||
}, []);
|
||||
|
||||
//搜索框文本变化时进行搜索
|
||||
|
@ -293,14 +309,6 @@ export default function Search({ navigation, route }) {
|
|||
offset: 0,
|
||||
limit: 20,
|
||||
});
|
||||
console.log(
|
||||
JSON.stringify({
|
||||
...base,
|
||||
...querryParams,
|
||||
offset: 0,
|
||||
limit: 20,
|
||||
})
|
||||
);
|
||||
const response = await fetch(`${apiUrl}${api}?signature=${signature}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
|
@ -322,7 +330,6 @@ export default function Search({ navigation, route }) {
|
|||
});
|
||||
return;
|
||||
}
|
||||
console.log("xxxx", data.data.streamer_list);
|
||||
const zonesData = data.data.streamer_list.filter(
|
||||
(item) => item.zones.length > 0
|
||||
);
|
||||
|
@ -334,23 +341,65 @@ export default function Search({ navigation, route }) {
|
|||
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) => {
|
||||
setFiltersValue({
|
||||
age: { lower_bound: 18, upper_bound: 60 },
|
||||
fans: { lower_bound: 1, upper_bound: 200 },
|
||||
weight: { lower_bound: 140, upper_bound: 200 },
|
||||
height: { lower_bound: 35, upper_bound: 100 },
|
||||
city: "",
|
||||
constellation: "",
|
||||
is_active_within_a_week: 0,
|
||||
priceUsed:
|
||||
type == "zone_admission_price" ? false : filtersValue.priceUsed,
|
||||
comprehensiveUsed:
|
||||
type == "comprehensive" ? false : filtersValue.priceUsed,
|
||||
});
|
||||
setRecommList([]);
|
||||
setStreamers([]);
|
||||
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 }) => {
|
||||
|
@ -591,10 +640,13 @@ export default function Search({ navigation, route }) {
|
|||
showLoading={isloading}
|
||||
onChangeText={updateSearch}
|
||||
value={search}
|
||||
disabled={
|
||||
filtersValue.comprehensiveUsed.used || filtersValue.priceUsed.used
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
<ScrollView style={tailwind("flex-1")}>
|
||||
<View style={tailwind("flex-row justify-around")}>
|
||||
<View style={tailwind("flex flex-row justify-around")}>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setIsFilterVisible({
|
||||
|
@ -605,7 +657,7 @@ export default function Search({ navigation, route }) {
|
|||
style={{
|
||||
...tailwind("px-2 rounded-xl flex-row items-center"),
|
||||
borderColor: "#ff75c8",
|
||||
borderWidth: filtersValue.comprehensiveUsed ? 1 : 0,
|
||||
borderWidth: filtersValue.comprehensiveUsed.used ? 1 : 0,
|
||||
boxSizing: "border-box",
|
||||
width: 110,
|
||||
}}
|
||||
|
@ -614,12 +666,14 @@ export default function Search({ navigation, route }) {
|
|||
style={{
|
||||
...tailwind("text-white text-lg font-medium"),
|
||||
marginVertical: 6,
|
||||
color: filtersValue.comprehensiveUsed ? "#ff75c8" : "#ffffff80",
|
||||
color: filtersValue.comprehensiveUsed.used
|
||||
? "#ff75c8"
|
||||
: "#ffffff80",
|
||||
}}
|
||||
>
|
||||
综合筛选
|
||||
</Text>
|
||||
{filtersValue.comprehensiveUsed && (
|
||||
{filtersValue.comprehensiveUsed.used && (
|
||||
<TouchableOpacity
|
||||
onPress={() => handleResetFiltersValue("comprehensive")}
|
||||
style={{ width: 24 }}
|
||||
|
@ -644,7 +698,7 @@ export default function Search({ navigation, route }) {
|
|||
style={{
|
||||
...tailwind("px-2 rounded-xl flex-row items-center"),
|
||||
borderColor: "#ff75c8",
|
||||
borderWidth: filtersValue.priceUsed ? 1 : 0,
|
||||
borderWidth: filtersValue.priceUsed.used ? 1 : 0,
|
||||
boxSizing: "border-box",
|
||||
width: 110,
|
||||
}}
|
||||
|
@ -653,12 +707,12 @@ export default function Search({ navigation, route }) {
|
|||
style={{
|
||||
...tailwind("text-white text-lg font-medium"),
|
||||
marginVertical: 6,
|
||||
color: filtersValue.priceUsed ? "#ff75c8" : "#ffffff80",
|
||||
color: filtersValue.priceUsed.used ? "#ff75c8" : "#ffffff80",
|
||||
}}
|
||||
>
|
||||
价格筛选
|
||||
</Text>
|
||||
{filtersValue.priceUsed && (
|
||||
{filtersValue.priceUsed.used && (
|
||||
<TouchableOpacity
|
||||
onPress={() => handleResetFiltersValue("zone_admission_price")}
|
||||
style={{ width: 24 }}
|
||||
|
@ -674,19 +728,37 @@ export default function Search({ navigation, route }) {
|
|||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<SafeAreaProvider>
|
||||
<View
|
||||
style={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<BottomSheet
|
||||
isVisible={isFilterVisible.comprehensive}
|
||||
style={{
|
||||
paddingTop: 120,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
// 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={{
|
||||
|
@ -713,18 +785,37 @@ export default function Search({ navigation, route }) {
|
|||
height={40}
|
||||
lower_bound={item.lower_bound}
|
||||
upper_bound={item.upper_bound}
|
||||
leftValue={item.lower_bound}
|
||||
rightValue={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({ ...filtersValue, age: value });
|
||||
setFiltersValue((old) => ({ ...old, age: value }));
|
||||
} else if (item.key == "fans") {
|
||||
setFiltersValue({ ...filtersValue, fans: value });
|
||||
setFiltersValue((old) => ({ ...old, fans: value }));
|
||||
} else if (item.key == "height") {
|
||||
setFiltersValue({ ...filtersValue, height: value });
|
||||
setFiltersValue((old) => ({ ...old, height: value }));
|
||||
} else if (item.key == "weight") {
|
||||
setFiltersValue({ ...filtersValue, weight: value });
|
||||
setFiltersValue((old) => ({ ...old, weight: value }));
|
||||
}
|
||||
}}
|
||||
maximumTrackTintColor="#ff75c81a"
|
||||
|
@ -777,44 +868,56 @@ export default function Search({ navigation, route }) {
|
|||
)}
|
||||
</View>
|
||||
))}
|
||||
<View style={tailwind("flex-row justify-around mb-4")}>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
...tailwind("text-white px-4 py-2 rounded-xl"),
|
||||
marginVertical: 6,
|
||||
backgroundColor: "#ffffff1a",
|
||||
width: 120,
|
||||
}}
|
||||
onPress={() => handleResetFiltersValue("comprehensive")}
|
||||
>
|
||||
<Text
|
||||
<View
|
||||
style={{
|
||||
...tailwind("flex-row justify-around mb-4"),
|
||||
}}
|
||||
>
|
||||
{isMember == 1 && (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
...tailwind(
|
||||
"text-white text-lg font-medium text-center"
|
||||
),
|
||||
...tailwind("text-white px-4 py-2 rounded-xl"),
|
||||
marginVertical: 6,
|
||||
backgroundColor: "#ffffff1a",
|
||||
width: 120,
|
||||
}}
|
||||
onPress={() => handleResetFiltersValue("comprehensive")}
|
||||
>
|
||||
重置
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<Text
|
||||
style={{
|
||||
...tailwind(
|
||||
"text-white text-lg font-medium text-center"
|
||||
),
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setFiltersValue((old) => ({
|
||||
...old,
|
||||
comprehensiveUsed: true,
|
||||
}));
|
||||
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();
|
||||
console.log("00000000");
|
||||
}}
|
||||
style={{
|
||||
...tailwind("text-white px-4 py-2 rounded-xl"),
|
||||
marginVertical: 6,
|
||||
backgroundColor: "#ff75c8",
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
|
@ -824,22 +927,42 @@ export default function Search({ navigation, route }) {
|
|||
),
|
||||
}}
|
||||
>
|
||||
确定
|
||||
{!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: 120,
|
||||
paddingTop: 110,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "black",
|
||||
borderRadius: 12,
|
||||
// flex: 1,
|
||||
// position: "relative",
|
||||
height: screenDimensions.height - 120,
|
||||
}}
|
||||
>
|
||||
{priceFilters.map((item) => (
|
||||
|
@ -867,20 +990,31 @@ export default function Search({ navigation, route }) {
|
|||
height={40}
|
||||
lower_bound={item.lower_bound}
|
||||
upper_bound={item.upper_bound}
|
||||
leftValue={item.lower_bound}
|
||||
rightValue={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({
|
||||
...filtersValue,
|
||||
setFiltersValue((old) => ({
|
||||
...old,
|
||||
zone_admission_price: value,
|
||||
});
|
||||
}));
|
||||
} else if (item.key == "wechat") {
|
||||
setFiltersValue({
|
||||
...filtersValue,
|
||||
setFiltersValue((old) => ({
|
||||
...old,
|
||||
wechat_coin_price: value,
|
||||
});
|
||||
}));
|
||||
}
|
||||
}}
|
||||
maximumTrackTintColor="#ff75c81a"
|
||||
|
@ -891,46 +1025,61 @@ export default function Search({ navigation, route }) {
|
|||
/>
|
||||
</View>
|
||||
))}
|
||||
<View style={tailwind("flex-row justify-around mb-4")}>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
...tailwind("text-white px-4 py-2 rounded-xl"),
|
||||
marginVertical: 6,
|
||||
backgroundColor: "#ffffff1a",
|
||||
width: 120,
|
||||
}}
|
||||
onPress={() =>
|
||||
handleResetFiltersValue("zone_admission_price")
|
||||
}
|
||||
>
|
||||
<Text
|
||||
<View
|
||||
style={{
|
||||
...tailwind("flex-row justify-around mb-4"),
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{isMember == 1 && (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
...tailwind(
|
||||
"text-white text-lg font-medium text-center"
|
||||
),
|
||||
...tailwind("text-white px-4 py-2 rounded-xl"),
|
||||
marginVertical: 6,
|
||||
backgroundColor: "#ffffff1a",
|
||||
width: 120,
|
||||
}}
|
||||
onPress={() =>
|
||||
handleResetFiltersValue("zone_admission_price")
|
||||
}
|
||||
>
|
||||
重置
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<Text
|
||||
style={{
|
||||
...tailwind(
|
||||
"text-white text-lg font-medium text-center"
|
||||
),
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setFiltersValue((old) => ({
|
||||
...old,
|
||||
priceUsed: true,
|
||||
}));
|
||||
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();
|
||||
// console.log("00000000");
|
||||
}}
|
||||
style={{
|
||||
...tailwind("text-white px-4 py-2 rounded-xl"),
|
||||
marginVertical: 6,
|
||||
backgroundColor: "#ff75c8",
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
|
@ -940,13 +1089,13 @@ export default function Search({ navigation, route }) {
|
|||
),
|
||||
}}
|
||||
>
|
||||
确定
|
||||
{!isMember ? "开通VIP后即可筛选" : "确定"}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</BottomSheet>
|
||||
</SafeAreaProvider>
|
||||
</View>
|
||||
<View style={tailwind("flex-1 px-4")}>
|
||||
{zones.length > 0 && (
|
||||
<Text style={tailwind("mt-2 text-white text-xl font-medium")}>
|
||||
|
@ -965,7 +1114,7 @@ export default function Search({ navigation, route }) {
|
|||
{streamers?.map((item, index) => (
|
||||
<StreamerItem key={index} item={item} />
|
||||
))}
|
||||
{streamers.length > 0 && <MyDivider style={tailwind("my-2")} />}
|
||||
{recommList.length > 0 && <MyDivider style={tailwind("my-2")} />}
|
||||
{recommList.length > 0 && (
|
||||
<Text style={tailwind("mt-2 text-white text-xl font-medium")}>
|
||||
猜你喜欢
|
||||
|
|
36
tailwind.css
36
tailwind.css
|
@ -149,10 +149,6 @@
|
|||
margin-left: 1rem
|
||||
}
|
||||
|
||||
.ml-\[3\.2rem\] {
|
||||
margin-left: 3.2rem
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: auto
|
||||
}
|
||||
|
@ -241,8 +237,8 @@
|
|||
display: contents
|
||||
}
|
||||
|
||||
.h-1 {
|
||||
height: 0.25rem
|
||||
.hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
|
@ -357,14 +353,6 @@
|
|||
width: 66.666667%
|
||||
}
|
||||
|
||||
.w-2\/5 {
|
||||
width: 40%
|
||||
}
|
||||
|
||||
.w-20 {
|
||||
width: 5rem
|
||||
}
|
||||
|
||||
.w-28 {
|
||||
width: 7rem
|
||||
}
|
||||
|
@ -592,11 +580,6 @@
|
|||
background-color: rgb(23 22 26 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-\[\#17171A\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(23 23 26 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-\[\#1E1C29\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 28 41 / var(--tw-bg-opacity))
|
||||
|
@ -617,11 +600,6 @@
|
|||
background-color: rgb(255 102 158 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-\[\#FF7DCB\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 125 203 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-\[\#FFFFFF1A\] {
|
||||
background-color: #FFFFFF1A
|
||||
}
|
||||
|
@ -712,21 +690,11 @@
|
|||
padding-right: 0.25rem
|
||||
}
|
||||
|
||||
.px-1\.5 {
|
||||
padding-left: 0.375rem;
|
||||
padding-right: 0.375rem
|
||||
}
|
||||
|
||||
.px-10 {
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem
|
||||
}
|
||||
|
||||
.px-12 {
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem
|
||||
|
|
|
@ -192,11 +192,6 @@
|
|||
"marginLeft": 16
|
||||
}
|
||||
},
|
||||
"ml-[3.2rem]": {
|
||||
"style": {
|
||||
"marginLeft": 51.2
|
||||
}
|
||||
},
|
||||
"ml-auto": {
|
||||
"style": {
|
||||
"marginLeft": "auto"
|
||||
|
@ -307,9 +302,9 @@
|
|||
"display": "contents"
|
||||
}
|
||||
},
|
||||
"h-1": {
|
||||
"hidden": {
|
||||
"style": {
|
||||
"height": 4
|
||||
"display": "none"
|
||||
}
|
||||
},
|
||||
"h-10": {
|
||||
|
@ -452,16 +447,6 @@
|
|||
"width": "66.666667%"
|
||||
}
|
||||
},
|
||||
"w-2/5": {
|
||||
"style": {
|
||||
"width": "40%"
|
||||
}
|
||||
},
|
||||
"w-20": {
|
||||
"style": {
|
||||
"width": 80
|
||||
}
|
||||
},
|
||||
"w-28": {
|
||||
"style": {
|
||||
"width": 112
|
||||
|
@ -792,12 +777,6 @@
|
|||
"backgroundColor": "rgb(23 22 26 / var(--tw-bg-opacity))"
|
||||
}
|
||||
},
|
||||
"bg-[#17171A]": {
|
||||
"style": {
|
||||
"--tw-bg-opacity": 1,
|
||||
"backgroundColor": "rgb(23 23 26 / var(--tw-bg-opacity))"
|
||||
}
|
||||
},
|
||||
"bg-[#1E1C29]": {
|
||||
"style": {
|
||||
"--tw-bg-opacity": 1,
|
||||
|
@ -822,12 +801,6 @@
|
|||
"backgroundColor": "rgb(255 102 158 / var(--tw-bg-opacity))"
|
||||
}
|
||||
},
|
||||
"bg-[#FF7DCB]": {
|
||||
"style": {
|
||||
"--tw-bg-opacity": 1,
|
||||
"backgroundColor": "rgb(255 125 203 / var(--tw-bg-opacity))"
|
||||
}
|
||||
},
|
||||
"bg-[#FFFFFF1A]": {
|
||||
"style": {
|
||||
"backgroundColor": "#FFFFFF1A"
|
||||
|
@ -956,24 +929,12 @@
|
|||
"paddingRight": 4
|
||||
}
|
||||
},
|
||||
"px-1.5": {
|
||||
"style": {
|
||||
"paddingLeft": 6,
|
||||
"paddingRight": 6
|
||||
}
|
||||
},
|
||||
"px-10": {
|
||||
"style": {
|
||||
"paddingLeft": 40,
|
||||
"paddingRight": 40
|
||||
}
|
||||
},
|
||||
"px-12": {
|
||||
"style": {
|
||||
"paddingLeft": 48,
|
||||
"paddingRight": 48
|
||||
}
|
||||
},
|
||||
"px-2": {
|
||||
"style": {
|
||||
"paddingLeft": 8,
|
||||
|
|
Loading…
Reference in New Issue