update

src/features/trackTimeDuration/components/DayNightCard.scss

@@ -150,4 +150,23 @@
 .day_night_detail_icon{
     margin-right: 22px;
     // background-color: red;
+}
+
+.duration_title2 {
+    font-size: 32px;
+    line-height: 32px;
+    color: #fff;
+    font-weight: 400;
+    opacity: 0.6;
+}
+
+.daynightsummary{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.sunicon{
+    width: 72px;
+    height: 66px;
 }

src/features/trackTimeDuration/components/DayNightCard.tsx

@@ -1,4 +1,4 @@
-import { PageContainer, Switch, Text, View } from '@tarojs/components'
+import { PageContainer, Switch, Text, View,Image } from '@tarojs/components'
 import './DayNightCard.scss'
 import { ColorType } from '@/context/themes/color'
 import { useEffect, useState } from 'react'
@@ -405,7 +405,7 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
                     })
                 },
                 fail(res) {
-                    if (res.errMsg=='Permissions denied!'){
+                    if (res.errMsg == 'Permissions denied!') {
                         alert('aaa')
                     }
                     console.log(res)
@@ -709,6 +709,66 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         //`Yesterday ${sunsetTime} - Today ${sunriseTmrTime}`
     }
 
+    function getSunsetTime(){
+        if (props.isNight){
+            if (!authInfo || !(authInfo as any).lat) {
+                if (new Date().getHours() >= 6) {
+                    return `${t('feature.day_night.tonight')} ${sunsetTime}`
+                }
+                return `${t('feature.day_night.last_night')} ${sunsetTime}`
+                // return `Yesterday ${sunsetTime} - Today ${sunriseTmrTime}`
+            }
+            if (nightDate.getDate() == new Date().getDate()) {
+                return `${t('feature.day_night.tonight')} ${sunsetTime.substring(0, 5)}`
+            }
+            return `${t('feature.day_night.last_night')} ${sunsetTime.substring(0, 5)}`
+        }
+        if (!authInfo || !(authInfo as any).lat) {
+            if (new Date().getHours() >= 18) {
+                return `${t('feature.day_night.tomorrow')} ${sunriseTime}`
+
+                // return `Tomorrow ${sunriseTime} - ${sunsetTime}`
+            }
+            return `${t('feature.day_night.today')} ${sunriseTime}`
+            // return `Today ${sunriseTime} - ${sunsetTime}`
+        }
+        if (dayDate.getDate() == new Date().getDate()) {
+            return `${t('feature.day_night.today')} ${sunriseTime.substring(0, 5)}`
+            // return `Today ${sunriseTime} - ${sunsetTime}`
+        }
+        return `${t('feature.day_night.tomorrow')} ${sunriseTime.substring(0, 5)}`
+    }
+
+    function getSunriseTime(){
+        if (props.isNight){
+            if (!authInfo || !(authInfo as any).lat) {
+                if (new Date().getHours() >= 6) {
+                    return `${t('feature.day_night.tomorrow_morning')} ${sunriseTmrTime}`
+                }
+                return `${t('feature.day_night.this_morning')} ${sunriseTmrTime}`
+                // return `Yesterday ${sunsetTime} - Today ${sunriseTmrTime}`
+            }
+            if (nightDate.getDate() == new Date().getDate()) {
+                return `${t('feature.day_night.tomorrow_morning')} ${sunriseTmrTime.substring(0, 5)}`
+            }
+            return `${t('feature.day_night.this_morning')} ${sunriseTmrTime.substring(0, 5)}`
+        }
+        if (!authInfo || !(authInfo as any).lat) {
+            if (new Date().getHours() >= 18) {
+                return `${t('feature.day_night.tomorrow')} ${sunsetTime}`
+
+                // return `Tomorrow ${sunriseTime} - ${sunsetTime}`
+            }
+            return `${t('feature.day_night.today')} ${sunsetTime}`
+            // return `Today ${sunriseTime} - ${sunsetTime}`
+        }
+        if (dayDate.getDate() == new Date().getDate()) {
+            return `${t('feature.day_night.today')} ${sunsetTime.substring(0, 5)}`
+            // return `Today ${sunriseTime} - ${sunsetTime}`
+        }
+        return `${t('feature.day_night.tomorrow')} ${sunsetTime.substring(0, 5)}`
+    }
+
     function dayDuration() {
         if (!authInfo || !(authInfo as any).lat) {
             if (new Date().getHours() >= 18) {
@@ -775,7 +835,7 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         dispatch(showDay(true))
         Taro.showModal({
             title: 'Login Required',
-            content: props.isNight?'Log in to see your daily local nighttime from sunset to sunrise.':'Log in to see your daily local daytime from sunrise to sunset.',
+            content: props.isNight ? 'Log in to see your daily local nighttime from sunset to sunrise.' : 'Log in to see your daily local daytime from sunrise to sunset.',
             cancelText: 'Later',
             confirmText: 'Login',
             success: function (res) {
@@ -810,7 +870,7 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
     }
 
     function operate(e) {
-        if (process.env.TARO_ENV=='weapp'){
+        if (process.env.TARO_ENV == 'weapp') {
             e.stopPropagation()
         }
         Taro.showActionSheet({
@@ -895,9 +955,22 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
             user.isLogin && !dayStore.showDayRing && <View style={{ color: '#fff' }} onClick={auth}>{props.isNight ? '显示当地夜晚时间' : '显示当地白天时间'}</View>
         }
         {
-            user.isLogin && dayStore.showDayRing && <View style={{ display: 'flex', flexDirection: 'column' }} onClick={showLocationAlert}>
+            user.isLogin && dayStore.showDayRing && <View style={{ display: 'flex', flexDirection: 'column' }} onClick={showLocationAlert} onLongPress={longClick}>
                 <Text className='day_night_value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? nightDuration() : dayDuration()}</Text>
                 <Text className='day_night_desc'>{props.isNight ? nightDurationDesc1() : dayDurationDesc1()}</Text>
+
+                <View className='daynightsummary'>
+                    <View style={{display:'flex',flexDirection:'column'}}>
+                        <Image className='sunicon' src={require(props.isNight?'@assets/images/sunset.png':'@assets/images/sunrise.png')}/>
+                        <Image className='sunicon' src={require(props.isNight?'@assets/images/sunrise.png':'@assets/images/sunset.png')}/>
+                    </View>
+                    <View style={{display:'flex',flexDirection:'column'}}>
+                        <Text className='duration_title2'>{props.isNight?'日落':'日出'}</Text>
+                        <Text style={{color:props.isNight?ColorType.night:ColorType.day}}>{props.isNight?getSunsetTime():getSunriseTime()}</Text>
+                        <Text className='duration_title2'>{!props.isNight?'日落':'日出'}</Text>
+                        <Text style={{color:!props.isNight?ColorType.night:ColorType.day}}>{!props.isNight?getSunsetTime():getSunriseTime()}</Text>
+                    </View>
+                </View>
                 {
                     authInfo && authInfo.lat ?
                         <View style={{ display: 'flex', flexDirection: 'row', marginTop: rpxToPx(18) }} onClick={operate}>