update

src/_record/pages/log_record.config.ts

@@ -13,14 +13,14 @@ export default definePageConfig({
     //     "recycle-item": "../../components/miniprogram-recycle-view/recycle-item"
     // },
     // "disableScroll": true,
-    "componentFramework": "glass-easel",
-    "renderer": "skyline",
-    "rendererOptions": {
-        "skyline": {
-            "disableABTest": true,
-            "defaultDisplayBlock": true
-        }
-    },
+    // "componentFramework": "glass-easel",
+    // "renderer": "skyline",
+    // "rendererOptions": {
+    //     "skyline": {
+    //         "disableABTest": true,
+    //         "defaultDisplayBlock": true
+    //     }
+    // },
     "navigationStyle": "custom",
     enablePageMeta:true
 })

src/_record/pages/time_record.config.ts

@@ -13,13 +13,15 @@ export default definePageConfig({
     //     "recycle-item": "../../components/miniprogram-recycle-view/recycle-item"
     // },
     // "disableScroll": true,
-    "componentFramework": "glass-easel",
-    "renderer": "skyline",
-    "rendererOptions": {
-        "skyline": {
-            "disableABTest": true,
-            "defaultDisplayBlock": true
-        }
-    },
+
+
+    // "componentFramework": "glass-easel",
+    // "renderer": "skyline",
+    // "rendererOptions": {
+    //     "skyline": {
+    //         "disableABTest": true,
+    //         "defaultDisplayBlock": true
+    //     }
+    // },
     "navigationStyle": "custom",
 })

src/_record/pages/time_record.scss

