update

src/components/input/LimitPickers.tsx

@@ -3,6 +3,7 @@ import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import './LimitPickers.scss'
 import Taro from "@tarojs/taro";
 import React from "react";
+import { useTranslation } from "react-i18next";
 // export default function Component(props: { limit: number, onChange: Function, onCancel: Function,isRealTime?:boolean,limitDay?:number,time?:number,ref?:any }) {
 const Component = forwardRef((props: {
     limit: number, onChange: Function, onCancel: Function,
@@ -16,6 +17,7 @@ const Component = forwardRef((props: {
     const [values, setValues] = useState([props.limitDay ? props.limitDay - 1 : 6, today.getHours(), today.getMinutes()])
     const [isDisableConfirm, setIsDisableConfirm] = useState(false)
     const [count,setCount] = useState(0)
+    const {t} = useTranslation()
 
     function alphaToHex(alpha) {
         var alphaValue = Math.round(alpha * 255); // 将透明度乘以255并四舍五入
@@ -152,8 +154,8 @@ const Component = forwardRef((props: {
     function onPickerEnd(e){
         // console.log(e)
         // console.log(values)
-        setValues(values)
-        setCount(count+1)
+        // setValues(values)
+        // setCount(count+1)
     }
 
     function disableConfirm() {

src/components/input/PickerViews.tsx

@@ -45,7 +45,7 @@ const Component = forwardRef((props: {
         getConfirmData: confirm
     }));
 
-    return <View style={{ display: 'flex', flexDirection: 'column' }}>
+    return <View className='modal_content'>
         <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
         <PickerView value={v}
             onChange={onPickerChange}

src/features/trackSomething/components/Metric.tsx

@@ -6,11 +6,7 @@ import Taro from "@tarojs/taro";
 import { metricCards, metricFollows, metricGroups, uploadMetric, uploadSteps } from "@/services/trackSomething";
 import { TimeFormatter } from "@/utils/time_format";
 import MetricItem from "./MetricItem";
-import Modal from "@/components/layout/Modal";
-import LimitPickers from "@/components/input/LimitPickers";
-import SlidngScale from "@/components/input/SlidngScale";
 import NoData from "@/components/view/NoData";
-import { alphaToHex } from "@/utils/tools";
 import Layout from "@/components/layout/layout";
 import { MetricModalType, ModalType, NaviBarTitleShowType, TemplateType } from "@/utils/types";
 import { useTranslation } from "react-i18next";
@@ -20,6 +16,7 @@ import { setTabbarStatus } from "@/store/common";
 import MetricModalChoose from "./MetricModalChoose";
 import MetricModalOrder from './MetricModalOrder';
 import MetricModalAdd from "./MetricModalAdd";
+import MetricModalTime from "./MetricModalTime";
 
 let useNavigation;
 if (process.env.TARO_ENV == 'rn') {
@@ -32,13 +29,6 @@ export default function Component(props: any) {
     const { t } = useTranslation()
     const user = useSelector((state: any) => state.user);
     const [list, setList] = useState([])
-
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [isTimePickerOpen, setIsTimePickerOpen] = useState(false);
-    const [pickerValue, setPickerValue] = useState([]);
-    const [pickerItems, setPickerItems] = useState([]);
-    const [isPoint, setIsPoint] = useState(false)
-
     const [metricItem, setMetricItem] = useState({})
 
     const [strTime, setStrTime] = useState('')
@@ -48,7 +38,6 @@ export default function Component(props: any) {
 
     const [setupTime, setSetupTime] = useState(0)
     const [triggered, setTriggered] = useState(true)
-    const limitPickerRef = useRef<any>(null);
     const [count, setCount] = useState(0)
     const [showPageContainer, setShowPageContainer] = useState(false)
     const [modalType, setModalType] = useState(MetricModalType.none)
@@ -57,6 +46,7 @@ export default function Component(props: any) {
     const [orignalGroups, setOrignalGroups] = useState([])
     const [limits, setLimits] = useState(null)
     const [orders, setOrders] = useState([])
+    const [tempMetricItem, setTempMetricItem] = useState(null)
     const dispatch = useDispatch();
     let navigation;
     if (useNavigation) {
@@ -83,11 +73,6 @@ export default function Component(props: any) {
         dispatch(setTabbarStatus(false))
         setModalType(MetricModalType.add)
         setShowPageContainer(true)
-        // setIsModalOpen(true);
-    };
-
-    const closeModal = () => {
-        setIsModalOpen(false);
     };
 
     global.refreshMetric = () => {
@@ -174,72 +159,12 @@ export default function Component(props: any) {
         }
     }
 
-    function showTimePicker() {
-
-        setIsTimePickerOpen(true)
-    }
-
     function chooseTime(e) {
         setTime(e);
         setStrTime(TimeFormatter.dateTimeFormate(e))
-        setIsTimePickerOpen(false)
-    }
-
-    function cancelModal() {
-        (metricItem as any).schemas.map((item, index) => {
-            item.tempValue = ''
-        })
-        closeModal()
-    }
-
-    function confirmModal() {
-        closeModal()
-        var date = new Date(time)
-        var strDate = (date.getFullYear() + '') + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
-
-        var array: any[] = [];
-        (metricItem as any).schemas.map((item, index) => {
-            array.push({
-                code: item.code,
-                value: item.tempValue && item.tempValue > 0 ? item.tempValue : item.default_value
-            })
-        })
-        var params = {
-            code: (metricItem as any).code,
-            timestamp: time,
-            date: strDate,
-            items: array,
-            extra: {
-                set_time: setupTime,
-                confirm_time: new Date().getTime()
-            }
-        }
-
-        global.postBtnUpdateStatus('normal');
-        uploadMetric(params).then(res => {
-            // getCards();
-            (metricItem as any).schemas.map((item, index) => {
-                item.tempValue = ''
-            })
-
-            list.map((item, index) => {
-                if ((item as any).code == (res as any).code) {
-                    (item as any).latest_record = (res as any).latest_record;
-                    (item as any).schemas = (res as any).schemas;
-                }
-            })
-            setList(JSON.parse(JSON.stringify(list)))
-
-            global.postBtnUpdateStatus('idle');
-            setTimeout(() => {
-                setCount(count + 1)
-            }, 31000)
-
-        })
     }
 
     const limitDay = 500
-
     const limit = new Date().getTime() - limitDay * 3600 * 1000 * 24;
 
     function detail() {
@@ -284,18 +209,6 @@ export default function Component(props: any) {
         </View>
     }
 
-    function detailContent() {
-        // if (process.env.TARO_ENV=='rn'){
-        //     return <ScrollView>
-        //         {
-        //             detail()
-        //         }
-        //         <View style={{height:150}}/> 
-        //     </ScrollView>
-        // }
-        return detail()
-    }
-
     function addBtnClick() {
         Taro.showActionSheet({
             itemList: [t('feature.track_something.metric.choose_metric'),
@@ -349,11 +262,34 @@ export default function Component(props: any) {
                     array={orders} />
             case MetricModalType.add:
                 return <MetricModalAdd
-                    item={metricItem}
+                    item={tempMetricItem ? tempMetricItem : metricItem}
                     strTime={strTime}
-                    showPicker={() => { }}
-                    cancel={() => { }}
-                    confirm={() => { }} />
+                    showPicker={(tempItem) => {
+                        var temp = JSON.parse(JSON.stringify(tempItem))
+                        temp.schemas.map(item => {
+                            if (item.tempValue) {
+                                item.default_value = item.tempValue
+                            }
+                        })
+                        setTempMetricItem(temp)
+                        setModalType(MetricModalType.time)
+                    }}
+                    cancel={modalAddCancel}
+                    confirm={modalAddConfirm} />
+            case MetricModalType.time:
+                return <MetricModalTime
+                    item={metricItem}
+                    time={time}
+                    limit={limit}
+                    limitDay={limitDay}
+                    cancel={() => {
+                        setModalType(MetricModalType.add)
+                    }}
+                    confirm={(e) => {
+                        chooseTime(e)
+                        setModalType(MetricModalType.add)
+                    }}
+                />
         }
         return <View />
     }
@@ -395,6 +331,60 @@ export default function Component(props: any) {
         setShowPageContainer(false)
     }
 
+    function modalAddCancel() {
+        dispatch(setTabbarStatus(true))
+        setShowPageContainer(false)
+        onPageContainerCancel()
+    }
+
+    function modalAddConfirm(result) {
+        dispatch(setTabbarStatus(true))
+        setShowPageContainer(false)
+
+        var date = new Date(time)
+        var strDate = (date.getFullYear() + '') + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
+
+        var array: any[] = [];
+        result.schemas.map((item, index) => {
+            array.push({
+                code: item.code,
+                value: item.tempValue && item.tempValue > 0 ? item.tempValue : item.default_value
+            })
+        })
+        var params = {
+            code: result.code,
+            timestamp: time,
+            date: strDate,
+            items: array,
+            extra: {
+                set_time: setupTime,
+                confirm_time: new Date().getTime()
+            }
+        }
+
+        global.postBtnUpdateStatus('normal');
+        uploadMetric(params).then(res => {
+            // getCards();
+            result.schemas.map((item, index) => {
+                item.tempValue = ''
+            })
+
+            list.map((item, index) => {
+                if ((item as any).code == (res as any).code) {
+                    (item as any).latest_record = (res as any).latest_record;
+                    (item as any).schemas = (res as any).schemas;
+                }
+            })
+            setList(JSON.parse(JSON.stringify(list)))
+
+            global.postBtnUpdateStatus('idle');
+            setTimeout(() => {
+                setCount(count + 1)
+            }, 31000)
+
+        })
+    }
+
     function onPageContainerCancel() {
         if (modalType == MetricModalType.choose || modalType == MetricModalType.order) {
             var array: any = [];
@@ -409,10 +399,13 @@ export default function Component(props: any) {
             setGroups(JSON.parse(JSON.stringify(orignalGroups)))
             // setGroups(orignalGroups)
         }
+        else {
+            setTempMetricItem(null)
+        }
     }
 
     return <View style={{ position: 'relative' }}>
-        <Layout children={showErrorPage ? <NoData refresh={() => { getCards() }} /> : detailContent()}
+        <Layout children={showErrorPage ? <NoData refresh={() => { getCards() }} /> : detail()}
             title={t('page.metric.title')}
             type={TemplateType.customHeader}
             header={headerView()}
@@ -433,34 +426,6 @@ export default function Component(props: any) {
                 metricModalContent()
             }
         </PageContainer>
-        {
-            isModalOpen && <Modal dismiss={closeModal} title={(metricItem as any).name}
-                themeColor={(metricItem as any).theme_color}
-                confirm={confirmModal}>
-
-            </Modal>
-        }
-        {
-
-            isTimePickerOpen && <Modal
-                themeColor={(metricItem as any).theme_color}
-                dismiss={() => setIsTimePickerOpen(false)} confirm={() => {
-                    var picker = limitPickerRef.current;
-                    chooseTime((picker as any).getConfirmData());
-                    setIsTimePickerOpen(false);
-                }}>
-                <LimitPickers ref={limitPickerRef}
-                    isRealTime={true} time={time} limit={limit}
-                    title={t('feature.track_something.picker_datetime')}
-                    themeColor={(metricItem as any).theme_color}
-                    limitDay={limitDay} onCancel={() => { setIsTimePickerOpen(false) }}
-                    onChange={(e) => {
-                        chooseTime(e)
-                        //  pickerConfirm(e)
-                        //  hidePicker()
-                    }} />
-            </Modal>
-        }
     </View>
 
 }

src/features/trackSomething/components/MetricModalAdd.scss

@@ -1,3 +0,0 @@
-.modal_operate1{
-    margin-bottom: 120px;
-}

src/features/trackSomething/components/MetricModalAdd.tsx

@@ -15,10 +15,7 @@ export default function Component(props: { item: any, strTime: string, showPicke
         setMetricItem(props.item)
     }, [props.item])
     return <View>
-        <View style={{
-            display: 'flex', flexDirection: 'column',
-            width: '100%', color: '#000'
-        }}>
+        <View className='modal_content'>
             <Text className='modal_title' style={{ color: (metricItem as any).theme_color }}>{(metricItem as any).name ? (metricItem as any).name : ''}</Text>
             <View style={{ position: 'relative' }}>
                 {
@@ -39,19 +36,19 @@ export default function Component(props: { item: any, strTime: string, showPicke
                 }
             </View>
             <View className="change_time_bg ">
-                <View className="gray1 time_bg" onClick={() => { props.showPicker() }}>
+                <View className="gray1 time_bg" onClick={() => { props.showPicker(metricItem) }}>
                     <Text className="time" >{props.strTime}</Text>
                 </View>
 
             </View>
-            <View className='modal_operate1'>
+            <View className='modal_operate'>
                 <View className='modal_btn' style={{ backgroundColor: (metricItem as any).theme_color + alphaToHex(0.4) }} onClick={() => props.cancel()}>
                     <Text className='modal_cancel_text' style={{ color: (metricItem as any).theme_color }}>{
                         t('feature.common.picker_cancel_btn')
                     }</Text>
                 </View>
                 <View className='btn_space' />
-                <View className='modal_btn' style={{ backgroundColor: (metricItem as any).theme_color }} onClick={() => props.confirm()}>
+                <View className='modal_btn' style={{ backgroundColor: (metricItem as any).theme_color }} onClick={() => props.confirm(metricItem)}>
                     <Text className='modal_confirm_text' style={{ color: '#000' }}>{
                         t('feature.common.picker_confirm_btn')
                     }</Text>

src/features/trackSomething/components/MetricModalChoose.scss

@@ -1,7 +1,4 @@
-.modal_content{
-    padding-bottom: 120px;
-    
-}
+
 
 .modal_title_view{
     display: flex;

src/features/trackSomething/components/MetricModalOrder.scss

@@ -1,6 +1,4 @@
-.modal_content{
-    padding-bottom: 120px;
-}
+
 
 .modal_order_detail{
     margin-top: 64px;

src/features/trackSomething/components/MetricModalTime.tsx

@@ -0,0 +1,21 @@
+import { View } from "@tarojs/components";
+import './MetricModalTime.scss'
+import LimitPickers from "@/components/input/LimitPickers";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+export default function Component(props: { item: any, time: number, limit: number, limitDay: number, cancel: Function, confirm: Function }) {
+    const [metricItem, setMetricItem] = useState(props.item)
+    const { t } = useTranslation()
+    return <View className='modal_content'>
+        <LimitPickers
+            isRealTime={true} time={props.time} limit={props.limit}
+            title={t('feature.track_something.picker_datetime')}
+            themeColor={metricItem.theme_color}
+            limitDay={props.limitDay} onCancel={() => { props.cancel() }}
+            onChange={(e) => {
+
+                // chooseTime(e)
+                props.confirm(e)
+            }} />
+    </View>
+}

src/features/trackTimeDuration/components/SetSchedule.tsx

@@ -1,7 +1,7 @@
 import Buttons from "@/components/basic/Buttons";
 import { setPlan } from "@/services/trackTimeDuration";
 import { setScenario, setStep } from "@/store/scenario";
-import { View, Text } from "@tarojs/components";
+import { View, Text, PageContainer } from "@tarojs/components";
 import "./SetSchedule.scss";
 import Taro, { useDidShow, useReady } from "@tarojs/taro";
 import { useEffect, useRef, useState } from "react";
@@ -32,12 +32,13 @@ export default function Component() {
 
   const [isOpen, setIsOpen] = useState(false)
   const [isTimeOpen, setIsTimeOpen] = useState(false)
-  const [btnDisable,setBtnDisable] = useState(false)
+  const [btnDisable, setBtnDisable] = useState(false)
 
   const pickerRef = useRef<any>(null);
   // const [count,setCount] = useState(0)
   const [beginChange, setBeginChange] = useState(true)
   const [operateType, setOperateType] = useState(0)
+  const [isModalTimePicker,setIsModalTimePicker] = useState(false)
 
   var scheduleObj: { start_time: any; end_time: any; };
   if (scenario.name == 'FAST') {
@@ -90,14 +91,14 @@ export default function Component() {
     // })
   })
 
-  useEffect(()=>{
-    if (isOpen || isTimeOpen){
+  useEffect(() => {
+    if (isOpen || isTimeOpen) {
       global.disableCanvasGesture = true
     }
     else {
       global.disableCanvasGesture = false
     }
-  },[isOpen,isTimeOpen])
+  }, [isOpen, isTimeOpen])
 
 
   useDidShow(() => {
@@ -125,7 +126,7 @@ export default function Component() {
         setBtnDisable(false)
         global.checkData()
         Taro.navigateBack({ delta: 3 })
-      }).catch(e=>{
+      }).catch(e => {
         setBtnDisable(false)
       })
     }
@@ -193,7 +194,7 @@ export default function Component() {
       dispatch(setStep('fast'))
       global.checkData()
       Taro.navigateBack({ delta: 4 })
-    }).catch(e=>{
+    }).catch(e => {
       setBtnDisable(false)
     })
   }
@@ -342,6 +343,7 @@ export default function Component() {
       <View className="box">
         <View className="header" style={{ backgroundColor: global.isDebug ? '#EEC01F' : 'transparent' }}>
           <View className="item1" style={{ opacity: operateType == 1 || operateType == 3 ? 1 : 0.4, backgroundColor: global.isDebug ? 'pink' : 'transparent' }} onClick={() => {
+            setIsModalTimePicker(true)
             setChooseStart(true)
             setIsTimeOpen(true)
           }}>
@@ -350,6 +352,7 @@ export default function Component() {
           </View>
           <View style={{ width: 23 }} />
           <View className="item1" style={{ opacity: operateType == 2 || operateType == 3 ? 1 : 0.4, backgroundColor: global.isDebug ? 'pink' : 'transparent' }} onClick={() => {
+            setIsModalTimePicker(true)
             setChooseStart(false)
             setIsTimeOpen(true)
           }}>
@@ -361,7 +364,7 @@ export default function Component() {
         <View className="dial_bg" style={{ backgroundColor: global.isDebug ? 'pink' : 'transparent' }}>
           <Dial ref={canvasRef} />
         </View>
-        <View className="duration_bg" style={{ opacity: operateType == 1 || operateType == 2 ? 1 : 0.4, backgroundColor: global.isDebug ? 'pink' : 'transparent' }} onClick={() => { setIsOpen(true) }}>
+        <View className="duration_bg" style={{ opacity: operateType == 1 || operateType == 2 ? 1 : 0.4, backgroundColor: global.isDebug ? 'pink' : 'transparent' }} onClick={() => { setIsModalTimePicker(false);setIsOpen(true) }}>
           <Text className="duration_title schedule_text_key">{t('feature.track_time_duration.dial.duration')}</Text>
           <Text className="duration_value schedule_text_value"  >{hours > 0 ? hours + '小时' : ''}{minutes > 0 ? minutes + '分钟' : ''}</Text>
         </View>
@@ -375,7 +378,19 @@ export default function Component() {
           disable={btnDisable}
           onClick={() => start()} />
       </Footer>
-      {
+
+      <PageContainer style={{ backgroundColor: '#1c1c1c' }}
+        overlayStyle='background-color:rgba(0,0,0,0.9)'
+        custom-style='background-color:#1c1c1c'
+        closeOnSlideDown={false}
+        onAfterLeave={() => { setIsOpen(false); setIsTimeOpen(false) }}
+        show={isOpen || isTimeOpen} round={true} overlay={true} position='bottom'
+      >
+        {
+          isModalTimePicker?timeContent():layoutContent()
+        }
+      </PageContainer>
+      {/* {
         isOpen && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={() => {
           setIsOpen(false)
           durationChange(pickerRef.current.getConfirmData())
@@ -385,7 +400,7 @@ export default function Component() {
         isTimeOpen && <Modal children={timeContent()} dismiss={() => setIsTimeOpen(false)} confirm={() => {
           setIsTimeOpen(false)
         }} />
-      }
+      } */}
 
     </View>
   }

src/features/trackTimeDuration/components/TitleView.tsx

@@ -73,7 +73,7 @@ export default function Component(props: {
 
     var showAddIcon = user.isLogin && props.showAddBtn
 
-    return <View className={props.children ? 'title_view' : 'title_view no_sub_element'} >
+    return <View className={(props.children||props.subTitle) ? 'title_view' : 'title_view no_sub_element'} >
         <View className='title_bg'>
             <Text className='title' style={{
                 color: props.titleColor ? props.titleColor : '#fff',

src/utils/common.scss

@@ -34,4 +34,10 @@ $historyItemMarginBottom:16px;
     background-clip: text;
     color: transparent;
 }
-/* #endif */
+/* #endif */
+
+.modal_content{
+    padding-bottom: 120px;
+    display: flex;
+    flex-direction: column;
+}