|
|
@@ -0,0 +1,465 @@
|
|
|
+import { Component, PropsWithChildren, useEffect, useRef, useState } from 'react'
|
|
|
+import { View, Text, Button, Input, Picker, Swiper, SwiperItem, Icon } from '@tarojs/components'
|
|
|
+import '../index/index.scss'
|
|
|
+import './Clock.scss'
|
|
|
+// import './context/locales/index'
|
|
|
+import '@/context/locales/index'
|
|
|
+import Taro, { useDidShow, usePageScroll, useReady, useRouter, useShareAppMessage } from '@tarojs/taro'
|
|
|
+// import ComponentA from './component'
|
|
|
+
|
|
|
+
|
|
|
+import { useDispatch, useSelector } from 'react-redux';
|
|
|
+import { getInfoSuccess, logoutSuccess } from '@/store/user';
|
|
|
+import { wxPubFollow } from '@/services/permission';
|
|
|
+import { gobalConfigs, staticResources, uploadSessionKey } from '@/services/common';
|
|
|
+import Clocks from '@/features/trackTimeDuration/components/Clock';
|
|
|
+import Console from '@/features/trackTimeDuration/components/Console';
|
|
|
+import Schedule from '@/features/trackTimeDuration/components/Schedule';
|
|
|
+import { getChecks, getClocks } from '@/services/trackTimeDuration';
|
|
|
+import { setScenario } from '@/store/scenario';
|
|
|
+
|
|
|
+import { setSpecifiedStatus, setSpecifiedState, machine } from '@/store/trackTimeMachine';
|
|
|
+import trackTimeService from '@/store/trackTimeMachine';
|
|
|
+import { setWXFollow } from '@/store/permission';
|
|
|
+import Tooltip from '@/components/view/Tooltip'
|
|
|
+import RequestType, { thirdPartRequest } from '@/services/thirdPartRequest'
|
|
|
+import { setConfigs } from '@/store/common'
|
|
|
+import RecordFastSleep from '@/features/trackTimeDuration/components/RecordFastSleep'
|
|
|
+import Box from '@/components/layout/Box'
|
|
|
+import Layout from '@/components/layout/layout'
|
|
|
+import { CheckBoxType, NaviBarTitleShowType, TemplateType } from '@/utils/types'
|
|
|
+import { updateScenario } from '@/store/time'
|
|
|
+import { showModal } from '@/store/modal'
|
|
|
+import { ConsoleType, changeConsoleStatus } from '@/store/console'
|
|
|
+import TitleView from '@/features/trackTimeDuration/components/TitleView'
|
|
|
+import StatusIndicator from '@/features/trackTimeDuration/components/StatusIndicator'
|
|
|
+import { useTranslation } from 'react-i18next'
|
|
|
+import TableCellHeader from '@/components/layout/TableCellHeader'
|
|
|
+import SectionHeader from '@/components/layout/SectionHeader'
|
|
|
+import Header from '@/components/layout/Header'
|
|
|
+import { TimeFormatter } from '@/utils/time_format'
|
|
|
+import NoData from '@/components/view/NoData'
|
|
|
+import { ColorType } from '@/context/themes/color'
|
|
|
+// import TabBar from '../../components/Tabbar';
|
|
|
+
|
|
|
+// import Rings from '@components/view/Rings';
|
|
|
+
|
|
|
+
|
|
|
+export default function IndexPage() {
|
|
|
+
|
|
|
+ const dispatch = useDispatch();
|
|
|
+ const { t } = useTranslation()
|
|
|
+ const [checkData, setCheckData] = useState(null)
|
|
|
+ const user = useSelector((state: any) => state.user);
|
|
|
+ const time = useSelector((state: any) => state.time);
|
|
|
+ const common = useSelector((state: any) => state.common);
|
|
|
+ const consoleData = useSelector((state: any) => state.console);
|
|
|
+ const [counter, setCounter] = useState(0)
|
|
|
+ const [timerId, setTimerId] = useState(null)
|
|
|
+ const [needShowAddTip, setNeedShowAddTip] = useState(false)
|
|
|
+ const [showErrorPage, setErrorPage] = useState(false)
|
|
|
+
|
|
|
+ const [swiperIndex, setSwiperIndex] = useState(0)
|
|
|
+ const [autoPlay, setAutoPlay] = useState(false)
|
|
|
+
|
|
|
+ const [showModal, setShowModal] = useState(false)
|
|
|
+ const [modalDetail, setModalDetail] = useState<any>({})
|
|
|
+
|
|
|
+ const [showModal2, setShowModal2] = useState(false)
|
|
|
+ const [modalDetail2, setModalDetail2] = useState<any>({})
|
|
|
+ const [showSingleFastEnd, setShowSingleFastEnd] = useState(false)
|
|
|
+ const [consoleStatus, setConsoleStatus] = useState(consoleData.status)
|
|
|
+
|
|
|
+
|
|
|
+ global.dispatch = dispatch;
|
|
|
+
|
|
|
+ global.checkData = () => {
|
|
|
+ console.log('refresh clock data')
|
|
|
+ getCheckData()
|
|
|
+ }
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ global.consoleType = 'idle'
|
|
|
+ dispatch(staticResources() as any);
|
|
|
+ // dispatch(gobalConfigs() as any);
|
|
|
+ trackTimeService.onTransition(state => {
|
|
|
+ if ((state.value as any).FAST_SLEEP == 'COMPLETED' ||
|
|
|
+ (state.value as any).FAST == 'ONGOING' ||
|
|
|
+ (state.value as any).SLEEP == 'ONGOING' ||
|
|
|
+ (state.value as any).FAST_SLEEP == 'ONGOING1' ||
|
|
|
+ (state.value as any).FAST_SLEEP == 'ONGOING2' ||
|
|
|
+ (state.value as any).FAST_SLEEP == 'ONGOING3' ||
|
|
|
+ (state.value as any).FAST == 'COMPLETED' ||
|
|
|
+ (state.value as any).SLEEP == 'COMPLETED') {
|
|
|
+ getCheckData()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ setConsoleStatus(consoleData.status)
|
|
|
+ switch (consoleData.status) {
|
|
|
+ // case ConsoleType.going:
|
|
|
+ // setShowSingleFastEnd(true)
|
|
|
+ // setTimeout(() => {
|
|
|
+ // setShowSingleFastEnd(false)
|
|
|
+ // setSwiperIndex(1)
|
|
|
+ // setAutoPlay(true)
|
|
|
+ // dispatch(changeConsoleStatus({ status: ConsoleType.end }))
|
|
|
+ // }, 2000)
|
|
|
+ // break
|
|
|
+ case ConsoleType.end:
|
|
|
+ setTimeout(() => {
|
|
|
+ dispatch(changeConsoleStatus({ status: ConsoleType.idle }))
|
|
|
+ }, 2000)
|
|
|
+
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }, [consoleData.status])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (user.isLogin) {
|
|
|
+ //检查用户是否添加过小程序
|
|
|
+ checkAddToMini();
|
|
|
+ //检查session是否过期
|
|
|
+ checkSession()
|
|
|
+ getCheckData()
|
|
|
+ }
|
|
|
+ }, [user.isLogin])
|
|
|
+
|
|
|
+ function checkSession() {
|
|
|
+ if (process.env.TARO_ENV === 'weapp') {
|
|
|
+ thirdPartRequest(RequestType.RequestTypeCheckSession).then(res => {
|
|
|
+ }).catch(err => {
|
|
|
+ console.log('session_key 已经失效，需要更新登录code')
|
|
|
+ thirdPartRequest(RequestType.RequestTypeWXLogin).then(result => {
|
|
|
+ uploadSessionKey({ type: 'WX_MP', code: (result as any).code });
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function checkAddToMini() {
|
|
|
+ process.env.TARO_ENV == 'weapp' &&
|
|
|
+ wx.checkIsAddedToMyMiniProgram({
|
|
|
+ success: (res) => {
|
|
|
+ if (!res.added) {
|
|
|
+ setNeedShowAddTip(true)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ startTimer();
|
|
|
+ return () => {
|
|
|
+ // 在组件卸载时清除定时器
|
|
|
+ if (timerId) {
|
|
|
+ clearInterval(timerId);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }, [timerId]);
|
|
|
+
|
|
|
+ const startTimer = () => {
|
|
|
+ // 避免重复启动定时器
|
|
|
+ if (timerId) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const id = setInterval(() => {
|
|
|
+ setCounter((prevCounter) => prevCounter + 1);
|
|
|
+ //每天0点刷新一下打卡数据
|
|
|
+ var now = new Date()
|
|
|
+ if (now.getHours() == 0 && now.getMinutes() == 0) {
|
|
|
+ getCheckData()
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ setTimerId(id as any);
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ useReady(async () => {
|
|
|
+ // const userData = await getStorage('userData');
|
|
|
+ // if (userData) {
|
|
|
+ // dispatch(getInfoSuccess(JSON.parse(userData as string)) as any);
|
|
|
+ // setTimeout(() => {
|
|
|
+ // checkWXPubFollow()
|
|
|
+ // getCheckData()
|
|
|
+
|
|
|
+ // }, 200)
|
|
|
+
|
|
|
+ // }
|
|
|
+ })
|
|
|
+
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ useShareAppMessage((e) => {
|
|
|
+ return {
|
|
|
+ title: t('share.title'),
|
|
|
+ path: 'pages/clock/Clock'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function clearTempScenarioCache() {
|
|
|
+ global.schedule_fast = null
|
|
|
+ global.schedule_sleep = null
|
|
|
+ Taro.removeStorage({
|
|
|
+ key: 'tempScenario',
|
|
|
+ success: function (res) {
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ usePageScroll((e) => {
|
|
|
+ })
|
|
|
+
|
|
|
+ useDidShow(() => {
|
|
|
+ global.updateTab(0)
|
|
|
+ if (user.isLogin) {
|
|
|
+ checkWXPubFollow()
|
|
|
+ // getCheckData();
|
|
|
+ }
|
|
|
+ clearTempScenarioCache()
|
|
|
+ })
|
|
|
+
|
|
|
+ global.refreshTime = () => {
|
|
|
+ getCheckData()
|
|
|
+ }
|
|
|
+
|
|
|
+ global.showSingleFastEnd = () => {
|
|
|
+ setShowSingleFastEnd(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ function tapClock() {
|
|
|
+ if (!user.isLogin) {
|
|
|
+ Taro.navigateTo({
|
|
|
+ url: '/pages/account/ChooseAuth'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function getCheckData() {
|
|
|
+ getClocks().then(res => {
|
|
|
+ setErrorPage(false)
|
|
|
+ dispatch(updateScenario((res as any).current_record))
|
|
|
+ dispatch(setConfigs((res as any).time_input_schema));
|
|
|
+ dispatch(setScenario((res as any).scenario));
|
|
|
+
|
|
|
+ if ((res as any).theme_color) {
|
|
|
+ global.fastColor = (res as any).theme_color.fast
|
|
|
+ global.sleepColor = (res as any).theme_color.sleep
|
|
|
+ }
|
|
|
+ machine.context.checkData = res as any;
|
|
|
+
|
|
|
+ global.scenario = (res as any).current_record.scenario;
|
|
|
+ const currentState = trackTimeService.getSnapshot();
|
|
|
+ let json = {};
|
|
|
+ var key = (res as any).current_record.scenario
|
|
|
+ var status = (res as any).current_record.status
|
|
|
+ json[key] = status
|
|
|
+ currentState.value = json;
|
|
|
+ machine.context.currentStatus = `${key}.${status}`;//'mixed.ON_GOING2'
|
|
|
+ setCheckData(res as any)
|
|
|
+
|
|
|
+ if ((res as any).current_record.status != 'ONGOING1') {
|
|
|
+ setSwiperIndex(0)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (global.consoleType == 'going') {
|
|
|
+ setShowSingleFastEnd(true)
|
|
|
+ setTimeout(() => {
|
|
|
+ setShowSingleFastEnd(false)
|
|
|
+ setSwiperIndex(1)
|
|
|
+ setAutoPlay(true)
|
|
|
+ global.consoleType = 'end'
|
|
|
+ dispatch(changeConsoleStatus({ status: ConsoleType.end }))
|
|
|
+ setTimeout(() => {
|
|
|
+ global.consoleType = 'idle'
|
|
|
+ }, 2000)
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(e => {
|
|
|
+ console.log('aaa')
|
|
|
+ if (!checkData) {
|
|
|
+ console.log('this is a test')
|
|
|
+ setErrorPage(true)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ console.log('sss')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function checkWXPubFollow() {
|
|
|
+ wxPubFollow().then(res => {
|
|
|
+ dispatch(setWXFollow((res as any).wx_pub_followed));
|
|
|
+ console.log('当前的关注状态' + (res as any).wx_pub_followed);
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ async function getStorage(key: string) {
|
|
|
+ try {
|
|
|
+ const res = await Taro.getStorage({ key });
|
|
|
+ return res.data;
|
|
|
+ } catch {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function schedule() {
|
|
|
+ if (!user.isLogin) {
|
|
|
+ return <View />
|
|
|
+ }
|
|
|
+ return <Schedule data={(checkData as any).current_record} />
|
|
|
+ }
|
|
|
+
|
|
|
+ function needSwiper() {
|
|
|
+ var isNeed = time.scenario == 'FAST_SLEEP' &&
|
|
|
+ (time.status == 'WAIT_FOR_START' ||
|
|
|
+ time.status == 'ONGOING1' ||
|
|
|
+ time.status == 'ONGOING2')
|
|
|
+ if (showSingleFastEnd) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return isNeed
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ global.showClockModal = (isShow: boolean, detail: any) => {
|
|
|
+ setShowModal(isShow)
|
|
|
+ setModalDetail(detail)
|
|
|
+ }
|
|
|
+
|
|
|
+ global.showClockModal2 = (isShow: boolean, detail: any) => {
|
|
|
+ setShowModal2(isShow)
|
|
|
+ setModalDetail2(detail)
|
|
|
+ }
|
|
|
+
|
|
|
+ function headerView() {
|
|
|
+ return <TitleView title={t('page.clock.title')} showAddBtn={true}>
|
|
|
+ <StatusIndicator />
|
|
|
+ </TitleView>
|
|
|
+ }
|
|
|
+
|
|
|
+ function errorView() {
|
|
|
+ if (showErrorPage) {
|
|
|
+ return <NoData refresh={() => { getCheckData() }} />
|
|
|
+ }
|
|
|
+ return <View />
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function consoleView() {
|
|
|
+ if (!checkData) {
|
|
|
+ return <View />
|
|
|
+ }
|
|
|
+ return <View className='console_bg'>
|
|
|
+ {
|
|
|
+ needSwiper() ? <Swiper className='swiper' indicatorColor='#333'
|
|
|
+ indicatorActiveColor='#999'
|
|
|
+ current={swiperIndex}
|
|
|
+ autoplay={autoPlay}
|
|
|
+ duration={300}
|
|
|
+ interval={300}
|
|
|
+ // indicator-margin={30}
|
|
|
+ indicator-offset={[0, -30]}
|
|
|
+ indicator-height={30}
|
|
|
+ indicatorDots={global.consoleType == 'idle'}
|
|
|
+ onChange={(e) => {
|
|
|
+ setSwiperIndex(e.detail.current)
|
|
|
+ if (e.detail.current == 0)
|
|
|
+ setAutoPlay(false)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <SwiperItem className='swiperItem'>
|
|
|
+ <Console />
|
|
|
+ </SwiperItem>
|
|
|
+
|
|
|
+ <SwiperItem className='swiperItem'>
|
|
|
+ <Console isNextStep={true} />
|
|
|
+ </SwiperItem>
|
|
|
+ </Swiper> :
|
|
|
+ <Console isNextStep={showSingleFastEnd} />
|
|
|
+
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function detail() {
|
|
|
+ return (
|
|
|
+ <Layout type={TemplateType.customHeader} header={headerView()} title={t('page.clock.title')} titleShowStyle={NaviBarTitleShowType.scrollToShow}>
|
|
|
+ <View style={{ flex: 1, flexDirection: 'column', display: 'flex', backgroundColor: '#000', color: '#fff' }}>
|
|
|
+ {
|
|
|
+ needShowAddTip && <Tooltip title="添加到我的小程序" closeTip={() => { setNeedShowAddTip(false) }} />
|
|
|
+ }
|
|
|
+
|
|
|
+ <Box>
|
|
|
+ <View className='clock_bg' onClick={tapClock}>
|
|
|
+ <Clocks />
|
|
|
+ </View>
|
|
|
+ </Box>
|
|
|
+ {
|
|
|
+ errorView()
|
|
|
+ }
|
|
|
+ {
|
|
|
+ user.isLogin && consoleView()
|
|
|
+ }
|
|
|
+ {
|
|
|
+ user.isLogin && checkData && schedule()
|
|
|
+ }
|
|
|
+ {
|
|
|
+ user.isLogin && <View style={{ backgroundColor: global.isDebug ? 'pink' : 'transparent' }}>
|
|
|
+ {
|
|
|
+ checkData && (checkData as any).latest_record &&
|
|
|
+ <SectionHeader top={48} bottom={24} title={t('feature.track_time_duration.record_fast_sleep.header.latest_record')}>
|
|
|
+ <Header title='' action={() => {
|
|
|
+ Taro.navigateTo({
|
|
|
+ url: '/pages/common/RecordsHistory?type=time&title=time'
|
|
|
+ })
|
|
|
+ }} />
|
|
|
+ </SectionHeader>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ user.isLogin && checkData && (checkData as any).latest_record &&
|
|
|
+ <RecordFastSleep type='latest' data={(checkData as any).latest_record} delSuccess={getCheckData} />
|
|
|
+ }
|
|
|
+ <View style={{ height: 100 }} />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ {
|
|
|
+ showModal && modalDetail
|
|
|
+ }
|
|
|
+ {
|
|
|
+ showModal2 && modalDetail2
|
|
|
+ }
|
|
|
+
|
|
|
+ </Layout>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ return detail()
|
|
|
+}
|
Leon