@@ -1,4 +1,3 @@
-
 .navi_bar {
     position: fixed;
     left: 0;
@@ -38,6 +37,7 @@
     border-radius: 84px;
     background-color: rgba($color: #ffffff, $alpha: 0.25);
     position: relative;
+    z-index: 1;
 }
 
 .eat_card {
@@ -53,7 +53,7 @@
     margin-top: 26px;
 }
 
-.eat_card_arrow{
+.eat_card_arrow {
     position: absolute;
     right: 30px;
     top: 0;
@@ -63,13 +63,21 @@
     justify-content: center;
 }
 
-.operate_content{
+.operate_content {
     display: flex;
     flex-direction: row;
     margin-bottom: 40px;
 }
 
-.operate_item{
+.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;
@@ -77,13 +85,13 @@
     border-radius: 28px;
 }
 
-.share_icon{
+.share_icon {
     position: absolute;
     right: 48px;
-    top:48px;
+    top: 48px;
 }
 
-.share_bg{
+.share_bg {
     position: fixed;
     left: 0;
     top: 0;
@@ -97,7 +105,7 @@
     justify-content: center;
 }
 
-.share_card{
+.share_card {
     width: 698px;
     height: 932px;
     display: flex;
@@ -108,7 +116,29 @@
     align-items: center;
 }
 
-.share_canvas{
+.share_canvas {
     position: absolute;
-    top:-1000px;
+    top: -1000px;
+}
+
+.share_card2 {
+    width: 738px;
+    height: 932px;
+    display: flex;
+    border-radius: 84px;
+    margin-bottom: 26px;
+    flex-direction: column;
+    overflow: hidden;
+    align-items: center;
+    animation: heightAni 0.3s 0.5s linear forwards;
+}
+
+@keyframes heightAni {
+    0% {
+        height: 932px;
+    }
+
+    100% {
+        height: 892px;
+    }
 }

src/_record/pages/time_record.tsx

@@ -9,7 +9,7 @@ import NewDateTimePicker from "@/_health/base/new_date_time_picker";
 import dayjs from "dayjs";
 import RingProgress from "../components/ring_progress";
 import NewDurationPicker, { DurationPickerType } from "@/_health/base/new_durationpicker";
-import { IconArrow, IconClose } from "@/components/basic/Icons";
+import { IconArrow, IconClose, IconMore2 } from "@/components/basic/Icons";
 import { useSelector } from "react-redux";
 import { TimeFormatter } from "@/utils/time_format";
 import { addEvents, delWindowId } from "@/services/health";
@@ -44,6 +44,7 @@ export default function TimeRecord() {
     const [showHighlight, setShowHighlight] = useState(false)
     const [showShare, setShowShare] = useState(false)
     const [shareUrl, setShareUrl] = useState('')
+    const [showResult, setShowResult] = useState(false)
 
     const statusRef = useRef(status)
     const picker1Ref = useRef(showDatePicker)
@@ -64,7 +65,7 @@ export default function TimeRecord() {
     }
 
     const { scenario } = router.params
-    
+
 
     if (process.env.TARO_ENV == 'weapp') {
 
@@ -218,7 +219,10 @@ export default function TimeRecord() {
             setShowHighlight(true)
             setTimeout(() => {
                 setShowHighlight(false)
-            }, 3000)
+            }, 4000)
+            setTimeout(() => {
+                setShowResult(true)
+            }, 2000)
             Taro.eventCenter.trigger('refreshClockIndex')
             Taro.eventCenter.trigger('refreshMoments', '')
             setInfo((res as any).data)
@@ -329,30 +333,6 @@ export default function TimeRecord() {
     function doneComponent() {
         if (status == 'DONE') {
             return <View className="share_bg" style={{ justifyContent: 'flex-start' }}>
-                {/* {
-                    shareUrl.length == 0 && <View className="share_canvas"><RingProgress
-                        radius={125} canvasId="helloworld_share2"
-                        //scale={0.75}
-                        count={count}
-                        bgRing={{
-                            color: 'rgba(255,255,255,1)',
-                            width: 35
-                        }}
-                        real={{
-                            color: MainColorType.orange,
-                            width: 5,
-                            start: getStartArc(info.time.start_timestamp),
-                            duration: getDurationArc(info.time.start_timestamp, info.time.end_timestamp)
-                        }}
-                        extra={ringExtra()}
-                        isCompleted
-                        shareCover={
-                            url => {
-                                setShareUrl(url)
-                            }
-                        }
-                    /></View>
-                } */}
 
                 <View className="navi_bar" style={{ height: navigationBarHeight }}>
                     <View style={{
@@ -380,7 +360,7 @@ export default function TimeRecord() {
                     </View>
 
                 </View>
-                <View className="share_card" style={{ background: MainColorType.orange, marginTop: rpxToPx(26) + navigationBarHeight }}>
+                <View className="share_card2" 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 }} />
@@ -409,33 +389,73 @@ export default function TimeRecord() {
                         }
                     />
                     {
-                        <View className="operate_content" style={{ marginTop: rpxToPx(40) }}>
-                            <View className="operate_item" onClick={() => {
-                                setShowDatePicker(true)
-                            }}>
-                                <View className="g02 h24">STARTED</View>
-                                <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.start_timestamp, true)}</View>
-                                <View className="h30 bold" style={{ color: MainColorType.white }}>Edit Start</View>
-                            </View>
-                            <View className="operate_item" style={{ backgroundColor: showHighlight ? '#ffffff80' : 'transparent' }} onClick={() => {
-                                setShowEndDatePicker(true)
-                            }}>
-                                <View className="g02 h24">FINISHED</View>
-                                <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.end_timestamp, true)}</View>
-                                <View className="h30 bold" style={{ color: MainColorType.white }}>Edit Finish</View>
-                            </View>
+                        <View className="share_operate_content">
+                            {
+                                showResult ? <View style={{ display: 'flex', flex: 1, flexDirection: 'row' }}>
+                                    <View className="operate_item" onClick={() => {
+                                        setShowDatePicker(true)
+                                    }}>
+                                        <View className="g02 h24 white_50">STARTED</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" style={{ color: MainColorType.white }}>Edit Start</View>
+                                    </View>
+                                    <View className="operate_item" style={{ backgroundColor: showHighlight ? '#ffffff80' : 'transparent' }} onClick={() => {
+                                        setShowEndDatePicker(true)
+                                    }}>
+                                        <View className="g02 h24 white_50">FINISHED</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" style={{ color: MainColorType.white }}>Edit Finish</View>
+                                    </View>
+                                </View> :
+                                    <View className="white bold" style={{ fontSize: rpxToPx(72), display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>You've made it!</View>
+                            }
+
+
                         </View>
                     }
                 </View>
-                <ShareBtn>
-                    <NewButton
-                        type={NewButtonType.fill}
-                        color={MainColorType.success}
-                        width={rpxToPx(698)}
-                        height={rpxToPx(108)}
-                        title="Send to friends"
-                    />
-                </ShareBtn>
+                {
+                    showResult && <ShareBtn>
+                        <NewButton
+                            type={NewButtonType.fill}
+                            color={MainColorType.success}
+                            width={rpxToPx(698)}
+                            height={rpxToPx(108)}
+                            title="Send to friends"
+                        />
+                    </ShareBtn>
+                }
+                {
+                    showResult && <View
+                        onClick={() => {
+                            Taro.redirectTo({
+                                url: `./log_record?scenario=${scenario == 'FAST' ? 'MEAL' : 'ACTIVITY'}`
+                            })
+                        }}
+                        className="h34 bold white_75" style={{
+                            backgroundColor: MainColorType.black_05,
+                            marginTop: rpxToPx(26),
+                            width: rpxToPx(698),
+                            height: rpxToPx(108),
+                            borderRadius: rpxToPx(28),
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        }}>
+                        What are you eating?
+                    </View>
+
+                }
+                {
+                    showResult && <View 
+                    onClick={()=>{
+                        Taro.reLaunch({
+                            url:'/pages/moment/moment'
+                        })
+                    }}
+                    className="white_50 h30" style={{ marginTop: rpxToPx(26) }}>Go to moments</View>
+                }
+
 
             </View>
         }
@@ -505,14 +525,14 @@ export default function TimeRecord() {
                             setShowDatePicker(true)
                         }}>
                             <View className="g02 h24">STARTED</View>
-                            <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.start_timestamp, true)}</View>
+                            <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.abbrTimestampFormat(info.time.start_timestamp)}</View>
                             <View className="h30 bold" style={{ color: MainColorType.orange }}>Edit Start</View>
                         </View>
                         <View className="operate_item" onClick={() => {
                             setShowDurationPicker(true)
                         }}>
                             <View className="g02 h24">{TimeFormatter.formateDurationBySeconds(info.time.duration / 1000)} Goal</View>
-                            <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.target_end_timestamp, true)}</View>
+                            <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.abbrTimestampFormat(info.time.target_end_timestamp, true)}</View>
                             <View className="h30 bold" style={{ color: MainColorType.orange }}>Edit Goal</View>
                         </View>
                     </View>
@@ -537,10 +557,19 @@ export default function TimeRecord() {
                         color={MainColorType.orange}
                         onClick={end}
                     />
-                        <NewButton
+                        {/* <NewButton
                             type={NewButtonType.more}
                             onClick={more}
-                        />
+                        /> */}
+                        <NewButton
+                            type={NewButtonType.img}
+                            onClick={more}
+                        >
+                            <View style={{ width: rpxToPx(72), height: rpxToPx(72), display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                                <IconMore2 width={rpxToPx(36)} color="#000" />
+                            </View>
+
+                        </NewButton>
                         {/* <View onClick={more}>More</View> */}
                     </View>
                 }
@@ -572,7 +601,7 @@ export default function TimeRecord() {
                 </View>
             }
 
-            {
+            {/* {
                 status == 'OG' && <View className="eat_card" style={{ height: rpxToPx(120) }} onClick={() => {
                     Taro.redirectTo({
                         url: `./log_record?scenario=${scenario == 'FAST' ? 'MEAL' : 'ACTIVITY'}`
@@ -583,7 +612,7 @@ export default function TimeRecord() {
                         <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
                     </View>
                 </View>
-            }
+            } */}
 
 
             {/* {

src/app.scss

@@ -11,12 +11,12 @@ page {
 }
 
 .main_bg {
-    position: fixed;
+    position: absolute;
     left: 0;
     top: 0;
     width: 100vw;
     height: 100vh;
-    z-index: -1;
+    z-index: 0;
 }
 
 .container {
@@ -469,7 +469,7 @@ page {
     justify-content: center;
 }
 
-.h60{
+.h60 {
     font-size: 60px;
     line-height: 72px;
 }
@@ -499,7 +499,7 @@ page {
     line-height: 42px;
 }
 
-.h32{
+.h32 {
     font-size: 32px;
     line-height: 38px;
 }
@@ -534,15 +534,15 @@ page {
     line-height: 24px;
 }
 
-.w300{
+.w300 {
     font-weight: 300;
 }
 
-.w400{
+.w400 {
     font-weight: 400;
 }
 
-.w500{
+.w500 {
     font-weight: 500;
 }
 
@@ -677,12 +677,12 @@ page {
     background-color: #fff;
 }
 
-.schedule_border{
+.schedule_border {
     border-width: 3px;
     border-style: solid;
 }
 
-.time_count{
+.time_count {
     display: flex;
     color: #fff;
     border-radius: 10px;
@@ -694,7 +694,7 @@ page {
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    
+
 }
 
 .new_header_bg {
@@ -710,14 +710,59 @@ page {
     flex-shrink: 0;
 }
 
-.italic{
+.italic {
     font-style: italic;
 }
 
-.blur_bg{
+.blur_bg {
     filter: blur(20px) brightness(50%);
 }
 
-.gray_bg{
+.gray_bg {
     background-color: #f5f5f5;
+}
+
+
+View {
+    position: relative;
+}
+
+.white {
+    color: #fff;
+}
+
+.white_5 {
+    color: rgba(255, 255, 255, 0.05)
+}
+
+.white_25 {
+    color: rgba(255, 255, 255, 0.25)
+}
+
+.white_50 {
+    color: rgba(255, 255, 255, 0.5)
+}
+
+.white_75 {
+    color: rgba(255, 255, 255, 0.75)
+}
+
+.black {
+    color: #000;
+}
+
+.black_5 {
+    color: rgba(0, 0, 0, 0.05)
+}
+
+.black_25 {
+    color: rgba(0, 0, 0, 0.25)
+}
+
+.black_50 {
+    color: rgba(0, 0, 0, 0.5)
+}
+
+.black_75 {
+    color: rgba(0, 0, 0, 0.75)
 }

src/app.tsx

@@ -96,6 +96,7 @@ const App: React.FC<PropsWithChildren> = ({ children }) => {
   if (process.env.TARO_ENV == 'weapp') {
     global.language = 'zh'
     var value = Taro.getStorageSync('language')
+    debugger
     if (value) {
       // Do something with return value
 

src/components/basic/Icons.tsx

@@ -705,4 +705,27 @@ export const IconNext = (props: { width: number, color: string }) => {
     </g>
 </svg>`
     return Icon(props.width, props.width, icon);
+}
+
+export const IconMore2 = (props: { width: number, color: string }) => {
+    const icon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
+    version="1.1" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <clipPath id="master_svg0_486_2821">
+            <rect x="0" y="0" width="24" height="24" rx="0" />
+        </clipPath>
+    </defs>
+    <g clip-path="url(#master_svg0_486_2821)">
+        <g>
+            <ellipse cx="12" cy="12" rx="2" ry="2" fill="${props.color}" fill-opacity="1" />
+        </g>
+        <g>
+            <ellipse cx="12" cy="5" rx="2" ry="2" fill="${props.color}" fill-opacity="1" />
+        </g>
+        <g>
+            <ellipse cx="12" cy="19" rx="2" ry="2" fill="${props.color}" fill-opacity="1" />
+        </g>
+    </g>
+</svg>`
+    return Icon(props.width, props.width, icon);
 }

src/context/themes/color.tsx

@@ -46,6 +46,17 @@ export enum MainColorType {
     g04 = '#f0f0f0',
     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)',
+
+    //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)',
 
 
 }

src/pages/clock/Clock.config.ts

@@ -1,13 +1,13 @@
 export default definePageConfig({
     // "lazyCodeLoading": "requiredComponents",
-    "componentFramework": "glass-easel",
-    "renderer": "skyline",
-    "rendererOptions": {
-        "skyline": {
-            "disableABTest": true,
-            "defaultDisplayBlock": true
-        }
-    },
+    // "componentFramework": "glass-easel",
+    // "renderer": "skyline",
+    // "rendererOptions": {
+    //     "skyline": {
+    //         "disableABTest": true,
+    //         "defaultDisplayBlock": true
+    //     }
+    // },
     "usingComponents": {
         "recycle-view": "../../components/miniprogram-recycle-view/recycle-view",
         "recycle-item": "../../components/miniprogram-recycle-view/recycle-item"

src/pages/clock/ClockIndex.scss

@@ -2,15 +2,6 @@
 //     background: linear-gradient(to bottom, #F0CABF, #E1CDEE)
 // }
 
-.main_bg {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: -1;
-}
-
 .operate_panel {
     display: flex;
     flex-direction: row;

src/pages/clock/ClockIndex.tsx

@@ -48,6 +48,7 @@ export default function ClockIndex() {
         icon: '',
         scenario: 'METRIC'
     }]
+    dayjs.locale(global.language == 'en' ? 'en' : 'zh-cn');
 
     useEffect(() => {
         getHomeData()

src/pages/moment/moment.tsx

@@ -2,7 +2,7 @@
 
 import TabBar from "@/components/navigation/TabBar";
 import { rpxToPx } from "@/utils/tools";
-import { View, Text, Image, ScrollView, Button } from "@tarojs/components";
+import { View, Text, Image, ScrollView, Button, ListView } from "@tarojs/components";
 import Taro, { useRouter, useShareAppMessage } from "@tarojs/taro";
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState, useTransition } from "react";
@@ -152,5 +152,6 @@ export default function Friend() {
         return <View />
     return <View>
         <MomentMain />
+        {/* <ListView */}
     </View>
 }

src/utils/time_format.ts

@@ -155,6 +155,19 @@ export class TimeFormatter {
 
   }
 
+  static abbrTimestampFormat(timestamp: number) {
+    if (dayjs(timestamp).isToday()) {
+      return `${TimeFormatter.getTodayUnit()} ${dayjs(timestamp).format('HH:mm')}`;
+    }
+    if (dayjs(timestamp).isTomorrow()){
+      return global.language=='en'?dayjs(timestamp).format('MMM D, HH:mm'):dayjs(timestamp).format('明天 HH:mm');
+    }
+    if (dayjs(timestamp).isYesterday()){
+      return global.language=='en'?dayjs(timestamp).format('MMM D, HH:mm'):dayjs(timestamp).format('昨天 HH:mm');
+    }
+    return global.language=='en'?dayjs(timestamp).format('MMM D, HH:mm'):dayjs(timestamp).format('MMMD日HH:mm')
+  }
+
 
   static dateTimeFormate2(timestamp: number) {
     const inputDate = new Date(timestamp);