update

src/_health/base/new_date_time_picker.tsx

@@ -39,9 +39,11 @@ export default function NewDateTimePicker(props: {
             else if (TimeFormatter.isTimestampInThisWeek(date.getTime())){
                 string = dt.format('dddd')
             }
+            debugger
             result.push(string)
             date.setDate(date.getDate() + 1)
         }
+        debugger
         return result
     }
 

src/_record/components/picker_card.scss

@@ -1,7 +1,7 @@
 /* #ifdef weapp */
 .picker_card_bg_1 {
     position: fixed;
-    z-index: 1000;
+    z-index: 10000;
     left: 0;
     top: 0;
     width: 100vw;
@@ -17,7 +17,7 @@
 /* #ifdef rn */
 .picker_card_bg_1 {
     position: absolute;
-    z-index: 1000;
+    z-index: 10000;
     left: 0;
     top: 0;
     width: 100vw;

src/_record/components/ring_progress.weapp.tsx

@@ -128,7 +128,6 @@ export default function RingProgress(props: {
                 ctx.lineCap = 'round'; // 设置为圆角
                 ctx.stroke();
             }
-            console.log('begin draw real')
             ctx.beginPath();
             ctx.arc(canvasWidth / 2.0, canvasHeight / 2.0, props.radius, props.real.start, props.real.start + Math.max(props.real.duration, 0.01));
             ctx.lineWidth = props.real.width;

src/_record/pages/log_record.tsx

@@ -97,7 +97,7 @@ export default function LogRecord({ route }) {
     const [pics, setPics] = useState<any>(imgs ? JSON.parse(imgs) : [])
     const [focus, setFocus] = useState(only_text ? true : false)
     const [inputFocus, setInputFocus] = useState(false)
-    const [quickStatus, setQuickStatus] = useState(quick ? true : false)
+    // const [quickStatus, setQuickStatus] = useState(quick ? true : false)
 
 
     if (process.env.TARO_ENV == 'weapp') {
@@ -895,7 +895,6 @@ export default function LogRecord({ route }) {
                             <IconClose color="#fff" width={rpxToPx(64)} height={rpxToPx(64)} />
                         </View>
                     </View>
-
                 </View>
                 <View className="share_card1" style={{ background: getBackground(), marginTop: rpxToPx(20) }}>
                     {

src/_record/pages/time_record.tsx

@@ -332,7 +332,6 @@ export default function TimeRecord() {
         })
     }
 
-
     function tapStart() {
         setShowDatePicker(true)
     }

src/app.config.ts

@@ -89,13 +89,13 @@ const appConfig = defineAppConfig({
         'pages/map'
       ]
     },
-    // {
-    //   root: '_record',
-    //   pages: [
-    //     'pages/time_record',
-    //     'pages/log_record',
-    //   ]
-    // }
+    {
+      root: '_record',
+      pages: [
+        'pages/time_record',
+        'pages/log_record',
+      ]
+    }
   ],
   // preloadRule: {
   //   "pages/clock/Clock": {

src/pages/clock/Clock.tsx

@@ -111,7 +111,6 @@ export default function Clock() {
             global.locationDetail = JSON.parse(gps)
         }
         var userData = await getStorage('userData')
-        console.log(userData)
         if (userData) {
             dispatch(getInfoSuccess(JSON.parse(userData)));
         }

src/pages/clock/ClockIndex.tsx

@@ -5,9 +5,12 @@ import TabBar from "@/components/navigation/TabBar";
 import { IconClose, IconNext } from "@/components/basic/Icons";
 import { rpxToPx } from "@/utils/tools";
 import { useDispatch, useSelector } from "react-redux";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { homeInfo } from "@/services/health";
 import dayjs from "dayjs";
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+
 import { setActions, setEvents, setTimeData } from "@/store/record";
 import { TimeFormatter } from "@/utils/time_format";
 import { getInfo } from "@/services/user";
@@ -23,6 +26,7 @@ import RecordTime from "./components/record_time";
 import RecordLog from "./components/record_log";
 import PickerCard from "@/_record/components/picker_card";
 import LogPublish from "./components/log_publish";
+import RecordTimeResult from "./components/record_time_result";
 
 var timer
 let useNavigation, LinearGradient;
@@ -49,6 +53,7 @@ export default function ClockIndex() {
     const [currentTimeData, setCurrentTimeData] = useState<any>(null)
     const [showChoose, setShowChoose] = useState(false)
     const [selScenario, setSelScenario] = useState('')
+    const [selTag, setSelTag] = useState<any>(null)
     const [scenarios, setScenarios] = useState<any>([])
     const dispatch = useDispatch();
     const { t } = useTranslation()
@@ -60,6 +65,18 @@ export default function ClockIndex() {
     const [pickerTitle, setPickerTitle] = useState('')
     const [pickerValue, setPickerValue] = useState<any>(null)
     const [showLogPublish, setShowLogPublish] = useState(false)
+    const startPickerRef = useRef(showDatePicker)
+    const endPickerRef = useRef(showEndDatePicker)
+    const durationPickerRef = useRef(showDurationPicker)
+
+    const [tags, setTags] = useState<any>([])
+    const [addTag, setAddTag] = useState(false)
+
+    const [showTimeResult, setShowTimeResult] = useState(false)
+    const [timeResult, setTimeResult] = useState<any>(null)
+
+    const [current, setCurrent] = useState(0)
+
 
     dayjs.locale(global.language == 'en' ? 'en' : 'zh-cn');
 
@@ -72,6 +89,12 @@ export default function ClockIndex() {
         getHomeData()
     }, [user.isLogin])
 
+    useEffect(() => {
+        startPickerRef.current = showDatePicker
+        endPickerRef.current = showEndDatePicker
+        durationPickerRef.current = showDurationPicker
+    }, [showDatePicker, showDurationPicker, showEndDatePicker])
+
     function getHomeData() {
         homeInfo().then(res => {
             setLoaded(true)
@@ -90,6 +113,10 @@ export default function ClockIndex() {
         getInfo()
         Taro.eventCenter.on('refreshClockIndex', getHomeData)
         timer = setInterval(() => {
+            if (startPickerRef.current || endPickerRef.current || durationPickerRef.current) {
+                return
+            }
+            // console.log(showDatePicker , showDurationPicker , showEndDatePicker)
             setCount(pre => pre + 1)
         }, 1000)
         return () => {
@@ -101,6 +128,7 @@ export default function ClockIndex() {
     useEffect(() => {
         Taro.eventCenter.trigger('hideTab', showChoose)
     }, [showChoose])
+
     useEffect(() => {
         getTime()
     }, [count])
@@ -249,19 +277,52 @@ export default function ClockIndex() {
             bgView()
         }
         <View style={{ height: navigationBarHeight }} />
-        <IndexTab />
-        <Swiper style={{ height: swiperHeight(), width: rpxToPx(750) }}>
+        <IndexTab items={['Fast', 'Sleep', 'Eat', 'Move']} current={current} onChanged={(index)=>{
+            setCurrent(index)
+        }}/>
+        <Swiper style={{ height: swiperHeight(), width: rpxToPx(750) }} current={current} onChange={e=>{
+            setCurrent(e.detail.current)
+        }}>
             <SwiperItem>
-                <RecordTime scenario="FAST" contentHeight={swiperHeight()} showPicker={showPicker} hidePicker={hidePicker} />
+                <RecordTime scenario="FAST"
+                    contentHeight={swiperHeight()}
+                    showPicker={showPicker}
+                    hidePicker={hidePicker}
+                    complete={info => {
+                        setTimeResult(info)
+                        setScenarios('FAST')
+                        setShowTimeResult(true)
+                    }}
+                    count={count} />
             </SwiperItem>
             <SwiperItem>
-                <RecordTime scenario="SLEEP" contentHeight={swiperHeight()} showPicker={showPicker} hidePicker={hidePicker} />
+                <RecordTime scenario="SLEEP"
+                    contentHeight={swiperHeight()}
+                    showPicker={showPicker} hidePicker={hidePicker}
+                    complete={info => {
+                        setTimeResult(info)
+                        setScenarios('SLEEP')
+                        setShowTimeResult(true)
+                    }}
+                    count={count} />
             </SwiperItem>
             <SwiperItem>
-                <RecordLog scenario="MEAL" contentHeight={swiperHeight()} showPublish={()=>setShowLogPublish(true)}/>
+                <RecordLog scenario="MEAL" contentHeight={swiperHeight()} showPublish={(scenario, tag, tags, addTag) => {
+                    setAddTag(addTag)
+                    setShowLogPublish(true)
+                    setSelScenario(scenario)
+                    setSelTag(tag)
+                    setTags(tags)
+                }} />
             </SwiperItem>
             <SwiperItem>
-                <RecordLog scenario="ACTIVITY" contentHeight={swiperHeight()} showPublish={()=>setShowLogPublish(true)}/>
+                <RecordLog scenario="ACTIVITY" contentHeight={swiperHeight()} showPublish={(scenario, tag, tags, addTag) => {
+                    setAddTag(addTag)
+                    setShowLogPublish(true)
+                    setSelScenario(scenario)
+                    setSelTag(tag)
+                    setTags(tags)
+                }} />
             </SwiperItem>
         </Swiper>
         {
@@ -330,9 +391,28 @@ export default function ClockIndex() {
         </Block>
         <Block>
             {
-                showLogPublish && <LogPublish onClose={() => {
-                    setShowLogPublish(false)
-                }} />
+                showLogPublish && <LogPublish scenario={selScenario}
+                    tags={tags}
+                    tag={selTag}
+                    addTag={addTag}
+                    onClose={() => {
+                        setShowLogPublish(false)
+                    }} />
+            }
+        </Block>
+        <Block>
+            {
+                showTimeResult && <RecordTimeResult
+                    showPicker={showPicker}
+                    hidePicker={hidePicker}
+                    onClose={() => setShowTimeResult(false)}
+                    scenario={selScenario}
+                    info={timeResult}
+                    goEat={() => {
+                        setCurrent(2)
+                        setShowTimeResult(false)
+                    }}
+                />
             }
         </Block>
         {

src/pages/clock/components/index_tab.scss

@@ -1,5 +1,46 @@
-.index_tabbar{
+.index_tabbar {
     width: 750px;
     height: 94px;
-    background-color: pink;
-}
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.index_tabbar_item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    justify-content: center;
+    height: 94px;
+}
+
+.tab_item_nor {
+    font-size: 36px;
+    font-weight: bold;
+    color: rgba($color: #000000, $alpha: 0.4);
+    padding: 0 48px;
+}
+
+.tab_item_sel {
+    font-size: 36px;
+    font-weight: bold;
+    color: #000;
+    padding: 0 48px;
+}
+
+.tab_item_line{
+    width: 36px;
+    height: 6px;
+    background-color: transparent;
+    border-radius: 3px;
+    margin-top: 12px;
+}
+
+.tab_item_line_sel{
+    width: 36px;
+    height: 6px;
+    background-color: #000;
+    border-radius: 3px;
+    margin-top: 12px;
+}

src/pages/clock/components/index_tab.tsx

@@ -1,6 +1,28 @@
 import { View } from "@tarojs/components";
 import './index_tab.scss'
+import { useEffect, useState } from "react";
+import NewButton, { NewButtonType } from "@/_health/base/new_button";
 
-export default function IndexTab() {
-    return <View className="index_tabbar"></View>
+export default function IndexTab(props: { items: any, current: number,onChanged:any }) {
+    
+    const [selIndex,setSelIndex] = useState(props.current??0)
+
+    useEffect(()=>{
+        setSelIndex(props.current)
+    },[props.current])
+    return <View className="index_tabbar">
+        {
+            props.items.map((item, index) => {
+                return <NewButton type={NewButtonType.custom} key={index} onClick={()=>{
+                    setSelIndex(index)
+                    props.onChanged(index)
+                }}>
+                    <View className="index_tabbar_item">
+                        <View className={index==selIndex?'tab_item_sel':'tab_item_nor'}>{item}</View>
+                        <View className={index==selIndex?'tab_item_line_sel':'tab_item_line'}></View>
+                    </View>
+                </NewButton>
+            })
+        }
+    </View>
 }

src/pages/clock/components/log_publish.scss

@@ -1,8 +1,315 @@
 .log_publish_bg{
     position: fixed;
     left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000000;
+}
+
+.operate_bg {
+    display: flex;
+    flex-direction: column;
+    // flex-wrap: wrap;
+    width: 750px;
+    box-sizing: border-box;
+    padding-left: 40px;
+    margin-top: 64px;
+}
+
+.operate_item {
+    margin-right: 32px;
+    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: rgba($color: #fff, $alpha: 0.5);
+    width:108px;
+    height:108px;
+    border-radius: 54px;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.input_form {
+    width: 670px;
+    height: 360px;
+    border-radius: 42px;
+    background-color: rgba($color: #fff, $alpha: 0.25);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.input_content {
+    width: 578px;
+    height: 128px;
+    border-radius: 21px;
+    margin-top: 60px;
+    box-sizing: border-box;
+    padding-left: 60px;
+    // text-align: center;
+    background-color: #fff;
+}
+
+.input_content_placeholder{
+    text-align: center;
+}
+
+.form_btns {
+    display: flex;
+    flex-direction: row;
+    margin-top: 60px;
+    width: 670px;
+    height: 128px;
+    // background-color: palegoldenrod;
+}
+
+.form_cancel {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.form_confirm {
+    color: rgba($color: #000, $alpha: 0.4);
+}
+
+.sel_tag {
+    height: 64px;
+    border-radius: 32px;
+    background-color: rgba($color: #000, $alpha: 0.05);
+    padding-left: 24px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-right: 16px;
+}
+
+.textarea2 {
+    height: 420px;
+    width: 570px;
+    box-sizing: border-box;
+    // padding: 30px 0px;
+    margin-top: 48px;
+    margin-bottom: 48px;
+}
+
+.cover1 {
+    width: 155px;
+    height: 155px;
+    background-color: rgba($color: #000, $alpha: 0.05);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0px;
+    overflow: hidden;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    position: relative;
+    border-radius: 28px;
+}
+
+.cover2 {
+    width: 155px;
+    height: 155px;
+}
+
+.cover_del {
+    position: absolute;
     right: 0;
+    top: 0;
+    width: 52px;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.cover_del_btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #66666680;
+    flex-shrink: 0;
+}
+
+.form2 {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+.time_view {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 56px;
+    padding-right: 52px;
+    height: 108px;
+}
+
+.cardShowAni {
+    animation: showAni 0.3s linear forwards;
+}
+
+.cardHideAni {
+    animation: dismissAni 0.3s linear forwards;
+}
+
+
+
+@keyframes dismissAni {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes showAni {
+    0% {
+        opacity: 0;
+        transform: translateY(100px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+}
+
+/* #ifdef weapp */
+.share_bg {
+    position: fixed;
+    left: 0;
+    top: 0;
     width: 100vw;
     height: 100vh;
-    z-index: 10000;
+    z-index: 100;
+    background: linear-gradient(180deg, #000000 0%, #1A1A1A 100%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.navi_bar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+}
+/* #endif */
+
+/* #ifdef rn */
+.share_bg {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.navi_bar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+}
+/* #endif */
+
+
+.share_card1 {
+    width: 698px;
+    height: 932px;
+    display: flex;
+    border-radius: 84px;
+    margin-bottom: 26px;
+    flex-direction: column;
+    overflow: hidden;
+    align-items: center;
+    position: relative;
+}
+
+.log_result_success {
+    margin-top: 123px;
+    width: 120px;
+    height: 120px;
+    background-color: #fff;
+    border-radius: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.share_card_cover {
+    width: 698px;
+    height: 932px;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.share_card_layer {
+    width: 698px;
+    height: 932px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: #000;
+    opacity: 0.5;
+}
+
+.share_canvas {
+    position: absolute;
+    top: -1000px;
+}
+
+.content_card {
+    margin-left: 26px;
+    background-color: rgba($color: #fff, $alpha: 0.5);
+    width: 698px;
+    min-height: 875px;
+    border-radius: 84px;
+    padding: 64px;
+    padding-bottom: 44px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+
+.share_btn1{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 698px;
+    height: 108px;
+    border-radius: 28px;
 }

src/pages/clock/components/log_publish.tsx

@@ -1,10 +1,21 @@
-import { View } from "@tarojs/components";
+import { Textarea, View, Image, Input } from "@tarojs/components";
 import './log_publish.scss'
 import { rpxToPx } from "@/utils/tools";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import Taro from "@tarojs/taro";
-import { IconClose } from "@/components/basic/Icons";
+import { IconArrow, IconClose } from "@/components/basic/Icons";
+import NewButton, { NewButtonType } from "@/_health/base/new_button";
+import showAlert from "@/components/basic/Alert";
+import { IconCamera, IconClock } from "@/_record/components/record_icon";
+import { useTranslation } from "react-i18next";
+import { MainColorType } from "@/context/themes/color";
+import dayjs from "dayjs";
+import { addEvents } from "@/services/health";
+import { TimeFormatter } from "@/utils/time_format";
+import { BASE_IMG_URL } from "@/services/http/api";
+import LogTags from "./log_tags";
+import PickerCard from "@/_record/components/picker_card";
 
 let useRoute;
 let useNavigation;
@@ -15,7 +26,8 @@ if (process.env.TARO_ENV == 'rn') {
     LinearGradient = require('react-native-linear-gradient').default
 }
 
-export default function LogPublish(props: { onClose: any }) {
+export default function LogPublish(props: { onClose: any, scenario: string, tag?: any, tags: any, addTag: boolean }) {
+    const scale = '?x-oss-process=image/format,jpg/resize,w_400'
     const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
     const navigationBarHeight = systemInfo.statusBarHeight + 44;
     const screenHeight = systemInfo.screenHeight
@@ -23,6 +35,127 @@ export default function LogPublish(props: { onClose: any }) {
     const [showChoose, setShowChoose] = useState(false)
     const record = useSelector((state: any) => state.record);
 
+    const [pics, setPics] = useState<any>([])
+    const [desc, setDesc] = useState('')
+    const [focus, setFocus] = useState(false)
+
+    const [time, setTime] = useState(dayjs().format('HH:mm'))
+    const [selDate, setSelDate] = useState(dayjs().format('YYYY-MM-DD'))
+
+    const [enterTimestmap] = useState(new Date().getTime())
+
+    const [scenario, setScenarios] = useState(props.scenario)
+    const [posting, setPosting] = useState(false)
+
+    const [title, setTitle] = useState(props.tag ? props.tag.title : '')
+    const [step, setStep] = useState(props.addTag ? 1 : 2)
+    const [inputFocus, setInputFocus] = useState(false)
+    const [showTimePicker, setShowTimePicker] = useState(false)
+
+    const { t } = useTranslation()
+
+    useEffect(() => {
+        if (step == 1) {
+            setTimeout(() => {
+                setInputFocus(true)
+            }, 300)
+        }
+    }, [step])
+
+    function tapPic() {
+
+    }
+
+    function save() {
+        var date = TimeFormatter.stringToDate(selDate, time)
+        date.setMilliseconds(new Date(enterTimestmap).getMilliseconds())
+
+
+        var params: any = {
+            scenario: scenario, //ACTIVITY
+            type: 'POINT',
+            sub_type: scenario,
+            title: title,
+
+            time: {
+                start_timestamp: date.getTime()
+            }
+        }
+
+        // if (router.params.join_id) {
+        //     params.join_key = router.params.join_id
+        // }
+
+        var moment: any = {
+            description: desc,
+        }
+        if (pics.length > 0) {
+            var picList: any = []
+            pics.map((item) => {
+                picList.push({
+                    url: item.url,
+                    type: item.url.indexOf('mp4') != -1 ? 'video' : 'image',
+                    source: 'album',
+                    width: item.width,
+                    height: item.height,
+                    format: item.format
+                })
+            })
+            moment.media = picList
+        }
+        params.moment = moment
+
+
+
+        // if (event_id && event_id != 'undefined') {
+        //     params.event_id = event_id
+        // }
+
+        // if (is_temp) {
+        //     params.event = window == 'EAT' ? 'EAT_CUSTOM' : 'ACTIVE_CUSTOM'
+        // }
+        // params.op_page = window == 'EAT' ? 'HOME_EAT' : 'HOME_ACTIVE'
+
+
+        params.extra = {
+            set_time: global.set_time ? global.set_time : new Date().getTime(),
+            confirm_time: new Date().getTime()
+        }
+        if (posting) return
+        setPosting(true)
+        // Taro.showLoading({
+        //     title: t('health.uploading')
+        // })
+        addEvents(params).then(res => {
+            // setShowResult(true)
+            // setResult(res)
+            setPosting(false)
+            // Taro.hideLoading()
+            Taro.reLaunch({
+                url: '/pages/moment/moment'
+            })
+            props.onClose()
+        }).catch(e => {
+            setPosting(false)
+            // Taro.hideLoading()
+        })
+    }
+
+    function getDate() {
+        var sel = dayjs(selDate)
+        var now = dayjs().format('YYYY-MM-DD')
+        const yesterday = dayjs().subtract(1, 'day');
+        if (sel.format('YYYY-MM-DD') == now) {
+            return ''
+        }
+        if (yesterday.format('YYYY-MM-DD') == sel.format('YYYY-MM-DD')) {
+            return global.language == 'en' ? 'Yesterday ' : '昨天 '
+        }
+        else {
+            return global.language == 'en' ? sel.format('MMM D ') : sel.format('MMMD日 ')
+        }
+    }
+
     function getBackground() {
         var time = record.time
         if (!time) return '#fff'
@@ -64,8 +197,192 @@ export default function LogPublish(props: { onClose: any }) {
             end={{ x: 0, y: 1 }} pointerEvents="none" />
     }
 
+    function publishCard() {
+        return <View className="cardShowAni" style={{ paddingTop: rpxToPx(26) }}>
+
+            <View className="content_card">
+                <View style={{ display: 'flex', flexDirection: 'row' }} >
+                    <NewButton type={NewButtonType.custom}
+                        onClick={() => {
+                            // setStep(0)
+                            // setFocus(false)
+                            setStep(0)
+                        }}>
+
+                        <View className="sel_tag">
+                            {/* <View className="h34 bold">{selPostCount}</View>
+                            <View className="h34" style={{ marginLeft: rpxToPx(6) }}>次</View>
+                            <View style={{
+                                width: rpxToPx(2),
+                                height: rpxToPx(32),
+                                backgroundColor: '#000',
+                                opacity: 0.2,
+                                marginLeft: rpxToPx(12),
+                                marginRight: rpxToPx(12)
+                            }} /> */}
+                            <View className="h34 bold">{title}</View>
+                            <View style={{ width: rpxToPx(6) }} />
+                            <IconArrow width={rpxToPx(34)} color='#000' />
+
+                        </View>
+                    </NewButton>
+                </View>
+                {/* <Input placeholder="hhhhhhh" style={{textAlign:'center'}}/> */}
+
+                <Textarea placeholder={t('health.add_text')} className="textarea2 h44"
+                    placeholder-style="color:rgba(0,0,0,0.2)"
+                    value={desc}
+                    focus={focus}
+                    onBlur={() => {
+                        setFocus(false)
+                    }}
+                    onInput={e => {
+                        setDesc(e.detail.value)
+                    }} />
+                <View className="form2">
+
+
+                    {
+                        pics.map((item, index) => {
+                            return <View className="cover1" key={index}>
+                                <Image src={item.url + scale} mode="aspectFill" className="cover2" key={index} onClick={() => {
+                                    Taro.previewImage({
+                                        current: pics[index].url,
+                                        urls: pics.map(file => file.url)
+                                    })
+                                }} />
+                                <View className="cover_del" onClick={() => {
+                                    showAlert({
+                                        title: t('health.del_title'),
+                                        content: '',
+                                        cancelText: t('health.del_cancel'),
+                                        confirmText: t('health.del_confirm'),
+                                        showCancel: true,
+                                        confirm: () => {
+                                            var array = JSON.parse(JSON.stringify(pics))
+                                            array.splice(index, 1)
+                                            setPics(array)
+                                        }
+                                    })
+                                }}>
+                                    <View className="cover_del_btn">
+                                        <IconClose width={10} height={10} color="#fff" />
+                                    </View>
+                                </View>
+                            </View>
+                        })
+                    }
+                    {
+                        pics.length < 9 && <NewButton
+                            type={NewButtonType.custom}
+                            onClick={tapPic}>
+                            <View className="cover1" style={{}}><IconCamera color="#000" width={rpxToPx(48)} /></View>
+                        </NewButton>
+                    }
+                </View>
+            </View>
+
+
+
+
+            <View className="time_view" onClick={() => {
+                setShowTimePicker(true)
+            }}>
+
+                <IconClock width={rpxToPx(36)} color={MainColorType.black_25} />
+
+
+                <View className="h30" style={{ opacity: 0.25, marginLeft: rpxToPx(12) }}>{t('health.time')}</View>
+                <View style={{ flex: 1 }} />
+                <View className="h30" style={{ opacity: 0.25 }}>{getDate() + time}</View>
+                <IconArrow width={rpxToPx(34)} color={MainColorType.black_25} />
+                <View className="border_footer_line" style={{ left: rpxToPx(48) }} />
+            </View>
+
+            {/* {
+            router.params.join_id && <FollowInfo user={long.follow} />
+        } */}
+
+
+
+        </View>
+    }
+
+    function publishBtn() {
+        return <View className="main_footer" style={{ backgroundColor: 'transparent' }}>
+            <NewButton
+                type={NewButtonType.fill}
+                color={MainColorType.orange}
+                width={rpxToPx(646)}
+                height={rpxToPx(108)}
+                title={t('health.share_to_moment')}
+                onClick={save}
+            />
+        </View>
+    }
+
+    function tagsContent() {
+        return <View style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', marginTop: rpxToPx(26) }}>
+            <Image src={BASE_IMG_URL + 'tag.svg'} style={{ width: rpxToPx(96), height: rpxToPx(96), marginBottom: rpxToPx(24) }} />
+            <View className="h50 bold" style={{ textAlign: 'center', width: rpxToPx(600), }}>{t('health.add_a_tag')}</View>
+            <LogTags tags={props.tags} scenario={props.scenario} showPublish={(scenario, item, addTag) => {
+                // props.showPublish(scenario, item, tags)
+                if (addTag) {
+                    setStep(1)
+                    return
+                }
+                setTitle(item.title)
+                setStep(2)
+            }} />
+        </View>
+    }
+
+    function addTagContent() {
+        return <View className="cardShowAni" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: rpxToPx(300) }}>
+            <View className="input_form">
+                <Input className="input_content h36" placeholder={t('health.custom_name')} value={title}
+                    placeholderClass="input_content_placeholder"
+                    focus={inputFocus}
+                    autoFocus={inputFocus}
+                    maxlength={30}
+                    onBlur={() => {
+                        setInputFocus(false)
+                    }}
+                    onInput={(e: any) => {
+                        setTitle(e.target.value)
+                    }} />
+                <View className="form_btns">
+                    <View className="form_cancel">
+                        <NewButton btnStyle={{ flex: 1 }} type={NewButtonType.img}
+                            onClick={() => {
+                                setStep(0)
+                            }}
+                        >
+                            <View className="h30 bold">{t('health.cancel')}</View>
+                        </NewButton>
+                    </View>
+                    <View className="form_cancel">
+                        <NewButton btnStyle={{ flex: 1 }} type={NewButtonType.img}
+                            onClick={() => {
+                                if (!title || title.length == 0) return
+                                // setChooseTitle(title)
+                                // setPostCount(1)
+                                setStep(2)
+                                // addTag()
+                            }}
+                        >
+                            <View className={!title || title.length == 0 ? 'form_cancel form_confirm h30 bold' : 'form_cancel h30 bold'}
+
+                            >{t('health.confirm')}</View>
+                        </NewButton>
+                    </View>
+                </View>
+            </View>
+        </View>
+    }
+
 
-    return <View className="log_publish_bg" style={{ position: 'relative', overflow: showChoose ? 'hidden' : 'visible' }}>
+    return <View className="log_publish_bg" style={{ overflow: showChoose ? 'hidden' : 'visible' }}>
         {
             bgView()
         }
@@ -88,28 +405,30 @@ export default function LogPublish(props: { onClose: any }) {
                     top: 22 - rpxToPx(32)
                 }}
                     onClick={() => {
-                        props.onClose()
+
                         // if (showResult) {
                         //     process.env.TARO_ENV == 'weapp' ? Taro.navigateBack() : navigation.goBack()
                         //     return
                         // }
-                        // if (chooseTitle.length > 0 && step == 0) {
-                        //     setStep(2)
-                        //     return
-                        // }
-                        // if (step == 2 && (desc.length > 0 || pics.length > 0)) {
-                        //     showAlert({
-                        //         title: t('health.back_no_save'),
-                        //         content: '',
-                        //         showCancel: true,
-                        //         cancelText: t('health.cancel'),
-                        //         confirmText: t('health.exit'),
-                        //         confirm: () => {
-                        //             process.env.TARO_ENV == 'weapp' ? Taro.navigateBack() : navigation.goBack()
-                        //         }
-                        //     })
-                        //     return
-                        // }
+                        if (title && title.length > 0 && step == 0) {
+                            setStep(2)
+                            return
+                        }
+                        if (step == 2 && (desc.length > 0 || pics.length > 0)) {
+                            showAlert({
+                                title: t('health.back_no_save'),
+                                content: '',
+                                showCancel: true,
+                                cancelText: t('health.cancel'),
+                                confirmText: t('health.exit'),
+                                confirm: () => {
+                                    props.onClose()
+                                    // process.env.TARO_ENV == 'weapp' ? Taro.navigateBack() : navigation.goBack()
+                                }
+                            })
+                            return
+                        }
+                        props.onClose()
                         // process.env.TARO_ENV == 'weapp' ? Taro.navigateBack() : navigation.goBack()
                     }}>
                     <IconClose color={"#000"} width={rpxToPx(64)} height={rpxToPx(64)} />
@@ -117,5 +436,29 @@ export default function LogPublish(props: { onClose: any }) {
             </View>
         </View>
         <View style={{ height: navigationBarHeight }} />
+        {
+            step == 2 && publishCard()
+        }
+        {
+            step == 2 && publishBtn()
+        }
+        {
+            step == 0 && tagsContent()
+        }
+        {
+            step == 1 && addTagContent()
+        }
+        {
+            showTimePicker && <PickerCard onClose={() => { setShowTimePicker(false) }}
+                value={new Date(selDate + 'T' + time + ':00').getTime()}
+                title={global.language == 'en' ? 'Choose Time' : "选择时间"}
+                type="datetime"
+                onConfirm={(e) => {
+                    setSelDate(dayjs(e).format('YYYY-MM-DD'))
+                    setTime(dayjs(e).format('HH:mm'))
+                    setShowTimePicker(false)
+                }}
+            />
+        }
     </View>
 }

src/pages/clock/components/log_tags.scss

@@ -0,0 +1,35 @@
+.tag_operate_bg {
+    display: flex;
+    flex-direction: column;
+    // flex-wrap: wrap;
+    width: 750px;
+    box-sizing: border-box;
+    padding-left: 40px;
+    margin-top: 26px;
+}
+
+.tag_operate_item {
+    margin-right: 32px;
+    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;
+}
+
+.tag_first_letter {
+    margin-left: 30px;
+    margin-right: 40px;
+    background-color: rgba($color: #fff, $alpha: 0.5);
+    width: 108px;
+    height: 108px;
+    border-radius: 54px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/pages/clock/components/log_tags.tsx

@@ -0,0 +1,46 @@
+import { View,Image } from "@tarojs/components";
+import './log_tags.scss'
+import NewButton, { NewButtonType } from "@/_health/base/new_button";
+import { MainColorType } from "@/context/themes/color";
+import { IconAdd } from "@/components/basic/Icons";
+import { rpxToPx } from "@/utils/tools";
+import { BASE_IMG_URL } from "@/services/http/api";
+import { useTranslation } from "react-i18next";
+
+export default function LogTags(props: { tags: any, scenario: any, showPublish: any }) {
+    const {t} = useTranslation()
+    return <View className="tag_operate_bg">
+        {
+            props.tags.map((item, index) => {
+                return <NewButton key={index} type={NewButtonType.custom}
+                    onClick={() => {
+                        // setChooseTitle(item.title)
+                        // setPostCount(item.log_count + 1)
+                        // setStep(2)
+                        // setSelTag(item)
+                        props.showPublish(props.scenario, item,false)
+                    }}>
+                    <View key={index} className="tag_operate_item h34"
+                        style={{ backgroundColor: MainColorType.white_25 }}
+                    >
+                        <View className="tag_first_letter h36">{item.title.substring(0, 1).toUpperCase()}</View>
+                        {item.title}
+                        <View style={{ flex: 1 }} />
+                        <IconAdd color={MainColorType.g02} width={rpxToPx(36)} />
+                    </View>
+                </NewButton>
+            })
+        }
+        <View className="tag_operate_item h34"
+            style={{ backgroundColor: MainColorType.white_25, marginBottom: rpxToPx(100) }}
+            onClick={() => {
+                props.showPublish(props.scenario, {},true)
+                // setTitle('')
+                // setChooseTitle('')
+                // setPostCount(1)
+                // setStep(1)
+            }}><View className="tag_first_letter h36">
+                <Image src={BASE_IMG_URL + 'edit.svg'} style={{ width: rpxToPx(36), height: rpxToPx(36) }} />
+            </View>{t('health.custom')}</View>
+    </View>
+}

src/pages/clock/components/record_log.tsx

@@ -23,6 +23,7 @@ import FollowInfo from "@/_moment/components/follow_info";
 import NewDateTimePicker from "@/_health/base/new_date_time_picker";
 import { IconCamera, IconClock } from "@/_record/components/record_icon";
 import PickerCard from "@/_record/components/picker_card";
+import LogTags from "./log_tags";
 
 let useRoute;
 let useNavigation;
@@ -569,40 +570,11 @@ export default function RecordLog(props: {
     return <ScrollView style={{ position: 'relative', zIndex: 1000, height: props.contentHeight }} scrollY>
         <View style={{ position: 'relative', overflow: showChoose ? 'hidden' : 'visible' }}>
             {
-                step == 0 && <View className="operate_bg">
-                    {
-                        tags.map((item, index) => {
-                            return <NewButton key={index} type={NewButtonType.custom}
-                                onClick={() => {
-                                    // setChooseTitle(item.title)
-                                    // setPostCount(item.log_count + 1)
-                                    // setStep(2)
-                                    // setSelTag(item)
-                                    props.showPublish()
-                                }}>
-                                <View key={index} className="operate_item h34"
-                                    style={{ backgroundColor: MainColorType.white_25 }}
-                                >
-                                    <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>
-                            </NewButton>
-                        })
+                step == 0 && <LogTags tags={tags} scenario={scenario} showPublish={
+                    (scenario,item,addTag) => {
+                        props.showPublish(scenario,item,tags,addTag)
                     }
-
-                    <View className="operate_item h34"
-                        style={{ backgroundColor: MainColorType.white_25, marginBottom: rpxToPx(100) }}
-                        onClick={() => {
-                            setTitle('')
-                            setChooseTitle('')
-                            setPostCount(1)
-                            setStep(1)
-                        }}><View className="first_letter h36">
-                            <Image src={BASE_IMG_URL + 'edit.svg'} style={{ width: rpxToPx(36), height: rpxToPx(36) }} />
-                        </View>{t('health.custom')}</View>
-                </View>
+                } />
             }
             {
                 step == 1 && <View className="cardShowAni" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: rpxToPx(300) }}>
@@ -633,10 +605,12 @@ export default function RecordLog(props: {
                                 <NewButton btnStyle={{ flex: 1 }} type={NewButtonType.img}
                                     onClick={() => {
                                         if (title.length == 0) return
-                                        setChooseTitle(title)
-                                        setPostCount(1)
-                                        setStep(2)
-                                        addTag()
+                                        props.showPublish(props.scenario, { title: title },tags,false)
+                                        setStep(0)
+                                        // setChooseTitle(title)
+                                        // setPostCount(1)
+                                        // setStep(2)
+                                        // addTag()
                                     }}
                                 >
                                     <View className={title.length == 0 ? 'form_cancel form_confirm h30 bold' : 'form_cancel h30 bold'}

src/pages/clock/components/record_time.tsx

@@ -33,7 +33,7 @@ if (process.env.TARO_ENV == 'rn') {
     LinearGradient = require('react-native-linear-gradient').default
 }
 
-export default function RecordTime(props: { scenario: string, join_id?: string, contentHeight: number, showPicker: any, hidePicker: any }) {
+export default function RecordTime(props: { scenario: string, join_id?: string, contentHeight: number, showPicker: any, hidePicker: any, count: number, complete: any }) {
     const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
     const navigationBarHeight = systemInfo.statusBarHeight + 44;
     const screenHeight = systemInfo.screenHeight
@@ -147,16 +147,20 @@ export default function RecordTime(props: { scenario: string, join_id?: string,
             }
         })
         downloadFile()
-        timer = setInterval(() => {
-            if (picker1Ref.current || picker2Ref.current || picker3Ref.current) return
-            if (statusRef.current == 'DONE') return
-            setCount(count => count + 1)
-        }, 1000)
-        return () => {
-            clearInterval(timer)
-        }
+        // timer = setInterval(() => {
+        //     if (picker1Ref.current || picker2Ref.current || picker3Ref.current) return
+        //     if (statusRef.current == 'DONE') return
+        //     setCount(count => count + 1)
+        // }, 1000)
+        // return () => {
+        //     clearInterval(timer)
+        // }
     }, [])
 
+    useEffect(() => {
+        setCount(props.count)
+    }, [props.count])
+
     function downloadFile() {
         Taro.downloadFile({
             url: 'https://background-pictures.oss-cn-beijing.aliyuncs.com/inapp/checkmark.png',
@@ -207,7 +211,7 @@ export default function RecordTime(props: { scenario: string, join_id?: string,
         var title = scenario == 'FAST' ? t('health.adjust_fast_end_time') : t('health.adjust_wake_up2')
         props.showPicker('end', title, info.time.end_timestamp, (e) => {
             update({
-                start_timestamp: e
+                end_timestamp: e
             })
         })
     }
@@ -296,22 +300,19 @@ export default function RecordTime(props: { scenario: string, join_id?: string,
         if (posting) return
         setPosting(true)
         addEvents(params).then(res => {
-            setShowHighlight(true)
-            setTimeout(() => {
-                setShowHighlight(false)
-            }, 8000)
-            setTimeout(() => {
-                setShowResult(true)
-            }, 2000)
-            Taro.eventCenter.trigger('refreshClockIndex')
-            Taro.eventCenter.trigger('refreshMoments', '')
-            setInfo((res as any).data)
-            setStatus((res as any).data.status)
-            setShareUrl('')
-            // Taro.showToast({
-            //     title: '成功',
-            //     icon: 'success'
-            // })
+            props.complete((res as any).data)
+            // setShowHighlight(true)
+            // setTimeout(() => {
+            //     setShowHighlight(false)
+            // }, 8000)
+            // setTimeout(() => {
+            //     setShowResult(true)
+            // }, 2000)
+            // Taro.eventCenter.trigger('refreshClockIndex')
+            // Taro.eventCenter.trigger('refreshMoments', '')
+            // setInfo((res as any).data)
+            // setStatus((res as any).data.status)
+            // setShareUrl('')
             setPosting(false)
         }).catch(e => {
             setPosting(false)

src/pages/clock/components/record_time_result.scss

@@ -0,0 +1,276 @@
+
+
+.time_card_bg {
+    display: flex;
+    flex-direction: row;
+    padding-left: 40px;
+    padding-right: 40px;
+    justify-content: space-between;
+    box-sizing: border-box;
+    width: 750px;
+    margin-top: 170px;
+}
+
+.time_card {
+    width: 320px;
+    border-radius: 24px;
+    background-color: rgba($color: #ffffff, $alpha: 0.25);
+    padding: 30px 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.progress_card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+    width: 698px;
+    padding-bottom: 60px;
+    border-radius: 84px;
+    background-color: rgba($color: #ffffff, $alpha: 0.25);
+    position: relative;
+    z-index: 1;
+}
+
+.eat_card {
+    width: 698px;
+    height: 156px;
+    background-color: rgba($color: #ffffff, $alpha: 0.25);
+    position: relative;
+    border-radius: 42px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 26px;
+}
+
+.eat_card_arrow {
+    position: absolute;
+    right: 30px;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.operate_content {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 40px;
+}
+
+.share_operate_content {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 40px;
+    height: 172px;
+    margin-top: -40px;
+}
+
+.operate_item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 320px;
+    border-radius: 28px;
+    height: 172px;
+    position: relative;
+}
+
+.card_highlight {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: 28px;
+}
+
+.start_card_show {
+    background-color: rgba($color: #ffffff, $alpha: 0.5);
+    animation: highlightShowAni 3s linear forwards;
+    opacity: 0;
+}
+
+.end_card_show {
+    background-color: rgba($color: #ffffff, $alpha: 0.25);
+    animation: highlightShowAni 3s linear forwards;
+    opacity: 0;
+}
+
+.start_card_hide {
+    background-color: rgba($color: #ffffff, $alpha: 0.5);
+    animation: highlightHideAni 0.3s 0.1s linear forwards;
+    opacity: 1;
+}
+
+.end_card_hide {
+    background-color: rgba($color: #ffffff, $alpha: 0.25);
+    animation: highlightHideAni 0.3s 0.1s linear forwards;
+    opacity: 1;
+}
+
+@keyframes highlightShowAni {
+    0% {
+        opacity: 0;
+    }
+
+    10% {
+        opacity: 1;
+    }
+
+    90% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes highlightHideAni {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.share_icon {
+    position: absolute;
+    right: 48px;
+    top: 48px;
+}
+
+/* #ifdef weapp */
+.result_share_bg {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+    background: linear-gradient(180deg, #000000 0%, #1A1A1A 100%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.navi_bar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+}
+/* #endif */
+
+/* #ifdef rn */
+.result_share_bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.navi_bar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+}
+/* #endif */
+
+.share_card {
+    width: 698px;
+    height: 932px;
+    display: flex;
+    border-radius: 84px;
+    margin-bottom: 26px;
+    flex-direction: column;
+    overflow: hidden;
+    align-items: center;
+}
+
+.share_canvas {
+    position: absolute;
+    top: -1000px;
+}
+
+.share_card3 {
+    // width: 738px;
+    width: 698px;
+    height: 932px;
+    display: flex;
+    border-radius: 84px;
+    margin-bottom: 26px;
+    flex-direction: column;
+    overflow: hidden;
+    align-items: center;
+    animation: heightAni 0.3s 0.1s linear forwards;
+}
+
+@keyframes heightAni {
+    0% {
+        height: 932px;
+    }
+
+    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;
+    width: 646px;
+    height: 96px;
+    border-radius: 48px;
+    background-color: #fff;
+    color: #000;
+    animation: showAni 0.1s 0.3s linear forwards;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@keyframes showAni {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.share_btn1 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 698px;
+    height: 108px;
+    border-radius: 28px;
+}

src/pages/clock/components/record_time_result.tsx

@@ -0,0 +1,235 @@
+import { View } from "@tarojs/components";
+import './record_time_result.scss'
+import { rpxToPx } from "@/utils/tools";
+import { IconClose } from "@/components/basic/Icons";
+import Taro from "@tarojs/taro";
+import { MainColorType } from "@/context/themes/color";
+import RingProgress from "@/_record/components/ring_progress.weapp";
+import { useEffect, useState } from "react";
+import NewButton, { NewButtonType } from "@/_health/base/new_button";
+import { useTranslation } from "react-i18next";
+import { TimeFormatter } from "@/utils/time_format";
+import { getDurationArc, getStartArc } from "@/features/health/hooks/health_hooks";
+import { addEvents } from "@/services/health";
+
+export default function RecordTimeResult(props: { onClose: any, scenario: string, info: any, goEat: any, showPicker: any, hidePicker: any }) {
+    const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
+    const navigationBarHeight = systemInfo.statusBarHeight + 44;
+    const screenHeight = systemInfo.screenHeight
+    const [showResult, setShowResult] = useState(false)
+    const [showHighlight, setShowHighlight] = useState(true)
+    const scenario = props.scenario
+    const [count, setCount] = useState(1)
+    const [posting, setPosting] = useState(false)
+    const [info, setInfo] = useState(props.info)
+
+    const { t } = useTranslation()
+
+    useEffect(() => {
+        setTimeout(() => {
+            setShowHighlight(false)
+        }, 8000)
+        setTimeout(() => {
+            setShowResult(true)
+        }, 2000)
+        Taro.eventCenter.trigger('refreshClockIndex')
+        Taro.eventCenter.trigger('refreshMoments', '')
+    }, [])
+
+    function update(params) {
+        var data: any = {
+            id: info.id,
+            time: {
+                ...params
+            }
+        }
+        if (posting) return
+        setPosting(true)
+        addEvents(data).then(res => {
+            if ((res as any).result == false) {
+                // setPostError((res as any).error_messages[0])
+                Taro.showToast({
+                    title: (res as any).error_messages[0],
+                    icon: 'none'
+                })
+                return
+            }
+            Taro.eventCenter.trigger('refreshClockIndex')
+            Taro.eventCenter.trigger('refreshMoments', '')
+            setInfo((res as any).data)
+            // setShowDatePicker(false)
+            // setShowDurationPicker(false)
+            // setShowEndDatePicker(false)
+            props.hidePicker()
+            setCount((count) => count + 1)
+            setPosting(false)
+        }).catch(e => {
+            setPosting(false)
+        })
+    }
+
+    function ringExtra() {
+
+        return {
+            value: '',
+            footer: '',
+            color: MainColorType.orange,
+            result: TimeFormatter.formateDurationBySeconds(info.time.end_timestamp / 1000 - info.time.start_timestamp / 1000),
+        }
+
+    }
+
+
+    return <View className="result_share_bg" style={{ justifyContent: 'flex-start' }}>
+
+        <View className="navi_bar" style={{ height: navigationBarHeight }}>
+            <View style={{
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                bottom: 0,
+                height: 44,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            }}>
+                <View style={{
+                    position: 'absolute',
+                    width: rpxToPx(92),
+                    height: rpxToPx(64),
+                    left: 22,
+                    top: 22 - rpxToPx(32)
+                }}
+                    onClick={() => {
+                        props.onClose()
+                    }}>
+                    <IconClose color="#fff" width={rpxToPx(64)} height={rpxToPx(64)} />
+                </View>
+            </View>
+
+        </View>
+        <View className="share_card3" style={{ background: MainColorType.orange, marginTop: rpxToPx(26) + navigationBarHeight }}>
+            {/* {
+                            shareUrl.length > 0 ? <Image src={shareUrl} style={{ width: rpxToPx(900), height: rpxToPx(720) }} /> :
+                                <View style={{ width: rpxToPx(900), height: rpxToPx(720), backgroundColor: MainColorType.g02 }} />
+                        } */}
+            <RingProgress
+                radius={rpxToPx(250)} canvasId="helloworld_share21"
+                //scale={0.75}
+                count={count}
+                bgRing={{
+                    color: 'rgba(255,255,255,1)',
+                    width: rpxToPx(88)
+                }}
+                real={{
+                    color: MainColorType.orange,
+                    width: rpxToPx(16),
+                    start: getStartArc(info.time.start_timestamp),
+                    duration: getDurationArc(info.time.start_timestamp, info.time.end_timestamp)
+                }}
+                extra={ringExtra()}
+                shareBg={[MainColorType.orange]}
+                isCompleted
+                shareCover={
+                    url => {
+                        // setShareUrl(url)
+                    }
+                }
+            />
+            {
+                <View className="share_operate_content">
+                    {
+                        showResult ? <View style={{ display: 'flex', flex: 1, flexDirection: 'row' }}>
+                            <NewButton type={NewButtonType.custom} onClick={() => {
+                                // setShowDatePicker(true)
+                                var title = scenario == 'FAST' ? t('health.adjust_fast_start_time') : t('health.adjust_bed_time')
+                                props.showPicker('start', title, info.time.start_timestamp, (e) => {
+                                    update({
+                                        start_timestamp: e
+                                    })
+                                })
+                            }}>
+                                <View className="operate_item" >
+                                    <View className="g02 h24 white_50">{scenario == 'FAST' ? t('health.started') : t('health.bedtime1')}</View>
+                                    <View className="h44 bold white" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.start_timestamp, true)}</View>
+                                    <View className="h30 bold white_50">{scenario == 'FAST' ? t('health.adjust_start') : t('health.adjust_bedtime')}</View>
+                                </View>
+                            </NewButton>
+                            <NewButton type={NewButtonType.custom} onClick={() => {
+                                // setShowEndDatePicker(true)
+                                var title = scenario == 'FAST' ? t('health.adjust_fast_end_time') : t('health.adjust_wake_up2')
+                                props.showPicker('end', title, info.time.end_timestamp, (e) => {
+                                    update({
+                                        end_timestamp: e
+                                    })
+                                })
+                            }}>
+                                <View className="operate_item" >
+                                    <View className={showHighlight ? 'card_highlight end_card_show' : ''} />
+                                    <View className="g02 h24 white_50">{scenario == 'FAST' ? t('health.finished') : t('health.wokeup')}</View>
+                                    <View className="h44 bold white" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.end_timestamp, true)}</View>
+                                    <View className="h30 bold white_50">{scenario == 'FAST' ? t('health.adjust_end') : t('health.adjust_wake_up')}</View>
+                                </View>
+                            </NewButton>
+                        </View> :
+                            <View className="white bold" style={{ fontSize: rpxToPx(72), display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>{scenario == 'FAST' ? t('health.fast_finished') : t('health.sleep_finished')}</View>
+                    }
+
+
+                </View>
+            }
+        </View>
+        {/* {
+                        showResult && <View style={{ opacity: 0 }}><View className="shareBtnAni" >
+                            <ShareBtn hideShare={true}>
+                                <NewButton type={NewButtonType.custom}>
+                                    <View className="share_btn1" style={{ backgroundColor: MainColorType.success }}>
+                                        <Image src={require('@assets/_health/wechat.png')} style={{ width: rpxToPx(48), height: rpxToPx(48) }} />
+                                        <View className="white bold h34">Send to friends</View>
+                                    </View>
+                                </NewButton>
+                            </ShareBtn>
+                        </View>
+                        </View>
+                    } */}
+
+        {
+            showResult && <NewButton type={NewButtonType.custom}
+                onClick={() => {
+                    Taro.reLaunch({
+                        url: '/pages/moment/moment'
+                    })
+                }}
+            ><View
+
+                className="bold h30 momentBtnAni" style={{ marginTop: rpxToPx(26) }}>{t('health.view_in_moments')}</View>
+            </NewButton>
+        }
+        {
+            showResult && <NewButton type={NewButtonType.custom} onClick={() => {
+                // Taro.redirectTo({
+                //     url: `./log_record?scenario=MEAL`
+                // })
+                props.goEat()
+            }}><View
+
+                className="h30 bold white_75 eatBtnAni" style={{
+                    backgroundColor: MainColorType.black_05,
+                    marginTop: rpxToPx(26),
+                    width: rpxToPx(698),
+                    height: rpxToPx(108),
+                    borderRadius: rpxToPx(28),
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }}>
+                    {t('health.what_eating')}
+                </View>
+            </NewButton>
+
+        }
+
+
+
+    </View>
+}