Merge branch 'feat/liujie'

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

@@ -22,23 +22,27 @@ export default function Carousel(props) {
     const current_aspect_ratio = max_width / max_height;
     let container_width = 0;
     for (const imageUrl of imageList) {
-      const { width, height } = await Taro.getImageInfo({ src: imageUrl });
+      try {
-      if (width && height) {
+        const { width, height } = await Taro.getImageInfo({ src: imageUrl });
-        const aspect_ratio = width / height;
+        if (width && height) {
-        const latest_w_h = { width, height };
+          const aspect_ratio = width / height;
-        if (aspect_ratio < current_aspect_ratio) {
+          const latest_w_h = { width, height };
-          latest_w_h.width = max_height * aspect_ratio;
+          if (aspect_ratio < current_aspect_ratio) {
-          latest_w_h.height = max_height;
+            latest_w_h.width = max_height * aspect_ratio;
-        } else {
+            latest_w_h.height = max_height;
-          latest_w_h.width = max_width;
+          } else {
-          latest_w_h.height = max_width / aspect_ratio;
+            latest_w_h.width = max_width;
+            latest_w_h.height = max_width / aspect_ratio;
+          }
+          container_width += latest_w_h.width + 12;
+          latest_list.push({
+            url: imageUrl,
+            width: latest_w_h.width,
+            height: latest_w_h.height,
+          });
         }
-        container_width += latest_w_h.width + 12;
+      } catch (error) {
-        latest_list.push({
+        console.log(error);
-          url: imageUrl,
-          width: latest_w_h.width,
-          height: latest_w_h.height,
-        });
       }
     }
     setList(latest_list);

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>