|
@@ -22,6 +22,7 @@ import { useTranslation } from "react-i18next";
|
|
|
import FollowInfo from "@/_moment/components/follow_info";
|
|
import FollowInfo from "@/_moment/components/follow_info";
|
|
|
|
|
|
|
|
import MomentDetailShare from "@/pages/moment/moment_detail_share";
|
|
import MomentDetailShare from "@/pages/moment/moment_detail_share";
|
|
|
|
|
+import { BASE_IMG_URL } from "@/services/http/api";
|
|
|
|
|
|
|
|
|
|
|
|
|
let timer
|
|
let timer
|
|
@@ -65,6 +66,7 @@ export default function TimeRecord() {
|
|
|
const [postError, setPostError] = useState('')
|
|
const [postError, setPostError] = useState('')
|
|
|
|
|
|
|
|
const [pickerTitle, setPickerTitle] = useState('')
|
|
const [pickerTitle, setPickerTitle] = useState('')
|
|
|
|
|
+ const [themeColor, setThemeColor] = useState(MainColorType.orange)
|
|
|
|
|
|
|
|
const { t } = useTranslation()
|
|
const { t } = useTranslation()
|
|
|
|
|
|
|
@@ -138,12 +140,13 @@ export default function TimeRecord() {
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
- const { events } = record
|
|
|
|
|
- events.map((item) => {
|
|
|
|
|
|
|
+ const { list } = record
|
|
|
|
|
+ list.map((item) => {
|
|
|
if (item.scenario == scenario) {
|
|
if (item.scenario == scenario) {
|
|
|
- setInfo(item)
|
|
|
|
|
- setStatus(item.status)
|
|
|
|
|
|
|
+ setInfo(item.event)
|
|
|
|
|
+ setStatus(item.event.status)
|
|
|
setLoaded(true)
|
|
setLoaded(true)
|
|
|
|
|
+ setThemeColor(item.theme_color)
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
downloadFile()
|
|
downloadFile()
|
|
@@ -159,10 +162,23 @@ export default function TimeRecord() {
|
|
|
|
|
|
|
|
function downloadFile() {
|
|
function downloadFile() {
|
|
|
Taro.downloadFile({
|
|
Taro.downloadFile({
|
|
|
- url: 'https://background-pictures.oss-cn-beijing.aliyuncs.com/inapp/checkmark.png',
|
|
|
|
|
|
|
+ url: BASE_IMG_URL + 'cp_check_f.png',
|
|
|
success: (res) => {
|
|
success: (res) => {
|
|
|
if (res.statusCode === 200) {
|
|
if (res.statusCode === 200) {
|
|
|
- global.checkImg = res.tempFilePath
|
|
|
|
|
|
|
+ global.checkFastImg = res.tempFilePath
|
|
|
|
|
+
|
|
|
|
|
+ } else {
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ fail: (err) => {
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ Taro.downloadFile({
|
|
|
|
|
+ url: BASE_IMG_URL + 'cp_check_s.png',
|
|
|
|
|
+ success: (res) => {
|
|
|
|
|
+ if (res.statusCode === 200) {
|
|
|
|
|
+ global.checkSleepImg = res.tempFilePath
|
|
|
|
|
|
|
|
} else {
|
|
} else {
|
|
|
}
|
|
}
|
|
@@ -345,7 +361,7 @@ export default function TimeRecord() {
|
|
|
return {
|
|
return {
|
|
|
value: '',
|
|
value: '',
|
|
|
footer: '',
|
|
footer: '',
|
|
|
- color: MainColorType.orange,
|
|
|
|
|
|
|
+ color: themeColor,
|
|
|
result: TimeFormatter.formateDurationBySeconds(info.time.end_timestamp / 1000 - info.time.start_timestamp / 1000),
|
|
result: TimeFormatter.formateDurationBySeconds(info.time.end_timestamp / 1000 - info.time.start_timestamp / 1000),
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -356,7 +372,7 @@ export default function TimeRecord() {
|
|
|
return {
|
|
return {
|
|
|
target: str,
|
|
target: str,
|
|
|
goal: t('health.adjust_goal'),
|
|
goal: t('health.adjust_goal'),
|
|
|
- color: MainColorType.orange
|
|
|
|
|
|
|
+ color: themeColor
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
var percent = 100 * (new Date().getTime() - info.time.start_timestamp) / info.time.duration
|
|
var percent = 100 * (new Date().getTime() - info.time.start_timestamp) / info.time.duration
|
|
@@ -416,7 +432,7 @@ export default function TimeRecord() {
|
|
|
</View>
|
|
</View>
|
|
|
|
|
|
|
|
</View>
|
|
</View>
|
|
|
- <View className="share_card2" style={{ background: MainColorType.orange, marginTop: rpxToPx(26) + navigationBarHeight }}>
|
|
|
|
|
|
|
+ <View className="share_card2" style={{ background: themeColor, marginTop: rpxToPx(26) + navigationBarHeight }}>
|
|
|
{/* {
|
|
{/* {
|
|
|
shareUrl.length > 0 ? <Image src={shareUrl} style={{ width: rpxToPx(900), height: rpxToPx(720) }} /> :
|
|
shareUrl.length > 0 ? <Image src={shareUrl} style={{ width: rpxToPx(900), height: rpxToPx(720) }} /> :
|
|
|
<View style={{ width: rpxToPx(900), height: rpxToPx(720), backgroundColor: MainColorType.g02 }} />
|
|
<View style={{ width: rpxToPx(900), height: rpxToPx(720), backgroundColor: MainColorType.g02 }} />
|
|
@@ -430,13 +446,14 @@ export default function TimeRecord() {
|
|
|
width: rpxToPx(88)
|
|
width: rpxToPx(88)
|
|
|
}}
|
|
}}
|
|
|
real={{
|
|
real={{
|
|
|
- color: MainColorType.orange,
|
|
|
|
|
|
|
+ color: themeColor,
|
|
|
width: rpxToPx(16),
|
|
width: rpxToPx(16),
|
|
|
start: getStartArc(info.time.start_timestamp),
|
|
start: getStartArc(info.time.start_timestamp),
|
|
|
duration: getDurationArc(info.time.start_timestamp, info.time.end_timestamp)
|
|
duration: getDurationArc(info.time.start_timestamp, info.time.end_timestamp)
|
|
|
}}
|
|
}}
|
|
|
extra={ringExtra()}
|
|
extra={ringExtra()}
|
|
|
- shareBg={[MainColorType.orange]}
|
|
|
|
|
|
|
+ shareBg={[themeColor]}
|
|
|
|
|
+ checkImgUrl={scenario == 'FAST' ? global.checkFastImg : global.checkSleepImg}
|
|
|
isCompleted
|
|
isCompleted
|
|
|
shareCover={
|
|
shareCover={
|
|
|
url => {
|
|
url => {
|
|
@@ -622,7 +639,7 @@ export default function TimeRecord() {
|
|
|
duration: status == 'WFS' ? getDurationArc(new Date().getTime(), new Date().getTime() + info.time.duration) : getDurationArc(info.time.start_timestamp, info.time.start_timestamp + info.time.duration)
|
|
duration: status == 'WFS' ? getDurationArc(new Date().getTime(), new Date().getTime() + info.time.duration) : getDurationArc(info.time.start_timestamp, info.time.start_timestamp + info.time.duration)
|
|
|
}}
|
|
}}
|
|
|
real={status == 'WFS' ? null : {
|
|
real={status == 'WFS' ? null : {
|
|
|
- color: MainColorType.orange,
|
|
|
|
|
|
|
+ color: themeColor,
|
|
|
width: rpxToPx(88),
|
|
width: rpxToPx(88),
|
|
|
start: getStartArc(info.time.start_timestamp),
|
|
start: getStartArc(info.time.start_timestamp),
|
|
|
duration: getDurationArc(info.time.start_timestamp, new Date().getTime())
|
|
duration: getDurationArc(info.time.start_timestamp, new Date().getTime())
|
|
@@ -630,7 +647,7 @@ export default function TimeRecord() {
|
|
|
extra={ringExtra()}
|
|
extra={ringExtra()}
|
|
|
/>
|
|
/>
|
|
|
</View>
|
|
</View>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
{
|
|
{
|
|
|
status == 'OG' && <View className="operate_content" style={{ marginTop: -rpxToPx(20) }}>
|
|
status == 'OG' && <View className="operate_content" style={{ marginTop: -rpxToPx(20) }}>
|
|
|
<NewButton type={NewButtonType.custom} onClick={() => {
|
|
<NewButton type={NewButtonType.custom} onClick={() => {
|
|
@@ -640,7 +657,7 @@ export default function TimeRecord() {
|
|
|
<View className={showHighlight ? 'card_highlight start_card_show' : ''} />
|
|
<View className={showHighlight ? 'card_highlight start_card_show' : ''} />
|
|
|
<View className="black_50 h24">{scenario == 'FAST' ? t('health.started') : t('health.bedtime1')}</View>
|
|
<View className="black_50 h24">{scenario == 'FAST' ? t('health.started') : t('health.bedtime1')}</View>
|
|
|
<View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.abbrTimestampFormat(info.time.start_timestamp)}</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 }}>{scenario == 'FAST' ? t('health.adjust_start') : t('health.adjust_bedtime')}</View>
|
|
|
|
|
|
|
+ <View className="h30 bold" style={{ color: themeColor }}>{scenario == 'FAST' ? t('health.adjust_start') : t('health.adjust_bedtime')}</View>
|
|
|
</View>
|
|
</View>
|
|
|
</NewButton>
|
|
</NewButton>
|
|
|
<NewButton type={NewButtonType.custom} onClick={() => {
|
|
<NewButton type={NewButtonType.custom} onClick={() => {
|
|
@@ -649,7 +666,7 @@ export default function TimeRecord() {
|
|
|
<View className="operate_item">
|
|
<View className="operate_item">
|
|
|
<View className="black_50 h24">{t('health.time_goal', { time: TimeFormatter.formateDurationBySeconds(info.time.duration / 1000) })}</View>
|
|
<View className="black_50 h24">{t('health.time_goal', { time: TimeFormatter.formateDurationBySeconds(info.time.duration / 1000) })}</View>
|
|
|
<View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.abbrTimestampFormat(info.time.target_end_timestamp)}</View>
|
|
<View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.abbrTimestampFormat(info.time.target_end_timestamp)}</View>
|
|
|
- <View className="h30 bold" style={{ color: MainColorType.orange }}>{t('health.adjust_goal')}</View>
|
|
|
|
|
|
|
+ <View className="h30 bold" style={{ color: themeColor }}>{t('health.adjust_goal')}</View>
|
|
|
</View>
|
|
</View>
|
|
|
</NewButton>
|
|
</NewButton>
|
|
|
</View>
|
|
</View>
|
|
@@ -660,7 +677,7 @@ export default function TimeRecord() {
|
|
|
title={scenario == 'FAST' ? record.actions.FAST_START : record.actions.SLEEP_BEDTIME}
|
|
title={scenario == 'FAST' ? record.actions.FAST_START : record.actions.SLEEP_BEDTIME}
|
|
|
width={rpxToPx(490)}
|
|
width={rpxToPx(490)}
|
|
|
height={rpxToPx(108)}
|
|
height={rpxToPx(108)}
|
|
|
- color={MainColorType.orange}
|
|
|
|
|
|
|
+ color={themeColor}
|
|
|
onClick={start}
|
|
onClick={start}
|
|
|
/>
|
|
/>
|
|
|
}
|
|
}
|
|
@@ -671,7 +688,7 @@ export default function TimeRecord() {
|
|
|
title={scenario == 'FAST' ? record.actions.FAST_END : record.actions.SLEEP_WAKE_UP}
|
|
title={scenario == 'FAST' ? record.actions.FAST_END : record.actions.SLEEP_WAKE_UP}
|
|
|
width={rpxToPx(490)}
|
|
width={rpxToPx(490)}
|
|
|
height={rpxToPx(108)}
|
|
height={rpxToPx(108)}
|
|
|
- color={MainColorType.orange}
|
|
|
|
|
|
|
+ color={themeColor}
|
|
|
onClick={end}
|
|
onClick={end}
|
|
|
/>
|
|
/>
|
|
|
{/* <NewButton
|
|
{/* <NewButton
|
|
@@ -775,7 +792,7 @@ export default function TimeRecord() {
|
|
|
duration: status == 'WFS' ? getDurationArc(new Date().getTime(), new Date().getTime() + info.time.duration) : getDurationArc(info.time.start_timestamp, info.time.start_timestamp + info.time.duration)
|
|
duration: status == 'WFS' ? getDurationArc(new Date().getTime(), new Date().getTime() + info.time.duration) : getDurationArc(info.time.start_timestamp, info.time.start_timestamp + info.time.duration)
|
|
|
}}
|
|
}}
|
|
|
real={status == 'WFS' ? null : {
|
|
real={status == 'WFS' ? null : {
|
|
|
- color: MainColorType.orange,
|
|
|
|
|
|
|
+ color: themeColor,
|
|
|
width: rpxToPx(88),
|
|
width: rpxToPx(88),
|
|
|
start: getStartArc(info.time.start_timestamp),
|
|
start: getStartArc(info.time.start_timestamp),
|
|
|
duration: getDurationArc(info.time.start_timestamp, new Date().getTime())
|
|
duration: getDurationArc(info.time.start_timestamp, new Date().getTime())
|
|
@@ -906,6 +923,6 @@ export default function TimeRecord() {
|
|
|
<MomentDetailShare
|
|
<MomentDetailShare
|
|
|
user={user}
|
|
user={user}
|
|
|
canvas_id="time_record"
|
|
canvas_id="time_record"
|
|
|
- btnColor={MainColorType.orange} />
|
|
|
|
|
|
|
+ btnColor={themeColor} />
|
|
|
</View>
|
|
</View>
|
|
|
}
|
|
}
|