taro/src/pages/clock/ClockMain.tsx

import { View, Text, Image, ScrollView, PageContainer, Swiper, SwiperItem, Switch } from "@tarojs/components";
import Tabbar from "@/components/navigation/TabBar";
import IndexItem from '@/features/trackTimeDuration/components/IndexItem';
import Rings from "@/features/trackTimeDuration/components/Rings";
import './Clock.scss'
import { useDispatch, useSelector } from "react-redux";
import { useDidHide, useDidShow, usePageScroll, useReady, useShareAppMessage } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import { getInfoSuccess } from "@/store/user";
import { clockHome, clockSummaryRecords, clockSummaryStats, getClockRecords, getClocks, getPlans } from "@/services/trackTimeDuration";
import { updateScenario } from "@/store/time";
import { setConfigs } from "@/store/common";
import { setScenario, setStep } from "@/store/scenario";
import { useEffect, useRef, useState } from "react";
import { IconPlus, IconRadioCheck, IconRadioCross } from "@/components/basic/Icons";
import { ColorType } from "@/context/themes/color";
import { bigRingRadius, getBgRing, getCommon, getDot, getSchedule, ringWidth, smallRingRadius } from "@/features/trackTimeDuration/hooks/RingData";
import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import IndexConsole from "@/features/trackTimeDuration/components/IndexConsole";
import Modal from '@/components/layout/Modal'
import { compareVersion, getTimezone, getTimezoneId, getTimezoneName, kIsIOS, rpxToPx } from "@/utils/tools";
import RecordFastSleep from "@/features/trackTimeDuration/components/RecordFastSleep";
import WeekCalendar from "@/features/trackTimeDuration/components/WeekCalendar";
import { useTranslation } from "react-i18next";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import Layout from "@/components/layout/layout";
import { ModalType, NaviBarTitleShowType, TemplateType } from "@/utils/types";
import ClockHeader from "@/features/trackTimeDuration/components/ClockHeader";
import DurationPicker from "@/features/trackTimeDuration/components/DurationPicker";
import SegmentPop from "@/features/trackTimeDuration/components/SegmentPop";
import Box from "@/components/layout/Box";
import DayNightCard from "@/features/daynight/DayNightCard";
import StageSelector from "@/features/trackTimeDuration/components/StageSelector";
import { ChooseScenarioBtn } from "@/features/common/SpecBtns";
import { clearNightStore, showNight } from "@/store/night";
import { showDay } from "@/store/day";
import { clientInfo, staticResources, systemVersion } from "@/services/common";
import { changeFastDuration, changeSleepDuration, setCurrentRecord, setSchedule } from "@/store/ring";
import { checkAuthorized } from "@/utils/check_authorized";
import { AtActivityIndicator } from "taro-ui";
import Tooltip from "@/components/view/Tooltip";
import AllRings from "@/features/daynight/AllRings";
import Streaks from "@/features/trackTimeDuration/components/Streaks";

import dayjs from 'dayjs'
import DayNightSwiper from "@/features/daynight/DayNightSwiper";
import showAlert from "@/components/basic/Alert";
import { APP_VERSION, WX_VERSION } from "@/services/http/api";
import { wxPubFollow } from "@/services/permission";
import { repeat } from "lodash";
import { setWXFollow } from "@/store/permission";
import Discovery from "@/features/trackTimeDuration/components/Discovery";
import NoData from "@/components/view/NoData";
import { getLocalPush } from "@/features/trackTimeDuration/actions/TrackTimeActions";
import { TimeFormatter } from "@/utils/time_format";

const utc = require('dayjs/plugin/utc')
const timezone = require('dayjs/plugin/timezone')

dayjs.extend(utc)
dayjs.extend(timezone)

let GradientText
let useNavigation;
let timer
let pauseTimer = false;
let AppState;
let needScroll = false;
let showUpdate = false;
let Linking;
let PushNotification;
let checkNotification, uploadPermissions, NativeAppEventEmitter;
let messaging;

if (process.env.TARO_ENV == 'rn') {
    messaging = require('@react-native-firebase/messaging').default
    PushNotification = require('react-native-push-notification')
    Linking = require('react-native').Linking;
    AppState = require("react-native").AppState
    NativeAppEventEmitter = require("react-native").NativeAppEventEmitter
    GradientText = require('@/components/basic/GradientText').default
    useNavigation = require("@react-navigation/native").useNavigation
    checkNotification = require('@/utils/native_permission_check').checkNotification;
    uploadPermissions = require('@/utils/native_permission_check').uploadPermissions;
}

