update

src/_record/pages/log_record.scss

@@ -13,24 +13,38 @@
 
 .operate_bg {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-direction: column;
+    // flex-wrap: wrap;
     width: 750px;
     box-sizing: border-box;
-    padding-left: 44px;
+    padding-left: 40px;
     margin-top: 64px;
 }
 
 .operate_item {
     margin-right: 32px;
-    margin-bottom: 32px;
-    width: 202px;
-    height: 240px;
+    margin-bottom: 26px;
+    width: 670px;
+    height: 156px;
     display: flex;
+    flex-direction: row;
+    align-items: center;
+    // justify-content: center;
+    border-radius: 42px;
+    padding-right: 50px;
+    box-sizing: border-box;
+}
+
+.first_letter{
+    margin-left:30px;
+    margin-right: 40px;
+    background-color: #fff;
+    width:108px;
+    height:108px;
+    border-radius: 54px;
+    display:flex;
     align-items: center;
     justify-content: center;
-    border-radius: 24px;
-    background-color: rgba($color: #fff, $alpha: 0.25);
 }
 
 .input_form {

src/_record/pages/log_record.tsx

@@ -3,7 +3,7 @@ import './log_record.scss'
 import { useEffect, useState } from "react";
 import Taro, { useRouter, useShareAppMessage } from "@tarojs/taro";
 import { rpxToPx } from "@/utils/tools";
-import { IconArrow, IconCheck, IconClose } from "@/components/basic/Icons";
+import { IconAdd, IconArrow, IconCheck, IconClose } from "@/components/basic/Icons";
 import { MainColorType } from "@/context/themes/color";
 import { useTranslation } from "react-i18next";
 import showAlert from "@/components/basic/Alert";
@@ -18,6 +18,7 @@ import { addEvents, addUserTag, createMoment, updateMoment, userTags } from "@/s
 import PostMomentTime from "@/_health/components/post_moment_time";
 import ShareBtn from "@/components/basic/ShareBtn";
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
+import ChooseActions from "@/pages/clock/components/choose_actions";
 
 let useRoute;
 let useNavigation;
@@ -37,7 +38,7 @@ export default function LogRecord() {
     const [title, setTitle] = useState('')
     const [chooseTitle, setChooseTitle] = useState('')
     const [desc, setDesc] = useState('')
-    const [step, setStep] = useState(2)
+    const [step, setStep] = useState(0)
     const { t } = useTranslation()
 
     const [time, setTime] = useState(dayjs().format('HH:mm'))
@@ -51,6 +52,9 @@ export default function LogRecord() {
 
     const [tags, setTags] = useState<any>([])
     const [selPostCount, setPostCount] = useState(1)
+    const [showChoose, setShowChoose] = useState(false)
+    const [selTag, setSelTag] = useState<any>(null)
+
 
 
 
@@ -67,13 +71,13 @@ export default function LogRecord() {
         router = useRouter()
     }
 
-    const { event_id, is_temp, schedule_id, scenario, imgs ,only_text} = router.params
+    const { event_id, is_temp, schedule_id, scenario, imgs, only_text } = router.params
 
     const moment = router.params.moment ? JSON.parse(router.params.moment) : null
 
     const window = router.params.window ?? health.mode
     const [pics, setPics] = useState<any>(imgs ? JSON.parse(imgs) : [])
-    const [focus,setFocus] = useState(only_text?true:false)
+    const [focus, setFocus] = useState(only_text ? true : false)
 
     if (process.env.TARO_ENV == 'weapp') {
 
@@ -103,7 +107,7 @@ export default function LogRecord() {
     useEffect(() => {
         global.set_time = new Date().getTime()
         getTags()
-        if (router.params.check_in == 1){
+        if (router.params.check_in == 1) {
             setStep(0)
         }
     }, [])
@@ -485,7 +489,7 @@ export default function LogRecord() {
 
     return <View style={{ position: 'relative' }}>
         <View className="main_bg" style={{ background: getBackground() }} />
-        <View className="navi_bar" style={{ height: navigationBarHeight }}>
+        <View className="navi_bar" style={{ height: navigationBarHeight,zIndex:1000 }}>
             <View style={{
                 position: 'absolute',
                 left: 0,
@@ -504,6 +508,7 @@ export default function LogRecord() {
                     top: 22 - rpxToPx(32)
                 }}
                     onClick={() => {
+                        debugger
                         Taro.navigateBack()
                     }}>
                     <IconClose color="#000" width={rpxToPx(64)} height={rpxToPx(64)} />
@@ -530,20 +535,31 @@ export default function LogRecord() {
                 <View className="operate_bg">
                     {
                         tags.map((item, index) => {
-                            return <View key={index} className="operate_item h30 bold" onClick={() => {
-                                setChooseTitle(item.title)
-                                setPostCount(item.log_count + 1)
-                                setStep(2)
-                            }}>{item.title}</View>
+                            return <View key={index} className="operate_item h34"
+                                style={{ backgroundColor: MainColorType.white_25 }}
+                                onClick={() => {
+                                    setChooseTitle(item.title)
+                                    setPostCount(item.log_count + 1)
+                                    // setStep(2)
+                                    setSelTag(item)
+                                    setShowChoose(true)
+                                }}>
+                                <View className="first_letter h36">{item.title.substring(0, 1).toUpperCase()}</View>
+                                {item.title}
+                                <View style={{ flex: 1 }} />
+                                <IconAdd color={MainColorType.g02} width={rpxToPx(36)} />
+                            </View>
                         })
                     }
 
-                    <View className="operate_item h30 bold" onClick={() => {
-                        setTitle('')
-                        setChooseTitle('')
-                        setPostCount(1)
-                        setStep(1)
-                    }}>自定义</View>
+                    <View className="operate_item h30 bold"
+                        style={{ backgroundColor: MainColorType.white_25 }}
+                        onClick={() => {
+                            setTitle('')
+                            setChooseTitle('')
+                            setPostCount(1)
+                            setStep(1)
+                        }}><View className="first_letter h36">自</View>自定义</View>
                 </View>
             </View>
         }
@@ -750,5 +766,22 @@ export default function LogRecord() {
 
             </View>
         }
+        {
+            showChoose && <ChooseActions
+                close={() => {
+                    setShowChoose(false)
+                }}
+                quick={() => {
+                    save()
+                }}
+                chooseText={() => {
+                    setStep(2)
+                }}
+                chooseImg={(array) => {
+                    setPics(array)
+                    setStep(2)
+                }}
+            />
+        }
     </View>
 }

src/_record/pages/time_record.scss

@@ -130,7 +130,7 @@
     flex-direction: column;
     overflow: hidden;
     align-items: center;
-    animation: heightAni 0.3s 0.5s linear forwards;
+    animation: heightAni 0.3s 0.1s linear forwards;
 }
 
 @keyframes heightAni {
@@ -141,4 +141,28 @@
     100% {
         height: 892px;
     }
+}
+
+.shareBtnAni{
+    opacity: 0;
+    animation: showAni 0.1s 0.1s linear forwards;
+}
+
+.eatBtnAni{
+    opacity: 0;
+    animation: showAni 0.1s 0.2s linear forwards;
+}
+
+.momentBtnAni{
+    opacity: 0;
+    animation: showAni 0.1s 0.3s linear forwards;
+}
+
+@keyframes showAni{
+    0% {
+        opacity: 0;
+    }
+    100%{
+        opacity: 1;
+    }
 }

src/_record/pages/time_record.tsx

@@ -415,15 +415,17 @@ export default function TimeRecord() {
                     }
                 </View>
                 {
-                    showResult && <ShareBtn>
-                        <NewButton
-                            type={NewButtonType.fill}
-                            color={MainColorType.success}
-                            width={rpxToPx(698)}
-                            height={rpxToPx(108)}
-                            title="Send to friends"
-                        />
-                    </ShareBtn>
+                    showResult && <View className="shareBtnAni">
+                        <ShareBtn>
+                            <NewButton
+                                type={NewButtonType.fill}
+                                color={MainColorType.success}
+                                width={rpxToPx(698)}
+                                height={rpxToPx(108)}
+                                title="Send to friends"
+                            />
+                        </ShareBtn>
+                    </View>
                 }
                 {
                     showResult && <View
@@ -432,7 +434,7 @@ export default function TimeRecord() {
                                 url: `./log_record?scenario=${scenario == 'FAST' ? 'MEAL' : 'ACTIVITY'}`
                             })
                         }}
-                        className="h34 bold white_75" style={{
+                        className="h34 bold white_75 eatBtnAni" style={{
                             backgroundColor: MainColorType.black_05,
                             marginTop: rpxToPx(26),
                             width: rpxToPx(698),
@@ -447,13 +449,13 @@ export default function TimeRecord() {
 
                 }
                 {
-                    showResult && <View 
-                    onClick={()=>{
-                        Taro.reLaunch({
-                            url:'/pages/moment/moment'
-                        })
-                    }}
-                    className="white_50 h30" style={{ marginTop: rpxToPx(26) }}>Go to moments</View>
+                    showResult && <View
+                        onClick={() => {
+                            Taro.reLaunch({
+                                url: '/pages/moment/moment'
+                            })
+                        }}
+                        className="white_50 h30 momentBtnAni" style={{ marginTop: rpxToPx(26) }}>Go to moments</View>
                 }
 
 

src/app.scss

@@ -11,7 +11,7 @@ page {
 }
 
 .main_bg {
-    position: absolute;
+    position: fixed;
     left: 0;
     top: 0;
     width: 100vw;

src/context/themes/color.tsx

@@ -47,16 +47,16 @@ export enum MainColorType {
     g05 = '#f5f5f5',
 
     //white opacity
-    white_05 = 'rgab(255,255,255,0.05)',
-    white_25 = 'rgab(255,255,255,0.25)',
-    white_50 = 'rgab(255,255,255,0.5)',
-    white_75 = 'rgab(255,255,255,0.75)',
+    white_05 = 'rgba(255,255,255,0.05)',
+    white_25 = 'rgba(255,255,255,0.25)',
+    white_50 = 'rgba(255,255,255,0.5)',
+    white_75 = 'rgba(255,255,255,0.75)',
 
     //black opacity
-    black_05 = 'rgab(0,0,0,0.05)',
-    black_25 = 'rgab(0,0,0,0.25)',
-    black_50 = 'rgab(0,0,0,0.5)',
-    black_75 = 'rgab(0,0,0,0.75)',
+    black_05 = 'rgba(0,0,0,0.05)',
+    black_25 = 'rgba(0,0,0,0.25)',
+    black_50 = 'rgba(0,0,0,0.5)',
+    black_75 = 'rgba(0,0,0,0.75)',
 
 
 }

src/pages/clock/ClockIndex.tsx

@@ -22,7 +22,7 @@ export default function ClockIndex() {
     const [home, setHome] = useState<any>(null)
     const [count, setCount] = useState(0)
     const [currentTimeData, setCurrentTimeData] = useState<any>(null)
-    const [showChoose, setShowChoose] = useState(false)
+    
     const [selScenario, setSelScenario] = useState('')
     const dispatch = useDispatch();
     global.dispatch = dispatch;
@@ -92,16 +92,17 @@ export default function ClockIndex() {
         switch (index) {
             case 0:
             case 1:
-                setShowChoose(true)
-                setSelScenario(index == 0 ? 'MEAL' : 'ACTIVITY')
-                // jumpPage(`/_record/pages/log_record?scenario=${index == 0 ? 'MEAL' : 'ACTIVITY'}`)
+                // setShowChoose(true)
+                // setSelScenario(index == 0 ? 'MEAL' : 'ACTIVITY')
+                jumpPage(`/_record/pages/log_record?scenario=${index == 0 ? 'MEAL' : 'ACTIVITY'}`)
                 break;
             case 2:
             case 3:
                 jumpPage(`/_record/pages/time_record?scenario=${index == 2 ? 'FAST' : 'SLEEP'}`)
                 break;
             case 4:
-                jumpPage('/_record/pages/metric_record')
+                jumpPage('/pages/metric/Metric')
+                // jumpPage('/_record/pages/metric_record')
                 break
         }
     }
@@ -180,13 +181,6 @@ export default function ClockIndex() {
                 })
             }
         </View>
-        {
-            showChoose && <ChooseActions
-                scenario={selScenario}
-                close={() => {
-                    setShowChoose(false)
-                }} />
-        }
         {
             process.env.TARO_ENV == 'weapp' && <TabBar index={0} />
         }</View>

src/pages/clock/components/choose_actions.scss

@@ -30,6 +30,10 @@
     animation: showAni 0.2s linear forwards;
 }
 
+.cardShowAni1 {
+    animation: showAni1 0.2s linear forwards;
+}
+
 .btnAni{
     opacity: 0;
     animation: showAni2 0.2s 0.5s linear forwards;
@@ -48,6 +52,18 @@
     }
 }
 
+@keyframes showAni1 {
+    0% {
+        opacity: 0;
+        transform: translateY(300px);
+    }
+
+    100% {
+        opacity: 0.75;
+        transform: translateY(0px);
+    }
+}
+
 @keyframes showAni2 {
     0% {
         opacity: 0;

src/pages/clock/components/choose_actions.tsx

@@ -8,7 +8,7 @@ import { baseUrl } from '@/services/http/api'
 import { useTranslation } from 'react-i18next'
 import { jumpPage } from '@/features/trackTimeDuration/hooks/Common'
 
-export default function ChooseActions(props: { close: any, scenario: string }) {
+export default function ChooseActions(props: { close: any, quick: any, chooseText: any, chooseImg: any }) {
     const { t } = useTranslation()
 
     function camera() {
@@ -34,12 +34,14 @@ export default function ChooseActions(props: { close: any, scenario: string }) {
 
     function text() {
         props.close()
-        jumpPage(`/_record/pages/log_record?scenario=${props.scenario}&only_text=1`)
+        props.chooseText()
+        // jumpPage(`/_record/pages/log_record?scenario=${props.scenario}&only_text=1`)
     }
 
-    function checkin(){
+    function checkin() {
         props.close()
-        jumpPage(`/_record/pages/log_record?scenario=${props.scenario}&check_in=1`)
+        props.quick()
+        // jumpPage(`/_record/pages/log_record?scenario=${props.scenario}&check_in=1`)
     }
 
     function addImage(isCamera) {
@@ -73,7 +75,8 @@ export default function ChooseActions(props: { close: any, scenario: string }) {
         try {
             const uploadedUrls = await Promise.all(res.map(path => uploadFile2(path, isAlbum ? 'album' : 'camera')))
             // setPics([...pics, ...uploadedUrls])
-            jumpPage(`/_record/pages/log_record?imgs=${JSON.stringify(uploadedUrls)}&scenario=${props.scenario}`)
+            // jumpPage(`/_record/pages/log_record?imgs=${JSON.stringify(uploadedUrls)}&scenario=${props.scenario}`)
+            props.chooseImg(uploadedUrls)
             props.close()
             Taro.hideLoading()
         } catch (error) {
@@ -147,23 +150,30 @@ export default function ChooseActions(props: { close: any, scenario: string }) {
         });
     };
 
-    return <View className="actions_bg" >
-        <NewButton type={NewButtonType.img} onClick={checkin}>
-            <View className='action_btn h30 bold cardShowAni'>check in</View>
+    return <View className="actions_bg" onClick={props.close}>
+
+
+        <NewButton type={NewButtonType.img} onClick={album}>
+            <View className='action_btn h30 bold cardShowAni'>Add Photos</View>
         </NewButton>
-        <NewButton type={NewButtonType.img} onClick={camera}>
-            <View className='action_btn h30 bold cardShowAni'>take a photo</View>
+        <NewButton type={NewButtonType.img} onClick={text}>
+            <View className='action_btn h30 bold cardShowAni'>Add Text</View>
         </NewButton>
-        <NewButton type={NewButtonType.img} onClick={album}>
-            <View className='action_btn h30 bold cardShowAni'>Choose from photos</View>
+        <NewButton type={NewButtonType.img} onClick={camera}>
+            <View className='action_btn h30 bold cardShowAni'>Camera</View>
         </NewButton>
+
         <NewButton type={NewButtonType.img} onClick={chat}>
-            <View className='action_btn h30 bold cardShowAni'>Import from chats</View>
+            <View className='action_btn h30 bold cardShowAni'>Import from Chats</View>
         </NewButton>
-        <NewButton type={NewButtonType.img} onClick={text}>
-            <View className='action_btn h30 bold cardShowAni'>Only text</View>
+
+        <View className='g01 h30 bold' style={{ marginTop: rpxToPx(26) }}>OR</View>
+
+        <NewButton type={NewButtonType.img} onClick={checkin}>
+            <View className='action_btn h30 bold cardShowAni1'>Quick Check in</View>
         </NewButton>
 
+
         <View className='btnAni' style={{ marginBottom: rpxToPx(84), marginTop: rpxToPx(60) }} onClick={props.close}>
             <IconClose color="#fff" width={rpxToPx(64)} height={rpxToPx(64)} />
         </View>