update

src/app/time_of_day/index_time.scss

@@ -1,12 +1,13 @@
-.page_container{
+.page_container {
     flex: 1;
     background-color: #fff;
     align-items: center;
     padding-top: 300px;
 }
 
-.btn_bg{
+.btn_bg {
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
     width: 500px;
@@ -17,13 +18,13 @@
     margin-top: 88px;
 }
 
-.btn_text{
+.btn_text {
     color: #CACACA;
     font-weight: bold;
     font-size: 40px;
 }
 
-.footer{
+.footer {
     position: absolute;
     bottom: 116px;
     display: flex;
@@ -32,23 +33,23 @@
     justify-content: center;
 }
 
-.footer_detail{
+.footer_detail {
     flex-direction: row;
     align-items: center;
 }
 
-.footer_text{
+.footer_text {
     font-weight: bold;
     font-size: 28px;
     color: #CACACA;
 }
 
-.footer_icon{
+.footer_icon {
     width: 28px;
     height: 28px;
 }
 
-.ring_center{
+.ring_center {
     position: absolute;
     left: 0;
     right: 0;
@@ -58,11 +59,12 @@
     justify-content: center;
 }
 
-.sun{
+.sun {
     width: 48px;
     height: 48px;
 }
-.time{
+
+.time {
     margin-top: 20px;
     font-weight: bold;
     font-size: 72px;
@@ -70,7 +72,7 @@
     color: #CACACA;
 }
 
-.date{
+.date {
     margin-top: 20px;
     font-weight: bold;
     font-size: 32px;
@@ -78,28 +80,142 @@
     color: #CACACA;
 }
 
-.location{
+.location {
     flex-direction: row;
     align-items: center;
     justify-content: center;
     margin-top: 144px;
 }
 
-.location_icon{
+.location_icon {
     width: 32px;
     height: 32px;
 }
 
-.location_text{
+.location_text {
     font-weight: bold;
     color: #CACACA;
     font-size: 40px;
     margin-left: 8px;
 }
 
-.timezone{
-    margin-top: 20px;
+.timezone {
     font-size: 24px;
     font-weight: bold;
     color: #CACACA;
+}
+
+.more {
+    width: 48px;
+    height: 48px;
+}
+
+.modal_bg {
+    background-color: #EBEBEB;
+    padding-bottom: 80px;
+    padding-top: 60px;
+    border-top-left-radius: 36px;
+    border-top-right-radius: 36px;
+}
+
+.check {
+    width: 48px;
+    height: 48px;
+}
+
+.language_content {
+    margin-left: 86px;
+    margin-right: 46px;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+.dst_content {
+    margin-left: 20px;
+    margin-right: 20px;
+    flex-direction: row;
+}
+
+.dst_item {
+    flex-direction: row;
+    margin-bottom: 40px;
+}
+
+.dst_card {
+    background-color: #fff;
+    border-radius: 36px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: 36px;
+    width: 240px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+.language_item {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 96px;
+}
+
+.language_text {
+    color: #262626;
+    font-size: 28px;
+}
+
+.line {
+    background-color: #262626;
+    opacity: 0.2;
+    height: 2px;
+    transform: scaleY(0.5);
+}
+
+.month {
+    color: #1C1C1C;
+    font-size: 28px;
+    line-height: 40px;
+}
+
+.week {
+    color: #1C1C1C;
+    font-size: 28px;
+    line-height: 40px;
+}
+
+.day {
+    font-size: 84px;
+    line-height: 92px;
+    color: #1C1C1C;
+    font-weight: bold;
+}
+
+.year {
+    font-size: 32px;
+    line-height: 40px;
+    color: #EAE9E9;
+}
+
+.dst_title {
+    font-size: 36px;
+    line-height: 48px;
+    color: #1C1C1C;
+    font-weight: bold;
+    margin-top: 20px;
+}
+
+.dst_desc {
+    font-size: 28px;
+    line-height: 40px;
+    margin-top: 10px;
+    color: #9E9E9E;
+}
+
+.dst_note {
+    color: #9E9E9E;
+    margin-top: 10px;
+    font-size: 16px;
+    line-height: 28px;
 }

src/app/time_of_day/index_time.tsx

@@ -4,7 +4,10 @@ import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
 import { getCommon, getDot } from "@/features/trackTimeDuration/hooks/RingData";
 import Rings, { RingCommon, BgRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
 import { useEffect, useState } from "react";
+import DeviceInfo from 'react-native-device-info';
 import dayjs from "dayjs";
+import Modal from "@/components/layout/Modal.weapp";
+import { loginAnonymous } from "./services/net";
 
 let LinearGradient, useActionSheet, useNavigation
 if (process.env.TARO_ENV == 'rn') {
@@ -20,14 +23,25 @@ export default function IndexTimePage() {
     }
 
     const [count, setCount] = useState(0)
+    const [showLanguage, setShowLanguage] = useState(false)
+    const [showDst, setShowDst] = useState(false)
 
 
     useEffect(() => {
+        login()
         setInterval(() => {
             setCount(t => t + 1)
         }, 1000)
     }, [])
 
+    function login(){
+        loginAnonymous(DeviceInfo.getDeviceSync()).then(res=>{
+            console.log('login success',res)
+        }).catch(e=>{
+            console.log('login error',e)
+        })
+    }
+
     function chooseLocation() {
         jumpPage('', 'map', navigation)
     }
@@ -62,6 +76,58 @@ export default function IndexTimePage() {
         return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={'smal11l'} />
     }
 
+    function languageModalContent() {
+        return <View className="modal_bg">
+            <View className="language_content">
+                <View className="language_item">
+                    <Text className="language_text">English</Text>
+                    <Image className="check" src={require('@assets/index_time/check.png')} />
+                </View>
+                <View className="line" />
+                <View className="language_item">
+                    <Text className="language_text">中文</Text>
+                </View>
+            </View>
+        </View>
+    }
+
+    function dstModalContent() {
+        return <View className="modal_bg">
+            <View className="dst_content">
+                <View className="dst_item">
+                    <View className="dst_card">
+                        <Text className="month">{dayjs().format('MMMM')}</Text>
+                        <Text className="day">{dayjs().format('D')}</Text>
+                        <Text className="week">{dayjs().format('dddd')}</Text>
+                        <Text className="year">{dayjs().format('YYYY')}</Text>
+                    </View>
+                </View>
+                <View style={{flex:1}}>
+                    <Text className="dst_title">Last change</Text>
+                    <Text className="dst_desc">Summer time started</Text>
+                    <Text className="dst_note"> Time was set forward 1 hour from 02:00 to 03:00.
+                    Time zone changed to UTC-7, Pacific Daylight Time (PDT).</Text>
+                </View>
+            </View>
+            <View className="dst_content">
+                <View className="dst_item">
+                    <View className="dst_card">
+                        <Text className="month">{dayjs().format('MMMM')}</Text>
+                        <Text className="day">{dayjs().format('D')}</Text>
+                        <Text className="week">{dayjs().format('dddd')}</Text>
+                        <Text className="year">{dayjs().format('YYYY')}</Text>
+                    </View>
+                </View>
+                <View style={{flex:1}}>
+                    <Text className="dst_title">Last change</Text>
+                    <Text className="dst_desc">Summer time started</Text>
+                    <Text className="dst_note"> Time was set forward 1 hour from 02:00 to 03:00.
+                    Time zone changed to UTC-7, Pacific Daylight Time (PDT).</Text>
+                </View>
+            </View>
+        </View>
+    }
+
     return <View className="page_container">
         <View style={{ position: 'relative' }}>
             {
@@ -79,14 +145,45 @@ export default function IndexTimePage() {
             <Text className="location_text">Beijing</Text>
         </View>
 
-        <Text className="timezone">UTC+8</Text>
+        <View style={{ flexDirection: 'row', marginTop: 10, alignItems: 'center' }} onClick={() => setShowDst(true)}>
+            <Text className="timezone">UTC+8</Text>
+            <Image className="location_icon" src={require('@assets/index_time/arrow_right.png')} />
+        </View>
+
 
         <View className="btn_bg" onClick={chooseLocation}>
             <Text className="btn_text">Pick Location</Text>
+            <Image className="more" src={require('@assets/index_time/more.png')} />
         </View>
-        <View className="footer">
+        <View className="footer" onClick={() => setShowLanguage(true)}>
             <Text className="footer_text">English</Text>
             <Image className="footer_icon" src={require('@assets/index_time/arrow.png')} />
         </View>
+        {
+            showLanguage && <Modal
+                testInfo={null}
+                themeIsWhite={true}
+                dismiss={() => {
+                    setShowLanguage(false)
+                }}
+                confirm={() => { }}>
+                {
+                    languageModalContent()
+                }
+            </Modal>
+        }
+        {
+            showDst && <Modal
+                testInfo={null}
+                themeIsWhite={true}
+                dismiss={() => {
+                    setShowDst(false)
+                }}
+                confirm={() => { }}>
+                {
+                    dstModalContent()
+                }
+            </Modal>
+        }
     </View>
 }

src/app/time_of_day/services/net.tsx

@@ -0,0 +1,17 @@
+import { request } from "@/services/http/request"
+const baseUrl = 'https://api.fast.dev.liveplus.fun'
+const API_LOGIN_ANONYMOUS = `${baseUrl}/api/user/login/anonymous`
+
+export const loginAnonymous = (uuid: string) => {
+
+    return new Promise((resolve, reject) => {
+        request({
+            url: API_LOGIN_ANONYMOUS, method: 'POST', data: { client_key: uuid }
+        }).then(res => {
+            resolve(res)
+            // dispatch(loginSuccess(res));
+        }).catch(e => {
+            reject(e)
+        })
+    })
+}

src/components/layout/Modal.weapp.tsx

@@ -22,7 +22,8 @@ export default function Modal(props: {
     confirm?: Function,
     themeColor?: string,
     modalType?: ModalType,
-    cancelCatchMove?: boolean
+    cancelCatchMove?: boolean,
+    themeIsWhite?: boolean
 }) {
 
     const [isDismiss, setIsDismiss] = useState(false)
@@ -50,7 +51,7 @@ export default function Modal(props: {
     const startAnimation = () => {
         Animated.spring(animation, {
             toValue: 1,
-            duration:50,
+            duration: 50,
             useNativeDriver: true,
         }).start();
     };
@@ -58,7 +59,7 @@ export default function Modal(props: {
     const endAnimation = () => {
         Animated.spring(animation, {
             toValue: 0,
-            duration:50,
+            duration: 50,
             useNativeDriver: true,
         }).start();
         console.log('end')
@@ -110,7 +111,7 @@ export default function Modal(props: {
         }, 250)
     }
 
-    function rndismiss(){
+    function rndismiss() {
         if (props.modalType == ModalType.center) {
             props.dismiss()
             return
@@ -128,12 +129,12 @@ export default function Modal(props: {
         // animationType="slide"
         // style={{backgroundColor:'red'}}
         >
-            <View style={{ flex: 1, backgroundColor: '#000000cc' }}>
+            <View style={{ flex: 1, backgroundColor: props.themeIsWhite?'#ffffff90':'#000000cc' }}>
                 <View style={{ flex: 1, backgroundColor: 'transparent' }} onClick={(e) => {
                     rndismiss()
                 }}></View>
-                <Animated.View className={isDismiss ? 'modal_bottom_content modal_bottom_dismiss' : 'modal_bottom_content'} 
-                style={[{ flexShrink: 0 },animatedStyle]} onClick={onClick}>
+                <Animated.View className={isDismiss ? 'modal_bottom_content modal_bottom_dismiss' : 'modal_bottom_content'}
+                    style={[{ flexShrink: 0 }, animatedStyle]} onClick={onClick}>
                     {
                         props.children
                     }

src/pages/rn/RNMain.tsx

@@ -80,7 +80,7 @@ export default function RNMain() {
   const ProfilePage = () => <Profile />
   // const FoodPage = ()=><Food/>
 
-  if (kIsAndroid) {
+  if (kIsAndroid || kIsIOS) {
     // return <IndexTimePage />
     return <NavigationContainer theme={{
       dark: false,
@@ -99,8 +99,8 @@ export default function RNMain() {
           borderBottomWidth: 0, // 隐藏导航条底部边框
           borderBottomColor: 'red'
         },
-        headerTintColor: 'white',
-        tabBarStyle: { backgroundColor: 'black' }, // tabbar的背景色
+        headerTintColor: 'black',
+        tabBarStyle: { backgroundColor: 'white' }, // tabbar的背景色
         tabBarActiveTintColor: 'white', // 活动标签的颜色
         tabBarInactiveTintColor: 'gray', // 非活动标签的颜色
       })}>

src/services/http/api.js

@@ -1,4 +1,4 @@
-const online = process.env.TARO_ENV == 'weapp' ? true : true;
+const online = process.env.TARO_ENV == 'weapp' ? false : false;
 
 import { WX_VERSION as _WX_VERSION, APP_VERSION as _APP_VERSION } from "../../../config/env";