update

src/components/Footer.scss

@@ -3,7 +3,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 1000;
+    z-index: 100;
     // height: 120px;
     flex-direction: column;
     display: flex;

src/components/PickerViews.tsx

@@ -1,20 +1,32 @@
-import { PickerView, PickerViewColumn, View } from "@tarojs/components";
+import { PickerView, PickerViewColumn, View, Text } from "@tarojs/components";
 import { useEffect, useState } from "react";
 
-export default function Component(props: { value: number[], onChange: Function, items: any[],height?:number }) {
-    const [v,setV] = useState([0])
+export default function Component(props: { value: number[], onChange: Function, items: any[], height?: number, showBtns?: boolean, onCancel?: Function, }) {
+    const [v, setV] = useState([0])
     useEffect(() => {
         setV(props.value)
     }, [props.value])
 
     function onPickerChange(e) {
         setV(e.detail.value)
+        if (props.showBtns) {
+            return;
+        }
         props.onChange(e.detail.value)
     }
-    return <PickerView value={v}
+
+    function cancel() {
+        props.onCancel && props.onCancel()
+    }
+
+    function confirm() {
+        props.onChange(v)
+    }
+
+    return <View><PickerView value={v}
         onChange={onPickerChange}
-        indicatorStyle='height: 50px;' 
-        style={props.height?`width: 100%; height: ${props.height}px;`:`width: 100%; height: 100px;`}>
+        indicatorStyle='height: 50px;'
+        style={props.height ? `width: 100%; height: ${props.height}px;` : `width: 100%; height: 100px;`}>
         {
             props.items.map(item => {
                 return <PickerViewColumn>
@@ -26,5 +38,13 @@ export default function Component(props: { value: number[], onChange: Function,
                 </PickerViewColumn>
             })
         }
-    </PickerView>
+
+    </PickerView >
+        {
+            props.showBtns ? <View style={{ marginBottom: 20, display: 'flex', flexDirection: 'row', width: '100%' }}>
+                <Text style={{ flex: 1, textAlign: 'center' }} onClick={cancel}>取消</Text>
+                <Text style={{ flex: 1, textAlign: 'center' }} onClick={confirm}>确认</Text>
+            </View> : null
+        }
+    </View>
 }

src/features/trackTimeDuration/components/SetSchedule.tsx

@@ -113,12 +113,12 @@ export default function Component() {
   function durationChange(e) {
     var count = e[0] * 5 + 60;
     setPickerValue(e[0])
+    setIsOpen(false)
   }
 
   function layoutContent() {
     return <View style={{color:'#000'}}>
-      <Text>11111</Text>
-      <PickerViews onChange={durationChange} items={[pickerDurations()]} value={[pickerValue]} height={200}/>
+      <PickerViews onChange={durationChange} items={[pickerDurations()]} value={[pickerValue]} height={200} showBtns={true} onCancel={()=>{setIsOpen(false)}}/>
     </View>
   }
 
@@ -140,16 +140,15 @@ export default function Component() {
       <Text className="duration" onClick={()=>{setIsOpen(true)}}>16 hours 00 mins</Text>
     </View>
 
-    {/* <Footer child={
+    <Footer child={
       <Buttons title={scenario.step == 'fast' ? 'Set fast schedule' : 'Set sleep schedule'} style={{ backgroundColor: scenario.step == 'fast' ? '#AAFF00' : '#00ffff', width: 320 }} onClick={() => start()}></Buttons>
-    } /> */}
+    } />
 
     <AtFloatLayout
       isOpened={isOpen}
       onClose={() => {
         setIsOpen(false)
-      }}
-      title="111">
+      }}>
       {
         layoutContent()
       }