update

src/_record/components/choose_tags.tsx

@@ -0,0 +1,12 @@
+import { View } from "@tarojs/components";
+import './choose_tags.scss'
+import Taro from "@tarojs/taro";
+
+export default function ChooseTags() {
+    const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
+    const navigationBarHeight = systemInfo.statusBarHeight + 44;
+    const screenHeight = systemInfo.screenHeight
+    return <View>
+
+    </View>
+}

src/_record/components/picker_card.scss

@@ -1,4 +1,4 @@
-.picker_card_bg {
+.picker_card_bg_1 {
     position: fixed;
     z-index: 1000;
     left: 0;

src/_record/components/picker_card.tsx

@@ -11,7 +11,7 @@ import dayjs from "dayjs";
 
 export default function PickerCard(props: { onClose: any, onConfirm: any, type: string, value: any }) {
     const [value, setValue] = useState(props.value)
-    return <View className="picker_card_bg">
+    return <View className="picker_card_bg_1">
         <View className="picker_card">
             <View className="picker_card_close" onClick={props.onClose}>
                 <IconClose color="#000" width={rpxToPx(56)} height={rpxToPx(56)} />

src/_record/components/quick_log.scss

@@ -0,0 +1,76 @@
+.quick_bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000;
+    z-index: 1000000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+}
+
+.snap_bg {
+    top: -1000px;
+    left: 0;
+    position: absolute;
+}
+
+.quick_view {
+    width: 750px;
+    height: 750px;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding-top: 86px;
+    padding-left: 94px;
+}
+
+.quick_cover {
+    width: 750px;
+    height: 750px;
+    margin-top: 160px;
+}
+
+.quick_btn {
+    width: 646px;
+    height: 96px;
+    border-radius: 48px;
+    color: #000;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    font-weight: bold;
+    margin-top: 192px;
+}
+
+.quick_text_btn {
+    margin-top: 26px;
+    width: 646px;
+    height: 96px;
+    border-radius: 48px;
+    color: #fff;
+    background-color: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    font-weight: bold;
+}
+
+.quick_day {
+    font-weight: 200;
+    font-size: 120px;
+    line-height: 128px;
+}
+
+.quick_date {
+    font-size: 30px;
+    line-height: 36px;
+    margin-top: 8px;
+    font-weight: 400;
+}

src/_record/components/quick_log.tsx

@@ -0,0 +1,289 @@
+import { View, Image, Snapshot } from "@tarojs/components";
+import './quick_log.scss'
+import { useEffect, useState } from "react";
+import NewButton, { NewButtonType } from "@/_health/base/new_button";
+import { useSelector } from "react-redux";
+import dayjs from "dayjs";
+import Taro from "@tarojs/taro";
+import { rpxToPx } from "@/utils/tools";
+import { IconClose } from "@/components/basic/Icons";
+import { addEvents, checkSummary } from "@/services/health";
+import { baseUrl } from "@/services/http/api";
+import { useTranslation } from "react-i18next";
+
+export default function QuickLog(props: { tag: string, scenario: string, updateTag: any }) {
+    const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
+    const navigationBarHeight = systemInfo.statusBarHeight + 44;
+    const screenHeight = systemInfo.screenHeight
+    const [update, setUpdate] = useState(false)
+    const record = useSelector((state: any) => state.record);
+    const [url, setUrl] = useState('')
+    const [count, setCount] = useState(0)
+    const { t } = useTranslation()
+
+    const [posting,setPosting] = useState(false)
+
+    useEffect(() => {
+        getData()
+        setTimeout(() => {
+            setCount(count => count + 1)
+            // snap()
+        }, 100)
+    }, [props.tag])
+
+    useEffect(() => {
+        if (count > 0) {
+            snap()
+        }
+    }, [count])
+
+    useEffect(() => {
+
+    }, [url])
+
+    function getData() {
+        checkSummary({ scenario: props.scenario }).then(res => {
+
+        })
+    }
+
+    function snap() {
+        console.log('ppp')
+        Taro.createSelectorQuery().select('#temp_snap').node().exec(res => {
+            const node = res[0].node
+            // console.log(res)
+            console.log('begin snap', node)
+            node.takeSnapshot({
+                type: 'file',
+                format: 'png',
+                success: async (res) => {
+                    console.log('结果')
+                    console.log(res)
+                    setUrl(res.tempFilePath)
+                    // Taro.saveImageToPhotosAlbum({
+                    //     filePath: res.tempFilePath
+                    // })
+                    const results = await Promise.all([res].map(getImageInfo));
+                    const uploadedUrls = await Promise.all(results.map(path => uploadFile2(path, 'album')))
+                    console.log('uploadedUrls', uploadedUrls)
+                    if (update) {
+                        edit(uploadedUrls)
+                    }
+                    else {
+                        save(uploadedUrls)
+                    }
+                },
+                fail(res) {
+                    console.log('错误')
+                    console.log(res)
+                    // debugger
+                }
+            })
+        })
+    }
+
+    const getImageInfo = (src) => {
+        const { tempFilePath, path } = src
+        return new Promise((resolve) => {
+            Taro.getImageInfo({
+                src: tempFilePath ? tempFilePath : path,
+                success: (result) => resolve({
+                    height: result.height,
+                    width: result.width,
+                    orientation: result.orientation,
+                    path: result.path,
+                    type: result.type
+                }),
+                fail: (error) => resolve({
+                    height: 1024,
+                    width: 1024,
+                    orientation: 'up',
+                    path: tempFilePath,
+                    type: 'unknown'
+                }),
+            });
+        });
+    };
+
+    function uploadFile2(obj: any, source: string): Promise<string> {
+        return new Promise((resolve, reject) => {
+            var path = obj.path
+            const dot = path.lastIndexOf('.')
+            const fileExt = dot > 0 ? path.substring(dot) : ''
+            Taro.request({
+                method: 'GET',
+                url: `${baseUrl}/api/thirdparty/aliyun/oss-form-upload`,
+                header: {
+                    'Authorization': 'bearer ' + global.token
+                },
+                data: {
+                    type: 'FOOD_JOURNAL',
+                    file_ext: fileExt
+                },
+                success: (rsp) => {
+                    if (rsp.statusCode !== 200) {
+                        reject(new Error(t('health.networkError')))
+                        return
+                    }
+                    Taro.uploadFile({
+                        url: rsp.data.upload_url,
+                        filePath: path,
+                        name: 'file',
+                        formData: rsp.data.fields,
+                        success: () => {
+                            var temp = JSON.parse(JSON.stringify(obj))
+                            temp.url = rsp.data.view_url
+                            // resolve(rsp.data.view_url)
+                            resolve(temp)
+                        },
+                        fail: (error) => {
+
+                            reject(error)
+                        }
+                    })
+                },
+                fail: reject
+            })
+        })
+    }
+
+    function tapBtn() {
+        if (!update) {
+            props.updateTag()
+            return
+        }
+        Taro.reLaunch({
+            url: '/pages/moment/moment'
+        })
+    }
+
+    function tapTextBtn() {
+        if (update) {
+            props.updateTag()
+            return
+        }
+        Taro.reLaunch({
+            url: '/pages/moment/moment'
+        })
+    }
+
+    function edit(pics) {
+
+    }
+
+    function save(pics) {
+        var params: any = {
+            scenario: props.scenario, //ACTIVITY
+            type: 'POINT',
+            sub_type: props.scenario,
+            title: props.tag,
+
+            time: {
+                start_timestamp: new Date().getTime()
+            }
+        }
+
+        var moment: any = {
+        }
+        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
+
+
+        params.extra = {
+            set_time: global.set_time ? global.set_time : new Date().getTime(),
+            confirm_time: new Date().getTime()
+        }
+        // console.log('打卡提交数据', params)
+        if (posting) return
+        setPosting(true)
+        Taro.showLoading({
+            title: t('health.uploading')
+        })
+        addEvents(params).then(res => {
+            console.log('post success')
+            // setShowResult(true)
+            // setResult(res)
+            setPosting(false)
+            Taro.hideLoading()
+            // Taro.reLaunch({
+            //     url: '/pages/moment/moment'
+            // })
+        }).catch(e => {
+            setPosting(false)
+            Taro.hideLoading()
+        })
+    }
+
+    function getBackground() {
+        var time = record.time
+        if (!time) return '#fff'
+        const { background_colors } = time
+        if (!background_colors) {
+            return '#fff'
+        }
+        else if (background_colors.length == 1) {
+            return background_colors[0]
+        }
+        return `linear-gradient(to bottom, ${background_colors[0]}, ${background_colors[1]})`
+    }
+
+    return <View className="quick_bg">
+        <View className="snap_bg">
+            <Snapshot id="temp_snap">
+                <View className="quick_view" style={{
+                    background: getBackground(),
+                }}>
+                    <View className="quick_day">{dayjs().format('D')}</View>
+                    <View className="quick_date">{global.language == 'en' ? dayjs().format('MMM YYYY') : dayjs().format('YYYY年MMM')}</View>
+                </View>
+            </Snapshot>
+        </View>
+        <View className="navi_bar" style={{ height: navigationBarHeight, zIndex: 1000 }}>
+            <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={() => {
+                        Taro.navigateBack()
+                    }}>
+                    <IconClose color="#fff" width={rpxToPx(64)} height={rpxToPx(64)} />
+                </View>
+            </View>
+        </View>
+        <View style={{ height: navigationBarHeight }} />
+
+        <Image className="quick_cover" src={url} />
+        <NewButton type={NewButtonType.custom} onClick={tapBtn}>
+            <View className="quick_btn">{update ? 'View in Moments' : 'Tag Your Meal'}</View>
+        </NewButton>
+        <NewButton type={NewButtonType.custom} onClick={tapTextBtn}>
+            <View className="quick_text_btn">{update ? 'Edit Meal Tag' : 'View in Moments'}</View>
+        </NewButton>
+    </View>
+}

src/_record/components/record_icon.tsx

@@ -0,0 +1,62 @@
+import { View, Image } from '@tarojs/components'
+// import { SvgXml } from 'react-native-svg';
+let SvgXml;
+if (process.env.TARO_ENV == 'rn') {
+  SvgXml = require("react-native-svg").SvgXml
+}
+
+
+
+export const Icon = (width, icon) => {
+  return <View style={{ width: width, height: width }}>
+    {process.env.TARO_ENV == 'weapp' ? <mysvg src={icon} colors={[]} /> : <SvgXml xml={icon} width={width} height={width} />}
+  </View>
+}
+
+
+export const IconClock = (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_473_3363">
+            <rect x="0" y="0" width="24" height="24" rx="0" />
+        </clipPath>
+    </defs>
+    <g clip-path="url(#master_svg0_473_3363)">
+        <g>
+            <path
+                d="M23,12C23,18.0751,18.0751,23,12,23C5.92487,23,1,18.0751,1,12C1,5.92487,5.92487,1,12,1C18.0751,1,23,5.92487,23,12ZM21,12C21,7.02944,16.970599999999997,3,12,3C7.02944,3,3,7.02944,3,12C3,16.970599999999997,7.02944,21,12,21C16.970599999999997,21,21,16.970599999999997,21,12ZM11,6C11,5.44772,11.4477,5,12,5C12.5523,5,13,5.44772,13,6L13,11.382L16.447200000000002,13.1056C16.786,13.275,17,13.6212,17,14C17,14.5523,16.552300000000002,15,16,15C15.8448,15,15.6916,14.9639,15.5528,14.8944L11.5528,12.8944C11.214,12.725,11,12.3788,11,12L11,6Z"
+                fill-rule="evenodd" fill="${props.color}" fill-opacity="1" />
+        </g>
+    </g>
+</svg>`
+  return Icon(props.width, icon);
+}
+
+export const IconCamera = (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">
+    <g>
+        <g>
+            <path
+                d="M3,22Q1.75736,22,0.87868,21.1213Q0,20.2426,0,19L0,8Q0,6.75736,0.87868,5.87868Q1.75736,5,3,5L6.46482,5L8.16795,2.4453C8.35342,2.167101,8.66565,2,9,2L15,2C15.3344,2,15.6466,2.167101,15.8321,2.4453L17.5352,5L21,5Q22.2426,5,23.1213,5.87868Q24,6.75736,24,8L24,19Q24,20.2426,23.1213,21.1213Q22.2426,22,21,22L3,22ZM12,17Q13.6569,17,14.8284,15.8284Q16,14.6569,16,13Q16,11.34315,14.8284,10.17157Q13.6569,9,12,9Q10.3431,9,9.17157,10.17157Q8,11.34315,8,13Q8,14.6569,9.17157,15.8284Q10.3431,17,12,17Z"
+                fill-rule="evenodd" fill="${props.color}" fill-opacity="1" />
+        </g>
+    </g>
+</svg>`
+  return Icon(props.width, icon);
+}
+
+export const IconEdit = (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">
+    <g>
+        <g>
+            <path
+                d="M3,22Q1.75736,22,0.87868,21.1213Q0,20.2426,0,19L0,8Q0,6.75736,0.87868,5.87868Q1.75736,5,3,5L6.46482,5L8.16795,2.4453C8.35342,2.167101,8.66565,2,9,2L15,2C15.3344,2,15.6466,2.167101,15.8321,2.4453L17.5352,5L21,5Q22.2426,5,23.1213,5.87868Q24,6.75736,24,8L24,19Q24,20.2426,23.1213,21.1213Q22.2426,22,21,22L3,22ZM12,17Q13.6569,17,14.8284,15.8284Q16,14.6569,16,13Q16,11.34315,14.8284,10.17157Q13.6569,9,12,9Q10.3431,9,9.17157,10.17157Q8,11.34315,8,13Q8,14.6569,9.17157,15.8284Q10.3431,17,12,17Z"
+                fill-rule="evenodd" fill="${props.color}" fill-opacity="1" />
+        </g>
+    </g>
+</svg>`
+  return Icon(props.width, icon);
+}

src/_record/components/ring_progress.tsx

@@ -162,12 +162,12 @@ export default function RingProgress(props: {
             const yPrime = canvasHeight / 2.0 + props.radius * Math.sin(radians);
             ctx.globalCompositeOperation = 'destination-out'
             ctx.beginPath();
-            var dotLineWidth = 4
+            var dotLineWidth = rpxToPx(14)
             // if (lineWidth == 28) {
             //     dotLineWidth = 4
 
             // }
-            ctx.arc(xPrime, yPrime, props.target.width / 2.0, 0, 2 * Math.PI);
+            ctx.arc(xPrime, yPrime, props.target.width / 2.0+rpxToPx(3), 0, 2 * Math.PI);
             ctx.lineWidth = dotLineWidth;
             ctx.fillStyle = 'transparent'
             ctx.fill()
@@ -229,24 +229,19 @@ export default function RingProgress(props: {
                 const img1 = _canvas.createImage(); // 创建图像对象
                 img1.src = global.checkImg
                 img1.onload = () => {
-                    ctx.drawImage(img1, rpxToPx(384), rpxToPx(70), rpxToPx(400), rpxToPx(340));
+                    ctx.drawImage(img1, rpxToPx(324), rpxToPx(60), rpxToPx(400), rpxToPx(340));
                     ctx.stroke();
                     if (props.shareCover && _canvas) {
                         save(_canvas)
                     }
                 }
             }
-
         }
         else {
             if (props.shareCover && _canvas) {
                 save(_canvas)
             }
         }
-
-
-
-
     }
 
     function save(_canvas) {

src/_record/pages/log_record.config.ts

@@ -1,26 +1,17 @@
 export default definePageConfig({
-    // // "lazyCodeLoading": "requiredComponents",
-    // // "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"
     // },
-    // "disableScroll": true,
-    // "componentFramework": "glass-easel",
-    // "renderer": "skyline",
-    // "rendererOptions": {
-    //     "skyline": {
-    //         "disableABTest": true,
-    //         "defaultDisplayBlock": true
-    //     }
-    // },
+    "disableScroll": true,
+    "componentFramework": "glass-easel",
+    "renderer": "skyline",
+    "rendererOptions": {
+        "skyline": {
+            "disableABTest": true,
+            "defaultDisplayBlock": true
+        }
+    },
     "navigationStyle": "custom",
     enablePageMeta:true
 })

src/_record/pages/log_record.scss

@@ -38,7 +38,7 @@
 .first_letter{
     margin-left:30px;
     margin-right: 40px;
-    background-color: #fff;
+    background-color: rgba($color: #fff, $alpha: 0.5);
     width:108px;
     height:108px;
     border-radius: 54px;
@@ -50,7 +50,7 @@
 .input_form {
     width: 670px;
     height: 360px;
-    border-radius: 24px;
+    border-radius: 42px;
     background-color: rgba($color: #fff, $alpha: 0.25);
     display: flex;
     flex-direction: column;
@@ -60,7 +60,7 @@
 .input_content {
     width: 578px;
     height: 128px;
-    border-radius: 12px;
+    border-radius: 21px;
     margin-top: 60px;
     text-align: center;
     background-color: #fff;
@@ -69,11 +69,10 @@
 .form_btns {
     display: flex;
     flex-direction: row;
-    margin-top: 20px;
-    margin-left: 46px;
-    margin-right: 46px;
-    width: 578px;
-    height: 100px;
+    margin-top: 60px;
+    width: 670px;
+    height: 128px;
+    // background-color: palegoldenrod;
 }
 
 .form_cancel {

src/_record/pages/log_record.tsx

@@ -1,4 +1,4 @@
-import { View, Image, PageMeta, NavigationBar, Input, Textarea } from "@tarojs/components";
+import { View, Image, PageMeta, NavigationBar, Input, Textarea, ScrollView, Snapshot } from "@tarojs/components";
 import './log_record.scss'
 import { useEffect, useState } from "react";
 import Taro, { useRouter, useShareAppMessage } from "@tarojs/taro";
@@ -8,7 +8,7 @@ import { MainColorType } from "@/context/themes/color";
 import { useTranslation } from "react-i18next";
 import showAlert from "@/components/basic/Alert";
 import showActionSheet from "@/components/basic/ActionSheet";
-import { baseUrl } from "@/services/http/api";
+import { BASE_IMG_URL, baseUrl } from "@/services/http/api";
 import { checkAuthorized } from "@/utils/check_authorized";
 import NewButton, { NewButtonType } from "@/_health/base/new_button";
 import dayjs from "dayjs";
@@ -19,6 +19,9 @@ 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";
+import PickerCard from "../components/picker_card";
+import { IconCamera, IconClock } from "../components/record_icon";
+import QuickLog from "../components/quick_log";
 
 let useRoute;
 let useNavigation;
@@ -29,6 +32,8 @@ if (process.env.TARO_ENV == 'rn') {
 export default function LogRecord() {
     const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
     const navigationBarHeight = systemInfo.statusBarHeight + 44;
+    const screenHeight = systemInfo.screenHeight
+
     const scale = '?x-oss-process=image/format,jpg/resize,w_400'
     const long = useSelector((state: any) => state.long);
     const health = useSelector((state: any) => state.health);
@@ -38,7 +43,7 @@ export default function LogRecord() {
     const [title, setTitle] = useState('')
     const [chooseTitle, setChooseTitle] = useState('')
     const [desc, setDesc] = useState('')
-    const [step, setStep] = useState(0)
+    const [step, setStep] = useState(2)
     const { t } = useTranslation()
 
     const [time, setTime] = useState(dayjs().format('HH:mm'))
@@ -72,13 +77,14 @@ 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, quick } = 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 [quickStatus, setQuickStatus] = useState(quick ? true : false)
 
     if (process.env.TARO_ENV == 'weapp') {
 
@@ -111,6 +117,9 @@ export default function LogRecord() {
         if (router.params.check_in == 1) {
             setStep(0)
         }
+        if (router.params.quick) {
+            quickSave()
+        }
     }, [])
 
     function getTags() {
@@ -206,7 +215,7 @@ export default function LogRecord() {
 
 
                 chooseSuccess(results, true)
-                checkAuthorized()
+                // checkAuthorized()
             },
             fail: function (res) {
             }
@@ -298,6 +307,10 @@ export default function LogRecord() {
         });
     };
 
+    function quickSave() {
+
+    }
+
     function save() {
         if (router.params.edit) {
             edit()
@@ -368,6 +381,9 @@ export default function LogRecord() {
             setResult(res)
             setPosting(false)
             Taro.hideLoading()
+            Taro.reLaunch({
+                url: '/pages/moment/moment'
+            })
         }).catch(e => {
             setPosting(false)
             Taro.hideLoading()
@@ -496,8 +512,14 @@ export default function LogRecord() {
         return `linear-gradient(to bottom, ${background_colors[0]}, ${background_colors[1]})`
     }
 
-    return <View style={{ position: 'relative' }}>
-        <View className="main_bg" style={{ background: getBackground() }} />
+    if (quick) {
+        return <QuickLog tag={chooseTitle} scenario={scenario} updateTag={() => {
+
+        }} />
+    }
+
+    return <View style={{ position: 'relative', overflow: showChoose ? 'hidden' : 'auto' }}>
+        <View className="main_bg" style={{ background: getBackground(), position: 'absolute' }} />
         <View className="navi_bar" style={{ height: navigationBarHeight, zIndex: 1000 }}>
             <View style={{
                 position: 'absolute',
@@ -517,66 +539,105 @@ export default function LogRecord() {
                     top: 22 - rpxToPx(32)
                 }}
                     onClick={() => {
+                        if (showResult) {
+                            Taro.navigateBack()
+                            return
+                        }
                         debugger
+                        if (chooseTitle.length > 0 && step == 0) {
+                            setStep(2)
+                            return
+                        }
+                        if (step == 2) {
+                            showAlert({
+                                title: t('health.back_no_save'),
+                                content: '',
+                                showCancel: true,
+                                cancelText: '取消',
+                                confirmText: '退出',
+                                confirm: () => {
+                                    Taro.navigateBack()
+                                }
+                            })
+                            return
+                        }
                         Taro.navigateBack()
                     }}>
-                    <IconClose color="#000" width={rpxToPx(64)} height={rpxToPx(64)} />
+                    <IconClose color={showResult ? "#fff" : "#000"} width={rpxToPx(64)} height={rpxToPx(64)} />
                 </View>
-                {/* <Image src={require('@assets/_health/navi_back.png')} style={{
-                    position: 'absolute',
-                    width: rpxToPx(92),
-                    height: rpxToPx(64),
-                    left: 0,
-                    top: 22 - rpxToPx(32)
-                }}
-                    onClick={() => {
-                        Taro.navigateBack()
-                    }}
-                /> */}
-                {/* <View className="h36 bold">upcoming fast</View> */}
             </View>
         </View>
         <View style={{ height: navigationBarHeight }} />
         {
-            step == 0 && <View className="cardShowAni" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: rpxToPx(152) }}>
-                <Image src={require('@assets/_health/eat.png')} style={{ width: rpxToPx(96), height: rpxToPx(96) }} />
-                <View className="h50 bold">选择打卡的{scenario == 'MEAL' ? '餐次' : '活动'}</View>
-                <View className="operate_bg">
-                    {
-                        tags.map((item, index) => {
-                            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>
-                        })
-                    }
+            step == 0 && <ScrollView style={{ flex: 1, position: 'relative', zIndex: 1000, height: screenHeight - navigationBarHeight }} scrollY>
+                {/* <Snapshot id="temp"> */}
+                <View className="cardShowAni" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: rpxToPx(152) }}>
+                    <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) }}>选择打卡的{scenario == 'MEAL' ? '餐次' : '活动'}</View>
+                    <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)
+                                        // setShowChoose(true)
+                                    }}>
+                                    <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>
+                            })
+                        }
 
-                    <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 className="operate_item h34"
+                            style={{ backgroundColor: MainColorType.white_25 }}
+                            onClick={() => {
+
+                                // Taro.createSelectorQuery().select('#temp').node().exec(res=>{
+                                //     console.log('9527')
+                                //     const node = res[0].node
+                                //     node.takeSnapshot({
+                                //         type:'file',
+                                //         format:'png',
+                                //         success:(res)=>{
+                                //             console.log(res)
+                                //             Taro.saveImageToPhotosAlbum({
+                                //                 filePath:res.tempFilePath
+                                //             })
+                                //         },
+                                //         fail(res){
+                                //             console.log(res)
+                                //             debugger
+                                //         }
+                                //     })
+                                // })
+                                // return
+                                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>自定义</View>
+                    </View>
                 </View>
-            </View>
+                {/* </Snapshot> */}
+            </ScrollView>
         }
         {
-            step == 1 && <View className="cardShowAni" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: rpxToPx(152) }}>
+            step == 1 && <View className="cardShowAni" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: rpxToPx(300) }}>
                 <View className="input_form">
                     <Input className="input_content h36" placeholder="请输入自定义名称" value={title}
                         focus
+                        maxlength={10}
                         onInput={(e: any) => {
                             setTitle(e.target.value)
                         }} />
@@ -611,28 +672,35 @@ export default function LogRecord() {
         }
         {
             step == 2 && <View className="cardShowAni">
+
                 <View className="content_card">
-                    <View style={{ display: 'flex', flexDirection: 'row' }} onClick={() => {
-                        setStep(0)
-                        setFocus(false)
-                    }}>
-                        <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">{chooseTitle}</View>
-                            <View style={{ width: rpxToPx(6) }} />
-                            <IconArrow width={rpxToPx(34)} color='#000' />
-                        </View>
+                    <View style={{ display: 'flex', flexDirection: 'row' }} >
+                        <NewButton type={NewButtonType.custom}
+                            onClick={() => {
+                                setStep(0)
+                                setFocus(false)
+                            }}>
+
+                            <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">{chooseTitle}</View>
+                                <View style={{ width: rpxToPx(6) }} />
+                                <IconArrow width={rpxToPx(34)} color='#000' />
+
+                            </View>
+                        </NewButton>
                     </View>
-                    <Textarea placeholder={t('health.add_text')} className="textarea2 h44 bold"
+
+                    <Textarea placeholder={t('health.add_text')} className="textarea2 h44"
                         placeholder-style="color:rgba(0,0,0,0.2)"
                         value={desc}
                         focus={focus}
@@ -674,7 +742,11 @@ export default function LogRecord() {
                             })
                         }
                         {
-                            pics.length < 9 && <View onClick={tapPic} className="cover" style={{}}><Image src={require('@assets/_health/camera.png')} style={{ width: 40, height: 40 }} /></View>
+                            pics.length < 9 && <NewButton
+                                type={NewButtonType.custom}
+                                onClick={tapPic}>
+                                <View className="cover" style={{}}><IconCamera color="#000" width={rpxToPx(48)} /></View>
+                            </NewButton>
                         }
                     </View>
                 </View>
@@ -685,8 +757,8 @@ export default function LogRecord() {
                 <View className="time_view" onClick={() => {
                     setShowTimePicker(true)
                 }}>
-
-                    <View className="h30" style={{ opacity: 0.3 }}>时间</View>
+                    <IconClock width={rpxToPx(36)} color={MainColorType.black_25} />
+                    <View className="h30" style={{ opacity: 0.3, marginLeft: rpxToPx(12) }}>时间</View>
                     <View style={{ flex: 1 }} />
                     <View className="h30" style={{ opacity: 0.3 }}>{getDate() + time}</View>
                     <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
@@ -703,29 +775,22 @@ export default function LogRecord() {
                     type={NewButtonType.fill}
                     color={MainColorType.orange}
                     width={rpxToPx(646)}
-                    height={rpxToPx(96)}
+                    height={rpxToPx(108)}
                     title={t('health.log_moment')}
                     onClick={save}
                 />
             </View>
         }
         {
-            showTimePicker && <PostMomentTime
-                title={t('health.log_time_title')}
-                time={time}
-                date={selDate}
-                isTemp={is_temp}
-                moment={moment}
-                onChange={(e) => {
-                    const { date, duration, time, isYesterday } = e;
-                    setTime(time)
-                    setSelDate(date)
-                    // setIsYesterday(isYesterday)
-                    // setDurationT(duration)
+            showTimePicker && <PickerCard onClose={() => { setShowTimePicker(false) }}
+                value={new Date().getTime()}
+                type="datetime"
+                onConfirm={(e) => {
+                    setSelDate(dayjs(e).format('YYYY-MM-DD'))
+                    setTime(dayjs(e).format('HH:mm'))
                     setShowTimePicker(false)
-                }} dismiss={() => {
-                    setShowTimePicker(false)
-                }} />
+                }}
+            />
         }
         {
             showResult && <View className="share_bg">
@@ -756,7 +821,7 @@ export default function LogRecord() {
                     </View>
 
                 </View>
-                <View className="share_card1" style={{ background: getBackground() }}>
+                <View className="share_card1" style={{ background: getBackground(), marginTop: rpxToPx(20) }}>
                     {
                         result.images && result.images.length > 0 && <Image className="share_card_cover" mode="aspectFill" src={result.images[0]} />
                     }
@@ -767,10 +832,10 @@ export default function LogRecord() {
                         <View className="log_result_success">
                             <IconCheck color="#fff" width={rpxToPx(32)} height={rpxToPx(32)} />
                         </View>
-                        <View className="h50 bold" style={{ color: '#fff', marginTop: rpxToPx(24), marginBottom: rpxToPx(12) }}>{result.title}</View>
-                        <View className="h30" style={{ color: '#fff' }}>{result.description}</View>
+                        <View className="h50 bold" style={{ color: result.images.length == 0 ? '#000' : '#fff', marginTop: rpxToPx(24), marginBottom: rpxToPx(12) }}>{result.title}</View>
+                        <View className="h30" style={{ color: result.images.length == 0 ? '#000' : '#fff' }}>{result.description}</View>
                         <View style={{ flex: 1 }} />
-                        <View className="h28" style={{ color: '#fff', marginBottom: rpxToPx(120) }}>{result.moment_description}</View>
+                        <View className="h28" style={{ color: result.images.length == 0 ? '#000' : '#fff', marginBottom: rpxToPx(120) }}>{result.moment_description}</View>
                     </View>
                 </View>
                 <ShareBtn>
@@ -780,25 +845,21 @@ export default function LogRecord() {
                             <View className="white bold h34">Send to friends</View>
                         </View>
                     </NewButton>
-                    {/* <NewButton
-                        type={NewButtonType.fill}
-                        color={MainColorType.success}
-                        width={rpxToPx(698)}
-                        height={rpxToPx(108)}
-                        borderRadius={rpxToPx(28)}
-                        title="Send to friends"
-                    /> */}
                 </ShareBtn>
 
-                <View className="h30" style={{ marginTop: rpxToPx(26), color: 'rgba(255,255,255,0.5)' }} onClick={() => {
-                    Taro.reLaunch({
-                        url: '/pages/moment/moment'
-                    })
-                }}>去搭子圈查看</View>
+                <NewButton type={NewButtonType.custom}
+                    onClick={() => {
+                        Taro.reLaunch({
+                            url: '/pages/moment/moment'
+                        })
+                    }}
+                >
+                    <View className="h30" style={{ marginTop: rpxToPx(26), color: 'rgba(255,255,255,0.5)', height: rpxToPx(96), lineHeight: rpxToPx(96) + 'px' }} >去搭子圈查看</View>
+                </NewButton>
 
             </View>
         }
-        {
+        {/* {
             showChoose && <ChooseActions
                 close={() => {
                     setShowChoose(false)
@@ -815,6 +876,6 @@ export default function LogRecord() {
                     setStep(2)
                 }}
             />
-        }
+        } */}
     </View >
 }

src/_record/pages/time_record.tsx

@@ -426,20 +426,24 @@ export default function TimeRecord() {
                         <View className="share_operate_content">
                             {
                                 showResult ? <View style={{ display: 'flex', flex: 1, flexDirection: 'row' }}>
-                                    <View className="operate_item" onClick={() => {
+                                    <NewButton type={NewButtonType.custom} 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={() => {
+                                        <View className="operate_item" >
+                                            <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>
+                                    </NewButton>
+                                    <NewButton type={NewButtonType.custom} 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 className="operate_item" style={{ backgroundColor: showHighlight ? '#ffffff80' : 'transparent' }} >
+                                            <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>
+                                    </NewButton>
                                 </View> :
                                     <View className="white bold" style={{ fontSize: rpxToPx(72), display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>You've made it!</View>
                             }
@@ -449,16 +453,8 @@ export default function TimeRecord() {
                     }
                 </View>
                 {
-                    showResult && <View className="shareBtnAni">
-                        <ShareBtn>
-                            {/* <NewButton
-                                type={NewButtonType.fill}
-                                color={MainColorType.success}
-                                width={rpxToPx(698)}
-                                height={rpxToPx(108)}
-                                borderRadius={rpxToPx(28)}
-                                title="Send to friends"
-                            /> */}
+                    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) }} />
@@ -467,14 +463,15 @@ export default function TimeRecord() {
                             </NewButton>
                         </ShareBtn>
                     </View>
+                    </View>
                 }
                 {
-                    showResult && <View
-                        onClick={() => {
-                            Taro.redirectTo({
-                                url: `./log_record?scenario=${scenario == 'FAST' ? 'MEAL' : 'ACTIVITY'}`
-                            })
-                        }}
+                    showResult && <NewButton type={NewButtonType.custom} onClick={() => {
+                        Taro.redirectTo({
+                            url: `./log_record?scenario=${scenario == 'FAST' ? 'MEAL' : 'ACTIVITY'}`
+                        })
+                    }}><View
+
                         className="h34 bold white_75 eatBtnAni" style={{
                             backgroundColor: MainColorType.black_05,
                             marginTop: rpxToPx(26),
@@ -485,18 +482,22 @@ export default function TimeRecord() {
                             alignItems: 'center',
                             justifyContent: 'center'
                         }}>
-                        What are you eating?
-                    </View>
+                            What are you eating?
+                        </View>
+                    </NewButton>
 
                 }
                 {
-                    showResult && <View
+                    showResult && <NewButton type={NewButtonType.custom}
                         onClick={() => {
                             Taro.reLaunch({
                                 url: '/pages/moment/moment'
                             })
                         }}
+                    ><View
+
                         className="white_50 h30 momentBtnAni" style={{ marginTop: rpxToPx(26) }}>Go to moments</View>
+                    </NewButton>
                 }
 
 
@@ -574,21 +575,25 @@ export default function TimeRecord() {
                     />
                 </View>
                 {
-                    status == 'OG' && <View className="operate_content">
-                        <View className="operate_item" style={{ backgroundColor: showHighlight ? '#ffffff80' : 'transparent' }} onClick={() => {
+                    status == 'OG' && <View className="operate_content" style={{ marginTop: -rpxToPx(20) }}>
+                        <NewButton type={NewButtonType.custom} onClick={() => {
                             setShowDatePicker(true)
                         }}>
-                            <View className="g02 h24">STARTED</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={() => {
+                            <View className="operate_item" style={{ backgroundColor: showHighlight ? '#ffffff80' : 'transparent' }}>
+                                <View className="black_50 h24">STARTED</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>
+                        </NewButton>
+                        <NewButton type={NewButtonType.custom} 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.abbrTimestampFormat(info.time.target_end_timestamp, true)}</View>
-                            <View className="h30 bold" style={{ color: MainColorType.orange }}>Edit Goal</View>
-                        </View>
+                            <View className="operate_item">
+                                <View className="black_50 h24">{TimeFormatter.formateDurationBySeconds(info.time.duration / 1000)} Goal</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>
+                        </NewButton>
                     </View>
                 }
                 {
@@ -596,7 +601,7 @@ export default function TimeRecord() {
                         type={NewButtonType.fill}
                         title={scenario == 'FAST' ? record.actions.FAST_START : record.actions.SLEEP_BEDTIME}
                         width={rpxToPx(490)}
-                        height={rpxToPx(96)}
+                        height={rpxToPx(108)}
                         color={MainColorType.orange}
                         onClick={start}
                     />
@@ -607,7 +612,7 @@ export default function TimeRecord() {
                         type={NewButtonType.fill}
                         title={scenario == 'FAST' ? record.actions.FAST_END : record.actions.SLEEP_WAKE_UP}
                         width={rpxToPx(490)}
-                        height={rpxToPx(96)}
+                        height={rpxToPx(108)}
                         color={MainColorType.orange}
                         onClick={end}
                     />
@@ -748,32 +753,24 @@ export default function TimeRecord() {
                     </View>
                     <View className="share_card" style={{ background: record.time.background_colors[1] }}>
                         {
-                            shareUrl.length > 0 ? <Image src={shareUrl} style={{ width: rpxToPx(900), height: rpxToPx(720) }} /> :
-                                <View style={{ width: rpxToPx(900), height: rpxToPx(720), backgroundColor: MainColorType.g02 }} />
+                            shareUrl.length > 0 ? <Image src={shareUrl} style={{ width: rpxToPx(900), height: rpxToPx(720), flexShrink: 0 }} /> :
+                                <View style={{ width: rpxToPx(900), height: rpxToPx(720), backgroundColor: MainColorType.g02, flexShrink: 0 }} />
                         }
                         {
-                            status == 'OG' && <View className="operate_content" style={{ marginTop: rpxToPx(40) }}>
+                            status == 'OG' && <View className="operate_content" style={{ marginTop: -rpxToPx(20) }}>
                                 <View className="operate_item">
-                                    <View className="g02 h24">STARTED</View>
+                                    <View className="black_50 h24">STARTED</View>
                                     <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.start_timestamp, true)}</View>
                                 </View>
                                 <View className="operate_item">
-                                    <View className="g02 h24">{TimeFormatter.formateDurationBySeconds(info.time.duration / 1000)} Goal</View>
+                                    <View className="black_50 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>
                             </View>
                         }
                     </View>
-                    <ShareBtn>
-                        {/* <NewButton
-                            type={NewButtonType.fill}
-                            color={MainColorType.success}
-                            width={rpxToPx(698)}
-                            height={rpxToPx(108)}
-                            borderRadius={rpxToPx(28)}
-                            title="Send to friends"
-                        /> */}
-                        <NewButton type={NewButtonType.custom}>
+                    <ShareBtn hideShare={true}>
+                        <NewButton type={NewButtonType.custom} btnStyle={{ opacity: 0 }}>
                             <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>

src/app.tsx

@@ -96,7 +96,6 @@ 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/pages/clock/ClockIndex.tsx

@@ -1,5 +1,5 @@
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
-import { View } from "@tarojs/components";
+import { View, Image } from "@tarojs/components";
 import './ClockIndex.scss'
 import TabBar from "@/components/navigation/TabBar";
 import { IconClose, IconNext } from "@/components/basic/Icons";
@@ -13,6 +13,8 @@ import { TimeFormatter } from "@/utils/time_format";
 import { getInfo } from "@/services/user";
 import Taro from "@tarojs/taro";
 import ChooseActions from "./components/choose_actions";
+import NewButton, { NewButtonType } from "@/_health/base/new_button";
+import { BASE_IMG_URL } from "@/services/http/api";
 
 var timer
 export default function ClockIndex() {
@@ -22,32 +24,38 @@ 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 [scenarios, setScenarios] = useState<any>([])
     const dispatch = useDispatch();
     global.dispatch = dispatch;
 
-    const list = [{
-        title: '饮食',
-        icon: '',
-        scenario: 'EAT'
-    }, {
-        title: '锻炼',
-        icon: '',
-        scenario: 'ACTIVE'
-    }, {
-        title: '断食',
-        icon: '',
-        scenario: 'FAST'
-    }, {
-        title: '睡眠',
-        icon: '',
-        scenario: 'SLEEP'
-    }, {
-        title: '指标',
-        icon: '',
-        scenario: 'METRIC'
-    }]
+    // const list = [{
+    //     title: '饮食',
+    //     title_en: 'Eat',
+    //     icon: 'eat.svg',
+    //     scenario: 'EAT'
+    // }, {
+    //     title: '锻炼',
+    //     title_en: 'Exercise',
+    //     icon: 'exercise.svg',
+    //     scenario: 'ACTIVE'
+    // }, {
+    //     title: '断食',
+    //     title_en: 'Fast',
+    //     icon: 'fast.svg',
+    //     scenario: 'FAST'
+    // }, {
+    //     title: '睡眠',
+    //     title_en: 'Sleep',
+    //     icon: 'sleep.svg',
+    //     scenario: 'SLEEP'
+    // }, {
+    //     title: '指标',
+    //     title_en: 'Metrics',
+    //     icon: 'metrics.svg',
+    //     scenario: 'METRIC'
+    // }]
     dayjs.locale(global.language == 'en' ? 'en' : 'zh-cn');
 
     useEffect(() => {
@@ -59,6 +67,7 @@ export default function ClockIndex() {
             setLoaded(true)
             setHome(res)
             setCount(1)
+            setScenarios((res as any).scenarios??[])
             dispatch(setEvents((res as any).events))
             dispatch(setActions((res as any).actions))
         })
@@ -90,21 +99,28 @@ export default function ClockIndex() {
             jumpPage('/_account/pages/ChooseAuth')
             return
         }
-        switch (index) {
-            case 0:
-            case 1:
-                // setShowChoose(true)
-                // setSelScenario(index == 0 ? 'MEAL' : 'ACTIVITY')
-                jumpPage(`/_record/pages/log_record?scenario=${index == 0 ? 'MEAL' : 'ACTIVITY'}`)
+        var scenarioObj = scenarios[index]
+        switch (scenarioObj.scenario) {
+            case 'MEAL':
+                setShowChoose(true)
+                setSelScenario('MEAL')
                 break;
-            case 2:
-            case 3:
-                jumpPage(`/_record/pages/time_record?scenario=${index == 2 ? 'FAST' : 'SLEEP'}`)
+            case 'ACTIVITY':
+                setShowChoose(true)
+                setSelScenario('ACTIVITY')
                 break;
-            case 4:
+            case 'FAST':
+                jumpPage(`/_record/pages/time_record?scenario=FAST`)
+                break
+            case 'SLEEP':
+                jumpPage(`/_record/pages/time_record?scenario=SLEEP`)
+                break
+            case 'METRIC':
                 jumpPage('/pages/metric/Metric')
-                // jumpPage('/_record/pages/metric_record')
                 break
+            case 'MOVE':
+                jumpPage('/_health/pages/move')
+                break;
         }
     }
 
@@ -135,22 +151,14 @@ export default function ClockIndex() {
     }
 
     function itemTime(item) {
-        if (item.scenario == 'FAST') {
-            if (home.events && home.events.length > 0 && home.events[0].status == 'OG') {
-                return TimeFormatter.countdown(home.events[0].time.start_timestamp)
-            }
-        }
-        else if (item.scenario == 'SLEEP') {
-            if (home.events && home.events.length > 0 && home.events[1].status == 'OG') {
-                return TimeFormatter.countdown(home.events[1].time.start_timestamp)
-            }
+        if (item.event && item.event.status == 'OG') {
+            return TimeFormatter.countdown(item.event.time.start_timestamp)
         }
         return ''
     }
 
     if (!loaded) return <View />
 
-
     return <View style={{ position: 'relative' }}>
         <View className="main_bg" style={{ background: getBackground() }} />
         <View
@@ -159,29 +167,51 @@ export default function ClockIndex() {
                     jumpPage('/_account/pages/ChooseAuth')
                     return
                 }
-                jumpPage('/_record/pages/time_record')
+                // jumpPage('/_record/pages/time_record')
             }}
             style={{ height: 100, width: 100, opacity: 0 }}>demo</View>
         <View className="h60 bold" style={{ marginLeft: rpxToPx(52) }}>{record.time ? record.time.greeting : ''}</View>
         <View className="h44 bold" style={{ marginLeft: rpxToPx(52), marginTop: rpxToPx(66), marginBottom: rpxToPx(58) }}>打卡</View>
+
         <View className="operate_panel">
             {
-                list.map((item, index) => {
-                    return <View key={index} className="operate_card" onClick={() => {
-                        tapItem(index)
+                scenarios.map((item, index) => {
+                    return <NewButton type={NewButtonType.custom}
+                        key={index}
+                        onClick={() => {
+                            tapItem(index)
 
-                    }}>
-                        <View className="h36 bold">{item.title}</View>
-                        <View className="h50 bold">{itemTime(item)}</View>
-                        <View style={{ flex: 1 }} />
-                        <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                            <IconNext width={rpxToPx(36)} color="#000" />
-                            <IconNext width={rpxToPx(36)} color="#000" />
+                        }}>
+                        <View className="operate_card" >
+                            <View className="h36 bold">{item.title}</View>
+                            <View className="h50 bold">{itemTime(item)}</View>
+                            <View style={{ flex: 1 }} />
+                            <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                <Image src={item.icon} style={{ width: rpxToPx(48), height: rpxToPx(48) }} />
+                                <IconNext width={rpxToPx(36)} color="#000" />
+                            </View>
                         </View>
-                    </View>
+                    </NewButton>
                 })
             }
         </View>
+        {
+            showChoose && <ChooseActions
+                close={() => {
+                    setShowChoose(false)
+                }}
+                quick={() => {
+                    jumpPage(`/_record/pages/log_record?scenario=${selScenario}&quick=1`)
+                }}
+                chooseImg={(array) => {
+                    jumpPage(`/_record/pages/log_record?scenario=${selScenario}&imgs=${JSON.stringify(array)}`)
+                }}
+                chooseText={() => {
+                    jumpPage(`/_record/pages/log_record?scenario=${selScenario}&only_text=1`)
+                }}
+            />
+        }
+
         {
             process.env.TARO_ENV == 'weapp' && <TabBar index={0} />
         }</View>

src/pages/clock/components/choose_actions.scss

@@ -5,7 +5,7 @@
     top: 0;
     width: 100vw;
     height: 100vh;
-    background-color: rgba($color: #000, $alpha: 0.9);
+    background-color: rgba($color: #000, $alpha: 1);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -74,4 +74,19 @@
         opacity: 1;
         // transform: translateY(0px);
     }
+}
+
+.action_btn_img{
+    position: absolute;
+    left: 40px;
+    top:40px;
+    width: 48px;
+    height: 48px;
+}
+
+.or_line{
+    width: 255px;
+    height: 1px;
+    background-color: #fff;
+    
 }

src/pages/clock/components/choose_actions.tsx

@@ -1,13 +1,14 @@
-import { View } from '@tarojs/components'
+import { View, Image } from '@tarojs/components'
 import './choose_actions.scss'
 import { IconClose } from '@/components/basic/Icons'
 import { rpxToPx } from '@/utils/tools'
 import NewButton, { NewButtonType } from '@/_health/base/new_button'
 import Taro from '@tarojs/taro'
-import { baseUrl } from '@/services/http/api'
+import { BASE_IMG_URL, baseUrl } from '@/services/http/api'
 import { useTranslation } from 'react-i18next'
 import { jumpPage } from '@/features/trackTimeDuration/hooks/Common'
 import { MainColorType } from '@/context/themes/color'
+import { useEffect } from 'node_modules/@types/react'
 
 export default function ChooseActions(props: { close: any, quick: any, chooseText: any, chooseImg: any }) {
     const { t } = useTranslation()
@@ -151,27 +152,40 @@ export default function ChooseActions(props: { close: any, quick: any, chooseTex
         });
     };
 
-    return <View className="actions_bg" onClick={props.close}>
+    return <View className="actions_bg" catchMove onClick={props.close}>
 
 
         <NewButton type={NewButtonType.img} onClick={album}>
-            <View className='action_btn h30 bold cardShowAni'>Add Photos</View>
+            <View className='action_btn h30 bold cardShowAni'>Add Photos
+                <Image className='action_btn_img' src={BASE_IMG_URL + 'image.svg'} />
+            </View>
         </NewButton>
         <NewButton type={NewButtonType.img} onClick={text}>
-            <View className='action_btn h30 bold cardShowAni'>Add Text</View>
+            <View className='action_btn h30 bold cardShowAni'>Add Text
+                <Image className='action_btn_img' src={BASE_IMG_URL + 'text.svg'} />
+            </View>
         </NewButton>
         <NewButton type={NewButtonType.img} onClick={camera}>
-            <View className='action_btn h30 bold cardShowAni'>Camera</View>
+            <View className='action_btn h30 bold cardShowAni'>Camera
+                <Image className='action_btn_img' src={BASE_IMG_URL + 'camera.svg'} />
+            </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
+                <Image className='action_btn_img' src={BASE_IMG_URL + 'wechat.svg'} />
+            </View>
         </NewButton>
 
-        <View className='g01 h30 bold' style={{ marginTop: rpxToPx(26) }}>OR</View>
+        <View className='cardShowAni' style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', height: rpxToPx(64), marginTop: rpxToPx(26) }}>
+            <View className='or_line'/>
+            <View className='white h30 bold' style={{marginLeft:rpxToPx(24),marginRight:rpxToPx(24)}}>OR</View>
+            <View className='or_line'/>
+        </View>
+
 
         <NewButton type={NewButtonType.img} onClick={checkin}>
-            <View className='action_btn h30 bold cardShowAni' style={{ backgroundColor: MainColorType.g02 }}>Quick Check in</View>
+            <View className='action_btn h30 bold cardShowAni'>Quick Check in</View>
         </NewButton>
 
 

src/services/health.tsx

@@ -1,5 +1,5 @@
 import { reject } from "lodash";
-import { API_ACTIVE_MOVES, API_ACTIVE_MOVES_CURRENT, API_ACTIVE_MOVES_SCHEDULES, API_HEALTH_ARCHIVED, API_HEALTH_CLOCK, API_HEALTH_EVENTS, API_HEALTH_FAST_SLEEP, API_HEALTH_LABELS_EVENT, API_HEALTH_LABELS_TIME, API_HEALTH_MOMENT, API_HEALTH_RECORD, API_HEALTH_SCHEDULES, API_HEALTH_STREAKS, API_HEALTH_WINDOWS, API_HEALTH_FAST, API_ME_ALBUMS, API_ME_ALBUMS_STAT, API_ME_JOURNALS, API_HEALTH_SCHEDULES_ORDERS, API_LASTEST_JOURNAL, API_USER_HOME, API_USER_TAGS, API_USER_EVENTS } from "./http/api";
+import { API_ACTIVE_MOVES, API_ACTIVE_MOVES_CURRENT, API_ACTIVE_MOVES_SCHEDULES, API_HEALTH_ARCHIVED, API_HEALTH_CLOCK, API_HEALTH_EVENTS, API_HEALTH_FAST_SLEEP, API_HEALTH_LABELS_EVENT, API_HEALTH_LABELS_TIME, API_HEALTH_MOMENT, API_HEALTH_RECORD, API_HEALTH_SCHEDULES, API_HEALTH_STREAKS, API_HEALTH_WINDOWS, API_HEALTH_FAST, API_ME_ALBUMS, API_ME_ALBUMS_STAT, API_ME_JOURNALS, API_HEALTH_SCHEDULES_ORDERS, API_LASTEST_JOURNAL, API_USER_HOME, API_USER_TAGS, API_USER_EVENTS, API_CHECK_SUMMARY } from "./http/api";
 import { request } from "./http/request";
 
 export const getLabelsEvent = (params) => {
@@ -454,12 +454,14 @@ export const getLatestJournal = (isGet: boolean, params: any) => {
 }
 
 export const homeInfo = () => {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
         request({
             url: API_USER_HOME, method: 'GET', data: {}
         }).then(res => {
             resolve(res);
             // dispatch(loginSuccess(res));
+        }).catch(e => {
+            reject(e)
         })
     })
 }
@@ -484,13 +486,27 @@ export const addUserTag = (params) => {
     })
 }
 export const addEvents = (params) => {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
         request({
             url: API_USER_EVENTS, method: 'POST', data: { ...params }
         }).then(res => {
             resolve(res);
             // dispatch(loginSuccess(res));
+        }).catch(e => {
+            reject(e)
         })
     })
 }
 
+export const checkSummary = (params) => {
+    return new Promise((resolve, reject) => {
+        request({
+            url: API_CHECK_SUMMARY, method: 'GET', data: { ...params }
+        }).then(res => {
+            resolve(res);
+            // dispatch(loginSuccess(res));
+        }).catch(e => {
+            reject(e)
+        })
+    })
+}

src/services/http/api.js

@@ -14,6 +14,7 @@ export let imgUrl = online
     : 'https://api.fast.dev.liveplus.fun/static/image/';
 
 export const SHARE_COVER_URL = 'https://background-pictures.oss-cn-beijing.aliyuncs.com/share_cover/'
+export const BASE_IMG_URL = 'https://projects-assets.oss-cn-beijing.aliyuncs.com/'
 
 //common
 export const API_ADJUST_TIMES = `${baseUrl}/api/fast/adjust-times`
@@ -113,7 +114,7 @@ export const API_HEALTH_FAST = `${baseUrl}/api/health/fast`
 
 export const API_ACTIVE_MOVES_CURRENT = `${baseUrl}/api/health/active/moves/current`
 export const API_ACTIVE_MOVES_SCHEDULES = `${baseUrl}/api/health/schedules/active/move`
-export const API_ACTIVE_MOVES= `${baseUrl}/api/health/active/moves`
+export const API_ACTIVE_MOVES = `${baseUrl}/api/health/active/moves`
 export const API_ME_JOURNALS = `${baseUrl}/api/health/wo/journals`
 export const API_ME_ALBUMS = `${baseUrl}/api/health/wo/albums`
 export const API_ME_ALBUMS_STAT = `${baseUrl}/api/health/wo/albums-stat`
@@ -137,4 +138,5 @@ export const API_JOIN_HISTORY = `${baseUrl}/api/join/histories` //完整接龙
 //record
 export const API_USER_HOME = `${baseUrl}/api/user/home`
 export const API_USER_TAGS = `${baseUrl}/api/user/tags`
-export const API_USER_EVENTS = `${baseUrl}/api/user/events`
+export const API_USER_EVENTS = `${baseUrl}/api/user/events`
+export const API_CHECK_SUMMARY = `${baseUrl}/api/user/check-in-summary`