Merge branch 'feat/liujie'

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

@@ -22,6 +22,7 @@ export default function Carousel(props) {
     const current_aspect_ratio = max_width / max_height;
     let container_width = 0;
     for (const imageUrl of imageList) {
+      try {
         const { width, height } = await Taro.getImageInfo({ src: imageUrl });
         if (width && height) {
           const aspect_ratio = width / height;
@@ -40,6 +41,9 @@ export default function Carousel(props) {
             height: latest_w_h.height,
           });
         }
+      } catch (error) {
+        console.log(error);
+      }
     }
     setList(latest_list);
     setListWidth(container_width);

src/game_pages/detail/components/GameInfo/index.module.scss

@@ -8,10 +8,12 @@
     // gap: 12px;
 
     &-calendar-date {
-      width: 60%;
+      width: auto;
       display: flex;
       align-items: center;
       gap: 16px;
+      flex: 1;
+      min-width: 0;
 
       &-calendar {
         display: flex;
@@ -27,6 +29,7 @@
         overflow: hidden;
         color: #fff;
         background: #536272;
+        flex-shrink: 0;
 
         .month {
           width: 100%;
@@ -57,12 +60,15 @@
 
       &-date {
         display: flex;
+        width: auto;
         flex-direction: column;
         align-items: flex-start;
         justify-content: space-evenly;
         gap: 4px;
         align-self: stretch;
         color: #fff;
+        flex: 1;
+        min-width: 0;
 
         .date {
           color: #fff;
@@ -82,6 +88,12 @@
           font-style: normal;
           font-weight: 400;
           line-height: 20px; /* 166.667% */
+          width: 100%;
+          flex: 1;
+          min-width: 0;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
         }
       }
     }
@@ -90,7 +102,9 @@
       display: flex;
       align-items: flex-end;
       flex-direction: column;
+      width: 80px;
       gap: 4px;
+      flex-shrink: 0;
 
       &-icon {
         width: 20px;

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>