|
|
@@ -14,6 +14,9 @@ import { TimeFormatter } from "@/utils/time_format";
|
|
|
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
|
|
|
import { rpxToPx } from "@/utils/tools";
|
|
|
import { IconMore } from "@/components/basic/Icons";
|
|
|
+import NewHeader, { NewHeaderType } from "../components/new_header";
|
|
|
+import NewButton, { NewButtonType } from "../base/new_button";
|
|
|
+import { MainColorType } from "@/context/themes/color";
|
|
|
|
|
|
let timer
|
|
|
export default function Move() {
|
|
|
@@ -178,7 +181,7 @@ export default function Move() {
|
|
|
// })
|
|
|
// console.log(res)
|
|
|
// console.log('move result')
|
|
|
- jumpPage('./post_result?data='+JSON.stringify((res as any).post_result))
|
|
|
+ jumpPage('./post_result?data=' + JSON.stringify((res as any).post_result))
|
|
|
getMovesCurrent()
|
|
|
getMovesHistory()
|
|
|
})
|
|
|
@@ -291,11 +294,15 @@ export default function Move() {
|
|
|
end = (end + '').padStart(2, '0')
|
|
|
return <View className="current_history_item">
|
|
|
<View style={{ display: 'flex', flexDirection: 'column' }}>
|
|
|
- <Text className="current_item_period">{start}:00-{end}:00</Text>
|
|
|
+ <Text className="h24" style={{ color: MainColorType.g02, lineHeight: rpxToPx(36) + 'px' }}>{start}:00-{end}:00</Text>
|
|
|
{
|
|
|
item.is_extra && <Text style={{ color: getThemeColor('SLEEP') }}>is Extra</Text>
|
|
|
}
|
|
|
- <Text>{item.real_steps}/{item.target_steps}</Text>
|
|
|
+ <Text className="h24 bold"><Text className="h34 bold">{item.real_steps}</Text> / {item.target_steps} steps</Text>
|
|
|
+ <View style={{
|
|
|
+ height: rpxToPx(18), flexShrink: 0,
|
|
|
+
|
|
|
+ }} />
|
|
|
</View>
|
|
|
|
|
|
{
|
|
|
@@ -317,7 +324,7 @@ export default function Move() {
|
|
|
|
|
|
return <View className="summary">
|
|
|
<View className="summary_header">
|
|
|
- <Text>Last {hours.length} Hour{hours.length == 1 ? '' : 's'}</Text>
|
|
|
+ <Text className="h34 bold">Last {hours.length} Hour{hours.length == 1 ? '' : 's'}</Text>
|
|
|
{/* <Image className="arrow_hide"
|
|
|
onClick={() => {
|
|
|
setHideCurrentRecent(!hideCurrentRecent)
|
|
|
@@ -341,9 +348,20 @@ export default function Move() {
|
|
|
}
|
|
|
{
|
|
|
hours.length > 3 && <View className="recent_btn_bg">
|
|
|
- {
|
|
|
+ {/* {
|
|
|
moreActive ? <View className="recent_btn" onClick={() => setMoreActive(false)}>收起</View> : <View className="recent_btn" onClick={() => setMoreActive(true)}>展开剩余{hours.length - 3}条</View>
|
|
|
- }
|
|
|
+ } */}
|
|
|
+ <View style={{ height: rpxToPx(68), minWidth: rpxToPx(200), display: 'flex' }}>
|
|
|
+ <NewButton
|
|
|
+ onClick={() => {
|
|
|
+ setMoreActive(!moreActive)
|
|
|
+ }}
|
|
|
+ type={NewButtonType.link}
|
|
|
+ fontSize={rpxToPx(24)}
|
|
|
+ title={moreActive ? '收起' : `展开剩余${hours.length - 3}条`}
|
|
|
+ btnStyle={{ minWidth: rpxToPx(170) }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
<View className="border_footer_line" />
|
|
|
</View>
|
|
|
}
|
|
|
@@ -394,10 +412,10 @@ export default function Move() {
|
|
|
target.setSeconds(0)
|
|
|
target.setMilliseconds(0)
|
|
|
var timestamp = target.getTime()
|
|
|
- if (now.getTime()>timestamp){
|
|
|
- timestamp += 24*3600*1000
|
|
|
+ if (now.getTime() > timestamp) {
|
|
|
+ timestamp += 24 * 3600 * 1000
|
|
|
}
|
|
|
- return <Text className="console_footer">{formatTimeInterval(new Date().getTime(),timestamp)}</Text>
|
|
|
+ return <Text className="console_footer">{formatTimeInterval(new Date().getTime(), timestamp)}</Text>
|
|
|
}
|
|
|
if (getStatus() == 'open') {
|
|
|
if (new Date().getMinutes() < 10) {
|
|
|
@@ -481,7 +499,7 @@ export default function Move() {
|
|
|
function becomeTime() {
|
|
|
var hour = new Date().getHours()
|
|
|
var tHour = parseInt(getDuration().substring(0, 2))
|
|
|
- if (isExtra()){
|
|
|
+ if (isExtra()) {
|
|
|
tHour = data.hours[0].hour
|
|
|
}
|
|
|
if (hour > tHour) {
|
|
|
@@ -493,7 +511,7 @@ export default function Move() {
|
|
|
function consolePanel() {
|
|
|
|
|
|
if (!allowRun) {
|
|
|
- return <View className="move_console">
|
|
|
+ return <View className="move_console move_console_auth">
|
|
|
<Text className="console_duration" style={{ color: '#000', fontSize: rpxToPx(34) }}>你还没有开启步数授权</Text>
|
|
|
<Text className="console_open_tip">体验Move More需要您开启微信运动授权,点击下方按钮进行授权</Text>
|
|
|
<View className="console_checkbtn"
|
|
|
@@ -503,45 +521,78 @@ export default function Move() {
|
|
|
}
|
|
|
|
|
|
return <View className="move_console">
|
|
|
- {/* <View className="summary_status_bg">
|
|
|
- <View className="summary_status_point" style={{ backgroundColor: isExtra() ? getThemeColor('SLEEP') : getThemeColor('ACTIVE') }} />
|
|
|
- <Text className="summary_status_text">{isExtra() ? 'SLEEP HOUR ' : 'WAKING HOUR '}{hourIndex()}</Text>
|
|
|
- </View> */}
|
|
|
+ <View style={{ flex: 1 }} />
|
|
|
{hourIndex()}
|
|
|
- <Text className="console_duration">{getDuration()}</Text>
|
|
|
- <Text className="console_desc" style={{
|
|
|
+ <Text className={isExtra() ? 'h24' : '34'} style={{
|
|
|
+ color: MainColorType.g01,
|
|
|
+ lineHeight: isExtra() ? rpxToPx(28) + 'px' : rpxToPx(42) + 'px'
|
|
|
+ }}>{getDuration()}</Text>
|
|
|
+ <View style={{ height: rpxToPx(12) }} />
|
|
|
+ <Text className={isExtra() ? 'bold h50' : 'bold h34'} style={{
|
|
|
color: isExtra() ? getThemeColor('SLEEP') : getThemeColor('ACTIVE'),
|
|
|
- fontSize: isExtra() ? rpxToPx(48) : rpxToPx(34)
|
|
|
+ lineHeight: isExtra() ? rpxToPx(60) + 'px' : rpxToPx(42) + 'px'
|
|
|
}}>{
|
|
|
isExtra() ? 'Sleep well.' : getStatus() == 'open' ? `Think you've hit ${getCurrentTarget()} steps this hour?` : `Hit ${getCurrentTarget()} steps within the hour`
|
|
|
}</Text>
|
|
|
+ <View style={{ height: rpxToPx(48), }} />
|
|
|
+
|
|
|
{
|
|
|
- isExtra() ?<View className="console_checkbtn">{becomeTime()}</View>:getStatus() == 'open' ? <View className="console_checkbtn"
|
|
|
- onClick={tapLog}
|
|
|
- style={{ color: '#fff', backgroundColor: getThemeColor('ACTIVE') }}>I Think So!</View> :
|
|
|
- <View className="console_checkbtn" onClick={tapLog}>{becomeTime()}</View>
|
|
|
+ isExtra() ? <NewButton type={NewButtonType.gray}
|
|
|
+ width={rpxToPx(502)}
|
|
|
+ height={rpxToPx(96)}
|
|
|
+ fontSize={rpxToPx(26)}
|
|
|
+ bold
|
|
|
+ // disable
|
|
|
+ title={becomeTime()}
|
|
|
+ /> : getStatus() == 'open' ?
|
|
|
+ <NewButton type={NewButtonType.fill}
|
|
|
+ onClick={tapLog}
|
|
|
+ width={rpxToPx(502)}
|
|
|
+ height={rpxToPx(96)}
|
|
|
+ fontSize={rpxToPx(26)}
|
|
|
+ title="I Think So!"
|
|
|
+ bold
|
|
|
+ color={getThemeColor('ACTIVE')}
|
|
|
+ />
|
|
|
+ :
|
|
|
+ <NewButton type={NewButtonType.gray}
|
|
|
+ onClick={tapLog}
|
|
|
+ width={rpxToPx(502)}
|
|
|
+ height={rpxToPx(96)}
|
|
|
+ fontSize={rpxToPx(26)}
|
|
|
+ bold
|
|
|
+ // disable
|
|
|
+ title={becomeTime()}
|
|
|
+ />
|
|
|
+ // <View className="console_checkbtn" onClick={tapLog}>{becomeTime()}</View>
|
|
|
}
|
|
|
{
|
|
|
consoleFooter()
|
|
|
}
|
|
|
+ <View style={{ height: rpxToPx(48) }} />
|
|
|
|
|
|
|
|
|
</View>
|
|
|
}
|
|
|
|
|
|
+ function toolBtnText() {
|
|
|
+ return `Upcoming (${data.hours.length - hours.length > 0 ? data.hours.length - hours.length : ''})`
|
|
|
+ }
|
|
|
+
|
|
|
function tools() {
|
|
|
return <View className="tools">
|
|
|
- <View className="upcoming" onClick={() => {
|
|
|
- jumpPage(`/_health/pages/move_schedule?hours=${JSON.stringify(data.hours)}`)
|
|
|
- }}>
|
|
|
+ <View style={{ width: rpxToPx(74) }} />
|
|
|
+ <NewButton type={NewButtonType.link}
|
|
|
+ title={toolBtnText()}
|
|
|
+ onClick={() => {
|
|
|
+ jumpPage(`/_health/pages/move_schedule?hours=${JSON.stringify(data.hours)}`)
|
|
|
+ }}
|
|
|
+ >
|
|
|
<Image className="calendar" src={require('@assets/_health/calendar.png')} />
|
|
|
- <Text>Upcoming{data.hours.length - hours.length > 0 ? `(${data.hours.length - hours.length})` : ''}</Text>
|
|
|
- </View>
|
|
|
- <View className="more" onClick={() => {
|
|
|
+ </NewButton>
|
|
|
+ <NewButton type={NewButtonType.more} onClick={() => {
|
|
|
jumpPage('./move_setting_time')
|
|
|
- }}>
|
|
|
- <IconMore width={17} color="#b2b2b2" />
|
|
|
- </View>
|
|
|
+ }} />
|
|
|
</View>
|
|
|
}
|
|
|
|
|
|
@@ -549,7 +600,7 @@ export default function Move() {
|
|
|
return <View className="move_summary">
|
|
|
|
|
|
<View className="summary_header">
|
|
|
- <Text>Summary</Text>
|
|
|
+ <Text className="h34 bold">Summary</Text>
|
|
|
<View style={{ flex: 1 }} />
|
|
|
{
|
|
|
data.last_updated && <Text style={{ color: '#b2b2b2', fontSize: 10, fontWeight: 'normal' }}>最近更新于 {dayjs(data.last_updated).format('HH:mm')}</Text>
|
|
|
@@ -561,29 +612,29 @@ export default function Move() {
|
|
|
<View className="summary_footer">
|
|
|
<View className="summary_footer_item">
|
|
|
<Text className="light_desc">Hours Sedentary</Text>
|
|
|
- <Text>{data.stat.sedentary_hours}/{data.stat.waking_hours}</Text>
|
|
|
+ <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.sedentary_hours}</Text> / {data.stat.waking_hours}</Text>
|
|
|
</View>
|
|
|
<View className="summary_footer_item">
|
|
|
<Text className="light_desc">Hours Active</Text>
|
|
|
- <Text style={{ color: getThemeColor('ACTIVE') }}>{data.stat.active_hours}/{data.stat.waking_hours}</Text>
|
|
|
+ <Text style={{ color: getThemeColor('ACTIVE'), fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.active_hours}</Text> / {data.stat.waking_hours}</Text>
|
|
|
</View>
|
|
|
<View className="summary_footer_item">
|
|
|
<Text className="light_desc">Hours Missed</Text>
|
|
|
- <Text>{data.stat.missed_hours}/{data.stat.waking_hours}</Text>
|
|
|
+ <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.missed_hours}</Text> / {data.stat.waking_hours}</Text>
|
|
|
</View>
|
|
|
</View>
|
|
|
<View className="summary_footer" style={{ marginTop: rpxToPx(48) }}>
|
|
|
<View className="summary_footer_item">
|
|
|
<Text className="light_desc">Total Steps</Text>
|
|
|
- <Text>{data.stat.real_steps}/{data.stat.target_steps}</Text>
|
|
|
+ <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.real_steps}</Text> / {data.stat.target_steps}</Text>
|
|
|
</View>
|
|
|
<View className="summary_footer_item">
|
|
|
<Text className="light_desc">Total Calories</Text>
|
|
|
- <Text>{data.stat.real_calories}/{data.stat.target_calories}</Text>
|
|
|
+ <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.real_calories}</Text> / {data.stat.target_calories}</Text>
|
|
|
</View>
|
|
|
<View className="summary_footer_item">
|
|
|
<Text className="light_desc">Total Distance</Text>
|
|
|
- <Text>{data.stat.real_distance}/{data.stat.target_distance}</Text>
|
|
|
+ <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.real_distance}</Text> / {data.stat.target_distance}</Text>
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
@@ -592,13 +643,13 @@ export default function Move() {
|
|
|
}
|
|
|
|
|
|
function goDetail(item) {
|
|
|
- jumpPage('./move_detail?id='+item.id)
|
|
|
+ jumpPage('./move_detail?id=' + item.id)
|
|
|
}
|
|
|
|
|
|
if (!loaded || !loadAuth) return <View />
|
|
|
|
|
|
return <View style={{ display: 'flex', flexDirection: 'column' }}>
|
|
|
- <Text className="move-title">Move Every Hour</Text>
|
|
|
+ <NewHeader type={NewHeaderType.left} title="Move Every Hour" />
|
|
|
{
|
|
|
consolePanel()
|
|
|
}
|
|
|
@@ -615,7 +666,7 @@ export default function Move() {
|
|
|
{
|
|
|
list.length > 0 && <View className="history">
|
|
|
<View className="history_header">
|
|
|
- <Text className="history_header_title">Recent</Text>
|
|
|
+ <Text className="h34 bold">Recent</Text>
|
|
|
<View className="border_footer_line" />
|
|
|
</View>
|
|
|
{
|
|
|
@@ -624,7 +675,7 @@ export default function Move() {
|
|
|
<Text className="history_item_date">{(item.date + '').substring(6, 8)}</Text>
|
|
|
<View className="history_item_detail_bg">
|
|
|
<Image className="history_item_detail_icon" src={require('@assets/_health/walk.png')} />
|
|
|
- <Text style={{fontSize:rpxToPx(26)}}> Hours Active {item.active_hours} · Total Steps {item.stat.real_steps}</Text>
|
|
|
+ <Text style={{ fontSize: rpxToPx(26) }}> Hours Active {item.active_hours} · Total Steps {item.stat.real_steps}</Text>
|
|
|
</View>
|
|
|
<View className="border_footer_line" />
|
|
|
</View>
|