update

src/_health/base/new_button.tsx

@@ -243,7 +243,7 @@ export default function NewButton(props: {
                 <IconMore color={MainColorType.link} width={rpxToPx(34)} />
             </View>
         case NewButtonType.img:
-            return <View style={{ opacity: isTouched ? 0.6 : 1, ...props.btnStyle }} onClick={(e) => {
+            return <View style={{ opacity: isTouched ? 0.6 : 1, ...props.btnStyle, display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={(e) => {
                 if (process.env.TARO_ENV == 'weapp') {
                     e.stopPropagation()
                 }
@@ -268,7 +268,7 @@ export default function NewButton(props: {
     }
 
     return <View
-        style={{ ...style, fontWeight: props.bold ? 'bold' : 'normal',display:'flex',flexDirection:'row',alignItems:'center' }}
+        style={{ ...style, ...props.btnStyle, fontWeight: props.bold ? 'bold' : 'normal', display: 'flex', flexDirection: 'row', alignItems: 'center' }}
         catchMove
         onClick={(e) => {
             if (process.env.TARO_ENV == 'weapp') {

src/_health/base/status_indicator.scss

@@ -0,0 +1,35 @@
+.indicator_circle {
+    width: 26px;
+    height: 26px;
+    border-radius: 13px;
+    background-color: transparent;
+    box-sizing: border-box;
+    border: solid 4px pink;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.indicator_point {
+    width: 14px;
+    height: 14px;
+    border-radius: 7px;
+    animation: scaleFade 2s infinite;
+}
+
+@keyframes scaleFade {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    50% {
+        transform: scale(0.7);
+        opacity: 0.7;
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}

src/_health/base/status_indicator.tsx

@@ -0,0 +1,83 @@
+import { View } from '@tarojs/components'
+import './status_indicator.scss'
+import { rpxToPx } from '@/utils/tools'
+import { MainColorType } from '@/context/themes/color'
+
+
+export enum StatusType {
+    normal = 'normal',
+    ing = 'ing',
+    img = 'img',
+    missed = 'missed'
+}
+export default function StatusIndicator(props: {
+    type: StatusType,
+    color: string,
+    text?: string,
+    children?: any,
+    fontColor?: string,
+    fontSize?: number
+
+}) {
+
+    function indicator() {
+        switch (props.type) {
+            case StatusType.normal:
+                return <View style={{
+                    width: rpxToPx(14),
+                    height: rpxToPx(14),
+                    borderRadius: rpxToPx(7),
+                    backgroundColor: props.color
+                }} />
+            case StatusType.ing:
+                return <View className='indicator_circle'
+                    style={{ borderColor: props.color }}
+                >
+                    <View className='indicator_point' style={{ backgroundColor: props.color }} />
+                </View>
+            case StatusType.img:
+                return <View style={{
+                    width: rpxToPx(26),
+                    height: rpxToPx(26),
+                    borderRadius: rpxToPx(13),
+                    backgroundColor: props.color,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }}>
+                    {
+                        props.children
+                    }
+                </View>
+        }
+        return <View />
+    }
+
+    return <View style={{
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+
+    }}>
+        <View style={{
+            width: rpxToPx(26),
+            height: rpxToPx(26),
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+
+        }}>
+            {
+                indicator()
+            }
+        </View>
+
+        {
+            props.text && <View className='h20' style={{
+                color: props.fontColor ? props.fontColor : MainColorType.g01,
+                fontSize: props.fontSize ? props.fontSize : rpxToPx(20),
+                marginLeft: rpxToPx(8)
+            }}>{props.text}</View>
+        }
+    </View>
+}

src/_health/pages/move_schedule.config.ts

@@ -1 +1,9 @@
 
+export default definePageConfig({
+    usingComponents:{
+      // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+      // 'demo':'../../components/demo'
+    },
+    "navigationBarTitleText":"",
+    "navigationBarBackgroundColor":"#f5f5f5"
+  })

src/_health/pages/move_schedule.scss

@@ -1,11 +1,11 @@
 .schedule_item{
     position: relative;
-    height: 140px;
+    height: 172px;
     background-color: #fff;
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding-left: 52px;
+    padding-left: 40px;
     box-sizing: border-box;
     padding-right: 40px;
 }
@@ -15,17 +15,6 @@
     flex-direction: column;
 }
 
-.schedule_item_line{
-    background-color: #B2B2B2;
-    opacity: 0.1;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 52px;
-    height: 2px;
-    transform: scaleY(0.5);
-}
-
 .schedule_item_time{
     font-size: 24px;
     color: #B2B2B2;

src/_health/pages/move_schedule.tsx

@@ -6,6 +6,10 @@ import { createSchedule, getActiveMovesCurrent, getMoveSchedules } from "@/servi
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
 import { getThemeColor } from "@/features/health/hooks/health_hooks";
 import { rpxToPx } from "@/utils/tools";
+import NewHeader, { NewHeaderType } from "../components/new_header";
+import StatusIndicator, { StatusType } from "../base/status_indicator";
+import { MainColorType } from "@/context/themes/color";
+import { IconNotification, IconNotificationOff } from "@/components/basic/Icons";
 
 let useRoute;
 let useNavigation;
@@ -110,16 +114,16 @@ export default function MoveSchedule() {
             endDate.setMinutes(10);
             endDate.setSeconds(0);
             endDate.setMilliseconds(0);
-            var endTimestamp = endDate.getTime()+3600*1000;
-            if (new Date().getTime()>endTimestamp){
-                endTimestamp += 24*3600*1000
+            var endTimestamp = endDate.getTime() + 3600 * 1000;
+            if (new Date().getTime() > endTimestamp) {
+                endTimestamp += 24 * 3600 * 1000
             }
 
-            if (endTimestamp-new Date().getTime()>20*60*1000){
-                return <Text>countdown {formatTimeInterval(new Date().getTime(),endTimestamp)} </Text>
+            if (endTimestamp - new Date().getTime() > 20 * 60 * 1000) {
+                return <Text>countdown {formatTimeInterval(new Date().getTime(), endTimestamp)} </Text>
             }
-            else if (endTimestamp-new Date().getTime()<10*60*1000){
-                <Text style={{ color: getThemeColor('ACTIVE') }}>Closing soon in {formatTimeInterval(new Date().getTime(),endTimestamp)} </Text>
+            else if (endTimestamp - new Date().getTime() < 10 * 60 * 1000) {
+                <Text style={{ color: getThemeColor('ACTIVE') }}>Closing soon in {formatTimeInterval(new Date().getTime(), endTimestamp)} </Text>
             }
             return <Text>available </Text>
         }
@@ -127,6 +131,7 @@ export default function MoveSchedule() {
     }
 
     return <View style={{ display: 'flex', flexDirection: 'column' }}>
+        <NewHeader type={NewHeaderType.left} title="Upcoming Check Ins" />
         {
             hours.length == 0 && <View style={{ display: 'flex', flex: 1, flexDirection: 'column', alignItems: 'center', marginTop: rpxToPx(110) }}>
                 <Image src={require('@assets/_health/sleep2.png')} style={{ width: rpxToPx(64), height: rpxToPx(64) }} />
@@ -145,22 +150,32 @@ export default function MoveSchedule() {
                 if (item.status != 'WFS') return <View key={index} />
                 return <View key={index} className="schedule_item">
                     <View className="schedule_item_left">
-                        <View>{open}:50</View>
-                        <Text>
-                            {firstTime(index)}
-                            <Text className="schedule_item_time">Check in for {parseInt(start) < new Date().getHours() ? '' : ''}{start}:00-{end}:00</Text>
+                        <StatusIndicator type={StatusType.normal}
+                            color={MainColorType.active}
+                            text={'WAKING HOUR ' + (index + 1)} />
+                        <View className="h34" style={{ marginLeft: rpxToPx(30) }}>Check in at {open}:50</View>
+                        <Text className="h22" style={{ color: MainColorType.g02, marginTop: rpxToPx(12), marginLeft: rpxToPx(30) }}>
+                            {parseInt(start) < new Date().getHours() ? '' : ''}{start}:00-{end}:00
+
+                            <Text className="schedule_item_time">  {firstTime(index)}</Text>
                         </Text>
                         {/* <Text className="schedule_item_target">{item.real_steps}/{item.target_steps} steps</Text> */}
                     </View>
                     <View style={{ flex: 1 }} />
+                    {
+                        item.reminder ? <IconNotification color={MainColorType.g03} width={rpxToPx(28)} /> : <IconNotificationOff color={MainColorType.g03} width={rpxToPx(28)} />
+                    }
+                    <View style={{ width: rpxToPx(12) }} />
                     <Switch checked={item.reminder} color={getThemeColor('ACTIVE')} onChange={e => {
                         console.log(item)
+
                         createSchedule({
                             schedules: [{
                                 id: item.schedule_id,
                                 reminder: e.detail.value
                             }],
                         }).then(res => {
+                            getData()
                             if (global.refreshWindow) {
                                 global.refreshWindow()
                             }
@@ -177,7 +192,7 @@ export default function MoveSchedule() {
                     } */}
 
                     {
-                        index < hours.length - 1 && <View className="schedule_item_line" />
+                        index < hours.length - 1 && <View className="border_footer_line" style={{ left: rpxToPx(72) }} />
                     }
                 </View>
             })

src/_health/pages/move_setting_reminder.config.ts

@@ -0,0 +1,9 @@
+
+export default definePageConfig({
+    usingComponents: {
+        // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+        // 'demo':'../../components/demo'
+    },
+    "navigationBarTitleText": "",
+    "navigationBarBackgroundColor": "#f5f5f5"
+})

src/_health/pages/move_setting_reminder.tsx

@@ -1,9 +1,15 @@
 import { View, Text, Switch } from "@tarojs/components";
 import './move_setting_reminder.scss'
+import './move_schedule.scss'
 import Cell from "../base/cell";
 import { useEffect, useState } from "react";
 import { createSchedule, getMoveSchedules } from "@/services/health";
 import { getThemeColor } from "@/features/health/hooks/health_hooks";
+import NewHeader, { NewHeaderType } from "../components/new_header";
+import { IconNotification, IconNotificationOff } from "@/components/basic/Icons";
+import { MainColorType } from "@/context/themes/color";
+import { rpxToPx } from "@/utils/tools";
+import StatusIndicator, { StatusType } from "../base/status_indicator";
 
 export default function MoveSettingReminder() {
     const [selIndex, setSelIndex] = useState(-1)
@@ -12,47 +18,71 @@ export default function MoveSettingReminder() {
     const [detail, setDetail] = useState<any>(null)
 
     useEffect(() => {
+        getData()
+    }, [])
+
+    function getData() {
         getMoveSchedules().then(res => {
             setDetail(res)
             setHours((res as any).goal.hour)
             setTotal((res as any).goal.day)
         })
-    }, [])
+    }
 
     if (!detail) return <View />
 
     return <View>
-        <Text>打卡时刻表</Text>
+        <NewHeader type={NewHeaderType.left} title="Full Check In Schedule" />
         {
             detail.schedules.map((item, index) => {
                 return <View key={index}>
-                    <Cell className='demoCell' disable>
-                        <View style={{ display: 'flex', flexDirection: 'column' }}>
+                    <View key={index} className="schedule_item">
+                        {/* <View style={{ display: 'flex', flexDirection: 'column' }}>
                             <Text>{item.reminder_time}</Text>
                             <View>
                                 <Text style={{ flex: 1 }}>check in for {item.time}-{item.end_time}</Text>
-                                <Switch checked={item.reminder} color={getThemeColor('ACTIVE')} onChange={e => {
-                        console.log(item)
-                        createSchedule({
-                            schedules: [{
-                                id: item.id,
-                                reminder: e.detail.value
-                            }],
-                        }).then(res => {
-                            if (global.refreshWindow){
-                                global.refreshWindow()
-                            }
-                            if (global.refreshSchedules){
-                                global.refreshSchedules()
-                            }
-                            if (global.updateMove){
-                                global.updateMove()
-                            }
-                        })
-                    }}/>
+
                             </View>
+                        </View> */}
+                        <View className="schedule_item_left">
+                            <StatusIndicator type={StatusType.normal}
+                                color={MainColorType.active}
+                                text={'WAKING HOUR ' + (index + 1)} />
+                            <View className="h34" style={{ marginLeft: rpxToPx(30) }}>Check in at {item.reminder_time}</View>
+                            <Text className="h22" style={{ color: MainColorType.g02, marginTop: rpxToPx(12), marginLeft: rpxToPx(30) }}>
+                                {item.title}
+                            </Text>
+                            {/* <Text className="schedule_item_target">{item.real_steps}/{item.target_steps} steps</Text> */}
                         </View>
-                    </Cell>
+                        <View style={{ flex: 1 }} />
+                        {
+                            item.reminder ? <IconNotification color={MainColorType.g03} width={rpxToPx(28)} /> : <IconNotificationOff color={MainColorType.g03} width={rpxToPx(28)} />
+                        }
+                        <View style={{ width: rpxToPx(12) }} />
+                        <Switch checked={item.reminder} color={getThemeColor('ACTIVE')} onChange={e => {
+                            console.log(item)
+                            createSchedule({
+                                schedules: [{
+                                    id: item.id,
+                                    reminder: e.detail.value
+                                }],
+                            }).then(res => {
+                                getData()
+                                if (global.refreshWindow) {
+                                    global.refreshWindow()
+                                }
+                                if (global.refreshSchedules) {
+                                    global.refreshSchedules()
+                                }
+                                if (global.updateMove) {
+                                    global.updateMove()
+                                }
+                            })
+                        }} />
+                        {
+                        index < detail.schedules.length - 1 && <View className="border_footer_line" style={{ left: rpxToPx(72) }} />
+                    }
+                    </View>
                 </View>
             })
         }

src/_health/pages/move_setting_time.config.ts

@@ -0,0 +1,9 @@
+
+export default definePageConfig({
+    usingComponents: {
+        // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+        // 'demo':'../../components/demo'
+    },
+    "navigationBarTitleText": "",
+    "navigationBarBackgroundColor": "#f5f5f5"
+})

src/_health/pages/move_setting_time.tsx

@@ -4,6 +4,10 @@ import Cell from "../base/cell";
 import { useEffect, useState } from "react";
 import { createSchedule, getMoveSchedules } from "@/services/health";
 import { rpxToPx } from "@/utils/tools";
+import NewHeader, { NewHeaderType } from "../components/new_header";
+import NewButton, { NewButtonType } from "../base/new_button";
+import StatusIndicator, { StatusType } from "../base/status_indicator";
+import { MainColorType } from "@/context/themes/color";
 
 export default function MoveSettingTime() {
     const [selIndex, setSelIndex] = useState(-1)
@@ -26,57 +30,82 @@ export default function MoveSettingTime() {
     if (!detail) return <View />
 
     return <View>
-        <Text>每小时步数目标</Text>
-        <Text>平均 {hours} 步，全天 {total} 步</Text>
+        <NewHeader
+            type={NewHeaderType.left_subtitle}
+            title="每小时步数目标"
+            subtitle={`平均 ${hours} 步，全天 ${total} 步`}
+        />
         {
             detail.schedules.map((item, index) => {
-                return <View key={index}>
-                    <Cell className='demoCell' disable>
-                        <View style={{ display: 'flex', flexDirection: 'column', paddingLeft: 20, paddingRight: 20, width: rpxToPx(750), boxSizing: 'border-box' }}>
-                            <Text>{item.time}-{item.end_time}</Text>
-                            <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                return <View key={index} style={{
+                    position: 'relative',
+                    display: 'flex',
+                    backgroundColor: '#fff',
+                    paddingLeft: rpxToPx(40),
+                    paddingRight: rpxToPx(40),
+                    height: rpxToPx(172),
+                    msFlexDirection: 'row',
+                    alignItems: 'center'
+                }}>
+
+                    <View style={{ display: 'flex', flexDirection: 'column', flex: 1, boxSizing: 'border-box' }}>
+                        <StatusIndicator
+                            type={StatusType.normal}
+                            text={'WALKING HOUR ' + (index + 1)}
+                            color={MainColorType.active}
+                        />
+
+                        <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                            {
+                                selIndex == index ? <Input className='item_name h34' style={{ flex: 1, marginLeft: rpxToPx(30),height:rpxToPx(46) }}
+                                    value={item.goal}
+                                    autoFocus={true}
+                                    focus={true}
+                                    type="number"
+                                    onBlur={() => {
+                                        setSelIndex(-1)
+                                        createSchedule({
+                                            schedules: [{
+                                                id: item.id,
+                                                goal: item.goal
+                                            }],
+                                        }).then(res => {
+                                            if (global.refreshWindow) {
+                                                global.refreshWindow()
+                                            }
+                                            if (global.refreshSchedules) {
+                                                global.refreshSchedules()
+                                            }
+                                            if (global.updateMove) {
+                                                global.updateMove()
+                                            }
+                                            getDatas()
+                                        })
+                                    }}
+                                    onInput={(e) => {
+                                        // item.goal = e.detail.value
+                                        var obj = JSON.parse(JSON.stringify(detail))
+                                        obj.schedules[index].goal = e.detail.value
+                                        setDetail(obj)
+                                    }} /> : <Text className="h34" style={{ marginLeft: rpxToPx(30),height:rpxToPx(46) }}>Hit {item.goal} Steps</Text>
+                            }
+                            <View>
                                 {
-                                    selIndex == index ? <Input className='item_name' style={{ flex: 1 }}
-                                        value={item.goal}
-                                        autoFocus={true}
-                                        focus={true}
-                                        type="number"
-                                        onBlur={() => {
-                                            setSelIndex(-1)
-                                            createSchedule({
-                                                schedules: [{
-                                                    id: item.id,
-                                                    goal: item.goal
-                                                }],
-                                            }).then(res => {
-                                                if (global.refreshWindow) {
-                                                    global.refreshWindow()
-                                                }
-                                                if (global.refreshSchedules) {
-                                                    global.refreshSchedules()
-                                                }
-                                                if (global.updateMove) {
-                                                    global.updateMove()
-                                                }
-                                                getDatas()
-                                            })
+                                    selIndex != index && <NewButton type={NewButtonType.link}
+                                        title="更改目标"
+                                        onClick={() => {
+                                            setSelIndex(index)
                                         }}
-                                        onInput={(e) => {
-                                            // item.goal = e.detail.value
-                                            var obj = JSON.parse(JSON.stringify(detail))
-                                            obj.schedules[index].goal = e.detail.value
-                                            setDetail(obj)
-                                        }} /> : <Text style={{ flex: 1 }}>{item.goal}<Text>Steps</Text></Text>
-                                }
-                                {
-                                    selIndex != index && <Text onClick={() => {
-                                        setSelIndex(index)
-                                    }}>更改目标</Text>
+                                    />
                                 }
-
                             </View>
+
                         </View>
-                    </Cell>
+                        <Text className="h22" style={{ color: MainColorType.g02, marginTop: rpxToPx(12), marginLeft: rpxToPx(30) }}>{item.time}-{item.end_time}</Text>
+                    </View>
+                    {
+                        index < detail.schedules.length - 1 && <View className="border_footer_line" style={{ left: rpxToPx(72) }} />
+                    }
                 </View>
             })
         }

src/_health/pages/schedules.tsx

@@ -12,6 +12,8 @@ import TimePicker from "@/features/common/TimePicker";
 import showAlert from "@/components/basic/Alert";
 import { IconAdd } from "@/components/basic/Icons";
 import AddLabel from "../components/add_label";
+import NewButton, { NewButtonType } from "../base/new_button";
+import showActionSheet from "@/components/basic/ActionSheet";
 
 let useRoute;
 let useNavigation;
@@ -52,7 +54,7 @@ export default function Schedules() {
     useEffect(() => {
         if (selMode == '' && router.params.schedules) {
             setList(JSON.parse(router.params.schedules))
-            if (router.params.errors){
+            if (router.params.errors) {
                 setErrors(JSON.parse(router.params.errors))
             }
         }
@@ -250,7 +252,7 @@ export default function Schedules() {
     }
 
     function tapEdit() {
-        jumpPage('./schedules_edit?mode=' + selMode)
+
     }
 
     function itemStyle(obj) {
@@ -273,7 +275,7 @@ export default function Schedules() {
     }
 
     function showAll() {
-        if (!btnEnable){
+        if (!btnEnable) {
             return
         }
         if (errors.length == 0) {
@@ -283,16 +285,30 @@ export default function Schedules() {
             setBtnEnable(false)
             createSchedule({
                 schedules: tempArray,
-                return_all:true
+                return_all: true
                 // only_check: true
             }).then(res => {
                 setBtnEnable(true)
-                jumpPage('/_health/pages/schedules?mode=&schedules='+JSON.stringify((res as any).schedules)+'&errors='+JSON.stringify((res as any).error_messages))
+                jumpPage('/_health/pages/schedules?mode=&schedules=' + JSON.stringify((res as any).schedules) + '&errors=' + JSON.stringify((res as any).error_messages))
             })
         }
 
     }
 
+    function more() {
+        var items = ['设置提醒', '个性化名称'];
+        showActionSheet({
+            showActionSheetWithOptions: showActionSheetWithOptions,
+            title: 'Oprate Title',
+            itemList: items,
+            success: (res) => {
+                var url = `./schedules_edit?type=${res == 0 ? 'reminder' : 'name'}&mode=${selMode}`
+                console.log(url)
+                jumpPage(url)
+            }
+        });
+    }
+
 
     return <View>
         <View style={{ display: 'flex', flexDirection: 'column' }}>
@@ -353,15 +369,29 @@ export default function Schedules() {
                 </View>
             }
 
+            <View className="main_footer" style={{ backgroundColor: 'transparent' }}>
+                {
+                    selMode != '' && <View style={{ width: rpxToPx(316), height: rpxToPx(128), display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <NewButton
+                            type={NewButtonType.link}
+                            title='View Full Schedule'
+                            onClick={showAll}
+                        >
+                        </NewButton>
+                    </View>}
+                <NewButton
+                    btnStyle={{
+                        position: 'absolute',
+                        top: rpxToPx(42),
+                        right: rpxToPx(40)
+                    }}
+                    type={NewButtonType.more}
+                    onClick={more}
+                />
 
+            </View>
 
-            {
-                selMode != '' && <Text onClick={() => {
-                    showAll()
-                }}>查看全部</Text>
-            }
-
-            <View className="edit_footer_btn" style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={tapEdit}>批量编辑</View>
+            {/* <View className="edit_footer_btn" style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={tapEdit}>批量编辑</View> */}
             {
                 showTimePicker && <Modal
                     testInfo={null}

src/_health/pages/schedules_edit.scss

@@ -14,8 +14,8 @@
 
 .schedule_item {
     padding-left: 40px;
-    padding-right: 52px;
-    height: 128px;
+    padding-right: 40px;
+    height: 154px;
     align-items: center;
     display: flex;
     flex-direction: row;

src/_health/pages/schedules_edit.tsx

@@ -11,6 +11,11 @@ import { AtSwipeAction } from "taro-ui"
 import Taro, { useRouter } from "@tarojs/taro";
 import showAlert from "@/components/basic/Alert";
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
+import StatusIndicator, { StatusType } from "../base/status_indicator";
+import NewButton, { NewButtonType } from "../base/new_button";
+import { MainColorType } from "@/context/themes/color";
+import { IconNotification, IconNotificationOff } from "@/components/basic/Icons";
+import NewHeader, { NewHeaderType } from "../components/new_header";
 
 let useRoute;
 let useNavigation;
@@ -205,8 +210,50 @@ export default function SchedulesEdit() {
         setList(array)
         setDelIds(ids)
     }
+
+    function reminder(obj) {
+        if (!obj.is_all_day || health.mode == 'DAY' || health.mode == 'NIGHT') {
+            return <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                {
+                    obj.reminder ? <IconNotification color={MainColorType.g03} width={rpxToPx(28)} /> : <IconNotificationOff color={MainColorType.g03} width={rpxToPx(28)} />
+                }
+                <View style={{ width: rpxToPx(12) }} />
+                <Switch checked={obj.reminder}
+                    color={getThemeColor(obj.window)}
+                    onChange={e => {
+                        if (process.env.TARO_ENV == 'weapp') {
+                            e.stopPropagation()
+                        }
+
+                        obj.reminder = e.detail.value;
+                        setList([...list])
+                    }} />
+            </View>
+        }
+        return <View />
+    }
+
+    function editName(item, obj, index, i) {
+        if ((item.window == 'EAT' || item.window == 'ACTIVE') &&
+            !(editIndex.row == index && editIndex.index == i)) {
+            return <View>
+                <NewButton type={NewButtonType.link}
+                    title="更改"
+                    onClick={() => {
+                        setSelItem(obj)
+                        setEditIndex({
+                            row: index,
+                            index: i
+                        })
+                    }}
+                />
+            </View>
+        }
+        return <View />
+    }
     return <View className='schedule_list_bg'>
         <ScrollView enableFlex style={{ height: Taro.getSystemInfoSync().screenHeight - 220 }} scrollY>
+            <NewHeader title="日程设置" type={NewHeaderType.left} />
             <View style={{ display: 'flex', flexDirection: 'column' }}>
                 {
                     list.map((item, index) => {
@@ -249,60 +296,57 @@ export default function SchedulesEdit() {
                                         }}
                                     >
                                         <View className='schedule_item' style={{ width: rpxToPx(750), boxSizing: 'border-box' }}>
+                                            <View style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', flex: 1 }}>
+                                                <View className='item_left2'>
+                                                    <StatusIndicator type={StatusType.normal} color={getThemeColor(obj.window)} />
+
+                                                    {
+                                                        editIndex.row == index && editIndex.index == i ?
+                                                            <Input className='item_name' style={{ flex: 1 }}
+                                                                value={selItem.title}
+                                                                autoFocus={true}
+                                                                focus={true}
+                                                                onBlur={() => {
+                                                                    setEditIndex({
+                                                                        row: -1,
+                                                                        index: -1
+                                                                    })
+                                                                }}
+                                                                onInput={(e) => {
+                                                                    var temp = JSON.parse(JSON.stringify(selItem))
+                                                                    temp.title = e.detail.value
+                                                                    obj.title = e.detail.value
+                                                                    setSelItem(temp)
+                                                                }} /> : <Text className='item_name'>{obj.title}</Text>
+                                                    }
 
-                                            <View className='item_left2'>
-                                                <Text className='item_index'>{i + 1}</Text>
-
-                                                {
-                                                    editIndex.row == index && editIndex.index == i ?
-                                                        <Input className='item_name' style={{ flex: 1 }}
-                                                            value={selItem.title}
-                                                            autoFocus={true}
-                                                            focus={true}
-                                                            onBlur={() => {
+                                                    {/* {
+                                                        (item.window == 'EAT' || item.window == 'ACTIVE') &&
+                                                        !(editIndex.row == index && editIndex.index == i) &&
+                                                        <Image src={require('@assets/_health/edit.png')}
+                                                            className="edit_icon"
+                                                            onClick={(e) => {
+                                                                if (process.env.TARO_ENV == 'weapp') {
+                                                                    e.stopPropagation()
+                                                                }
+                                                                setSelItem(obj)
                                                                 setEditIndex({
-                                                                    row: -1,
-                                                                    index: -1
+                                                                    row: index,
+                                                                    index: i
                                                                 })
                                                             }}
-                                                            onInput={(e) => {
-                                                                var temp = JSON.parse(JSON.stringify(selItem))
-                                                                temp.title = e.detail.value
-                                                                obj.title = e.detail.value
-                                                                setSelItem(temp)
-                                                                // selItem.title = e.detail.value
-                                                                // console.log(e.detail.value)
-                                                                // setSelItem(selItem)
-                                                            }} /> : <Text className='item_name'>{obj.title}</Text>
-                                                }
-
+                                                        />
+                                                    } */}
+                                                </View>
                                                 {
-                                                    (item.window == 'EAT' || item.window == 'ACTIVE') &&
-                                                    !(editIndex.row == index && editIndex.index == i) &&
-                                                    <Image src={require('@assets/_health/edit.png')}
-                                                        className="edit_icon"
-                                                        onClick={(e) => {
-                                                            if (process.env.TARO_ENV == 'weapp') {
-                                                                e.stopPropagation()
-                                                            }
-                                                            setSelItem(obj)
-                                                            setEditIndex({
-                                                                row: index,
-                                                                index: i
-                                                            })
-                                                        }}
-                                                    />
+                                                    !obj.is_all_day && <View className="h22" style={{ color: MainColorType.g02 }}>{obj.time}</View>
                                                 }
                                             </View>
-
-                                            {/* <View style={{ flex: 1 }} /> */}
-
                                             {
-                                                !obj.is_all_day && <View className='edit_item_time' onClick={() => changeTime(obj)} style={{ marginRight: rpxToPx(24) }}>{obj.time}</View>
+                                                router.params.type == 'reminder' ? reminder(obj) : editName(item, obj, index, i)
                                             }
 
-
-                                            {(!obj.is_all_day || health.mode == 'DAY' || health.mode == 'NIGHT') && <Switch checked={obj.reminder}
+                                            {/* {router.params.type == 'reminder' && (!obj.is_all_day || health.mode == 'DAY' || health.mode == 'NIGHT') && <Switch checked={obj.reminder}
                                                 color={getThemeColor(obj.window)}
                                                 onChange={e => {
                                                     if (process.env.TARO_ENV == 'weapp') {
@@ -311,7 +355,7 @@ export default function SchedulesEdit() {
 
                                                     obj.reminder = e.detail.value;
                                                     setList([...list])
-                                                }} />}
+                                                }} />} */}
                                             {
                                                 i < item.list.length - 1 && <View className='item_line' />
                                             }
@@ -326,7 +370,16 @@ export default function SchedulesEdit() {
                 }
             </View>
         </ScrollView>
-        <View className="edit_footer_btn" style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={tapDone}>完成</View>
+        <NewButton
+            btnStyle={{ marginLeft: rpxToPx(40) }}
+            type={NewButtonType.fill}
+            title="完成"
+            color={getThemeColor(health.mode)}
+            width={rpxToPx(670)}
+            height={rpxToPx(96)}
+            onClick={tapDone}
+        />
+        {/* <View className="edit_footer_btn" style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={tapDone}>完成</View> */}
         {
             showTimePicker && <Modal
                 testInfo={null}

src/_health/pages/streak_calendar.config.ts

@@ -0,0 +1,8 @@
+export default definePageConfig({
+    usingComponents: {
+        // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+        // 'demo':'../../components/demo'
+    },
+    "navigationBarTitleText": "",
+    "navigationBarBackgroundColor":"#f5f5f5",
+})

src/_health/pages/streak_calendar.tsx

@@ -0,0 +1,9 @@
+import { View } from "@tarojs/components";
+import './streak_calendar.scss'
+
+
+export default function StreakCalendar(){
+    return <View>
+
+    </View>
+}

src/app.config.ts

@@ -73,7 +73,8 @@ const appConfig = defineAppConfig({
         'pages/fast_sleep',
         'pages/long_fast',
         'pages/long_fast_setting',
-        'pages/post_result'
+        'pages/post_result',
+        'pages/streak_calendar'
       ]
     }
   ],

src/features/health/calendar.scss

@@ -1,49 +1,71 @@
-.calendar_main{
+.calendar_main {
     width: 750px;
 }
 
-.calendar_header{
-    width: 750px;
-    height: 56px;
+.calendar_header {
+    width: 670px;
+    margin-top: 32px;
+    margin-bottom: 22px;
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
-    color: #808080;
-    font-size: 34px;
+    color: #000;
+    font-size: 28px;
 }
 
-.calendar_body{
-    margin-top: 38px;
+.calendar_body {
     display: flex;
     flex-direction: column;
+    margin-left: 20px;
+    margin-right: 20px;
+    box-sizing: border-box;
+    overflow: hidden;
 }
 
-.calendar_weekly{
+.calendar_weekly {
     display: flex;
     flex-direction: row;
     align-items: center;
+    flex: 1;
+    height: 28px;
+    margin-bottom: 12px;
 }
 
-.week_item{
-    flex:1;
+.week_item {
+    flex: 1;
+    // width: 90px;
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 26px;
-    color:#B2B2B2;
+    font-size: 18px;
+    color: #B2B2B2;
+}
+
+.calendar_main2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f5f5;
+    width: 670px;
+    margin-left: 40px;
+    margin-bottom: 40px;
+    border-radius: 28px;
 }
 
-.calendar_main{
+.calendar_main3 {
     display: flex;
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
-    width: 750px;
+    padding-bottom: 4px;
+
 }
 
-.left_calendar_item{
+.left_calendar_item {
     height: 74px;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -53,9 +75,9 @@
     border-bottom-left-radius: 37px;
 }
 
-.right_calendar_item{
+.right_calendar_item {
     height: 74px;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -65,9 +87,9 @@
     border-bottom-right-radius: 37px;
 }
 
-.full_calendar_item{
+.full_calendar_item {
     height: 74px;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -76,9 +98,26 @@
     border-radius: 37px;
 }
 
-.center_calendar_item{
+.today1 {
+    background-color: #000000;
     height: 74px;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    ;
+    border-radius: 37px;
+}
+
+.today_content {
+    border: solid 2px #000;
+    box-sizing: border-box;
+}
+
+.center_calendar_item {
+    height: 74px;
+    margin-bottom: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -86,37 +125,42 @@
     background-color: #26B7FF1A;
 }
 
-.calendar_item{
+.calendar_item {
     height: 74px;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    
+
 }
 
-.left_day{
-    color:#26B7FF;
+.left_day {
+    color: #26B7FF;
     font-size: 34px;
 }
 
-.right_day{
-    color:#26B7FF;
+.right_day {
+    color: #26B7FF;
     font-size: 34px;
 }
 
-.full_day{
-    color:#26B7FF;
+.full_day {
+    color: #26B7FF;
     font-size: 34px;
 }
 
-.center_day{
-    color:#26B7FF;
+.center_day {
+    color: #26B7FF;
     font-size: 34px;
 }
 
-.normal_day{
-    color:#808080;
-    font-size: 34px;
+.normal_day {
+    color: #808080;
+    font-size: 30px;
+}
+
+.streak_days {
+    font-size: 96px;
+    font-weight: bold;
 }

src/features/health/calendar.tsx

@@ -1,4 +1,4 @@
-import { View, Text } from "@tarojs/components";
+import { View, Text, Image } from "@tarojs/components";
 import './calendar.scss'
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
@@ -6,6 +6,8 @@ import { rpxToPx } from "@/utils/tools";
 import { streaks } from "@/services/health";
 import { useSelector } from "react-redux";
 import { getThemeColor } from "./hooks/health_hooks";
+import NewButton, { NewButtonType } from "@/_health/base/new_button";
+import { MainColorType } from "@/context/themes/color";
 
 export default function Calendar(props: { year: number, month: number }) {
     const weeks = ['日', '一', '二', '三', '四', '五', '六']
@@ -13,24 +15,28 @@ export default function Calendar(props: { year: number, month: number }) {
     const [spaces, setSpaces] = useState<any>([])
     const [days, setDays] = useState<any>([])
     const health = useSelector((state: any) => state.health);
+    const [year, setYear] = useState(props.year)
+    const [month, setMonth] = useState(props.month)
+    const [current, setCurrent] = useState<any>(null)
+    const [loaded,setLoaded] = useState(false)
 
     useEffect(() => {
         loadData()
-    }, [])
+    }, [month])
 
     function loadData() {
 
-        const firstDay = new Date(props.year, props.month - 1, 1);
+        const firstDay = new Date(year, month - 1, 1);
         const firstDayOfWeek = firstDay.getDay();
         const spaceCount = firstDayOfWeek > indexBeginWeek ? firstDayOfWeek - indexBeginWeek : firstDayOfWeek - indexBeginWeek + 7
         setSpaces(new Array(spaceCount).fill(''))
 
 
-        
+
 
 
         // 创建一个 Date 对象来获取该月的最后一天
-        const lastDay = new Date(props.year, props.month, 0); // 0 表示上一个月的最后一天
+        const lastDay = new Date(year, month, 0); // 0 表示上一个月的最后一天
         const totalDays = lastDay.getDate();
         var list: any = []
         for (var i = 1; i <= totalDays; i++) {
@@ -54,52 +60,83 @@ export default function Calendar(props: { year: number, month: number }) {
 
 
         streaks({
-            window:health.mode,
-            month:202409
-        }).then(res=>{
+            window: health.mode,
+            month: year + (month + '').padStart(2, '0')
+        }).then(res => {
             const array = (res as any).streaks
-            for (var i=0;i<list.length;i++){
+            for (var i = 0; i < list.length; i++) {
                 var obj = list[i]
-                var strMonth = props.month<10?'0'+props.month:props.month+''
-                var strDay = obj.day<10?'0'+obj.day:obj.day
+                var strMonth = month < 10 ? '0' + month : month + ''
+                var strDay = obj.day < 10 ? '0' + obj.day : obj.day
 
-                const d = parseInt(props.year+''+strMonth+strDay)
-                for (var j=0;j<array.length;j++){
+                const d = parseInt(year + '' + strMonth + strDay)
+                for (var j = 0; j < array.length; j++) {
                     const streak = array[j]
-                    if (d==streak.start_date && streak.start_date==streak.end_date){
+
+                    if (d == streak.start_date && streak.start_date == streak.end_date) {
                         obj.full = true
+                        obj.current = streak.is_current
+                        obj.showStreak = true;
                     }
-                    else if (d == streak.start_date && streak.start_date<streak.end_date){
+                    else if (d == streak.start_date && streak.start_date < streak.end_date) {
                         obj.begin = true
+                        obj.current = streak.is_current
+                        obj.showStreak = true;
                     }
-                    else if (d == streak.end_date && streak.start_date<streak.end_date){
+                    else if (d == streak.end_date && streak.start_date < streak.end_date) {
                         obj.right = true
+                        obj.current = streak.is_current
+                        obj.showStreak = true;
                     }
-                    else if (streak.start_date<d && d<streak.end_date){
+                    else if (streak.start_date < d && d < streak.end_date) {
                         obj.center = true
+                        obj.current = streak.is_current
+                        obj.showStreak = true;
                     }
                 }
+                obj.isToday = false
+                if (year == new Date().getFullYear() && month == new Date().getMonth() + 1 && obj.day == new Date().getDate()) {
+                    obj.isToday = true
+                }
             }
             setDays([...list])
+
+            setLoaded(true)
+            setCurrent((res as any).current)
             // console.log(list)
-        }).catch(e=>{
+        }).catch(e => {
 
         })
     }
 
     function itemClass(item) {
         if (item.begin) {
+            if (item.isToday) {
+                return 'left_calendar_item today_content'
+            }
             return 'left_calendar_item'
         }
         if (item.center) {
+            if (item.isToday) {
+                return 'center_calendar_item today_content'
+            }
             return 'center_calendar_item'
         }
         if (item.right) {
+            if (item.isToday) {
+                return 'right_calendar_item today_content'
+            }
             return 'right_calendar_item'
         }
         if (item.full) {
+            if (item.isToday) {
+                return 'full_calendar_item today_content'
+            }
             return 'full_calendar_item'
         }
+        if (item.isToday) {
+            return 'today1'
+        }
         return 'calendar_item'
     }
 
@@ -119,47 +156,124 @@ export default function Calendar(props: { year: number, month: number }) {
         return 'normal_day'
     }
 
-    function bgColor(item){
-        if (itemClass(item)=='calendar_item'){
+    function bgColor(item) {
+        if (item.showStreak && !item.current) {
+            return '#B2B2B21A'
+        }
+        if (itemClass(item) == 'calendar_item') {
             return 'transparent'
         }
-        return getThemeColor(health.mode)+'33'
+        if (itemClass(item) == 'today1') {
+
+            return '#000'
+        }
+        return getThemeColor(health.mode) + '33'
     }
 
-    function textColor(item){
-        if (itemTextClass(item)=='normal_day'){
-            return '#808080'
+    function textColor(item) {
+        // if (itemTextClass(item) == 'normal_day') {
+        //     return '#000000'
+        // }
+        if (item.isToday) {
+            if (item.begin || item.full || item.right || item.left) {
+                return '#000'
+            }
+            return '#ffffff'
         }
-        return getThemeColor(health.mode)
+        return '#000000'
+        // return getThemeColor(health.mode)
     }
 
-    return <View className="calendar_main">
-        <View className="calendar_header">{dayjs().format('YYYY年M月')}</View>
-        <View className="calendar_body">
-            <View className="calendar_weekly">
-                {
-                    weeks.map((item, index) => {
-                        return <View className="week_item" key={index}>{item}</View>
-                    })
-                }
+    function leftSpace(days){
+        if (days<10){
+            return rpxToPx(98)
+        }
+        else if (days<100){
+            return rpxToPx(71)
+        }
+        else if (days<1000){
+            return rpxToPx(54)
+        }
+    }
+
+    function content() {
+        return <View className="calendar_main2">
+            <View className="calendar_header">
+
+                <NewButton type={NewButtonType.img} onClick={() => {
+                    const date = new Date(year, month - 1); // month - 1 因为月份是从 0 开始
+                    date.setMonth(date.getMonth() - 1);
+                    setYear(date.getFullYear())
+                    setMonth(date.getMonth() + 1)
+                }}>
+                    <Image src={require('@assets/_health/pre.png')} style={{ width: rpxToPx(36), height: rpxToPx(36) }} />
+                </NewButton>
+                <Text style={{ width: rpxToPx(236), textAlign: 'center' }}>{`${year}年${month}月`}</Text>
+
+                <NewButton type={NewButtonType.img} onClick={() => {
+                    const date = new Date(year, month + 1); // month - 1 因为月份是从 0 开始
+                    date.setMonth(date.getMonth() - 1);
+                    setYear(date.getFullYear())
+                    setMonth(date.getMonth() + 1)
+                }}>
+                    <Image src={require('@assets/_health/next.png')} style={{ width: rpxToPx(36), height: rpxToPx(36) }} />
+                </NewButton>
             </View>
-            <View className="calendar_main">
-                {
-                    spaces.map((item, i) => {
-                        return <View className="calendar_item" style={{ width: rpxToPx(750) / 7 }} key={i * 10} />
-                    })
-                }
-                {
-                    days.map((item, index) => {
-                        return <View className={itemClass(item)} style={{ width: rpxToPx(750) / 7,backgroundColor:bgColor(item) }} key={index}>
-                            <Text className={itemTextClass(item)} style={{color:textColor(item)}}>{item.day}</Text>
-                        </View>
-                    })
-                }
+            <View className="calendar_body">
+                <View className="calendar_weekly">
+                    {
+                        weeks.map((item, index) => {
+                            return <View className="week_item" key={index}>{item}</View>
+                        })
+                    }
+                </View>
+                <View className="calendar_main3">
+                    {
+                        spaces.map((item, i) => {
+                            return <View className="calendar_item" style={{ width: rpxToPx(90) }} key={i * 10} />
+                        })
+                    }
+                    {
+                        days.map((item, index) => {
+                            return <View className={itemClass(item)} style={{ width: rpxToPx(90), backgroundColor: bgColor(item) }} key={index}>
+                                <Text className={itemTextClass(item)} style={{ color: textColor(item) }}>{item.day}</Text>
+                            </View>
+                        })
+                    }
+                </View>
+            </View>
+            <View className="calendar_footer">
+
             </View>
         </View>
-        <View className="calendar_footer">
+    }
 
+    function currentContent(){
+        return <View style={{display:'flex',flexDirection:'row',alignItems:'center',height:rpxToPx(208)}}>
+            {
+                loaded && <View style={{display:'flex',flexDirection:'row',alignItems:'center',height:rpxToPx(208)}}>
+                    <View className="streak_days" style={{color:getThemeColor(health.mode),
+                        marginLeft:leftSpace(current?current.days:0),
+                        marginRight:rpxToPx(36)
+                    }}>{current?current.days:'0'}</View>
+                    <View style={{display:'flex',flexDirection:'column',}}>
+                        <View className="h44 bold" style={{color:getThemeColor(health.mode)}}>{current.days==1?'Day':'Days'}</View>
+                        <View className="h24">Log your xxx daily to build a streak</View>
+                        <View className="h20" style={{color:MainColorType.g02,marginTop:rpxToPx(12)}}>Log your xxx daily to build a streak</View>
+                    </View>
+                </View>
+            }
         </View>
+    }
+
+    return <View className="calendar_main">
+        {
+            currentContent()
+        }
+        {
+            content()
+        }
     </View>
+
+
 }

src/pages/account/Profile.scss

@@ -124,6 +124,12 @@
     margin-top: 36px;
 }
 
+.member_cell{
+    width: 750px;
+    height: 172px;
+    box-sizing: border-box;
+}
+
 .profile_cell{
     height: 128px;
     display: flex;

src/pages/account/Profile.tsx

@@ -18,6 +18,7 @@ import TitleView from "@/features/trackTimeDuration/components/TitleView";
 import showAlert from "@/components/basic/Alert";
 import { kIsAndroid, kIsIOS, rpxToPx } from "@/utils/tools";
 import dayjs from "dayjs";
+import { MainColorType } from "@/context/themes/color";
 
 let useNavigation, SwitchRN;
 if (process.env.TARO_ENV == 'rn') {
@@ -174,13 +175,22 @@ export default function Page() {
     }
 
     function goSetting(e) {
-        console.log('apple')
+        if (!user.isLogin) {
+            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
+        }
         jumpPage('/pages/account/Setting', 'Setting', navigation)
         if (process.env.TARO_ENV == 'weapp' && e) {
             e.stopPropagation()
         }
     }
 
+    function goCalendar() {
+        if (!user.isLogin) {
+            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
+        }
+        jumpPage('/_health/pages/streak_calendar')
+    }
+
     usePullDownRefresh(() => {
         refresh()
     })
@@ -199,8 +209,9 @@ export default function Page() {
     }
 
     function headerView() {
-        return <TitleView title={t('page.more.title')} showAddBtn={false}>
-        </TitleView>
+        return <View />
+        // return <TitleView title={t('page.more.title')} showAddBtn={false}>
+        // </TitleView>
     }
 
     function memberdesc() {
@@ -258,21 +269,42 @@ export default function Page() {
     function detail() {
         return <View style={{ display: 'flex', flexDirection: 'column' }}>
 
-            <Box>
-                <View className="profile_card" onClick={tapProfile}>
-                    <View className="avatar" style={{
-                        opacity: user.isLogin ? 1 : 0.4,
-                        background: user.isLogin ? 'transparent' : '#fff'
-                    }}>
-                        {
-                            user.isLogin ? <Image src={user.avatar} className="avatar" mode="aspectFill" style={{
-                                background: user.isLogin ? 'transparent' : '#fff'
-                            }} /> : <Image src={require('@/assets/images/user.png')} className="avatar_placeholder" />
-                        }
+            <View className="profile_card" onClick={tapProfile}>
+                <View className="avatar" style={{
+                    opacity: user.isLogin ? 1 : 0.4,
+                    background: user.isLogin ? 'transparent' : '#fff'
+                }}>
+                    {
+                        user.isLogin ? <Image src={user.avatar} className="avatar" mode="aspectFill" style={{
+                            background: user.isLogin ? 'transparent' : '#fff'
+                        }} /> : <Image src={require('@/assets/images/user.png')} className="avatar_placeholder" />
+                    }
+                </View>
+                <Text className="h50 bold" style={{ color: user.isLogin ? '#000' : MainColorType.g02, marginTop: rpxToPx(24) }}>{user.isLogin ? user.nickname : t('page.more.un_login')}</Text>
+            </View>
+            <View style={{
+                display: 'flex', flexDirection: 'column',
+                width: rpxToPx(750),
+                alignItems: 'center'
+            }}
+                onClick={() => {
+                    if (!user.isLogin) {
+                        jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
+                    }
+                    else {
+                        jumpPage('/pages/store/product_list', 'ProductList', navigation)
+                    }
+                }}
+            >
+                <Image style={{ width: rpxToPx(228), height: rpxToPx(36), marginTop: rpxToPx(26) }} src={require('@assets/images/center_arrow.png')} />
+                <View className="profile_cell member_cell">
+                    <View style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                        <View className="h34 bold" style={{ color: MainColorType.blue, marginBottom: rpxToPx(12) }}>成为 Pro 会员</View>
+                        <View className="h24" style={{ color: MainColorType.g02 }}>{isMember() ? memberdesc() : '解锁会员专项功能'}</View>
                     </View>
-                    <Text className="nickname">{user.isLogin ? user.nickname : t('page.more.un_login')}</Text>
+                    <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
                 </View>
-            </Box>
+            </View>
 
             <View className="profile_cell profile_cell_space" onClick={goSetting}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
@@ -280,7 +312,7 @@ export default function Page() {
                 <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
             </View>
 
-            <View className="profile_cell profile_cell_space" onClick={()=>{
+            <View className="profile_cell profile_cell_space" onClick={() => {
                 jumpPage('/pages/account/Album')
             }}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
@@ -288,7 +320,7 @@ export default function Page() {
                 <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
                 <View className="profile_cell_line" />
             </View>
-            <View className="profile_cell" onClick={()=>{
+            <View className="profile_cell" onClick={() => {
                 jumpPage('/pages/account/Journal')
             }}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
@@ -296,7 +328,7 @@ export default function Page() {
                 <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
             </View>
 
-            <View className="profile_cell profile_cell_space" onClick={()=>{
+            <View className="profile_cell profile_cell_space" onClick={() => {
                 jumpPage("/_health/pages/schedules?mode=")
             }}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
@@ -304,7 +336,7 @@ export default function Page() {
                 <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
                 <View className="profile_cell_line" />
             </View>
-            <View className="profile_cell" onClick={goSetting}>
+            <View className="profile_cell" onClick={goCalendar}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
                 <Text style={{ flex: 1 }}>Calendar</Text>
                 <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />

src/pages/clock/ClockNew.tsx

@@ -1,4 +1,4 @@
-import { View, ScrollView, Swiper, SwiperItem } from "@tarojs/components";
+import { View, ScrollView, Swiper, SwiperItem,Image } from "@tarojs/components";
 import './Clock.scss'
 import { useEffect, useRef, useState } from "react";
 import MainDayNightCard from "@/features/health/MainDayNightCard";
@@ -20,6 +20,7 @@ import Calendar from "@/features/health/calendar";
 import { MainColorType } from "@/context/themes/color";
 import NewButton, { NewButtonType } from "@/_health/base/new_button";
 import { getThemeColor } from "@/features/health/hooks/health_hooks";
+import StatusIndicator, { StatusType } from "@/_health/base/status_indicator";
 
 export default function ClockNew() {
     const [count, setCount] = useState(0)
@@ -28,7 +29,7 @@ export default function ClockNew() {
     const health = useSelector((state: any) => state.health);
     const [type, setType] = useState(WindowType.day)
     const [showCalendar, setShowCalendar] = useState(false)
-    const [isPulling,setIsPulling] = useState(false)
+    const [isPulling, setIsPulling] = useState(false)
     const healthRef = useRef(health)
     const dispatch = useDispatch();
     global.dispatch = dispatch;
@@ -159,23 +160,33 @@ export default function ClockNew() {
         if (!health.windows) {
             return <View />
         }
-        return <ScrollView style='height:100vh' 
-        refresherEnabled
-        refresherBackground={MainColorType.g05}
-        onRefresherRefresh={()=>{
-            global.refreshWindow()
-            setIsPulling(true)
-        }}
-        refresherTriggered={isPulling}
-        scrollY onScroll={e => {
-            if (e.detail.scrollTop > 240) {
-                dispatch(setTitle(health.mode))
-            }
-            else {
-                dispatch(setTitle(''))
-            }
-        }}>
+        return <ScrollView style='height:100vh'
+            refresherEnabled
+            refresherBackground={MainColorType.g05}
+            onRefresherRefresh={() => {
+                global.refreshWindow()
+                setIsPulling(true)
+            }}
+            refresherTriggered={isPulling}
+            scrollY onScroll={e => {
+                if (e.detail.scrollTop > 240) {
+                    dispatch(setTitle(health.mode))
+                }
+                else {
+                    dispatch(setTitle(''))
+                }
+            }}>
             <MainSwiper count={count} pageChanged={pageChanged} typeChanged={typeChanged} />
+            {/* <StatusIndicator type={StatusType.normal} color={MainColorType.fast} />
+            <StatusIndicator type={StatusType.normal} color={MainColorType.fast} text="hello world" />
+            <StatusIndicator type={StatusType.ing} color={MainColorType.fast} />
+            <StatusIndicator type={StatusType.ing} color={MainColorType.fast} text="hello world" />
+            <StatusIndicator type={StatusType.img} color={MainColorType.fast}>
+                <Image style={{ width: rpxToPx(20), height: rpxToPx(20) }} src={require('@assets/_health/checked.png')} />
+            </StatusIndicator>
+            <StatusIndicator type={StatusType.img} color={MainColorType.fast}  text="hello world">
+                <Image style={{ width: rpxToPx(20), height: rpxToPx(20) }} src={require('@assets/_health/checked.png')} />
+            </StatusIndicator> */}
             <MainConsole type={type} />
 
             <MainHistory />

src/pages/store/product_list.config.ts

@@ -3,5 +3,6 @@ export default definePageConfig({
         // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
         // 'demo':'../../components/demo'
     },
-    "navigationBarTitleText": "选择会员计划"
+    "navigationBarTitleText": "选择会员计划",
+    "navigationBarBackgroundColor":"#f5f5f5"
 })

src/pages/store/product_list.scss

@@ -4,7 +4,7 @@
     margin-bottom: 20px;
     margin-left: 46px;
     margin-right: 46px;
-    background-color: #1C1C1C;
+    background-color: #ffffff;
     border-radius: 24px;
     padding-left: 40px;
     padding-right: 40px;
@@ -21,7 +21,7 @@
 .product_desc {}
 
 .product_price {
-    color: #fff;
+    color: #000;
     font-size: 36px;
     font-weight: bold;
 }
@@ -77,14 +77,14 @@
 .seg_sel{
     margin-right: 40px;
     font-size: 48px;
-    color: #fff;
+    color: #000;
     font-weight: bold;
 }
 
 .seg_nor{
     margin-right: 40px;
     font-size: 40px;
-    color: #fff;
+    color: #000;
     opacity: 0.4;
     font-weight: bold;
 }

src/pages/store/product_list.tsx

@@ -4,7 +4,7 @@ import { View, Text, Image, ScrollView } from "@tarojs/components";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import './product_list.scss'
-import { ColorType } from "@/context/themes/color";
+import { ColorType, MainColorType } from "@/context/themes/color";
 import { order, orderCheck, payInfo, products, userAccess } from "@/services/user";
 import Taro from "@tarojs/taro";
 import { useTranslation } from "react-i18next";
@@ -261,11 +261,11 @@ export default function ProductList() {
             {
                 segmentIndex == 0 && packages.map((item, index) => {
                     return <View className="product_item" key={index} onClick={() => process.env.TARO_ENV == 'weapp' ? createOrder(item) : pay(item)}>
-                        <Text className="product_title" style={{ color: ColorType.fast }}>{process.env.TARO_ENV == 'weapp' ? (item as any).display_name : (item as any).product.title}</Text>
-                        <Text style={{ color: '#fff', fontSize: 16, marginTop: 5, marginBottom: 5 }}>{process.env.TARO_ENV == 'weapp' ? (item as any).description : (item as any).product.description}</Text>
+                        <Text className="product_title" style={{ color: MainColorType.blue }}>{process.env.TARO_ENV == 'weapp' ? (item as any).display_name : (item as any).product.title}</Text>
+                        <Text style={{ color: '#000', fontSize: 16, marginTop: 5, marginBottom: 5 }}>{process.env.TARO_ENV == 'weapp' ? (item as any).description : (item as any).product.description}</Text>
                         <View style={{ flexDirection: 'row', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                             <Text className="product_price">{process.env.TARO_ENV == 'weapp' ? '￥' + (item as any).price : (item as any).product.priceString}</Text>
-                            <Image style={{ width: 24, height: 24 }} src={require('@/assets/images/arrow3.png')} />
+                            <Image style={{ width: 24, height: 24 }} src={require('@/assets/_health/cell_arrow.png')} />
                         </View>
 
                     </View>
@@ -274,11 +274,11 @@ export default function ProductList() {
             {
                 segmentIndex == 1 && packages2.map((item, index) => {
                     return <View className="product_item" key={index} onClick={() => process.env.TARO_ENV == 'weapp' ? createOrder(item) : pay(item)}>
-                        <Text className="product_title" style={{ color: ColorType.fast }}>{process.env.TARO_ENV == 'weapp' ? (item as any).display_name : (item as any).product.title}</Text>
-                        <Text style={{ color: '#fff', fontSize: 16, marginTop: 5, marginBottom: 5 }}>{process.env.TARO_ENV == 'weapp' ? (item as any).description : (item as any).product.description}</Text>
+                        <Text className="product_title" style={{ color: MainColorType.blue }}>{process.env.TARO_ENV == 'weapp' ? (item as any).display_name : (item as any).product.title}</Text>
+                        <Text style={{ color: '#000', fontSize: 16, marginTop: 5, marginBottom: 5 }}>{process.env.TARO_ENV == 'weapp' ? (item as any).description : (item as any).product.description}</Text>
                         <View style={{ flexDirection: 'row', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                             <Text className="product_price">{process.env.TARO_ENV == 'weapp' ? '￥' + (item as any).price : (item as any).product.priceString}</Text>
-                            <Image style={{ width: 24, height: 24 }} src={require('@/assets/images/arrow3.png')} />
+                            <Image style={{ width: 24, height: 24 }} src={require('@/assets/_health/cell_arrow.png')} />
                         </View>
 
                     </View>