|
|
@@ -0,0 +1,863 @@
|
|
|
+import { View, Image, PickerView, PickerViewColumn, Text } from "@tarojs/components";
|
|
|
+import './record_time.scss'
|
|
|
+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";
|
|
|
+import { useEffect, useRef, useState } from "react";
|
|
|
+import NewDateTimePicker from "@/_health/base/new_date_time_picker";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import NewDurationPicker, { DurationPickerType } from "@/_health/base/new_durationpicker";
|
|
|
+import { IconArrow, IconClose, IconMore2 } from "@/components/basic/Icons";
|
|
|
+import { useSelector } from "react-redux";
|
|
|
+import { TimeFormatter } from "@/utils/time_format";
|
|
|
+import { addEvents, delWindowId } 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 showActionSheet from "@/components/basic/ActionSheet";
|
|
|
+import { useTranslation } from "react-i18next";
|
|
|
+import FollowInfo from "@/_moment/components/follow_info";
|
|
|
+
|
|
|
+import MomentDetailShare from "@/pages/moment/moment_detail_share";
|
|
|
+import RingProgress from "@/_record/components/ring_progress.weapp";
|
|
|
+import PickerCard from "@/_record/components/picker_card";
|
|
|
+
|
|
|
+
|
|
|
+let timer
|
|
|
+let useRoute;
|
|
|
+let useNavigation, LinearGradient;
|
|
|
+if (process.env.TARO_ENV == 'rn') {
|
|
|
+ useRoute = require("@react-navigation/native").useRoute
|
|
|
+ useNavigation = require("@react-navigation/native").useNavigation
|
|
|
+ LinearGradient = require('react-native-linear-gradient').default
|
|
|
+}
|
|
|
+
|
|
|
+export default function RecordTime(props: { scenario: string, join_id?: string, contentHeight: number, showPicker: any, hidePicker: any }) {
|
|
|
+ const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
|
|
|
+ const navigationBarHeight = systemInfo.statusBarHeight + 44;
|
|
|
+ const screenHeight = systemInfo.screenHeight
|
|
|
+
|
|
|
+ const record = useSelector((state: any) => state.record);
|
|
|
+ const long = useSelector((state: any) => state.long);
|
|
|
+ const user = useSelector((state: any) => state.user);
|
|
|
+ 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('')
|
|
|
+ const [showResult, setShowResult] = useState(false)
|
|
|
+
|
|
|
+ const statusRef = useRef(status)
|
|
|
+ const picker1Ref = useRef(showDatePicker)
|
|
|
+ const picker2Ref = useRef(showEndDatePicker)
|
|
|
+ const picker3Ref = useRef(showDurationPicker)
|
|
|
+
|
|
|
+ const [posting, setPosting] = useState(false)
|
|
|
+
|
|
|
+ const [postError, setPostError] = useState('')
|
|
|
+
|
|
|
+ const [pickerTitle, setPickerTitle] = useState('')
|
|
|
+
|
|
|
+ const { t } = useTranslation()
|
|
|
+
|
|
|
+ const scenario = props.scenario
|
|
|
+
|
|
|
+ // let router
|
|
|
+ // let navigation;
|
|
|
+ // if (useNavigation) {
|
|
|
+ // navigation = useNavigation()
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (process.env.TARO_ENV == 'rn') {
|
|
|
+ // router = useRoute()
|
|
|
+ // }
|
|
|
+ // else {
|
|
|
+ // router = useRouter()
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+
|
|
|
+
|
|
|
+ useShareAppMessage((e) => {
|
|
|
+
|
|
|
+ var path;
|
|
|
+ if (info && info.id) {
|
|
|
+ var sharePath = `/_health/pages/timeline_detail?type=recent&fast_type=IF&window_id=${info.id}&uid=${user.id}&isfastsleep=${0}&disable_edit=1&enter_type=share`
|
|
|
+ if (user.isLogin) {
|
|
|
+ sharePath += `&share_uid=${user.id}`
|
|
|
+ }
|
|
|
+ path = sharePath
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ path = 'pages/clock/Clock'
|
|
|
+ }
|
|
|
+ var title = ''
|
|
|
+ var shareDate = global.language == 'en' ? 'Today\'s' : '今日'
|
|
|
+ if (scenario == 'FAST') {
|
|
|
+ title = t('health.share_check_in', { date: shareDate, type: t('health.fasting') })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ title = t('health.share_check_in', { date: shareDate, type: t('health.sleep') })
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ title: title,
|
|
|
+ path: path,
|
|
|
+ imageUrl: global.momentdetail_share_url//shareUrl
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ statusRef.current = status;
|
|
|
+ picker1Ref.current = showDatePicker
|
|
|
+ picker2Ref.current = showEndDatePicker
|
|
|
+ picker3Ref.current = showDurationPicker
|
|
|
+ if (!showDatePicker && !showEndDatePicker) {
|
|
|
+ setPostError('')
|
|
|
+ }
|
|
|
+
|
|
|
+ if (showDatePicker) {
|
|
|
+ setPickerTitle(scenario == 'FAST' ? t('health.adjust_fast_start_time') : t('health.adjust_bed_time'))
|
|
|
+ }
|
|
|
+ else if (showEndDatePicker) {
|
|
|
+ setPickerTitle(scenario == 'FAST' ? t('health.adjust_fast_end_time') : t('health.adjust_wake_up2'))
|
|
|
+ }
|
|
|
+ else if (showDurationPicker) {
|
|
|
+ setPickerTitle(scenario == 'FAST' ? t('health.adjust_fast_goal') : t('health.adjust_sleep_goal'))
|
|
|
+ }
|
|
|
+ }, [status, showDatePicker, showEndDatePicker, showDurationPicker])
|
|
|
+
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ const { events } = record
|
|
|
+ events.map((item) => {
|
|
|
+ if (item.scenario == scenario) {
|
|
|
+ setInfo(item)
|
|
|
+ setStatus(item.status)
|
|
|
+ setLoaded(true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ downloadFile()
|
|
|
+ timer = setInterval(() => {
|
|
|
+ if (picker1Ref.current || picker2Ref.current || picker3Ref.current) return
|
|
|
+ if (statusRef.current == 'DONE') 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)
|
|
|
+
|
|
|
+
|
|
|
+ var title = scenario == 'FAST' ? t('health.adjust_fast_goal') : t('health.adjust_sleep_goal')
|
|
|
+ props.showPicker('duration', title, info.time.duration, (e) => {
|
|
|
+ var obj = JSON.parse(JSON.stringify(info))
|
|
|
+ obj.time.duration = e
|
|
|
+ setInfo(obj)
|
|
|
+ if (status == 'WFS') {
|
|
|
+ // setShowDurationPicker(false)
|
|
|
+ props.hidePicker()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ update({
|
|
|
+ duration: e
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function tapStartPicker() {
|
|
|
+ var title = scenario == 'FAST' ? t('health.adjust_fast_start_time') : t('health.adjust_bed_time')
|
|
|
+ props.showPicker('start', title, info.time.start_timestamp, (e) => {
|
|
|
+ update({
|
|
|
+ start_timestamp: e
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function tapEndPicker() {
|
|
|
+ var title = scenario == 'FAST' ? t('health.adjust_fast_end_time') : t('health.adjust_wake_up2')
|
|
|
+ props.showPicker('end', title, info.time.end_timestamp, (e) => {
|
|
|
+ update({
|
|
|
+ start_timestamp: e
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 (props.join_id) {
|
|
|
+ params.join_key = props.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')
|
|
|
+ Taro.eventCenter.trigger('refreshMoments', '')
|
|
|
+ setShowHighlight(true)
|
|
|
+ setTimeout(() => {
|
|
|
+ setShowHighlight(false)
|
|
|
+ }, 3300)
|
|
|
+ setInfo((res as any).data)
|
|
|
+ setStatus((res as any).data.status)
|
|
|
+ // Taro.showToast({
|
|
|
+ // title: '成功',
|
|
|
+ // icon: 'success'
|
|
|
+ // })
|
|
|
+ setPosting(false)
|
|
|
+ }).catch(e => {
|
|
|
+ setPosting(false)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function end() {
|
|
|
+ var params: any = {
|
|
|
+ scenario: scenario, //ACTIVITY
|
|
|
+ type: 'INTERVAL',
|
|
|
+ sub_type: scenario,
|
|
|
+
|
|
|
+ time: {
|
|
|
+ end_timestamp: new Date().getTime()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (props.join_id) {
|
|
|
+ params.join_key = props.join_id
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ params.extra = {
|
|
|
+ set_time: global.set_time ? global.set_time : new Date().getTime(),
|
|
|
+ confirm_time: new Date().getTime()
|
|
|
+ }
|
|
|
+
|
|
|
+ if (posting) return
|
|
|
+ setPosting(true)
|
|
|
+ addEvents(params).then(res => {
|
|
|
+ setShowHighlight(true)
|
|
|
+ setTimeout(() => {
|
|
|
+ setShowHighlight(false)
|
|
|
+ }, 8000)
|
|
|
+ setTimeout(() => {
|
|
|
+ setShowResult(true)
|
|
|
+ }, 2000)
|
|
|
+ Taro.eventCenter.trigger('refreshClockIndex')
|
|
|
+ Taro.eventCenter.trigger('refreshMoments', '')
|
|
|
+ setInfo((res as any).data)
|
|
|
+ setStatus((res as any).data.status)
|
|
|
+ setShareUrl('')
|
|
|
+ // Taro.showToast({
|
|
|
+ // title: '成功',
|
|
|
+ // icon: 'success'
|
|
|
+ // })
|
|
|
+ setPosting(false)
|
|
|
+ }).catch(e => {
|
|
|
+ setPosting(false)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function update(params) {
|
|
|
+ var data: any = {
|
|
|
+ id: info.id,
|
|
|
+ time: {
|
|
|
+ ...params
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (posting) return
|
|
|
+ setPosting(true)
|
|
|
+ addEvents(data).then(res => {
|
|
|
+ if ((res as any).result == false) {
|
|
|
+ setPostError((res as any).error_messages[0])
|
|
|
+ return
|
|
|
+ }
|
|
|
+ Taro.eventCenter.trigger('refreshClockIndex')
|
|
|
+ Taro.eventCenter.trigger('refreshMoments', '')
|
|
|
+ setInfo((res as any).data)
|
|
|
+ props.hidePicker()
|
|
|
+ setCount((count) => count + 1)
|
|
|
+ setPosting(false)
|
|
|
+ }).catch(e => {
|
|
|
+ setPosting(false)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function more() {
|
|
|
+ showActionSheet({
|
|
|
+ // title: '操作',
|
|
|
+ itemList: [t('health.discard'), t('health.discard_restart')],
|
|
|
+ success: (res) => {
|
|
|
+ switch (res) {
|
|
|
+ case 0:
|
|
|
+ delWindowId(info.id).then(res => {
|
|
|
+ setInfo((res as any).data)
|
|
|
+ setStatus((res as any).data.status)
|
|
|
+ })
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ delWindowId(info.id).then(res => {
|
|
|
+ start()
|
|
|
+ })
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function tapStart() {
|
|
|
+ setShowDatePicker(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ function tapGoal() {
|
|
|
+ setShowDurationPicker(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ function ringExtra() {
|
|
|
+ if (status == 'DONE') {
|
|
|
+ return {
|
|
|
+ value: '',
|
|
|
+ footer: '',
|
|
|
+ color: MainColorType.orange,
|
|
|
+ result: TimeFormatter.formateDurationBySeconds(info.time.end_timestamp / 1000 - info.time.start_timestamp / 1000),
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (status == 'WFS') {
|
|
|
+ const count = info.time.duration / 1000
|
|
|
+ var str = TimeFormatter.formateDurationBySeconds(count)
|
|
|
+
|
|
|
+ return {
|
|
|
+ target: str,
|
|
|
+ goal: t('health.adjust_goal'),
|
|
|
+ color: MainColorType.orange
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var percent = 100 * (new Date().getTime() - info.time.start_timestamp) / info.time.duration
|
|
|
+ percent = parseInt(percent + '')
|
|
|
+ return {
|
|
|
+ progress: TimeFormatter.countdown(info.time.start_timestamp),
|
|
|
+ footer: t('health.elapsed', { percent: percent + '%' }),//`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>
|
|
|
+ }
|
|
|
+
|
|
|
+ function doneComponent() {
|
|
|
+ if (status == 'DONE') {
|
|
|
+ return <View className="share_bg" style={{ justifyContent: 'flex-start' }}>
|
|
|
+
|
|
|
+ <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={() => {
|
|
|
+ process.env.TARO_ENV == 'weapp' ? Taro.navigateBack() : navigation.goBack()
|
|
|
+ }}>
|
|
|
+ <IconClose color="#fff" width={rpxToPx(64)} height={rpxToPx(64)} />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ </View>
|
|
|
+ <View className="share_card2" 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 }} />
|
|
|
+ } */}
|
|
|
+ <RingProgress
|
|
|
+ radius={rpxToPx(250)} canvasId={"helloworld_share2" + scenario}
|
|
|
+ //scale={0.75}
|
|
|
+ count={count}
|
|
|
+ bgRing={{
|
|
|
+ color: 'rgba(255,255,255,1)',
|
|
|
+ width: rpxToPx(88)
|
|
|
+ }}
|
|
|
+ real={{
|
|
|
+ color: MainColorType.orange,
|
|
|
+ width: rpxToPx(16),
|
|
|
+ start: getStartArc(info.time.start_timestamp),
|
|
|
+ duration: getDurationArc(info.time.start_timestamp, info.time.end_timestamp)
|
|
|
+ }}
|
|
|
+ extra={ringExtra()}
|
|
|
+ shareBg={[MainColorType.orange]}
|
|
|
+ isCompleted
|
|
|
+ shareCover={
|
|
|
+ url => {
|
|
|
+ setShareUrl(url)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ />
|
|
|
+ {
|
|
|
+ <View className="share_operate_content">
|
|
|
+ {
|
|
|
+ showResult ? <View style={{ display: 'flex', flex: 1, flexDirection: 'row' }}>
|
|
|
+ <NewButton type={NewButtonType.custom} onClick={() => {
|
|
|
+ setShowDatePicker(true)
|
|
|
+ }}>
|
|
|
+ <View className="operate_item" >
|
|
|
+ <View className="g02 h24 white_50">{scenario == 'FAST' ? t('health.started') : t('health.bedtime1')}</View>
|
|
|
+ <View className="h44 bold white" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.start_timestamp, true)}</View>
|
|
|
+ <View className="h30 bold white_50">{scenario == 'FAST' ? t('health.adjust_start') : t('health.adjust_bedtime')}</View>
|
|
|
+ </View>
|
|
|
+ </NewButton>
|
|
|
+ <NewButton type={NewButtonType.custom} onClick={() => {
|
|
|
+ tapEndPicker()
|
|
|
+ }}>
|
|
|
+ <View className="operate_item" >
|
|
|
+ <View className={showHighlight ? 'card_highlight end_card_show' : ''} />
|
|
|
+ <View className="g02 h24 white_50">{scenario == 'FAST' ? t('health.finished') : t('health.wokeup')}</View>
|
|
|
+ <View className="h44 bold white" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.end_timestamp, true)}</View>
|
|
|
+ <View className="h30 bold white_50">{scenario == 'FAST' ? t('health.adjust_end') : t('health.adjust_wake_up')}</View>
|
|
|
+ </View>
|
|
|
+ </NewButton>
|
|
|
+ </View> :
|
|
|
+ <View className="white bold" style={{ fontSize: rpxToPx(72), display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>{scenario == 'FAST' ? t('health.fast_finished') : t('health.sleep_finished')}</View>
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ {/* {
|
|
|
+ showResult && <View style={{ opacity: 0 }}><View className="shareBtnAni" >
|
|
|
+ <ShareBtn hideShare={true}>
|
|
|
+ <NewButton type={NewButtonType.custom}>
|
|
|
+ <View className="share_btn1" style={{ backgroundColor: MainColorType.success }}>
|
|
|
+ <Image src={require('@assets/_health/wechat.png')} style={{ width: rpxToPx(48), height: rpxToPx(48) }} />
|
|
|
+ <View className="white bold h34">Send to friends</View>
|
|
|
+ </View>
|
|
|
+ </NewButton>
|
|
|
+ </ShareBtn>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ } */}
|
|
|
+
|
|
|
+ {
|
|
|
+ showResult && <NewButton type={NewButtonType.custom}
|
|
|
+ onClick={() => {
|
|
|
+ Taro.reLaunch({
|
|
|
+ url: '/pages/moment/moment'
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ ><View
|
|
|
+
|
|
|
+ className="bold h30 momentBtnAni" style={{ marginTop: rpxToPx(26) }}>{t('health.view_in_moments')}</View>
|
|
|
+ </NewButton>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ showResult && <NewButton type={NewButtonType.custom} onClick={() => {
|
|
|
+ Taro.redirectTo({
|
|
|
+ url: `./log_record?scenario=MEAL`
|
|
|
+ })
|
|
|
+ }}><View
|
|
|
+
|
|
|
+ className="h30 bold white_75 eatBtnAni" style={{
|
|
|
+ backgroundColor: MainColorType.black_05,
|
|
|
+ marginTop: rpxToPx(26),
|
|
|
+ width: rpxToPx(698),
|
|
|
+ height: rpxToPx(108),
|
|
|
+ borderRadius: rpxToPx(28),
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center'
|
|
|
+ }}>
|
|
|
+ {t('health.what_eating')}
|
|
|
+ </View>
|
|
|
+ </NewButton>
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function naviTitle() {
|
|
|
+ switch (status) {
|
|
|
+ case 'WFS':
|
|
|
+ return scenario == 'FAST' ? t('health.upcoming_fast') : t('health.upcoming_sleep')
|
|
|
+ case 'OG':
|
|
|
+ return scenario == 'FAST' ? t('health.you_are_fasting') : t('health.your_are_sleeping')
|
|
|
+ case 'DONE':
|
|
|
+ return scenario == 'FAST' ? 'Fast completed' : 'Sleep completed'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function bgView() {
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ return <View className="main_bg" style={{ background: getBackground() }} />
|
|
|
+ }
|
|
|
+ var time = record.time
|
|
|
+ if (!time) return <View />
|
|
|
+ const { background_colors } = time
|
|
|
+ if (!background_colors) {
|
|
|
+ return <View />
|
|
|
+ }
|
|
|
+ else if (background_colors.length == 1) {
|
|
|
+ return <View />
|
|
|
+ }
|
|
|
+ return <LinearGradient style={{
|
|
|
+ position: 'absolute',
|
|
|
+ left: 0,
|
|
|
+ top: 0,
|
|
|
+
|
|
|
+ width: rpxToPx(750),
|
|
|
+ height: screenHeight,
|
|
|
+ zIndex: 0,
|
|
|
+ pointerEvents: 'none'
|
|
|
+ }}
|
|
|
+ colors={[background_colors[0], background_colors[1]]}
|
|
|
+ start={{ x: 0, y: 0 }}
|
|
|
+ end={{ x: 0, y: 1 }} pointerEvents="none" />
|
|
|
+ }
|
|
|
+
|
|
|
+ function render() {
|
|
|
+
|
|
|
+ return <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
|
+ <View style={{ height: rpxToPx(26) }} />
|
|
|
+ <View className="progress_card">
|
|
|
+ <View onClick={() => {
|
|
|
+ tapClock()
|
|
|
+ // setShowDurationPicker(true)
|
|
|
+ }}>
|
|
|
+ <RingProgress
|
|
|
+ radius={rpxToPx(250)} canvasId={"helloworld" + scenario}
|
|
|
+ //scale={0.75}
|
|
|
+ count={count}
|
|
|
+ bgRing={{
|
|
|
+ color: 'rgba(255,255,255,0.25)',
|
|
|
+ width: rpxToPx(88)
|
|
|
+ }}
|
|
|
+ target={{
|
|
|
+ color: 'rgba(255,255,255,0.5)',
|
|
|
+ width: rpxToPx(88),
|
|
|
+ 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: rpxToPx(88),
|
|
|
+ start: getStartArc(info.time.start_timestamp),
|
|
|
+ duration: getDurationArc(info.time.start_timestamp, new Date().getTime())
|
|
|
+ }}
|
|
|
+ extra={ringExtra()}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ {
|
|
|
+ status == 'OG' && <View className="operate_content" style={{ marginTop: -rpxToPx(20) }}>
|
|
|
+ <NewButton type={NewButtonType.custom} onClick={() => {
|
|
|
+ tapStartPicker()
|
|
|
+ }}>
|
|
|
+ <View className="operate_item_index">
|
|
|
+ <View className={showHighlight ? 'card_highlight start_card_show' : ''} />
|
|
|
+ <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="h30 bold" style={{ color: MainColorType.orange }}>{scenario == 'FAST' ? t('health.adjust_start') : t('health.adjust_bedtime')}</View>
|
|
|
+ </View>
|
|
|
+ </NewButton>
|
|
|
+ <NewButton type={NewButtonType.custom} onClick={() => {
|
|
|
+ tapClock()
|
|
|
+ }}>
|
|
|
+ <View className="operate_item_index">
|
|
|
+ <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="h30 bold" style={{ color: MainColorType.orange }}>{t('health.adjust_goal')}</View>
|
|
|
+ </View>
|
|
|
+ </NewButton>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ status == 'WFS' && <NewButton
|
|
|
+ type={NewButtonType.fill}
|
|
|
+ title={scenario == 'FAST' ? record.actions.FAST_START : record.actions.SLEEP_BEDTIME}
|
|
|
+ width={rpxToPx(490)}
|
|
|
+ height={rpxToPx(108)}
|
|
|
+ color={MainColorType.orange}
|
|
|
+ onClick={start}
|
|
|
+ />
|
|
|
+ }
|
|
|
+
|
|
|
+ {
|
|
|
+ status == 'OG' && <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}><NewButton
|
|
|
+ type={NewButtonType.fill}
|
|
|
+ title={scenario == 'FAST' ? record.actions.FAST_END : record.actions.SLEEP_WAKE_UP}
|
|
|
+ width={rpxToPx(490)}
|
|
|
+ height={rpxToPx(108)}
|
|
|
+ color={MainColorType.orange}
|
|
|
+ onClick={end}
|
|
|
+ />
|
|
|
+ {/* <NewButton
|
|
|
+ type={NewButtonType.more}
|
|
|
+ onClick={more}
|
|
|
+ /> */}
|
|
|
+ <NewButton
|
|
|
+ type={NewButtonType.img}
|
|
|
+ btnStyle={{ marginRight: -rpxToPx(72) }}
|
|
|
+ onClick={more}
|
|
|
+ >
|
|
|
+ <View style={{ width: rpxToPx(72), height: rpxToPx(72), display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
|
+ <IconMore2 width={rpxToPx(36)} color="#000" />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ </NewButton>
|
|
|
+ {/* <View onClick={more}>More</View> */}
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ status == 'OG' && <View className="share_icon">
|
|
|
+ <ShareBtn>
|
|
|
+ <Image onClick={() => {
|
|
|
+ // setShareUrl('')
|
|
|
+ // setShowShare(true)
|
|
|
+ }} src={require('@assets/_health/wechat.png')} style={{
|
|
|
+ width: rpxToPx(72),
|
|
|
+ height: rpxToPx(72)
|
|
|
+ }} />
|
|
|
+ </ShareBtn>
|
|
|
+ </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.black_25} />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ } */}
|
|
|
+
|
|
|
+ {
|
|
|
+ props.join_id && <FollowInfo user={long.follow} timeMode={true} />
|
|
|
+ }
|
|
|
+
|
|
|
+ {/* {
|
|
|
+ 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={rpxToPx(250)} canvasId={"helloworld_share" + scenario}
|
|
|
+ //scale={0.75}
|
|
|
+ count={count}
|
|
|
+ bgRing={{
|
|
|
+ color: 'rgba(255,255,255,0.25)',
|
|
|
+ width: rpxToPx(88)
|
|
|
+ }}
|
|
|
+ target={{
|
|
|
+ color: 'rgba(255,255,255,0.5)',
|
|
|
+ width: rpxToPx(88),
|
|
|
+ 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: rpxToPx(88),
|
|
|
+ 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), flexShrink: 0 }} /> :
|
|
|
+ <View style={{ width: rpxToPx(900), height: rpxToPx(720), backgroundColor: MainColorType.g02, flexShrink: 0 }} />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ status == 'OG' && <View className="operate_content" style={{ marginTop: -rpxToPx(20) }}>
|
|
|
+ <View className="operate_item">
|
|
|
+ <View className="black_50 h24">STARTED</View>
|
|
|
+ <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.start_timestamp, true)}</View>
|
|
|
+ </View>
|
|
|
+ <View className="operate_item">
|
|
|
+ <View className="black_50 h24">{TimeFormatter.formateDurationBySeconds(info.time.duration / 1000)} Goal</View>
|
|
|
+ <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.target_end_timestamp, true)}</View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ <ShareBtn hideShare={true}>
|
|
|
+ <NewButton type={NewButtonType.custom} btnStyle={{ opacity: 0 }}>
|
|
|
+ <View className="share_btn1" style={{ backgroundColor: MainColorType.success }}>
|
|
|
+ <Image src={require('@assets/_health/wechat.png')} style={{ width: rpxToPx(48), height: rpxToPx(48) }} />
|
|
|
+ <View className="white bold h34">Send to friends</View>
|
|
|
+ </View>
|
|
|
+ </NewButton>
|
|
|
+ </ShareBtn>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ return <View style={{ width: rpxToPx(750), height: 1000, display: 'flex', flexShrink: 0, alignItems: 'center', flexDirection: 'column' }}>
|
|
|
+ {
|
|
|
+ status == 'DONE' ? doneComponent() : render()
|
|
|
+ }
|
|
|
+
|
|
|
+ <MomentDetailShare
|
|
|
+ user={user}
|
|
|
+ canvas_id={"time_record" + scenario}
|
|
|
+ btnColor={MainColorType.orange} />
|
|
|
+ </View>
|
|
|
+}
|
