|
|
@@ -1,6 +1,6 @@
|
|
|
import { View, Image } from "@tarojs/components";
|
|
|
import './time_record.scss'
|
|
|
-import Taro from "@tarojs/taro";
|
|
|
+import Taro, { useRouter, useShareAppMessage } from "@tarojs/taro";
|
|
|
import { rpxToPx } from "@/utils/tools";
|
|
|
import { MainColorType } from "@/context/themes/color";
|
|
|
import NewButton, { NewButtonType } from "@/_health/base/new_button";
|
|
|
@@ -9,26 +9,212 @@ import NewDateTimePicker from "@/_health/base/new_date_time_picker";
|
|
|
import dayjs from "dayjs";
|
|
|
import RingProgress from "../components/ring_progress";
|
|
|
import NewDurationPicker, { DurationPickerType } from "@/_health/base/new_durationpicker";
|
|
|
-import { IconArrow } from "@/components/basic/Icons";
|
|
|
+import { IconArrow, IconClose } from "@/components/basic/Icons";
|
|
|
+import { useSelector } from "react-redux";
|
|
|
+import { TimeFormatter } from "@/utils/time_format";
|
|
|
+import { addEvents } from "@/services/health";
|
|
|
+import Modal from "@/components/layout/Modal.weapp";
|
|
|
+import { getDurationArc, getStartArc } from "@/features/health/hooks/health_hooks";
|
|
|
+import ShareBtn from "@/components/basic/ShareBtn";
|
|
|
+import PickerCard from "../components/picker_card";
|
|
|
|
|
|
let timer
|
|
|
+let useRoute;
|
|
|
+let useNavigation;
|
|
|
+if (process.env.TARO_ENV == 'rn') {
|
|
|
+ useRoute = require("@react-navigation/native").useRoute
|
|
|
+ useNavigation = require("@react-navigation/native").useNavigation
|
|
|
+}
|
|
|
+
|
|
|
export default function TimeRecord() {
|
|
|
const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
|
|
|
const navigationBarHeight = systemInfo.statusBarHeight + 44;
|
|
|
-
|
|
|
+ const record = useSelector((state: any) => state.record);
|
|
|
const [enterTime] = useState(new Date().getTime())
|
|
|
|
|
|
const [showDatePicker, setShowDatePicker] = useState(false)
|
|
|
const [showDurationPicker, setShowDurationPicker] = useState(false)
|
|
|
+ const [showEndDatePicker, setShowEndDatePicker] = useState(false)
|
|
|
const [count, setCount] = useState(0)
|
|
|
+ const [status, setStatus] = useState('WFS')
|
|
|
+ const [info, setInfo] = useState<any>(null)
|
|
|
+ const [loaded, setLoaded] = useState(false)
|
|
|
+ const [showHighlight, setShowHighlight] = useState(false)
|
|
|
+ const [showShare, setShowShare] = useState(false)
|
|
|
+ const [shareUrl, setShareUrl] = useState('')
|
|
|
+
|
|
|
+ let router
|
|
|
+ let navigation;
|
|
|
+ if (useNavigation) {
|
|
|
+ navigation = useNavigation()
|
|
|
+ }
|
|
|
+
|
|
|
+ if (process.env.TARO_ENV == 'rn') {
|
|
|
+ router = useRoute()
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ router = useRouter()
|
|
|
+ }
|
|
|
+
|
|
|
+ const { scenario } = router.params
|
|
|
+
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ useShareAppMessage((e) => {
|
|
|
+ return {
|
|
|
+ title: '分享标题',
|
|
|
+ path: 'pages/clock/Clock',
|
|
|
+ imageUrl: shareUrl
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
useEffect(() => {
|
|
|
- timer = setInterval(() => { setCount(count => count + 1) }, 1000)
|
|
|
+ const { events } = record
|
|
|
+ events.map((item) => {
|
|
|
+ if (item.scenario == scenario) {
|
|
|
+ setInfo(item)
|
|
|
+ setStatus(item.status)
|
|
|
+ setLoaded(true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ downloadFile()
|
|
|
+ timer = setInterval(() => {
|
|
|
+ if (showDatePicker || showEndDatePicker || showDurationPicker) return
|
|
|
+ setCount(count => count + 1)
|
|
|
+ }, 1000)
|
|
|
return () => {
|
|
|
clearInterval(timer)
|
|
|
}
|
|
|
}, [])
|
|
|
|
|
|
+ function downloadFile() {
|
|
|
+ Taro.downloadFile({
|
|
|
+ url: 'https://background-pictures.oss-cn-beijing.aliyuncs.com/inapp/checkmark.png',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.statusCode === 200) {
|
|
|
+ global.checkImg = res.tempFilePath
|
|
|
+
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function tapClock() {
|
|
|
+ if (status == 'WFS')
|
|
|
+ setShowDurationPicker(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ function start() {
|
|
|
+ // var date = TimeFormatter.stringToDate(selDate, time)
|
|
|
+ // date.setMilliseconds(new Date(enterTimestmap).getMilliseconds())
|
|
|
+
|
|
|
+
|
|
|
+ var params: any = {
|
|
|
+ scenario: scenario, //ACTIVITY
|
|
|
+ type: 'INTERVAL',
|
|
|
+ sub_type: scenario,
|
|
|
+
|
|
|
+ time: {
|
|
|
+ start_timestamp: new Date().getTime(),
|
|
|
+ duration: info.time.duration
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (router.params.join_id) {
|
|
|
+ params.join_key = router.params.join_id
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // if (event_id && event_id != 'undefined') {
|
|
|
+ // params.event_id = event_id
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (is_temp) {
|
|
|
+ // params.event = window == 'EAT' ? 'EAT_CUSTOM' : 'ACTIVE_CUSTOM'
|
|
|
+ // }
|
|
|
+ // params.op_page = window == 'EAT' ? 'HOME_EAT' : 'HOME_ACTIVE'
|
|
|
+
|
|
|
+
|
|
|
+ params.extra = {
|
|
|
+ set_time: global.set_time ? global.set_time : new Date().getTime(),
|
|
|
+ confirm_time: new Date().getTime()
|
|
|
+ }
|
|
|
+ // console.log('打卡提交数据', params)
|
|
|
+ // if (posting) return
|
|
|
+ // setPosting(true)
|
|
|
+ addEvents(params).then(res => {
|
|
|
+ Taro.eventCenter.trigger('refreshClockIndex')
|
|
|
+ setShowHighlight(true)
|
|
|
+ setTimeout(() => {
|
|
|
+ setShowHighlight(false)
|
|
|
+ }, 3000)
|
|
|
+ setInfo((res as any).data)
|
|
|
+ setStatus((res as any).data.status)
|
|
|
+ // Taro.showToast({
|
|
|
+ // title: '成功',
|
|
|
+ // icon: 'success'
|
|
|
+ // })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function end() {
|
|
|
+ var params: any = {
|
|
|
+ scenario: scenario, //ACTIVITY
|
|
|
+ type: 'INTERVAL',
|
|
|
+ sub_type: scenario,
|
|
|
+
|
|
|
+ time: {
|
|
|
+ end_timestamp: new Date().getTime()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (router.params.join_id) {
|
|
|
+ params.join_key = router.params.join_id
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ params.extra = {
|
|
|
+ set_time: global.set_time ? global.set_time : new Date().getTime(),
|
|
|
+ confirm_time: new Date().getTime()
|
|
|
+ }
|
|
|
+ addEvents(params).then(res => {
|
|
|
+ setShowHighlight(true)
|
|
|
+ setTimeout(() => {
|
|
|
+ setShowHighlight(false)
|
|
|
+ }, 3000)
|
|
|
+ Taro.eventCenter.trigger('refreshClockIndex')
|
|
|
+ setInfo((res as any).data)
|
|
|
+ setStatus((res as any).data.status)
|
|
|
+ setShareUrl('')
|
|
|
+ // Taro.showToast({
|
|
|
+ // title: '成功',
|
|
|
+ // icon: 'success'
|
|
|
+ // })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function update(params) {
|
|
|
+ var data: any = {
|
|
|
+ id: info.id,
|
|
|
+ time: {
|
|
|
+ ...params
|
|
|
+ }
|
|
|
+ }
|
|
|
+ addEvents(data).then(res => {
|
|
|
+ Taro.eventCenter.trigger('refreshClockIndex')
|
|
|
+ setInfo((res as any).data)
|
|
|
+ setShowDatePicker(false)
|
|
|
+ setShowDurationPicker(false)
|
|
|
+ setShowEndDatePicker(false)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
function tapStart() {
|
|
|
setShowDatePicker(true)
|
|
|
@@ -38,142 +224,432 @@ export default function TimeRecord() {
|
|
|
setShowDurationPicker(true)
|
|
|
}
|
|
|
|
|
|
- return <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
|
- <View className="navi_bar" style={{ height: navigationBarHeight }}>
|
|
|
- <View style={{
|
|
|
- position: 'absolute',
|
|
|
- left: 0,
|
|
|
- right: 0,
|
|
|
- bottom: 0,
|
|
|
- height: 44,
|
|
|
- display: 'flex',
|
|
|
- alignItems: 'center',
|
|
|
- justifyContent: 'center'
|
|
|
- }}>
|
|
|
- <Image src={require('@assets/_health/navi_back.png')} style={{
|
|
|
- position: 'absolute',
|
|
|
- width: rpxToPx(92),
|
|
|
- height: rpxToPx(64),
|
|
|
- left: 0,
|
|
|
- top: 22 - rpxToPx(32)
|
|
|
- }}
|
|
|
- onClick={() => {
|
|
|
- Taro.navigateBack()
|
|
|
- }}
|
|
|
- />
|
|
|
- <View className="h36 bold">upcoming fast</View>
|
|
|
- </View>
|
|
|
+ function ringExtra() {
|
|
|
+ if (status == 'WFS') {
|
|
|
+ const count = info.time.duration / 1000
|
|
|
+ var str = TimeFormatter.formateDurationBySeconds(count)
|
|
|
+
|
|
|
+ return {
|
|
|
+ header: '',
|
|
|
+ value: str,
|
|
|
+ footer: 'Edit',
|
|
|
+ color: MainColorType.orange
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var percent = 100 * (new Date().getTime() - info.time.start_timestamp) / info.time.duration
|
|
|
+ percent = parseInt(percent + '')
|
|
|
+ return {
|
|
|
+ header: '',
|
|
|
+ value: TimeFormatter.countdown(info.time.start_timestamp),
|
|
|
+ footer: `ELAPSED ${percent}%`,
|
|
|
+ color: MainColorType.g02
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function getBackground() {
|
|
|
+ var time = record.time
|
|
|
+ if (!time) return '#fff'
|
|
|
+ const { background_colors } = time
|
|
|
+ if (!background_colors) {
|
|
|
+ return '#fff'
|
|
|
+ }
|
|
|
+ else if (background_colors.length == 1) {
|
|
|
+ return background_colors[0]
|
|
|
+ }
|
|
|
+ return `linear-gradient(to bottom, ${background_colors[0]}, ${background_colors[1]})`
|
|
|
+ }
|
|
|
+ if (!loaded) {
|
|
|
+ return <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
|
+ <View className="main_bg" style={{ background: getBackground() }} />
|
|
|
</View>
|
|
|
- <View style={{ height: navigationBarHeight }} />
|
|
|
- <View className="progress_card">
|
|
|
- <View onClick={() => {
|
|
|
- setShowDurationPicker(true)
|
|
|
- }}>
|
|
|
- <RingProgress width={400} height={320}
|
|
|
- radius={125} canvasId="helloworld"
|
|
|
- //scale={0.75}
|
|
|
- count={count}
|
|
|
- bgRing={{
|
|
|
- color: 'rgba(255,255,255,0.25)',
|
|
|
- width: 35
|
|
|
- }}
|
|
|
- target={{
|
|
|
- color: 'rgba(255,255,255,0.5)',
|
|
|
- width: 35,
|
|
|
- start: 0,
|
|
|
- duration: 3 / 4 * Math.PI
|
|
|
- }}
|
|
|
- real={{
|
|
|
- color: MainColorType.orange,
|
|
|
- width: 35,
|
|
|
- start: 0,
|
|
|
- duration: 2 / 4 * Math.PI
|
|
|
- }}
|
|
|
- extra={{
|
|
|
- header: 'GOAL',
|
|
|
- value: dayjs().format('HH:mm:ss'),
|
|
|
- footer: 'Edit',
|
|
|
- color: MainColorType.orange
|
|
|
- }}
|
|
|
- />
|
|
|
- </View>
|
|
|
- <View className="operate_content">
|
|
|
- <View className="operate_item">
|
|
|
- <View className="g02 h24">STARTED</View>
|
|
|
- <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>今天 13:54</View>
|
|
|
- <View className="h30 bold" style={{ color: MainColorType.orange }}>Edit Start</View>
|
|
|
+ }
|
|
|
+
|
|
|
+ function doneComponent() {
|
|
|
+ if (status == 'DONE') {
|
|
|
+ return <View className="share_bg" style={{ justifyContent: 'flex-start' }}>
|
|
|
+ {
|
|
|
+ shareUrl.length == 0 && <View className="share_canvas"><RingProgress
|
|
|
+ radius={125} canvasId="helloworld_share2"
|
|
|
+ //scale={0.75}
|
|
|
+ count={count}
|
|
|
+ bgRing={{
|
|
|
+ color: 'rgba(255,255,255,1)',
|
|
|
+ width: 35
|
|
|
+ }}
|
|
|
+ real={{
|
|
|
+ color: MainColorType.orange,
|
|
|
+ width: 5,
|
|
|
+ start: getStartArc(info.time.start_timestamp),
|
|
|
+ duration: getDurationArc(info.time.start_timestamp, info.time.end_timestamp)
|
|
|
+ }}
|
|
|
+ extra={ringExtra()}
|
|
|
+ isCompleted
|
|
|
+ shareCover={
|
|
|
+ url => {
|
|
|
+ setShareUrl(url)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /></View>
|
|
|
+ }
|
|
|
+
|
|
|
+ <View className="navi_bar" style={{ height: navigationBarHeight }}>
|
|
|
+ <View style={{
|
|
|
+ position: 'absolute',
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ height: 44,
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center'
|
|
|
+ }}>
|
|
|
+ <View style={{
|
|
|
+ position: 'absolute',
|
|
|
+ width: rpxToPx(92),
|
|
|
+ height: rpxToPx(64),
|
|
|
+ left: 22,
|
|
|
+ top: 22 - rpxToPx(32)
|
|
|
+ }}
|
|
|
+ onClick={() => {
|
|
|
+ Taro.navigateBack()
|
|
|
+ }}>
|
|
|
+ <IconClose color="#fff" width={rpxToPx(64)} height={rpxToPx(64)} />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+
|
|
|
</View>
|
|
|
- <View className="operate_item">
|
|
|
- <View className="g02 h24">STARTED</View>
|
|
|
- <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>今天 13:54</View>
|
|
|
- <View className="h30 bold" style={{ color: MainColorType.orange }}>Edit Start</View>
|
|
|
+ <View className="share_card" style={{ background: MainColorType.orange, marginTop: rpxToPx(26) + navigationBarHeight }}>
|
|
|
+ {
|
|
|
+ shareUrl.length > 0 ? <Image src={shareUrl} style={{ width: rpxToPx(900), height: rpxToPx(720) }} /> :
|
|
|
+ <View style={{ width: rpxToPx(900), height: rpxToPx(720), backgroundColor: MainColorType.g02 }} />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ <View className="operate_content" style={{ marginTop: rpxToPx(40) }}>
|
|
|
+ <View className="operate_item" onClick={() => {
|
|
|
+ setShowDatePicker(true)
|
|
|
+ }}>
|
|
|
+ <View className="g02 h24">STARTED</View>
|
|
|
+ <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.start_timestamp, true)}</View>
|
|
|
+ <View className="h30 bold" style={{ color: MainColorType.white }}>Edit Start</View>
|
|
|
+ </View>
|
|
|
+ <View className="operate_item" onClick={() => {
|
|
|
+ setShowEndDatePicker(true)
|
|
|
+ }}>
|
|
|
+ <View className="g02 h24">FINISHED</View>
|
|
|
+ <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.end_timestamp, true)}</View>
|
|
|
+ <View className="h30 bold" style={{ color: MainColorType.white }}>Edit Finish</View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
</View>
|
|
|
- </View>
|
|
|
- <NewButton
|
|
|
- type={NewButtonType.fill}
|
|
|
- title="Start fasting"
|
|
|
- width={rpxToPx(490)}
|
|
|
- height={rpxToPx(96)}
|
|
|
- color={MainColorType.orange}
|
|
|
- />
|
|
|
- </View>
|
|
|
+ <ShareBtn>
|
|
|
+ <NewButton
|
|
|
+ type={NewButtonType.fill}
|
|
|
+ color={MainColorType.success}
|
|
|
+ width={rpxToPx(698)}
|
|
|
+ height={rpxToPx(108)}
|
|
|
+ title="Send to friends"
|
|
|
+ />
|
|
|
+ </ShareBtn>
|
|
|
|
|
|
- <View className="eat_card" onClick={() => {
|
|
|
- Taro.redirectTo({
|
|
|
- url: './log_record'
|
|
|
- })
|
|
|
- }}>
|
|
|
- <View className="h30 bold">Or share your meals</View>
|
|
|
- <View className="h24 g02" style={{ marginTop: rpxToPx(12) }}>if you haven't started fasting yet</View>
|
|
|
- <View className="eat_card_arrow">
|
|
|
- <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
|
|
|
</View>
|
|
|
- </View>
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- <View className="eat_card" style={{height:rpxToPx(120)}} onClick={() => {
|
|
|
- Taro.redirectTo({
|
|
|
- url: './log_record'
|
|
|
- })
|
|
|
- }}>
|
|
|
- <View className="h24 g02" style={{ marginTop: rpxToPx(12) }}>How are you feeling?</View>
|
|
|
- <View className="eat_card_arrow">
|
|
|
- <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
|
|
|
+ function render() {
|
|
|
+
|
|
|
+ return <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
|
+ <View className="main_bg" style={{ background: getBackground() }} />
|
|
|
+ <View className="navi_bar" style={{ height: navigationBarHeight }}>
|
|
|
+ <View style={{
|
|
|
+ position: 'absolute',
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ height: 44,
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center'
|
|
|
+ }}>
|
|
|
+ <Image src={require('@assets/_health/navi_back.png')} style={{
|
|
|
+ position: 'absolute',
|
|
|
+ width: rpxToPx(92),
|
|
|
+ height: rpxToPx(64),
|
|
|
+ left: 0,
|
|
|
+ top: 22 - rpxToPx(32)
|
|
|
+ }}
|
|
|
+ onClick={() => {
|
|
|
+ Taro.navigateBack()
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <View className="h36 bold">upcoming fast</View>
|
|
|
+ </View>
|
|
|
</View>
|
|
|
- </View>
|
|
|
+ <View style={{ height: navigationBarHeight }} />
|
|
|
+ <View className="progress_card">
|
|
|
+ <View onClick={() => {
|
|
|
+ tapClock()
|
|
|
+ // setShowDurationPicker(true)
|
|
|
+ }}>
|
|
|
+ <RingProgress
|
|
|
+ radius={125} canvasId="helloworld"
|
|
|
+ //scale={0.75}
|
|
|
+ count={count}
|
|
|
+ bgRing={{
|
|
|
+ color: 'rgba(255,255,255,0.25)',
|
|
|
+ width: 35
|
|
|
+ }}
|
|
|
+ target={{
|
|
|
+ color: 'rgba(255,255,255,0.5)',
|
|
|
+ width: 35,
|
|
|
+ start: status == 'WFS' ? getStartArc(new Date().getTime()) : getStartArc(info.time.start_timestamp),
|
|
|
+ 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 : {
|
|
|
+ color: MainColorType.orange,
|
|
|
+ width: 35,
|
|
|
+ start: getStartArc(info.time.start_timestamp),
|
|
|
+ duration: getDurationArc(info.time.start_timestamp, new Date().getTime())
|
|
|
+ }}
|
|
|
+ extra={ringExtra()}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ {
|
|
|
+ status == 'OG' && <View className="operate_content">
|
|
|
+ <View className="operate_item" onClick={() => {
|
|
|
+ setShowDatePicker(true)
|
|
|
+ }}>
|
|
|
+ <View className="g02 h24">STARTED</View>
|
|
|
+ <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.start_timestamp, true)}</View>
|
|
|
+ <View className="h30 bold" style={{ color: MainColorType.orange }}>Edit Start</View>
|
|
|
+ </View>
|
|
|
+ <View className="operate_item" onClick={() => {
|
|
|
+ setShowDurationPicker(true)
|
|
|
+ }}>
|
|
|
+ <View className="g02 h24">{TimeFormatter.formateDurationBySeconds(info.time.duration / 1000)} Goal</View>
|
|
|
+ <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.target_end_timestamp, true)}</View>
|
|
|
+ <View className="h30 bold" style={{ color: MainColorType.orange }}>Edit Goal</View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ status == 'WFS' && <NewButton
|
|
|
+ type={NewButtonType.fill}
|
|
|
+ title="Start fasting"
|
|
|
+ width={rpxToPx(490)}
|
|
|
+ height={rpxToPx(96)}
|
|
|
+ color={MainColorType.orange}
|
|
|
+ onClick={start}
|
|
|
+ />
|
|
|
+ }
|
|
|
+
|
|
|
+ {
|
|
|
+ status == 'OG' && <NewButton
|
|
|
+ type={NewButtonType.fill}
|
|
|
+ title="End fasting"
|
|
|
+ width={rpxToPx(490)}
|
|
|
+ height={rpxToPx(96)}
|
|
|
+ color={MainColorType.orange}
|
|
|
+ onClick={end}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ status == 'OG' && <View className="share_icon">
|
|
|
+ <Image onClick={() => {
|
|
|
+ setShareUrl('')
|
|
|
+ setShowShare(true)
|
|
|
+ }} src={require('@assets/_health/wechat.png')} style={{
|
|
|
+ width: rpxToPx(72),
|
|
|
+ height: rpxToPx(72)
|
|
|
+ }} />
|
|
|
+ </View>
|
|
|
+ }
|
|
|
|
|
|
|
|
|
- <View className="time_card_bg">
|
|
|
- <View className="time_card" onClick={tapStart}>
|
|
|
- <View className="h30" style={{ opacity: 0.4 }}>Start</View>
|
|
|
- <View className="h44 bold" style={{ marginTop: rpxToPx(12) }}>10:00</View>
|
|
|
- </View>
|
|
|
- <View className="time_card" onClick={tapGoal}>
|
|
|
- <View className="h30" style={{ opacity: 0.4 }}>Goal</View>
|
|
|
- <View className="h44 bold" style={{ marginTop: rpxToPx(12) }}>10:00</View>
|
|
|
</View>
|
|
|
+ {
|
|
|
+ status == 'WFS' && <View className="eat_card" onClick={() => {
|
|
|
+ Taro.redirectTo({
|
|
|
+ url: `./log_record?scenario=${scenario == 'FAST' ? 'MEAL' : 'ACTIVITY'}`
|
|
|
+ })
|
|
|
+ }}>
|
|
|
+ <View className="h30 bold">Or share your meals</View>
|
|
|
+ <View className="h24 g02" style={{ marginTop: rpxToPx(12) }}>if you haven't started fasting yet</View>
|
|
|
+ <View className="eat_card_arrow">
|
|
|
+ <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ {
|
|
|
+ status == 'OG' && <View className="eat_card" style={{ height: rpxToPx(120) }} onClick={() => {
|
|
|
+ Taro.redirectTo({
|
|
|
+ url: `./log_record?scenario=${scenario == 'FAST' ? 'MEAL' : 'ACTIVITY'}`
|
|
|
+ })
|
|
|
+ }}>
|
|
|
+ <View className="h24 g02" style={{ marginTop: rpxToPx(12) }}>How are you feeling?</View>
|
|
|
+ <View className="eat_card_arrow">
|
|
|
+ <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ {/* {
|
|
|
+ showDurationPicker && <Modal
|
|
|
+ testInfo={null}
|
|
|
+ dismiss={() => {
|
|
|
+ setShowDurationPicker(false)
|
|
|
+ }}
|
|
|
+ confirm={() => { }}>
|
|
|
+ {
|
|
|
+ <NewDurationPicker type={DurationPickerType.normal} value={info.time.duration} onChange={(e) => {
|
|
|
+ console.log(e)
|
|
|
+ var obj = JSON.parse(JSON.stringify(info))
|
|
|
+ obj.time.duration = e
|
|
|
+ setInfo(obj)
|
|
|
+ }} />
|
|
|
+ }
|
|
|
+ </Modal>
|
|
|
+ } */}
|
|
|
+ {
|
|
|
+ showShare && <View className="share_bg">
|
|
|
+ {
|
|
|
+ shareUrl == '' && <View className="share_canvas">
|
|
|
+ <RingProgress
|
|
|
+ radius={125} canvasId="helloworld_share"
|
|
|
+ //scale={0.75}
|
|
|
+ count={count}
|
|
|
+ bgRing={{
|
|
|
+ color: 'rgba(255,255,255,0.25)',
|
|
|
+ width: 35
|
|
|
+ }}
|
|
|
+ target={{
|
|
|
+ color: 'rgba(255,255,255,0.5)',
|
|
|
+ width: 35,
|
|
|
+ start: status == 'WFS' ? getStartArc(new Date().getTime()) : getStartArc(info.time.start_timestamp),
|
|
|
+ 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 : {
|
|
|
+ color: MainColorType.orange,
|
|
|
+ width: 35,
|
|
|
+ start: getStartArc(info.time.start_timestamp),
|
|
|
+ duration: getDurationArc(info.time.start_timestamp, new Date().getTime())
|
|
|
+ }}
|
|
|
+ extra={ringExtra()}
|
|
|
+ shareBg={[record.time.background_colors[0], record.time.background_colors[1]]}
|
|
|
+ shareCover={
|
|
|
+ url => {
|
|
|
+ setShareUrl(url)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ <View className="navi_bar" style={{ height: navigationBarHeight }}>
|
|
|
+ <View style={{
|
|
|
+ position: 'absolute',
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ height: 44,
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center'
|
|
|
+ }}>
|
|
|
+ <View style={{
|
|
|
+ position: 'absolute',
|
|
|
+ width: rpxToPx(92),
|
|
|
+ height: rpxToPx(64),
|
|
|
+ left: 22,
|
|
|
+ top: 22 - rpxToPx(32)
|
|
|
+ }}
|
|
|
+ onClick={() => {
|
|
|
+ setShowShare(false)
|
|
|
+ }}>
|
|
|
+ <IconClose color="#fff" width={rpxToPx(64)} height={rpxToPx(64)} />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className="share_card" style={{ background: record.time.background_colors[1] }}>
|
|
|
+ {
|
|
|
+ shareUrl.length > 0 ? <Image src={shareUrl} style={{ width: rpxToPx(900), height: rpxToPx(720) }} /> :
|
|
|
+ <View style={{ width: rpxToPx(900), height: rpxToPx(720), backgroundColor: MainColorType.g02 }} />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ status == 'OG' && <View className="operate_content" style={{ marginTop: rpxToPx(40) }}>
|
|
|
+ <View className="operate_item">
|
|
|
+ <View className="g02 h24">STARTED</View>
|
|
|
+ <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.start_timestamp, true)}</View>
|
|
|
+ </View>
|
|
|
+ <View className="operate_item">
|
|
|
+ <View className="g02 h24">{TimeFormatter.formateDurationBySeconds(info.time.duration / 1000)} Goal</View>
|
|
|
+ <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.target_end_timestamp, true)}</View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ <ShareBtn>
|
|
|
+ <NewButton
|
|
|
+ type={NewButtonType.fill}
|
|
|
+ color={MainColorType.success}
|
|
|
+ width={rpxToPx(698)}
|
|
|
+ height={rpxToPx(108)}
|
|
|
+ title="Send to friends"
|
|
|
+ />
|
|
|
+ </ShareBtn>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
</View>
|
|
|
- <NewButton
|
|
|
- onClick={() => { }}
|
|
|
- type={NewButtonType.fill}
|
|
|
- color={MainColorType.orange}
|
|
|
- width={rpxToPx(669)}
|
|
|
- height={rpxToPx(96)}
|
|
|
- title="开始断食"
|
|
|
- />
|
|
|
+ }
|
|
|
+ return <View>
|
|
|
+ {
|
|
|
+ status == 'DONE' ? doneComponent() : render()
|
|
|
+ }
|
|
|
+ {
|
|
|
+ showDatePicker && <PickerCard onClose={() => { setShowDatePicker(false) }}
|
|
|
+ value={info.time.start_timestamp}
|
|
|
+ type="datetime"
|
|
|
+ onConfirm={(e) => {
|
|
|
+ update({
|
|
|
+ start_timestamp: e
|
|
|
+ })
|
|
|
+ console.log(e)
|
|
|
+ // var obj = JSON.parse(JSON.stringify(info))
|
|
|
+ // obj.time.duration = e
|
|
|
+ // setInfo(obj)
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ }
|
|
|
{
|
|
|
- showDatePicker && <NewDateTimePicker date={dayjs().format('YYYY-MM-DD')} count={1} time={dayjs().format('HH:mm')}
|
|
|
- minTimestamp={new Date().getTime() - 24 * 3600 * 1000}
|
|
|
- maxTimestamp={new Date().getTime()}
|
|
|
- onChange={(e) => {
|
|
|
- // if (props.dateChange)
|
|
|
- // props.dateChange(e[0])
|
|
|
- // if (props.timeChange)
|
|
|
- // props.timeChange(e[1])
|
|
|
- // props.change(e)
|
|
|
- }} color={MainColorType.orange} />
|
|
|
+ showEndDatePicker && <PickerCard onClose={() => { setShowDatePicker(false) }}
|
|
|
+ value={info.time.end_timestamp}
|
|
|
+ type="datetime"
|
|
|
+ onConfirm={(e) => {
|
|
|
+ update({
|
|
|
+ end_timestamp: e
|
|
|
+ })
|
|
|
+ console.log(e)
|
|
|
+ // var obj = JSON.parse(JSON.stringify(info))
|
|
|
+ // obj.time.duration = e
|
|
|
+ // setInfo(obj)
|
|
|
+ }}
|
|
|
+ />
|
|
|
}
|
|
|
{
|
|
|
- showDurationPicker && <NewDurationPicker type={DurationPickerType.normal} />
|
|
|
+ showDurationPicker && <PickerCard onClose={() => { setShowDurationPicker(false) }}
|
|
|
+ value={info.time.duration}
|
|
|
+ type="duration"
|
|
|
+ onConfirm={(e) => {
|
|
|
+ var obj = JSON.parse(JSON.stringify(info))
|
|
|
+ obj.time.duration = e
|
|
|
+ setInfo(obj)
|
|
|
+ if (status == 'WFS') return
|
|
|
+ update({
|
|
|
+ duration: e
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ />
|
|
|
}
|
|
|
</View>
|
|
|
}
|
Leon