const defaultValue = `[{"scenario":{"name":"FAST_SLEEP","count":0,"schedule":{"fast":{"start_time":"15:00","end_time":"08:00"},"sleep":{"start_time":"22:00","end_time":"07:00"}}},"current_record":{"scenario":"FAST_SLEEP","status":"WAIT_FOR_START","fast":{"status":"WAIT_FOR_START","target_start_time":1710514800000,"target_end_time":1710576000000},"sleep":{"status":"WAIT_FOR_START","target_start_time":1710540000000,"target_end_time":1710572400000}},"wx_pub_followed":false,"time_input_schema":{"min":60,"max":1380,"step":5},"theme_color":{"fast":"#00FFFF","sleep":"#8183FF"}},{"scenarios":[{"name":"FAST","count":0,"schedule":{"fast":{"start_time":"15:00","end_time":"08:00"}}},{"name":"SLEEP","count":0,"schedule":{"sleep":{"start_time":"22:00","end_time":"07:00"}}},{"name":"FAST_SLEEP","count":0,"schedule":{"fast":{"start_time":"15:00","end_time":"08:00"},"sleep":{"start_time":"22:00","end_time":"07:00"}}}],"select_count":0,"theme_color":{"fast":"#00FFFF","sleep":"#8183FF"}}]`
let fcmUnsubscribe: any = null;
export default function Page() {
    const dispatch = useDispatch();
    global.dispatch = dispatch;
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    const { t } = useTranslation()
    const user = useSelector((state: any) => state.user);
    const time = useSelector((state: any) => state.time);
    const [count, setCount] = useState(0)
    const [homeData, setHomeData] = useState(null)
    const [loaded, setLoaded] = useState(false)
    const [showErrorPage, setErrorPage] = useState(false)

    const [showModal, setShowModal] = useState(false)
    const [modalDetail, setModalDetail] = useState<any>(null)

    const [showModal2, setShowModal2] = useState(false)
    const [modalDetail2, setModalDetail2] = useState<any>(null)

    const [debugInfo, setDebugInfo] = useState(null)
    const [needShowAddTip, setNeedShowAddTip] = useState(false)
    const [showTip, setShowTip] = useState(false)
    const [records, setRecords] = useState([])

    const [schedules, setSchedules] = useState<any>(null)

    const permission = useSelector((state: any) => state.permission);
    const common = useSelector((state: any) => state.common);

    const scrollRef = useRef(null);

    const nightStore = useSelector((state: any) => state.night);
    if (process.env.TARO_ENV == 'weapp') {
        useShareAppMessage((e) => {
            return {
                title: t('feature.track_time_duration.common.share_title'),
                path: 'pages/clock/Clock'
            }
        })
    }

    useEffect(() => {
        console.log(new Date().toString());
        dispatch(staticResources() as any);
        console.log('计时器开始')
        pauseTimer = false;
        mainTimer()
    }, [])

    function mainTimer(){
        if (timer) {
            clearInterval(timer)
            timer = null
        }
        timer = setInterval(() => {
            var now = new Date()
            if (now.getDay() == 0 && now.getHours() == 12 && now.getMinutes() == 0 && now.getSeconds() == 0) {
                if (global.refrehWeekly) {
                    global.refrehWeekly()
                }
            }
            console.log('9527')
            if (global.pauseIndexTimer || pauseTimer) {
                console.log('pause')
                return
            }
            setCount((prevCounter) => prevCounter + 1)

        }, 1000)
    }



    useEffect(() => {

        if (process.env.TARO_ENV == 'rn') {
            // JPush.setBadge({
            //     badge: 0,
            //     appBadge: 0
            // })
            // JPush.isNotificationEnabled((res) => {
            //     if (res) {
            //         const test = require('@/utils/push').default
            //         test()
            //     }
            // })

            AppState.addEventListener('change', handleAppStateChange);
        }

    }, [])

    useEffect(() => {
        getCheckData()



        if (user.isLogin) {
            uploadUserClient();
            checkAuthorized();
            //检查用户是否添加过小程序
            checkAddToMini();
            wxPubFollow({ force_refresh: true }).then(res => {
                dispatch(setWXFollow((res as any).wx_pub_followed));
            })



            if (process.env.TARO_ENV == 'rn') {
                if (kIsIOS) {
                    var Jto = require('react-native').NativeModules.NativeBridge;
                    Jto.getNotificationAuthStatus()
                    // Jto.rnPageLoaded()
                    NativeAppEventEmitter.addListener('notificationResult', (data) => {
                        console.log('notification auth result', data)
                        global.notification = data;
                        uploadPermissions()
                    })
                }

                // uploadPermissions()
                // JPush.isNotificationEnabled((res) => {
                //     if (res) {
                //         const test = require('@/utils/push').default
                //         test()
                //     }
                // })


                checkVersionUpdate()
            }
        }
        else {
            dispatch(clearNightStore());


        }

    }, [user.isLogin])

    useReady(async () => {
        const userData = await getStorage('userData');
        if (userData) {
            dispatch(getInfoSuccess(JSON.parse(userData as string)) as any);
            getHistory()
        }

    })

    async function checkVersionUpdate() {
        if (!user.isLogin) {
            return
        }

        if (process.env.TARO_ENV == 'rn') {
            systemVersion().then(res => {
                if ((res as any).result == 'UPDATE' && !showUpdate) {
                    showUpdate = true
                    showAlert({
                        title: (res as any).title,
                        content: (res as any).description,
                        showCancel: true,
                        confirmText: 'Update',
                        confirm: () => {
                            Linking.openURL((res as any).download_url)
                        }
                    })
                }
                else if ((res as any).result == 'FORCE_UPDATE') {
                    showAlert({
                        title: (res as any).title,
                        content: (res as any).description,
                        showCancel: false,
                        confirmText: 'Update',
                        confirm: () => {
                            Linking.openURL((res as any).download_url)
                        }
                    })
                }
            })
            return;
        }

        const showAlert1 = await getStorage('121alert') || false;
        if (!showAlert1) {
            showAlert({
                title: '重要更新提示',
                content: '🔥 连续打卡天数现根据结束日期统计;\n 🪐 断食与睡眠升级为高级功能。\n连续打卡的老用户仍可继续使用。\n更多高级功能如『进食窗口』显示、『社区排行』等敬请期待！',
                showCancel: false,
                confirmText: '我知道了'
            })
        }
        Taro.setStorage({ key: '121alert', data: true })

    }

    function checkAddToMini() {
        if (process.env.TARO_ENV == 'weapp') {
            const version = Taro.getAppBaseInfo().SDKVersion
            if (compareVersion(version, '2.30.3') >= 0) {
                wx.checkIsAddedToMyMiniProgram({
                    success: (res) => {
                        if (!res.added) {
                            setNeedShowAddTip(true)
                        }
                    },
                    fail: (e) => {
                    }
                });
            }
        }

    }

    useDidShow(() => {
        if (process.env.TARO_ENV == 'weapp') {
            checkTimeZone()
        }

        setCount(pre => pre + 1)
        //resume timer
        pauseTimer = false
        if (user.isLogin) {
            if (global.refreshRecent) {
                global.refreshRecent()
            }
        }
        setTimeout(() => {
            checkVersionUpdate();
            updateNotificationStatus();
        }, 1000)

    })

    usePageScroll((e) => {
        if (e.scrollTop > 70) {
            setShowTip(true)
        }
        else {
            setShowTip(false)
        }

    })

    useDidHide(() => {
        //pause timer
        pauseTimer = true
    })

    global.refreshIndex = () => {
        setCount((prevCounter) => prevCounter + 1)
    }

    const handleAppStateChange = (nextAppState) => {
        console.log(nextAppState)
        if (nextAppState != 'active') {
            return
        }
        if (nextAppState == 'active') {
            checkTimeZone()
            updateNotificationStatus()
            mainTimer()
        }

    };

    function updateNotificationStatus() {
        if (process.env.TARO_ENV == 'rn') {
            if (user.isLogin) {
                if (kIsIOS) {
                    var Jto = require('react-native').NativeModules.NativeBridge;
                    Jto.getNotificationAuthStatus()
                }
            }
            // JPush.setBadge({
            //     badge: 0,
            //     appBadge: 0
            // })
        }
    }

    function checkTimeZone() {
        getLocalPush()
        setCount((prevCounter) => prevCounter + 1)
        var timeZoneFormatted = getTimezone()


        Taro.getStorage({
            key: 'last_tz',
            success: function (res) {
                if (res.data && res.data != timeZoneFormatted) {
                    if (global.refrehWeekly) {
                        global.refrehWeekly()
                    }

                    global.indexPageRefresh()

                    // if (global.refreshNight){
                    //     global.refreshNight()
                    // }
                    // if (global.refreshDay){
                    //     global.refreshDay()
                    // }
                    // if (global.currentStatus != 'WAIT_FOR_START') {
                    showAlert({
                        title: t('feature.track_time_duration.change_tz_alert.title'),
                        content: t('feature.track_time_duration.change_tz_alert.content', { tz: timeZoneFormatted }),
                        showCancel: false,
                        confirmText: t('feature.track_time_duration.change_tz_alert.confirm'),
                    })
                    // }
                }
            },
            complete: function () {
                Taro.setStorage({ key: 'last_tz', data: timeZoneFormatted })
            }
        })
    }

    function uploadUserClient() {
        var systemInfo = Taro.getSystemInfoSync();
        console.log(systemInfo)

        var language: any = systemInfo.language

        if (process.env.TARO_ENV == 'rn') {
            var NativeModules = require('react-native').NativeModules;
            if (kIsIOS) {
                // language = NativeModules.SettingsManager.settings.AppleLocale
                // languageList = NativeModules.SettingsManager.settings.AppleLanguages
                language = {
                    AppleLocale: NativeModules.SettingsManager.settings.AppleLocale,
                    AppleLanguages: NativeModules.SettingsManager.settings.AppleLanguages,
                    NSLanguages: NativeModules.SettingsManager.settings.NSLanguages
                }
            }
            else {
                language = NativeModules.I18nManager.localeIdentifier
            }
            // iOS:
            // var locale = NativeModules.SettingsManager.settings.AppleLocale ||
            //     NativeModules.SettingsManager.settings.AppleLanguages[0] // "fr_FR"

            // showAlert({
            //     title: 'locale',
            //     content: JSON.stringify(NativeModules.SettingsManager.settings)
            // })
            // Android:
            // locale = NativeModules.I18nManager.localeIdentifier // "fr_FR"
        }
        var timeZoneFormatted = getTimezone()
        var timeZoneId = ''
        var timeZoneName = ''
        if (kIsIOS) {
            timeZoneId = getTimezoneId()
            timeZoneName = getTimezoneName()
        }

        var clientInfoParams = {
            client: {
                client_type: process.env.TARO_ENV == 'weapp' ? 'MP' : 'APP',
                client_version: process.env.TARO_ENV == 'weapp' ? WX_VERSION : APP_VERSION,//Taro.getAccountInfoSync().miniProgram.version : '1.0',//'1.0'
                wx_version: process.env.TARO_ENV == 'weapp' ? systemInfo.version : '_'
            },
            meta: {
                language: language,
                timezone: {
                    gmt: timeZoneFormatted,
                    id: timeZoneId,
                    name: timeZoneName
                },
            },
            device: {
                brand: systemInfo.brand,
                model: systemInfo.model,
                platform: systemInfo.platform,
                system: systemInfo.system
            },
        }

        if (process.env.TARO_ENV == 'weapp') {
            (clientInfoParams as any).perm = {
                wxmp: {
                    wifi_enabled: systemInfo.wifiEnabled,
                    location_authorized: systemInfo.locationAuthorized,
                    location_enabled: systemInfo.locationEnabled
                }
            }
        }
        clientInfo(clientInfoParams)
    }

    function getCheckData() {
        Promise.all([getClocks(), getPlans()]).then((list) => {
            setErrorPage(false)
            setCheckData(list)

            if (needScroll) {
                needScroll = false
                if (process.env.TARO_ENV == 'weapp') {
                    setTimeout(() => {
                        Taro.createSelectorQuery().select('#latest').boundingClientRect((rect) => {
                            Taro.pageScrollTo({
                                scrollTop: (rect as any).top,
                                duration: 150
                            })
                        }).exec()
                    }, 100)
                }
                else {
                    // debugger
                    // (scrollRef.current as any).scrollTo({ y: rpxToPx(400), animated: true })
                }
            }

            if (process.env.TARO_ENV == 'rn' && user.isLogin) {
                if (kIsIOS) {
                    var Jto = require('react-native').NativeModules.NativeBridge;
                    Jto.rnPageLoaded()
                }
            }

            setLoaded(true)
        }).catch((e) => {
            setErrorPage(true)
            var list = JSON.parse(defaultValue)
            setCheckData(list)
            needScroll = false

            setLoaded(true)
        })

        getHistory()
    }

    function setCheckData(list: any) {
        setHomeData(list[0])
        setSchedules(list[1].scenarios)
        global.homeData = list[0]
        global.currentStatus = list[0].current_record.status;
        var array = list[1].scenarios
        var schedule: any = null
        array.map(item => {
            if (item.name == 'FAST_SLEEP') {
                schedule = item.schedule;
                schedule.sleep.prev_input = item.prev_input;
                schedule.sleep.valid = item.valid;
            }
        })
        if (user.isLogin) {
            dispatch(updateScenario(list[0].current_record))
            dispatch(setConfigs(list[0].time_input_schema));
            dispatch(setScenario(list[0].scenario));



            global.scenario = list[0].scenario.name;
        }
        dispatch(setCurrentRecord(list[0].current_record))
        dispatch(setSchedule(schedule))
        // setLoaded(true)
    }



    function getHistory() {
        if (user.isLogin)
            getClockRecords({
                page: 1,
                limit: 1,
                // part_completed: true
                completed: true
            }).then(res => {
                setRecords((res as any).data)
            })
    }

    global.indexPageRefresh = () => {
        if (global.refreshStreaks) {
            global.refreshStreaks()
        }
        getCheckData()

        if (global.swiperDayNightRefresh) {
            global.swiperDayNightRefresh()
        }

    }

    global.showIndexModal = (isShow: boolean, detail: any, debugNode?: any) => {
        global.showModal = isShow
        setDebugInfo(debugNode)
        setShowModal(isShow)
        setModalDetail(detail)
    }

    global.showIndexModal2 = (isShow: boolean, detail: any) => {
        setDebugInfo(null)
        global.showModal = isShow
        setShowModal2(isShow)
        setModalDetail2(detail)
    }

    global.changeTargetDuration = (duration: number, isFast: boolean) => {
        var obj = JSON.parse(JSON.stringify(homeData))
        var record = obj.current_record
        if (isFast) {
            record.fast.target_end_time = record.fast.target_start_time + duration * 60 * 1000
        }
        else {
            record.sleep.target_end_time = record.sleep.target_start_time + duration * 60 * 1000
        }
        setHomeData(obj)
    }

    global.updateFastSleepData = (data: any, schedule?: any) => {
        if (data.id == (homeData as any).current_record.id) {
            var obj = JSON.parse(JSON.stringify(homeData))
            obj.current_record = data
            if (schedule) {
                obj.scenario.schedule = schedule
            }
            setHomeData(obj)
        }

        switch (data.scenario) {
            case 'FAST':
                if (data.status == 'WAIT_FOR_START') {
                    dispatch(changeFastDuration(data.fast.target_end_time - data.fast.target_start_time))
                }
                break;
            case 'SLEEP':
                if (data.status == 'WAIT_FOR_START') {
                    dispatch(changeSleepDuration(data.sleep.target_end_time - data.sleep.target_start_time))
                }
                break;
            case 'FAST_SLEEP':
                if (data.status == 'WAIT_FOR_START') {
                    dispatch(changeFastDuration(data.fast.target_end_time - data.fast.target_start_time))
                }
                else if (data.status == 'ONGOING1') {
                    dispatch(changeSleepDuration(data.sleep.target_end_time - data.sleep.target_start_time))
                }
                break;
        }

    }

    global.popScheduleAlert = (scenario, startTime) => {
        if (process.env.TARO_ENV == 'weapp') {
            if (permission.wxPubFollow) {
            }
            else {
                showAlert({
                    title: t('feature.track_time_duration.reminders.schedule_title'),
                    content: scenario.name == 'FAST' ?
                        t('feature.track_time_duration.reminders.schedule_fast_content', { time: startTime }) :
                        t('feature.track_time_duration.reminders.schedule_sleep_content', { time: startTime }),
                    cancelText: t('feature.track_time_duration.reminders.later'),
                    confirmText: t('feature.track_time_duration.reminders.open'),
                    showCancel: true,
                    confirm: () => {
                        followWxPub()
                    }
                })
            }
        }
        else {
            PushNotification.checkPermissions((res) => {
                //允许授权
                if (res.authorizationStatus == 2) {
                }
                else {
                    showAlert({
                        title: t('feature.track_time_duration.reminders.schedule_title'),
                        content: scenario.name == 'FAST' ?
                            t('feature.track_time_duration.reminders.schedule_fast_content', { time: startTime }) :
                            t('feature.track_time_duration.reminders.schedule_sleep_content', { time: startTime }),
                        cancelText: t('feature.track_time_duration.reminders.later'),
                        confirmText: t('feature.track_time_duration.reminders.open'),
                        showCancel: true,
                        confirm: () => {
                            checkNotification()
                            // Linking.openURL('app-settings:notifications')
                        }
                    })
                }
            })
        }

    }

    global.popMixScheduleAlert = (time1, time2) => {
        if (process.env.TARO_ENV == 'weapp') {
            if (permission.wxPubFollow) {
            }
            else {
                showAlert({
                    title: t('feature.track_time_duration.reminders.schedule_title'),
                    content:
                        t('feature.track_time_duration.reminders.schedule_mix_content'),
                    cancelText: t('feature.track_time_duration.reminders.later'),
                    confirmText: t('feature.track_time_duration.reminders.open'),
                    showCancel: true,
                    confirm: () => {
                        followWxPub()
                    }

                })

            }
        }
        else {
            PushNotification.checkPermissions((res) => {
                //允许授权
                if (res.authorizationStatus == 2) {
                }
                else {
                    showAlert({
                        title: t('feature.track_time_duration.reminders.schedule_title'),
                        content:
                            t('feature.track_time_duration.reminders.schedule_mix_content'),
                        cancelText: t('feature.track_time_duration.reminders.later'),
                        confirmText: t('feature.track_time_duration.reminders.open'),
                        showCancel: true,
                        confirm: () => {
                            checkNotification()
                            // Linking.openURL('app-settings:notifications')
                        }

                    })
                }
            })
        }

    }

    function followWxPub() {
        const resource = common.resources.filter((item: any) => {
            return item.code == 'follow_wx_pub'
        })
        jumpPage('/pages/common/H5?title=fast16cc 关注服务号&url=' + resource[0].url)
    }

    function modalContent() {
        if (showModal || showModal2) {
            return <Modal
                testInfo={debugInfo}
                dismiss={() => {
                    setDebugInfo(null)
                    setShowModal(false);
                    setShowModal2(false);
                    global.pauseIndexTimer = false
                }}
                confirm={() => { }}>
                {
                    showModal ? modalDetail : modalDetail2
                }
            </Modal>
        }
        return <View />
    }

    async function getStorage(key: string) {
        try {
            const res = await Taro.getStorage({ key });
            return res.data;
        } catch {
            return '';
        }
    }

    function more() {
        jumpPage('/pages/common/RecordsHistory?type=time&title=time', 'RecordsHistory', navigation, {
            type: 'time',
            title: 'time'
        })
    }

    function tapLogin() {
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
        }
    }

    function headerView() {
        return <ClockHeader homeData={homeData} />
    }

    global.scrollToLatest = () => {
        needScroll = true;


    }

    var timestamp = new Date().getTime()

    function render() {
        var smallTitle = ''
        const weekday = TimeFormatter.getDayOfWeek(new Date().getDay(), true);
        const date = global.language == 'en' ? dayjs().format('MMMM DD') : dayjs().format('M月D日 ')
        smallTitle = global.language == 'en' ? (weekday + ', ' + date) : (date + weekday);


        if (!loaded) {
            return <Layout type={TemplateType.customHeader} header={headerView()} title={smallTitle} titleShowStyle={NaviBarTitleShowType.scrollToShow}>
                <View style={{ width: rpxToPx(750), height: rpxToPx(900), display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                    <AtActivityIndicator size={40} color="#fff" />
                    {
                        process.env.TARO_ENV == 'weapp' && <Tabbar index={0} />
                    }
                </View>
            </Layout>
        }
        return <Layout type={TemplateType.customHeader} header={headerView()} title={smallTitle} titleShowStyle={NaviBarTitleShowType.scrollToShow}>

            <View className="index_container">
                {
                    needShowAddTip && showTip && <Tooltip title="添加到我的小程序" closeTip={() => { setNeedShowAddTip(false) }} />
                }
                <Text className="count">{count}</Text>

                <Box>
                    <View>
                        <IndexItem type="FAST_SLEEP" data={homeData} time={timestamp} showStage={false} />
                        {

                            user.isLogin ? <IndexConsole record={homeData} count={count} /> : <StageSelector />
                        }

                    </View>
                </Box>

                {
                    user.isLogin && records.length > 0 && <View className="index_section" style={{ marginTop: -rpxToPx(25-12), marginBottom: -rpxToPx(20) }}>
                        <Text className="index_section_title">{t('feature.track_time_duration.record_fast_sleep.header.latest_record')}</Text>
                        {
                            process.env.TARO_ENV == 'weapp' && <Text className="fast_sleep_more index_more" onClick={more}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</Text>
                        }
                        {
                            process.env.TARO_ENV == 'rn' && <View onClick={more}>
                                <GradientText style={{ fontSize: rpxToPx(32), fontWeight: 'bold' }}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</GradientText>
                            </View>
                        }
                    </View>
                }
                {
                    user.isLogin && records.length==0 && <View  style={{ marginTop: -rpxToPx(25) }}/>
                }

                {
                    user.isLogin && records.length > 0 && <View id="latest" className="fast_sleep_item_bg">
                        <RecordFastSleep data={records[0]} type='record' index={-20000} />
                    </View>
                }
                {
                    loaded && !user.isLogin && <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: rpxToPx(36) }}>
                        <ChooseScenarioBtn title={t('feature.auth.login.login_now')} background={ColorType.fast} onClick={tapLogin} />
                    </View>
                }

                {
                    showErrorPage && <NoData refresh={() => { getCheckData() }} />
                }

                {
                    user.isLogin && !showErrorPage && <View style={{ display: 'flex', flexDirection: 'column' }}>
                        <View className="index_section">
                            <Text className="index_section_title">{t('feature.track_time_duration.weekly.title')}</Text>
                        </View>
                        <WeekCalendar />
                    </View>
                }

                {
                    user.isLogin && <Streaks count={count} />
                }


                {
                    user.isLogin && !showErrorPage && <View className="index_section" style={{height:rpxToPx(120),marginTop:rpxToPx(40)}}>
                        <Text className="index_main_title">{t('feature.pro.for_pro')}</Text>
                    </View>
                }

                {
                    user.isLogin && !showErrorPage && <View className="index_section" style={{marginBottom:-rpxToPx(10),marginTop:-rpxToPx(40)}}>
                        <Text className="index_section_title">{t('feature.day_night.group_title')}</Text>
                    </View>
                }
                {
                    user.isLogin && !showErrorPage && <DayNightSwiper count={count} schedule={schedules} homeData={homeData} />
                }

                {
                    user.isLogin && (process.env.TARO_ENV == 'weapp') && <View className="index_section">
                        <Text className="index_section_title">{t('page.explore.title')}</Text>
                    </View>
                }

                {
                    user.isLogin && (process.env.TARO_ENV == 'weapp') && <Discovery />
                }

                
                {
                    modalContent()
                }

                {
                    homeData && <SegmentPop data={homeData} />
                }
                {
                    homeData && <DurationPicker record={(homeData as any).current_record} />
                }

                {
                    user.isLogin && user.test_user && homeData && (homeData as any).access && <View style={{ display: 'flex', flexDirection: 'column' }}>
                        <Text style={{ color: '#fff', fontSize: 15 }}>current status:{(homeData as any).access.current.qualification.status}</Text>
                        <Text style={{ color: '#fff', fontSize: 15 }}>previous status:{(homeData as any).access.previous.qualification.status}</Text>
                        <Text style={{ color: '#fff', fontSize: 15 }}>trigger event:{(homeData as any).access.current.qualification.trigger_event}</Text>
                        <Text style={{ color: '#fff', fontSize: 15 }}>lost_access_total:{(homeData as any).access.current.qualification.condition.lost_access_total}</Text>
                        <Text style={{ color: '#fff', fontSize: 15 }}>streak_fast_min_required:{(homeData as any).access.current.qualification.condition.streak_fast_min_required}</Text>
                    </View>
                }
                {
                    process.env.TARO_ENV == 'weapp' && <View style={{ height: 100 }} />
                }
                <Tabbar index={0} />
            </View>
        </Layout>
    }
    return render()
}