From f0ea1ec904e5b334cb7a385f45371cdf94d7cb9c Mon Sep 17 00:00:00 2001
From: al <al@cdhncy.com>
Date: Fri, 23 Aug 2024 19:03:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E5=96=84=E7=AD=9B=E9=80=89=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MySlider/index.jsx | 140 +++++++++++++++++++++++++++-------
 screeens/My/index.jsx         |   4 +-
 screeens/Search/index.jsx     |  90 +++++++++++++++++++---
 3 files changed, 195 insertions(+), 39 deletions(-)

diff --git a/components/MySlider/index.jsx b/components/MySlider/index.jsx
index bfb5554..03699cd 100644
--- a/components/MySlider/index.jsx
+++ b/components/MySlider/index.jsx
@@ -16,7 +16,7 @@ export default function MySlider({
   unit,
   lable,
   height = 60,
-  width = Dimensions.get("window").width - 48,
+  width = Dimensions.get("window").width - 44,
   onChange,
   onAfterChange = () => {},
   defaultValue = 0,
@@ -42,6 +42,8 @@ export default function MySlider({
   const tailwind = useTailwind();
   const leftWatcher = useRef(null);
   const rightWatcher = useRef(null);
+  const currentLeftValue = useRef(leftValue);
+  const currentRightValue = useRef(rightValue);
   useEffect(() => {
     leftWatcher.current = PanResponder.create({
       // 建立监视器
@@ -61,12 +63,16 @@ export default function MySlider({
   }, []);
   useEffect(() => {
     // if(itemKey)
-    const currentLeftProcess = 0;
+    const currentLeftProcess =
+      (stepValues.indexOf(leftValue) * step - lower_bound) /
+      (upper_bound - lower_bound);
     const currentRightProcess =
       (stepValues.indexOf(rightValue) * step - lower_bound) /
       (upper_bound - lower_bound);
     setLeftProcess(currentLeftProcess);
     setRightProcess(currentRightProcess);
+    currentLeftValue.current = leftValue;
+    currentRightValue.current = rightValue;
   }, [leftValue, rightValue]);
   // useEffect(() => {
 
@@ -114,24 +120,35 @@ export default function MySlider({
       const newProcess = Math.round(newValue) / (upper_bound - lower_bound);
       setStepNum(stepNum + 1);
       if (process !== newProcess) {
+        const currentRightProcess =
+          (stepValues.indexOf(currentRightValue.current) * step - lower_bound) /
+          (upper_bound - lower_bound);
         if (direction == "left") {
-          if (newProcess < rightProcess) {
+          if (newProcess < currentRightProcess) {
             setLeftProcess(newProcess);
             setStepNum((old) => old + 1);
             onChange({
-              lower_bound: Math.round(
-                leftProcess * (upper_bound - lower_bound) + lower_bound
-              ),
-              upper_bound: rightValue,
+              lower_bound:
+                stepValues[
+                  Math.round(
+                    (newProcess * (upper_bound - lower_bound) + lower_bound) /
+                      step
+                  )
+                ],
+              upper_bound: currentRightValue.current,
             });
           }
         } else {
-          if (newProcess > leftProcess) {
+          const currentLeftProcess =
+            (stepValues.indexOf(currentLeftValue.current) * step -
+              lower_bound) /
+            (upper_bound - lower_bound);
+          if (newProcess > currentLeftProcess) {
             // rightProcess.current = newProcess;
             setRightProcess(newProcess);
             setStepNum((old) => old - 1);
             onChange({
-              lower_bound: leftValue,
+              lower_bound: currentLeftValue.current,
               upper_bound:
                 stepValues[
                   Math.round(
@@ -167,6 +184,38 @@ export default function MySlider({
       }}
     >
       <View style={{ width: "100%", position: "relative" }}>
+        {/* 格子步数 */}
+        {hasInfinity && (
+          <View
+            style={{
+              ...tailwind("flex flex-row justify-between items-center"),
+              position: "absolute",
+              top: -23,
+              flex: 1,
+              width: "100%",
+              // height: 40,
+              padding: 17,
+              paddingRight: 20,
+              marginLeft: -12,
+              // backgroundColor: "#fff",
+            }}
+          >
+            {stepValues.map((item, index) => (
+              <View
+                key={index}
+                style={{
+                  backgroundColor:
+                    item >= leftValue && item <= rightValue
+                      ? minimumTrackTintColor
+                      : maximumTrackTintColor,
+                  width: thumbSize / 2,
+                  height: thumbSize / 2,
+                  borderRadius: 50,
+                }}
+              ></View>
+            ))}
+          </View>
+        )}
         <View
           style={{
             backgroundColor: maximumTrackTintColor,
@@ -195,42 +244,70 @@ export default function MySlider({
           }}
         />
       </View>
+      {/* 左侧控件 */}
       <View
         transition={1000}
         cachePolicy="disk"
         // style={tailwind("w-full h-full rounded-lg overflow-hidden")}
         style={{
-          width: thumbSize,
-          height: thumbSize,
-          borderRadius: 50,
+          width: thumbSize * 3,
+          height: thumbSize * 3,
           position: "absolute",
-          left: leftProcess * processWidth,
-          marginTop: -processHeight / 2,
+          left: leftProcess * processWidth - thumbSize,
           zIndex: 10,
-          backgroundColor: "#ff75c8",
-          borderColor: "#ffffff",
-          borderWidth: 2,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          // borderWidth: 2,
         }}
         {...leftWatcher.current?.panHandlers}
-      />
+      >
+        <View
+          transition={1000}
+          cachePolicy="disk"
+          // style={tailwind("w-full h-full rounded-lg overflow-hidden")}
+          style={{
+            width: thumbSize,
+            height: thumbSize,
+            borderRadius: 50,
+            marginTop: -processHeight / 2,
+            backgroundColor: "#ff75c8",
+            borderColor: "#ffffff",
+            borderWidth: 2,
+          }}
+        />
+      </View>
+      {/* 右侧控件 */}
       <View
         transition={1000}
         cachePolicy="disk"
         // style={tailwind("w-full h-full rounded-lg overflow-hidden")}
         style={{
-          width: thumbSize,
-          height: thumbSize,
-          backgroundColor: "#fff",
-          borderRadius: 50,
+          width: thumbSize * 3,
+          height: thumbSize * 3,
           position: "absolute",
-          left: rightProcess * processWidth,
+          left: rightProcess * processWidth - thumbSize,
           zIndex: 10,
-          backgroundColor: "#ff75c8",
-          borderColor: "#ffffff",
-          borderWidth: 2,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          // borderWidth: 2,
         }}
         {...rightWatcher.current?.panHandlers}
-      ></View>
+      >
+        <View
+          style={{
+            width: thumbSize,
+            height: thumbSize,
+            backgroundColor: "#fff",
+            borderRadius: 50,
+            backgroundColor: "#ff75c8",
+            borderColor: "#ffffff",
+            borderWidth: 2,
+          }}
+        ></View>
+      </View>
+
       <View
         style={{
           ...tailwind("flex flex-row justify-between items-center"),
@@ -246,7 +323,14 @@ export default function MySlider({
             color: "#ff75c8",
           }}
         >
-          {Math.round(leftProcess * (upper_bound - lower_bound) + lower_bound)}
+          {hasInfinity && leftProcess == 1
+            ? ">" + upper_bound
+            : stepValues[
+                Math.round(
+                  (leftProcess * (upper_bound - lower_bound) + lower_bound) /
+                    step
+                )
+              ]}
         </Text>
         <Text
           style={{
diff --git a/screeens/My/index.jsx b/screeens/My/index.jsx
index 31589b5..5716ccc 100644
--- a/screeens/My/index.jsx
+++ b/screeens/My/index.jsx
@@ -303,9 +303,9 @@ export default function My({ navigation }) {
                 <Text
                   style={{
                     color: data?.is_a_member === 1 ? "#FFADBE" : "white",
-                    whiteSpace: "nowrap",
+                    // whiteSpace: "nowrap",
                     overflow: "hidden",
-                    textOverflow: "ellipsis",
+                    // textOverflow: "ellipsis",
                     maxWidth: 240,
                     ...tailwind("text-2xl font-medium"),
                   }}
diff --git a/screeens/Search/index.jsx b/screeens/Search/index.jsx
index 93eab1e..87dba3f 100644
--- a/screeens/Search/index.jsx
+++ b/screeens/Search/index.jsx
@@ -5,6 +5,7 @@ import {
   ScrollView,
   TouchableOpacity,
   Dimensions,
+  Platform,
 } from "react-native";
 import React, { useState, useEffect, useRef } from "react";
 import { useTailwind } from "tailwind-rn";
@@ -646,7 +647,12 @@ export default function Search({ navigation, route }) {
         />
       </View>
       <ScrollView style={tailwind("flex-1")}>
-        <View style={tailwind("flex flex-row justify-around")}>
+        <View
+          style={{
+            ...tailwind("flex flex-row"),
+            justifyContent: "space-evenly",
+          }}
+        >
           <TouchableOpacity
             onPress={() => {
               setIsFilterVisible({
@@ -736,6 +742,12 @@ export default function Search({ navigation, route }) {
         >
           <BottomSheet
             // containerStyle={{ marginTop: 80 }}
+            onBackdropPress={() =>
+              setIsFilterVisible({
+                zone_admission_price: false,
+                comprehensive: false,
+              })
+            }
             backdropStyle={{ backgroundColor: "#0000004d" }}
             scrollViewProps={{
               contentContainerStyle: {
@@ -755,12 +767,13 @@ export default function Search({ navigation, route }) {
             }}
             isVisible={isFilterVisible.comprehensive}
             style={{
-              paddingTop: 110,
+              paddingTop: Platform.OS != "ios" ? 55 : 110,
             }}
           >
             <View>
               {filters.map((item, index) => (
                 <View
+                  key={index}
                   style={{
                     ...tailwind(`p-4 rounded-xl`),
                     backgroundColor: "#13121f",
@@ -818,7 +831,7 @@ export default function Search({ navigation, route }) {
                           setFiltersValue((old) => ({ ...old, weight: value }));
                         }
                       }}
-                      maximumTrackTintColor="#ff75c81a"
+                      maximumTrackTintColor="#382435"
                       minimumTrackTintColor="#ff75c8"
                       processHeight={5}
                       unit={item.unit}
@@ -870,9 +883,34 @@ export default function Search({ navigation, route }) {
               ))}
               <View
                 style={{
-                  ...tailwind("flex-row justify-around mb-4"),
+                  ...tailwind("flex-row justify-around items-center mb-4 p-4"),
                 }}
               >
+                {Platform.OS != "ios" && (
+                  <View
+                    style={{
+                      ...tailwind(
+                        "p-2 rounded-xl flex justify-center items-center mr-2"
+                      ),
+                      backgroundColor: "#ffffff1a",
+                      width: 46,
+                      height: 46,
+                    }}
+                  >
+                    <Icon
+                      type="ionicon"
+                      name="close"
+                      size={32}
+                      color="white"
+                      onPress={() =>
+                        setIsFilterVisible({
+                          zone_admission_price: false,
+                          comprehensive: false,
+                        })
+                      }
+                    />
+                  </View>
+                )}
                 {isMember == 1 && (
                   <TouchableOpacity
                     style={{
@@ -918,6 +956,7 @@ export default function Search({ navigation, route }) {
                     marginVertical: 6,
                     backgroundColor: "#ff75c8",
                     minWidth: 120,
+                    flex: 1,
                   }}
                 >
                   <Text
@@ -935,6 +974,12 @@ export default function Search({ navigation, route }) {
           </BottomSheet>
           <BottomSheet
             backdropStyle={{ backgroundColor: "#0000004d" }}
+            onBackdropPress={() =>
+              setIsFilterVisible({
+                zone_admission_price: false,
+                comprehensive: false,
+              })
+            }
             scrollViewProps={{
               contentContainerStyle: {
                 // paddingTop: 20,
@@ -953,7 +998,7 @@ export default function Search({ navigation, route }) {
             }}
             isVisible={isFilterVisible.zone_admission_price}
             style={{
-              paddingTop: 110,
+              paddingTop: Platform.OS != "ios" ? 55 : 110,
             }}
           >
             <View
@@ -965,8 +1010,9 @@ export default function Search({ navigation, route }) {
                 height: screenDimensions.height - 120,
               }}
             >
-              {priceFilters.map((item) => (
+              {priceFilters.map((item, index) => (
                 <View
+                  key={index}
                   style={{
                     ...tailwind(`p-4 rounded-xl`),
                     backgroundColor: "#13121f",
@@ -1017,7 +1063,7 @@ export default function Search({ navigation, route }) {
                         }));
                       }
                     }}
-                    maximumTrackTintColor="#ff75c81a"
+                    maximumTrackTintColor="#382435"
                     minimumTrackTintColor="#ff75c8"
                     processHeight={5}
                     unit={item.unit}
@@ -1027,12 +1073,37 @@ export default function Search({ navigation, route }) {
               ))}
               <View
                 style={{
-                  ...tailwind("flex-row justify-around mb-4"),
+                  ...tailwind("flex-row justify-around mb-4 p-4"),
                   position: "absolute",
                   bottom: 0,
                   width: "100%",
                 }}
               >
+                {Platform.OS != "ios" && (
+                  <View
+                    style={{
+                      ...tailwind(
+                        "p-2 rounded-xl flex justify-center items-center mr-2"
+                      ),
+                      backgroundColor: "#ffffff1a",
+                      width: 46,
+                      height: 46,
+                    }}
+                  >
+                    <Icon
+                      type="ionicon"
+                      name="close"
+                      size={32}
+                      color="white"
+                      onPress={() =>
+                        setIsFilterVisible({
+                          zone_admission_price: false,
+                          comprehensive: false,
+                        })
+                      }
+                    />
+                  </View>
+                )}
                 {isMember == 1 && (
                   <TouchableOpacity
                     style={{
@@ -1077,9 +1148,10 @@ export default function Search({ navigation, route }) {
                   }}
                   style={{
                     ...tailwind("text-white px-4 py-2 rounded-xl"),
-                    marginVertical: 6,
+                    // marginVertical: 6,
                     backgroundColor: "#ff75c8",
                     minWidth: 120,
+                    flex: 1,
                   }}
                 >
                   <Text