style: 修复球局日期展示问题

src/game_pages/detail/components/GameInfo/index.tsx

@@ -1,5 +1,5 @@
 import Taro from "@tarojs/taro";
-import dayjs from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 import "dayjs/locale/zh-cn";
 import { calculateDistance } from "@/utils";
 import { View, Image, Text, Map } from "@tarojs/components";
@@ -8,6 +8,28 @@ import styles from "./index.module.scss";
 
 dayjs.locale("zh-cn");
 
+function genGameLength(startTime: Dayjs, endTime: Dayjs) {
+  if (!startTime || !endTime) {
+    return "";
+  }
+  const hours = endTime.diff(startTime, "hour");
+  if (Math.floor(hours / 24) > 1) {
+    return `${Math.floor(hours / 24)}天${hours % 24}小时`;
+  }
+  return `${hours}小时`;
+}
+
+function genGameRange(startTime: Dayjs, endTime: Dayjs) {
+  if (!startTime || !endTime) {
+    return "";
+  }
+  // 如果跨天（自然日）
+  if (!startTime.isSame(endTime, "day")) {
+    return `${startTime.format("HH:mm")} - ${endTime.format("MM月DD日 HH:mm")}`;
+  }
+  return `${startTime.format("HH:mm")} - ${endTime.format("HH:mm")}`;
+}
+
 // 球局信息
 export default function GameInfo(props) {
   const { detail, currentLocation } = props;
@@ -41,13 +63,13 @@ export default function GameInfo(props) {
 
   const startTime = dayjs(start_time);
   const endTime = dayjs(end_time);
-  const game_length = endTime.diff(startTime, "minutes") / 60;
+  const game_length = genGameLength(startTime, endTime);
 
   const startMonth = startTime.format("M");
   const startDay = startTime.format("D");
   const theDayOfWeek = startTime.format("dddd");
   const startDate = `${startMonth}月${startDay}日 ${theDayOfWeek}`;
-  const gameRange = `${startTime.format("HH:mm")} - ${endTime.format("HH:mm")}`;
+  const gameRange = genGameRange(startTime, endTime);
 
   return (
     <View className={styles["detail-page-content-game-info"]}>
@@ -80,7 +102,7 @@ export default function GameInfo(props) {
           >
             <View className={styles.date}>{startDate}</View>
             <View className={styles["venue-time"]}>
-              {gameRange} （{game_length}小时）
+              {gameRange} ({game_length})
             </View>
           </View>
         </View>