wishpal_ironfan
/
tiefen_space_app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善筛选功能

This commit is contained in:
al 2024-09-04 12:23:56 +08:00
parent 95871ca0db
commit ccff503888
4 changed files with 241 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/MySlider/index.jsx
View File

@ -7,20 +7,15 @@ export default function MySlider({
step,
unit,
unitSite = "right",
height = 60,
width = Dimensions.get("window").width - 44,
onChange,
onAfterChange = () => {},
handleFunc = () => {},
defaultValue = 0,
disabled = false,
thumbSize = 25,
stepValues = [],
itemKey,
hasInfinity,
leftValue = 0,
rightValue = 0,
thumbImage = null,
leftValue = lower_bound,
rightValue = stepValues[stepValues.length - 1],
maximumTrackTintColor = "#dcdbdb",
minimumTrackTintColor = "#577BFF",
processHeight = 7,
@ -67,17 +62,12 @@ export default function MySlider({
currentLeftValue.current = leftValue;
currentRightValue.current = rightValue;
}, [leftValue, rightValue]);
// useEffect(() => {
// }, [leftProcess, rightProcess]);
// 左侧滑块事件
const _onPanResponderGrantLeft = (e, gestureState) => {
// const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
// _changeProcess(process, "left");
const _onPanResponderGrantLeft = () => {
handleFunc && handleFunc();
};
const _onPanResponderEndLeft = (e, gestureState) => {
const _onPanResponderEndLeft = () => {
handleFunc && handleFunc();
};
const _onPanResponderMoveLeft = (e, gestureState) => {
@ -87,14 +77,10 @@ export default function MySlider({
};
// 右侧滑块事件
const _onPanResponderGrantRight = (e, gestureState) => {
// const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
// _changeProcess(process, "right");
const _onPanResponderGrantRight = () => {
handleFunc && handleFunc();
};
const _onPanResponderEndRight = (e, gestureState) => {
// const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
// _changeProcess(process, "right");
const _onPanResponderEndRight = () => {
handleFunc && handleFunc();
};
@ -119,7 +105,6 @@ export default function MySlider({
(stepValues.indexOf(currentRightValue.current) * step - lower_bound) /
(upper_bound - lower_bound);
if (newProcess < currentRightProcess) {
// console.log("currentRightProcess", newProcess, currentRightProcess);
const newLower =
stepValues[
Math.round(
@ -155,21 +140,12 @@ export default function MySlider({
upper_bound: newUpper,
});
}
// setStepNum(stepNum - 1);
}
}
}
};
return (
<View
// style={[
// styles.container,
// {
// height,
// width,
// },
// ]}
style={{
height: "upper_bound-content",
width,
@ -191,11 +167,9 @@ export default function MySlider({
top: -23,
flex: 1,
width: "100%",
// height: 40,
padding: 17,
paddingRight: 20,
marginLeft: -12,
// backgroundColor: "#fff",
}}
>
{stepValues.map((item, index) => (
@ -217,10 +191,8 @@ export default function MySlider({
<View
style={{
backgroundColor: maximumTrackTintColor,
// flex: 1,
height: processHeight,
width: processWidth,
// marginRight: thumbSize / 2,
position: "absolute",
marginTop: -processHeight / 2,
left: thumbSize / 2,
@ -246,7 +218,6 @@ export default function MySlider({
<View
transition={1000}
cachePolicy="disk"
// style={tailwind("w-full h-full rounded-lg overflow-hidden")}
style={{
position: "absolute",
left: leftProcess * processWidth,
@ -264,7 +235,6 @@ export default function MySlider({
<View
transition={1000}
cachePolicy="disk"
// style={tailwind("w-full h-full rounded-lg overflow-hidden")}
style={{
position: "absolute",
left: rightProcess * processWidth,

310
screeens/Search/index.jsx
View File

@ -7,7 +7,7 @@ import {
Dimensions,
Platform,
} from "react-native";
import React, { useState, useEffect, useRef } from "react";
import React, { useState, useEffect, useRef, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import {
useSafeAreaInsets,
@ -21,6 +21,7 @@ import {
BottomSheet,
} from "@rneui/themed";
import { Image } from "expo-image";
import { useFocusEffect } from "@react-navigation/native";
import Empty from "../../components/Empty";
import Toast from "react-native-toast-message";
import baseRequest from "../../utils/baseRequest";
@ -212,6 +213,9 @@ export default function Search({ navigation, route }) {
priceUsed: { show: false, used: false },
comprehensiveUsed: { show: false, used: false },
});
const [currentFiltersChangeValue, setCurrentFiltersChangeValue] = useState(
{}
);
const updateSearch = (search) => {
setSearch(search);
if (!search) return;
@ -221,8 +225,42 @@ export default function Search({ navigation, route }) {
//进入页面默认focus
useEffect(() => {
searchRef.current.focus();
getIsMember();
}, []);
useFocusEffect(
useCallback(() => {
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);
}
};
getIsMember();
}, [])
);
//搜索框文本变化时进行搜索
useEffect(() => {
@ -235,6 +273,14 @@ export default function Search({ navigation, route }) {
return /^\d+$/.test(str);
};
const getResult = async () => {
if (filtersValue.comprehensiveUsed.used || filtersValue.priceUsed.used) {
setFiltersValue((old) => ({
...old,
comprehensiveUsed: { show: false, used: false },
priceUsed: { show: false, used: false },
}));
}
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
const isSearchInt = isNumeric(search);
let api;
@ -281,13 +327,13 @@ export default function Search({ navigation, route }) {
);
setStreamers(data.data.list);
setZones(zonesData);
setRecommList([]);
}
setIsloading(false);
} catch (error) {
console.error(error);
}
};
let ignore = false;
getResult();
return () => {
@ -295,8 +341,16 @@ export default function Search({ navigation, route }) {
};
}, [search]);
const getFiltersResult = async (obj) => {
if (search != "") {
setSearch("");
}
setFiltersValue({
...filtersValue,
...currentFiltersChangeValue,
// comprehensiveUsed: { show: false, used: true },
});
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
const newObj = obj || filtersValue;
const newObj = obj || { ...filtersValue, ...currentFiltersChangeValue };
let api;
let querryParams;
api = "/api/streamer/filter";
@ -310,6 +364,7 @@ export default function Search({ navigation, route }) {
delete currentFilterValue.comprehensiveUsed;
delete currentFilterValue.priceUsed;
querryParams = currentFilterValue;
try {
const base = await baseRequest();
const signature = await generateSignature({
@ -350,36 +405,9 @@ 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) => {
let obj = {};
let obj = filtersValue;
if (type == "comprehensive") {
obj = {
...filtersValue,
@ -392,7 +420,7 @@ export default function Search({ navigation, route }) {
is_active_within_a_week: 0,
comprehensiveUsed: { show: false, used: false },
};
} else {
} else if (type == "zone_admission_price") {
obj = {
...filtersValue,
zone_admission_price: { lower_bound: 0, upper_bound: 4000 },
@ -400,6 +428,51 @@ export default function Search({ navigation, route }) {
priceUsed: { show: false, used: false },
};
}
setCurrentFiltersChangeValue((old) => {
const newObj = {
...old,
...obj,
};
return newObj;
});
};
//重置筛选查询值
const handleResetFiltersSearchValue = (type) => {
let obj = filtersValue;
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 if (type == "zone_admission_price") {
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 },
};
} else {
obj = {
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 },
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) => {
const newObj = {
...old,
@ -654,15 +727,12 @@ 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 flex-row"),
...tailwind("flex flex-row px-4"),
justifyContent: "space-evenly",
}}
>
@ -674,11 +744,14 @@ export default function Search({ navigation, route }) {
});
}}
style={{
...tailwind("px-2 rounded-xl flex-row items-center"),
...tailwind(
"pl-4 mr-4 flex-1 rounded-xl flex-row items-center justify-around"
),
borderColor: "#ff75c8",
borderWidth: filtersValue.comprehensiveUsed.used ? 1 : 0,
boxSizing: "border-box",
width: 110,
// width: 110,
// width: "50%",
}}
>
<Text
@ -694,8 +767,17 @@ export default function Search({ navigation, route }) {
</Text>
{filtersValue.comprehensiveUsed.used && (
<TouchableOpacity
onPress={() => handleResetFiltersValue("comprehensive")}
style={{ width: 24 }}
onPress={() => handleResetFiltersSearchValue("comprehensive")}
style={{
width: 48,
height: 32,
display: "flex",
alignItems: "flex-center",
justifyContent: "center",
backgroundColor: "#301024",
borderRadius: 12,
marginRight: -8,
}}
>
<Icon
type="ionicon"
@ -715,17 +797,20 @@ export default function Search({ navigation, route }) {
});
}}
style={{
...tailwind("px-2 rounded-xl flex-row items-center"),
...tailwind(
"pl-4 rounded-xl flex-1 flex-row items-center justify-around"
),
borderColor: "#ff75c8",
borderWidth: filtersValue.priceUsed.used ? 1 : 0,
boxSizing: "border-box",
width: 110,
// width: 110,
width: "50%",
}}
>
<Text
style={{
...tailwind("text-white text-lg font-medium"),
marginVertical: 6,
paddingVertical: 6,
color: filtersValue.priceUsed.used ? "#ff75c8" : "#ffffff80",
}}
>
@ -733,8 +818,19 @@ export default function Search({ navigation, route }) {
</Text>
{filtersValue.priceUsed.used && (
<TouchableOpacity
onPress={() => handleResetFiltersValue("zone_admission_price")}
style={{ width: 24 }}
onPress={() =>
handleResetFiltersSearchValue("zone_admission_price")
}
style={{
width: 48,
height: 32,
display: "flex",
alignItems: "flex-center",
justifyContent: "center",
backgroundColor: "#301024",
borderRadius: 12,
marginRight: -8,
}}
>
<Icon
type="ionicon"
@ -819,40 +915,56 @@ export default function Search({ navigation, route }) {
}}
leftValue={
item.key == "age"
? filtersValue.age.lower_bound
? currentFiltersChangeValue?.age?.lower_bound
: item.key == "height"
? filtersValue.height.lower_bound
? currentFiltersChangeValue?.height?.lower_bound
: item.key == "weight"
? filtersValue.weight.lower_bound
: filtersValue.fans.lower_bound
? currentFiltersChangeValue?.weight?.lower_bound
: currentFiltersChangeValue?.fans?.lower_bound
}
rightValue={
item.key == "age"
? filtersValue.age.upper_bound
? currentFiltersChangeValue?.age?.upper_bound
: item.key == "height"
? filtersValue.height.upper_bound
? currentFiltersChangeValue?.height?.upper_bound
: item.key == "weight"
? filtersValue.weight.upper_bound
: filtersValue.fans.upper_bound
? currentFiltersChangeValue?.weight?.upper_bound
: currentFiltersChangeValue?.fans?.upper_bound
}
step={item.step}
hasInfinity={item.key == "fans"}
stepValues={item.stepValues}
onChange={(value) => {
if (item.key == "age") {
setFiltersValue((old) => ({ ...old, age: value }));
setCurrentFiltersChangeValue((old) => ({
...old,
age: value,
}));
// setFiltersValue((old) => ({ ...old, age: value }));
} else if (item.key == "fans") {
setFiltersValue((old) => ({ ...old, fans: value }));
setCurrentFiltersChangeValue((old) => ({
...old,
fans: value,
}));
// setFiltersValue((old) => ({ ...old, fans: value }));
} else if (item.key == "height") {
setFiltersValue((old) => ({
setCurrentFiltersChangeValue((old) => ({
...old,
height: value,
}));
// setFiltersValue((old) => ({
// ...old,
// height: value,
// }));
} else if (item.key == "weight") {
setFiltersValue((old) => ({
setCurrentFiltersChangeValue((old) => ({
...old,
weight: value,
}));
// setFiltersValue((old) => ({
// ...old,
// weight: value,
// }));
}
}}
maximumTrackTintColor="#382435"
@ -865,14 +977,23 @@ export default function Search({ navigation, route }) {
</View>
) : 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,
}))
checked={
currentFiltersChangeValue?.is_active_within_a_week
}
onPress={
() =>
setCurrentFiltersChangeValue((old) => ({
...old,
is_active_within_a_week: old.is_active_within_a_week
? 0
: 1,
}))
// setFiltersValue((old) => ({
// ...old,
// is_active_within_a_week: old.is_active_within_a_week
// ? 0
// : 1,
// }))
}
iconType="material-community"
checkedIcon="checkbox-marked"
@ -890,11 +1011,11 @@ export default function Search({ navigation, route }) {
placeholder={{ label: "不限", value: "" }}
value={
item.key == "constellation"
? filtersValue.constellation
: filtersValue.city
? currentFiltersChangeValue?.constellation
: currentFiltersChangeValue?.city
}
onChange={(value) =>
setFiltersValue((old) => {
setCurrentFiltersChangeValue((old) => {
let newValue = { ...old };
if (item.key == "constellation") {
newValue.constellation = value;
@ -929,12 +1050,13 @@ export default function Search({ navigation, route }) {
name="close"
size={32}
color="white"
onPress={() =>
onPress={() => {
setIsFilterVisible({
zone_admission_price: false,
comprehensive: false,
})
}
});
setCurrentFiltersChangeValue(filtersValue);
}}
/>
</View>
)}
@ -971,12 +1093,12 @@ export default function Search({ navigation, route }) {
});
return;
}
getFiltersResult();
setFiltersValue((old) => ({
...old,
comprehensiveUsed: { show: false, used: true },
}));
getFiltersResult();
}}
style={{
...tailwind("text-white px-4 py-2 rounded-xl"),
@ -1067,13 +1189,17 @@ export default function Search({ navigation, route }) {
upper_bound={item.upper_bound}
leftValue={
item.key == "zone"
? filtersValue.zone_admission_price.lower_bound
: filtersValue.wechat_coin_price.lower_bound
? currentFiltersChangeValue?.zone_admission_price
?.lower_bound
: currentFiltersChangeValue?.wechat_coin_price
?.lower_bound
}
rightValue={
item.key == "zone"
? filtersValue.zone_admission_price.upper_bound
: filtersValue.wechat_coin_price.upper_bound
? currentFiltersChangeValue?.zone_admission_price
?.upper_bound
: currentFiltersChangeValue?.wechat_coin_price
?.upper_bound
}
stepValues={item.stepValues}
step={item.step}
@ -1084,15 +1210,23 @@ export default function Search({ navigation, route }) {
itemKey={item.key}
onChange={(value) => {
if (item.key == "zone") {
setFiltersValue((old) => ({
setCurrentFiltersChangeValue((old) => ({
...old,
zone_admission_price: value,
}));
// setFiltersValue((old) => ({
// ...old,
// zone_admission_price: value,
// }));
} else if (item.key == "wechat") {
setFiltersValue((old) => ({
setCurrentFiltersChangeValue((old) => ({
...old,
wechat_coin_price: value,
}));
// setFiltersValue((old) => ({
// ...old,
// wechat_coin_price: value,
// }));
}
}}
maximumTrackTintColor="#382435"
@ -1128,12 +1262,13 @@ export default function Search({ navigation, route }) {
name="close"
size={32}
color="white"
onPress={() =>
onPress={() => {
setIsFilterVisible({
zone_admission_price: false,
comprehensive: false,
})
}
});
setCurrentFiltersChangeValue(filtersValue);
}}
/>
</View>
)}
@ -1172,12 +1307,11 @@ export default function Search({ navigation, route }) {
});
return;
}
getFiltersResult();
setFiltersValue((old) => ({
...old,
priceUsed: { show: false, used: true },
}));
getFiltersResult();
}}
style={{
...tailwind("text-white px-4 py-2 rounded-xl"),
@ -1219,7 +1353,9 @@ export default function Search({ navigation, route }) {
{streamers?.map((item, index) => (
<StreamerItem key={index} item={item} />
))}
{recommList.length > 0 && <MyDivider style={tailwind("my-2")} />}
{recommList.length > 0 && streamers.length > 0 && (
<MyDivider style={tailwind("my-2")} />
)}
{recommList.length > 0 && (
<Text style={tailwind("mt-2 text-white text-xl font-medium")}>
猜你喜欢

4
screeens/SpaceSetting/SpaceSearch/index.jsx
View File

@ -57,6 +57,7 @@ export default function SpaceSearch({ navigation }) {
body: JSON.stringify(body),
}
);
console.log("******", JSON.stringify(body));
const _data = await _response.json();
if (_data.ret === -1) {
@ -69,7 +70,6 @@ export default function SpaceSearch({ navigation }) {
});
return;
}
console.log("******", _data.data.list);
setData(_data.data.list);
setIsloading(false);
} catch (error) {
@ -164,7 +164,7 @@ export default function SpaceSearch({ navigation }) {
borderRadius: 50,
}}
>
超丝
超粉
</Text>
</View>
)}

20
yarn.lock
View File

@ -6492,13 +6492,13 @@ react-devtools-core@^4.27.7:
shell-quote "^1.6.1"
ws "^7"
react-dom@^18.2.0:
version "18.3.1"
resolved "https://registry.npmmirror.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
react-dom@18.2.0:
version "18.2.0"
resolved "https://registry.npmmirror.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
dependencies:
loose-envify "^1.1.0"
scheduler "^0.23.2"
scheduler "^0.23.0"
react-fast-compare@^2.0.1:
version "2.0.4"
@ -6750,10 +6750,10 @@ react-shallow-renderer@^16.15.0:
object-assign "^4.1.1"
react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
react@^18.2.0:
version "18.3.1"
resolved "https://registry.npmmirror.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
react@18.2.0:
version "18.2.0"
resolved "https://registry.npmmirror.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
dependencies:
loose-envify "^1.1.0"
@ -7042,7 +7042,7 @@ scheduler@0.24.0-canary-efb381bbf-20230505:
dependencies:
loose-envify "^1.1.0"
scheduler@^0.23.2:
scheduler@^0.23.0:
version "0.23.2"
resolved "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==