update

src/components/Modal.tsx

@@ -1,9 +1,9 @@
 import { View } from '@tarojs/components'
 import './Modal.scss'
 
-export default function Modal(props: { children: React.ReactNode }) {
+export default function Modal(props: { children: React.ReactNode,dismiss:Function }) {
     return <View className='modal' catchMove>
-        <View style={{ flex: 1 }}></View>
+        <View style={{ flex: 1 }} onClick={()=>props.dismiss()}></View>
         {
             props.children
         }

src/components/PickerViews.tsx

@@ -32,7 +32,7 @@ export default function Component(props: { value: any, onChange: Function, items
                 return <PickerViewColumn>
                     {item.map(obj => {
                         return (
-                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{obj}</View>
+                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',color:'#000' }}>{obj}</View>
                         );
                     })}
                 </PickerViewColumn>
@@ -42,8 +42,8 @@ export default function Component(props: { value: any, onChange: Function, items
     </PickerView >
         {
             props.showBtns ? <View style={{ marginBottom: 20,marginTop:20, display: 'flex', flexDirection: 'row', width: '100%' }}>
-                <Text style={{ flex: 1, textAlign: 'center',height:50 }} onClick={cancel}>取消</Text>
-                <Text style={{ flex: 1, textAlign: 'center',height:50 }} onClick={confirm}>确认</Text>
+                <Text style={{ flex: 1, textAlign: 'center',height:50,color:'#000' }} onClick={cancel}>取消</Text>
+                <Text style={{ flex: 1, textAlign: 'center',height:50,color:'#000' }} onClick={confirm}>确认</Text>
             </View> : null
         }
     </View>

src/features/trackSomething/components/ActivityHistory.tsx

@@ -0,0 +1,49 @@
+import { View, Text } from "@tarojs/components";
+import './MetricHistory.scss'
+
+export default function Component(props: { records: any[] }) {
+    return <View  style={{display:'flex',flexDirection:'column'}}>
+        <View className="operate_view">
+            <Text>时间倒序</Text>
+            <Text style={{ marginLeft: 5, marginRight: 5 }}> | </Text>
+            <Text>时间正序</Text>
+        </View>
+        <Text className="operate_day">今天</Text>
+        <View className="operate_item">
+            <View className="status_bg">
+                <Text className="status_text">总计</Text>
+            </View>
+            <Text className="value">8888</Text>
+            <Text className="unit">步</Text>
+            <View style={{flex:1}}/>
+            <Text className="time">刚刚</Text>
+        </View>
+        <View className="operate_item">
+            <View className="status_bg">
+                <Text className="status_text">总计</Text>
+            </View>
+            <Text className="value">8888</Text>
+            <Text className="unit">步</Text>
+            <View style={{flex:1}}/>
+            <Text className="time">刚刚</Text>
+        </View>
+        <View className="operate_item">
+            <View className="status_bg">
+                <Text className="status_text">总计</Text>
+            </View>
+            <Text className="value">8888</Text>
+            <Text className="unit">步</Text>
+            <View style={{flex:1}}/>
+            <Text className="time">刚刚</Text>
+        </View>
+        <View className="operate_item">
+            <View className="status_bg">
+                <Text className="status_text">总计</Text>
+            </View>
+            <Text className="value">8888</Text>
+            <Text className="unit">步</Text>
+            <View style={{flex:1}}/>
+            <Text className="time">刚刚</Text>
+        </View>
+    </View>
+}

src/features/trackSomething/components/Metric.scss

@@ -1,56 +0,0 @@
-.metric_bg {
-    width: 320px;
-    display: flex;
-    flex-direction: column;
-    border-radius: 36px;
-    padding-left: 36px;
-    padding-right: 36px;
-    padding-top: 24px;
-    padding-bottom: 24px;
-    background-color: #1c1c1c;
-}
-
-.metric_title {
-    font-size: 36px;
-    line-height: 36px;
-    color: #ffffff;
-}
-
-.metric_value {
-    font-size: 48px;
-    line-height: 48px;
-    color: #ffffff;
-    margin-top: 20px;
-    margin-bottom: 12px;
-}
-
-.metric_unit {
-    font-size: 32px;
-    line-height: 32px;
-    color: #ffffff;
-    opacity: 0.8;
-}
-
-.metric_desc_bg {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.mteric_desc {
-    font-size: 24px;
-    line-height: 24px;
-    color: #ffffff;
-    opacity: 0.2;
-}
-
-.operate {
-    margin-top: 32px;
-    height: 84px;
-    border-radius: 42px;
-    background-color: #EEC01F;
-    color: #000;
-    line-height: 84px;
-    text-align: center;
-}

src/features/trackSomething/components/Metric.tsx

@@ -7,12 +7,15 @@ import { useEffect, useState } from "react";
 import Taro from "@tarojs/taro";
 import { uploadSteps } from "@/services/trackSomething";
 import { TimeFormatter } from "@/utils/time_format";
+import MetricItem from "./MetricItem";
 
 export default function Component(props: any) {
     const user = useSelector((state: any) => state.user);
     const [allowRun, setAllowRun] = useState(false)
     const [stepInfo, setStepInfo] = useState(null)
     const [lastTime, setLastTime] = useState(new Date().getTime())
+    const [isCheking,setIsChecking] = useState(false)
+    const [strBtnTitle,setStrBtnTitle] = useState('')
     // const [title, setTitle] = useState('打卡')
 
     //未登录<->已登录 状态切换时，执行一次授权检查
@@ -39,7 +42,8 @@ export default function Component(props: any) {
                     else {
                         setAllowRun(true)
                         // setTitle('打卡')
-                        getWeRunData()
+                        //自动打卡流程
+                        getWeRunData(true)
                     }
                 }
             })
@@ -51,7 +55,10 @@ export default function Component(props: any) {
     }
 
     function checkout() {
-        console.log('开始获取步数的时间戳：'+new Date().getTime())
+        console.log('开始获取步数的时间戳：' + new Date().getTime())
+        if (allowRun){
+            setIsChecking(true)
+        }
         if (user.isLogin) {
             setAuth(getWeRunData, refuseAuth)
         }
@@ -62,23 +69,26 @@ export default function Component(props: any) {
         }
     }
 
-    function getWeRunData() {
+    function getWeRunData(autoCheck = false) {
         // setTitle('打卡');
         setAllowRun(true)
         var time = new Date().getTime()
         Taro.getWeRunData({
             success: res => {
-                console.log('已获取步数的时间戳：'+new Date().getTime())
+                console.log('已获取步数的时间戳：' + new Date().getTime())
                 uploadSteps({
+                    is_manual: autoCheck ? 0 : 1,
+                    timestamp: time,
                     encryptedData: res.encryptedData,
                     iv: res.iv,
-                    cloudID: res.cloudID
+                    cloudID: res.cloudID,
                 }).then(res => {
                     console.log(res)
                     if ((res as any).length > 0) {
                         setStepInfo((res as any)[(res as any).length - 1])
                         setLastTime(time)
-                        console.log('接口返回的时间戳：'+new Date().getTime())
+                        console.log('接口返回的时间戳：' + new Date().getTime())
+                        setIsChecking(false)
                     }
                 });
             }
@@ -87,9 +97,27 @@ export default function Component(props: any) {
 
     function refuseAuth() {
         // setTitle('开启');
+        setIsChecking(false)
         setAllowRun(false)
     }
 
+    function goDetail(){
+        Taro.navigateTo({
+            url:'/pages/RecordsHistory?type=activity'
+        })
+    }
+
+    return <MetricItem title="行走"
+        value={allowRun ? stepInfo ? (stepInfo as any).step : '' : '未开启'}
+        unit={(allowRun && stepInfo) ? '步' : ''}
+        desc={allowRun ? stepInfo ? TimeFormatter.formatTimestamp(lastTime) : '' : '开启步数仅自己可见'}
+        btnText={allowRun ? isCheking?'打卡中...':'打卡' : '开启'}
+        isDisabled = {isCheking}
+        themeColor='#EEC01F'
+        onClickDetail={goDetail}
+        onClick={checkout}
+    />
+
     return <View className="metric_bg">
         <Text className="metric_title">行走</Text>
         {

src/features/trackSomething/components/MetricHistory.scss

@@ -0,0 +1,68 @@
+.operate_view{
+    margin-left: 86px;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: row;
+    color: #FFA200;
+    font-size: 24px;
+}
+
+.operate_day{
+    margin-left: 86px;
+    margin-top: 20px;
+    
+    color: #fff;
+    opacity: 0.4;
+}
+
+.operate_item{
+    // width: 658px;
+    margin-top: 20px;
+    height: 136px;
+    margin-left: 46px;
+    margin-right: 46px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: #1C1C1C;
+    border-radius: 36px;
+    padding-left: 40px;
+    padding-right: 40px;
+}
+
+.status_bg{
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background-color: rgba($color: #ffffff, $alpha: 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.status_text{
+    font-size: 30px;
+    font-weight: 500;
+    color: #fff;
+}
+.value{
+    font-size: 48px;
+    margin-left: 24px;
+    color: #fff;
+    font-weight: 500;
+}
+
+.unit{
+    color: #fff;
+    margin-top: 8px;
+    font-size: 32px;
+    font-weight: 500;
+}
+
+.time{
+    font-size: 28px;
+    color: rgba($color: #ffffff, $alpha: 0.5);
+    font-weight: 400;
+}
+
+

src/features/trackSomething/components/MetricHistory.tsx

@@ -0,0 +1,15 @@
+import { View, Text } from "@tarojs/components";
+import './MetricHistory.scss'
+
+export default function Component(props: { records: any[] }) {
+    return <View style={{display:'flex',flexDirection:'column'}}>
+        <View className="operate_view">
+            <Text>时间倒序</Text>
+            <View style={{ marginLeft: 5, marginRight: 5, display: 'flex',width:30,backgroundColor:'red',height:'100%' }}>
+                {/* <Text > | </Text> */}
+            </View>
+            <Text>时间正序1</Text>
+        </View>
+
+    </View>
+}

src/features/trackSomething/components/MetricItem.scss

@@ -0,0 +1,64 @@
+.metric_bg {
+    width: 320px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 36px;
+    padding-left: 36px;
+    padding-right: 36px;
+    padding-top: 24px;
+    padding-bottom: 24px;
+    background-color: #1c1c1c;
+}
+
+.metric_title {
+    font-size: 36px;
+    line-height: 36px;
+    height: 40px;
+    color: #ffffff;
+}
+
+.metric_value_bg{
+    height: 50px;
+}
+.metric_value {
+    font-size: 48px;
+    line-height: 48px;
+    height: 50px;
+    color: #ffffff;
+    margin-top: 20px;
+    margin-bottom: 12px;
+}
+
+.metric_unit {
+    font-size: 32px;
+    line-height: 32px;
+    color: #ffffff;
+    opacity: 0.8;
+}
+
+
+.metric_desc_bg {
+    display: flex;
+    height: 28px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.mteric_desc {
+    font-size: 24px;
+    line-height: 24px;
+    height: 28px;
+    color: #ffffff;
+    opacity: 0.2;
+}
+
+.operate {
+    margin-top: 32px;
+    height: 84px;
+    border-radius: 42px;
+    background-color: #EEC01F;
+    color: #000;
+    line-height: 84px;
+    text-align: center;
+}

src/features/trackSomething/components/MetricItem.tsx

@@ -0,0 +1,34 @@
+import { View, Text } from "@tarojs/components";
+import './MetricItem.scss'
+
+export default function Component(props: {
+    title: string,
+    value: any,
+    unit: string,
+    desc: string,
+    btnText: string,
+    themeColor: string,
+    isDisabled?: boolean,
+    onClickDetail: Function,
+    onClick: Function
+}) {
+
+    function clickBtn() {
+        if (props.isDisabled) {
+            return
+        }
+        props.onClick()
+    }
+
+    return <View className="metric_bg">
+        <Text className="metric_title" style={{ color: props.themeColor }}>{props.title}</Text>
+        <View className="metric_value_bg">
+            <Text className="metric_value">{props.value}<Text className="metric_unit">{props.unit}</Text></Text>
+        </View>
+        <View className="metric_desc_bg" onClick={() => props.onClickDetail()}>
+            <Text className="mteric_desc">{props.desc}</Text>
+        </View>
+
+        <View className="operate" style={{ backgroundColor: props.themeColor, opacity: props.isDisabled ? 0.5 : 1 }} onClick={clickBtn}>{props.btnText}</View>
+    </View>
+}

src/features/trackSomething/components/demoA.js

@@ -1,13 +0,0 @@
-
-import { Button } from '@tarojs/components';
-import { actor } from '../../../redux/demoMachine';
-import { useSelector } from '@xstate/react';
-
-
-export default function ComponentA(){
-    return  <Button />
-    // const [state,send] = useSelector(actor);
-    // return (
-    //     <Button onClick={()=>send({type:'INCREMENT'})}>{state.context.count}</Button>
-    // )
-}

src/features/trackTimeDuration/components/Console.tsx

@@ -299,10 +299,10 @@ export default function Component() {
                 }
             </View>
             {
-                showModal && isOpen && <Modal children={layoutContent()}/>
+                showModal && isOpen && <Modal children={layoutContent()} dismiss={()=>setIsOpen(false)}/>
             }
             {
-                isOpenDurationPicker && <Modal children={durationPickerContent()} />
+                isOpenDurationPicker && <Modal children={durationPickerContent()} dismiss={()=>setIsOpenDurationPicker(false)}/>
             }
 
             {/* {

src/features/trackTimeDuration/components/More.tsx

@@ -122,7 +122,7 @@ const Component = forwardRef((props, ref) => {
         <View ref={ref} style={{ width: '100%', marginTop: 20, marginBottom: 20, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
             <Text onClick={checkActionSheetData}>More Component</Text>
             {
-                showModal && isOpen && <Modal children={layoutContent()} />
+                showModal && isOpen && <Modal children={layoutContent()} dismiss={()=>setIsOpen(false)}/>
             }
             {/* {
                 showModal && <AtFloatLayout

src/features/trackTimeDuration/components/Schedule.tsx

@@ -364,7 +364,7 @@ export default function Component(props: { type?: string, data?: any, delSuccess
     function all() {
         if (props.type == 'latest') {
             Taro.navigateTo({
-                url: '/pages/RecordsHistory'
+                url: '/pages/RecordsHistory?type=time'
             })
         }
     }
@@ -388,10 +388,10 @@ export default function Component(props: { type?: string, data?: any, delSuccess
             props.type != 'record' && props.type != 'latest' && key == 'FAST_SLEEP' && (value == 'WAIT_FOR_START' ? <Text onClick={showStage}>Duration goals by stage</Text> : <Text onClick={showStage}>Current stage</Text>)
         }
         {
-            key == 'FAST_SLEEP' && isOpen && props.type != 'record' && checkData && <Modal children={layoutContent()} />
+            key == 'FAST_SLEEP' && isOpen && props.type != 'record' && checkData && <Modal children={layoutContent()} dismiss={()=>setIsOpen(false)}/>
         }
         {
-            key == 'FAST_SLEEP' && isOpen && props.type == 'record' && props.data.scenario == 'FAST_SLEEP' && <Modal children={layoutContent()} />
+            key == 'FAST_SLEEP' && isOpen && props.type == 'record' && props.data.scenario == 'FAST_SLEEP' && <Modal children={layoutContent()} dismiss={()=>setIsOpen(false)}/>
         }
 
         {/* {

src/features/trackTimeDuration/components/SetSchedule.tsx

@@ -233,7 +233,7 @@ export default function Component() {
       <Buttons title={scenario.step == 'fast' ? 'Set fast schedule' : 'Set sleep schedule'} style={{ backgroundColor: scenario.step == 'fast' ? '#AAFF00' : '#00ffff', width: 320 }} onClick={() => start()}></Buttons>
     } />
     {
-      isOpen && <Modal children={layoutContent()} />
+      isOpen && <Modal children={layoutContent()} dismiss={()=>setIsOpen(false)}/>
     }
     
 

src/pages/Metric.tsx

@@ -1,8 +1,13 @@
 import { View, Text, CoverView, Button } from "@tarojs/components";
 import { useState } from "react";
+import Modal from "@/components/Modal";
+import PickerViews from "@/components/PickerViews";
 
 export default function Page() {
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const [pickerValue, setPickerValue] = useState([]);
+    const [pickerItems, setPickerItems] = useState([]);
+    const [isPoint, setIsPoint] = useState(false)
 
     const openModal = () => {
         setIsModalOpen(true);
@@ -11,19 +16,122 @@ export default function Page() {
     const closeModal = () => {
         setIsModalOpen(false);
     };
+
+    function singlePicker() {
+        var min = 5
+        var max = 200
+        var step = 1
+        var value = 99
+
+        var items: number[] = []
+        for (var i = min; i <= max; i += step) {
+            if (i == value) {
+                setPickerValue([i - min] as any)
+            }
+            items.push(i)
+        }
+
+        setPickerItems([items] as any)
+
+
+        openModal()
+    }
+
+    function multiPicker() {
+        var min = 5
+        var max = 200
+        var step = 1
+        var value0 = 99
+        var value1 = 111
+
+        var items: number[] = []
+        var items2: number[] = []
+
+        var value0Index = 0
+        var value1Index = 0
+        for (var i = min; i <= max; i += step) {
+            if (i == value0) {
+                value0Index = i - min
+            }
+            if (i == value1) {
+                value1Index = i - min
+            }
+            items.push(i)
+            items2.push(i)
+        }
+
+        setPickerValue([value0Index, value1Index] as any)
+        setPickerItems([items, items2] as any)
+        openModal()
+    }
+
+    function pointPicker() {
+        var min = 5
+        var max = 200
+        var step = 0.1
+        var value = 88.7
+        var items: number[] = []
+        var items2: number[] = []
+
+        var value0Index = 0
+        var value1Index = 0
+
+        for (var i = min; i <= max; i++) {
+            if (i == Math.floor(value)) {
+                value0Index = i - min
+            }
+            items.push(i)
+            // items2.push(i)
+        }
+
+        for (var i = 0; i <= 9; i++) {
+            items2.push(i)
+        }
+        value1Index = 10 * (value - Math.floor(value));
+
+        setPickerValue([value0Index, value1Index] as any)
+        setPickerItems([items, items2] as any)
+        setIsPoint(true)
+
+        openModal()
+    }
+    function pickerChanged(e) {
+        console.log(e)
+        closeModal()
+    }
     return (
         <View className="container">
             <Text onClick={openModal}>Metric Page</Text>
+            <Text onClick={singlePicker}>单列Picker</Text>
+            <Text onClick={multiPicker}>双列Picker</Text>
+            <Text onClick={pointPicker}>小数1位Picker</Text>
 
             {
-                isModalOpen && <CoverView style={{position:'absolute',left:0,top:0,bottom:-100,right:0,backgroundColor:'red'}}>
-                    <View>
-                        <Text>这是一个弹窗</Text>
-                        <Button onClick={closeModal}>关闭弹窗</Button>
+                isModalOpen && <Modal dismiss={closeModal}>
+                    <View style={{
+                        backgroundColor: 'white',
+                        display: 'flex', flexDirection: 'column',
+                        width: '100%', height: '50%', color: '#000'
+                    }}>
+                        <Text style={{ textAlign: 'center' }}>指标Title</Text>
+                        <Text style={{ textAlign: 'center' }}>22:22</Text>
+                        <View style={{ position: 'relative' }}>
+                            <PickerViews onChange={pickerChanged}
+                                items={pickerItems}
+                                value={pickerValue}
+                                height={200} showBtns={true}
+                                onCancel={closeModal} />
+                            {isPoint && <View style={{
+                                position: 'absolute', width: '20%', height: 50, backgroundColor: 'transparent', left: '40%', top: 75,
+                                display: 'flex', alignItems: 'center', justifyContent: 'center'
+                            }}>
+                                <Text style={{ color: '#000', fontSize: 16, fontWeight: 'bold' }}>.</Text>
+                            </View>}
+                        </View>
+
                     </View>
-                </CoverView>
+                </Modal>
             }
-
         </View>
     )
 }

src/pages/RecordsHistory.tsx

@@ -1,15 +1,13 @@
 import { getClockRecords } from "@/services/trackTimeDuration";
 import { View, Text, ScrollView } from "@tarojs/components";
-import { usePullDownRefresh, useReachBottom, useReady } from "@tarojs/taro";
+import { usePullDownRefresh, useReachBottom, useReady, useRouter } from "@tarojs/taro";
 import { useEffect, useState } from "react";
 import Schedule from '@/features/trackTimeDuration/components/Schedule'
+import MetricHistory from "@/features/trackSomething/components/MetricHistory";
+import ActivityHistory from "@/features/trackSomething/components/ActivityHistory";
 
 export default function Page() {
-    // const router = useRouter();
-
-    // useEffect(() => {
-    //   console.log(router.params);
-    // }, [router.params]);
+    const router = useRouter();
     const pageSize = 10
     const [pageIndex, setPageIndex] = useState(1)
     const [records, setRecords] = useState<any[]>([])
@@ -83,17 +81,20 @@ export default function Page() {
 
     return <View className="container">
         <ScrollView scrollY style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}
-            onScrollToLower={more}
+            onScrollToLower={more} enableFlex
         // onRefresh={refresh}
         >
             {
-                records.map((item, index) => {
-                    // return <View style={{height:120}}>
-                    //     <Text>{index}</Text>
-                    // </View>
+                router.params.type == 'time' && records.map((item, index) => {
                     return <Schedule key={index} data={item} type="record" delSuccess={(item) => removeItem(item)} />
                 })
             }
+            {
+                router.params.type == 'metric' && <MetricHistory records={records} />
+            }
+            {
+                router.params.type == 'activity' && <ActivityHistory records={records} />
+            }
         </ScrollView>
     </View>;
 }

src/pages/clock.tsx

@@ -69,7 +69,8 @@ export default function IndexPage() {
       fail: function () {
         // session_key 已经失效，需要重新执行登录流程
         console.log('session_key 已经失效，需要重新执行登录流程')
-        dispatch(logoutSuccess());
+        //更新session key，发送给服务器
+        // dispatch(logoutSuccess());
         // wx.login() //重新登录
       }
 
@@ -272,7 +273,7 @@ export default function IndexPage() {
       {
         user.isLogin && <Text onClick={() => {
           Taro.navigateTo({
-            url: '/pages/RecordsHistory'
+            url: '/pages/RecordsHistory?type=time'
           })
         }}>查看全部记录</Text>
       }