update

src/components/input/PickerViews.tsx

@@ -2,13 +2,15 @@ import { PickerView, PickerViewColumn, View, Text } from "@tarojs/components";
 import './PickerViews.scss'
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { rpxToPx } from "@/utils/tools";
 
 // export default function Component(props: { value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function, }) {
 
 let detailValue
 const Component = forwardRef((props: {
     value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function,
-    themeColor?: string, title?: string
+    themeColor?: string, title?: string,
+    hideTitle?: boolean
 }, ref) => {
     const { t } = useTranslation()
     const [v, setV] = useState(props.value)
@@ -48,8 +50,11 @@ const Component = forwardRef((props: {
         getConfirmData: confirm
     }));
 
-    return <View className='modal_content' catchMove>
-        <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
+    return <View className='modal_content' style={{paddingBottom:props.showBtns?rpxToPx(120):0}} catchMove>
+        {
+            !props.hideTitle && <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
+        }
+
         <PickerView value={v}
             // color='#fff'
             itemStyle={{ color: '#fff' }}
@@ -61,11 +66,11 @@ const Component = forwardRef((props: {
             maskClass="picker-mask"
         >
             {
-                props.items.map(item => {
-                    return <PickerViewColumn style={{ color: 'red' }} >
-                        {item.map(obj => {
+                props.items.map((item, index) => {
+                    return <PickerViewColumn style={{ color: 'red' }} key={index}>
+                        {item.map((obj, j) => {
                             return (
-                                <Text style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{obj}</Text>
+                                <Text key={j} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{obj}</Text>
                             );
                         })}
                     </PickerViewColumn>
@@ -73,21 +78,24 @@ const Component = forwardRef((props: {
             }
 
         </PickerView >
-        <View className='modal_operate'>
-            <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={(e) => {
-                if (process.env.TARO_ENV == 'weapp') {
-                    e.stopPropagation()
-                }; props.onCancel!()
-            }}>
-                <Text className='modal_cancel_text' style={{ color: color, fontWeight: 'bold' }}>{t('feature.common.picker_cancel_btn')}</Text>
-            </View>
-            <View className='btn_space' />
-            <View className='modal_btn' style={{ backgroundColor: color }} onClick={confirm}>
-                <Text className='modal_confirm_text' style={{ color: '#000', fontWeight: 'bold' }}>{t('feature.common.picker_confirm_btn')}</Text>
-            </View>
+        {
+            props.showBtns && <View className='modal_operate'>
+                <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={(e) => {
+                    if (process.env.TARO_ENV == 'weapp') {
+                        e.stopPropagation()
+                    }; props.onCancel!()
+                }}>
+                    <Text className='modal_cancel_text' style={{ color: color, fontWeight: 'bold' }}>{t('feature.common.picker_cancel_btn')}</Text>
+                </View>
+                <View className='btn_space' />
+                <View className='modal_btn' style={{ backgroundColor: color }} onClick={confirm}>
+                    <Text className='modal_confirm_text' style={{ color: '#000', fontWeight: 'bold' }}>{t('feature.common.picker_confirm_btn')}</Text>
+                </View>
 
 
-        </View>
+            </View>
+        }
+
     </View>
 })
 

src/pages/clock/Suggest.tsx

@@ -1,10 +1,13 @@
 import { ColorType } from "@/context/themes/color";
 import { ChooseScenarioBtn } from "@/features/common/SpecBtns";
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
-import { View, Text } from "@tarojs/components";
+import { View, Text, Picker } from "@tarojs/components";
 import { useRouter } from "@tarojs/taro";
 import { useEffect } from "react";
 import './ChooseScenario.scss';
+import PickerViews from "@/components/input/PickerViews";
+import { useSelector } from "react-redux";
+import { durationDatas } from "@/features/trackTimeDuration/hooks/Console";
 
 export default function Suggest() {
     let router
@@ -24,6 +27,7 @@ export default function Suggest() {
     const isMixed = parseInt(router.params.isMixed + '')
     const isFast = parseInt(router.params.isFast + '')
     const isActionPlan = parseInt(router.params.isActionPlan + '')
+    const common = useSelector((state: any) => state.common);
 
 
     useEffect(() => {
@@ -115,10 +119,39 @@ export default function Suggest() {
         return 'To wake up refreshed at 7:00 AM, go to bed at suggested time.'
     }
 
+    function timePicker(){
+        return <View>
+            <PickerViews ref={null}
+            onChange={()=>{}}
+            items={durationDatas(common)}
+            value={[1,2]} height={200}
+            title=''
+            themeColor={isFast ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
+            showBtns={false}
+            hideTitle={true}
+            onCancel={() => {  }} />
+        </View>
+    }
+
+    function durationPicker(){
+        return <View></View>
+    }
+
+    function content(){
+        return <View >
+            {
+                timePicker()
+            }
+        </View>
+    }
+
 
     return <View style={{ display: 'flex', flexDirection: 'column' }}>
         <Text className="target_title">{suggestTitle()}</Text>
         <Text className="target_desc">{suggestDesc()}</Text>
+        {
+            content()
+        }
 
         <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
             <ChooseScenarioBtn